Add Help Modal for Keyboard Shortcuts and Documentation Link in Web App

[noczero]

What is this?

This pull request introduces a Help Modal feature to the web application. The motivation behind this addition is to provide users with an easy way to access keyboard shortcuts and relevant documentation links directly within the application. This enhancement aims to improve user experience by making navigation and functionality more intuitive and accessible.

Changes

Added Features:

1. New Components in HelpModal.tsx:
   • [x] HelpModal: A modal component that displays keyboard shortcuts and documentation links.
   • [x] ShortcutItem: A sub-component to render individual shortcut items within the modal.

Code Changes:

1. In HelpModal.tsx:

   • Created a new file HelpModal.tsx to implement the Help Modal component.
   • The modal includes sections for keyboard shortcuts and documentation links.
   • Added event listeners to handle clicks outside the modal to close it.

2. In MediaView.tsx:

   • Imported the HelpModal component.
   • Integrated the HelpModal component within the MediaView component.
   • Added a new hotkey 'h' to toggle the Help Modal.
   • Updated state management to handle the visibility of the Help Modal.

3. In single-view-store.ts:

   • Added a new state variable showHelp to manage the visibility of the Help Modal.
   • Introduced a new setter method setShowHelp to update the showHelp state.

Demo

Context

• N/A

[xemle]

Hi @noczero

thank you so much for your nice PR and your demo. The demo and code looks good so far. I will check it in detail the next days and let you know.

Great work! I am looking forward to merge your PR

[noczero]

Yeah, no worries mate! Happy to contribute!