Skip to content

feat(web): replace existing shortcuts with TanStack Hotkeys#1507

Open
tibisabau wants to merge 2 commits intoSwitchbackTech:mainfrom
tibisabau:feature/replace-shortcuts-with-tanstack-hotkeys
Open

feat(web): replace existing shortcuts with TanStack Hotkeys#1507
tibisabau wants to merge 2 commits intoSwitchbackTech:mainfrom
tibisabau:feature/replace-shortcuts-with-tanstack-hotkeys

Conversation

@tibisabau
Copy link

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:

  • Replacing react-hotkeys-hook with @tanstack/react-hotkeys
  • Refactoring useKeyboardEvent hook to use TanStack Hotkeys internally
  • Updating all components that directly used react-hotkeys-hook
  • Updating tests to work with the new implementation
  • Maintaining backward compatibility with existing keyboard event handlers

Closes #1472.

The code in this pull request was generated by GitHub Copilot with the Claude Sonnet 4.5 model.

Checklist if Applicable

  • The tests passed – yarn test packages/web/src/common/hooks/useKeyboardEvent.test.ts and yarn test packages/web/src/views/Forms/SomedayEventForm/useSomedayFormShortcuts.test.tsx
  • Linting passed – yarn prettier . --write
  • Documentation has been added
  • CHANGELOG.md has been updated

Copilot AI review requested due to automatic review settings March 3, 2026 21:57
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-hotkeys and removed react-hotkeys-hook.
  • Updated form and calendar shortcut hooks/components to register TanStack hotkeys and normalized several key combo strings (e.g., $mod, arrow*).
  • Refactored useKeyboardEvent to 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

  • exactMatch is destructured with a default (exactMatch = true) but never used. With noUnusedLocals: true in tsconfig, this will fail TypeScript compilation. Either implement the exactMatch behavior (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,

Copy link
Contributor

@tyler-dane tyler-dane left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR. However, e2e tests are failing and there are valid PR comments

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.

Replace existing shortcuts with TanStack Hotkeys

3 participants