Skip to content

feat: add cmd+k hotkey to focus search bar with kbd badge indicator#47

Merged
pablaber merged 1 commit intomainfrom
feat/search-hotkey-cmd-k
Mar 6, 2026
Merged

feat: add cmd+k hotkey to focus search bar with kbd badge indicator#47
pablaber merged 1 commit intomainfrom
feat/search-hotkey-cmd-k

Conversation

@pablaber
Copy link
Owner

@pablaber pablaber commented Mar 6, 2026

Summary

  • Installs @tanstack/react-hotkeys and wraps the app with HotkeysProvider in main.tsx
  • Registers a global Mod+K hotkey (⌘K on Mac, Ctrl+K on Windows/Linux) that focuses the search input from anywhere on the page
  • Adds a styled <kbd> badge on the right side of the search input showing the platform-appropriate shortcut hint; the badge fades out when the input is focused or has a query

Testing

5 new tests added to SearchBar.test.tsx:

Test What it covers
renders the kbd badge when enabled <kbd> element is present in the DOM when SearchBar is enabled
kbd badge has hidden class when input is focused Badge gets search-bar-kbd--hidden class on focus
kbd badge has hidden class when query is non-empty Badge gets search-bar-kbd--hidden class when user has typed
kbd badge does not have hidden class when input is blurred and query is empty Badge is visible when idle
Mod+K focuses the search input Firing Ctrl+K (jsdom resolves ModControl on Linux) moves document.activeElement to the input

All 89 tests pass (npm run lint && npm run test && npm run build clean).

@pablaber pablaber merged commit 4a373a1 into main Mar 6, 2026
2 checks passed
@pablaber pablaber deleted the feat/search-hotkey-cmd-k branch March 6, 2026 13:24
@newtabot newtabot bot mentioned this pull request Mar 6, 2026
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