Add Keyboard Shortcuts System

[george-hub331]

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

demo.mp4

[george-hub331]

Hi @SgtPooki, I’ve made an attempt at addressing the issue and would appreciate your review when you have a moment.

[SgtPooki]

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.

[george-hub331]

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!