ipfs
feat: Keyboard Shortcuts System
Fixes #2350
Summary
This PR adds a centralized keyboard shortcuts system using React Context, making it easier to manage and customize keyboard shortcuts throughout the application.
Changes
- Added ShortcutsContext to manage global keyboard shortcuts
- Created useShortcuts hook for easy shortcut registration
- Converted ShortcutModal to TypeScript
- Added support for key combinations (e.g. Shift + ?)
- Improved modal layout using CSS Grid
- Added proper TypeScript types and interfaces
- Prevented shortcut execution in modal inputs
- Added automatic grouping of shortcuts by category
Implementation Details
- Used React Context for centralized state management
- Added support for modifier keys (Shift, Ctrl, Alt, Meta)
- Added proper cleanup of event listeners
- Made shortcuts configurable per component
- Maintained backwards compatibility with existing shortcuts
New improvements
- Resolved bugs on shortcut hooks, prevent shortcuts from interfering with inputs / modals / other operations
- Added new general shortcuts for showing tour help(shift + H), focusing on QmHash or CID input(on all screens)(/)
- Added shortcuts on peers page
- Rearraged shortcut sections
Short Demo
https://github.com/user-attachments/assets/c860a977-eb36-418a-92c6-aa2613f95e1e
Hi @SgtPooki, I’ve made an attempt at addressing the issue and would appreciate your review when you have a moment.
Hi @SgtPooki, I’ve made an attempt at addressing the issue and would appreciate your review when you have a moment.
It might take me a while to get to review this one thoroughly.
No worries at all, I understand. Thanks for the heads-up, and I’ll be around if you need anything clarified when you get to it!
So that you know, I'm having some ts migration issues while adding the diagnostics screen in #2392. I am considering allowing // @ts-nocheck since, without it, PRs can easily get out of hand if we're forcing folks to address all that tech debt in new PRs.
I want all new code to be typechecked so we're not exacerbating the problem of untyped code, but without needing new PRs to enlarge unnecessarily..
Hey @SgtPooki, sorry for the delays👀 Wrapped up all pending requests, modularized the shortcut API, added refs, and replaced every document.getElementById with a ref.