UI — Add keyboard shortcuts and command palette (Cmd+K)

[Tinna23]

Description

Power users and developers expect keyboard-first navigation. This issue adds a command palette (triggered by Cmd+K / Ctrl+K) and key shortcuts for common actions, making Stellar Explain significantly faster to use for returning users.

Keyboard Shortcuts to Implement

Shortcut	Action
Cmd+K / Ctrl+K	Open command palette
/	Focus the search input (when not already focused)
Escape	Close any open panel, modal, or clear search focus
Cmd+1 / Ctrl+1	Switch to Transaction tab
Cmd+2 / Ctrl+2	Switch to Account tab
Cmd+H / Ctrl+H	Open history panel
Cmd+B / Ctrl+B	Open address book panel

Command Palette

src/components/CommandPalette.tsx

A centered modal that opens on Cmd+K:

• Fuzzy search across recent history entries
• Shows matching transactions and accounts with icons
• Arrow keys to navigate results
• Enter to navigate to the selected result
• Escape to close

┌────────────────────────────────────────┐
│  🔍  Search history or type a hash…   │
├────────────────────────────────────────┤
│  Recent                                │
│  ↳ TX  5a7fc615…  2 hours ago         │
│  ↳ ACC GABC…WXYZ  Yesterday           │
│  ↳ TX  abc12345…  3 days ago          │
└────────────────────────────────────────┘

src/hooks/useKeyboardShortcuts.ts

A hook that registers global keyboard event listeners. Must:

• Ignore shortcuts when focus is inside an <input>, <textarea>, or contenteditable
• Clean up listeners on unmount
• Not conflict with browser native shortcuts

src/components/KeyboardShortcutHint.tsx

A small hint badge component [K] shown next to buttons and panel triggers to advertise shortcuts. Hidden on mobile (touch devices).

Integration

• Register useKeyboardShortcuts inside AppShell.tsx
• Add <CommandPalette /> to AppShell.tsx (rendered at root level)
• Add shortcut hints to: search bar, History button, Address Book button
• Command palette reads history from useAppShell() context

Key Files

New files:

• src/components/CommandPalette.tsx
• src/hooks/useKeyboardShortcuts.ts
• src/components/KeyboardShortcutHint.tsx

Modified files:

• src/components/AppShell.tsx
• src/components/SearchBar.tsx
• src/components/history/HistoryButton.tsx
• src/components/addressbook/AddressBookButton.tsx

Acceptance Criteria

• Cmd+K / Ctrl+K opens the command palette from any page
• Command palette shows recent history entries
• Fuzzy search filters entries as user types
• Arrow keys navigate results, Enter navigates to selection
• Escape closes the palette
• / focuses the search input when not already focused
• Tab switching shortcuts work correctly
• History and address book shortcuts open the correct panels
• Shortcuts do not fire when user is typing in an input field
• Shortcut hints visible on desktop, hidden on mobile
• Body scroll locked while palette is open
• TypeScript compiles with no errors

Complexity: High · 200 pts

[Muhamadmust]

Hi maintainer
I would really love to work on this issue