Merge branch 'develop' into resizable-call-view

src/components/structures/LeftPanel.tsx

@@ -16,9 +16,11 @@ limitations under the License.
 
 import * as React from "react";
 import { createRef } from "react";
+import classNames from "classnames";
+import { Room } from "matrix-js-sdk/src/models/room";
+
 import GroupFilterPanel from "./GroupFilterPanel";
 import CustomRoomTagPanel from "./CustomRoomTagPanel";
-import classNames from "classnames";
 import dis from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
 import RoomList from "../views/rooms/RoomList";
@@ -32,7 +34,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import SettingsStore from "../../settings/SettingsStore";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
-import {Key} from "../../Keyboard";
 import IndicatorScrollbar from "../structures/IndicatorScrollbar";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
@@ -40,6 +41,8 @@ import RoomListNumResults from "../views/rooms/RoomListNumResults";
 import LeftPanelWidget from "./LeftPanelWidget";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../customisations/Media";
+import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
+import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 
 interface IProps {
     isMinimized: boolean;
@@ -49,6 +52,7 @@ interface IProps {
 interface IState {
     showBreadcrumbs: boolean;
     showGroupFilterPanel: boolean;
+    activeSpace?: Room;
 }
 
 // List of CSS classes which should be included in keyboard navigation within the room list
@@ -74,11 +78,13 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         this.state = {
             showBreadcrumbs: BreadcrumbsStore.instance.visible,
             showGroupFilterPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
+            activeSpace: SpaceStore.instance.activeSpace,
         };
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
         OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate);
+        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
         this.bgImageWatcherRef = SettingsStore.watchSetting(
             "RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
         this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
@@ -96,9 +102,14 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
         OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate);
+        SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
         this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
     }
 
+    private updateActiveSpace = (activeSpace: Room) => {
+        this.setState({ activeSpace });
+    };
+
     private onExplore = () => {
         dis.fire(Action.ViewRoomDirectory);
     };
