Add (ctrl-)alt-up/down keyboard navigation #1645
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Using Alt-Up/Down moves up/down in the room list / DM list (the drawer)
Using Alt-Left moves up one breadcrumb in a breadcrumbed subspace.
Using Ctrl-Alt-Up/Down moves up/down the pinned spaces (the sidebar) or goes into home or DMs when at the top.
These shortcuts match some other popular messengers (e.g. partially telegram, fully discord, partially element)
Subspaces aren't working optimally yet, since they are immediately entered. In a follow-up PR I would like to improve on that so that they are only selected and not automatically visited when using keyboard navigation, however that requires some more changes I haven't looked into yet.
For navigation the lists or buttons implement imperative refs now. Lists implement a
hasSelected
for the parent to check on which element to start searching for the next item to focus, as well as anavigate
method which takes in0
,1
or-1
, meaning select current again, select next or select previous respectively. If navigate returns0
, an item has been selected, if it returns non-zero it means we should continue searching in the adjacent list.The drawer (home) and sidebar both have an instance of code that goes through a list of lists - could maybe deduplicate this, but without typescript it's a pain to maintain correctness as a public method so I'd rather not do that right now while these components still use plain JS.
Type of change
Checklist: