Keyboard shortcut reference doc or window popout

[mklaber]

Is your feature request related to a problem? Please describe.

This could be seen as a workaround for #654 though has value in and of itself.

Describe the solution you'd like

It would be helpful to have a keyboard shortcut reference sheet available outside of the app (rather than only as a help menu within the app that has to be dismissed in order to start using a key command). This reference sheet could be in a GH wiki, added to the README, or as a separate Markdown file perhaps generated by capturing these lines from HelpSheet.jsx.

Describe alternatives you've considered

Alternatively, the HelpSheet could open in separate window. (Not practical for Electron)

Additional context

YouTube has a couple of examples of describing keys. There's a help doc as well as SHIFT + ? while playing a video:

[mifi]

Maybe we could store the keyboard shortcuts as markdown and then it would automatically be shown on github, while lossless-cut could import and render the markdown file. One problem is that it could get messy/tedious if we want to have multi language support.

[mifi]

shift+/ (?) will now show/hide the new keyboard dialog popup similar to youtube

[mifi]

Now that React supports Portals, I've gathered some info:

• https://stackoverflow.com/questions/42735295/minimal-example-opening-a-window-in-electron-from-react-application
• https://stackoverflow.com/questions/52597250/pop-out-a-react-component-into-a-new-window
• https://medium.com/hackernoon/using-a-react-16-portal-to-do-something-cool-2a2d627b0202
• https://github.com/JakeGinnivan/react-popout
• https://github.com/Ickerday/react-portal-popout
• Make nativeWindowOpen: true the default electron/electron#28511
• https://blog.tandem.chat/portal-windows/
• https://www.electronjs.org/docs/latest/api/window-open
• https://reactjs.org/docs/portals.html

So I think we can use React Portals with window.open to make dialogs popout into a separate window.

[mifi]

created a branch with an experiment but it doesn't quite work 100%:
https://github.com/mifi/lossless-cut/compare/react-window-popout

Current issues:

• there are no styles in the popout window
• modals like Dialog opened in the popout window gets instead opened in the main LosslessCut window

[zwei7]

Show the shortcut when you hover over a button in the helpful hints popup window.