Replace sidebar with responsive app shell

docs/tables_frontend_overhaul_implementation_plan.md

@@ -42,6 +42,7 @@ It is intentionally implementation-focused:
 | 2026-03-21 | P1.2 | Completed | Switched the app to Fraunces, IBM Plex Sans, and IBM Plex Mono with distinct display, body, UI, and code font roles instead of one shared heading font. |
 | 2026-03-21 | P1.3 | Completed | Added explicit light, dark, and system theme modes in the token layer and introduced a scoped `ThemeState` service for later shell controls. |
 | 2026-03-21 | P1.4 | Completed | Added shared browser-storage wrappers, persisted theme mode in `localStorage`, and initialize/apply theme state from the layout on interactive render. |
+| 2026-03-21 | P1.5 | Completed | Replaced the permanent sidebar layout with a sticky top app shell and mobile bottom navigation backed by dedicated shell components. |
 
 ### Lessons Learned
 
@@ -53,6 +54,7 @@ It is intentionally implementation-focused:
 - The old typography setup coupled display and utility text under a single token. The new shell work needs separate display and UI font roles to avoid decorative type in controls.
 - Theme mode selection can be prepared independently of persistence. Splitting those concerns keeps the theme CSS and the storage wiring reviewable.
 - Shared UI state events in Blazor should stay synchronous unless the event contract is async-aware. Layout refresh can be triggered safely with `InvokeAsync(StateHasChanged)` from a synchronous handler.
+- Extracting shell markup into dedicated components is lower-risk than continuing to evolve `MainLayout.razor` directly. It isolates responsive frame work from page content and keeps later nav changes localized.
 
 ## Target Outcomes
 
@@ -258,7 +260,7 @@ Create the implementation foundation so the visual overhaul does not start with
 | `P1.2` | Completed | Font loading now uses Fraunces, IBM Plex Sans, and IBM Plex Mono with explicit role-based tokens. |
 | `P1.3` | Completed | Explicit light, dark, and system modes now exist in CSS, backed by a scoped `ThemeState` service. |
 | `P1.4` | Completed | Theme mode now persists through a shared storage service and is applied from the layout during interactive startup. |
-| `P1.5` | Pending | Shell replacement follows once tokens and theme plumbing exist. |
+| `P1.5` | Completed | The sidebar is gone; pages now render inside a sticky top-shell with a mobile bottom nav. |
 | `P1.6` | Pending | Shell slots and nav utilities depend on the new shell. |
 | `P1.7` | Pending | Skip link and landmark work will land with the shell markup. |
 | `P1.8` | Pending | Tools-specific shell emphasis is final Phase 1 polish. |

src/RolemasterDb.App/Components/Layout/MainLayout.razor

@@ -2,17 +2,9 @@
 @implements IDisposable
 @inject RolemasterDb.App.Frontend.AppState.ThemeState ThemeState
 
-<div class="page">
+<AppShell>
-    <div class="sidebar">
+    @Body
-        <NavMenu />
+</AppShell>
-    </div>
-
-    <main>
-        <article class="content-shell">
-            @Body
-        </article>
-    </main>
-</div>
 
 <div id="blazor-error-ui" data-nosnippet>
     An unhandled error has occurred.

src/RolemasterDb.App/Components/Layout/MainLayout.razor.css

