Add shell omnibox foundation

docs/tables_frontend_overhaul_implementation_plan.md

@@ -55,6 +55,7 @@ It is intentionally implementation-focused:
 | 2026-03-21 | P2.3 | Completed | Added a shared `RecentTablesState` service backed by browser storage, centralized the recents storage key, and started recording successful table visits from the `Tables` page so later omnibox and rail work has real shared data. |
 | 2026-03-21 | P2.4 | Completed | Added a shared `PinnedTablesState` service with browser persistence, centralized the pin storage key, initialized pin state in the `Tables` page, and added a first live pin/unpin action plus pinned status chips so later omnibox and navigation work have real saved pins to consume. |
 | 2026-03-21 | P2.5 | Completed | Added shared table-context URL types and a serializer, registered the serializer centrally, and started round-tripping table context through `/tables` and `/tools/diagnostics` so direct links restore the selected table and diagnostic cell context instead of relying only on local storage defaults. |
+| 2026-03-21 | P2.6 | Completed | Replaced the dead shell omnibox trigger with a live drawer-backed omnibox foundation that loads critical tables on demand, filters table search results, surfaces pinned and recent table sections from shared state, and exposes slash-command navigation for the core destinations and tooling routes. |
 | 2026-03-21 | P2.7 | Completed | Added shared frontend primitives for app-bar actions, chips, segmented tabs, drawers, inspector sections, and status indicators, wired the shell omnibox trigger onto the new app-bar action primitive, and switched the new pinned-table labels in `Tables` to the shared status-chip primitive so later page work can build on reusable building blocks instead of fresh ad hoc markup. |
 | 2026-03-21 | P2.8 | Completed | Added a shared `TableContextState` service on top of browser storage and the URL serializer, moved the `Tables` page off page-local table selection persistence, and switched diagnostics to the same restore/persist/build-URI flow so table context logic now lives in shared frontend state instead of being reinvented per page. |
 
@@ -83,6 +84,7 @@ It is intentionally implementation-focused:
 - URL serializers only pay off when wired into real pages. Using the shared serializer in both `Tables` and diagnostics now gives the project one verified round-trip path before the larger table-context service lands.
 - The serializer alone is not the reusable boundary. The maintainable seam is a shared context-state helper that owns restore, persist, normalization, and URI-building conventions while pages keep only workflow-specific selection logic.
 - Primitive extraction lands best when one or two live consumers adopt the new components immediately. That keeps the foundation honest without forcing a broad page rewrite just to validate the abstraction.
+- The omnibox foundation does not need the full final interaction model to be useful. A drawer with real table search, real pinned/recent data, and a small slash-command set is enough to validate the shell surface before Phase 3 builds deeper index and inspector flows on top of it.
 
 ## Target Outcomes
 
@@ -375,7 +377,7 @@ Establish the shared shell, tokens, typography, and theme system that every dest
 | `P2.3` | Completed | Recent critical-table visits now persist through a shared app-state service and are recorded from the `Tables` page. |
 | `P2.4` | Completed | Pinned tables now persist through a shared app-state service and can already be toggled from the `Tables` page. |
 | `P2.5` | Completed | Shared table-context URLs now parse and serialize through one helper and are consumed by `/tables` and `/tools/diagnostics`. |
-| `P2.6` | Pending | The shell omnibox is still a placeholder trigger. |
+| `P2.6` | Completed | The shell omnibox now opens a live drawer with table search, pinned tables, recent tables, and slash-command navigation. |
 | `P2.7` | Completed | Shared primitives for chips, tabs, drawers, inspector sections, app-bar actions, and status indicators now exist in reusable components. |
 | `P2.8` | Completed | Table-context restore, persistence, normalization, and URI building now flow through one shared state service used by `Tables` and diagnostics. |
 

src/RolemasterDb.App/Components/Shell/ShellOmniboxCommand.cs

@@ -0,0 +1,7 @@
+namespace RolemasterDb.App.Components.Shell;
+
+public sealed record ShellOmniboxCommand(
+    string Shortcut,
+    string Label,
+    string Description,
+    string Href);

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

@@ -1,3 +1,242 @@
-<AppBarActionButton CssClass="shell-omnibox-trigger" Disabled="true" Title="Shared omnibox arrives in Phase 2." AriaLabel="Search tables or commands">
+@using System.Linq
+@using RolemasterDb.App.Frontend.AppState
+@inject NavigationManager NavigationManager
+@inject LookupService LookupService
+@inject RolemasterDb.App.Frontend.AppState.PinnedTablesState PinnedTablesState
+@inject RolemasterDb.App.Frontend.AppState.RecentTablesState RecentTablesState
+@inject RolemasterDb.App.Frontend.AppState.TableContextState TableContextState
+
+<AppBarActionButton CssClass="shell-omnibox-trigger" Title="Search tables or commands" AriaLabel="Search tables or commands" OnClick="ToggleOpenAsync">
     <span class="shell-omnibox-trigger-label">Search tables or commands</span>
 </AppBarActionButton>
