xTr1m/RolemasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add shell slots and destination utilities

Browse Source
This commit is contained in:
Frank Tovar
2026-03-21 13:19:11 +01:00
parent b3c846d1ef
commit 15a2b0825a
11 changed files with 210 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/tables_frontend_overhaul_implementation_plan.md
View File

@@ -43,6 +43,7 @@ It is intentionally implementation-focused:
| 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. |
| 2026-03-21 | P1.6 | Completed | Added explicit shell slots for nav, omnibox, shortcuts, and utilities; switched shell navigation to `Play`, `Tables`, `Curation`, and `Tools`; and wired the first live theme control into the shell. |
### Lessons Learned
@@ -55,6 +56,7 @@ It is intentionally implementation-focused:
- 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.
- Once a Razor component exposes multiple named `RenderFragment` parameters, the page body must be passed explicitly through `<ChildContent>`. That pattern is now the baseline for shell composition here.
## Target Outcomes
@@ -261,7 +263,7 @@ Create the implementation foundation so the visual overhaul does not start with
| `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` | 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.6` | Completed | The shell now has explicit nav, omnibox, shortcut, and utility slots, plus a live theme selector and destination-model navigation. |
| `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. |

8
src/RolemasterDb.App/Components/Layout/MainLayout.razor
View File

@@ -3,7 +3,15 @@
@inject RolemasterDb.App.Frontend.AppState.ThemeState ThemeState
<AppShell>
<OmniboxContent>
<ShellOmniboxTrigger />
</OmniboxContent>
<UtilityContent>
<ShellThemeSwitcher />
</UtilityContent>
<ChildContent>
@Body
</ChildContent>
</AppShell>
<div id="blazor-error-ui" data-nosnippet>

8
src/RolemasterDb.App/Components/Pages/Curation.razor Normal file
View File

@@ -0,0 +1,8 @@
@page "/curation"
<PageTitle>Curation</PageTitle>
<section class="panel">
<h1 class="panel-title">Curation</h1>
<p class="panel-copy">The dedicated queue-first curation workflow lands in Phase 4. The shell route exists now so navigation can move to the target product model before the workflow rewrite begins.</p>
</section>

13
src/RolemasterDb.App/Components/Pages/Tools.razor Normal file
View File

@@ -0,0 +1,13 @@
@page "/tools"
<PageTitle>Tools</PageTitle>
<section class="panel">
<h1 class="panel-title">Tools</h1>
<p class="panel-copy">Diagnostics and API documentation move under this destination in later phases. The landing page is in place now so the shell can navigate with the target destination model.</p>
<div class="action-row">
<NavLink class="btn-link" href="diagnostics">Open diagnostics</NavLink>
<NavLink class="btn-link" href="api">Open API docs</NavLink>
</div>
</section>

44
src/RolemasterDb.App/Components/Shell/AppShell.razor
View File

@@ -2,6 +2,8 @@
<header class="app-shell-header">
<div class="app-shell-bar">
<div class="app-shell-brand-block">
@if (BrandContent is null)
{
<a class="app-shell-brand" href="/">
<span class="app-shell-brand-mark">RM</span>
<span class="app-shell-brand-copy">
@@ -9,16 +11,42 @@
<span>Reference and lookup workspace</span>
</span>
</a>
}
else
{
@BrandContent
}
</div>
<div class="app-shell-header-nav">
@if (PrimaryNavContent is null)
{
<ShellPrimaryNav />
}
else
{
@PrimaryNavContent
}
</div>
<div class="app-shell-header-omnibox">
@if (OmniboxContent is not null)
{
@OmniboxContent
}
</div>
<div class="app-shell-header-actions">
@HeaderActions
@UtilityContent
</div>
</div>
@if (ShortcutContent is not null)
{
<div class="app-shell-shortcuts">
@ShortcutContent
</div>
}
</header>
<main id="app-main" class="app-shell-main">
@@ -37,5 +65,17 @@
public RenderFragment? ChildContent { get; set; }
[Parameter]
public RenderFragment? HeaderActions { get; set; }
public RenderFragment? BrandContent { get; set; }
[Parameter]
public RenderFragment? PrimaryNavContent { get; set; }
[Parameter]
public RenderFragment? OmniboxContent { get; set; }
[Parameter]
public RenderFragment? ShortcutContent { get; set; }
[Parameter]
public RenderFragment? UtilityContent { get; set; }
}

26
src/RolemasterDb.App/Components/Shell/AppShell.razor.css
View File

