feat: add theme mode support with AppThemeMode enum and AppThemeState service

- Introduced AppThemeMode enum to define theme options: System, Light, Dark.
- Updated AppSettingsDocument to include ThemeMode property.
- Created AppThemeState service to manage current theme mode and handle changes.
- Integrated theme mode handling in CouchbaseLiteAppSettingsService for persistence.
- Added JavaScript for theme management in the frontend, supporting system preference detection.
- Enhanced CSS with theme variables for consistent styling across light and dark modes.
- Updated Playwright tests to ensure sidebar functionality and responsiveness.

Components/Layout/MainLayout.razor

@@ -1,24 +1,16 @@
 @inherits LayoutComponentBase
+@implements IDisposable
+
+@inject AppThemeState ThemeState
+@inject IJSRuntime JS
 
 <div class="page @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
     <div class="sidebar @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
-        <NavMenu IsCollapsed="sidebarCollapsed" />
+        <NavMenu IsCollapsed="sidebarCollapsed" OnToggleSidebar="ToggleSidebar" />
     </div>
 
     <main>
         <div class="top-row px-4">
-            <button
-                type="button"
-                class="sidebar-toggle"
-                @onclick="ToggleSidebar"
-                aria-label="Toggle sidebar"
-                aria-controls="sidebar-navigation"
-                aria-expanded="@(sidebarCollapsed ? "false" : "true")"
-                title="Toggle sidebar">
-                <span class="sidebar-toggle-bar"></span>
-                <span class="sidebar-toggle-bar"></span>
-                <span class="sidebar-toggle-bar"></span>
-            </button>
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 
@@ -37,8 +29,39 @@
 @code {
     private bool sidebarCollapsed = true;
 
+    protected override void OnInitialized()
+    {
+        ThemeState.ThemeModeChanged += HandleThemeModeChanged;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+        {
+            return;
+        }
+
+        var themeMode = await ThemeState.EnsureLoadedAsync();
+        await ApplyThemeAsync(themeMode);
+    }
+
     private void ToggleSidebar()
     {
         sidebarCollapsed = !sidebarCollapsed;
     }
+
+    private void HandleThemeModeChanged(AppThemeMode themeMode)
+    {
+        _ = InvokeAsync(() => ApplyThemeAsync(themeMode).AsTask());
+    }
+
+    private ValueTask ApplyThemeAsync(AppThemeMode themeMode)
+    {
+        return JS.InvokeVoidAsync("workTrackerTheme.setTheme", themeMode.ToString().ToLowerInvariant());
+    }
+
+    public void Dispose()
+    {
+        ThemeState.ThemeModeChanged -= HandleThemeModeChanged;
+    }
 }

Components/Layout/MainLayout.razor.css

@@ -14,8 +14,8 @@ main {
 }
 
 .top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
+    background-color: var(--wt-header-bg);
+    border-bottom: 1px solid var(--wt-header-border);
     justify-content: flex-end;
     height: 3.5rem;
     display: flex;
@@ -23,6 +23,7 @@ main {
 }
 
     .top-row ::deep a, .top-row ::deep .btn-link {
+        color: var(--wt-header-link);
         white-space: nowrap;
         margin-left: 1.5rem;
         text-decoration: none;
@@ -37,30 +38,9 @@ main {
         text-overflow: ellipsis;
     }
 
-.sidebar-toggle {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 0.2rem;
-    width: 2.5rem;
-    height: 2.5rem;
-    margin-right: auto;
-    border: 1px solid #d6d5d5;
-    border-radius: 0.65rem;
-    background: #fff;
-}
-
-.sidebar-toggle-bar {
-    width: 1rem;
-    height: 2px;
-    background: #334155;
-    border-radius: 999px;
-}
-
 @media (max-width: 640.98px) {
     .top-row {
-        justify-content: space-between;
+        justify-content: flex-end;
     }
 
     .top-row ::deep a, .top-row ::deep .btn-link {
@@ -100,10 +80,6 @@ main {
         padding-right: 1.5rem !important;
     }
 
-    .sidebar-toggle {
-        display: inline-flex;
-    }
-
     .sidebar.sidebar-collapsed {
         width: 5rem;
     }

Components/Layout/NavMenu.razor

@@ -4,15 +4,29 @@
 
 @code {
     [Parameter] public bool IsCollapsed { get; set; }
+    [Parameter] public EventCallback OnToggleSidebar { get; set; }
+
+    private Task ToggleSidebarAsync()
+    {
+        return OnToggleSidebar.InvokeAsync();
+    }
 }
 
 <div class="nav-menu-shell @(IsCollapsed ? "nav-menu-shell-collapsed" : string.Empty)" data-testid="sidebar-shell" data-collapsed="@(IsCollapsed ? "true" : "false")">
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="" aria-label="WorkTracker home">
-            <span class="sidebar-brand-full">WorkTracker</span>
-            <span class="sidebar-brand-compact" aria-hidden="true">WT</span>
-        </a>
+<div class="top-row ps-3 pe-3 navbar navbar-dark">
+    <div class="container-fluid nav-menu-header">
+        <button
+            type="button"
+            class="sidebar-toggle"
+            @onclick="ToggleSidebarAsync"
+            aria-label="Toggle sidebar"
+            aria-controls="sidebar-navigation"
+            aria-expanded="@(IsCollapsed ? "false" : "true")"
+            title="Toggle sidebar">
+            <span class="sidebar-toggle-bar"></span>
+            <span class="sidebar-toggle-bar"></span>
+            <span class="sidebar-toggle-bar"></span>
+        </button>
     </div>
 </div>
 

Components/Layout/NavMenu.razor.css

@@ -1,10 +1,19 @@
 .top-row {
     min-height: 3.5rem;
     background-color: rgba(0,0,0,0.4);
+    padding-left: 0.75rem !important;
+    padding-right: 0.75rem !important;
+}
+
+.nav-menu-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
 .navbar-brand {
     font-size: 1.1rem;
+    margin-bottom: 0;
 }
 
 .sidebar-brand-compact {
@@ -15,6 +24,32 @@
     height: 100%;
 }
 
+.sidebar-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.2rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 0.65rem;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    flex: 0 0 auto;
+}
+
+.sidebar-toggle:hover {
+    background: rgba(255, 255, 255, 0.16);
+}
+
+.sidebar-toggle-bar {
+    width: 1rem;
+    height: 2px;
+    background: currentColor;
+    border-radius: 999px;
+}
+
 .bi {
     display: inline-block;
     position: relative;
@@ -122,19 +157,22 @@
         display: none;
     }
 
+    .nav-menu-shell-collapsed .nav-scrollable {
+        display: none;
+    }
+
+    .nav-menu-shell:not(.nav-menu-shell-collapsed) .nav-scrollable {
+        display: block;
+    }
+
     .nav-scrollable {
         height: auto;
     }
 }
 
 @media (min-width: 641px) {
-    .nav-menu-shell-collapsed .top-row {
-        padding-left: 0.5rem !important;
-        padding-right: 0.5rem !important;
-    }
-
     .nav-menu-shell-collapsed .container-fluid {
-        justify-content: center;
+        justify-content: flex-start;
     }
 
     .nav-menu-shell-collapsed .sidebar-brand-full,