Keyboard Shortcuts for our Dashboard

[joshenlim]

Hey all! We're planning to start introducing keyboard shortcuts to support power-user behaviors for our table editor - thought that we'd bounce around some ideas for key combinations that are both UX-friendly (keyboard-wise) and doesn't conflict with important/commonly-used browser/native OS shortcuts.

Below's a first draft of the actions-to-shortcuts that's been thought of so far - do feel free to chime in anytime if you feel that any of the shortcuts could have better key combinations, or if you'd like to have a certain action covered by a shortcut!

General

Action	Key 1	Key 2	Key 3 (Optional)	Implications/Notes
View help pop-up for all shortcuts available	shift	/		V13
Open command bar like search for actions	CMD/CTRL	k
Open filter side panel	shift	f		V13
Open sort side panel	shift	s		V13
Close side panel editor (if open)	esc			V13

Within The Editor

Action	Key 1	Key 2	Key 3 (Optional)	Implications/Notes
Add new row via side panel	shift	enter		V13
Edit current cell in editor	Enter			Currently supported already
Edit current row in side panel	CMD/CTRL	e		V13
Delete current row	CMD/CTRL	backspace		V13
Copy cell value	CMD/CTRL	c		Currently supported already
Paste cell value	CMD/CTRL	v		Currently supported already
Add new column	CMD/CTRL	shift	enter
Edit current column in side panel	CMD/CTRL	shift	e
Delete current column	CMD/CTRL	shift	backspace	opens up delete browsing history page in chrome like browsers
Add new table
Edit current table in side panel
Delete current table
Scroll to top edge of table	CMD/CTRL	up		V13
Scroll to right edge of table	CMD/CTRL	right		V13
Scroll to bottom edge of table	CMD/CTRL	down		V13
Scroll to left edge of table	CMD/CTRL	left		V13

[inian]

The standard way of finding out keyboard shortcuts available is Shift+/ (corresponding to ?). Try this out on Github, Youtube, Twitter, etc. I think we should do the same.

And CMD+H which is the currently proposed one hides the current window usually

Other conflicting shortcuts

• CMD+shift+backspace -> opens up delete browsing history page in chrome like browsers
• CMD+up -> goes to top of the page
• CMD+down -> goes to bottom of the page
• CMD+left -> goes back a page
• CMD+right -> goes forward a page

Just cmd+key has a high chance of being mapped to something already. We need 2 modifier keys usually (like CMD+SHIFT) or a lesser used modifier key like control (in a mac) / shift.

[joshenlim]

Gotcha on these! Added CMD+K to the shortcuts table and renamed the discussion - also shifted open filter, sort pane, close side panel as well as navigation shortcuts to under the Within Editor segment since they're specifically for the table editor.

We can create other segments for page-specific shortcuts as we capture all the shortcuts for the app too.

[inian]

I love command palettes! So much easier since I don't need to remember the shortcuts anymore.

We should also have a way to indicate available keyboard shortcuts to users in a non-intrusive way so that new shortcuts can be discovered. In the email app I use, everytime I do an action (like archiving an email) they show a toast with the available keyboard shortcut that I can use for that action.

[joshenlim]

I was thinking of integrating a command palette down the pipeline as well on top of keyboard shortcuts (through either library or in-house), agreed that it's a really good UX

For visibility of the shortcuts atm I plan to show them either throw tooltips or context menus - toast is a great idea as well to inform users of new shortcuts available

[Vaishak]

in supabase.io document pages right now are you using a library/service ( algolia ) or was it built in-house the search shortcut?

[joshenlim]

You're right on the former - the document pages are currently using an external service Algolia

[rienheuver]

Is this still in progress? Would love keyboard shortcuts in the studio

[joewinke]

Yeah there are some basic shortcuts that are seemingly intuitive but don't seem to exist. For example if you have the side drawer editor open, escape should close/cancel but it requires many tabs to get there, or the mouse. No way I can see to create a new row (the above shortcut doesn't work). It would be awesome if it could be easy for a power user fly across the keyboard to create, edit, delete, rearrange, etc rows and columns using conventions that pretty established.

EDIT: Turns out the escape behavior works in the 'insert column drawer' but not the more frequently encountered 'insert row drawer'.