From 22f735f034503bb5a9260848c99ddcf09ad22788 Mon Sep 17 00:00:00 2001
From: beo3000 <pakabu@web.de>
Date: Sun, 11 Jan 2026 16:59:31 +0100
Subject: [PATCH] mod: collapsable day header

---
 .../Components/Pages/Days/DayDetails.razor    | 152 +++++++++++-------
 1 file changed, 90 insertions(+), 62 deletions(-)

diff --git a/src/Koogle.Web/Components/Pages/Days/DayDetails.razor b/src/Koogle.Web/Components/Pages/Days/DayDetails.razor
index 8ad6f14..53184fa 100644
--- a/src/Koogle.Web/Components/Pages/Days/DayDetails.razor
+++ b/src/Koogle.Web/Components/Pages/Days/DayDetails.razor
@@ -52,68 +52,76 @@ else
     <!-- Game Event Dialog Host (for elimination/winner dialogs) -->
     <GameEventDialogHost />
 
-    <!-- Header -->
-    <MudPaper Class="pa-4 mb-4">
-        <MudGrid>
-            <MudItem xs="12" md="6">
-                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
-                    <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="NavigateBack" />
-                    <MudText Typo="Typo.h5">@Day.PostDate.ToString("dddd, dd. MMMM yyyy")</MudText>
-                    <MudChip T="string" Size="Size.Medium" Color="GetStatusColor(Day.Status)">
-                        @GetStatusLabel(Day.Status)
-                    </MudChip>
-                </MudStack>
-            </MudItem>
-            <MudItem xs="12" md="6" Class="d-flex justify-end align-center">
-                @if (Day.Status == DayStatus.Started && !GameState.Value.IsGameActive)
-                {
-                    <MudButton Variant="Variant.Filled"
-                               Color="Color.Success"
-                               StartIcon="@Icons.Material.Filled.SportsScore"
-                               OnClick="OpenGameSetupDialog"
-                               Disabled="DayState.Value.IsLoading || Day.Participants.Count == 0"
-                               Class="mr-2">
-                        Neues Spiel
-                    </MudButton>
-                }
-                @if (GameState.Value.IsGameActive)
-                {
-                    <MudButton Variant="Variant.Outlined"
-                               Color="Color.Warning"
-                               StartIcon="@Icons.Material.Filled.Stop"
-                               OnClick="EndGame"
-                               Disabled="DayState.Value.IsLoading"
-                               Class="mr-2">
-                        Spiel beenden
-                    </MudButton>
-                }
-                @if (Day.Status != DayStatus.Closed)
-                {
-                    <MudButton Variant="Variant.Filled"
-                               Color="GetNextStatusColor(Day.Status)"
-                               StartIcon="@GetNextStatusIcon(Day.Status)"
-                               OnClick="AdvanceStatus"
-                               Disabled="DayState.Value.IsLoading"
-                               Class="mr-2">
-                        @GetNextStatusLabel(Day.Status)
-                    </MudButton>
-                }
-                @if (Day.Status == DayStatus.New)
-                {
-                    <MudButton Variant="Variant.Outlined"
-                               Color="Color.Error"
-                               StartIcon="@Icons.Material.Filled.Delete"
-                               OnClick="ConfirmDelete"
-                               Disabled="DayState.Value.IsLoading">
-                        Löschen
-                    </MudButton>
-                }
-            </MudItem>
-        </MudGrid>
-    </MudPaper>
+    <!-- Header - Collapsible -->
+    @if (!_isHeaderCollapsed)
+    {
+        <MudPaper Class="pa-4 mb-4">
+            <MudGrid>
+                <MudItem xs="12" md="6">
+                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
+                        <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="NavigateBack" />
+                        <MudText Typo="Typo.h5" Class="d-none d-md-block">@Day.PostDate.ToString("dddd, dd. MMMM yyyy")</MudText>
+                        <MudText Typo="Typo.subtitle1" Class="d-md-none">@Day.PostDate.ToString("dd.MM.yyyy")</MudText>
+                        <MudChip T="string" Size="Size.Medium" Color="GetStatusColor(Day.Status)">
+                            @GetStatusLabel(Day.Status)
+                        </MudChip>
+                    </MudStack>
+                </MudItem>
+                <MudItem xs="12" md="6" Class="d-flex justify-end align-center flex-wrap gap-2">
+                    @if (Day.Status == DayStatus.Started && !GameState.Value.IsGameActive)
+                    {
+                        <MudButton Variant="Variant.Filled"
+                                   Color="Color.Success"
+                                   StartIcon="@Icons.Material.Filled.SportsScore"
+                                   OnClick="OpenGameSetupDialog"
+                                   Disabled="DayState.Value.IsLoading || Day.Participants.Count == 0">
+                            Neues Spiel
+                        </MudButton>
+                    }
+                    @if (GameState.Value.IsGameActive)
+                    {
+                        <MudButton Variant="Variant.Outlined"
+                                   Color="Color.Warning"
+                                   StartIcon="@Icons.Material.Filled.Stop"
+                                   OnClick="EndGame"
+                                   Disabled="DayState.Value.IsLoading">
+                            Spiel beenden
+                        </MudButton>
+                    }
+                    @if (Day.Status != DayStatus.Closed)
+                    {
+                        <MudButton Variant="Variant.Filled"
+                                   Color="GetNextStatusColor(Day.Status)"
+                                   StartIcon="@GetNextStatusIcon(Day.Status)"
+                                   OnClick="AdvanceStatus"
+                                   Disabled="DayState.Value.IsLoading">
+                            @GetNextStatusLabel(Day.Status)
+                        </MudButton>
+                    }
+                    @if (Day.Status == DayStatus.New)
+                    {
+                        <MudButton Variant="Variant.Outlined"
+                                   Color="Color.Error"
+                                   StartIcon="@Icons.Material.Filled.Delete"
+                                   OnClick="ConfirmDelete"
+                                   Disabled="DayState.Value.IsLoading">
+                            Löschen
+                        </MudButton>
+                    }
+                </MudItem>
+            </MudGrid>
+        </MudPaper>
+    }
 
