feat(web): add command palette and keyboard navigation (#152)

[okaforwisdom664-lgtm]

Summary

Resolves #152

This PR introduces a fast, keyboard-driven navigation system and command palette (Cmd/Ctrl+K) for the SaviTools desktop dashboard. Power users can jump between all 12 workstation tools, search recent items, and trigger common contextual actions without reaching for the mouse.

---

Implementation Details

1. Command Palette Dialog (Cmd+K / Ctrl+K)

• Global Trigger: OS-aware shortcut listeners (⌘K on macOS, Ctrl+K on Windows/Linux).
• Header & Mobile Trigger: Added <CommandPaletteTrigger /> in the top navigation bar with a responsive search bar on desktop and touch icon button on mobile.
• Categorized Results: Grouped into Actions (theme switching, settings, example inspect), Recent Items (persisted inspection history, simulated transactions, etc.), and Workstation Tools (all 12 tools).
• Accessibility (ARIA): Implemented standard ARIA combobox pattern (role="combobox", role="listbox", role="option", aria-activedescendant, aria-expanded), complete focus trapping, and focus restoration upon exit.
• Full Keyboard Navigation: Arrow keys (ArrowDown/ArrowUp) with cyclical wrapping, Home/End, Enter to activate, and Esc to close.

2. Zero-Dependency Fuzzy Search Engine (fuzzy-search.ts)

• Custom scoring algorithm prioritizing:
  • Exact match (score: 1000)
  • Prefix match (score: 800+)
  • Word boundary match (score: 600+)
  • Acronyms & initials (e.g. ce -> Contract Events, ob -> Orderbook Simulator)
  • Sequential substring matching with consecutive match bonuses.

3. Recent Items Persistence (recent-items.ts)

• Stored in localStorage under savitools_recent_items.
• Automatic deduplication, max 10 items capping, and custom window event broadcast (savitools-recent-update) for live cross-component reactivity.
• Tracks recently inspected transactions/addresses, composed transactions, funded sandbox keys, and webhook runs.

4. Contextual Actions & Selection Guard (command-palette-context.tsx)

• Cmd/Ctrl+Enter: Executes active tool actions (Inspect in Inspector, Simulate in Composer, Generate/Fund in Sandbox, Send in Webhooks).
• Cmd/Ctrl+C: Contextually copies transaction hash or address.
• Selection Guard: If the user has highlighted text on screen (window.getSelection()), native browser copying is preserved and never overridden.

5. User Preferences (preferences.ts & /settings)

• Added Keyboard & Navigation settings card in /settings with a master toggle switch for palette & shortcuts.
• Persisted to localStorage under savitools_user_preferences.
• Added a visual shortcut guide with styled <kbd> chips.

6. Shortcut Badges & Tooltips (<ShortcutBadge />)

• Dynamic OS-aware <kbd> badges (⌘ on Mac, Ctrl on Windows/Linux) displayed on key action buttons (Inspect, Simulate, Send Webhook).

---

🧪 Validation & Test Results

• Automated Tests: Added command-palette.test.ts with 24 unit tests covering search scoring, recent items, preferences, selection guard, and ARIA logic. (npm test in apps/web passed 24/24).
• TypeScript Check: npx tsc --noEmit passed with 0 errors.
• Production Build: npm run build compiled all 23 static pages with 0 errors.

---

Branch & Compare URL

• Branch: feature/152-command-palette-keyboard-nav
• Compare URL: https://github.com/okaforwisdom664-lgtm/Savitools/pull/new/feature/152-command-palette-keyboard-nav

I am sorry for the delay

[drips-wave]

@okaforwisdom664-lgtm Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits