Rebuild shell omnibox as command palette
This commit is contained in:
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user