@@ -1,38 +1,3 @@
-.page {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-main {
-    flex: 1;
-    min-width: 0;
-}
-
-.sidebar {
-    background:
-        radial-gradient(circle at top, rgba(196, 167, 107, 0.28), transparent 35%),
-        linear-gradient(180deg, #24130d 0%, #3c2415 46%, #130d0b 100%);
-    border-right: 1px solid rgba(196, 167, 107, 0.2);
-}
-
-.content-shell {
-    padding: 1.5rem;
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 290px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-}
-
 #blazor-error-ui {
     color-scheme: light only;
     background: #682e24;

src/RolemasterDb.App/Components/Shell/AppShell.razor

@@ -0,0 +1,41 @@
+<div class="app-shell">
+    <header class="app-shell-header">
+        <div class="app-shell-bar">
+            <div class="app-shell-brand-block">
+                <a class="app-shell-brand" href="/">
+                    <span class="app-shell-brand-mark">RM</span>
+                    <span class="app-shell-brand-copy">
+                        <strong>Rolemaster DB</strong>
+                        <span>Reference and lookup workspace</span>
+                    </span>
+                </a>
+            </div>
+
+            <div class="app-shell-header-nav">
+                <ShellPrimaryNav />
+            </div>
+
+            <div class="app-shell-header-actions">
+                @HeaderActions
+            </div>
+        </div>
+    </header>
+
+    <main id="app-main" class="app-shell-main">
+        <div class="content-shell">
+            @ChildContent
+        </div>
+    </main>
+
+    <nav class="app-shell-mobile-nav" aria-label="Primary">
+        <ShellPrimaryNav IsBottomNav="true" />
+    </nav>
+</div>
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public RenderFragment? HeaderActions { get; set; }
+}

src/RolemasterDb.App/Components/Shell/AppShell.razor.css

@@ -0,0 +1,133 @@
+.app-shell {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.app-shell-header {
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    padding: 0.9rem 1rem 0;
+}
+
+.app-shell-bar {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--border-default);
+    border-radius: 24px;
+    background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
+    box-shadow: var(--shadow-1);
+    backdrop-filter: blur(18px);
+}
+
+.app-shell-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.85rem;
+    color: inherit;
+    text-decoration: none;
+}
+
+.app-shell-brand:hover {
+    color: inherit;
+}
+
+.app-shell-brand-mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 18px;
+    background: linear-gradient(145deg, var(--accent-3), var(--accent-5));
+    color: var(--text-on-accent);
+    font-family: var(--font-ui);
+    font-size: 0.85rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
+}
+
+.app-shell-brand-copy {
+    display: grid;
+    gap: 0.1rem;
+}
+
+.app-shell-brand-copy strong {
+    font-family: var(--font-display);
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.1;
+}
+
+.app-shell-brand-copy span {
+    color: var(--text-secondary);
+    font-size: 0.82rem;
+}
+
+.app-shell-header-nav {
+    min-width: 0;
+}
+
+.app-shell-header-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    min-height: 2.75rem;
+}
+
+.app-shell-main {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 1rem 0 5.75rem;
+}
+
+.content-shell {
+    width: min(1600px, 100%);
+    margin: 0 auto;
+    padding: 0 1rem;
+    box-sizing: border-box;
+}
+
+.app-shell-mobile-nav {
+    position: sticky;
+    bottom: 0;
+    z-index: 35;
+    padding: 0 0.75rem 0.75rem;
+    margin-top: auto;
+}
+
+@media (max-width: 767.98px) {
+    .app-shell-header {
+        padding: 0.65rem 0.75rem 0;
+    }
+
+    .app-shell-bar {
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 0.75rem;
+        padding: 0.7rem 0.85rem;
+    }
+
+    .app-shell-brand-copy span {
+        display: none;
+    }
+
+    .app-shell-header-nav {
+        display: none;
+    }
+}
+
+@media (min-width: 768px) {
+    .app-shell-main {
+        padding-bottom: 1.25rem;
+    }
+
+    .app-shell-mobile-nav {
+        display: none;
+    }
+}

src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor

@@ -0,0 +1,22 @@
+<div class="shell-primary-nav @(IsBottomNav ? "is-bottom-nav" : "is-top-nav")">
+    <NavLink class="shell-primary-nav-link" href="" Match="NavLinkMatch.All">
+        <span class="shell-primary-nav-label">Lookup Desk</span>
+    </NavLink>
+
+    <NavLink class="shell-primary-nav-link" href="tables">
+        <span class="shell-primary-nav-label">Critical Tables</span>
+    </NavLink>
+
+    <NavLink class="shell-primary-nav-link" href="api">
+        <span class="shell-primary-nav-label">API Surface</span>
+    </NavLink>
+
+    <NavLink class="shell-primary-nav-link" href="diagnostics">
+        <span class="shell-primary-nav-label">Diagnostics</span>
+    </NavLink>
+</div>
+
+@code {
+    [Parameter]
+    public bool IsBottomNav { get; set; }
+}

src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor.css

@@ -0,0 +1,65 @@
+.shell-primary-nav {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.shell-primary-nav-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.75rem;
+    padding: 0.65rem 0.95rem;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
+}
+
+.shell-primary-nav-link:hover {
+    color: var(--text-primary);
+    background: color-mix(in srgb, var(--surface-2) 84%, transparent);
+    border-color: var(--border-subtle);
+    transform: translateY(-1px);
+}
+
+.shell-primary-nav-link.active {
+    color: var(--text-primary);
+    background: color-mix(in srgb, var(--accent-1) 84%, var(--surface-2));
+    border-color: color-mix(in srgb, var(--accent-3) 45%, var(--border-default));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
+}
+
+.shell-primary-nav-label {
+    font-size: 0.92rem;
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.shell-primary-nav.is-bottom-nav {
+    justify-content: space-between;
+    gap: 0.35rem;
+    padding: 0.35rem;
+    border: 1px solid var(--border-default);
+    border-radius: 24px;
+    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
+    box-shadow: var(--shadow-1);
+    backdrop-filter: blur(18px);
+}
+
+.shell-primary-nav.is-bottom-nav .shell-primary-nav-link {
+    flex: 1 1 0;
+    min-width: 0;
+    padding-inline: 0.45rem;
+}
+
+.shell-primary-nav.is-bottom-nav .shell-primary-nav-label {
+    font-size: 0.78rem;
+}
+
+@media (max-width: 767.98px) {
+    .shell-primary-nav.is-top-nav {
+        display: none;
+    }
+}

src/RolemasterDb.App/Components/_Imports.razor

@@ -11,4 +11,5 @@
 @using RolemasterDb.App
 @using RolemasterDb.App.Components
 @using RolemasterDb.App.Components.Layout
+@using RolemasterDb.App.Components.Shell
 @using RolemasterDb.App.Components.Shared