Skip to content

feat(sdk-app): add command palette for page navigation#1740

Open
jeffredodd wants to merge 1 commit intofeat/sdk-app-hide-chrome-shortcutfrom
feat/sdk-app-command-palette
Open

feat(sdk-app): add command palette for page navigation#1740
jeffredodd wants to merge 1 commit intofeat/sdk-app-hide-chrome-shortcutfrom
feat/sdk-app-command-palette

Conversation

@jeffredodd
Copy link
Copy Markdown
Contributor

@jeffredodd jeffredodd commented May 8, 2026

Summary

  • Adds a Spotlight-style command palette to the SDK dev app: ⌘K opens a floating search box that filters across every navigable page (SDK component previews + design prototypes + Home / Design Home).
  • Arrow keys highlight, Enter navigates, Esc / backdrop click closes. Highlighted result auto-scrolls into view.
  • Pages list is built once at module load by merging the existing componentRegistry and design categorizedRegistry — no new metadata to maintain.
  • Mirrors the ShortcutHelper folder/hook layout but uses its own bare-input visual (no modal header/title/close button). Theming reuses existing CSS variables.
  • Helper modal (?) now lists ⌘K — Open page search.

Demo

Search.Demo.mov

Test plan

  • npm run sdk-app and press ⌘K — bare floating search box appears, input focused
  • Type onboard — filtered list across Company / Contractor / Employee previews + Design contractor self-onboarding
  • Arrow ↓ / ↑ moves the highlight without moving the input cursor; long lists auto-scroll the highlighted row into view
  • Enter on a highlighted row navigates and closes the palette; query resets on next open
  • Esc closes; backdrop click closes
  • Open the sidebar's component-search input, focus it, then press ⌘K — palette still opens (mod shortcut bypasses typing-target check)
  • Press ? and confirm ⌘ K — Open page search is listed in the helper modal
  • npm run tsc and lint stay clean

🤖 Generated with Claude Code

Spotlight-style search overlay for jumping between dev app pages. Cmd+K
opens a floating search box that filters across SDK component previews
and design prototypes; arrow keys highlight, Enter navigates, Esc
closes. Shortcut listed in the helper modal.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant