Use shortcuts component to render keyboard shortcuts on KeyboardShortcuts.tsx

[shermanhuman]

Description

Using fancy shortcuts for keyboard shortcuts. Added some alternating rows and better handling when sidebar is small:

Original:

Original cramped layout:

Improved version:

Improved cramping:

Testing instructions

• Tested on Windows / VS Code
• [] Tested on Windows / Jetbrains
• Test on Mac / VS Code
• [] Test on Mac / Jetbrains

VS Code: Open settings>Shortcuts. Try setting sidebar to different widths.
Jetbrains: not sure

[netlify]

✅ Deploy Preview for continuedev canceled.

Name	Link
🔨 Latest commit	7f36a8b
🔍 Latest deploy log	https://app.netlify.com/sites/continuedev/deploys/67f3277a7ae55700080c7b63

[Patrick-Erichsen]

Here is IntelliJ - it seems as if the key cap styling isn't being applied. Also minor nitpick but I feel that the individual rows could use a bit of horizontal padding so the text isn't flush with the border.

[shermanhuman]

Thanks. Yeah I think the shortcuts glyph component probably needs a conditional for Jetbrains and some specific styling.

The table colors should probably tie into the VS Code and Jetbrains themes. I chose a barely lighter than the background color, as I like a subtle look. But it might be better to just go with the something from the themes.