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

Rebuild shell omnibox as command palette

Browse Source
This commit is contained in:
Frank Tovar
2026-03-21 14:33:42 +01:00
parent 49e8528dc6
commit e965a944b6
4 changed files with 264 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/tables_frontend_overhaul_implementation_plan.md
View File

@@ -59,6 +59,7 @@ It is intentionally implementation-focused:
| 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. |
| 2026-03-21 | Post-P2 fix 1 | Completed | Fixed the shell omnibox drawer regression by adding explicit shell offset variables, constraining drawer/body scrolling, and giving the omnibox its own backdrop geometry so the flyout opens within the visible viewport instead of collapsing into invalid top/bottom positioning. |
| 2026-03-21 | Post-P2 fix 2 | Completed | Rebuilt the shell omnibox as a dedicated command palette instead of a repurposed drawer, with shell-owned overlay markup, explicit viewport-safe geometry, autofocus, Escape and navigation close behavior, and a stable scrollable result body. |
### Lessons Learned
@@ -87,6 +88,7 @@ It is intentionally implementation-focused:
- 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.
- Shared overlay primitives should not depend on undeclared layout variables. If a drawer needs shell offsets, the shell must define them explicitly and overlay-specific backdrops should be adjustable instead of assuming full-screen dimming is always correct.
- A command palette is not just a styled drawer. It needs shell-owned geometry, predictable focus behavior, and a bounded scroll region; treating it as a generic side panel led directly to the layout regressions found in Phase 2.
## Target Outcomes

16
src/RolemasterDb.App/Components/Primitives/SurfaceDrawer.razor
View File

@@ -2,7 +2,7 @@
{
<button
type="button"
class="@BuildBackdropCssClass()"
class="surface-drawer-backdrop"
aria-label="@CloseLabel"
@onclick="HandleCloseAsync"></button>
@@ -61,9 +61,6 @@
[Parameter]
public string? CssClass { get; set; }
[Parameter]
public string? BackdropCssClass { get; set; }
private string BuildCssClass()
{
var classes = new List<string> { "surface-drawer", $"is-{Placement.Trim().ToLowerInvariant()}" };
@@ -75,17 +72,6 @@
return string.Join(' ', classes);
}
private string BuildBackdropCssClass()
{
var classes = new List<string> { "surface-drawer-backdrop" };
if (!string.IsNullOrWhiteSpace(BackdropCssClass))
{
classes.Add(BackdropCssClass);
}
return string.Join(' ', classes);
}
private Task HandleCloseAsync() =>
OnClose.InvokeAsync();
}

306
src/RolemasterDb.App/Components/Shell/ShellOmniboxTrigger.razor
View File

@@ -1,3 +1,4 @@
@implements IDisposable
@using System.Linq
@using RolemasterDb.App.Frontend.AppState
@inject NavigationManager NavigationManager
@@ -6,127 +7,145 @@
@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>
<div class="shell-omnibox">
<AppBarActionButton
CssClass="@(isOpen ? "shell-omnibox-trigger is-open" : "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"
BackdropCssClass="shell-omnibox-backdrop"
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 (isOpen)
{
<button
type="button"
class="shell-omnibox-backdrop"
aria-label="Close search panel"
@onclick="CloseAsync"></button>
@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>
}
<section class="shell-omnibox-palette" role="dialog" aria-modal="true" aria-label="Search tables and commands">
<header class="shell-omnibox-header">
<label class="shell-omnibox-search">
<span class="visually-hidden">Search tables or commands</span>
<input
@ref="queryInput"
class="input-shell shell-omnibox-input"
placeholder="Search tables or type /"
@bind="query"
@bind:event="oninput"
@onkeydown="HandleInputKeyDownAsync" />
</label>
@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>
}
<button type="button" class="shell-omnibox-close" @onclick="CloseAsync">
Close
</button>
</header>
@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>
}
<div class="shell-omnibox-body">
@if (isLoading)
{
<InspectorSection Title="Searching" Description="Loading the critical table index and shortcuts.">
<StatusIndicator Tone="info">Loading searchable tables…</StatusIndicator>
</InspectorSection>
}
else
{
@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 (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 (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 (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>
@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 (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 (!HasResults)
{
<InspectorSection Title="No matches" Description="Try a different table name, family, or slash command.">
<StatusIndicator Tone="warning">Nothing matches “@query”.</StatusIndicator>
</InspectorSection>
}
}
</div>
</section>
}
</div>
@code {
private static readonly IReadOnlyList<ShellOmniboxCommand> Commands =
@@ -138,11 +157,19 @@
new("/api", "API", "Open API surface documentation.", "/tools/api")
];
private ElementReference queryInput;
private LookupReferenceData? referenceData;
private bool isOpen;
private bool isLoading;
private bool shouldFocusInput;
private string query = string.Empty;
private bool HasResults =>
MatchingCommands.Count > 0 ||
MatchingPinned.Count > 0 ||
MatchingRecent.Count > 0 ||
MatchingTables.Count > 0;
private IReadOnlyList<CriticalTableReference> MatchingTables =>
referenceData?.CriticalTables
.Where(MatchesTableQuery)
@@ -164,10 +191,26 @@
private IReadOnlyList<ShellOmniboxCommand> MatchingCommands =>
Commands
.Where(command => MatchesText(command.Shortcut, command.Label, command.Description))
.Where(command => QueryStartsCommandMode()
? command.Shortcut.Contains(query.Trim(), StringComparison.OrdinalIgnoreCase)
: MatchesText(command.Shortcut, command.Label, command.Description))
.Take(5)
.ToList();
protected override void OnInitialized()
{
NavigationManager.LocationChanged += HandleLocationChanged;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (shouldFocusInput && isOpen)
{
shouldFocusInput = false;
await queryInput.FocusAsync();
}
}
private async Task ToggleOpenAsync(MouseEventArgs _)
{
if (isOpen)
@@ -177,6 +220,7 @@
}
isOpen = true;
shouldFocusInput = true;
await EnsureLoadedAsync();
}
@@ -184,6 +228,7 @@
{
isOpen = false;
query = string.Empty;
shouldFocusInput = false;
return Task.CompletedTask;
}
@@ -208,6 +253,14 @@
}
}
private async Task HandleInputKeyDownAsync(KeyboardEventArgs args)
{
if (string.Equals(args.Key, "Escape", StringComparison.Ordinal))
{
await CloseAsync();
}
}
private async Task OpenTableAsync(string tableSlug)
{
var snapshot = new RolemasterDb.App.Frontend.AppState.TableContextSnapshot(
@@ -240,4 +293,25 @@
!string.IsNullOrWhiteSpace(value) &&
value.Contains(normalizedQuery, StringComparison.OrdinalIgnoreCase));
}
private bool QueryStartsCommandMode() =>
query.TrimStart().StartsWith("/", StringComparison.Ordinal);
private void HandleLocationChanged(object? sender, LocationChangedEventArgs args)
{
if (!isOpen)
{
return;
}
isOpen = false;
query = string.Empty;
shouldFocusInput = false;
_ = InvokeAsync(StateHasChanged);
}
public void Dispose()
{
NavigationManager.LocationChanged -= HandleLocationChanged;
}
}

