feat(web): replace existing shortcuts with TanStack Hotkeys#1507
Open
tibisabau wants to merge 2 commits intoSwitchbackTech:mainfrom
Open
feat(web): replace existing shortcuts with TanStack Hotkeys#1507tibisabau wants to merge 2 commits intoSwitchbackTech:mainfrom
tibisabau wants to merge 2 commits intoSwitchbackTech:mainfrom
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the web app’s keyboard shortcut handling from react-hotkeys-hook (and some custom global keyboard plumbing) to TanStack Hotkeys, aiming to reduce custom maintenance while keeping existing shortcut behavior working.
Changes:
- Added
@tanstack/react-hotkeysand removedreact-hotkeys-hook. - Updated form and calendar shortcut hooks/components to register TanStack hotkeys and normalized several key combo strings (e.g.,
$mod,arrow*). - Refactored
useKeyboardEventto delegate to TanStack Hotkeys and updated its unit tests accordingly.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Adds TanStack hotkeys/store dependencies and removes react-hotkeys-hook. |
| packages/web/package.json | Swaps dependency from react-hotkeys-hook to @tanstack/react-hotkeys. |
| packages/web/src/views/Forms/SomedayEventForm/useSomedayFormShortcuts.ts | Updates Someday form hotkeys to TanStack format ($mod, arrow*). |
| packages/web/src/views/Forms/SomedayEventForm/useSomedayFormShortcuts.test.tsx | Adjusts mocks and expectations for TanStack hotkey combos. |
| packages/web/src/views/Forms/EventForm/EventForm.tsx | Migrates EventForm shortcuts to TanStack and updates combo strings/deps. |
| packages/web/src/views/Calendar/hooks/shortcuts/useFocusHotkey.ts | Migrates reminder hotkey hook to TanStack. |
| packages/web/src/views/Calendar/components/Dedication/Dedication.tsx | Migrates dedication modal shortcut hook to TanStack. |
| packages/web/src/common/hooks/useKeyboardEvent.ts | Replaces custom key stream logic with TanStack useHotkeys. |
| packages/web/src/common/hooks/useKeyboardEvent.test.ts | Reworks tests to mock TanStack useHotkeys and validate registration/behavior. |
Comments suppressed due to low confidence (1)
packages/web/src/common/hooks/useKeyboardEvent.ts:25
exactMatchis destructured with a default (exactMatch = true) but never used. WithnoUnusedLocals: truein tsconfig, this will fail TypeScript compilation. Either implement theexactMatchbehavior (to preserve the prior API) or remove it from the options/destructuring to avoid the unused local.
export function useKeyboardEvent({
combination,
exactMatch = true,
handler,
listenWhileEditing,
packages/web/src/views/Calendar/hooks/shortcuts/useFocusHotkey.ts
Outdated
Show resolved
Hide resolved
tyler-dane
requested changes
Mar 4, 2026
Contributor
tyler-dane
left a comment
There was a problem hiding this comment.
Thanks for the PR. However, e2e tests are failing and there are valid PR comments
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Replaced the existing custom keyboard shortcut implementation with TanStack Hotkeys library. This migration reduces the amount of custom code we need to maintain while leveraging a well-tested, production-ready hotkeys solution. TanStack Hotkeys provides a cleaner API and better support for advanced use cases like sequence shortcuts.
The migration involved:
Closes #1472.
The code in this pull request was generated by GitHub Copilot with the Claude Sonnet 4.5 model.
Checklist if Applicable
yarn test packages/web/src/common/hooks/useKeyboardEvent.test.tsandyarn test packages/web/src/views/Forms/SomedayEventForm/useSomedayFormShortcuts.test.tsxyarn prettier . --write