+
+<SurfaceDrawer
+    IsOpen="isOpen"
+    Placement="end"
+    Title="Search tables and commands"
+    AriaLabel="Search tables and commands"
+    CssClass="shell-omnibox-drawer"
+    OnClose="CloseAsync">
+    <div class="shell-omnibox-panel">
+        <label class="shell-omnibox-search">
+            <span class="visually-hidden">Search tables or commands</span>
+            <input
+                class="input-shell shell-omnibox-input"
+                placeholder="Search tables or type /"
+                @bind="query"
+                @bind:event="oninput" />
+        </label>
+
+        @if (isLoading)
+        {
+            <p class="muted">Loading searchable tables…</p>
+        }
+        else
+        {
+            @if (MatchingTables.Count > 0)
+            {
+                <InspectorSection Title="Tables" Description="Open a critical table in reference mode.">
+                    <div class="shell-omnibox-results">
+                        @foreach (var table in MatchingTables)
+                        {
+                            <button type="button" class="shell-omnibox-result" @onclick="() => OpenTableAsync(table.Key)">
+                                <span class="shell-omnibox-result-main">
+                                    <strong>@table.Label</strong>
+                                    <span>@table.Family</span>
+                                </span>
+                                <span class="shell-omnibox-result-meta">
+                                    @if (PinnedTablesState.IsPinned(table.Key))
+                                    {
+                                        <StatusChip Tone="accent">Pinned</StatusChip>
+                                    }
+                                    <span class="chip">@($"{table.CurationPercentage}%")</span>
+                                </span>
+                            </button>
+                        }
+                    </div>
+                </InspectorSection>
+            }
+
+            @if (MatchingPinned.Count > 0)
+            {
+                <InspectorSection Title="Pinned tables" Description="Saved shortcuts available across destinations.">
+                    <div class="shell-omnibox-results">
+                        @foreach (var table in MatchingPinned)
+                        {
+                            <button type="button" class="shell-omnibox-result" @onclick="() => OpenTableAsync(table.Slug)">
+                                <span class="shell-omnibox-result-main">
+                                    <strong>@table.Label</strong>
+                                    <span>@table.Family</span>
+                                </span>
+                                <span class="shell-omnibox-result-meta">
+                                    <StatusChip Tone="accent">Pinned</StatusChip>
+                                </span>
+                            </button>
+                        }
+                    </div>
+                </InspectorSection>
+            }
+
+            @if (MatchingRecent.Count > 0)
+            {
+                <InspectorSection Title="Recent tables" Description="Resume recently opened critical tables.">
+                    <div class="shell-omnibox-results">
+                        @foreach (var table in MatchingRecent)
+                        {
+                            <button type="button" class="shell-omnibox-result" @onclick="() => OpenTableAsync(table.Slug)">
+                                <span class="shell-omnibox-result-main">
+                                    <strong>@table.Label</strong>
+                                    <span>@table.Family</span>
+                                </span>
+                                <span class="shell-omnibox-result-meta">
+                                    <StatusChip Tone="info">Recent</StatusChip>
+                                </span>
+                            </button>
+                        }
+                    </div>
+                </InspectorSection>
+            }
+
+            @if (MatchingCommands.Count > 0)
+            {
+                <InspectorSection Title="Commands" Description="Navigate directly to key workflows.">
+                    <div class="shell-omnibox-results">
+                        @foreach (var command in MatchingCommands)
+                        {
+                            <button type="button" class="shell-omnibox-result" @onclick="() => OpenCommandAsync(command.Href)">
+                                <span class="shell-omnibox-result-main">
+                                    <strong>@command.Shortcut</strong>
+                                    <span>@command.Description</span>
+                                </span>
+                                <span class="shell-omnibox-result-meta">
+                                    <StatusChip Tone="neutral">@command.Label</StatusChip>
+                                </span>
+                            </button>
+                        }
+                    </div>
+                </InspectorSection>
+            }
+
+            @if (MatchingTables.Count == 0 && MatchingPinned.Count == 0 && MatchingRecent.Count == 0 && MatchingCommands.Count == 0)
+            {
+                <InspectorSection Title="No matches" Description="Try a different table name, family, or slash command.">
+                    <StatusIndicator Tone="warning">Nothing matches “@query”.</StatusIndicator>
+                </InspectorSection>
+            }
+        }
+    </div>
+</SurfaceDrawer>
+
+@code {
+    private static readonly IReadOnlyList<ShellOmniboxCommand> Commands =
+    [
+        new("/tables", "Reference", "Open the reference tables surface.", "/tables"),
+        new("/curation", "Curation", "Open the queue-first curation workflow.", "/curation"),
+        new("/tools", "Tools", "Open the developer tools hub.", "/tools"),
+        new("/diag", "Diagnostics", "Open tooling diagnostics.", "/tools/diagnostics"),
+        new("/api", "API", "Open API surface documentation.", "/tools/api")
+    ];
+
+    private LookupReferenceData? referenceData;
+    private bool isOpen;
+    private bool isLoading;
+    private string query = string.Empty;
+
+    private IReadOnlyList<CriticalTableReference> MatchingTables =>
+        referenceData?.CriticalTables
+            .Where(MatchesTableQuery)
+            .Take(8)
+            .ToList()
+        ?? [];
+
+    private IReadOnlyList<PinnedTableEntry> MatchingPinned =>
+        PinnedTablesState.Items
+            .Where(item => MatchesText(item.Label, item.Family, item.Slug))
+            .Take(6)
+            .ToList();
+
+    private IReadOnlyList<RecentTableEntry> MatchingRecent =>
+        RecentTablesState.Items
+            .Where(item => MatchesText(item.Label, item.Family, item.Slug))
+            .Take(6)
+            .ToList();
+
+    private IReadOnlyList<ShellOmniboxCommand> MatchingCommands =>
+        Commands
+            .Where(command => MatchesText(command.Shortcut, command.Label, command.Description))
+            .Take(5)
+            .ToList();
+
+    private async Task ToggleOpenAsync(MouseEventArgs _)
+    {
+        if (isOpen)
+        {
+            await CloseAsync();
+            return;
+        }
+
+        isOpen = true;
+        await EnsureLoadedAsync();
+    }
+
+    private Task CloseAsync()
+    {
+        isOpen = false;
+        query = string.Empty;
+        return Task.CompletedTask;
+    }
+
+    private async Task EnsureLoadedAsync()
+    {
+        if (referenceData is not null)
+        {
+            return;
+        }
+
+        isLoading = true;
+
+        try
+        {
+            await RecentTablesState.InitializeAsync();
+            await PinnedTablesState.InitializeAsync();
+            referenceData = await LookupService.GetReferenceDataAsync();
+        }
+        finally
+        {
+            isLoading = false;
+        }
+    }
+
+    private async Task OpenTableAsync(string tableSlug)
+    {
+        var snapshot = new RolemasterDb.App.Frontend.AppState.TableContextSnapshot(
+            TableSlug: tableSlug,
+            Mode: RolemasterDb.App.Frontend.AppState.TableContextMode.Reference);
+
+        await TableContextState.PersistAsync("tables", snapshot);
+        await CloseAsync();
+        NavigationManager.NavigateTo(TableContextState.BuildUri("/tables", snapshot));
+    }
+
+    private async Task OpenCommandAsync(string href)
+    {
+        await CloseAsync();
+        NavigationManager.NavigateTo(href);
+    }
+
+    private bool MatchesTableQuery(CriticalTableReference table) =>
+        MatchesText(table.Label, table.Key, table.Family, table.SourceDocument);
+
+    private bool MatchesText(params string?[] values)
+    {
+        var normalizedQuery = query.Trim();
+        if (string.IsNullOrWhiteSpace(normalizedQuery))
+        {
+            return true;
+        }
+
+        return values.Any(value =>
+            !string.IsNullOrWhiteSpace(value) &&
+            value.Contains(normalizedQuery, StringComparison.OrdinalIgnoreCase));
+    }
+}