83
src/RolemasterDb.App/wwwroot/app.css
View File

@@ -958,21 +958,52 @@ pre,
overflow: auto;
}
.shell-omnibox-backdrop.surface-drawer-backdrop {
top: calc(var(--shell-header-height, 5.75rem) + 0.5rem);
bottom: calc(var(--shell-mobile-nav-height, 0rem) + 0rem);
.shell-omnibox {
position: relative;
}
.shell-omnibox-drawer.surface-drawer.is-end {
.shell-omnibox-trigger.is-open {
border-color: var(--border-strong);
background: var(--surface-elevated);
}
.shell-omnibox-backdrop {
position: fixed;
top: calc(var(--shell-header-height, 5.75rem) + 0.35rem);
right: 0;
bottom: calc(var(--shell-mobile-nav-height, 0rem));
left: 0;
z-index: 90;
border: none;
background: color-mix(in srgb, var(--bg-overlay) 85%, transparent);
}
.shell-omnibox-palette {
position: fixed;
top: calc(var(--shell-header-height, 5.75rem) + 0.75rem);
bottom: 1rem;
width: min(34rem, calc(100vw - 2rem));
left: 50%;
z-index: 95;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
width: min(46rem, calc(100vw - 2rem));
max-height: calc(100dvh - var(--shell-header-height, 5.75rem) - var(--shell-mobile-nav-height, 0rem) - 1.75rem);
border: 1px solid var(--border-default);
border-radius: 1.5rem;
background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
box-shadow: var(--shadow-2);
backdrop-filter: blur(22px);
transform: translateX(-50%);
overflow: hidden;
}
.shell-omnibox-panel {
.shell-omnibox-header {
display: grid;
gap: 1rem;
min-height: 0;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
padding: 1rem;
border-bottom: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
.shell-omnibox-search {
@@ -984,6 +1015,24 @@ pre,
min-height: 3rem;
}
.shell-omnibox-close {
min-height: 2.75rem;
padding: 0.65rem 0.95rem;
border: 1px solid var(--border-default);
border-radius: 999px;
background: color-mix(in srgb, var(--surface-2) 84%, transparent);
color: var(--text-primary);
}
.shell-omnibox-body {
display: grid;
gap: 0.9rem;
min-height: 0;
padding: 1rem;
overflow: auto;
overscroll-behavior: contain;
}
.shell-omnibox-results {
display: grid;
gap: 0.6rem;
@@ -2067,11 +2116,21 @@ pre,
align-items: stretch;
}
.shell-omnibox-drawer.surface-drawer.is-end {
.shell-omnibox-backdrop {
top: calc(var(--shell-header-height, 5.1rem) + 0.25rem);
bottom: calc(var(--shell-mobile-nav-height, 5.5rem));
}
.shell-omnibox-palette {
top: calc(var(--shell-header-height, 5.1rem) + 0.45rem);
right: 0.75rem;
left: 0.75rem;
width: auto;
top: calc(var(--shell-header-height, 5.1rem) + 0.5rem);
bottom: calc(var(--shell-mobile-nav-height, 5.5rem) + 0.5rem);
max-height: calc(100dvh - var(--shell-header-height, 5.1rem) - var(--shell-mobile-nav-height, 5.5rem) - 1rem);
transform: none;
}
.shell-omnibox-header {
grid-template-columns: 1fr;
}
}