Add shell omnibox foundation

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);
+    }
 }