From 5a23783e074ae200b1daeabdf81f6ed71baaab14 Mon Sep 17 00:00:00 2001
From: kawa <us.fame.sq@gmail.com>
Date: Tue, 2 Jun 2026 11:16:01 +0200
Subject: [PATCH] Fix GUI polish issues across auth modal, theme, and 404

- Add missing modal CSS (.modal-overlay/.modal-dialog/.modal-header):
  the "Connect to Microsoft" auth modal was rendering unstyled inline
  at the bottom of the page. Now a centered dialog with backdrop.
- Surface OAuth connect errors in the modal instead of silently
  reopening it with no explanation.
- MainLayout: implement IDisposable so event handlers are actually
  unsubscribed (Dispose existed but was never invoked).
- Wire up the Settings theme selector (was a dead control): drop the
  unsupported Dark option, call sptb.setTheme on save and on load,
  resolve System via prefers-color-scheme.
- Add branded 404 page via UseStatusCodePagesWithReExecute + Routes
  <NotFound> (blank white page before).
- Add .progress-fill.indeterminate animation and .progress-panel.
- Home: replace inline JS hover handlers with a .feature-card CSS class.
- Define missing --surface-2 variable referenced by MainLayout.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 Components/Layout/MainLayout.razor            | 18 +++++++-
 Components/Pages/Home.razor                   |  4 +-
 Components/Pages/NotFound.razor               | 10 +++++
 Components/Pages/Settings.razor               |  8 ++--
 Components/Routes.razor                       |  9 ++++
 .../Shared/SessionCredentialsModal.razor      | 14 +++----
 Program.cs                                    |  3 ++
 wwwroot/app.css                               | 42 +++++++++++++++++++
 wwwroot/js/app.js                             |  7 +++-
 9 files changed, 101 insertions(+), 14 deletions(-)
 create mode 100644 Components/Pages/NotFound.razor

diff --git a/Components/Layout/MainLayout.razor b/Components/Layout/MainLayout.razor
index add1d0e..14a000d 100644
--- a/Components/Layout/MainLayout.razor
+++ b/Components/Layout/MainLayout.razor
@@ -1,12 +1,15 @@
 @inherits LayoutComponentBase
+@implements IDisposable
 @inject IUserSessionService Session
 @inject IUserContextAccessor UserContext
 @inject ISessionCredentialStore CredStore
 @inject ISessionManager SessionManager
 @inject NavigationManager Nav
+@inject IJSRuntime JS
 @inject SharepointToolbox.Web.Services.OAuth.IOAuthFlowCache OAuthCache
 @using Microsoft.AspNetCore.Components.Authorization
 @using Microsoft.AspNetCore.WebUtilities
+@using Microsoft.JSInterop
 @using SharepointToolbox.Web.Core.Models
 @using SharepointToolbox.Web.Services.Session
 
@@ -160,6 +163,9 @@
     {
         if (!firstRender) return;
 
+        // Apply persisted theme preference
+        await ApplyThemeAsync();
+
         // Pick up token_key from OAuth callback redirect before checking credential state
         await HandleOAuthCallbackAsync();
         await RefreshCredentialState();
@@ -172,7 +178,8 @@
             Nav.NavigateTo(uri.GetLeftPart(UriPartial.Path), replace: true);
             if (_credModal is not null)
             {
-                await _credModal.ShowAsync();
+                // Surface the failure reason instead of silently reopening the modal
+                await _credModal.ShowAsync(err!);
             }
         }
 
@@ -234,6 +241,15 @@
         });
     }
 
+    private async Task ApplyThemeAsync()
+    {
+        try
+        {
+            await JS.InvokeVoidAsync("sptb.setTheme", Session.Settings.Theme);
+        }
+        catch (JSException) { /* best-effort; JS not yet available */ }
+    }
+
     private void ToggleSidebar() => _sidebarCollapsed = !_sidebarCollapsed;
 
     private static string RoleChipClass(UserRole role) => role switch
