Merge pull request #178 from VidetteMakes/merge/sensit-main

Dark Mode Persistence Via User Profiles

Author: EyeBrawler

MESS/MESS.Blazor/Components/Layout/MainLayout.razor

@@ -4,10 +4,12 @@
 @using System.ComponentModel
 @using MESS.Blazor.Components.Navigator
 @using MESS.Services.UI.DarkMode
+@using MESS.Services.CRUD.ApplicationUser
 @using Microsoft.AspNetCore.Components.Authorization
 @inject NavigationManager Navigation
 @inject AuthenticationStateProvider AuthProvider
 @inject DarkModeInstance DarkModeInstance
+@inject IApplicationUserService ApplicationUserService
 
 <HeadContent>
     <script src="./Scripts/darkmode.js"></script>
@@ -77,7 +79,6 @@
     private bool isSidebarOpen = false;
     private bool ShowSidebarToggle = true;
     private bool ShowDarkModeToggle = true;
-    private bool isDarkMode = false;
 
     /// <summary>
     /// Called by the framework when parameters are set.
@@ -102,6 +103,29 @@
     {
         DarkModeInstance.PropertyChanged += OnDarkModeChanged;
     }
+
+    /// <summary>
+    /// Called after the component renders. On first render, loads the user's dark mode
+    /// preference from their profile and applies it.
+    /// </summary>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            var authState = await AuthProvider.GetAuthenticationStateAsync();
+            var userName = authState.User.Identity?.Name;
+            if (!string.IsNullOrEmpty(userName))
+            {
+                var user = await ApplicationUserService.GetByUserNameAsync(userName);
+                if (user != null)
+                {
+                    DarkModeInstance.Set(user.DarkMode);
+                    await JS.InvokeVoidAsync("setDarkMode", user.DarkMode);
+                    StateHasChanged();
+                }
+            }
+        }
+    }
 
     private void OnDarkModeChanged(object? sender, PropertyChangedEventArgs e)
     {
@@ -126,13 +150,23 @@
     }
 
     /// <summary>
-    /// Toggles dark mode by invoking the JS function and updates the icon.
+    /// Toggles dark mode, applies it via JS, and saves the preference to the user's profile.
     /// </summary>
     private async Task ToggleDarkMode()
     {
         DarkModeInstance.Toggle();
-        isDarkMode = !isDarkMode;
-        await JS.InvokeVoidAsync("toggleDarkMode", isDarkMode);
+        await JS.InvokeVoidAsync("toggleDarkMode");
+
+        var authState = await AuthProvider.GetAuthenticationStateAsync();
+        var userName = authState.User.Identity?.Name;
+        if (!string.IsNullOrEmpty(userName))
+        {
+            var user = await ApplicationUserService.GetByUserNameAsync(userName);
+            if (user != null)
+            {
+                await ApplicationUserService.UpdateDarkModePreferenceAsync(user.Id, DarkModeInstance.IsDarkMode);
+            }
+        }
     }
 
     /// <summary>

MESS/MESS.Blazor/Components/Pages/Phoebe/MenuBar/MenuBarPhoebe.razor

@@ -4,6 +4,7 @@
 @using MESS.Blazor.Components.Pages.Phoebe.WorkInstruction
 @using MESS.Blazor.Components.Pages.Phoebe.WorkInstruction.Import
 @using MESS.Blazor.Components.Pages.Phoebe.WorkInstruction.Export
+@using MESS.Services.CRUD.ApplicationUser
 @using MESS.Services.CRUD.PartDefinitions
 @using MESS.Services.CRUD.WorkInstructions
 @using MESS.Services.DTOs.Products.Detail
@@ -15,6 +16,7 @@
 @using MESS.Services.UI.WorkInstructionEditor
 @inject AuthenticationStateProvider AuthProvider
 @inject IJSRuntime JS
+@inject IApplicationUserService ApplicationUserService
 @inject IWorkInstructionEditorService EditorService
 @inject IWorkInstructionService WorkInstructionService
 @inject IPartDefinitionService PartDefinitionService
@@ -162,16 +164,19 @@
     Visible="@_showExportDialog"
     VisibleChanged="@(val => _showExportDialog = val)" />
 
