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:
   • HelpModal: A modal component that displays keyboard shortcuts and documentation links.
   • 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!

[dukobpa3]

Would be better to pass there real mappings also instead of hardcoded strings.

[dukobpa3]

this one: const hotkeysToAction = {

[noczero]

Good points. But I don't think it's necessary as it only has some important shortcuts.

[dukobpa3]

Maybe right now yes, but also there is introduced "plugins" so I think there will be extendable shortcuts list and hardcoded help will be useless.

[noczero]

Have you read the Plugin documentation?

Extending the web application is not yet supported. This feature is planned for the future.

So yeah, I don't think there's anything useless here, as shortcuts are a built-in feature in the web app package.

Talking about plugin, to implement a plugin design pattern in React is feasible and can be approached by creating a wrapper component that encapsulates the plugin's logic and functionality.

The wrapper acts as a higher-order component or context provider, managing the plugin’s lifecycle, configuration, and behavior.

This approach allows you to inject plugins into the React component tree while maintaining separation of concerns.

Queation is, where is the best place to put the wrapper?

[dukobpa3]

All this text become outdated after any changes 🤷‍♂️