@@ -286,17 +297,18 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     private onKeyDown = (ev: React.KeyboardEvent) => {
         if (!this.focusedElement) return;
 
-        switch (ev.key) {
-            case Key.ARROW_UP:
-            case Key.ARROW_DOWN:
+        const action = getKeyBindingsManager().getRoomListAction(ev);
+        switch (action) {
+            case RoomListAction.NextRoom:
+            case RoomListAction.PrevRoom:
                 ev.stopPropagation();
                 ev.preventDefault();
-                this.onMoveFocus(ev.key === Key.ARROW_UP);
+                this.onMoveFocus(action === RoomListAction.PrevRoom);
                 break;
         }
     };
 
-    private onEnter = () => {
+    private selectRoom = () => {
         const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile");
         if (firstRoom) {
             firstRoom.click();
@@ -377,11 +389,13 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             >
                 <RoomSearch
                     isMinimized={this.props.isMinimized}
-                    onVerticalArrow={this.onKeyDown}
-                    onEnter={this.onEnter}
+                    onKeyDown={this.onKeyDown}
+                    onSelectRoom={this.selectRoom}
                 />
                 <AccessibleTooltipButton
-                    className="mx_LeftPanel_exploreButton"
+                    className={classNames("mx_LeftPanel_exploreButton", {
+                        mx_LeftPanel_exploreButton_space: !!this.state.activeSpace,
+                    })}
                     onClick={this.onExplore}
                     title={_t("Explore rooms")}
                 />
@@ -407,6 +421,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             onBlur={this.onBlur}
             isMinimized={this.props.isMinimized}
             onResize={this.onResize}
+            activeSpace={this.state.activeSpace}
         />;
 
         const containerClasses = classNames({

src/components/structures/LoggedInView.tsx

@@ -21,7 +21,7 @@ import * as PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { DragDropContext } from 'react-beautiful-dnd';
 
-import {Key, isOnlyCtrlOrCmdKeyEvent, isOnlyCtrlOrCmdIgnoreShiftKeyEvent, isMac} from '../../Keyboard';
+import {Key} from '../../Keyboard';
 import PageTypes from '../../PageTypes';
 import CallMediaHandler from '../../CallMediaHandler';
 import { fixupColorFonts } from '../../utils/FontManager';
@@ -55,6 +55,7 @@ import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import Modal from "../../Modal";
 import { ICollapseConfig } from "../../resizer/distributors/collapse";
 import HostSignupContainer from '../views/host_signup/HostSignupContainer';
+import { getKeyBindingsManager, NavigationAction, RoomAction } from '../../KeyBindingsManager';
 import { IOpts } from "../../createRoom";
 import SpacePanel from "../views/spaces/SpacePanel";
 import {replaceableComponent} from "../../utils/replaceableComponent";
@@ -74,7 +75,6 @@ function canElementReceiveInput(el) {
 interface IProps {
     matrixClient: MatrixClient;
     onRegistered: (credentials: IMatrixClientCreds) => Promise<MatrixClient>;
-    viaServers?: string[];
     hideToSRUsers: boolean;
     resizeNotifier: ResizeNotifier;
     // eslint-disable-next-line camelcase
@@ -143,9 +143,6 @@ class LoggedInView extends React.Component<IProps, IState> {
         // transitioned to PWLU)
         onRegistered: PropTypes.func,
 
-        // Used by the RoomView to handle joining rooms
-        viaServers: PropTypes.arrayOf(PropTypes.string),
-
         // and lots and lots of other stuff.
     };
 
@@ -440,86 +437,55 @@ class LoggedInView extends React.Component<IProps, IState> {
 
     _onKeyDown = (ev) => {
         let handled = false;
-        const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
-        const hasModifier = ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey;
-        const isModifier = ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT;
-        const modKey = isMac ? ev.metaKey : ev.ctrlKey;
 
-        switch (ev.key) {
-            case Key.PAGE_UP:
-            case Key.PAGE_DOWN:
-                if (!hasModifier && !isModifier) {
-                    this._onScrollKeyPressed(ev);
-                    handled = true;
-                }
+        const roomAction = getKeyBindingsManager().getRoomAction(ev);
+        switch (roomAction) {
+            case RoomAction.ScrollUp:
+            case RoomAction.RoomScrollDown:
+            case RoomAction.JumpToFirstMessage:
+            case RoomAction.JumpToLatestMessage:
+                // pass the event down to the scroll panel
+                this._onScrollKeyPressed(ev);
+                handled = true;
                 break;
+            case RoomAction.FocusSearch:
+                dis.dispatch({
+                    action: 'focus_search',
+                });
+                handled = true;
+                break;
+        }
+        if (handled) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            return;
+        }
 
-            case Key.HOME:
-            case Key.END:
-                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
-                    this._onScrollKeyPressed(ev);
-                    handled = true;
-                }
+        const navAction = getKeyBindingsManager().getNavigationAction(ev);
+        switch (navAction) {
+            case NavigationAction.FocusRoomSearch:
+                dis.dispatch({
+                    action: 'focus_room_filter',
+                });
+                handled = true;
                 break;
-            case Key.K:
-                if (ctrlCmdOnly) {
-                    dis.dispatch({
-                        action: 'focus_room_filter',
-                    });
-                    handled = true;
-                }
+            case NavigationAction.ToggleUserMenu:
+                dis.fire(Action.ToggleUserMenu);
+                handled = true;
                 break;
-            case Key.F:
-                if (ctrlCmdOnly && SettingsStore.getValue("ctrlFForSearch")) {
-                    dis.dispatch({
-                        action: 'focus_search',
-                    });
-                    handled = true;
-                }
+            case NavigationAction.ToggleShortCutDialog:
+                KeyboardShortcuts.toggleDialog();
+                handled = true;
                 break;
-            case Key.BACKTICK:
-                // Ideally this would be CTRL+P for "Profile", but that's
-                // taken by the print dialog. CTRL+I for "Information"
-                // was previously chosen but conflicted with italics in
-                // composer, so CTRL+` it is
-
-                if (ctrlCmdOnly) {
-                    dis.fire(Action.ToggleUserMenu);
-                    handled = true;
-                }
+            case NavigationAction.GoToHome:
+                dis.dispatch({
+                    action: 'view_home_page',
+                });
+                Modal.closeCurrentModal("homeKeyboardShortcut");
+                handled = true;
                 break;
-
-            case Key.SLASH:
-                if (isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev)) {
-                    KeyboardShortcuts.toggleDialog();
-                    handled = true;
-                }
-                break;
-
-            case Key.H:
-                if (ev.altKey && modKey) {
-                    dis.dispatch({
-                        action: 'view_home_page',
-                    });
-                    Modal.closeCurrentModal("homeKeyboardShortcut");
-                    handled = true;
-                }
-                break;
-
-            case Key.ARROW_UP:
-            case Key.ARROW_DOWN:
-                if (ev.altKey && !ev.ctrlKey && !ev.metaKey) {
-                    dis.dispatch<ViewRoomDeltaPayload>({
-                        action: Action.ViewRoomDelta,
-                        delta: ev.key === Key.ARROW_UP ? -1 : 1,
-                        unread: ev.shiftKey,
-                    });
-                    handled = true;
-                }
-                break;
-
-            case Key.PERIOD:
-                if (ctrlCmdOnly && (this.props.page_type === "room_view" || this.props.page_type === "group_view")) {
+            case NavigationAction.ToggleRoomSidePanel:
+                if (this.props.page_type === "room_view" || this.props.page_type === "group_view") {
                     dis.dispatch<ToggleRightPanelPayload>({
                         action: Action.ToggleRightPanel,
                         type: this.props.page_type === "room_view" ? "room" : "group",
@@ -527,16 +493,48 @@ class LoggedInView extends React.Component<IProps, IState> {
                     handled = true;
                 }
                 break;
-
+            case NavigationAction.SelectPrevRoom:
+                dis.dispatch<ViewRoomDeltaPayload>({
+                    action: Action.ViewRoomDelta,
+                    delta: -1,
+                    unread: false,
+                });
+                handled = true;
+                break;
+            case NavigationAction.SelectNextRoom:
+                dis.dispatch<ViewRoomDeltaPayload>({
+                    action: Action.ViewRoomDelta,
+                    delta: 1,
+                    unread: false,
+                });
+                handled = true;
+                break;
+            case NavigationAction.SelectPrevUnreadRoom:
+                dis.dispatch<ViewRoomDeltaPayload>({
+                    action: Action.ViewRoomDelta,
+                    delta: -1,
+                    unread: true,
+                });
+                break;
+            case NavigationAction.SelectNextUnreadRoom:
+                dis.dispatch<ViewRoomDeltaPayload>({
+                    action: Action.ViewRoomDelta,
+                    delta: 1,
+                    unread: true,
+                });
+                break;
             default:
                 // if we do not have a handler for it, pass it to the platform which might
                 handled = PlatformPeg.get().onKeyDown(ev);
         }
-
         if (handled) {
             ev.stopPropagation();
             ev.preventDefault();
-        } else if (!isModifier && !ev.altKey && !ev.ctrlKey && !ev.metaKey) {
+            return;
+        }
+
+        const isModifier = ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT;
+        if (!isModifier && !ev.altKey && !ev.ctrlKey && !ev.metaKey) {
             // The above condition is crafted to _allow_ characters with Shift
             // already pressed (but not the Shift key down itself).
 
@@ -625,11 +623,9 @@ class LoggedInView extends React.Component<IProps, IState> {
             case PageTypes.RoomView:
                 pageElement = <RoomView
                     ref={this._roomView}
-                    autoJoin={this.props.autoJoin}
                     onRegistered={this.props.onRegistered}
                     threepidInvite={this.props.threepidInvite}
                     oobData={this.props.roomOobData}
-                    viaServers={this.props.viaServers}
                     key={this.props.currentRoomId || 'roomview'}
                     resizeNotifier={this.props.resizeNotifier}
                     justCreatedOpts={this.props.roomJustCreatedOpts}

src/components/structures/MatrixChat.tsx

@@ -80,10 +80,10 @@ import DialPadModal from "../views/voip/DialPadModal";
 import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast';
 import { shouldUseLoginForWelcome } from "../../utils/pages";
 import SpaceStore from "../../stores/SpaceStore";
-import SpaceRoomDirectory from "./SpaceRoomDirectory";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import RoomListStore from "../../stores/room-list/RoomListStore";
 import {RoomUpdateCause} from "../../stores/room-list/models";
+import defaultDispatcher from "../../dispatcher/dispatcher";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -202,7 +202,6 @@ interface IState {
     ready: boolean;
     threepidInvite?: IThreepidInvite,
     roomOobData?: object;
-    viaServers?: string[];
     pendingInitialSync?: boolean;
     justRegistered?: boolean;
     roomJustCreatedOpts?: IOpts;
@@ -691,10 +690,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             }
             case Action.ViewRoomDirectory: {
                 if (SpaceStore.instance.activeSpace) {
-                    Modal.createTrackedDialog("Space room directory", "", SpaceRoomDirectory, {
-                        space: SpaceStore.instance.activeSpace,
-                        initialText: payload.initialText,
-                    }, "mx_SpaceRoomDirectory_dialogWrapper", false, true);
+                    defaultDispatcher.dispatch({
+                        action: "view_room",
+                        room_id: SpaceStore.instance.activeSpace.roomId,
+                    });
                 } else {
                     const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
                     Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
@@ -929,7 +928,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 page_type: PageTypes.RoomView,
                 threepidInvite: roomInfo.threepid_invite,
                 roomOobData: roomInfo.oob_data,
-                viaServers: roomInfo.via_servers,
                 ready: true,
                 roomJustCreatedOpts: roomInfo.justCreatedOpts,
             }, () => {
@@ -1556,7 +1554,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             } else if (request.pending) {
                 ToastStore.sharedInstance().addOrReplaceToast({
                     key: 'verifreq_' + request.channel.transactionId,
-                    title: request.isSelfVerification ? _t("Self-verification request") : _t("Verification Request"),
+                    title: _t("Verification requested"),
                     icon: "verification",
                     props: {request},
                     component: sdk.getComponent("toasts.VerificationRequestToast"),

src/components/structures/MessagePanel.js

@@ -46,6 +46,9 @@ function shouldFormContinuation(prevEvent, mxEvent) {
     // check if within the max continuation period
     if (mxEvent.getTs() - prevEvent.getTs() > CONTINUATION_MAX_INTERVAL) return false;
 
+    // As we summarise redactions, do not continue a redacted event onto a non-redacted one and vice-versa
+    if (mxEvent.isRedacted() !== prevEvent.isRedacted()) return false;
+
     // Some events should appear as continuations from previous events of different types.
     if (mxEvent.getType() !== prevEvent.getType() &&
         (!continuedTypes.includes(mxEvent.getType()) ||
@@ -452,6 +455,20 @@ export default class MessagePanel extends React.Component {
         });
     };
 
+    _getNextEventInfo(arr, i) {
+        const nextEvent = i < arr.length - 1
+            ? arr[i + 1]
+            : null;
+
+        // The next event with tile is used to to determine the 'last successful' flag
+        // when rendering the tile. The shouldShowEvent function is pretty quick at what
+        // it does, so this should have no significant cost even when a room is used for
+        // not-chat purposes.
+        const nextTile = arr.slice(i + 1).find(e => this._shouldShowEvent(e));
+
+        return {nextEvent, nextTile};
+    }
+
     _getEventTiles() {
         this.eventNodes = {};
 
@@ -503,6 +520,7 @@ export default class MessagePanel extends React.Component {
             const mxEv = this.props.events[i];
             const eventId = mxEv.getId();
             const last = (mxEv === lastShownEvent);
+            const {nextEvent, nextTile} = this._getNextEventInfo(this.props.events, i);
 
             if (grouper) {
                 if (grouper.shouldGroup(mxEv)) {
@@ -519,22 +537,12 @@ export default class MessagePanel extends React.Component {
 
             for (const Grouper of groupers) {
                 if (Grouper.canStartGroup(this, mxEv)) {
-                    grouper = new Grouper(this, mxEv, prevEvent, lastShownEvent);
+                    grouper = new Grouper(this, mxEv, prevEvent, lastShownEvent, nextEvent, nextTile);
                 }
             }
             if (!grouper) {
                 const wantTile = this._shouldShowEvent(mxEv);
                 if (wantTile) {
-                    const nextEvent = i < this.props.events.length - 1
-                        ? this.props.events[i + 1]
-                        : null;
-
-                    // The next event with tile is used to to determine the 'last successful' flag
-                    // when rendering the tile. The shouldShowEvent function is pretty quick at what
-                    // it does, so this should have no significant cost even when a room is used for
-                    // not-chat purposes.
-                    const nextTile = this.props.events.slice(i + 1).find(e => this._shouldShowEvent(e));
-
                     // make sure we unpack the array returned by _getTilesForEvent,
                     // otherwise react will auto-generate keys and we will end up
                     // replacing all of the DOM elements every time we paginate.
@@ -1032,7 +1040,7 @@ class RedactionGrouper {
         return panel._shouldShowEvent(ev) && ev.isRedacted();
     }
 
-    constructor(panel, ev, prevEvent, lastShownEvent) {
+    constructor(panel, ev, prevEvent, lastShownEvent, nextEvent, nextEventTile) {
         this.panel = panel;
         this.readMarker = panel._readMarkerForEvent(
             ev.getId(),
@@ -1041,9 +1049,15 @@ class RedactionGrouper {
         this.events = [ev];
         this.prevEvent = prevEvent;
         this.lastShownEvent = lastShownEvent;
+        this.nextEvent = nextEvent;
+        this.nextEventTile = nextEventTile;
     }
 
     shouldGroup(ev) {
+        // absorb hidden events so that they do not break up streams of messages & redaction events being grouped
+        if (!this.panel._shouldShowEvent(ev)) {
+            return true;
+        }
         if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) {
             return false;
         }
@@ -1055,6 +1069,9 @@ class RedactionGrouper {
             ev.getId(),
             ev === this.lastShownEvent,
         );
+        if (!this.panel._shouldShowEvent(ev)) {
+            return;
+        }
         this.events.push(ev);
     }
 
@@ -1080,13 +1097,10 @@ class RedactionGrouper {
         );
 
         const senders = new Set();
-        let eventTiles = this.events.map((e) => {
+        let eventTiles = this.events.map((e, i) => {
             senders.add(e.sender);
-            // In order to prevent DateSeparators from appearing in the expanded form,
-            // render each member event as if the previous one was itself.
-            // This way, the timestamp of the previous event === the
-            // timestamp of the current event, and no DateSeparator is inserted.
-            return panel._getTilesForEvent(e, e, e === lastShownEvent);
+            const prevEvent = i === 0 ? this.prevEvent : this.events[i - 1];
+            return panel._getTilesForEvent(prevEvent, e, e === lastShownEvent, this.nextEvent, this.nextEventTile);
         }).reduce((a, b) => a.concat(b), []);
 
         if (eventTiles.length === 0) {
@@ -1114,7 +1128,7 @@ class RedactionGrouper {
     }
 
     getNewPrevEvent() {
-        return this.events[0];
+        return this.events[this.events.length - 1];
     }
 }
 

src/components/structures/RoomSearch.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 2021 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.
@@ -20,17 +20,21 @@ import classNames from "classnames";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
 import { ActionPayload } from "../../dispatcher/payloads";
-import { Key } from "../../Keyboard";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import { Action } from "../../dispatcher/actions";
 import RoomListStore from "../../stores/room-list/RoomListStore";
 import { NameFilterCondition } from "../../stores/room-list/filters/NameFilterCondition";
+import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
 
 interface IProps {
     isMinimized: boolean;
-    onVerticalArrow(ev: React.KeyboardEvent): void;
-    onEnter(ev: React.KeyboardEvent): boolean;
+    onKeyDown(ev: React.KeyboardEvent): void;
+    /**
+     * @returns true if a room has been selected and the search field should be cleared
+     */
+    onSelectRoom(): boolean;
 }
 
 interface IState {
@@ -53,6 +57,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         };
 
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        // clear filter when changing spaces, in future we may wish to maintain a filter per-space
+        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.clearInput);
     }
 
     public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>): void {
@@ -72,6 +78,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
 
     public componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
+        SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.clearInput);
     }
 
     private onAction = (payload: ActionPayload) => {
@@ -108,18 +115,26 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     };
 
     private onKeyDown = (ev: React.KeyboardEvent) => {
-        if (ev.key === Key.ESCAPE) {
-            this.clearInput();
-            defaultDispatcher.fire(Action.FocusComposer);
-        } else if (ev.key === Key.ARROW_UP || ev.key === Key.ARROW_DOWN) {
-            this.props.onVerticalArrow(ev);
-        } else if (ev.key === Key.ENTER) {
-            const shouldClear = this.props.onEnter(ev);
-            if (shouldClear) {
-                // wrap in set immediate to delay it so that we don't clear the filter & then change room
-                setImmediate(() => {
-                    this.clearInput();
-                });
+        const action = getKeyBindingsManager().getRoomListAction(ev);
+        switch (action) {
+            case RoomListAction.ClearSearch:
+                this.clearInput();
+                defaultDispatcher.fire(Action.FocusComposer);
+                break;
+            case RoomListAction.NextRoom:
+            case RoomListAction.PrevRoom:
+                // we don't handle these actions here put pass the event on to the interested party (LeftPanel)
+                this.props.onKeyDown(ev);
+                break;
+            case RoomListAction.SelectRoom: {
+                const shouldClear = this.props.onSelectRoom();
+                if (shouldClear) {
+                    // wrap in set immediate to delay it so that we don't clear the filter & then change room
+                    setImmediate(() => {
+                        this.clearInput();
+                    });
+                }
+                break;
             }
         }
     };

src/components/structures/RoomView.tsx

@@ -40,7 +40,6 @@ import Tinter from '../../Tinter';
 import rateLimitedFunc from '../../ratelimitedfunc';
 import * as Rooms from '../../Rooms';
 import eventSearch, { searchPagination } from '../../Searching';
-import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent, Key } from '../../Keyboard';
 import MainSplit from './MainSplit';
 import RightPanel from './RightPanel';
 import RoomViewStore from '../../stores/RoomViewStore';
@@ -79,6 +78,7 @@ import Notifier from "../../Notifier";
 import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast";
 import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
 import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
+import { getKeyBindingsManager, RoomAction } from '../../KeyBindingsManager';
 import { objectHasDiff } from "../../utils/objects";
 import SpaceRoomView from "./SpaceRoomView";
 import { IOpts } from "../../createRoom";
@@ -112,10 +112,6 @@ interface IProps {
         inviterName?: string;
     };
 
-    // Servers the RoomView can use to try and assist joins
-    viaServers?: string[];
-
-    autoJoin?: boolean;
     resizeNotifier: ResizeNotifier;
     justCreatedOpts?: IOpts;
 
@@ -450,9 +446,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         // now not joined because the js-sdk peeking API will clobber our historical room,
         // making it impossible to indicate a newly joined room.
         if (!joining && roomId) {
-            if (this.props.autoJoin) {
-                this.onJoinButtonClicked();
-            } else if (!room && shouldPeek) {
+            if (!room && shouldPeek) {
                 console.info("Attempting to peek into room %s", roomId);
                 this.setState({
                     peekLoading: true,
@@ -668,26 +662,20 @@ export default class RoomView extends React.Component<IProps, IState> {
     private onReactKeyDown = ev => {
         let handled = false;
 
-        switch (ev.key) {
-            case Key.ESCAPE:
-                if (!ev.altKey && !ev.ctrlKey && !ev.shiftKey && !ev.metaKey) {
-                    this.messagePanel.forgetReadMarker();
-                    this.jumpToLiveTimeline();
-                    handled = true;
-                }
+        const action = getKeyBindingsManager().getRoomAction(ev);
+        switch (action) {
+            case RoomAction.DismissReadMarker:
+                this.messagePanel.forgetReadMarker();
+                this.jumpToLiveTimeline();
+                handled = true;
                 break;
-            case Key.PAGE_UP:
-                if (!ev.altKey && !ev.ctrlKey && ev.shiftKey && !ev.metaKey) {
-                    this.jumpToReadMarker();
-                    handled = true;
-                }
+            case RoomAction.JumpToOldestUnread:
+                this.jumpToReadMarker();
+                handled = true;
                 break;
-            case Key.U: // Mac returns lowercase
-            case Key.U.toUpperCase():
-                if (isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev) && ev.shiftKey) {
-                    dis.dispatch({ action: "upload_file" }, true);
-                    handled = true;
-                }
+            case RoomAction.UploadFile:
+                dis.dispatch({ action: "upload_file" }, true);
+                handled = true;
                 break;
         }
 
@@ -1123,7 +1111,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 const signUrl = this.props.threepidInvite?.signUrl;
                 dis.dispatch({
                     action: 'join_room',
-                    opts: { inviteSignUrl: signUrl, viaServers: this.props.viaServers },
+                    opts: { inviteSignUrl: signUrl },
                     _type: "unknown", // TODO: instrumentation
                 });
                 return Promise.resolve();

src/components/structures/ScrollPanel.js

@@ -16,10 +16,10 @@ limitations under the License.
 
 import React, {createRef} from "react";
 import PropTypes from 'prop-types';
-import { Key } from '../../Keyboard';
 import Timer from '../../utils/Timer';
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import {getKeyBindingsManager, RoomAction} from "../../KeyBindingsManager";
 
 const DEBUG_SCROLL = false;
 
@@ -535,29 +535,19 @@ export default class ScrollPanel extends React.Component {
      * @param {object} ev the keyboard event
      */
     handleScrollKey = ev => {
-        switch (ev.key) {
-            case Key.PAGE_UP:
-                if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
-                    this.scrollRelative(-1);
-                }
+        const roomAction = getKeyBindingsManager().getRoomAction(ev);
+        switch (roomAction) {
+            case RoomAction.ScrollUp:
+                this.scrollRelative(-1);
                 break;
-
-            case Key.PAGE_DOWN:
-                if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
-                    this.scrollRelative(1);
-                }
+            case RoomAction.RoomScrollDown:
+                this.scrollRelative(1);
                 break;
-
-            case Key.HOME:
-                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
-                    this.scrollToTop();
-                }
+            case RoomAction.JumpToFirstMessage:
+                this.scrollToTop();
                 break;
-
-            case Key.END:
-                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
-                    this.scrollToBottom();
-                }
+            case RoomAction.JumpToLatestMessage:
+                this.scrollToBottom();
                 break;
         }
     };

src/components/structures/SearchBox.js

@@ -32,6 +32,8 @@ export default class SearchBox extends React.Component {
         onKeyDown: PropTypes.func,
         className: PropTypes.string,
         placeholder: PropTypes.string.isRequired,
+        autoFocus: PropTypes.bool,
+        initialValue: PropTypes.string,
 
         // If true, the search box will focus and clear itself
         // on room search focus action (it would be nicer to take
@@ -49,7 +51,7 @@ export default class SearchBox extends React.Component {
         this._search = createRef();
 
         this.state = {
-            searchTerm: "",
+            searchTerm: this.props.initialValue || "",
             blurred: true,
         };
     }
@@ -158,6 +160,7 @@ export default class SearchBox extends React.Component {
                     onBlur={this._onBlur}
                     placeholder={ placeholder }
                     autoComplete="off"
+                    autoFocus={this.props.autoFocus}
                 />
                 { clearButton }
             </div>

src/components/structures/SpaceRoomDirectory.tsx

@@ -14,32 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useMemo, useRef, useState} from "react";
-import Room from "matrix-js-sdk/src/models/room";
-import MatrixEvent from "matrix-js-sdk/src/models/event";
+import React, {useMemo, useState} from "react";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixClient} from "matrix-js-sdk/src/client";
 import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
+import classNames from "classnames";
+import {sortBy} from "lodash";
 
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import dis from "../../dispatcher/dispatcher";
 import {_t} from "../../languageHandler";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import BaseDialog from "../views/dialogs/BaseDialog";
-import FormButton from "../views/elements/FormButton";
+import Spinner from "../views/elements/Spinner";
 import SearchBox from "./SearchBox";
 import RoomAvatar from "../views/avatars/RoomAvatar";
 import RoomName from "../views/elements/RoomName";
 import {useAsyncMemo} from "../../hooks/useAsyncMemo";
-import {shouldShowSpaceSettings} from "../../utils/space";
 import {EnhancedMap} from "../../utils/maps";
 import StyledCheckbox from "../views/elements/StyledCheckbox";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import BaseAvatar from "../views/avatars/BaseAvatar";
 import {mediaFromMxc} from "../../customisations/Media";
+import InfoTooltip from "../views/elements/InfoTooltip";
+import TextWithTooltip from "../views/elements/TextWithTooltip";
+import {useStateToggle} from "../../hooks/useStateToggle";
 
-interface IProps {
+interface IHierarchyProps {
     space: Room;
     initialText?: string;
-    onFinished(): void;
+    refreshToken?: any;
+    showRoom(room: ISpaceSummaryRoom, viaServers?: string[], autoJoin?: boolean): void;
 }
 
 /* eslint-disable camelcase */
@@ -72,227 +77,131 @@ export interface ISpaceSummaryEvent {
 }
 /* eslint-enable camelcase */
 
-interface ISubspaceProps {
-    space: ISpaceSummaryRoom;
-    event?: MatrixEvent;
-    editing?: boolean;
-    onPreviewClick?(): void;
-    queueAction?(action: IAction): void;
-    onJoinClick?(): void;
+interface ITileProps {
+    room: ISpaceSummaryRoom;
+    suggested?: boolean;
+    selected?: boolean;
+    numChildRooms?: number;
+    hasPermissions?: boolean;
+    onViewRoomClick(autoJoin: boolean): void;
+    onToggleClick?(): void;
 }
 
-const SubSpace: React.FC<ISubspaceProps> = ({
-    space,
-    editing,
-    event,
-    queueAction,
-    onJoinClick,
-    onPreviewClick,
+const Tile: React.FC<ITileProps> = ({
+    room,
+    suggested,
+    selected,
+    hasPermissions,
+    onToggleClick,
+    onViewRoomClick,
+    numChildRooms,
     children,
 }) => {
-    const name = space.name || space.canonical_alias || space.aliases?.[0] || _t("Unnamed Space");
+    const name = room.name || room.canonical_alias || room.aliases?.[0]
+        || (room.room_type === RoomType.Space ? _t("Unnamed Space") : _t("Unnamed Room"));
 
-    const evContent = event?.getContent();
-    const [suggested, _setSuggested] = useState(evContent?.suggested);
-    const [removed, _setRemoved] = useState(!evContent?.via);
-
-    const cli = MatrixClientPeg.get();
-    const cliRoom = cli.getRoom(space.room_id);
-    const myMembership = cliRoom?.getMyMembership();
-
-    // TODO DRY code
-    let actions;
-    if (editing && queueAction) {
-        if (event && cli.getRoom(event.getRoomId())?.currentState.maySendStateEvent(event.getType(), cli.getUserId())) {
-            const setSuggested = () => {
-                _setSuggested(v => {
-                    queueAction({
-                        event,
-                        removed,
-                        suggested: !v,
-                    });
-                    return !v;
-                });
-            };
-
-            const setRemoved = () => {
-                _setRemoved(v => {
-                    queueAction({
-                        event,
-                        removed: !v,
-                        suggested,
-                    });
-                    return !v;
-                });
-            };
-
-            if (removed) {
-                actions = <React.Fragment>
-                    <FormButton kind="danger" onClick={setRemoved} label={_t("Undo")} />
-                </React.Fragment>;
-            } else {
-                actions = <React.Fragment>
-                    <FormButton kind="danger" onClick={setRemoved} label={_t("Remove from Space")} />
-                    <StyledCheckbox checked={suggested} onChange={setSuggested} />
-                </React.Fragment>;
-            }
-        } else {
-            actions = <span className="mx_SpaceRoomDirectory_actionsText">
-                { _t("No permissions")}
-            </span>;
-        }
-        // TODO confirm remove from space click behaviour here
-    } else {
-        if (myMembership === "join") {
-            actions = <span className="mx_SpaceRoomDirectory_actionsText">
-                { _t("You're in this space")}
-            </span>;
-        } else if (onJoinClick) {
-            actions = <React.Fragment>
-                <AccessibleButton onClick={onPreviewClick} kind="link">
-                    { _t("Preview") }
-                </AccessibleButton>
-                <FormButton onClick={onJoinClick} label={_t("Join")} />
-            </React.Fragment>
-        }
-    }
-
-    let url: string;
-    if (space.avatar_url) {
-        url = mediaFromMxc(space.avatar_url).getSquareThumbnailHttp(Math.floor(24 * window.devicePixelRatio));
-    }
-
-    return <div className="mx_SpaceRoomDirectory_subspace">
-        <div className="mx_SpaceRoomDirectory_subspace_info">
-            <BaseAvatar name={name} idName={space.room_id} url={url} width={24} height={24} />
-            { name }
-
-            <div className="mx_SpaceRoomDirectory_actions">
-                { actions }
-            </div>
-        </div>
-        <div className="mx_SpaceRoomDirectory_subspace_children">
-            { children }
-        </div>
-    </div>
-};
-
-interface IAction {
-    event: MatrixEvent;
-    suggested: boolean;
-    removed: boolean;
-}
-
-interface IRoomTileProps {
-    room: ISpaceSummaryRoom;
-    event?: MatrixEvent;
-    editing?: boolean;
-    onPreviewClick(): void;
-    queueAction?(action: IAction): void;
-    onJoinClick?(): void;
-}
-
-const RoomTile = ({ room, event, editing, queueAction, onPreviewClick, onJoinClick }: IRoomTileProps) => {
-    const name = room.name || room.canonical_alias || room.aliases?.[0] || _t("Unnamed Room");
-
-    const evContent = event?.getContent();
-    const [suggested, _setSuggested] = useState(evContent?.suggested);
-    const [removed, _setRemoved] = useState(!evContent?.via);
+    const [showChildren, toggleShowChildren] = useStateToggle(true);
 
     const cli = MatrixClientPeg.get();
     const cliRoom = cli.getRoom(room.room_id);
     const myMembership = cliRoom?.getMyMembership();
 
-    let actions;
-    if (editing && queueAction) {
-        if (event && cli.getRoom(event.getRoomId())?.currentState.maySendStateEvent(event.getType(), cli.getUserId())) {
-            const setSuggested = () => {
-                _setSuggested(v => {
-                    queueAction({
-                        event,
-                        removed,
-                        suggested: !v,
-                    });
-                    return !v;
-                });
-            };
+    const onPreviewClick = () => onViewRoomClick(false);
+    const onJoinClick = () => onViewRoomClick(true);
 
-            const setRemoved = () => {
-                _setRemoved(v => {
-                    queueAction({
-                        event,
-                        removed: !v,
-                        suggested,
-                    });
-                    return !v;
-                });
-            };
+    let button;
+    if (myMembership === "join") {
+        button = <AccessibleButton onClick={onPreviewClick} kind="primary_outline">
+            { _t("View") }
+        </AccessibleButton>;
+    } else if (onJoinClick) {
+        button = <AccessibleButton onClick={onJoinClick} kind="primary">
+            { _t("Join") }
+        </AccessibleButton>;
+    }
 
-            if (removed) {
-                actions = <React.Fragment>
-                    <FormButton kind="danger" onClick={setRemoved} label={_t("Undo")} />
-                </React.Fragment>;
-            } else {
-                actions = <React.Fragment>
-                    <FormButton kind="danger" onClick={setRemoved} label={_t("Remove from Space")} />
-                    <StyledCheckbox checked={suggested} onChange={setSuggested} />
-                </React.Fragment>;
-            }
+    let checkbox;
+    if (onToggleClick) {
+        if (hasPermissions) {
+            checkbox = <StyledCheckbox checked={!!selected} onChange={onToggleClick} />;
         } else {
-            actions = <span className="mx_SpaceRoomDirectory_actionsText">
-                { _t("No permissions")}
-            </span>;
-        }
-        // TODO confirm remove from space click behaviour here
-    } else {
-        if (myMembership === "join") {
-            actions = <span className="mx_SpaceRoomDirectory_actionsText">
-                { _t("You're in this room")}
-            </span>;
-        } else if (onJoinClick) {
-            actions = <React.Fragment>
-                <AccessibleButton onClick={onPreviewClick} kind="link">
-                    { _t("Preview") }
-                </AccessibleButton>
-                <FormButton onClick={onJoinClick} label={_t("Join")} />
-            </React.Fragment>
+            checkbox = <TextWithTooltip
+                tooltip={_t("You don't have permission")}
+                onClick={ev => { ev.stopPropagation() }}
+            >
+                <StyledCheckbox disabled={true} />
+            </TextWithTooltip>;
         }
     }
 
     let url: string;
     if (room.avatar_url) {
-        url = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(Math.floor(32 * window.devicePixelRatio));
+        url = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(Math.floor(20 * window.devicePixelRatio));
+    }
+
+    let description = _t("%(count)s members", { count: room.num_joined_members });
+    if (numChildRooms) {
+        description += " · " + _t("%(count)s rooms", { count: numChildRooms });
+    }
+    if (room.topic) {
+        description += " · " + room.topic;
+    }
+
+    let suggestedSection;
+    if (suggested) {
+        suggestedSection = <InfoTooltip tooltip={_t("This room is suggested as a good one to join")}>
+            { _t("Suggested") }
+        </InfoTooltip>;
     }
 
     const content = <React.Fragment>
-        <BaseAvatar name={name} idName={room.room_id} url={url} width={32} height={32} />
+        <BaseAvatar name={name} idName={room.room_id} url={url} width={20} height={20} />
+        <div className="mx_SpaceRoomDirectory_roomTile_name">
+            { name }
+            { suggestedSection }
+        </div>
 
         <div className="mx_SpaceRoomDirectory_roomTile_info">
-            <div className="mx_SpaceRoomDirectory_roomTile_name">
-                { name }
-            </div>
-            <div className="mx_SpaceRoomDirectory_roomTile_topic">
-                { room.topic }
-            </div>
+            { description }
         </div>
-        <div className="mx_SpaceRoomDirectory_roomTile_memberCount">
-            { room.num_joined_members }
-        </div>
-
         <div className="mx_SpaceRoomDirectory_actions">
-            { actions }
+            { button }
+            { checkbox }
         </div>
     </React.Fragment>;
 
-    if (editing) {
-        return <div className="mx_SpaceRoomDirectory_roomTile">
-            { content }
-        </div>
+    let childToggle;
+    let childSection;
+    if (children) {
+        // the chevron is purposefully a div rather than a button as it should be ignored for a11y
+        childToggle = <div
+            className={classNames("mx_SpaceRoomDirectory_subspace_toggle", {
+                mx_SpaceRoomDirectory_subspace_toggle_shown: showChildren,
+            })}
+            onClick={ev => {
+                ev.stopPropagation();
+                toggleShowChildren();
+            }}
+        />;
+        if (showChildren) {
+            childSection = <div className="mx_SpaceRoomDirectory_subspace_children">
+                { children }
+            </div>;
+        }
     }
 
-    return <AccessibleButton className="mx_SpaceRoomDirectory_roomTile" onClick={onPreviewClick}>
-        { content }
-    </AccessibleButton>;
+    return <>
+        <AccessibleButton
+            className={classNames("mx_SpaceRoomDirectory_roomTile", {
+                mx_SpaceRoomDirectory_subspace: room.room_type === RoomType.Space,
+            })}
+            onClick={(hasPermissions && onToggleClick) ? onToggleClick : onPreviewClick}
+        >
+            { content }
+            { childToggle }
+        </AccessibleButton>
+        { childSection }
+    </>;
 };
 
 export const showRoom = (room: ISpaceSummaryRoom, viaServers?: string[], autoJoin = false) => {
@@ -325,99 +234,337 @@ export const showRoom = (room: ISpaceSummaryRoom, viaServers?: string[], autoJoi
 interface IHierarchyLevelProps {
     spaceId: string;
     rooms: Map<string, ISpaceSummaryRoom>;
-    editing?: boolean;
-    relations: EnhancedMap<string, string[]>;
+    relations: Map<string, Map<string, ISpaceSummaryEvent>>;
     parents: Set<string>;
-    queueAction?(action: IAction): void;
-    onPreviewClick(roomId: string): void;
-    onRemoveFromSpaceClick?(roomId: string): void;
-    onJoinClick?(roomId: string): void;
+    selectedMap?: Map<string, Set<string>>;
+    onViewRoomClick(roomId: string, autoJoin: boolean): void;
+    onToggleClick?(parentId: string, childId: string): void;
 }
 
 export const HierarchyLevel = ({
     spaceId,
     rooms,
-    editing,
     relations,
     parents,
-    onPreviewClick,
-    onJoinClick,
-    queueAction,
+    selectedMap,
+    onViewRoomClick,
+    onToggleClick,
 }: IHierarchyLevelProps) => {
     const cli = MatrixClientPeg.get();
     const space = cli.getRoom(spaceId);
-    // TODO respect order
-    const [subspaces, childRooms] = relations.get(spaceId)?.reduce((result, roomId: string) => {
-        if (!rooms.has(roomId)) return result; // TODO wat
+    const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId());
+
+    const sortedChildren = sortBy([...(relations.get(spaceId)?.values() || [])], ev => ev.content.order || null);
+    const [subspaces, childRooms] = sortedChildren.reduce((result, ev: ISpaceSummaryEvent) => {
+        const roomId = ev.state_key;
+        if (!rooms.has(roomId)) return result;
         result[rooms.get(roomId).room_type === RoomType.Space ? 0 : 1].push(roomId);
         return result;
     }, [[], []]) || [[], []];
 
-    // Don't render this subspace if it has no rooms we can show
-    // TODO this is broken - as a space may have subspaces we still need to show
-    // if (!childRooms.length) return null;
-
-    const userId = cli.getUserId();
-
     const newParents = new Set(parents).add(spaceId);
     return <React.Fragment>
         {
             childRooms.map(roomId => (
-                <RoomTile
+                <Tile
                     key={roomId}
                     room={rooms.get(roomId)}
-                    event={space?.currentState.maySendStateEvent(EventType.SpaceChild, userId)
-                        ? space?.currentState.getStateEvents(EventType.SpaceChild, roomId)
-                        : undefined}
-                    editing={editing}
-                    queueAction={queueAction}
-                    onPreviewClick={() => {
-                        onPreviewClick(roomId);
+                    suggested={relations.get(spaceId)?.get(roomId)?.content.suggested}
+                    selected={selectedMap?.get(spaceId)?.has(roomId)}
+                    onViewRoomClick={(autoJoin) => {
+                        onViewRoomClick(roomId, autoJoin);
                     }}
-                    onJoinClick={onJoinClick ? () => {
-                        onJoinClick(roomId);
-                    } : undefined}
+                    hasPermissions={hasPermissions}
+                    onToggleClick={onToggleClick ? () => onToggleClick(spaceId, roomId) : undefined}
                 />
             ))
         }
 
         {
             subspaces.filter(roomId => !newParents.has(roomId)).map(roomId => (
-                <SubSpace
+                <Tile
                     key={roomId}
-                    space={rooms.get(roomId)}
-                    event={space?.currentState.getStateEvents(EventType.SpaceChild, roomId)}
-                    editing={editing}
-                    queueAction={queueAction}
-                    onPreviewClick={() => {
-                        onPreviewClick(roomId);
-                    }}
-                    onJoinClick={() => {
-                        onJoinClick(roomId);
+                    room={rooms.get(roomId)}
+                    numChildRooms={Array.from(relations.get(roomId)?.values() || [])
+                        .filter(ev => rooms.get(ev.state_key)?.room_type !== RoomType.Space).length}
+                    suggested={relations.get(spaceId)?.get(roomId)?.content.suggested}
+                    selected={selectedMap?.get(spaceId)?.has(roomId)}
+                    onViewRoomClick={(autoJoin) => {
+                        onViewRoomClick(roomId, autoJoin);
                     }}
+                    hasPermissions={hasPermissions}
+                    onToggleClick={onToggleClick ? () => onToggleClick(spaceId, roomId) : undefined}
                 >
                     <HierarchyLevel
                         spaceId={roomId}
                         rooms={rooms}
-                        editing={editing}
                         relations={relations}
                         parents={newParents}
-                        onPreviewClick={onPreviewClick}
-                        onJoinClick={onJoinClick}
-                        queueAction={queueAction}
+                        selectedMap={selectedMap}
+                        onViewRoomClick={onViewRoomClick}
+                        onToggleClick={onToggleClick}
                     />
-                </SubSpace>
+                </Tile>
             ))
         }
     </React.Fragment>
 };
 
-const SpaceRoomDirectory: React.FC<IProps> = ({ space, initialText = "", onFinished }) => {
+// mutate argument refreshToken to force a reload
+export const useSpaceSummary = (cli: MatrixClient, space: Room, refreshToken?: any): [
+    ISpaceSummaryRoom[],
+    Map<string, Map<string, ISpaceSummaryEvent>>,
+    Map<string, Set<string>>,
+    Map<string, Set<string>>,
+] | [] => {
     // TODO pagination
-    const cli = MatrixClientPeg.get();
-    const [query, setQuery] = useState(initialText);
-    const [isEditing, setIsEditing] = useState(false);
+    return useAsyncMemo(async () => {
+        try {
+            const data = await cli.getSpaceSummary(space.roomId);
 
+            const parentChildRelations = new EnhancedMap<string, Map<string, ISpaceSummaryEvent>>();
+            const childParentRelations = new EnhancedMap<string, Set<string>>();
+            const viaMap = new EnhancedMap<string, Set<string>>();
+            data.events.map((ev: ISpaceSummaryEvent) => {
+                if (ev.type === EventType.SpaceChild) {
+                    parentChildRelations.getOrCreate(ev.room_id, new Map()).set(ev.state_key, ev);
+                    childParentRelations.getOrCreate(ev.state_key, new Set()).add(ev.room_id);
+                }
+                if (Array.isArray(ev.content["via"])) {
+                    const set = viaMap.getOrCreate(ev.state_key, new Set());
+                    ev.content["via"].forEach(via => set.add(via));
+                }
+            });
+
+            return [data.rooms as ISpaceSummaryRoom[], parentChildRelations, viaMap, childParentRelations];
+        } catch (e) {
+            console.error(e); // TODO
+        }
+
+        return [];
+    }, [space, refreshToken], []);
+};
+
+export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
+    space,
+    initialText = "",
+    showRoom,
+    refreshToken,
+    children,
+}) => {
+    const cli = MatrixClientPeg.get();
+    const userId = cli.getUserId();
+    const [query, setQuery] = useState(initialText);
+
+    const [selected, setSelected] = useState(new Map<string, Set<string>>()); // Map<parentId, Set<childId>>
+
+    const [rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(cli, space, refreshToken);
+
+    const roomsMap = useMemo(() => {
+        if (!rooms) return null;
+        const lcQuery = query.toLowerCase().trim();
+
+        const roomsMap = new Map<string, ISpaceSummaryRoom>(rooms.map(r => [r.room_id, r]));
+        if (!lcQuery) return roomsMap;
+
+        const directMatches = rooms.filter(r => {
+            return r.name?.toLowerCase().includes(lcQuery) || r.topic?.toLowerCase().includes(lcQuery);
+        });
+
+        // Walk back up the tree to find all parents of the direct matches to show their place in the hierarchy
+        const visited = new Set<string>();
+        const queue = [...directMatches.map(r => r.room_id)];
+        while (queue.length) {
+            const roomId = queue.pop();
+            visited.add(roomId);
+            childParentMap.get(roomId)?.forEach(parentId => {
+                if (!visited.has(parentId)) {
+                    queue.push(parentId);
+                }
+            });
+        }
+
+        // Remove any mappings for rooms which were not visited in the walk
+        Array.from(roomsMap.keys()).forEach(roomId => {
+            if (!visited.has(roomId)) {
+                roomsMap.delete(roomId);
+            }
+        });
+        return roomsMap;
+    }, [rooms, childParentMap, query]);
+
+    const [error, setError] = useState("");
+    const [removing, setRemoving] = useState(false);
+    const [saving, setSaving] = useState(false);
+
+    let content;
+    if (roomsMap) {
+        const numRooms = Array.from(roomsMap.values()).filter(r => r.room_type !== RoomType.Space).length;
+        const numSpaces = roomsMap.size - numRooms - 1; // -1 at the end to exclude the space we are looking at
+
+        let countsStr;
+        if (numSpaces > 1) {
+            countsStr = _t("%(count)s rooms and %(numSpaces)s spaces", { count: numRooms, numSpaces });
+        } else if (numSpaces > 0) {
+            countsStr = _t("%(count)s rooms and 1 space", { count: numRooms, numSpaces });
+        } else {
+            countsStr = _t("%(count)s rooms", { count: numRooms, numSpaces });
+        }
+
+        let editSection;
+        if (space.getMyMembership() === "join" && space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) {
+            const selectedRelations = Array.from(selected.keys()).flatMap(parentId => {
+                return [...selected.get(parentId).values()].map(childId => [parentId, childId]) as [string, string][];
+            });
+
+            let buttons;
+            if (selectedRelations.length) {
+                const selectionAllSuggested = selectedRelations.every(([parentId, childId]) => {
+                    return parentChildMap.get(parentId)?.get(childId)?.content.suggested;
+                });
+
+                const disabled = removing || saving;
+
+                buttons = <>
+                    <AccessibleButton
+                        onClick={async () => {
+                            setRemoving(true);
+                            try {
+                                for (const [parentId, childId] of selectedRelations) {
+                                    await cli.sendStateEvent(parentId, EventType.SpaceChild, {}, childId);
+                                    parentChildMap.get(parentId).get(childId).content = {};
+                                    parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
+                                }
+                            } catch (e) {
+                                setError(_t("Failed to remove some rooms. Try again later"));
+                            }
+                            setRemoving(false);
+                        }}
+                        kind="danger_outline"
+                        disabled={disabled}
+                    >
+                        { removing ? _t("Removing...") : _t("Remove") }
+                    </AccessibleButton>
+                    <AccessibleButton
+                        onClick={async () => {
+                            setSaving(true);
+                            try {
+                                for (const [parentId, childId] of selectedRelations) {
+                                    const suggested = !selectionAllSuggested;
+                                    const existingContent = parentChildMap.get(parentId)?.get(childId)?.content;
+                                    if (!existingContent || existingContent.suggested === suggested) continue;
+
+                                    const content = {
+                                        ...existingContent,
+                                        suggested: !selectionAllSuggested,
+                                    };
+
+                                    await cli.sendStateEvent(parentId, EventType.SpaceChild, content, childId);
+
+                                    parentChildMap.get(parentId).get(childId).content = content;
+                                    parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
+                                }
+                            } catch (e) {
+                                setError("Failed to update some suggestions. Try again later");
+                            }
+                            setSaving(false);
+                        }}
+                        kind="primary_outline"
+                        disabled={disabled}
+                    >
+                        { saving
+                            ? _t("Saving...")
+                            : (selectionAllSuggested ? _t("Mark as not suggested") : _t("Mark as suggested"))
+                        }
+                    </AccessibleButton>
+                </>;
+            }
+
+            editSection = <span>
+                { buttons }
+            </span>;
+        }
+
+        let results;
+        if (roomsMap.size) {
+            const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId());
+
+            results = <>
+                <HierarchyLevel
+                    spaceId={space.roomId}
+                    rooms={roomsMap}
+                    relations={parentChildMap}
+                    parents={new Set()}
+                    selectedMap={selected}
+                    onToggleClick={hasPermissions ? (parentId, childId) => {
+                        setError("");
+                        if (!selected.has(parentId)) {
+                            setSelected(new Map(selected.set(parentId, new Set([childId]))));
+                            return;
+                        }
+
+                        const parentSet = selected.get(parentId);
+                        if (!parentSet.has(childId)) {
+                            setSelected(new Map(selected.set(parentId, new Set([...parentSet, childId]))));
+                            return;
+                        }
+
+                        parentSet.delete(childId);
+                        setSelected(new Map(selected.set(parentId, new Set(parentSet))));
+                    } : undefined}
+                    onViewRoomClick={(roomId, autoJoin) => {
+                        showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), autoJoin);
+                    }}
+                />
+                { children && <hr /> }
+            </>;
+        } else {
+            results = <div className="mx_SpaceRoomDirectory_noResults">
+                <h3>{ _t("No results found") }</h3>
+                <div>{ _t("You may want to try a different search or check for typos.") }</div>
+            </div>;
+        }
+
+        content = <>
+            <div className="mx_SpaceRoomDirectory_listHeader">
+                { countsStr }
+                { editSection }
+            </div>
+            { error && <div className="mx_SpaceRoomDirectory_error">
+                { error }
+            </div> }
+            <AutoHideScrollbar className="mx_SpaceRoomDirectory_list">
+                { results }
+                { children }
+            </AutoHideScrollbar>
+        </>;
+    } else if (!rooms) {
+        content = <Spinner />;
+    } else {
+        content = <p>{_t("Your server does not support showing space hierarchies.")}</p>;
+    }
+
+    // TODO loading state/error state
+    return <>
+        <SearchBox
+            className="mx_textinput_icon mx_textinput_search"
+            placeholder={ _t("Search names and description") }
+            onSearch={setQuery}
+            autoFocus={true}
+            initialValue={initialText}
+        />
+
+        { content }
+    </>;
+};
+
+interface IProps {
+    space: Room;
+    initialText?: string;
+    onFinished(): void;
+}
+
+const SpaceRoomDirectory: React.FC<IProps> = ({ space, onFinished, initialText }) => {
     const onCreateRoomClick = () => {
         dis.dispatch({
             action: 'view_create_room',
@@ -426,134 +573,40 @@ const SpaceRoomDirectory: React.FC<IProps> = ({ space, initialText = "", onFinis
         onFinished();
     };
 
-    // stored within a ref as we don't need to re-render when it changes
-    const pendingActions = useRef(new Map<string, IAction>());
-
-    let adminButton;
-    if (shouldShowSpaceSettings(cli, space)) { // TODO this is an imperfect test
-        const onManageButtonClicked = () => {
-            setIsEditing(true);
-        };
-
-        const onSaveButtonClicked = () => {
-            // TODO setBusy
-            pendingActions.current.forEach(({event, suggested, removed}) => {
-                const content = {
-                    ...event.getContent(),
-                    suggested,
-                };
-
-                if (removed) {
-                    delete content["via"];
-                }
-
-                cli.sendStateEvent(event.getRoomId(), event.getType(), content, event.getStateKey());
-            });
-            setIsEditing(false);
-        };
-
-        if (isEditing) {
-            adminButton = <React.Fragment>
-                <FormButton label={_t("Save changes")} onClick={onSaveButtonClicked} />
-                <span>{ _t("Promoted to users") }</span>
-            </React.Fragment>;
-        } else {
-            adminButton = <FormButton label={_t("Manage rooms")} onClick={onManageButtonClicked} />;
-        }
-    }
-
-    const [rooms, relations, viaMap] = useAsyncMemo(async () => {
-        try {
-            const data = await cli.getSpaceSummary(space.roomId);
-
-            const parentChildRelations = new EnhancedMap<string, string[]>();
-            const viaMap = new EnhancedMap<string, Set<string>>();
-            data.events.map((ev: ISpaceSummaryEvent) => {
-                if (ev.type === EventType.SpaceChild) {
-                    parentChildRelations.getOrCreate(ev.room_id, []).push(ev.state_key);
-                }
-                if (Array.isArray(ev.content["via"])) {
-                    const set = viaMap.getOrCreate(ev.state_key, new Set());
-                    ev.content["via"].forEach(via => set.add(via));
-                }
-            });
-
-            return [data.rooms, parentChildRelations, viaMap];
-        } catch (e) {
-            console.error(e); // TODO
-        }
-
-        return [];
-    }, [space], []);
-
-    const roomsMap = useMemo(() => {
-        if (!rooms) return null;
-        const lcQuery = query.toLowerCase();
-
-        const filteredRooms = rooms.filter(r => {
-            return r.room_type === RoomType.Space // always include spaces to allow filtering of sub-space rooms
-                || r.name?.toLowerCase().includes(lcQuery)
-                || r.topic?.toLowerCase().includes(lcQuery);
-        });
-
-        return new Map<string, ISpaceSummaryRoom>(filteredRooms.map(r => [r.room_id, r]));
-        // const root = rooms.get(space.roomId);
-    }, [rooms, query]);
-
     const title = <React.Fragment>
-        <RoomAvatar room={space} height={40} width={40} />
+        <RoomAvatar room={space} height={32} width={32} />
         <div>
             <h1>{ _t("Explore rooms") }</h1>
             <div><RoomName room={space} /></div>
         </div>
     </React.Fragment>;
-    const explanation =
-        _t("If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.", null,
-            {a: sub => {
-                return <AccessibleButton kind="link" onClick={onCreateRoomClick}>{sub}</AccessibleButton>;
-            }},
-        );
 
-    let content;
-    if (roomsMap) {
-        content = <AutoHideScrollbar className="mx_SpaceRoomDirectory_list">
-            <HierarchyLevel
-                spaceId={space.roomId}
-                rooms={roomsMap}
-                editing={isEditing}
-                relations={relations}
-                parents={new Set()}
-                queueAction={action => {
-                    pendingActions.current.set(action.event.room_id, action);
-                }}
-                onPreviewClick={roomId => {
-                    showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), false);
-                    onFinished();
-                }}
-                onJoinClick={(roomId) => {
-                    showRoom(roomsMap.get(roomId), Array.from(viaMap.get(roomId) || []), true);
-                    onFinished();
-                }}
-            />
-        </AutoHideScrollbar>;
-    }
-
-    // TODO loading state/error state
     return (
         <BaseDialog className="mx_SpaceRoomDirectory" hasCancel={true} onFinished={onFinished} title={title}>
             <div className="mx_Dialog_content">
-                { explanation }
+                { _t("If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.",
+                    null,
+                    {a: sub => {
+                        return <AccessibleButton kind="link" onClick={onCreateRoomClick}>{sub}</AccessibleButton>;
+                    }},
+                ) }
 
-                <SearchBox
-                    className="mx_textinput_icon mx_textinput_search"
-                    placeholder={ _t("Find a room...") }
-                    onSearch={setQuery}
-                />
-
-                <div className="mx_SpaceRoomDirectory_listHeader">
-                    { adminButton }
-                </div>
-                { content }
+                <SpaceHierarchy
+                    space={space}
+                    showRoom={(room: ISpaceSummaryRoom, viaServers?: string[], autoJoin = false) => {
+                        showRoom(room, viaServers, autoJoin);
+                        onFinished();
+                    }}
+                    initialText={initialText}
+                >
+                    <AccessibleButton
+                        onClick={onCreateRoomClick}
+                        kind="primary"
+                        className="mx_SpaceRoomDirectory_createRoom"
+                    >
+                        { _t("Create room") }
+                    </AccessibleButton>
+                </SpaceHierarchy>
             </div>
         </BaseDialog>
     );

src/components/structures/SpaceRoomView.tsx

@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 import React, {RefObject, useContext, useRef, useState} from "react";
-import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
+import {EventType} from "matrix-js-sdk/src/@types/event";
 import {Room} from "matrix-js-sdk/src/models/room";
+import {EventSubscription} from "fbemitter";
 
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import RoomAvatar from "../views/avatars/RoomAvatar";
@@ -25,13 +26,11 @@ import AccessibleButton from "../views/elements/AccessibleButton";
 import RoomName from "../views/elements/RoomName";
 import RoomTopic from "../views/elements/RoomTopic";
 import InlineSpinner from "../views/elements/InlineSpinner";
-import FormButton from "../views/elements/FormButton";
 import {inviteMultipleToRoom, showRoomInviteDialog} from "../../RoomInvite";
 import {useRoomMembers} from "../../hooks/useRoomMembers";
 import createRoom, {IOpts, Preset} from "../../createRoom";
 import Field from "../views/elements/Field";
 import {useEventEmitter} from "../../hooks/useEventEmitter";
-import StyledRadioGroup from "../views/elements/StyledRadioGroup";
 import withValidation from "../views/elements/Validation";
 import * as Email from "../../email";
 import defaultDispatcher from "../../dispatcher/dispatcher";
@@ -42,18 +41,16 @@ import ErrorBoundary from "../views/elements/ErrorBoundary";
 import {ActionPayload} from "../../dispatcher/payloads";
 import RightPanel from "./RightPanel";
 import RightPanelStore from "../../stores/RightPanelStore";
-import {EventSubscription} from "fbemitter";
 import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
 import {SetRightPanelPhasePayload} from "../../dispatcher/payloads/SetRightPanelPhasePayload";
 import {useStateArray} from "../../hooks/useStateArray";
 import SpacePublicShare from "../views/spaces/SpacePublicShare";
 import {showAddExistingRooms, showCreateNewRoom, shouldShowSpaceSettings, showSpaceSettings} from "../../utils/space";
-import {HierarchyLevel, ISpaceSummaryEvent, ISpaceSummaryRoom, showRoom} from "./SpaceRoomDirectory";
-import {useAsyncMemo} from "../../hooks/useAsyncMemo";
-import {EnhancedMap} from "../../utils/maps";
-import AutoHideScrollbar from "./AutoHideScrollbar";
+import {showRoom, SpaceHierarchy} from "./SpaceRoomDirectory";
 import MemberAvatar from "../views/avatars/MemberAvatar";
 import {useStateToggle} from "../../hooks/useStateToggle";
+import SpaceStore from "../../stores/SpaceStore";
+import FacePile from "../views/elements/FacePile";
 
 interface IProps {
     space: Room;
@@ -66,6 +63,7 @@ interface IProps {
 interface IState {
     phase: Phase;
     showRightPanel: boolean;
+    myMembership: string;
 }
 
 enum Phase {
@@ -94,10 +92,47 @@ const useMyRoomMembership = (room: Room) => {
     return membership;
 };
 
+const SpaceInfo = ({ space }) => {
+    const joinRule = space.getJoinRule();
+
+    let visibilitySection;
+    if (joinRule === "public") {
+        visibilitySection = <span className="mx_SpaceRoomView_info_public">
+            { _t("Public space") }
+        </span>;
+    } else {
+        visibilitySection = <span className="mx_SpaceRoomView_info_private">
+            { _t("Private space") }
+        </span>;
+    }
+
+    return <div className="mx_SpaceRoomView_info">
+        { visibilitySection }
+        { joinRule === "public" && <RoomMemberCount room={space}>
+            {(count) => count > 0 ? (
+                <AccessibleButton
+                    kind="link"
+                    onClick={() => {
+                        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+                            action: Action.SetRightPanelPhase,
+                            phase: RightPanelPhases.RoomMemberList,
+                            refireParams: { space },
+                        });
+                    }}
+                >
+                    { _t("%(count)s members", { count }) }
+                </AccessibleButton>
+            ) : null}
+        </RoomMemberCount> }
+    </div>
+};
+
 const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
     const cli = useContext(MatrixClientContext);
     const myMembership = useMyRoomMembership(space);
 
+    const [busy, setBusy] = useState(false);
+
     let inviterSection;
     let joinButtons;
     if (myMembership === "invite") {
@@ -121,22 +156,41 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         }
 
         joinButtons = <>
-            <FormButton label={_t("Reject")} kind="secondary" onClick={onRejectButtonClicked} />
-            <FormButton label={_t("Accept")} onClick={onJoinButtonClicked} />
+            <AccessibleButton
+                kind="secondary"
+                onClick={() => {
+                    setBusy(true);
+                    onRejectButtonClicked();
+                }}
+            >
+                { _t("Reject") }
+            </AccessibleButton>
+            <AccessibleButton
+                kind="primary"
+                onClick={() => {
+                    setBusy(true);
+                    onJoinButtonClicked();
+                }}
+            >
+                { _t("Accept") }
+            </AccessibleButton>
         </>;
     } else {
-        joinButtons = <FormButton label={_t("Join")} onClick={onJoinButtonClicked} />
+        joinButtons = (
+            <AccessibleButton
+                kind="primary"
+                onClick={() => {
+                    setBusy(true);
+                    onJoinButtonClicked();
+                }}
+            >
+                { _t("Join") }
+            </AccessibleButton>
+        )
     }
 
-    let visibilitySection;
-    if (space.getJoinRule() === "public") {
-        visibilitySection = <span className="mx_SpaceRoomView_preview_info_public">
-            { _t("Public space") }
-        </span>;
-    } else {
-        visibilitySection = <span className="mx_SpaceRoomView_preview_info_private">
-            { _t("Private space") }
-        </span>;
+    if (busy) {
+        joinButtons = <InlineSpinner />;
     }
 
     return <div className="mx_SpaceRoomView_preview">
@@ -145,26 +199,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         <h1 className="mx_SpaceRoomView_preview_name">
             <RoomName room={space} />
         </h1>
-        <div className="mx_SpaceRoomView_preview_info">
-            { visibilitySection }
-            <RoomMemberCount room={space}>
-                {(count) => count > 0 ? (
-                    <AccessibleButton
-                        className="mx_SpaceRoomView_preview_memberCount"
-                        kind="link"
-                        onClick={() => {
-                            defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
-                                action: Action.SetRightPanelPhase,
-                                phase: RightPanelPhases.RoomMemberList,
-                                refireParams: { space },
-                            });
-                        }}
-                    >
-                        { _t("%(count)s members", { count }) }
-                    </AccessibleButton>
-                ) : null}
-            </RoomMemberCount>
-        </div>
+        <SpaceInfo space={space} />
         <RoomTopic room={space}>
             {(topic, ref) =>
                 <div className="mx_SpaceRoomView_preview_topic" ref={ref}>
@@ -172,6 +207,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
                 </div>
             }
         </RoomTopic>
+        { space.getJoinRule() === "public" && <FacePile room={space} /> }
         <div className="mx_SpaceRoomView_preview_joinButtons">
             { joinButtons }
         </div>
@@ -186,17 +222,21 @@ const SpaceLanding = ({ space }) => {
     let inviteButton;
     if (myMembership === "join" && space.canInvite(userId)) {
         inviteButton = (
-            <AccessibleButton className="mx_SpaceRoomView_landing_inviteButton" onClick={() => {
-                showRoomInviteDialog(space.roomId);
-            }}>
-                { _t("Invite people") }
+            <AccessibleButton
+                kind="primary"
+                className="mx_SpaceRoomView_landing_inviteButton"
+                onClick={() => {
+                    showRoomInviteDialog(space.roomId);
+                }}
+            >
+                { _t("Invite") }
             </AccessibleButton>
         );
     }
 
     const canAddRooms = myMembership === "join" && space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
 
-    const [_, forceUpdate] = useStateToggle(false); // TODO
+    const [refreshToken, forceUpdate] = useStateToggle(false);
 
     let addRoomButtons;
     if (canAddRooms) {
@@ -226,50 +266,13 @@ const SpaceLanding = ({ space }) => {
         </AccessibleButton>;
     }
 
-    const [loading, roomsMap, relations, numRooms] = useAsyncMemo(async () => {
-        try {
-            const data = await cli.getSpaceSummary(space.roomId, undefined, myMembership !== "join");
-
-            const parentChildRelations = new EnhancedMap<string, string[]>();
-            data.events.map((ev: ISpaceSummaryEvent) => {
-                if (ev.type === EventType.SpaceChild) {
-                    parentChildRelations.getOrCreate(ev.room_id, []).push(ev.state_key);
-                }
-            });
-
-            const roomsMap = new Map<string, ISpaceSummaryRoom>(data.rooms.map(r => [r.room_id, r]));
-            const numRooms = data.rooms.filter(r => r.room_type !== RoomType.Space).length;
-            return [false, roomsMap, parentChildRelations, numRooms];
-        } catch (e) {
-            console.error(e); // TODO
-        }
-
-        return [false];
-    }, [space, _], [true]);
-
-    let previewRooms;
-    if (roomsMap) {
-        previewRooms = <AutoHideScrollbar className="mx_SpaceRoomDirectory_list">
-            <div className="mx_SpaceRoomDirectory_roomCount">
-                <h3>{ myMembership === "join" ? _t("Rooms") : _t("Default Rooms")}</h3>
-                <span>{ numRooms }</span>
-            </div>
-            <HierarchyLevel
-                spaceId={space.roomId}
-                rooms={roomsMap}
-                editing={false}
-                relations={relations}
-                parents={new Set()}
-                onPreviewClick={roomId => {
-                    showRoom(roomsMap.get(roomId), [], false); // TODO
-                }}
-            />
-        </AutoHideScrollbar>;
-    } else if (loading) {
-        previewRooms = <InlineSpinner />;
-    } else {
-        previewRooms = <p>{_t("Your server does not support showing space hierarchies.")}</p>;
-    }
+    const onMembersClick = () => {
+        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.RoomMemberList,
+            refireParams: { space },
+        });
+    };
 
     return <div className="mx_SpaceRoomView_landing">
         <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
@@ -278,45 +281,26 @@ const SpaceLanding = ({ space }) => {
                 {(name) => {
                     const tags = { name: () => <div className="mx_SpaceRoomView_landing_nameRow">
                         <h1>{ name }</h1>
-                        <RoomMemberCount room={space}>
-                            {(count) => count > 0 ? (
-                                <AccessibleButton
-                                    className="mx_SpaceRoomView_landing_memberCount"
-                                    kind="link"
-                                    onClick={() => {
-                                        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
-                                            action: Action.SetRightPanelPhase,
-                                            phase: RightPanelPhases.RoomMemberList,
-                                            refireParams: { space },
-                                        });
-                                    }}
-                                >
-                                    { _t("%(count)s members", { count }) }
-                                </AccessibleButton>
-                            ) : null}
-                        </RoomMemberCount>
                     </div> };
-                    if (shouldShowSpaceSettings(cli, space)) {
-                        if (space.getJoinRule() === "public") {
-                            return _t("Your public space <name/>", {}, tags) as JSX.Element;
-                        } else {
-                            return _t("Your private space <name/>", {}, tags) as JSX.Element;
-                        }
-                    }
                     return _t("Welcome to <name/>", {}, tags) as JSX.Element;
                 }}
             </RoomName>
         </div>
+        <div className="mx_SpaceRoomView_landing_info">
+            <SpaceInfo space={space} />
+            <FacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
+            { inviteButton }
+        </div>
         <div className="mx_SpaceRoomView_landing_topic">
             <RoomTopic room={space} />
         </div>
+        <hr />
         <div className="mx_SpaceRoomView_landing_adminButtons">
-            { inviteButton }
             { addRoomButtons }
             { settingsButton }
         </div>
 
-        { previewRooms }
+        <SpaceHierarchy space={space} showRoom={showRoom} refreshToken={refreshToken} />
     </div>;
 };
 
@@ -337,6 +321,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
             placeholder={placeholders[i]}
             value={roomNames[i]}
             onChange={ev => setRoomName(i, ev.target.value)}
+            autoFocus={i === 2}
         />;
     });
 
@@ -369,7 +354,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
     let buttonLabel = _t("Skip for now");
     if (roomNames.some(name => name.trim())) {
         onClick = onNextClick;
-        buttonLabel = busy ? _t("Creating rooms...") : _t("Next")
+        buttonLabel = busy ? _t("Creating rooms...") : _t("Continue")
     }
 
     return <div>
@@ -380,61 +365,55 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
         { fields }
 
         <div className="mx_SpaceRoomView_buttons">
-            <FormButton
-                label={buttonLabel}
+            <AccessibleButton
+                kind="primary"
                 disabled={busy}
                 onClick={onClick}
-            />
+            >
+                { buttonLabel }
+            </AccessibleButton>
         </div>
     </div>;
 };
 
 const SpaceSetupPublicShare = ({ space, onFinished }) => {
     return <div className="mx_SpaceRoomView_publicShare">
-        <h1>{ _t("Share your public space") }</h1>
-        <div className="mx_SpacePublicShare_description">{ _t("At the moment only you can see it.") }</div>
+        <h1>{ _t("Share %(name)s", { name: space.name }) }</h1>
+        <div className="mx_SpaceRoomView_description">
+            { _t("It's just you at the moment, it will be even better with others.") }
+        </div>
 
-        <SpacePublicShare space={space} onFinished={onFinished} />
+        <SpacePublicShare space={space} />
 
         <div className="mx_SpaceRoomView_buttons">
-            <FormButton label={_t("Finish")} onClick={onFinished} />
+            <AccessibleButton kind="primary" onClick={onFinished}>
+                { _t("Go to my first room") }
+            </AccessibleButton>
         </div>
     </div>;
 };
 
-const SpaceSetupPrivateScope = ({ onFinished }) => {
-    const [option, setOption] = useState<string>(null);
-
+const SpaceSetupPrivateScope = ({ space, onFinished }) => {
     return <div className="mx_SpaceRoomView_privateScope">
         <h1>{ _t("Who are you working with?") }</h1>
-        <div className="mx_SpaceRoomView_description">{ _t("Ensure the right people have access to the space.") }</div>
-
-        <StyledRadioGroup
-            name="privateSpaceScope"
-            value={option}
-            onChange={setOption}
-            definitions={[
-                {
-                    value: "justMe",
-                    className: "mx_SpaceRoomView_privateScope_justMeButton",
-                    label: <React.Fragment>
-                        <h3>{ _t("Just Me") }</h3>
-                        <div>{ _t("A private space just for you") }</div>
-                    </React.Fragment>,
-                }, {
-                    value: "meAndMyTeammates",
-                    className: "mx_SpaceRoomView_privateScope_meAndMyTeammatesButton",
-                    label: <React.Fragment>
-                        <h3>{ _t("Me and my teammates") }</h3>
-                        <div>{ _t("A private space for you and your teammates") }</div>
-                    </React.Fragment>,
-                },
-            ]}
-        />
-
-        <div className="mx_SpaceRoomView_buttons">
-            <FormButton label={_t("Next")} disabled={!option} onClick={() => onFinished(option !== "justMe")} />
+        <div className="mx_SpaceRoomView_description">
+            { _t("Make sure the right people have access to %(name)s", { name: space.name }) }
         </div>
+
+        <AccessibleButton
+            className="mx_SpaceRoomView_privateScope_justMeButton"
+            onClick={() => { onFinished(false) }}
+        >
+            <h3>{ _t("Just me") }</h3>
+            <div>{ _t("A private space to organise your rooms") }</div>
+        </AccessibleButton>
+        <AccessibleButton
+            className="mx_SpaceRoomView_privateScope_meAndMyTeammatesButton"
+            onClick={() => { onFinished(true) }}
+        >
+            <h3>{ _t("Me and my teammates") }</h3>
+            <div>{ _t("A private space for you and your teammates") }</div>
+        </AccessibleButton>
     </div>;
 };
 
@@ -464,6 +443,7 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
             onChange={ev => setEmailAddress(i, ev.target.value)}
             ref={fieldRefs[i]}
             onValidate={validateEmailRules}
+            autoFocus={i === 0}
         />;
     });
 
@@ -501,9 +481,18 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
         setBusy(false);
     };
 
+    let onClick = onFinished;
+    let buttonLabel = _t("Skip for now");
+    if (emailAddresses.some(name => name.trim())) {
+        onClick = onNextClick;
+        buttonLabel = busy ? _t("Inviting...") : _t("Continue")
+    }
+
     return <div className="mx_SpaceRoomView_inviteTeammates">
         <h1>{ _t("Invite your teammates") }</h1>
-        <div className="mx_SpaceRoomView_description">{ _t("Ensure the right people have access to the space.") }</div>
+        <div className="mx_SpaceRoomView_description">
+            { _t("Make sure the right people have access. You can invite more later.") }
+        </div>
 
         { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
         { fields }
@@ -518,8 +507,9 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
         </div>
 
         <div className="mx_SpaceRoomView_buttons">
-            <AccessibleButton onClick={onFinished} kind="link">{_t("Skip for now")}</AccessibleButton>
-            <FormButton label={busy ? _t("Inviting...") : _t("Next")} disabled={busy} onClick={onNextClick} />
+            <AccessibleButton kind="primary" disabled={busy} onClick={onClick}>
+                { buttonLabel }
+            </AccessibleButton>
         </div>
     </div>;
 };
@@ -547,17 +537,26 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
         this.state = {
             phase,
             showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
+            myMembership: this.props.space.getMyMembership(),
         };
 
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate);
+        this.context.on("Room.myMembership", this.onMyMembership);
     }
 
     componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
         this.rightPanelStoreToken.remove();
+        this.context.off("Room.myMembership", this.onMyMembership);
     }
 
+    private onMyMembership = (room: Room, myMembership: string) => {
+        if (room.roomId === this.props.space.roomId) {
+            this.setState({ myMembership });
+        }
+    };
+
     private onRightPanelStoreUpdate = () => {
         this.setState({
             showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
@@ -594,10 +593,45 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
         }
     };
 
+    private goToFirstRoom = async () => {
+        // TODO actually go to the first room
+
+        const childRooms = SpaceStore.instance.getChildRooms(this.props.space.roomId);
+        if (childRooms.length) {
+            const room = childRooms[0];
+            defaultDispatcher.dispatch({
+                action: "view_room",
+                room_id: room.roomId,
+            });
+            return;
+        }
+
+        let suggestedRooms = SpaceStore.instance.suggestedRooms;
+        if (SpaceStore.instance.activeSpace !== this.props.space) {
+            // the space store has the suggested rooms loaded for a different space, fetch the right ones
+            suggestedRooms = (await SpaceStore.instance.fetchSuggestedRooms(this.props.space, 1)).rooms;
+        }
+
+        if (suggestedRooms.length) {
+            const room = suggestedRooms[0];
+            defaultDispatcher.dispatch({
+                action: "view_room",
+                room_id: room.room_id,
+                oobData: {
+                    avatarUrl: room.avatar_url,
+                    name: room.name || room.canonical_alias || room.aliases.pop() || _t("Empty room"),
+                },
+            });
+            return;
+        }
+
+        this.setState({ phase: Phase.Landing });
+    };
+
     private renderBody() {
         switch (this.state.phase) {
             case Phase.Landing:
-                if (this.props.space.getMyMembership() === "join") {
+                if (this.state.myMembership === "join") {
                     return <SpaceLanding space={this.props.space} />;
                 } else {
                     return <SpacePreview
@@ -609,18 +643,21 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
             case Phase.PublicCreateRooms:
                 return <SpaceSetupFirstRooms
                     space={this.props.space}
-                    title={_t("What are some things you want to discuss?")}
-                    description={_t("We'll create rooms for each topic.")}
+                    title={_t("What are some things you want to discuss in %(spaceName)s?", {
+                        spaceName: this.props.space.name,
+                    })}
+                    description={
+                        _t("Let's create a room for each of them.") + "\n" +
+                        _t("You can add more later too, including already existing ones.")
+                    }
                     onFinished={() => this.setState({ phase: Phase.PublicShare })}
                 />;
             case Phase.PublicShare:
-                return <SpaceSetupPublicShare
-                    space={this.props.space}
-                    onFinished={() => this.setState({ phase: Phase.Landing })}
-                />;
+                return <SpaceSetupPublicShare space={this.props.space} onFinished={this.goToFirstRoom} />;
 
             case Phase.PrivateScope:
                 return <SpaceSetupPrivateScope
+                    space={this.props.space}
                     onFinished={(invite: boolean) => {
                         this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateCreateRooms });
                     }}
@@ -634,7 +671,8 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
                 return <SpaceSetupFirstRooms
                     space={this.props.space}
                     title={_t("What projects are you working on?")}
-                    description={_t("We'll create rooms for each of them. You can add existing rooms after setup.")}
+                    description={_t("We'll create rooms for each of them. " +
+                        "You can add more later too, including already existing ones.")}
                     onFinished={() => this.setState({ phase: Phase.Landing })}
                 />;
         }

src/components/structures/UploadBar.tsx

@@ -43,7 +43,11 @@ export default class UploadBar extends React.Component<IProps, IState> {
 
     constructor(props) {
         super(props);
-        this.state = {uploadsHere: []};
+
+        // Set initial state to any available upload in this room - we might be mounting
+        // earlier than the first progress event, so should show something relevant.
+        const uploadsHere = this.getUploadsInRoom();
+        this.state = {currentUpload: uploadsHere[0], uploadsHere};
     }
 
     componentDidMount() {
@@ -56,6 +60,11 @@ export default class UploadBar extends React.Component<IProps, IState> {
         dis.unregister(this.dispatcherRef);
     }
 
+    private getUploadsInRoom(): IUpload[] {
+        const uploads = ContentMessages.sharedInstance().getCurrentUploads();
+        return uploads.filter(u => u.roomId === this.props.room.roomId);
+    }
+
     private onAction = (payload: ActionPayload) => {
         switch (payload.action) {
             case Action.UploadStarted:
@@ -64,8 +73,7 @@ export default class UploadBar extends React.Component<IProps, IState> {
             case Action.UploadCanceled:
             case Action.UploadFailed: {
                 if (!this.mounted) return;
-                const uploads = ContentMessages.sharedInstance().getCurrentUploads();
-                const uploadsHere = uploads.filter(u => u.roomId === this.props.room.roomId);
+                const uploadsHere = this.getUploadsInRoom();
                 this.setState({currentUpload: uploadsHere[0], uploadsHere});
                 break;
             }

src/components/structures/ViewSource.js

@@ -176,8 +176,8 @@ export default class ViewSource extends React.Component {
         return (
             <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
                 <div>
-                    <div className="mx_ViewSource_label_left">Room ID: {roomId}</div>
-                    <div className="mx_ViewSource_label_left">Event ID: {eventId}</div>
+                    <div>Room ID: {roomId}</div>
+                    <div>Event ID: {eventId}</div>
                     <div className="mx_ViewSource_separator" />
                     {isEditing ? this.editSourceContent() : this.viewSourceContent()}
                 </div>

src/components/structures/auth/SetupEncryptionBody.js

@@ -155,15 +155,14 @@ export default class SetupEncryptionBody extends React.Component {
             let verifyButton;
             if (store.hasDevicesToVerifyAgainst) {
                 verifyButton = <AccessibleButton kind="primary" onClick={this._onVerifyClick}>
-                    { _t("Verify with another session") }
+                    { _t("Use another login") }
                 </AccessibleButton>;
             }
 
             return (
                 <div>
                     <p>{_t(
-                        "Verify this login to access your encrypted messages and " +
-                        "prove to others that this login is really you.",
+                        "Verify your identity to access encrypted messages and prove your identity to others.",
                     )}</p>
 
                     <div className="mx_CompleteSecurity_actionRow">
@@ -205,8 +204,8 @@ export default class SetupEncryptionBody extends React.Component {
             return (
                 <div>
                     <p>{_t(
-                        "Without completing security on this session, it won’t have " +
-                        "access to encrypted messages.",
+                        "Without verifying, you won’t have access to all your messages " +
+                        "and may appear as untrusted to others.",
                     )}</p>
                     <div className="mx_CompleteSecurity_actionRow">
                         <AccessibleButton

src/components/views/avatars/BaseAvatar.tsx

@@ -26,6 +26,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import {toPx} from "../../../utils/units";
 import {ResizeMethod} from "../../../Avatar";
+import { _t } from '../../../languageHandler';
 
 interface IProps {
     name: string; // The name (first initial used as default)
@@ -140,6 +141,7 @@ const BaseAvatar = (props: IProps) => {
         if (onClick) {
             return (
                 <AccessibleButton
+                    aria-label={_t("Avatar")}
                     {...otherProps}
                     element="span"
                     className={classNames("mx_BaseAvatar", className)}

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -22,7 +22,6 @@ import {MatrixClient} from "matrix-js-sdk/src/client";
 import {_t} from '../../../languageHandler';
 import {IDialogProps} from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
-import FormButton from "../elements/FormButton";
 import Dropdown from "../elements/Dropdown";
 import SearchBox from "../../structures/SearchBox";
 import SpaceStore from "../../../stores/SpaceStore";
@@ -69,6 +68,7 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
     const existingRoomsSet = new Set(existingRooms);
     const rooms = cli.getVisibleRooms().filter(room => {
         return !existingRoomsSet.has(room) // not already in space
+            && !room.isSpaceRoom() // not a space itself
             && room.name.toLowerCase().includes(lcQuery) // contains query
             && !DMRoomMap.shared().getUserIdForRoomId(room.roomId); // not a DM
     });
@@ -109,7 +109,7 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
     const title = <React.Fragment>
         <RoomAvatar room={selectedSpace} height={40} width={40} />
         <div>
-            <h1>{ _t("Add existing spaces/rooms") }</h1>
+            <h1>{ _t("Add existing rooms") }</h1>
             { spaceOptionSection }
         </div>
     </React.Fragment>;
@@ -127,29 +127,9 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
             className="mx_textinput_icon mx_textinput_search"
             placeholder={ _t("Filter your rooms and spaces") }
             onSearch={setQuery}
+            autoComplete={true}
         />
         <AutoHideScrollbar className="mx_AddExistingToSpaceDialog_content" id="mx_AddExistingToSpaceDialog">
-            { spaces.length > 0 ? (
-                <div className="mx_AddExistingToSpaceDialog_section mx_AddExistingToSpaceDialog_section_spaces">
-                    <h3>{ _t("Spaces") }</h3>
-                    { spaces.map(space => {
-                        return <Entry
-                            key={space.roomId}
-                            room={space}
-                            checked={selectedToAdd.has(space)}
-                            onChange={(checked) => {
-                                if (checked) {
-                                    selectedToAdd.add(space);
-                                } else {
-                                    selectedToAdd.delete(space);
-                                }
-                                setSelectedToAdd(new Set(selectedToAdd));
-                            }}
-                        />;
-                    }) }
-                </div>
-            ) : null }
-
             { rooms.length > 0 ? (
                 <div className="mx_AddExistingToSpaceDialog_section">
                     <h3>{ _t("Rooms") }</h3>
@@ -171,6 +151,27 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
                 </div>
             ) : undefined }
 
+            { spaces.length > 0 ? (
+                <div className="mx_AddExistingToSpaceDialog_section mx_AddExistingToSpaceDialog_section_spaces">
+                    <h3>{ _t("Spaces") }</h3>
+                    { spaces.map(space => {
+                        return <Entry
+                            key={space.roomId}
+                            room={space}
+                            checked={selectedToAdd.has(space)}
+                            onChange={(checked) => {
+                                if (checked) {
+                                    selectedToAdd.add(space);
+                                } else {
+                                    selectedToAdd.delete(space);
+                                }
+                                setSelectedToAdd(new Set(selectedToAdd));
+                            }}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
             { spaces.length + rooms.length < 1 ? <span className="mx_AddExistingToSpaceDialog_noResults">
                 { _t("No results") }
             </span> : undefined }
@@ -184,8 +185,8 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
                 </AccessibleButton>
             </span>
 
-            <FormButton
-                label={busy ? _t("Applying...") : _t("Apply")}
+            <AccessibleButton
+                kind="primary"
                 disabled={busy || selectedToAdd.size < 1}
                 onClick={async () => {
                     setBusy(true);
@@ -199,7 +200,9 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
                     }
                     setBusy(false);
                 }}
-            />
+            >
+                { busy ? _t("Adding...") : _t("Add") }
+            </AccessibleButton>
         </div>
     </BaseDialog>;
 };

src/components/views/dialogs/InviteDialog.tsx

@@ -29,7 +29,9 @@ import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
-import createRoom, {canEncryptToAllUsers, findDMForUser, privateShouldBeEncrypted} from "../../../createRoom";
+import createRoom, {
+    canEncryptToAllUsers, ensureDMExists, findDMForUser, privateShouldBeEncrypted,
+} from "../../../createRoom";
 import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
@@ -43,6 +45,7 @@ import {Room} from "matrix-js-sdk/src/models/room";
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../../customisations/Media";
+import {getAddressType} from "../../../UserAddress";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
@@ -331,6 +334,7 @@ interface IInviteDialogState {
     threepidResultsMixin: { user: Member, userId: string}[];
     canUseIdentityServer: boolean;
     tryingIdentityServer: boolean;
+    consultFirst: boolean;
 
     // These two flags are used for the 'Go' button to communicate what is going on.
     busy: boolean,
@@ -379,6 +383,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             threepidResultsMixin: [],
             canUseIdentityServer: !!MatrixClientPeg.get().getIdentityServerUrl(),
             tryingIdentityServer: false,
+            consultFirst: false,
 
             // These two flags are used for the 'Go' button to communicate what is going on.
             busy: false,
@@ -394,6 +399,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     }
 
+    private onConsultFirstChange = (ev) => {
+        this.setState({consultFirst: ev.target.checked});
+    }
+
     static buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number}[] {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
@@ -673,19 +682,20 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             console.error(err);
             this.setState({
                 busy: false,
-                errorText: _t("We couldn't create your DM. Please check the users you want to invite and try again."),
+                errorText: _t("We couldn't create your DM."),
             });
         });
     };
 
-    _inviteUsers = () => {
+    _inviteUsers = async () => {
         const startTime = CountlyAnalytics.getTimestamp();
         this.setState({busy: true});
         this._convertFilter();
         const targets = this._convertFilter();
         const targetIds = targets.map(t => t.userId);
 
-        const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.roomId);
         if (!room) {
             console.error("Failed to find the room to invite users to");
             this.setState({
@@ -695,12 +705,34 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             return;
         }
 
-        inviteMultipleToRoom(this.props.roomId, targetIds).then(result => {
+        try {
+            const result = await inviteMultipleToRoom(this.props.roomId, targetIds)
             CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
             if (!this._shouldAbortAfterInviteError(result)) { // handles setting error message too
                 this.props.onFinished();
             }
-        }).catch(err => {
+
+            if (cli.isRoomEncrypted(this.props.roomId) &&
+                SettingsStore.getValue("feature_room_history_key_sharing")) {
+                const visibilityEvent = room.currentState.getStateEvents(
+                    "m.room.history_visibility", "",
+                );
+                const visibility = visibilityEvent && visibilityEvent.getContent() &&
+                    visibilityEvent.getContent().history_visibility;
+                if (visibility == "world_readable" || visibility == "shared") {
+                    const invitedUsers = [];
+                    for (const [addr, state] of Object.entries(result.states)) {
+                        if (state === "invited" && getAddressType(addr) === "mx-user-id") {
+                            invitedUsers.push(addr);
+                        }
+                    }
+                    console.log("Sharing history with", invitedUsers);
+                    cli.sendSharedHistoryKeys(
+                        this.props.roomId, invitedUsers,
+                    );
+                }
+            }
+        } catch (err) {
             console.error(err);
             this.setState({
                 busy: false,
@@ -708,7 +740,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                     "We couldn't invite those users. Please check the users you want to invite and try again.",
                 ),
             });
-        });
+        }
     };
 
     _transferCall = async () => {
@@ -721,16 +753,34 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             });
         }
 
-        this.setState({busy: true});
-        try {
-            await this.props.call.transfer(targetIds[0]);
-            this.setState({busy: false});
-            this.props.onFinished();
-        } catch (e) {
-            this.setState({
-                busy: false,
-                errorText: _t("Failed to transfer call"),
+        if (this.state.consultFirst) {
+            const dmRoomId = await ensureDMExists(MatrixClientPeg.get(), targetIds[0]);
+
+            dis.dispatch({
+                action: 'place_call',
+                type: this.props.call.type,
+                room_id: dmRoomId,
+                transferee: this.props.call,
             });
+            dis.dispatch({
+                action: 'view_room',
+                room_id: dmRoomId,
+                should_peek: false,
+                joining: false,
+            });
+            this.props.onFinished();
+        } else {
+            this.setState({busy: true});
+            try {
+                await this.props.call.transfer(targetIds[0]);
+                this.setState({busy: false});
+                this.props.onFinished();
+            } catch (e) {
+                this.setState({
+                    busy: false,
+                    errorText: _t("Failed to transfer call"),
+                });
+            }
         }
     };
 
@@ -886,19 +936,21 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     };
 
     _toggleMember = (member: Member) => {
-        let filterText = this.state.filterText;
-        const targets = this.state.targets.map(t => t); // cheap clone for mutation
-        const idx = targets.indexOf(member);
-        if (idx >= 0) {
-            targets.splice(idx, 1);
-        } else {
-            targets.push(member);
-            filterText = ""; // clear the filter when the user accepts a suggestion
-        }
-        this.setState({targets, filterText});
+        if (!this.state.busy) {
+            let filterText = this.state.filterText;
+            const targets = this.state.targets.map(t => t); // cheap clone for mutation
+            const idx = targets.indexOf(member);
+            if (idx >= 0) {
+                targets.splice(idx, 1);
+            } else {
+                targets.push(member);
+                filterText = ""; // clear the filter when the user accepts a suggestion
+            }
+            this.setState({targets, filterText});
 
-        if (this._editorRef && this._editorRef.current) {
-            this._editorRef.current.focus();
+            if (this._editorRef && this._editorRef.current) {
+                this._editorRef.current.focus();
+            }
         }
     };
 
@@ -1189,10 +1241,13 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         let helpText;
         let buttonText;
         let goButtonFn;
+        let consultSection;
+        let keySharingWarning = <span />;
 
         const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer);
 
-        const userId = MatrixClientPeg.get().getUserId();
+        const cli = MatrixClientPeg.get();
+        const userId = cli.getUserId();
         if (this.props.kind === KIND_DM) {
             title = _t("Direct Messages");
 
@@ -1288,10 +1343,35 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
             buttonText = _t("Invite");
             goButtonFn = this._inviteUsers;
+
+            if (SettingsStore.getValue("feature_room_history_key_sharing") &&
+                cli.isRoomEncrypted(this.props.roomId)) {
+                const room = cli.getRoom(this.props.roomId);
+                const visibilityEvent = room.currentState.getStateEvents(
+                    "m.room.history_visibility", "",
+                );
+                const visibility = visibilityEvent && visibilityEvent.getContent() &&
+                    visibilityEvent.getContent().history_visibility;
+                if (visibility === "world_readable" || visibility === "shared") {
+                    keySharingWarning =
+                        <p className='mx_InviteDialog_helpText'>
+                            <img
+                                src={require("../../../../res/img/element-icons/info.svg")}
+                                width={14} height={14} />
+                            {" " + _t("Invited people will be able to read old messages.")}
+                        </p>;
+                }
+            }
         } else if (this.props.kind === KIND_CALL_TRANSFER) {
             title = _t("Transfer");
             buttonText = _t("Transfer");
             goButtonFn = this._transferCall;
+            consultSection = <div>
+                <label>
+                    <input type="checkbox" checked={this.state.consultFirst} onChange={this.onConsultFirstChange} />
+                    {_t("Consult first")}
+                </label>
+            </div>;
         } else {
             console.error("Unknown kind of InviteDialog: " + this.props.kind);
         }
@@ -1321,12 +1401,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                             {spinner}
                         </div>
                     </div>
+                    {keySharingWarning}
                     {this._renderIdentityServerWarning()}
                     <div className='error'>{this.state.errorText}</div>
                     <div className='mx_InviteDialog_userSections'>
                         {this._renderSection('recents')}
                         {this._renderSection('suggestions')}
                     </div>
+                    {consultSection}
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/SeshatResetDialog.tsx

@@ -0,0 +1,54 @@
+/*
+Copyright 2021 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import {_t} from "../../../languageHandler";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+import {IDialogProps} from "./IDialogProps";
+
+@replaceableComponent("views.dialogs.SeshatResetDialog")
+export default class SeshatResetDialog extends React.PureComponent<IDialogProps> {
+    render() {
+        return (
+            <BaseDialog
+                hasCancel={true}
+                onFinished={this.props.onFinished.bind(null, false)}
+                title={_t("Reset event store?")}>
+                <div>
+                    <p>
+                        {_t("You most likely do not want to reset your event index store")}
+                        <br />
+                        {_t("If you do, please note that none of your messages will be deleted, " +
+                            "but the search experience might be degraded for a few moments" +
+                            "whilst the index is recreated",
+                        )}
+                    </p>
+                </div>
+                <DialogButtons
+                    primaryButton={_t("Reset event store")}
+                    onPrimaryButtonClick={this.props.onFinished.bind(null, true)}
+                    primaryButtonClass="danger"
+                    cancelButton={_t("Cancel")}
+                    onCancel={this.props.onFinished.bind(null, false)}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/SpaceSettingsDialog.tsx

@@ -28,7 +28,6 @@ import {getTopic} from "../elements/RoomTopic";
 import {avatarUrlForRoom} from "../../../Avatar";
 import ToggleSwitch from "../elements/ToggleSwitch";
 import AccessibleButton from "../elements/AccessibleButton";
-import FormButton from "../elements/FormButton";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import {allSettled} from "../../../utils/promise";
@@ -127,23 +126,24 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
             <div>
                 { _t("Make this space private") }
                 <ToggleSwitch
-                    checked={joinRule === "private"}
-                    onChange={checked => setJoinRule(checked ? "private" : "invite")}
+                    checked={joinRule !== "public"}
+                    onChange={checked => setJoinRule(checked ? "invite" : "public")}
                     disabled={!canSetJoinRule}
                     aria-label={_t("Make this space private")}
                 />
             </div>
 
-            <FormButton
+            <AccessibleButton
                 kind="danger"
-                label={_t("Leave Space")}
                 onClick={() => {
                     defaultDispatcher.dispatch({
                         action: "leave_room",
                         room_id: space.roomId,
                     });
                 }}
-            />
+            >
+                { _t("Leave Space") }
+            </AccessibleButton>
 
             <div className="mx_SpaceSettingsDialog_buttons">
                 <AccessibleButton onClick={() => Modal.createDialog(DevtoolsDialog, {roomId: space.roomId})}>
@@ -152,7 +152,9 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
                 <AccessibleButton onClick={onFinished} disabled={busy} kind="link">
                     { _t("Cancel") }
                 </AccessibleButton>
-                <FormButton onClick={onSave} disabled={busy} label={busy ? _t("Saving...") : _t("Save Changes")} />
+                <AccessibleButton onClick={onSave} disabled={busy} kind="primary">
+                    { busy ? _t("Saving...") : _t("Save Changes") }
+                </AccessibleButton>
             </div>
         </div>
     </BaseDialog>;

src/components/views/dialogs/VerificationRequestDialog.js

@@ -50,7 +50,7 @@ export default class VerificationRequestDialog extends React.Component {
         const member = this.props.member ||
             otherUserId && MatrixClientPeg.get().getUser(otherUserId);
         const title = request && request.isSelfVerification ?
-            _t("Verify other session") : _t("Verification Request");
+            _t("Verify other login") : _t("Verification Request");
 
         return <BaseDialog className="mx_InfoDialog" onFinished={this.props.onFinished}
                 contentId="mx_Dialog_content"

src/components/views/dialogs/security/AccessSecretStorageDialog.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2018, 2019 New Vector Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2018-2021 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.
@@ -17,14 +16,15 @@ limitations under the License.
 
 import {debounce} from "lodash";
 import classNames from 'classnames';
-import React from 'react';
-import PropTypes from "prop-types";
+import React, {ChangeEvent, FormEvent} from 'react';
+import {ISecretStorageKeyInfo} from "matrix-js-sdk/src";
+
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import Field from '../../elements/Field';
 import AccessibleButton from '../../elements/AccessibleButton';
-
-import { _t } from '../../../../languageHandler';
+import {_t} from '../../../../languageHandler';
+import {IDialogProps} from "../IDialogProps";
 
 // Maximum acceptable size of a key file. It's 59 characters including the spaces we encode,
 // so this should be plenty and allow for people putting extra whitespace in the file because
@@ -34,22 +34,30 @@ const KEY_FILE_MAX_SIZE = 128;
 // Don't shout at the user that their key is invalid every time they type a key: wait a short time
 const VALIDATION_THROTTLE_MS = 200;
 
+interface IProps extends IDialogProps {
+    keyInfo: ISecretStorageKeyInfo;
+    checkPrivateKey: (k: {passphrase?: string, recoveryKey?: string}) => boolean;
+}
+
+interface IState {
+    recoveryKey: string;
+    recoveryKeyValid: boolean | null;
+    recoveryKeyCorrect: boolean | null;
+    recoveryKeyFileError: boolean | null;
+    forceRecoveryKey: boolean;
+    passPhrase: string;
+    keyMatches: boolean | null;
+}
+
 /*
  * Access Secure Secret Storage by requesting the user's passphrase.
  */
-export default class AccessSecretStorageDialog extends React.PureComponent {
-    static propTypes = {
-        // { passphrase, pubkey }
-        keyInfo: PropTypes.object.isRequired,
-        // Function from one of { passphrase, recoveryKey } -> boolean
-        checkPrivateKey: PropTypes.func.isRequired,
-    }
+export default class AccessSecretStorageDialog extends React.PureComponent<IProps, IState> {
+    private fileUpload = React.createRef<HTMLInputElement>();
 
     constructor(props) {
         super(props);
 
-        this._fileUpload = React.createRef();
-
         this.state = {
             recoveryKey: "",
             recoveryKeyValid: null,
@@ -61,21 +69,21 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         };
     }
 
-    _onCancel = () => {
+    private onCancel = () => {
         this.props.onFinished(false);
-    }
+    };
 
-    _onUseRecoveryKeyClick = () => {
+    private onUseRecoveryKeyClick = () => {
         this.setState({
             forceRecoveryKey: true,
         });
-    }
+    };
 
-    _validateRecoveryKeyOnChange = debounce(() => {
-        this._validateRecoveryKey();
+    private validateRecoveryKeyOnChange = debounce(async () => {
+        await this.validateRecoveryKey();
     }, VALIDATION_THROTTLE_MS);
 
-    async _validateRecoveryKey() {
+    private async validateRecoveryKey() {
         if (this.state.recoveryKey === '') {
             this.setState({
                 recoveryKeyValid: null,
@@ -102,27 +110,27 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         }
     }
 
-    _onRecoveryKeyChange = (e) => {
+    private onRecoveryKeyChange = (ev: ChangeEvent<HTMLInputElement>) => {
         this.setState({
-            recoveryKey: e.target.value,
+            recoveryKey: ev.target.value,
             recoveryKeyFileError: null,
         });
 
         // also clear the file upload control so that the user can upload the same file
         // the did before (otherwise the onchange wouldn't fire)
-        if (this._fileUpload.current) this._fileUpload.current.value = null;
+        if (this.fileUpload.current) this.fileUpload.current.value = null;
 
         // We don't use Field's validation here because a) we want it in a separate place rather
         // than in a tooltip and b) we want it to display feedback based on the uploaded file
         // as well as the text box. Ideally we would refactor Field's validation logic so we could
         // re-use some of it.
-        this._validateRecoveryKeyOnChange();
-    }
+        this.validateRecoveryKeyOnChange();
+    };
 
-    _onRecoveryKeyFileChange = async e => {
-        if (e.target.files.length === 0) return;
+    private onRecoveryKeyFileChange = async (ev: ChangeEvent<HTMLInputElement>) => {
+        if (ev.target.files.length === 0) return;
 
-        const f = e.target.files[0];
+        const f = ev.target.files[0];
 
         if (f.size > KEY_FILE_MAX_SIZE) {
             this.setState({
@@ -140,7 +148,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     recoveryKeyFileError: null,
                     recoveryKey: contents.trim(),
                 });
-                this._validateRecoveryKey();
+                await this.validateRecoveryKey();
             } else {
                 this.setState({
                     recoveryKeyFileError: true,
@@ -150,14 +158,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 });
             }
         }
+    };
+
+    private onRecoveryKeyFileUploadClick = () => {
+        this.fileUpload.current.click();
     }
 
-    _onRecoveryKeyFileUploadClick = () => {
-        this._fileUpload.current.click();
-    }
-
-    _onPassPhraseNext = async (e) => {
-        e.preventDefault();
+    private onPassPhraseNext = async (ev: FormEvent<HTMLFormElement>) => {
+        ev.preventDefault();
 
         if (this.state.passPhrase.length <= 0) return;
 
@@ -169,10 +177,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         } else {
             this.setState({ keyMatches });
         }
-    }
+    };
 
-    _onRecoveryKeyNext = async (e) => {
-        e.preventDefault();
+    private onRecoveryKeyNext = async (ev: FormEvent<HTMLFormElement>) => {
+        ev.preventDefault();
 
         if (!this.state.recoveryKeyValid) return;
 
@@ -184,16 +192,16 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         } else {
             this.setState({ keyMatches });
         }
-    }
+    };
 
-    _onPassPhraseChange = (e) => {
+    private onPassPhraseChange = (ev: ChangeEvent<HTMLInputElement>) => {
         this.setState({
-            passPhrase: e.target.value,
+            passPhrase: ev.target.value,
             keyMatches: null,
         });
-    }
+    };
 
-    getKeyValidationText() {
+    private getKeyValidationText(): string {
         if (this.state.recoveryKeyFileError) {
             return _t("Wrong file type");
         } else if (this.state.recoveryKeyCorrect) {
@@ -208,7 +216,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
     }
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        // Caution: Making this an import will break tests.
+        const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
 
         const hasPassphrase = (
             this.props.keyInfo &&
@@ -244,18 +253,18 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     {
                         button: s => <AccessibleButton className="mx_linkButton"
                             element="span"
-                            onClick={this._onUseRecoveryKeyClick}
+                            onClick={this.onUseRecoveryKeyClick}
                         >
                             {s}
                         </AccessibleButton>,
                     },
                 )}</p>
 
-                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}>
+                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this.onPassPhraseNext}>
                     <input
                         type="password"
                         className="mx_AccessSecretStorageDialog_passPhraseInput"
-                        onChange={this._onPassPhraseChange}
+                        onChange={this.onPassPhraseChange}
                         value={this.state.passPhrase}
                         autoFocus={true}
                         autoComplete="new-password"
@@ -264,9 +273,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     {keyStatus}
                     <DialogButtons
                         primaryButton={_t('Continue')}
-                        onPrimaryButtonClick={this._onPassPhraseNext}
+                        onPrimaryButtonClick={this.onPassPhraseNext}
                         hasCancel={true}
-                        onCancel={this._onCancel}
+                        onCancel={this.onCancel}
                         focus={false}
                         primaryDisabled={this.state.passPhrase.length === 0}
                     />
@@ -291,7 +300,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
                 <form
                     className="mx_AccessSecretStorageDialog_primaryContainer"
-                    onSubmit={this._onRecoveryKeyNext}
+                    onSubmit={this.onRecoveryKeyNext}
                     spellCheck={false}
                     autoComplete="off"
                 >
@@ -301,7 +310,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                                 type="password"
                                 label={_t('Security Key')}
                                 value={this.state.recoveryKey}
-                                onChange={this._onRecoveryKeyChange}
+                                onChange={this.onRecoveryKeyChange}
                                 forceValidity={this.state.recoveryKeyCorrect}
                                 autoComplete="off"
                             />
@@ -312,10 +321,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         <div>
                             <input type="file"
                                 className="mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput"
-                                ref={this._fileUpload}
-                                onChange={this._onRecoveryKeyFileChange}
+                                ref={this.fileUpload}
+                                onChange={this.onRecoveryKeyFileChange}
                             />
-                            <AccessibleButton kind="primary" onClick={this._onRecoveryKeyFileUploadClick}>
+                            <AccessibleButton kind="primary" onClick={this.onRecoveryKeyFileUploadClick}>
                                 {_t("Upload")}
                             </AccessibleButton>
                         </div>
@@ -323,11 +332,11 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     {recoveryKeyFeedback}
                     <DialogButtons
                         primaryButton={_t('Continue')}
-                        onPrimaryButtonClick={this._onRecoveryKeyNext}
+                        onPrimaryButtonClick={this.onRecoveryKeyNext}
                         hasCancel={true}
                         cancelButton={_t("Go Back")}
                         cancelButtonClass='danger'
-                        onCancel={this._onCancel}
+                        onCancel={this.onCancel}
                         focus={false}
                         primaryDisabled={!this.state.recoveryKeyValid}
                     />
@@ -341,9 +350,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 title={title}
                 titleClass={titleClass}
             >
-            <div>
-                {content}
-            </div>
+                <div>
+                    {content}
+                </div>
             </BaseDialog>
         );
     }

src/components/views/elements/FacePile.tsx

@@ -0,0 +1,66 @@
+/*
+Copyright 2021 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { HTMLAttributes } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { sortBy } from "lodash";
+
+import MemberAvatar from "../avatars/MemberAvatar";
+import { _t } from "../../../languageHandler";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import TextWithTooltip from "../elements/TextWithTooltip";
+import { useRoomMembers } from "../../../hooks/useRoomMembers";
+
+const DEFAULT_NUM_FACES = 5;
+
+interface IProps extends HTMLAttributes<HTMLSpanElement> {
+    room: Room;
+    onlyKnownUsers?: boolean;
+    numShown?: number;
+}
+
+const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
+
+const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IProps) => {
+    let members = useRoomMembers(room);
+
+    // sort users with an explicit avatar first
+    const iteratees = [member => !!member.getMxcAvatarUrl()];
+    if (onlyKnownUsers) {
+        members = members.filter(isKnownMember);
+    } else {
+        // sort known users first
+        iteratees.unshift(member => isKnownMember(member));
+    }
+    if (members.length < 1) return null;
+
+    const shownMembers = sortBy(members, iteratees).slice(0, numShown);
+    return <div {...props} className="mx_FacePile">
+        <div className="mx_FacePile_faces">
+            { shownMembers.map(member => {
+                return <TextWithTooltip key={member.userId} tooltip={member.name}>
+                    <MemberAvatar member={member} width={28} height={28} />
+                </TextWithTooltip>;
+            }) }
+        </div>
+        { onlyKnownUsers && <span>
+            { _t("%(count)s people you know have already joined", { count: members.length }) }
+        </span> }
+    </div>
+};
+
+export default FacePile;

src/components/views/elements/SSOButtons.tsx

@@ -73,7 +73,7 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
         brandClass = `mx_SSOButton_brand_${brandName}`;
         icon = <img src={brandIcon} height="24" width="24" alt={brandName} />;
     } else if (typeof idp?.icon === "string" && idp.icon.startsWith("mxc://")) {
-        const src = mediaFromMxc(idp.icon).getSquareThumbnailHttp(24);
+        const src = mediaFromMxc(idp.icon, matrixClient).getSquareThumbnailHttp(24);
         icon = <img src={src} height="24" width="24" alt={idp.name} />;
     }
 

src/components/views/elements/TextWithTooltip.js

@@ -46,12 +46,14 @@ export default class TextWithTooltip extends React.Component {
     render() {
         const Tooltip = sdk.getComponent("elements.Tooltip");
 
+        const {class: className, children, tooltip, tooltipClass, ...props} = this.props;
+
         return (
-            <span onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={this.props.class}>
-                {this.props.children}
+            <span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={className}>
+                {children}
                 {this.state.hover && <Tooltip
-                    label={this.props.tooltip}
-                    tooltipClassName={this.props.tooltipClass}
+                    label={tooltip}
+                    tooltipClassName={tooltipClass}
                     className={"mx_TextWithTooltip_tooltip"} /> }
             </span>
         );

src/components/views/messages/MessageEvent.js

@@ -71,6 +71,10 @@ export default class MessageEvent extends React.Component {
             'm.file': sdk.getComponent('messages.MFileBody'),
             'm.audio': sdk.getComponent('messages.MAudioBody'),
             'm.video': sdk.getComponent('messages.MVideoBody'),
+
+            // TODO: @@ TravisR: Use labs flag determination.
+            // MSC: https://github.com/matrix-org/matrix-doc/pull/2516
+            'org.matrix.msc2516.voice': sdk.getComponent('messages.MAudioBody'),
         };
         const evTypes = {
             'm.sticker': sdk.getComponent('messages.MStickerBody'),

src/components/views/messages/TextualBody.js

@@ -216,12 +216,12 @@ export default class TextualBody extends React.Component {
     }
 
     _addLineNumbers(pre) {
+        // Calculate number of lines in pre
+        const number = pre.innerHTML.replace(/\n(<\/code>)?$/, "").split(/\n/).length;
         pre.innerHTML = '<span class="mx_EventTile_lineNumbers"></span>' + pre.innerHTML + '<span></span>';
         const lineNumbers = pre.getElementsByClassName("mx_EventTile_lineNumbers")[0];
-        // Calculate number of lines in pre
-        const number = pre.innerHTML.split(/\n/).length;
         // Iterate through lines starting with 1 (number of the first line is 1)
-        for (let i = 1; i < number; i++) {
+        for (let i = 1; i <= number; i++) {
             lineNumbers.innerHTML += '<span class="mx_EventTile_lineNumber">' + i + '</span>';
         }
     }

src/components/views/right_panel/EncryptionInfo.tsx

@@ -52,7 +52,7 @@ const EncryptionInfo: React.FC<IProps> = ({
         let text: string;
         if (waitingForOtherParty) {
             if (isSelfVerification) {
-                text = _t("Waiting for you to accept on your other session…");
+                text = _t("Accept on your other login…");
             } else {
                 text = _t("Waiting for %(displayName)s to accept…", {
                     displayName: member.displayName || member.name || member.userId,

src/components/views/rooms/BasicMessageComposer.tsx

@@ -46,6 +46,7 @@ import {IDiff} from "../../../editor/diff";
 import AutocompleteWrapperModel from "../../../editor/autocomplete";
 import DocumentPosition from "../../../editor/position";
 import {ICompletion} from "../../../autocomplete/Autocompleter";
+import { AutocompleteAction, getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindingsManager';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 // matches emoticons which follow the start of a line or whitespace
@@ -93,6 +94,7 @@ interface IProps {
     placeholder?: string;
     label?: string;
     initialCaret?: DocumentOffset;
+    disabled?: boolean;
 
     onChange?();
     onPaste?(event: ClipboardEvent<HTMLDivElement>, model: EditorModel): boolean;
@@ -421,105 +423,101 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
     private onKeyDown = (event: React.KeyboardEvent) => {
         const model = this.props.model;
-        const modKey = IS_MAC ? event.metaKey : event.ctrlKey;
         let handled = false;
-        // format bold
-        if (modKey && event.key === Key.B) {
-            this.onFormatAction(Formatting.Bold);
-            handled = true;
-        // format italics
-        } else if (modKey && event.key === Key.I) {
-            this.onFormatAction(Formatting.Italics);
-            handled = true;
-        // format quote
-        } else if (modKey && event.key === Key.GREATER_THAN) {
-            this.onFormatAction(Formatting.Quote);
-            handled = true;
-        // redo
-        } else if ((!IS_MAC && modKey && event.key === Key.Y) ||
-                  (IS_MAC && modKey && event.shiftKey && event.key === Key.Z)) {
-            if (this.historyManager.canRedo()) {
-                const {parts, caret} = this.historyManager.redo();
-                // pass matching inputType so historyManager doesn't push echo
-                // when invoked from rerender callback.
-                model.reset(parts, caret, "historyRedo");
-            }
-            handled = true;
-        // undo
-        } else if (modKey && event.key === Key.Z) {
-            if (this.historyManager.canUndo()) {
-                const {parts, caret} = this.historyManager.undo(this.props.model);
-                // pass matching inputType so historyManager doesn't push echo
-                // when invoked from rerender callback.
-                model.reset(parts, caret, "historyUndo");
-            }
-            handled = true;
-        // insert newline on Shift+Enter
-        } else if (event.key === Key.ENTER && (event.shiftKey || (IS_MAC && event.altKey))) {
-            this.insertText("\n");
-            handled = true;
-        // move selection to start of composer
-        } else if (modKey && event.key === Key.HOME && !event.shiftKey) {
-            setSelection(this.editorRef.current, model, {
-                index: 0,
-                offset: 0,
-            });
-            handled = true;
-        // move selection to end of composer
-        } else if (modKey && event.key === Key.END && !event.shiftKey) {
-            setSelection(this.editorRef.current, model, {
-                index: model.parts.length - 1,
-                offset: model.parts[model.parts.length - 1].text.length,
-            });
-            handled = true;
-        // autocomplete or enter to send below shouldn't have any modifier keys pressed.
-        } else {
-            const metaOrAltPressed = event.metaKey || event.altKey;
-            const modifierPressed = metaOrAltPressed || event.shiftKey;
-            if (model.autoComplete && model.autoComplete.hasCompletions()) {
-                const autoComplete = model.autoComplete;
-                switch (event.key) {
-                    case Key.ARROW_UP:
-                        if (!modifierPressed) {
-                            autoComplete.onUpArrow(event);
-                            handled = true;
-                        }
-                        break;
-                    case Key.ARROW_DOWN:
-                        if (!modifierPressed) {
-                            autoComplete.onDownArrow(event);
-                            handled = true;
-                        }
-                        break;
-                    case Key.TAB:
-                        if (!metaOrAltPressed) {
-                            autoComplete.onTab(event);
-                            handled = true;
-                        }
-                        break;
-                    case Key.ESCAPE:
-                        if (!modifierPressed) {
-                            autoComplete.onEscape(event);
-                            handled = true;
-                        }
-                        break;
-                    default:
-                        return; // don't preventDefault on anything else
-                }
-            } else if (event.key === Key.TAB) {
-                this.tabCompleteName(event);
+        const action = getKeyBindingsManager().getMessageComposerAction(event);
+        switch (action) {
+            case MessageComposerAction.FormatBold:
+                this.onFormatAction(Formatting.Bold);
                 handled = true;
-            } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
-                this.formatBarRef.current.hide();
-            }
+                break;
+            case MessageComposerAction.FormatItalics:
+                this.onFormatAction(Formatting.Italics);
+                handled = true;
+                break;
+            case MessageComposerAction.FormatQuote:
+                this.onFormatAction(Formatting.Quote);
+                handled = true;
+                break;
+            case MessageComposerAction.EditRedo:
+                if (this.historyManager.canRedo()) {
+                    const {parts, caret} = this.historyManager.redo();
+                    // pass matching inputType so historyManager doesn't push echo
+                    // when invoked from rerender callback.
+                    model.reset(parts, caret, "historyRedo");
+                }
+                handled = true;
+                break;
+            case MessageComposerAction.EditUndo:
+                if (this.historyManager.canUndo()) {
+                    const {parts, caret} = this.historyManager.undo(this.props.model);
+                    // pass matching inputType so historyManager doesn't push echo
+                    // when invoked from rerender callback.
+                    model.reset(parts, caret, "historyUndo");
+                }
+                handled = true;
+                break;
+            case MessageComposerAction.NewLine:
+                this.insertText("\n");
+                handled = true;
+                break;
+            case MessageComposerAction.MoveCursorToStart:
+                setSelection(this.editorRef.current, model, {
+                    index: 0,
+                    offset: 0,
+                });
+                handled = true;
+                break;
+            case MessageComposerAction.MoveCursorToEnd:
+                setSelection(this.editorRef.current, model, {
+                    index: model.parts.length - 1,
+                    offset: model.parts[model.parts.length - 1].text.length,
+                });
+                handled = true;
+                break;
         }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+
+        const autocompleteAction = getKeyBindingsManager().getAutocompleteAction(event);
+        if (model.autoComplete && model.autoComplete.hasCompletions()) {
+            const autoComplete = model.autoComplete;
+            switch (autocompleteAction) {
+                case AutocompleteAction.CompleteOrPrevSelection:
+                case AutocompleteAction.PrevSelection:
+                    autoComplete.selectPreviousSelection();
+                    handled = true;
+                    break;
+                case AutocompleteAction.CompleteOrNextSelection:
+                case AutocompleteAction.NextSelection:
+                    autoComplete.selectNextSelection();
+                    handled = true;
+                    break;
+                case AutocompleteAction.Cancel:
+                    autoComplete.onEscape(event);
+                    handled = true;
+                    break;
+                default:
+                    return; // don't preventDefault on anything else
+            }
+        } else if (autocompleteAction === AutocompleteAction.CompleteOrPrevSelection
+            || autocompleteAction === AutocompleteAction.CompleteOrNextSelection) {
+            // there is no current autocomplete window, try to open it
+            this.tabCompleteName();
+            handled = true;
+        } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
+            this.formatBarRef.current.hide();
+        }
+
         if (handled) {
             event.preventDefault();
             event.stopPropagation();
         }
     };
 
-    private async tabCompleteName(event: React.KeyboardEvent) {
+    private async tabCompleteName() {
         try {
             await new Promise<void>(resolve => this.setState({showVisualBell: false}, resolve));
             const {model} = this.props;
@@ -542,7 +540,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
             // Don't try to do things with the autocomplete if there is none shown
             if (model.autoComplete) {
-                await model.autoComplete.onTab(event);
+                await model.autoComplete.startSelection();
                 if (!model.autoComplete.hasSelection()) {
                     this.setState({showVisualBell: true});
                     model.autoComplete.close();
@@ -672,6 +670,9 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         });
         const classes = classNames("mx_BasicMessageComposer_input", {
             "mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar,
+
+            // TODO: @@ TravisR: This doesn't work properly. The composer resets in a strange way.
+            "mx_BasicMessageComposer_input_disabled": this.props.disabled,
         });
 
         const shortcuts = {
@@ -704,6 +705,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 aria-expanded={Boolean(this.state.autoComplete)}
                 aria-activedescendant={completionIndex >= 0 ? generateCompletionDomId(completionIndex) : undefined}
                 dir="auto"
+                aria-disabled={this.props.disabled}
             />
         </div>);
     }

src/components/views/rooms/EditMessageComposer.js

@@ -29,11 +29,10 @@ import EditorStateTransfer from '../../../utils/EditorStateTransfer';
 import classNames from 'classnames';
 import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import BasicMessageComposer from "./BasicMessageComposer";
-import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {Action} from "../../../dispatcher/actions";
-import SettingsStore from "../../../settings/SettingsStore";
 import CountlyAnalytics from "../../../CountlyAnalytics";
+import {getKeyBindingsManager, MessageComposerAction} from '../../../KeyBindingsManager';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 function _isReply(mxEvent) {
@@ -136,38 +135,41 @@ export default class EditMessageComposer extends React.Component {
         if (this._editorRef.isComposing(event)) {
             return;
         }
-        if (event.metaKey || event.altKey || event.shiftKey) {
-            return;
-        }
-        const ctrlEnterToSend = !!SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend');
-        const send = ctrlEnterToSend ? event.key === Key.ENTER && isOnlyCtrlOrCmdKeyEvent(event)
-            : event.key === Key.ENTER;
-        if (send) {
-            this._sendEdit();
-            event.preventDefault();
-        } else if (event.key === Key.ESCAPE) {
-            this._cancelEdit();
-        } else if (event.key === Key.ARROW_UP) {
-            if (this._editorRef.isModified() || !this._editorRef.isCaretAtStart()) {
-                return;
-            }
-            const previousEvent = findEditableEvent(this._getRoom(), false, this.props.editState.getEvent().getId());
-            if (previousEvent) {
-                dis.dispatch({action: 'edit_event', event: previousEvent});
+        const action = getKeyBindingsManager().getMessageComposerAction(event);
+        switch (action) {
+            case MessageComposerAction.Send:
+                this._sendEdit();
                 event.preventDefault();
+                break;
+            case MessageComposerAction.CancelEditing:
+                this._cancelEdit();
+                break;
+            case MessageComposerAction.EditPrevMessage: {
+                if (this._editorRef.isModified() || !this._editorRef.isCaretAtStart()) {
+                    return;
+                }
+                const previousEvent = findEditableEvent(this._getRoom(), false,
+                    this.props.editState.getEvent().getId());
+                if (previousEvent) {
+                    dis.dispatch({action: 'edit_event', event: previousEvent});
+                    event.preventDefault();
+                }
+                break;
             }
-        } else if (event.key === Key.ARROW_DOWN) {
-            if (this._editorRef.isModified() || !this._editorRef.isCaretAtEnd()) {
-                return;
+            case MessageComposerAction.EditNextMessage: {
+                if (this._editorRef.isModified() || !this._editorRef.isCaretAtEnd()) {
+                    return;
+                }
+                const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
+                if (nextEvent) {
+                    dis.dispatch({action: 'edit_event', event: nextEvent});
+                } else {
+                    dis.dispatch({action: 'edit_event', event: null});
+                    dis.fire(Action.FocusComposer);
+                }
+                event.preventDefault();
+                break;
             }
-            const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
-            if (nextEvent) {
-                dis.dispatch({action: 'edit_event', event: nextEvent});
-            } else {
-                dis.dispatch({action: 'edit_event', event: null});
-                dis.fire(Action.FocusComposer);
-            }
-            event.preventDefault();
         }
     }
 

src/components/views/rooms/EventTile.js

@@ -936,7 +936,7 @@ export default class EventTile extends React.Component {
             );
 
         const TooltipButton = sdk.getComponent('elements.TooltipButton');
-        const keyRequestInfo = isEncryptionFailure ?
+        const keyRequestInfo = isEncryptionFailure && !isRedacted ?
             <div className="mx_EventTile_keyRequestInfo">
                 <span className="mx_EventTile_keyRequestInfo_text">
                     { keyRequestInfoContent }

src/components/views/rooms/MessageComposer.js

@@ -33,6 +33,7 @@ import WidgetStore from "../../../stores/WidgetStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
 import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import VoiceRecordComposerTile from "./VoiceRecordComposerTile";
 
 function ComposerAvatar(props) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -187,6 +188,7 @@ export default class MessageComposer extends React.Component {
             hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room),
             joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room),
             isComposerEmpty: true,
+            haveRecording: false,
         };
     }
 
@@ -325,6 +327,10 @@ export default class MessageComposer extends React.Component {
         });
     }
 
+    onVoiceUpdate = (haveRecording: boolean) => {
+        this.setState({haveRecording});
+    };
+
     render() {
         const controls = [
             this.state.me ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
@@ -346,17 +352,32 @@ export default class MessageComposer extends React.Component {
                     permalinkCreator={this.props.permalinkCreator}
                     replyToEvent={this.props.replyToEvent}
                     onChange={this.onChange}
+                    // TODO: @@ TravisR - Disabling the composer doesn't work
+                    disabled={this.state.haveRecording}
                 />,
-                <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
-                <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
             );
 
+            if (!this.state.haveRecording) {
+                controls.push(
+                    <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
+                    <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
+                );
+            }
+
             if (SettingsStore.getValue(UIFeature.Widgets) &&
-                SettingsStore.getValue("MessageComposerInput.showStickersButton")) {
+                SettingsStore.getValue("MessageComposerInput.showStickersButton") &&
+                !this.state.haveRecording) {
                 controls.push(<Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />);
             }
 
-            if (!this.state.isComposerEmpty) {
+            if (SettingsStore.getValue("feature_voice_messages")) {
+                controls.push(<VoiceRecordComposerTile
+                    key="controls_voice_record"
+                    room={this.props.room}
+                    onRecording={this.onVoiceUpdate} />);
+            }
+
+            if (!this.state.isComposerEmpty || this.state.haveRecording) {
                 controls.push(
                     <SendButton key="controls_send" onClick={this.sendMessage} />,
                 );

src/components/views/rooms/MessageComposerFormatBar.js

@@ -85,8 +85,8 @@ class FormatButton extends React.PureComponent {
 
         return (
             <AccessibleTooltipButton
-                as="span"
-                role="button"
+                element="button"
+                type="button"
                 onClick={this.props.onClick}
                 title={this.props.label}
                 tooltip={tooltip}

src/components/views/rooms/NewRoomIntro.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 2021 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.
@@ -28,6 +28,8 @@ import defaultDispatcher from "../../../dispatcher/dispatcher";
 import {ViewUserPayload} from "../../../dispatcher/payloads/ViewUserPayload";
 import {Action} from "../../../dispatcher/actions";
 import dis from "../../../dispatcher/dispatcher";
+import SpaceStore from "../../../stores/SpaceStore";
+import {showSpaceInvite} from "../../../utils/space";
 
 const NewRoomIntro = () => {
     const cli = useContext(MatrixClientContext);
@@ -100,17 +102,48 @@ const NewRoomIntro = () => {
             });
         }
 
-        let buttons;
-        if (room.canInvite(cli.getUserId())) {
-            const onInviteClick = () => {
-                dis.dispatch({ action: "view_invite", roomId });
-            };
+        let parentSpace;
+        if (
+            SpaceStore.instance.activeSpace?.canInvite(cli.getUserId()) &&
+            SpaceStore.instance.getSpaceFilteredRoomIds(SpaceStore.instance.activeSpace).has(room.roomId)
+        ) {
+            parentSpace = SpaceStore.instance.activeSpace;
+        }
 
+        let buttons;
+        if (parentSpace) {
             buttons = <div className="mx_NewRoomIntro_buttons">
-                <AccessibleButton className="mx_NewRoomIntro_inviteButton" kind="primary" onClick={onInviteClick}>
+                <AccessibleButton
+                    className="mx_NewRoomIntro_inviteButton"
+                    kind="primary"
+                    onClick={() => {
+                        showSpaceInvite(parentSpace);
+                    }}
+                >
+                    {_t("Invite to %(spaceName)s", { spaceName: parentSpace.name })}
+                </AccessibleButton>
+                { room.canInvite(cli.getUserId()) && <AccessibleButton
+                    className="mx_NewRoomIntro_inviteButton"
+                    kind="primary_outline"
+                    onClick={() => {
+                        dis.dispatch({ action: "view_invite", roomId });
+                    }}
+                >
+                    {_t("Invite to just this room")}
+                </AccessibleButton> }
+            </div>;
+        } else if (room.canInvite(cli.getUserId())) {
+            buttons = <div className="mx_NewRoomIntro_buttons">
+                <AccessibleButton
+                    className="mx_NewRoomIntro_inviteButton"
+                    kind="primary"
+                    onClick={() => {
+                        dis.dispatch({ action: "view_invite", roomId });
+                    }}
+                >
                     {_t("Invite to this room")}
                 </AccessibleButton>
-            </div>
+            </div>;
         }
 
         const avatarUrl = room.currentState.getStateEvents(EventType.RoomAvatar, "")?.getContent()?.url;

src/components/views/rooms/RoomList.tsx

@@ -20,6 +20,7 @@ import React, { ReactComponentElement } from "react";
 import { Dispatcher } from "flux";
 import { Room } from "matrix-js-sdk/src/models/room";
 import * as fbEmitter from "fbemitter";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 
 import { _t, _td } from "../../../languageHandler";
 import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
@@ -48,9 +49,8 @@ import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../con
 import AccessibleButton from "../elements/AccessibleButton";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import CallHandler from "../../../CallHandler";
-import SpaceStore, { SUGGESTED_ROOMS } from "../../../stores/SpaceStore";
-import { showAddExistingRooms, showCreateNewRoom } from "../../../utils/space";
-import { EventType } from "matrix-js-sdk/src/@types/event";
+import SpaceStore, {SUGGESTED_ROOMS} from "../../../stores/SpaceStore";
+import {showAddExistingRooms, showCreateNewRoom, showSpaceInvite} from "../../../utils/space";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import RoomAvatar from "../avatars/RoomAvatar";
 import { ISpaceSummaryRoom } from "../../structures/SpaceRoomDirectory";
@@ -62,6 +62,7 @@ interface IProps {
     onResize: () => void;
     resizeNotifier: ResizeNotifier;
     isMinimized: boolean;
+    activeSpace: Room;
 }
 
 interface IState {
@@ -194,8 +195,8 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
                             : _t("You do not have permissions to add rooms to this space")}
                     />
                     <IconizedContextMenuOption
-                        label={_t("Explore space rooms")}
-                        iconClassName="mx_RoomList_iconExplore"
+                        label={_t("Explore rooms")}
+                        iconClassName="mx_RoomList_iconBrowse"
                         onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -424,6 +425,11 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         dis.dispatch({ action: Action.ViewRoomDirectory, initialText });
     };
 
+    private onSpaceInviteClick = () => {
+        const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
+        showSpaceInvite(this.props.activeSpace, initialText);
+    };
+
     private renderSuggestedRooms(): ReactComponentElement<typeof ExtraTile>[] {
         return this.state.suggestedRooms.map(room => {
             const name = room.name || room.canonical_alias || room.aliases.pop() || _t("Empty room");
@@ -569,7 +575,23 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                         kind="link"
                         onClick={this.onExplore}
                     >
-                        {_t("Explore all public rooms")}
+                        { this.props.activeSpace ? _t("Explore rooms") : _t("Explore all public rooms") }
+                    </AccessibleButton>
+                </div>;
+            } else if (this.props.activeSpace) {
+                explorePrompt = <div className="mx_RoomList_explorePrompt">
+                    <div>{ _t("Quick actions") }</div>
+                    { this.props.activeSpace.canInvite(MatrixClientPeg.get().getUserId()) && <AccessibleButton
+                        className="mx_RoomList_explorePrompt_spaceInvite"
+                        onClick={this.onSpaceInviteClick}
+                    >
+                        {_t("Invite people")}
+                    </AccessibleButton> }
+                    <AccessibleButton
+                        className="mx_RoomList_explorePrompt_spaceExplore"
+                        onClick={this.onExplore}
+                    >
+                        {_t("Explore rooms")}
                     </AccessibleButton>
                 </div>;
             } else if (Object.values(this.state.sublists).some(list => list.length > 0)) {

src/components/views/rooms/RoomSublist.tsx

@@ -51,6 +51,7 @@ import { objectExcluding, objectHasDiff } from "../../../utils/objects";
 import ExtraTile from "./ExtraTile";
 import { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
 import IconizedContextMenu from "../context_menus/IconizedContextMenu";
+import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const SHOW_N_BUTTON_HEIGHT = 28; // As defined by CSS
@@ -470,18 +471,19 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     };
 
     private onHeaderKeyDown = (ev: React.KeyboardEvent) => {
-        switch (ev.key) {
-            case Key.ARROW_LEFT:
+        const action = getKeyBindingsManager().getRoomListAction(ev);
+        switch (action) {
+            case RoomListAction.CollapseSection:
                 ev.stopPropagation();
                 if (this.state.isExpanded) {
-                    // On ARROW_LEFT collapse the room sublist if it isn't already
+                    // Collapse the room sublist if it isn't already
                     this.toggleCollapsed();
                 }
                 break;
-            case Key.ARROW_RIGHT: {
+            case RoomListAction.ExpandSection: {
                 ev.stopPropagation();
                 if (!this.state.isExpanded) {
-                    // On ARROW_RIGHT expand the room sublist if it isn't already
+                    // Expand the room sublist if it isn't already
                     this.toggleCollapsed();
                 } else if (this.sublistRef.current) {
                     // otherwise focus the first room

src/components/views/rooms/SendMessageComposer.js

@@ -33,22 +33,22 @@ import ReplyThread from "../elements/ReplyThread";
 import {parseEvent} from '../../../editor/deserialize';
 import {findEditableEvent} from '../../../utils/EventUtils';
 import SendHistoryManager from "../../../SendHistoryManager";
-import {getCommand} from '../../../SlashCommands';
+import {CommandCategories, getCommand} from '../../../SlashCommands';
 import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import {_t, _td} from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
-import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import RateLimitedFunc from '../../../ratelimitedfunc';
 import {Action} from "../../../dispatcher/actions";
 import {containsEmoji} from "../../../effects/utils";
 import {CHAT_EFFECTS} from '../../../effects';
-import SettingsStore from "../../../settings/SettingsStore";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import EMOJI_REGEX from 'emojibase-regex';
+import {getKeyBindingsManager, MessageComposerAction} from '../../../KeyBindingsManager';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SettingsStore from '../../../settings/SettingsStore';
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@@ -120,6 +120,7 @@ export default class SendMessageComposer extends React.Component {
         permalinkCreator: PropTypes.object.isRequired,
         replyToEvent: PropTypes.object,
         onChange: PropTypes.func,
+        disabled: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -147,60 +148,50 @@ export default class SendMessageComposer extends React.Component {
         if (this._editorRef.isComposing(event)) {
             return;
         }
-        const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
-        const ctrlEnterToSend = !!SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend');
-        const send = ctrlEnterToSend
-            ? event.key === Key.ENTER && isOnlyCtrlOrCmdKeyEvent(event)
-            : event.key === Key.ENTER && !hasModifier;
-        if (send) {
-            this._sendMessage();
-            event.preventDefault();
-        } else if (event.key === Key.ARROW_UP) {
-            this.onVerticalArrow(event, true);
-        } else if (event.key === Key.ARROW_DOWN) {
-            this.onVerticalArrow(event, false);
-        } else if (event.key === Key.ESCAPE) {
-            dis.dispatch({
-                action: 'reply_to_event',
-                event: null,
-            });
-        } else if (this._prepareToEncrypt) {
-            // This needs to be last!
-            this._prepareToEncrypt();
+        const action = getKeyBindingsManager().getMessageComposerAction(event);
+        switch (action) {
+            case MessageComposerAction.Send:
+                this._sendMessage();
+                event.preventDefault();
+                break;
+            case MessageComposerAction.SelectPrevSendHistory:
+            case MessageComposerAction.SelectNextSendHistory: {
+                // Try select composer history
+                const selected = this.selectSendHistory(action === MessageComposerAction.SelectPrevSendHistory);
+                if (selected) {
+                    // We're selecting history, so prevent the key event from doing anything else
+                    event.preventDefault();
+                }
+                break;
+            }
+            case MessageComposerAction.EditPrevMessage:
+                // selection must be collapsed and caret at start
+                if (this._editorRef.isSelectionCollapsed() && this._editorRef.isCaretAtStart()) {
+                    const editEvent = findEditableEvent(this.props.room, false);
+                    if (editEvent) {
+                        // We're selecting history, so prevent the key event from doing anything else
+                        event.preventDefault();
+                        dis.dispatch({
+                            action: 'edit_event',
+                            event: editEvent,
+                        });
+                    }
+                }
+                break;
+            case MessageComposerAction.CancelEditing:
+                dis.dispatch({
+                    action: 'reply_to_event',
+                    event: null,
+                });
+                break;
+            default:
+                if (this._prepareToEncrypt) {
+                    // This needs to be last!
+                    this._prepareToEncrypt();
+                }
         }
     };
 
-    onVerticalArrow(e, up) {
-        // 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 && e.ctrlKey;
-        const shouldEditLastMessage = !e.altKey && !e.ctrlKey && up && !this.props.replyToEvent;
-
-        if (shouldSelectHistory) {
-            // Try select composer history
-            const selected = this.selectSendHistory(up);
-            if (selected) {
-                // We're selecting history, so prevent the key event from doing anything else
-                e.preventDefault();
-            }
-        } else if (shouldEditLastMessage) {
-            // selection must be collapsed and caret at start
-            if (this._editorRef.isSelectionCollapsed() && this._editorRef.isCaretAtStart()) {
-                const editEvent = findEditableEvent(this.props.room, false);
-                if (editEvent) {
-                    // We're selecting history, so prevent the key event from doing anything else
-                    e.preventDefault();
-                    dis.dispatch({
-                        action: 'edit_event',
-                        event: editEvent,
-                    });
-                }
-            }
-        }
-    }
-
     // we keep sent messages/commands in a separate history (separate from undo history)
     // so you can alt+up/down in them
     selectSendHistory(up) {
@@ -265,7 +256,7 @@ export default class SendMessageComposer extends React.Component {
                     const myReactionKeys = [...myReactionEvents]
                         .filter(event => !event.isRedacted())
                         .map(event => event.getRelation().key);
-                        shouldReact = !myReactionKeys.includes(reaction);
+                    shouldReact = !myReactionKeys.includes(reaction);
                 }
                 if (shouldReact) {
                     MatrixClientPeg.get().sendEvent(lastMessage.getRoomId(), "m.reaction", {
@@ -290,15 +281,22 @@ export default class SendMessageComposer extends React.Component {
             }
             return text + part.text;
         }, "");
-        return [getCommand(this.props.room.roomId, commandText), commandText];
+        const {cmd, args} = getCommand(commandText);
+        return [cmd, args, commandText];
     }
 
-    async _runSlashCommand(fn) {
-        const cmd = fn();
-        let error = cmd.error;
-        if (cmd.promise) {
+    async _runSlashCommand(cmd, args) {
+        const result = cmd.run(this.props.room.roomId, args);
+        let messageContent;
+        let error = result.error;
+        if (result.promise) {
             try {
-                await cmd.promise;
+                if (cmd.category === CommandCategories.messages) {
+                    // The command returns a modified message that we need to pass on
+                    messageContent = await result.promise;
+                } else {
+                    await result.promise;
+                }
             } catch (err) {
                 error = err;
             }
@@ -307,7 +305,7 @@ export default class SendMessageComposer extends React.Component {
             console.error("Command failure: %s", error);
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             // assume the error is a server error when the command is async
-            const isServerError = !!cmd.promise;
+            const isServerError = !!result.promise;
             const title = isServerError ? _td("Server error") : _td("Command error");
 
             let errText;
@@ -325,6 +323,7 @@ export default class SendMessageComposer extends React.Component {
             });
         } else {
             console.log("Command success.");
+            if (messageContent) return messageContent;
         }
     }
 
@@ -333,13 +332,22 @@ export default class SendMessageComposer extends React.Component {
             return;
         }
 
+        const replyToEvent = this.props.replyToEvent;
         let shouldSend = true;
+        let content;
 
         if (!containsEmote(this.model) && this._isSlashCommand()) {
-            const [cmd, commandText] = this._getSlashCommand();
+            const [cmd, args, commandText] = this._getSlashCommand();
             if (cmd) {
-                shouldSend = false;
-                this._runSlashCommand(cmd);
+                if (cmd.category === CommandCategories.messages) {
+                    content = await this._runSlashCommand(cmd, args);
+                    if (replyToEvent) {
+                        addReplyToMessageContent(content, replyToEvent, this.props.permalinkCreator);
+                    }
+                } else {
+                    this._runSlashCommand(cmd, args);
+                    shouldSend = false;
+                }
             } else {
                 // ask the user if their unknown command should be sent as a message
                 const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
@@ -374,11 +382,12 @@ export default class SendMessageComposer extends React.Component {
             this._sendQuickReaction();
         }
 
-        const replyToEvent = this.props.replyToEvent;
         if (shouldSend) {
             const startTime = CountlyAnalytics.getTimestamp();
             const {roomId} = this.props.room;
-            const content = createMessageContent(this.model, this.props.permalinkCreator, replyToEvent);
+            if (!content) {
+                content = createMessageContent(this.model, this.props.permalinkCreator, replyToEvent);
+            }
             // don't bother sending an empty message
             if (!content.body.trim()) return;
 
@@ -453,12 +462,17 @@ export default class SendMessageComposer extends React.Component {
         }
     }
 
+    // should save state when editor has contents or reply is open
+    _shouldSaveStoredEditorState = () => {
+        return !this.model.isEmpty || this.props.replyToEvent;
+    }
+
     _saveStoredEditorState = () => {
-        if (this.model.isEmpty) {
-            this._clearStoredEditorState();
-        } else {
+        if (this._shouldSaveStoredEditorState()) {
             const item = SendHistoryManager.createItem(this.model, this.props.replyToEvent);
             localStorage.setItem(this._editorStateKey, JSON.stringify(item));
+        } else {
+            this._clearStoredEditorState();
         }
     }
 
@@ -502,7 +516,7 @@ export default class SendMessageComposer extends React.Component {
     _insertQuotedMessage(event) {
         const {model} = this;
         const {partCreator} = model;
-        const quoteParts = parseEvent(event, partCreator, { isQuotedMessage: true });
+        const quoteParts = parseEvent(event, partCreator, {isQuotedMessage: true});
         // add two newlines
         quoteParts.push(partCreator.newline());
         quoteParts.push(partCreator.newline());
@@ -556,6 +570,7 @@ export default class SendMessageComposer extends React.Component {
                     label={this.props.placeholder}
                     placeholder={this.props.placeholder}
                     onPaste={this._onPaste}
+                    disabled={this.props.disabled}
                 />
             </div>
         );

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -0,0 +1,101 @@
+/*
+Copyright 2021 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import {_t} from "../../../languageHandler";
+import React from "react";
+import {VoiceRecorder} from "../../../voice/VoiceRecorder";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import classNames from "classnames";
+import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
+
+interface IProps {
+    room: Room;
+    onRecording: (haveRecording: boolean) => void;
+}
+
+interface IState {
+    recorder?: VoiceRecorder;
+}
+
+/**
+ * Container tile for rendering the voice message recorder in the composer.
+ */
+@replaceableComponent("views.rooms.VoiceRecordComposerTile")
+export default class VoiceRecordComposerTile extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {
+            recorder: null, // not recording by default
+        };
+    }
+
+    private onStartStopVoiceMessage = async () => {
+        // TODO: @@ TravisR: We do not want to auto-send on stop.
+        if (this.state.recorder) {
+            await this.state.recorder.stop();
+            const mxc = await this.state.recorder.upload();
+            MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
+                body: "Voice message",
+                msgtype: "org.matrix.msc2516.voice",
+                url: mxc,
+            });
+            this.setState({recorder: null});
+            this.props.onRecording(false);
+            return;
+        }
+        const recorder = new VoiceRecorder(MatrixClientPeg.get());
+        await recorder.start();
+        this.props.onRecording(true);
+        this.setState({recorder});
+    };
+
+    private renderWaveformArea() {
+        if (!this.state.recorder) return null;
+
+        return <div className='mx_VoiceRecordComposerTile_waveformContainer'>
+            <LiveRecordingClock recorder={this.state.recorder} />
+            <LiveRecordingWaveform recorder={this.state.recorder} />
+        </div>;
+    }
+
+    public render() {
+        const classes = classNames({
+            'mx_MessageComposer_button': !this.state.recorder,
+            'mx_MessageComposer_voiceMessage': !this.state.recorder,
+            'mx_VoiceRecordComposerTile_stop': !!this.state.recorder,
+        });
+
+        let tooltip = _t("Record a voice message");
+        if (!!this.state.recorder) {
+            // TODO: @@ TravisR: Change to match behaviour
+            tooltip = _t("Stop & send recording");
+        }
+
+        return (<>
+            {this.renderWaveformArea()}
+            <AccessibleTooltipButton
+                className={classes}
+                onClick={this.onStartStopVoiceMessage}
+                title={tooltip}
+            />
+        </>);
+    }
+}

src/components/views/settings/EventIndexPanel.js

@@ -26,6 +26,7 @@ import {formatBytes, formatCountLong} from "../../../utils/FormattingUtils";
 import EventIndexPeg from "../../../indexing/EventIndexPeg";
 import {SettingLevel} from "../../../settings/SettingLevel";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SeshatResetDialog from '../dialogs/SeshatResetDialog';
 
 @replaceableComponent("views.settings.EventIndexPanel")
 export default class EventIndexPanel extends React.Component {
@@ -122,6 +123,20 @@ export default class EventIndexPanel extends React.Component {
         await this.updateState();
     }
 
+    _confirmEventStoreReset = () => {
+        const self = this;
+        const { close } = Modal.createDialog(SeshatResetDialog, {
+            onFinished: async (success) => {
+                if (success) {
+                    await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, false);
+                    await EventIndexPeg.deleteEventIndex();
+                    await self._onEnable();
+                    close();
+                }
+            },
+        });
+    }
+
     render() {
         let eventIndexingSettings = null;
         const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
@@ -167,7 +182,7 @@ export default class EventIndexPanel extends React.Component {
             );
         } else if (EventIndexPeg.platformHasSupport() && !EventIndexPeg.supportIsInstalled()) {
             const nativeLink = (
-                "https://github.com/vector-im/element-web/blob/develop/" +
+                "https://github.com/vector-im/element-desktop/blob/develop/" +
                 "docs/native-node-modules.md#" +
                 "adding-seshat-for-search-in-e2e-encrypted-rooms"
             );
@@ -190,7 +205,7 @@ export default class EventIndexPanel extends React.Component {
                     }
                 </div>
             );
-        } else {
+        } else if (!EventIndexPeg.platformHasSupport()) {
             eventIndexingSettings = (
                 <div className='mx_SettingsTab_subsectionText'>
                     {
@@ -208,6 +223,31 @@ export default class EventIndexPanel extends React.Component {
                     }
                 </div>
             );
+        } else {
+            eventIndexingSettings = (
+                <div className='mx_SettingsTab_subsectionText'>
+                    <p>
+                        {this.state.enabling
+                            ? <InlineSpinner />
+                            : _t("Message search initilisation failed")
+                        }
+                    </p>
+                    {EventIndexPeg.error && (
+                    <details>
+                        <summary>{_t("Advanced")}</summary>
+                        <code>
+                            {EventIndexPeg.error.message}
+                        </code>
+                        <p>
+                            <AccessibleButton key="delete" kind="danger" onClick={this._confirmEventStoreReset}>
+                                {_t("Reset")}
+                            </AccessibleButton>
+                        </p>
+                    </details>
+                    )}
+
+                </div>
+            );
         }
 
         return eventIndexingSettings;

src/components/views/settings/discovery/EmailAddresses.js

@@ -203,6 +203,7 @@ export class EmailAddress extends React.Component {
                     className="mx_ExistingEmailAddress_confirmBtn"
                     kind="primary_sm"
                     onClick={this.onContinueClick}
+                    disabled={this.state.continueDisabled}
                 >
                     {_t("Complete")}
                 </AccessibleButton>

src/components/views/settings/tabs/user/GeneralUserSettingsTab.js

@@ -206,10 +206,10 @@ export default class GeneralUserSettingsTab extends React.Component {
 
     _onPasswordChangeError = (err) => {
         // TODO: Figure out a design that doesn't involve replacing the current dialog
-        let errMsg = err.error || "";
+        let errMsg = err.error || err.message || "";
         if (err.httpStatus === 403) {
             errMsg = _t("Failed to change password. Is your password correct?");
-        } else if (err.httpStatus) {
+        } else if (!errMsg) {
             errMsg += ` (HTTP status ${err.httpStatus})`;
         }
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js

@@ -74,6 +74,8 @@ export default class PreferencesUserSettingsTab extends React.Component {
         this.state = {
             autoLaunch: false,
             autoLaunchSupported: false,
+            warnBeforeExit: true,
+            warnBeforeExitSupported: false,
             alwaysShowMenuBar: true,
             alwaysShowMenuBarSupported: false,
             minimizeToTray: true,
@@ -96,6 +98,12 @@ export default class PreferencesUserSettingsTab extends React.Component {
             autoLaunch = await platform.getAutoLaunchEnabled();
         }
 
+        const warnBeforeExitSupported = await platform.supportsWarnBeforeExit();
+        let warnBeforeExit = false;
+        if (warnBeforeExitSupported) {
+            warnBeforeExit = await platform.shouldWarnBeforeExit();
+        }
+
         const alwaysShowMenuBarSupported = await platform.supportsAutoHideMenuBar();
         let alwaysShowMenuBar = true;
         if (alwaysShowMenuBarSupported) {
@@ -111,6 +119,8 @@ export default class PreferencesUserSettingsTab extends React.Component {
         this.setState({
             autoLaunch,
             autoLaunchSupported,
+            warnBeforeExit,
+            warnBeforeExitSupported,
             alwaysShowMenuBarSupported,
             alwaysShowMenuBar,
             minimizeToTraySupported,
@@ -122,6 +132,10 @@ export default class PreferencesUserSettingsTab extends React.Component {
         PlatformPeg.get().setAutoLaunchEnabled(checked).then(() => this.setState({autoLaunch: checked}));
     };
 
+    _onWarnBeforeExitChange = (checked) => {
+        PlatformPeg.get().setWarnBeforeExit(checked).then(() => this.setState({warnBeforeExit: checked}));
+    }
+
     _onAlwaysShowMenuBarChange = (checked) => {
         PlatformPeg.get().setAutoHideMenuBarEnabled(!checked).then(() => this.setState({alwaysShowMenuBar: checked}));
     };
@@ -161,6 +175,14 @@ export default class PreferencesUserSettingsTab extends React.Component {
                 label={_t('Start automatically after system login')} />;
         }
 
+        let warnBeforeExitOption = null;
+        if (this.state.warnBeforeExitSupported) {
+            warnBeforeExitOption = <LabelledToggleSwitch
+                value={this.state.warnBeforeExit}
+                onChange={this._onWarnBeforeExitChange}
+                label={_t('Warn before quitting')} />;
+        }
+
         let autoHideMenuOption = null;
         if (this.state.alwaysShowMenuBarSupported) {
             autoHideMenuOption = <LabelledToggleSwitch
@@ -202,6 +224,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
                     {minimizeToTrayOption}
                     {autoHideMenuOption}
                     {autoLaunchOption}
+                    {warnBeforeExitOption}
                     <Field
                         label={_t('Autocomplete delay (ms)')}
                         type='number'

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -21,7 +21,6 @@ import {EventType, RoomType, RoomCreateTypeField} from "matrix-js-sdk/src/@types
 import {_t} from "../../../languageHandler";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {ChevronFace, ContextMenu} from "../../structures/ContextMenu";
-import FormButton from "../elements/FormButton";
 import createRoom, {IStateEvent, Preset} from "../../../createRoom";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import SpaceBasicSettings from "./SpaceBasicSettings";
@@ -89,6 +88,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
                     power_level_content_override: {
                         // Only allow Admins to write to the timeline to prevent hidden sync spam
                         events_default: 100,
+                        ...Visibility.Public ? { invite: 0 } : {},
                     },
                 },
                 spinner: false,
@@ -108,7 +108,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
         body = <React.Fragment>
             <h2>{ _t("Create a space") }</h2>
             <p>{ _t("Spaces are new ways to group rooms and people. " +
-                "To join an existing space you’ll need an invite") }</p>
+                "To join an existing space you'll need an invite.") }</p>
 
             <SpaceCreateMenuType
                 title={_t("Public")}
@@ -140,19 +140,17 @@ const SpaceCreateMenu = ({ onFinished }) => {
             </h2>
             <p>
                 {
-                    _t("Give it a photo, name and description to help you identify it.")
+                    _t("Add some details to help people recognise it.")
                 } {
-                    _t("You can change these at any point.")
+                    _t("You can change these anytime.")
                 }
             </p>
 
             <SpaceBasicSettings setAvatar={setAvatar} name={name} setName={setName} topic={topic} setTopic={setTopic} />
 
-            <FormButton
-                label={busy ? _t("Creating...") : _t("Create")}
-                onClick={onSpaceCreateClick}
-                disabled={!name && !busy}
-            />
+            <AccessibleButton kind="primary" onClick={onSpaceCreateClick} disabled={!name || busy}>
+                { busy ? _t("Creating...") : _t("Create") }
+            </AccessibleButton>
         </React.Fragment>;
     }
 

src/components/views/spaces/SpacePanel.tsx

@@ -220,13 +220,19 @@ const SpacePanel = () => {
                     <SpaceButton
                         className={newClasses}
                         tooltip={menuDisplayed ? _t("Cancel") : _t("Create a space")}
-                        onClick={menuDisplayed ? closeMenu : openMenu}
+                        onClick={menuDisplayed ? closeMenu : () => {
+                            openMenu();
+                            if (!isPanelCollapsed) setPanelCollapsed(true);
+                        }}
                         isNarrow={isPanelCollapsed}
                     />
                 </AutoHideScrollbar>
                 <AccessibleTooltipButton
                     className={classNames("mx_SpacePanel_toggleCollapse", {expanded: !isPanelCollapsed})}
-                    onClick={evt => setPanelCollapsed(!isPanelCollapsed)}
+                    onClick={() => {
+                        setPanelCollapsed(!isPanelCollapsed);
+                        if (menuDisplayed) closeMenu();
+                    }}
                     title={expandCollapseButtonTitle}
                 />
                 { contextMenu }

src/components/views/spaces/SpacePublicShare.tsx

@@ -26,7 +26,7 @@ import {showRoomInviteDialog} from "../../../RoomInvite";
 
 interface IProps {
     space: Room;
-    onFinished(): void;
+    onFinished?(): void;
 }
 
 const SpacePublicShare = ({ space, onFinished }: IProps) => {
@@ -41,23 +41,24 @@ const SpacePublicShare = ({ space, onFinished }: IProps) => {
                 const success = await copyPlaintext(permalinkCreator.forRoom());
                 const text = success ? _t("Copied!") : _t("Failed to copy");
                 setCopiedText(text);
-                await sleep(10);
+                await sleep(5000);
                 if (copiedText === text) { // if the text hasn't changed by another click then clear it after some time
                     setCopiedText(_t("Click to copy"));
                 }
             }}
         >
-            { _t("Share invite link") }
+            <h3>{ _t("Share invite link") }</h3>
             <span>{ copiedText }</span>
         </AccessibleButton>
         <AccessibleButton
             className="mx_SpacePublicShare_inviteButton"
             onClick={() => {
                 showRoomInviteDialog(space.roomId);
-                onFinished();
+                if (onFinished) onFinished();
             }}
         >
-            { _t("Invite by email or username") }
+            <h3>{ _t("Invite people") }</h3>
+            <span>{ _t("Invite with email or username") }</span>
         </AccessibleButton>
     </div>;
 };

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -30,20 +30,21 @@ import IconizedContextMenu, {
 import {_t} from "../../../languageHandler";
 import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import {toRightOf} from "../../structures/ContextMenu";
-import {shouldShowSpaceSettings, showCreateNewRoom, showSpaceSettings} from "../../../utils/space";
+import {
+    shouldShowSpaceSettings,
+    showAddExistingRooms,
+    showCreateNewRoom,
+    showSpaceInvite,
+    showSpaceSettings,
+} from "../../../utils/space";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {ButtonEvent} from "../elements/AccessibleButton";
+import AccessibleButton, {ButtonEvent} from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import Modal from "../../../Modal";
-import SpacePublicShare from "./SpacePublicShare";
 import {Action} from "../../../dispatcher/actions";
 import RoomViewStore from "../../../stores/RoomViewStore";
 import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {showRoomInviteDialog} from "../../../RoomInvite";
-import InfoDialog from "../dialogs/InfoDialog";
 import {EventType} from "matrix-js-sdk/src/@types/event";
-import SpaceRoomDirectory from "../../structures/SpaceRoomDirectory";
 
 interface IItemProps {
     space?: Room;
@@ -110,36 +111,11 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         this.setState({contextMenuPosition: null});
     };
 
-    private onHomeClick = (ev: ButtonEvent) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        defaultDispatcher.dispatch({
-            action: "view_room",
-            room_id: this.props.space.roomId,
-        });
-        this.setState({contextMenuPosition: null}); // also close the menu
-    };
-
     private onInviteClick = (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
 
-        if (this.props.space.getJoinRule() === "public") {
-            const modal = Modal.createTrackedDialog("Space Invite", "User Menu", InfoDialog, {
-                title: _t("Invite members"),
-                description: <React.Fragment>
-                    <span>{ _t("Share your public space") }</span>
-                    <SpacePublicShare space={this.props.space} onFinished={() => modal.close()} />
-                </React.Fragment>,
-                fixedWidth: false,
-                button: false,
-                className: "mx_SpacePanel_sharePublicSpace",
-                hasCloseButton: true,
-            });
-        } else {
-            showRoomInviteDialog(this.props.space.roomId);
-        }
+        showSpaceInvite(this.props.space);
         this.setState({contextMenuPosition: null}); // also close the menu
     };
 
@@ -170,6 +146,14 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         this.setState({contextMenuPosition: null}); // also close the menu
     };
 
+    private onAddExistingRoomClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        showAddExistingRooms(this.context, this.props.space);
+        this.setState({contextMenuPosition: null}); // also close the menu
+    };
+
     private onMembersClick = (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -193,9 +177,10 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.preventDefault();
         ev.stopPropagation();
 
-        Modal.createTrackedDialog("Space room directory", "Space panel", SpaceRoomDirectory, {
-            space: this.props.space,
-        }, "mx_SpaceRoomDirectory_dialogWrapper", false, true);
+        defaultDispatcher.dispatch({
+            action: "view_room",
+            room_id: this.props.space.roomId,
+        });
         this.setState({contextMenuPosition: null}); // also close the menu
     };
 
@@ -236,15 +221,22 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 </IconizedContextMenuOptionList>;
             }
 
-            let newRoomOption;
+            const canAddRooms = this.props.space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
+
+            let newRoomSection;
             if (this.props.space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) {
-                newRoomOption = (
+                newRoomSection = <IconizedContextMenuOptionList first>
                     <IconizedContextMenuOption
                         iconClassName="mx_SpacePanel_iconPlus"
-                        label={_t("New room")}
+                        label={_t("Create new room")}
                         onClick={this.onNewRoomClick}
                     />
-                );
+                    <IconizedContextMenuOption
+                        iconClassName="mx_SpacePanel_iconHash"
+                        label={_t("Add existing room")}
+                        onClick={this.onAddExistingRoomClick}
+                    />
+                </IconizedContextMenuOptionList>;
             }
 
             contextMenu = <IconizedContextMenu
@@ -258,11 +250,6 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 </div>
                 <IconizedContextMenuOptionList first>
                     { inviteOption }
-                    <IconizedContextMenuOption
-                        iconClassName="mx_SpacePanel_iconHome"
-                        label={_t("Space Home")}
-                        onClick={this.onHomeClick}
-                    />
                     <IconizedContextMenuOption
                         iconClassName="mx_SpacePanel_iconMembers"
                         label={_t("Members")}
@@ -271,11 +258,11 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                     { settingsOption }
                     <IconizedContextMenuOption
                         iconClassName="mx_SpacePanel_iconExplore"
-                        label={_t("Explore rooms")}
+                        label={canAddRooms ? _t("Manage & explore rooms") : _t("Explore rooms")}
                         onClick={this.onExploreRoomsClick}
                     />
-                    { newRoomOption }
                 </IconizedContextMenuOptionList>
+                { newRoomSection }
                 { leaveSection }
             </IconizedContextMenu>;
         }
@@ -335,7 +322,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         const avatarSize = isNested ? 24 : 32;
 
         const toggleCollapseButton = childSpaces && childSpaces.length ?
-            <button
+            <AccessibleButton
                 className="mx_SpaceButton_toggleCollapse"
                 onClick={evt => this.toggleCollapse(evt)}
             /> : null;

src/components/views/toasts/GenericToast.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 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.
@@ -21,6 +21,7 @@ import {XOR} from "../../../@types/common";
 
 export interface IProps {
     description: ReactNode;
+    detail?: ReactNode;
     acceptLabel: string;
 
     onAccept();
@@ -33,14 +34,20 @@ interface IPropsExtended extends IProps {
 
 const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
     description,
+    detail,
     acceptLabel,
     rejectLabel,
     onAccept,
     onReject,
 }) => {
+    const detailContent = detail ? <div className="mx_Toast_detail">
+        {detail}
+    </div> : null;
+
     return <div>
         <div className="mx_Toast_description">
-            { description }
+            {description}
+            {detailContent}
         </div>
         <div className="mx_Toast_buttons" aria-live="off">
             {onReject && rejectLabel && <FormButton label={rejectLabel} kind="danger" onClick={onReject} /> }

src/components/views/toasts/VerificationRequestToast.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 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.
@@ -140,11 +140,12 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
 
     render() {
         const {request} = this.props;
-        let nameLabel;
+        let description;
+        let detail;
         if (request.isSelfVerification) {
             if (this.state.device) {
-                nameLabel = _t("From %(deviceName)s (%(deviceId)s) at %(ip)s", {
-                    deviceName: this.state.device.getDisplayName(),
+                description = this.state.device.getDisplayName();
+                detail = _t("%(deviceId)s from %(ip)s", {
                     deviceId: this.state.device.deviceId,
                     ip: this.state.ip,
                 });
@@ -152,13 +153,13 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
         } else {
             const userId = request.otherUserId;
             const roomId = request.channel.roomId;
-            nameLabel = roomId ? userLabelForEventRoom(userId, roomId) : userId;
+            description = roomId ? userLabelForEventRoom(userId, roomId) : userId;
             // for legacy to_device verification requests
-            if (nameLabel === userId) {
+            if (description === userId) {
                 const client = MatrixClientPeg.get();
                 const user = client.getUser(userId);
                 if (user && user.displayName) {
-                    nameLabel = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
+                    description = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
                 }
             }
         }
@@ -167,7 +168,8 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
             _t("Decline (%(counter)s)", {counter: this.state.counter});
 
         return <GenericToast
-            description={nameLabel}
+            description={description}
+            detail={detail}
             acceptLabel={_t("Accept")}
             onAccept={this.accept}
             rejectLabel={declineLabel}

src/components/views/voice_messages/Clock.tsx

@@ -0,0 +1,42 @@
+/*
+Copyright 2021 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+
+interface IProps {
+    seconds: number;
+}
+
+interface IState {
+}
+
+/**
+ * Simply converts seconds into minutes and seconds. Note that hours will not be
+ * displayed, making it possible to see "82:29".
+ */
+@replaceableComponent("views.voice_messages.Clock")
+export default class Clock extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+    }
+
+    public render() {
+        const minutes = Math.floor(this.props.seconds / 60).toFixed(0).padStart(2, '0');
+        const seconds = Math.round(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
+        return <span className='mx_Clock'>{minutes}:{seconds}</span>;
+    }
+}

src/components/views/voice_messages/LiveRecordingClock.tsx

@@ -0,0 +1,55 @@
+/*
+Copyright 2021 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import {IRecordingUpdate, VoiceRecorder} from "../../../voice/VoiceRecorder";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Clock from "./Clock";
+
+interface IProps {
+    recorder: VoiceRecorder;
+}
+
+interface IState {
+    seconds: number;
+}
+
+/**
+ * A clock for a live recording.
+ */
+@replaceableComponent("views.voice_messages.LiveRecordingClock")
+export default class LiveRecordingClock extends React.Component<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {seconds: 0};
+        this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
+    }
+
+    shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): boolean {
+        const currentFloor = Math.floor(this.state.seconds);
+        const nextFloor = Math.floor(nextState.seconds);
+        return currentFloor !== nextFloor;
+    }
+
+    private onRecordingUpdate = (update: IRecordingUpdate) => {
+        this.setState({seconds: update.timeSeconds});
+    };
+
+    public render() {
+        return <Clock seconds={this.state.seconds} />;
+    }
+}

src/components/views/voice_messages/LiveRecordingWaveform.tsx

@@ -0,0 +1,62 @@
+/*
+Copyright 2021 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import {IRecordingUpdate, VoiceRecorder} from "../../../voice/VoiceRecorder";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {arrayFastResample, arraySeed} from "../../../utils/arrays";
+import {percentageOf} from "../../../utils/numbers";
+import Waveform from "./Waveform";
+
+interface IProps {
+    recorder: VoiceRecorder;
+}
+
+interface IState {
+    heights: number[];
+}
+
+const DOWNSAMPLE_TARGET = 35; // number of bars we want
+
+/**
+ * A waveform which shows the waveform of a live recording
+ */
+@replaceableComponent("views.voice_messages.LiveRecordingWaveform")
+export default class LiveRecordingWaveform extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {heights: arraySeed(0, DOWNSAMPLE_TARGET)};
+        this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
+    }
+
+    private onRecordingUpdate = (update: IRecordingUpdate) => {
+        // The waveform and the downsample target are pretty close, so we should be fine to
+        // do this, despite the docs on arrayFastResample.
+        const bars = arrayFastResample(Array.from(update.waveform), DOWNSAMPLE_TARGET);
+        this.setState({
+            // The incoming data is between zero and one, but typically even screaming into a
+            // microphone won't send you over 0.6, so we artificially adjust the gain for the
+            // waveform. This results in a slightly more cinematic/animated waveform for the
+            // user.
+            heights: bars.map(b => percentageOf(b, 0, 0.50)),
+        });
+    };
+
+    public render() {
+        return <Waveform relHeights={this.state.heights} />;
+    }
+}

src/components/views/voice_messages/Waveform.tsx

@@ -0,0 +1,45 @@
+/*
+Copyright 2021 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+
+interface IProps {
+    relHeights: number[]; // relative heights (0-1)
+}
+
+interface IState {
+}
+
+/**
+ * A simple waveform component. This renders bars (centered vertically) for each
+ * height provided in the component properties. Updating the properties will update
+ * the rendered waveform.
+ */
+@replaceableComponent("views.voice_messages.Waveform")
+export default class Waveform extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+    }
+
+    public render() {
+        return <div className='mx_Waveform'>
+            {this.props.relHeights.map((h, i) => {
+                return <span key={i} style={{height: (h * 100) + '%'}} className='mx_Waveform_bar' />;
+            })}
+        </div>;
+    }
+}

src/components/views/voip/CallView.tsx

@@ -358,6 +358,11 @@ export default class CallView extends React.Component<IProps, IState> {
         CallHandler.sharedInstance().setActiveCallRoomId(userFacingRoomId);
     }
 
+    private onTransferClick = () => {
+        const transfereeCall = CallHandler.sharedInstance().getTransfereeForCallId(this.props.call.callId);
+        this.props.call.transferToCall(transfereeCall);
+    }
+
     public render() {
         const client = MatrixClientPeg.get();
         const callRoomId = CallHandler.roomIdForCall(this.props.call);
@@ -473,25 +478,52 @@ export default class CallView extends React.Component<IProps, IState> {
         // for voice calls (fills the bg)
         let contentView: React.ReactNode;
 
+        const transfereeCall = CallHandler.sharedInstance().getTransfereeForCallId(this.props.call.callId);
         const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold;
-        let onHoldText = null;
-        if (this.state.isRemoteOnHold) {
-            const holdString = CallHandler.sharedInstance().hasAnyUnheldCall() ?
-                _td("You held the call <a>Switch</a>") : _td("You held the call <a>Resume</a>");
-            onHoldText = _t(holdString, {}, {
-                a: sub => <AccessibleButton kind="link" onClick={this.onCallResumeClick}>
-                    {sub}
-                </AccessibleButton>,
-            });
-        } else if (this.state.isLocalOnHold) {
-            onHoldText = _t("%(peerName)s held the call", {
-                peerName: this.props.call.getOpponentMember().name,
-            });
+        let holdTransferContent;
+        if (transfereeCall) {
+            const transferTargetRoom = MatrixClientPeg.get().getRoom(CallHandler.roomIdForCall(this.props.call));
+            const transferTargetName = transferTargetRoom ? transferTargetRoom.name : _t("unknown person");
+
+            const transfereeRoom = MatrixClientPeg.get().getRoom(
+                CallHandler.roomIdForCall(transfereeCall),
+            );
+            const transfereeName = transfereeRoom ? transfereeRoom.name : _t("unknown person");
+
+            holdTransferContent = <div className="mx_CallView_holdTransferContent">
+                {_t(
+                    "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>",
+                    {
+                        transferTarget: transferTargetName,
+                        transferee: transfereeName,
+                    },
+                    {
+                        a: sub => <AccessibleButton kind="link" onClick={this.onTransferClick}>{sub}</AccessibleButton>,
+                    },
+                )}
+            </div>;
+        } else if (isOnHold) {
+            let onHoldText = null;
+            if (this.state.isRemoteOnHold) {
+                const holdString = CallHandler.sharedInstance().hasAnyUnheldCall() ?
+                    _td("You held the call <a>Switch</a>") : _td("You held the call <a>Resume</a>");
+                onHoldText = _t(holdString, {}, {
+                    a: sub => <AccessibleButton kind="link" onClick={this.onCallResumeClick}>
+                        {sub}
+                    </AccessibleButton>,
+                });
+            } else if (this.state.isLocalOnHold) {
+                onHoldText = _t("%(peerName)s held the call", {
+                    peerName: this.props.call.getOpponentMember().name,
+                });
+            }
+            holdTransferContent = <div className="mx_CallView_holdTransferContent">
+                {onHoldText}
+            </div>;
         }
 
         if (this.props.call.type === CallType.Video) {
             let localVideoFeed = null;
-            let onHoldContent = null;
             let onHoldBackground = null;
             const backgroundStyle: CSSProperties = {};
             const containerClasses = classNames({
@@ -499,9 +531,6 @@ export default class CallView extends React.Component<IProps, IState> {
                 mx_CallView_video_hold: isOnHold,
             });
             if (isOnHold) {
-                onHoldContent = <div className="mx_CallView_video_holdContent">
-                    {onHoldText}
-                </div>;
                 const backgroundAvatarUrl = avatarUrlForMember(
                     // is it worth getting the size of the div to pass here?
                     this.props.call.getOpponentMember(), 1024, 1024, 'crop',
@@ -517,7 +546,7 @@ export default class CallView extends React.Component<IProps, IState> {
                 {onHoldBackground}
                 <VideoFeed type={VideoFeedType.Remote} call={this.props.call} onResize={this.props.onResize} />
                 {localVideoFeed}
-                {onHoldContent}
+                {holdTransferContent}
                 {callControls}
             </div>;
         } else {
@@ -537,7 +566,7 @@ export default class CallView extends React.Component<IProps, IState> {
                         />
                     </div>
                 </div>
-                <div className="mx_CallView_voice_holdText">{onHoldText}</div>
+                {holdTransferContent}
                 {callControls}
             </div>;
         }