feat: 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!

[SgtPooki]

Thanks again for this @george-hub331, this is great. Sorry it took me so long to only partially get through it 😅

I only got through 16/26 files but it's looking pretty useful. Some changes requested, and some comments could use some discussion.

[SgtPooki]

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..

[george-hub331]

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.