Skip to content

Add keyboard shortcut hints to sidebar navigation #3

@cheapestinference

Description

@cheapestinference

Description

The sidebar navigation (AppSidebar) currently supports keyboard shortcuts via the Command Palette (CommandPalette.tsx), but the shortcut keys are not visible next to the sidebar menu items themselves. Users have no way to discover navigation shortcuts without opening the palette first.

This issue is about displaying small keyboard shortcut hints (e.g., ⌘1, ⌘2, or G H, G A) directly next to each sidebar menu item so users can learn and use them without opening the command palette.

Where to look

  • src/components/layout/AppSidebar.tsx — The main sidebar component where navigation items are rendered. This is where the shortcut hints should be added next to each menu item.
  • src/components/layout/CommandPalette.tsx — Already defines shortcut strings for navigation commands (e.g., 'G H' for Home, 'G T' for Tasks, 'G S' for Sessions). Use these as the source of truth for which shortcuts to display.
  • src/components/ui/dropdown-menu.tsx — Contains a DropdownMenuShortcut component that renders shortcut text with appropriate styling. Can be used as a reference or reused.

Acceptance criteria

  • Each primary navigation item in the sidebar displays its keyboard shortcut hint in a subtle, non-intrusive style (e.g., muted text or a small <kbd> badge)
  • Shortcut hints are hidden when the sidebar is in collapsed/icon-only mode to avoid visual clutter
  • The shortcut keys shown are consistent with those defined in CommandPalette.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions