Added Shortcut Panel

[om-ray]

What does this pull request do?

This pull request adds a panel that shows you every shortcut that the app uses. It is available after you either:

• Open a JSON file
• Open a URL that leads to a JSON file
• Paste in some JSON on the home page

It can be opened using:

• The shortcut Alt/Option + S which can be seen in the button on the left-hand side of the footer
• Clicking on the above-mentioned button

When opened, it shows you a list of the app's shortcuts, all in their own categories, with icons for each of the shortcuts on the left. All shortcuts that use an OS-dependent modifier key (eg. Cmd (Mac) / Ctrl (Windows/Linux)) will only show the shortcut using the key that the user's OS would use.

The panel is also dark mode styled and will change when the user toggles dark mode.

The panel can be closed by:

• Using the shortcut used to open the panel (Alt/Option + S)
• Clicking anywhere outside of the panel
• Clicking the "x" in the top right-hand corner of the panel

There is a demo Loom video below where you can see all the functionalities that I described above in practice

https://www.loom.com/share/bd12894537f342a7bac126bf3518bb7e

[om-ray]

@samejr Please check this PR

[matt-aitken]

@samejr can you run this branch and check you're happy with the functionality. @123om123 the code looks good to me, other than the very minor change to the tsconfig.json I mention in my review

[matt-aitken]

@samejr can you run this branch and check you're happy with the functionality. @123om123 the code looks good to me, other than the very minor change to the tsconfig.json I mention in my review

[samejr]

Hey @123om123 it's looking great 👍. Here are a few tweaks:

• Can you remove the line of copy at the top of the panel "View and change..." as you can't update the shortcuts in this branch.
• Can you add the X icon in the top right (like you have in the other branch)
• Add the dark mode styling for the panel and footer link (It's working in the other branch but not this one)
• Remove the button background on hover in the footer link. Just have this as a subtle text link. You can give it a 90% opacity and fade it up to 100% on hover if you like.
• Also, worth making the whole footer link behave like a link so the cursor should turn to a pointer across the whole thing.

[om-ray]

@samejr I made all the changes you recommended.

[samejr]

Thanks for this, here's a few more tweaks:

1. Add some margin between the text and key icons
2. Footer text needs to be styled in dark mode
3. The close X button in the top right of the panel doesn't close the panel. Also the Esc key doesn't dismiss the panel too.
4. The shortcut text in the panel doesn't have dark mode styling
5. If you hit Cmd K while the shortcuts menu is open, it should close the shortcut panel and open the search bar.