Add Help Modal for Keyboard Shortcuts and Documentation Link in Web App #154
Conversation
|
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 |
|
Yeah, no worries mate! |
noczero
force-pushed
the
add-help-modal
branch
from
d11cab6 to
97b3024
Compare
| @@ -203,7 +209,8 @@ export const MediaView = () => { | |||
| </div> | |||
| { showDetails && | |||
| <div className="md:flex-shrink-0 md:w-90"> | |||
| <Details entry={current} dispatch={dispatch} /> | |||
| <Details entry={current} dispatch={dispatch}/> | |||
| <HelpModal showHelp={showHelp} setShowHelp={setShowHelp} dispatch={dispatch}/> | |||
There was a problem hiding this comment.
Would be better to pass there real mappings also instead of hardcoded strings.
There was a problem hiding this comment.
Good points. But I don't think it's necessary as it only has some important shortcuts.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
| <div className="flex flex-col md:flex-row w-full p-5 md:space-x-4 dark:text-gray-200"> | ||
| <div className="flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6"> | ||
| <div className="flex flex-col space-y-3 w-full self-start"> | ||
| <ShortcutItem label="Next" keys={['Right', '/', 'k', '/', 'Space']} /> |
There was a problem hiding this comment.
All this text become outdated after any changes 🤷♂️
noczero
force-pushed
the
add-help-modal
branch
2 times, most recently
from
429d73a to
ee1889d
Compare
noczero
force-pushed
the
add-help-modal
branch
from
ee1889d to
cb23081
Compare
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:
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:
In
HelpModal.tsx:HelpModal.tsxto implement the Help Modal component.In
MediaView.tsx:HelpModalcomponent.HelpModalcomponent within theMediaViewcomponent.In
single-view-store.ts:showHelpto manage the visibility of the Help Modal.setShowHelpto update theshowHelpstate.Demo
Context