Keyboard shortcut hints in palette

Area: Navigation UX

Context

Problem: Users don't discover keyboard shortcuts easily. The command palette lists commands but doesn't show their keyboard shortcuts, so users keep using the palette instead of learning faster direct shortcuts.

Solution: Show keyboard shortcuts right-aligned in each command palette row (e.g., "Ctrl+K" next to "Open Search"). This teaches users shortcuts passively as they use the palette.

Not included: A dedicated keyboard shortcuts reference page or customizable shortcuts.

Functional

Expected user flow:

User opens command palette
Each command row shows: icon + label (left) and shortcut hint (right, muted)
User sees "← →" next to "Previous/Next Chapter" and learns the shortcut
Over time, users bypass the palette and use shortcuts directly

Edge cases:

Not all commands have shortcuts — only show hints for those that do
Shortcut format: use symbols (⌘ for Mac, Ctrl for Windows/Linux)

UX & Design

Shortcut hints: Right-aligned in each row, muted/secondary text color, monospace font. Example: Ctrl+K or ← →.

Reference: Data already exists in CommandRegistry.

Technical

Implementation:

Add shortcut field to command objects in CommandPalette.svelte
Render right-aligned <span> with shortcut text when present
Detect Mac vs non-Mac for ⌘ vs Ctrl display

Files:

apps/web/src/lib/components/layout/CommandPalette.svelte (modify)

Status

Current: PLANNED Milestone: Foundation Priority: Low — discoverability improvement

Dependencies:

Requires: command palette (DONE)

← Back to Navigation UX features