feat(centralui): dark-mode toggle + localStorage persistence + SSR pre-hydration (T34b)

2026-06-18 20:09:00 -04:00
parent 0449c473c1
commit fef4d4cf83
5 changed files with 189 additions and 0 deletions
@@ -8,6 +8,10 @@
        <NavMenu />
    </Nav>
    <RailFooter>
+        @* T34b: dark-mode toggle sits in the rail footer alongside the session
+           block. It is auth-agnostic (pure client-side theme) so it renders even
+           on the login page. *@
+        <DarkModeToggle />
        <AuthorizeView>
            <Authorized>
                @* CentralUI-024: claim type resolved via JwtTokenService. *@
@@ -0,0 +1,54 @@
+@inject IJSRuntime JS
+
+@* T34b: dark-mode toggle. Pure JS-interop + localStorage — no DI service and no
+   server state. The actual theme switch happens in the browser via window.sbTheme
+   (wwwroot/js/theme.js); this button just drives toggle() and reflects the result.
+   The page-load default (no-flash) is owned by the inline pre-hydration script in
+   App.razor, not here. *@
+<button type="button"
+        class="rail-btn sb-theme-toggle"
+        aria-label="Toggle dark mode"
+        aria-pressed="@(_isDark ? "true" : "false")"
+        title="@(_isDark ? "Switch to light mode" : "Switch to dark mode")"
+        @onclick="ToggleAsync">
+    <i class="bi @(_isDark ? "bi-sun" : "bi-moon-stars")" aria-hidden="true"></i>
+</button>
+
+@code {
+    /// <summary>Mirrors the browser's current theme so the glyph + aria-pressed stay in sync.</summary>
+    private bool _isDark;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender) return;
+
+        // Reflect the persisted theme once the circuit is interactive. Prerender
+        // has no JS runtime, so guard the call; a disconnect/blip just leaves the
+        // button on its default (light) glyph until the next render.
+        try
+        {
+            var mode = await JS.InvokeAsync<string>("sbTheme.get");
+            var isDark = mode == "dark";
+            if (isDark != _isDark)
+            {
+                _isDark = isDark;
+                StateHasChanged();
+            }
+        }
+        catch (JSException) { }
+        catch (JSDisconnectedException) { }
+        catch (InvalidOperationException) { }
+    }
+
+    private async Task ToggleAsync()
+    {
+        try
+        {
+            var mode = await JS.InvokeAsync<string>("sbTheme.toggle");
+            _isDark = mode == "dark";
+        }
+        catch (JSException) { }
+        catch (JSDisconnectedException) { }
+        catch (InvalidOperationException) { }
+    }
+}
@@ -0,0 +1,32 @@
+// Dark-mode theme helper (T34b). Plain browser global in the treeview-storage.js
+// style (no ES-module export) so the App.razor <head> pre-hydration inline
+// script and this file agree on one localStorage key and one apply rule.
+//
+//   * get()    — reads the persisted choice ('dark' only when explicitly stored;
+//                anything else is 'light').
+//   * apply()  — sets data-bs-theme on <html>; the site.css [data-bs-theme="dark"]
+//                token-override block (T34a) does the rest, side-rail included.
+//   * set()    — persists + applies, returns the mode.
+//   * toggle() — flips and persists, returns the new mode (the DarkModeToggle
+//                component's click path).
+//
+// Every localStorage touch is wrapped in try/catch so private-browsing modes
+// (which throw on access) degrade to light rather than break the page.
+window.sbTheme = {
+    KEY: 'sb-theme',
+    get() {
+        try { return localStorage.getItem(this.KEY) === 'dark' ? 'dark' : 'light'; }
+        catch { return 'light'; }
+    },
+    apply(mode) {
+        document.documentElement.setAttribute('data-bs-theme', mode);
+    },
+    set(mode) {
+        try { localStorage.setItem(this.KEY, mode); } catch { }
+        this.apply(mode);
+        return mode;
+    },
+    toggle() {
+        return this.set(this.get() === 'dark' ? 'light' : 'dark');
+    }
+};
@@ -10,6 +10,19 @@
    <ThemeHead />
    <link href="/ZB.MOM.WW.ScadaBridge.Host.styles.css" rel="stylesheet" />
    <link href="_content/ZB.MOM.WW.ScadaBridge.CentralUI/css/site.css" rel="stylesheet" />
+    <script>
+        // T34b: apply the persisted theme to <html> BEFORE first paint so a
+        // dark-mode user never sees a light flash. Mirrors window.sbTheme.get/apply
+        // (theme.js) — same key, same rule — but inlined so it runs without waiting
+        // on the deferred script include. localStorage access is guarded for
+        // private-browsing modes that throw on read.
+        (function () {
+            try {
+                var m = localStorage.getItem('sb-theme') === 'dark' ? 'dark' : 'light';
+                document.documentElement.setAttribute('data-bs-theme', m);
+            } catch (e) { }
+        })();
+    </script>
    <HeadOutlet @rendermode="InteractiveServer" />
 </head>
 <body>
@@ -78,6 +91,7 @@
    </script>
    <script src="/js/treeview-storage.js"></script>
    <ThemeScripts />
+    <script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/theme.js"></script>
    <script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/monaco-init.js"></script>
    <script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/audit-grid.js"></script>
    <script src="_content/ZB.MOM.WW.ScadaBridge.CentralUI/js/transport.js"></script>