-<ProductAssociationDialog
-    AllProducts="@Products"
-    SelectedProducts="@(ActiveDialog.SelectedProductNames)"
-    SelectedProductsChanged="OnDialogProductsChanged"
-    IsVisible="@ActiveDialog.IsVisible"
-    IsVisibleChanged="@(val => ActiveDialog.IsVisible = val)"
-    HeaderText="@ActiveDialog.HeaderText"
-    ConfirmButtonText="@ActiveDialog.ConfirmButtonText"
-    AllowsRenaming="@(ActiveDialog.Type == DialogType.SaveAs)"
-    OnConfirmed="HandleDialogConfirmed" />
+@if (Products is not null)
+{
+    <ProductAssociationDialog
+        AllProducts="@Products"
+        SelectedProducts="@(ActiveDialog.SelectedProductNames)"
+        SelectedProductsChanged="OnDialogProductsChanged"
+        IsVisible="@ActiveDialog.IsVisible"
+        IsVisibleChanged="@(val => ActiveDialog.IsVisible = val)"
+        HeaderText="@ActiveDialog.HeaderText"
+        ConfirmButtonText="@ActiveDialog.ConfirmButtonText"
+        AllowsRenaming="@(ActiveDialog.Type == DialogType.SaveAs)"
+        OnConfirmed="HandleDialogConfirmed" />
+}
 
 @code {
     private string? ActiveLineOperator { get; set; }
@@ -399,10 +404,20 @@
 
     private async Task ToggleDarkMode()
     {
-        await JS.InvokeVoidAsync("document.body.classList.toggle", "dark-mode");
-        var isDark = await JS.InvokeAsync<bool>("document.body.classList.contains", "dark-mode");
-        _darkModeIcon = isDark ? "bi bi-sun" : "bi bi-moon-stars";
         DarkModeInstance.Toggle();
+        _darkModeIcon = DarkModeInstance.IsDarkMode ? "bi bi-sun" : "bi bi-moon-stars";
+        await JS.InvokeVoidAsync("toggleDarkMode");
+
+        var authState = await AuthProvider.GetAuthenticationStateAsync();
+        var userName = authState.User.Identity?.Name;
+        if (!string.IsNullOrEmpty(userName))
+        {
+            var user = await ApplicationUserService.GetByUserNameAsync(userName);
+            if (user != null)
+            {
+                await ApplicationUserService.UpdateDarkModePreferenceAsync(user.Id, DarkModeInstance.IsDarkMode);
+            }
+        }
     }
 
     private async Task ToggleSidebar()

MESS/MESS.Blazor/Components/Pages/Phoebe/WorkInstruction/Export/WorkInstructionExportDialog.razor

@@ -32,13 +32,16 @@
         </FluentDialogBody>
 
         <FluentDialogFooter>
-            <WorkInstructionExportButton 
-                @ref="_exportButton"
-                WorkInstruction="WorkInstruction"
-                OnDownloadComplete="Close"
-                OnDownloadStateChanged="HandleDownloadStateChanged"
-                OnProgressChanged="HandleProgressChanged"/>
-            
+            @if (WorkInstruction is not null)
+            {
+                <WorkInstructionExportButton 
+                    @ref="_exportButton"
+                    WorkInstruction="WorkInstruction"
+                    OnDownloadComplete="Close"
+                    OnDownloadStateChanged="HandleDownloadStateChanged"
+                    OnProgressChanged="HandleProgressChanged"/>
+            }
+
             <button type="button"
                     class="btn btn-sm btn-outline-secondary"
                     @onclick="CancelExport">

MESS/MESS.Blazor/Program.cs

@@ -122,7 +122,7 @@
 // Setup FluentUI
 builder.Services.AddFluentUIComponents();
 
-builder.Services.AddSingleton<DarkModeInstance>();
+builder.Services.AddScoped<DarkModeInstance>();
 
 
 

MESS/MESS.Blazor/wwwroot/Scripts/darkmode.js

@@ -172,6 +172,12 @@ window.toggleDarkMode = function () {
     applyTheme(manualOverride);
 };
 
+window.setDarkMode = function (isDark) {
+    manualOverride = isDark;
+    localStorage.setItem("manualDarkMode", isDark ? "dark" : "light");
+    applyTheme(isDark);
+};
+
 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
     currentDark = e.matches;
     if (manualOverride === null) {