Improve Keyboard Shortcuts. Add alt-arrows & alt-shift-arrows.

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/rooms/RoomList.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017, 2018 Vector Creations Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -40,6 +41,8 @@ import * as Receipt from "../../../utils/Receipt";
 import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
 import {RovingTabIndexProvider} from "../../../accessibility/RovingTabIndex";
+import * as Unread from "../../../Unread";
+import RoomViewStore from "../../../stores/RoomViewStore";
 
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@@ -242,6 +245,56 @@ export default createReactClass({
                     });
                 }
                 break;
+            case 'view_room_delta': {
+                const currentRoomId = RoomViewStore.getRoomId();
+                const {
+                    "im.vector.fake.invite": inviteRooms,
+                    "m.favourite": favouriteRooms,
+                    [TAG_DM]: dmRooms,
+                    "im.vector.fake.recent": recentRooms,
+                    "m.lowpriority": lowPriorityRooms,
+                    "im.vector.fake.archived": historicalRooms,
+                    "m.server_notice": serverNoticeRooms,
+                    ...tags
+                } = this.state.lists;
+
+                const shownCustomTagRooms = Object.keys(tags).filter(tagName => {
+                    return (!this.state.customTags || this.state.customTags[tagName]) &&
+                        !tagName.match(STANDARD_TAGS_REGEX);
+                }).map(tagName => tags[tagName]);
+
+                // this order matches the one when generating the room sublists below.
+                let rooms = this._applySearchFilter([
+                    ...inviteRooms,
+                    ...favouriteRooms,
+                    ...dmRooms,
+                    ...recentRooms,
+                    // eslint-disable-next-line prefer-spread
+                    ...[].concat.apply([], shownCustomTagRooms),
+                    ...lowPriorityRooms,
+                    ...historicalRooms,
+                    ...serverNoticeRooms,
+                ], this.props.searchFilter); // TODO optimize
+
+                if (payload.unread) {
+                    // filter to only notification rooms (and our current active room so we can index properly)
+                    rooms = rooms.filter(room => {
+                        return room.roomId === currentRoomId || Unread.doesRoomHaveUnreadMessages(room);
+                    });
+                }
+
+                const currentIndex = rooms.findIndex(room => room.roomId === currentRoomId);
+
+                const [room] = rooms.slice((currentIndex + payload.delta) % rooms.length);
+                // console.log("DEBUG", currentIndex, room, rooms);
+                if (room) {
+                    dis.dispatch({
+                        action: 'view_room',
+                        room_id: room.roomId,
+                    });
+                }
+                break;
+            }
         }
     },
 

src/components/views/rooms/RoomTile.js

@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import classNames from 'classnames';
@@ -225,6 +225,16 @@ export default createReactClass({
             case 'feature_custom_status_changed':
                 this.forceUpdate();
                 break;
+
+            case 'view_room':
+                // when the room is selected make sure its tile is visible, for breadcrumbs/keyboard shortcuts
+                if (payload.room_id === this.props.room.roomId && this._roomTile.current) {
+                    this._roomTile.current.scrollIntoView({
+                        block: "nearest",
+                        behavior: "auto",
+                    });
+                }
+                break;
         }
     },
 
@@ -234,6 +244,10 @@ export default createReactClass({
         });
     },
 
+    UNSAFE_componentWillMount: function() {
+        this._roomTile = createRef();
+    },
+
     componentDidMount: function() {
         /* We bind here rather than in the definition because otherwise we wind up with the
            method only being callable once every 500ms across all instances, which would be wrong */
@@ -538,7 +552,7 @@ export default createReactClass({
         }
 
         return <React.Fragment>
-            <RovingTabIndexWrapper>
+            <RovingTabIndexWrapper inputRef={this._roomTile}>
                 {({onFocus, isActive, ref}) =>
                     <AccessibleButton
                         onFocus={onFocus}

src/components/views/rooms/SendMessageComposer.js

@@ -125,10 +125,12 @@ export default class SendMessageComposer extends React.Component {
     }
 
     onVerticalArrow(e, up) {
-        if (e.ctrlKey || e.shiftKey || e.metaKey) return;
+        // arrows from an initial-caret composer navigates recent messages to edit
+        // ctrl-alt-arrows navigate send history
+        if (e.shiftKey || e.metaKey) return;
 
-        const shouldSelectHistory = e.altKey;
-        const shouldEditLastMessage = !e.altKey && up && !RoomViewStore.getQuotingEvent();
+        const shouldSelectHistory = e.altKey && e.ctrlKey;
+        const shouldEditLastMessage = !e.altKey && !e.ctrlKey && up && !RoomViewStore.getQuotingEvent();
 
         if (shouldSelectHistory) {
             // Try select composer history