src/RolemasterDb.App/wwwroot/app.css

@@ -820,6 +820,12 @@ pre,
     background: var(--surface-elevated);
 }
 
+.app-bar-action-button:focus-visible,
+.shell-omnibox-result:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 2px;
+}
+
 .app-bar-action-button:disabled {
     opacity: 0.78;
     cursor: not-allowed;
@@ -949,6 +955,64 @@ pre,
     overflow: auto;
 }
 
+.shell-omnibox-drawer.surface-drawer.is-end {
+    width: min(34rem, calc(100vw - 2rem));
+}
+
+.shell-omnibox-panel {
+    display: grid;
+    gap: 1rem;
+}
+
+.shell-omnibox-search {
+    display: block;
+}
+
+.shell-omnibox-input {
+    width: 100%;
+    min-height: 3rem;
+}
+
+.shell-omnibox-results {
+    display: grid;
+    gap: 0.6rem;
+}
+
+.shell-omnibox-result {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    width: 100%;
+    padding: 0.85rem 0.95rem;
+    border: 1px solid var(--border-subtle);
+    border-radius: 1rem;
+    background: color-mix(in srgb, var(--surface-elevated) 86%, transparent);
+    text-align: left;
+}
+
+.shell-omnibox-result:hover {
+    border-color: var(--border-strong);
+    background: var(--surface-elevated);
+}
+
+.shell-omnibox-result-main {
+    display: grid;
+    gap: 0.2rem;
+}
+
+.shell-omnibox-result-main span {
+    color: var(--text-muted);
+}
+
+.shell-omnibox-result-meta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    flex-wrap: wrap;
+    justify-content: end;
+}
+
 .details-block {
     margin-top: 0.85rem;
 }
@@ -1991,4 +2055,12 @@ pre,
         flex-direction: column;
         align-items: stretch;
     }
+
+    .shell-omnibox-drawer.surface-drawer.is-end {
+        right: 0.75rem;
+        left: 0.75rem;
+        width: auto;
+        top: calc(var(--shell-header-height) + 0.75rem);
+        bottom: calc(var(--shell-mobile-nav-height) + 0.75rem);
+    }
 }