feat(adminui): T0-1 reusable ContextMenu component + demo page

Adds a reusable right-click / context menu Blazor component for the AdminUI:
- ContextMenu.razor: right-click surface (browser menu suppressed) + optional
  ellipsis fallback trigger, both anchoring the menu at the pointer; keyboard
  nav (arrows/Enter/Esc), transparent backdrop outside-click close (no JS).
- ContextMenu.razor.css: scoped styles on the shared theme tokens.
- ContextMenuItem.cs: Label/OnClick/Icon/Disabled/IsSeparator model + Separator().
- Dev demo page at /dev/context-menu-demo.

Claude-Session: https://claude.ai/code/session_01LVneM3eh1UtJxEisFXgmox
This commit is contained in:
Joseph Doherty
2026-07-16 02:05:01 -04:00
parent f121f8ca16
commit 1d7afbb1eb
4 changed files with 324 additions and 0 deletions
@@ -0,0 +1,35 @@
@page "/dev/context-menu-demo"
@* Dev-only host page to live-verify the reusable ContextMenu component. *@
@attribute [Authorize(Policy = AdminUiPolicies.AuthenticatedRead)]
@rendermode InteractiveServer
<PageTitle>ContextMenu demo</PageTitle>
<h1>ContextMenu demo</h1>
<p>Right-click the card below, or use the <strong>⋯</strong> button.</p>
<div style="display:flex; align-items:center; gap:1rem; margin:1rem 0;">
<ContextMenu Items="_items" ShowEllipsis="false">
<div style="padding:2rem 3rem; border:1px dashed var(--bs-border-color); border-radius:.5rem; user-select:none;">
Right-click me
</div>
</ContextMenu>
<ContextMenu Items="_items" ShowEllipsis="true" />
</div>
<p>Last action: <strong>@_lastAction</strong></p>
@code {
private string _lastAction = "(none)";
private IReadOnlyList<ContextMenuItem> _items => new List<ContextMenuItem>
{
new() { Label = "Edit", Icon = "✏️", OnClick = () => Set("Edit") },
new() { Label = "Duplicate", Icon = "📄", OnClick = () => Set("Duplicate") },
ContextMenuItem.Separator(),
new() { Label = "Delete", Icon = "🗑️", Disabled = true, OnClick = () => Set("Delete") },
};
private void Set(string action) => _lastAction = action;
}