@@ -13,7 +13,7 @@
.app-shell-bar {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-columns: auto minmax(0, 1fr) minmax(14rem, 20rem) auto;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
@@ -73,6 +73,10 @@
min-width: 0;
}
.app-shell-header-omnibox {
min-width: 0;
}
.app-shell-header-actions {
display: flex;
align-items: center;
@@ -81,6 +85,10 @@
min-height: 2.75rem;
}
.app-shell-shortcuts {
margin-top: 0.75rem;
}
.app-shell-main {
flex: 1 1 auto;
min-width: 0;
@@ -108,7 +116,7 @@
}
.app-shell-bar {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
}
@@ -120,6 +128,10 @@
.app-shell-header-nav {
display: none;
}
.app-shell-header-actions {
gap: 0.5rem;
}
}
@media (min-width: 768px) {
@@ -131,3 +143,13 @@
display: none;
}
}
@media (max-width: 1023.98px) {
.app-shell-bar {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.app-shell-header-nav {
display: none;
}
}

3
src/RolemasterDb.App/Components/Shell/ShellOmniboxTrigger.razor Normal file
View File

@@ -0,0 +1,3 @@
<button type="button" class="shell-omnibox-trigger" disabled title="Shared omnibox arrives in Phase 2.">
<span class="shell-omnibox-trigger-label">Search tables or commands</span>
</button>

19
src/RolemasterDb.App/Components/Shell/ShellOmniboxTrigger.razor.css Normal file
View File

@@ -0,0 +1,19 @@
.shell-omnibox-trigger {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: flex-start;
min-height: 2.75rem;
padding: 0.65rem 0.9rem;
border: 1px solid var(--border-default);
border-radius: 999px;
background: color-mix(in srgb, var(--surface-2) 84%, transparent);
color: var(--text-secondary);
box-sizing: border-box;
}
.shell-omnibox-trigger-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

12
src/RolemasterDb.App/Components/Shell/ShellPrimaryNav.razor
View File

@@ -1,18 +1,18 @@
<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>
<span class="shell-primary-nav-label">Play</span>
</NavLink>
<NavLink class="shell-primary-nav-link" href="tables">
<span class="shell-primary-nav-label">Critical Tables</span>
<span class="shell-primary-nav-label">Tables</span>
</NavLink>
<NavLink class="shell-primary-nav-link" href="api">
<span class="shell-primary-nav-label">API Surface</span>
<NavLink class="shell-primary-nav-link" href="curation">
<span class="shell-primary-nav-label">Curation</span>
</NavLink>
<NavLink class="shell-primary-nav-link" href="diagnostics">
<span class="shell-primary-nav-label">Diagnostics</span>
<NavLink class="shell-primary-nav-link" href="tools">
<span class="shell-primary-nav-label">Tools</span>
</NavLink>
</div>

48
src/RolemasterDb.App/Components/Shell/ShellThemeSwitcher.razor Normal file
View File

@@ -0,0 +1,48 @@
@implements IDisposable
@inject RolemasterDb.App.Frontend.AppState.ThemeState ThemeState
<label class="shell-theme-switcher">
<span class="shell-theme-switcher-label">Theme</span>
<select class="input-shell shell-theme-switcher-select" value="@CurrentValue" @onchange="HandleChanged">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</label>
@code {
private string CurrentValue =>
ThemeState.CurrentMode switch
{
RolemasterDb.App.Frontend.AppState.ThemeMode.Light => "light",
RolemasterDb.App.Frontend.AppState.ThemeMode.Dark => "dark",
_ => "system"
};
protected override void OnInitialized()
{
ThemeState.Changed += HandleThemeChanged;
}
private async Task HandleChanged(ChangeEventArgs args)
{
var nextMode = args.Value?.ToString() switch
{
"light" => RolemasterDb.App.Frontend.AppState.ThemeMode.Light,
"dark" => RolemasterDb.App.Frontend.AppState.ThemeMode.Dark,
_ => RolemasterDb.App.Frontend.AppState.ThemeMode.System
};
await ThemeState.SetModeAsync(nextMode);
}
private void HandleThemeChanged()
{
_ = InvokeAsync(StateHasChanged);
}
public void Dispose()
{
ThemeState.Changed -= HandleThemeChanged;
}
}

27
src/RolemasterDb.App/Components/Shell/ShellThemeSwitcher.razor.css Normal file
View File

@@ -0,0 +1,27 @@
.shell-theme-switcher {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--text-secondary);
}
.shell-theme-switcher-label {
font-size: 0.82rem;
white-space: nowrap;
}
.shell-theme-switcher-select {
min-width: 7.5rem;
min-height: 2.75rem;
padding-block: 0.55rem;
}
@media (max-width: 767.98px) {
.shell-theme-switcher-label {
display: none;
}
.shell-theme-switcher-select {
min-width: 5.75rem;
}
}