diff --git a/Components/Pages/Home.razor b/Components/Pages/Home.razor
index 2af34ac..7d90778 100644
--- a/Components/Pages/Home.razor
+++ b/Components/Pages/Home.razor
@@ -29,8 +29,8 @@ else
     <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px">
         @foreach (var feature in _features)
         {
-            <a href="@feature.Href" style="text-decoration:none">
-                <div class="card" style="cursor:pointer;transition:box-shadow .15s" onmouseover="this.style.boxShadow='0 2px 8px rgba(0,120,212,.2)'" onmouseout="this.style.boxShadow=''">
+            <a href="@feature.Href" style="text-decoration:none;color:inherit">
+                <div class="card feature-card">
                     <div style="font-size:28px;margin-bottom:8px">@feature.Icon</div>
                     <div style="font-weight:600;margin-bottom:4px">@feature.Title</div>
                     <div class="text-muted">@feature.Description</div>
diff --git a/Components/Pages/NotFound.razor b/Components/Pages/NotFound.razor
new file mode 100644
index 0000000..0fa25d5
--- /dev/null
+++ b/Components/Pages/NotFound.razor
@@ -0,0 +1,10 @@
+@page "/not-found"
+@attribute [Microsoft.AspNetCore.Authorization.AllowAnonymous]
+
+<PageTitle>Page not found — SharePoint Toolbox</PageTitle>
+
+<div class="no-profile">
+    <h2>Page not found</h2>
+    <p>The page you requested doesn't exist or has moved.</p>
+    <a href="/" class="btn btn-primary">Back to Home</a>
+</div>
diff --git a/Components/Pages/Settings.razor b/Components/Pages/Settings.razor
index c68d9c3..26a48b5 100644
--- a/Components/Pages/Settings.razor
+++ b/Components/Pages/Settings.razor
@@ -1,7 +1,9 @@
 @page "/settings"
 @attribute [Authorize]
 @inject IUserSessionService Session
+@inject IJSRuntime JS
 @rendermode InteractiveServer
+@using Microsoft.JSInterop
 
 <h1 class="page-title">Settings</h1>
 
@@ -19,7 +21,6 @@
         <select class="form-select" style="width:160px" @bind="_theme" @bind:after="Save">
             <option value="System">System</option>
             <option value="Light">Light</option>
-            <option value="Dark">Dark</option>
         </select>
     </div>
 </div>
@@ -44,14 +45,15 @@
     {
         var s = Session.Settings;
         _lang = s.Lang;
-        _theme = s.Theme;
+        _theme = s.Theme is "System" or "Light" ? s.Theme : "System";
         _autoTakeOwnership = s.AutoTakeOwnership;
     }
 
-    private void Save()
+    private async Task Save()
     {
         Session.UpdateSettings(new AppSettings { Lang = _lang, Theme = _theme, AutoTakeOwnership = _autoTakeOwnership });
         SharepointToolbox.Web.Localization.TranslationSource.Instance.SetCulture(_lang);
+        await JS.InvokeVoidAsync("sptb.setTheme", _theme);
         _saved = true;
         StateHasChanged();
         _ = Task.Delay(2000).ContinueWith(_ => { _saved = false; InvokeAsync(StateHasChanged); });
diff --git a/Components/Routes.razor b/Components/Routes.razor
index 66cae57..a14545b 100644
--- a/Components/Routes.razor
+++ b/Components/Routes.razor
@@ -18,5 +18,14 @@
             </AuthorizeRouteView>
             <FocusOnNavigate RouteData="routeData" Selector="h1" />
         </Found>
+        <NotFound>
+            <LayoutView Layout="typeof(Layout.MainLayout)">
+                <div class="no-profile">
+                    <h2>Page not found</h2>
+                    <p>The page you requested doesn't exist.</p>
+                    <a href="/" class="btn btn-primary">Back to Home</a>
+                </div>
+            </LayoutView>
+        </NotFound>
     </Router>
 </CascadingAuthenticationState>
diff --git a/Components/Shared/SessionCredentialsModal.razor b/Components/Shared/SessionCredentialsModal.razor
index aa748a3..c878eca 100644
--- a/Components/Shared/SessionCredentialsModal.razor
+++ b/Components/Shared/SessionCredentialsModal.razor
@@ -7,10 +7,10 @@
 
 @if (_visible)
 {
-    <div class="modal-overlay">
+    <div class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="connect-modal-title">
         <div class="modal-dialog">
             <div class="modal-header">
-                <h3>Connect to Microsoft</h3>
+                <h3 id="connect-modal-title">Connect to Microsoft</h3>
                 <p class="text-muted">
                     Authenticate to access <strong>@Session.CurrentProfile?.Name</strong>.
                     Your session token is stored in your browser only — never saved to disk.
@@ -22,14 +22,14 @@
                 <div class="alert alert-error">@_error</div>
             }
 
-            <div class="flex-row mt-8">
+            <div class="modal-footer">
+                <button class="btn btn-secondary" @onclick="Cancel" disabled="@_connecting">Cancel</button>
                 <button class="btn btn-primary" @onclick="ConnectAsync" disabled="@_connecting">
                     @(_connecting ? "Redirecting…" : "Connect via Microsoft")
                 </button>
-                <button class="btn btn-secondary" @onclick="Cancel" disabled="@_connecting">Cancel</button>
             </div>
 
-            <p class="text-muted" style="font-size:11px;margin-top:8px">
+            <p class="text-muted" style="font-size:11px;margin-top:8px;text-align:right">
                 You will be redirected to Microsoft login. MFA is supported.
             </p>
         </div>
@@ -43,9 +43,9 @@
     private bool   _connecting;
     private string _error = string.Empty;
 
-    public async Task ShowAsync()
+    public async Task ShowAsync(string? error = null)
     {
-        _error      = string.Empty;
+        _error      = error ?? string.Empty;
         _connecting = false;
         _visible    = true;
         await InvokeAsync(StateHasChanged);
diff --git a/Program.cs b/Program.cs
index 610a43f..a2cfe51 100644
--- a/Program.cs
+++ b/Program.cs
@@ -175,6 +175,9 @@ if (!app.Environment.IsDevelopment())
     app.UseHsts();
 }
 
+// Re-execute unmatched (404) requests into the branded not-found page
+app.UseStatusCodePagesWithReExecute("/not-found");
+
 app.UseStaticFiles();
 app.UseAuthentication();
 app.UseAuthorization();
diff --git a/wwwroot/app.css b/wwwroot/app.css
index a54e426..63840eb 100644
--- a/wwwroot/app.css
+++ b/wwwroot/app.css
@@ -15,6 +15,7 @@
     --warn: #797673;
     --text: #323130;
     --text-muted: #605e5c;
+    --surface-2: #2d2d4e;
     --font: 'Segoe UI', system-ui, sans-serif;
 }
 
@@ -160,3 +161,44 @@ body {
 /* ── No-profile state ── */
 .no-profile { text-align: center; padding: 60px 20px; color: var(--text-muted); }
 .no-profile h2 { color: var(--text); }
+
+/* ── Modal ── */
+.modal-overlay {
+    position: fixed; inset: 0; z-index: 1000;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0, 0, 0, .45);
+    padding: 20px;
+    animation: modal-fade .15s ease-out;
+}
+.modal-dialog {
+    background: var(--card-bg); border-radius: 8px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
+    width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
+    padding: 24px;
+    animation: modal-rise .15s ease-out;
+}
+.modal-header { margin-bottom: 16px; }
+.modal-header h3 { margin: 0 0 6px 0; font-size: 18px; font-weight: 600; color: var(--text); }
+.modal-header .text-muted { margin: 0; line-height: 1.4; }
+.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
+@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes modal-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+/* ── Progress panel ── */
+.progress-panel { margin: 8px 0; }
+.progress-fill.indeterminate {
+    width: 40%;
+    background: var(--accent);
+    animation: indeterminate 1.1s ease-in-out infinite;
+}
+@keyframes indeterminate {
+    0%   { margin-left: -40%; }
+    100% { margin-left: 100%; }
+}
+
+/* ── Feature cards (Home) ── */
+.feature-card { cursor: pointer; transition: box-shadow .15s, transform .15s; }
+.feature-card:hover { box-shadow: 0 2px 8px rgba(0, 120, 212, .2); transform: translateY(-1px); }
+
+/* ── Theme (light-only palette; System resolves via JS) ── */
+[data-theme="light"] { color-scheme: light; }
diff --git a/wwwroot/js/app.js b/wwwroot/js/app.js
index 0b519e1..b13527c 100644
--- a/wwwroot/js/app.js
+++ b/wwwroot/js/app.js
@@ -8,7 +8,12 @@ window.sptb = {
         document.body.removeChild(link);
     },
     setTheme: function(theme) {
-        document.documentElement.setAttribute('data-theme', theme);
+        var t = (theme || 'System').toLowerCase();
+        if (t === 'system') {
+            t = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+                ? 'dark' : 'light';
+        }
+        document.documentElement.setAttribute('data-theme', t);
     },
     scrollToBottom: function(el) {
         if (el) el.scrollTop = el.scrollHeight;