feat(web): global keyboard shortcut overlay (?) #1022

Closed
opened 2026-05-09 18:18:25 +00:00 by claude-desktop · 1 comment
Collaborator

As an operator,
I want a ? overlay listing every keyboard shortcut, grouped by scope,
so that I can discover and recall shortcuts without leaving the app.

Acceptance criteria

Trigger

  • ? key (Shift+/) opens the overlay anywhere except inside <input>, <textarea>, [contenteditable] (registered in #nav-v2-3).
  • AZERTY chord alias g h opens the same overlay.
  • Sidebar footer button "Keyboard shortcuts" opens it on click (mobile-friendly entry point).

Dialog

  • Built on Base UI <Dialog> (focus trap, focus return, Esc to close — all baked).
  • Title: "Keyboard shortcuts". Close button (×) top right.
  • First focus → close button (avoid focusing non-interactive <kbd> elements).
  • Width max-w-[640px]; centred; shadow-overlay.

Content

  • Reads the SHORTCUTS registry (#nav-v2-3) — no hard-coded duplicate list.
  • Grouped by scope: NAVIGATION, BOARD, AGENTS, FLOWS, GLOBAL.
  • Each group: <h3 id="…"> + <dl aria-labelledby="…"> of <div><dt> (keys) + <dd> (label).
  • Keys rendered as <kbd> elements styled rounded-compact border bg-bg-elevated px-1.5 text-meta.
  • Multiple keys in a chord rendered as separate <kbd> elements with a thin separator.

Tests

  • ? key opens dialog; Esc closes.
  • Footer button opens dialog.
  • Dialog lists at least one row per registered scope.
  • Focus on close button when opened.
  • Dialog suppressed when focus is inside a text input.

Out of scope

  • Editing / customising shortcuts.
  • Per-OS variants (Cmd vs Ctrl).
  • Search inside the overlay.

References

  • Spec: docs/specs/nav-consolidation.md § Global keyboard shortcut overlay.
  • Registry built in #nav-v2-3.
**As an** operator, **I want** a `?` overlay listing every keyboard shortcut, grouped by scope, **so that** I can discover and recall shortcuts without leaving the app. ## Acceptance criteria ### Trigger - [ ] `?` key (Shift+/) opens the overlay anywhere except inside `<input>`, `<textarea>`, `[contenteditable]` (registered in #nav-v2-3). - [ ] AZERTY chord alias `g h` opens the same overlay. - [ ] Sidebar footer button "Keyboard shortcuts" opens it on click (mobile-friendly entry point). ### Dialog - [ ] Built on Base UI `<Dialog>` (focus trap, focus return, Esc to close — all baked). - [ ] Title: "Keyboard shortcuts". Close button (×) top right. - [ ] First focus → close button (avoid focusing non-interactive `<kbd>` elements). - [ ] Width `max-w-[640px]`; centred; `shadow-overlay`. ### Content - [ ] Reads the `SHORTCUTS` registry (#nav-v2-3) — no hard-coded duplicate list. - [ ] Grouped by scope: NAVIGATION, BOARD, AGENTS, FLOWS, GLOBAL. - [ ] Each group: `<h3 id="…">` + `<dl aria-labelledby="…">` of `<div><dt>` (keys) + `<dd>` (label). - [ ] Keys rendered as `<kbd>` elements styled `rounded-compact border bg-bg-elevated px-1.5 text-meta`. - [ ] Multiple keys in a chord rendered as separate `<kbd>` elements with a thin separator. ### Tests - [ ] `?` key opens dialog; `Esc` closes. - [ ] Footer button opens dialog. - [ ] Dialog lists at least one row per registered scope. - [ ] Focus on close button when opened. - [ ] Dialog suppressed when focus is inside a text input. ## Out of scope - Editing / customising shortcuts. - Per-OS variants (Cmd vs Ctrl). - Search inside the overlay. ## References - Spec: `docs/specs/nav-consolidation.md` § Global keyboard shortcut overlay. - Registry built in #nav-v2-3.
claude-desktop added this to the nav-v2 milestone 2026-05-09 18:18:25 +00:00
Collaborator

🦵 @charles kicked the queue — re-running implement on @dev.

🦵 @charles kicked the queue — re-running implement on @dev.
Sign in to join this conversation.
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
charles/claude-hooks#1022
No description provided.