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

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