-    <!-- Main Content with Tabs -->
-    <MudTabs @bind-ActivePanelIndex="_activeTabIndex" Elevation="0" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-4">
+    <!-- Main Content with Tabs + Header Toggle -->
+    <div style="position: relative">
+        <MudIconButton Icon="@(_isHeaderCollapsed ? Icons.Material.Filled.ExpandMore : Icons.Material.Filled.ExpandLess)"
+                       OnClick="ToggleHeader"
+                       Color="Color.Warning"
+                       Size="Size.Small"
+                       Title="@(_isHeaderCollapsed ? "Header anzeigen" : "Header ausblenden")"
+                       Style="position: absolute; right: 8px; top: 8px; z-index: 1" />
+        <MudTabs @bind-ActivePanelIndex="_activeTabIndex" Elevation="0" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-4">
     
     <!-- Tab 1: Details (existing content) -->
         <MudTabPanel Text="Details" Icon="@Icons.Material.Filled.Info">
@@ -464,6 +472,7 @@ else
             <GameBoardPanel />
         </MudTabPanel>
     </MudTabs>
+    </div>
 }
 
 @code {
@@ -474,7 +483,21 @@ else
     private IReadOnlyList<PersonExpenseDto> Expenses => DayState.Value.SelectedDayExpenses;
 
     private Guid? _selectedParticipantId;
-    private int _activeTabIndex = 0;
+    private int _activeTabIndexBacking = 0;
+    private int _activeTabIndex
+    {
+        get => _activeTabIndexBacking;
+        set
+        {
+            _activeTabIndexBacking = value;
+            // Auto-collapse header on game tabs (Eingabe=1, Tafel=2)
+            if (value is 1 or 2)
+            {
+                _isHeaderCollapsed = true;
+            }
+        }
+    }
+    private bool _isHeaderCollapsed = true;
     private DayParticipantDto? SelectedParticipant => Day?.Participants.FirstOrDefault(p => p.PersonId == _selectedParticipantId);
     private IReadOnlyList<ExpenseDto> OneClickExpenses => DayState.Value.AvailableExpenses.Where(e => e.IsOneClick && !e.IsVariable).ToList();
 
@@ -522,6 +545,11 @@ else
         _selectedParticipantId = null;
     }
 
+    private void ToggleHeader()
+    {
+        _isHeaderCollapsed = !_isHeaderCollapsed;
+    }
+
     private void NavigateBack()
     {
         NavigationManager.NavigateTo("/days");