feat(ui): add keyboard shortcuts

[juliendonck]

Adds keyboard shortcuts:
// To open help => OS modifier key + /
// To open settings => OS modifier key + ,
// To open search => OS modifier key + p
// To open design system => OS modifier key + d
// To create a new project => OS modifier key + n

Also uses cmd key on mac and ctrl on other OS's for all shortcuts.

closes #756

[juliendonck]

@xla can you test if this works on linux? Should work with the ctrl-key.

[rudolfs]

I wonder if there's a nice way to signal the user that keyboard shortcuts are available in the app?

[rudolfs]

Dope 🚀

[juliendonck]

I wonder if there's a nice way to signal the user that keyboard shortcuts are available in the app?

@rudolfs I was wondering about that as well. Maybe we can put it in the settings in some way. @brandonhaslegs what do you think?

[brandonhaslegs]

Normally they're in tooltips.
Slack:

Figma:

Notion:

Google Hangouts

[rudolfs]

Hm, maybe we can stick them in the tooltips and get rid of the help screen?

[juliendonck]

Normally they're in tooltips.
Slack:

Figma:

@rudolfs @brandonhaslegs what would be the icon for ctrl?

[rudolfs]

@rudolfs @brandonhaslegs what would be the icon for ctrl?

I don't think it has an icon, it should be just "Ctrl": https://en.wikipedia.org/wiki/Control_key.
Or maybe ^?

[juliendonck]

@rudolfs @brandonhaslegs what would be the icon for ctrl?

I don't think it has an icon, it should be just "Ctrl": https://en.wikipedia.org/wiki/Control_key.
Or maybe ^?

@rudolfs yeah but I think that's a mac thing. Not sure windows people get it...

[rudolfs]

@rudolfs yeah but I think that's a mac thing. Not sure windows people get it...

I think Ctrl is the safest option then.

[xla]

Shouldn't it show the key depending on the OS, i.e. Cmd for mac and Ctrl for other platforms?

[juliendonck]

Shouldn't it show the key depending on the OS, i.e. Cmd for mac and Ctrl for other platforms?

@xla jup that's what I've implemented. @rudolfs and I are just talking about how to display ctrl in the app.

[xla]

Great to see that we can easily extend the existing key handling code. Some comments inline.

@juliendonck The shortcuts with ctrl worked on my linux machine. The only oddity is when open the help with the keyboard all elements and text are selected.

[juliendonck]

@xla @rudolfs @brandonhaslegs decided to keep it simple for now and create a link in the settings to our keyboard shortcuts. It didn't make sense to put them in the tooltips for now since there are only 2 places where you'd do it (settings and new project) and it didn't make sense to put a tooltip on the new project button every time you hovered it. Should do for now.

[xla]

💟 🐔 👰 ☣

[brandonhaslegs]

Triggering a new keyboard shortcut that opens a modal should close any previous modals right? With these shortcuts I can myself get into a situation where I have many modals open on top of each other and closing reveals all the previous ones I had open. For example, try making a new project, then opening the keyboard shortcuts modal, then new project, then shortcuts modal, etc, etc… it opens endless modals on top of one another. Maybe this can be reported in another issue though.

Excited to have keyboard shortcuts!

[juliendonck]

Triggering a new keyboard shortcut that opens a modal should close any previous modals right? With these shortcuts I can myself get into a situation where I have many modals open on top of each other and closing reveals all the previous ones I had open. For example, try making a new project, then opening the keyboard shortcuts modal, then new project, then shortcuts modal, etc, etc… it opens endless modals on top of one another. Maybe this can be reported in another issue though.

Excited to have keyboard shortcuts!

@brandonhaslegs our modal world is a separate concern that we won't be focusing on for now. It's a long story...