ipfs-webui

ipfs-webui copied to clipboard

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