Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/a11y/composer-list-autocomplete

 Conflicts:

	src/components/structures/LoggedInView.tsx

	src/components/views/rooms/BasicMessageComposer.tsx

	src/editor/autocomplete.ts

src/components/views/rooms/AppsDrawer.js

@@ -35,7 +35,9 @@ import PercentageDistributor from "../../../resizer/distributors/percentage";
 import {Container, WidgetLayoutStore} from "../../../stores/widgets/WidgetLayoutStore";
 import {clamp, percentageOf, percentageWithin} from "../../../utils/numbers";
 import {useStateCallback} from "../../../hooks/useStateCallback";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.AppsDrawer")
 export default class AppsDrawer extends React.Component {
     static propTypes = {
         userId: PropTypes.string.isRequired,
@@ -53,6 +55,8 @@ export default class AppsDrawer extends React.Component {
 
         this.state = {
             apps: this._getApps(),
+            resizingVertical: false, // true when changing the height of the apps drawer
+            resizingHorizontal: false, // true when chagning the distribution of the width between widgets
         };
 
         this._resizeContainer = null;
@@ -85,13 +89,16 @@ export default class AppsDrawer extends React.Component {
     }
 
     onIsResizing = (resizing) => {
-        this.setState({ resizing });
+        // This one is the vertical, ie. change height of apps drawer
+        this.setState({ resizingVertical: resizing });
         if (!resizing) {
             this._relaxResizer();
         }
     };
 
     _createResizer() {
+        // This is the horizontal one, changing the distribution of the width between the app tiles
+        // (ie. a vertical resize handle because, the handle itself is vertical...)
         const classNames = {
             handle: "mx_ResizeHandle",
             vertical: "mx_ResizeHandle_vertical",
@@ -100,6 +107,7 @@ export default class AppsDrawer extends React.Component {
         const collapseConfig = {
             onResizeStart: () => {
                 this._resizeContainer.classList.add("mx_AppsDrawer_resizing");
+                this.setState({ resizingHorizontal: true });
             },
             onResizeStop: () => {
                 this._resizeContainer.classList.remove("mx_AppsDrawer_resizing");
@@ -107,6 +115,7 @@ export default class AppsDrawer extends React.Component {
                     this.props.room, Container.Top,
                     this.state.apps.slice(1).map((_, i) => this.resizer.forHandleAt(i).size),
                 );
+                this.setState({ resizingHorizontal: false });
             },
         };
         // pass a truthy container for now, we won't call attach until we update it
@@ -162,6 +171,10 @@ export default class AppsDrawer extends React.Component {
         }
     };
 
+    isResizing() {
+        return this.state.resizingVertical || this.state.resizingHorizontal;
+    }
+
     onAction = (action) => {
         const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer';
         switch (action.action) {
@@ -209,6 +222,7 @@ export default class AppsDrawer extends React.Component {
                 creatorUserId={app.creatorUserId}
                 widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
                 waitForIframeLoad={app.waitForIframeLoad}
+                pointerEvents={this.isResizing() ? 'none' : undefined}
             />);
         });
 

src/components/views/rooms/Autocomplete.tsx

@@ -23,6 +23,7 @@ import {Room} from 'matrix-js-sdk/src/models/room';
 
 import SettingsStore from "../../../settings/SettingsStore";
 import Autocompleter from '../../../autocomplete/Autocompleter';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 export const generateCompletionDomId = (number) => `mx_Autocomplete_Completion_${number}`;
 
@@ -47,6 +48,7 @@ interface IState {
     forceComplete: boolean;
 }
 
+@replaceableComponent("views.rooms.Autocomplete")
 export default class Autocomplete extends React.PureComponent<IProps, IState> {
     autocompleter: Autocompleter;
     queryRequested: string;

src/components/views/rooms/AuxPanel.tsx

@@ -17,11 +17,8 @@ limitations under the License.
 import React from 'react';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import { Room } from 'matrix-js-sdk/src/models/room'
-import * as sdk from '../../../index';
 import dis from "../../../dispatcher/dispatcher";
-import * as ObjectUtils from '../../../ObjectUtils';
 import AppsDrawer from './AppsDrawer';
-import { _t } from '../../../languageHandler';
 import classNames from 'classnames';
 import RateLimitedFunc from '../../../ratelimitedfunc';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -29,6 +26,8 @@ import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import {UIFeature} from "../../../settings/UIFeature";
 import { ResizeNotifier } from "../../../utils/ResizeNotifier";
 import CallViewForRoom from '../voip/CallViewForRoom';
+import {objectHasDiff} from "../../../utils/objects";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     // js-sdk room object
@@ -36,9 +35,6 @@ interface IProps {
     userId: string,
     showApps: boolean, // Render apps
 
-    // set to true to show the file drop target
-    draggingFile: boolean,
-
     // maxHeight attribute for the aux panel and the video
     // therein
     maxHeight: number,
@@ -63,6 +59,7 @@ interface IState {
     counters: Counter[],
 }
 
+@replaceableComponent("views.rooms.AuxPanel")
 export default class AuxPanel extends React.Component<IProps, IState> {
     static defaultProps = {
         showApps: true,
@@ -89,8 +86,7 @@ export default class AuxPanel extends React.Component<IProps, IState> {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-        return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
-                !ObjectUtils.shallowEqual(this.state, nextState));
+        return objectHasDiff(this.props, nextProps) || objectHasDiff(this.state, nextState);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -150,26 +146,11 @@ export default class AuxPanel extends React.Component<IProps, IState> {
     }
 
     render() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-
-        let fileDropTarget = null;
-        if (this.props.draggingFile) {
-            fileDropTarget = (
-                <div className="mx_RoomView_fileDropTarget">
-                    <div className="mx_RoomView_fileDropTargetLabel" title={_t("Drop File Here")}>
-                        <TintableSvg src={require("../../../../res/img/upload-big.svg")} width="45" height="59" />
-                        <br />
-                        { _t("Drop file here to upload") }
-                    </div>
-                </div>
-            );
-        }
-
         const callView = (
             <CallViewForRoom
                 roomId={this.props.room.roomId}
-                onResize={this.props.onResize}
                 maxVideoHeight={this.props.maxHeight}
+                resizeNotifier={this.props.resizeNotifier}
             />
         );
 
@@ -247,7 +228,6 @@ export default class AuxPanel extends React.Component<IProps, IState> {
             <AutoHideScrollbar className={classes} style={style} >
                 { stateViews }
                 { appsDrawer }
-                { fileDropTarget }
                 { callView }
                 { this.props.children }
             </AutoHideScrollbar>

src/components/views/rooms/BasicMessageComposer.tsx

@@ -46,6 +46,8 @@ 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
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
@@ -92,6 +94,7 @@ interface IProps {
     placeholder?: string;
     label?: string;
     initialCaret?: DocumentOffset;
+    disabled?: boolean;
 
     onChange?();
     onPaste?(event: ClipboardEvent<HTMLDivElement>, model: EditorModel): boolean;
@@ -105,6 +108,7 @@ interface IState {
     completionIndex?: number;
 }
 
+@replaceableComponent("views.rooms.BasicMessageEditor")
 export default class BasicMessageEditor extends React.Component<IProps, IState> {
     private editorRef = createRef<HTMLDivElement>();
     private autocompleteRef = createRef<Autocomplete>();
@@ -137,7 +141,12 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     public componentDidUpdate(prevProps: IProps) {
-        if (this.props.placeholder !== prevProps.placeholder && this.props.placeholder) {
+        // We need to re-check the placeholder when the enabled state changes because it causes the
+        // placeholder element to remount, which gets rid of the `::before` class. Re-evaluating the
+        // placeholder means we get a proper `::before` with the placeholder.
+        const enabledChange = this.props.disabled !== prevProps.disabled;
+        const placeholderChanged = this.props.placeholder !== prevProps.placeholder;
+        if (this.props.placeholder && (placeholderChanged || enabledChange)) {
             const {isEmpty} = this.props.model;
             if (isEmpty) {
                 this.showPlaceholder();
@@ -424,106 +433,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:
-                    case Key.ENTER:
-                        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 (!this.props.model.isEmpty && !this.state.showVisualBell && 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;
@@ -546,7 +550,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();
@@ -678,6 +682,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         });
         const classes = classNames("mx_BasicMessageComposer_input", {
             "mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar,
+            "mx_BasicMessageComposer_input_disabled": this.props.disabled,
         });
 
         const shortcuts = {
@@ -716,6 +721,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 aria-owns="mx_Autocomplete"
                 aria-activedescendant={activeDescendant}
                 dir="auto"
+                aria-disabled={this.props.disabled}
             />
         </div>);
     }

src/components/views/rooms/EditMessageComposer.js

@@ -16,7 +16,7 @@ limitations under the License.
 */
 import React from 'react';
 import * as sdk from '../../../index';
-import {_t} from '../../../languageHandler';
+import {_t, _td} from '../../../languageHandler';
 import PropTypes from 'prop-types';
 import dis from '../../../dispatcher/dispatcher';
 import EditorModel from '../../../editor/model';
@@ -24,16 +24,18 @@ import {getCaretOffsetAndText} from '../../../editor/dom';
 import {htmlSerializeIfNeeded, textSerialize, containsEmote, stripEmoteCommand} from '../../../editor/serialize';
 import {findEditableEvent} from '../../../utils/EventUtils';
 import {parseEvent} from '../../../editor/deserialize';
-import {PartCreator} from '../../../editor/parts';
+import {CommandPartCreator} from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
 import classNames from 'classnames';
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import BasicMessageComposer from "./BasicMessageComposer";
-import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {CommandCategories, getCommand} from '../../../SlashCommands';
 import {Action} from "../../../dispatcher/actions";
-import SettingsStore from "../../../settings/SettingsStore";
 import CountlyAnalytics from "../../../CountlyAnalytics";
+import {getKeyBindingsManager, MessageComposerAction} from '../../../KeyBindingsManager';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Modal from '../../../Modal';
 
 function _isReply(mxEvent) {
     const relatesTo = mxEvent.getContent()["m.relates_to"];
@@ -102,6 +104,7 @@ function createEditContent(model, editedEvent) {
     }, contentBody);
 }
 
+@replaceableComponent("views.rooms.EditMessageComposer")
 export default class EditMessageComposer extends React.Component {
     static propTypes = {
         // the message event being edited
@@ -134,38 +137,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();
         }
     }
 
@@ -174,6 +180,22 @@ export default class EditMessageComposer extends React.Component {
         dis.fire(Action.FocusComposer);
     }
 
+    _isSlashCommand() {
+        const parts = this.model.parts;
+        const firstPart = parts[0];
+        if (firstPart) {
+            if (firstPart.type === "command" && firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")) {
+                return true;
+            }
+
+            if (firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")
+                && (firstPart.type === "plain" || firstPart.type === "pill-candidate")) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     _isContentModified(newContent) {
         // if nothing has changed then bail
         const oldContent = this.props.editState.getEvent().getContent();
@@ -186,19 +208,112 @@ export default class EditMessageComposer extends React.Component {
         return true;
     }
 
-    _sendEdit = () => {
+    _getSlashCommand() {
+        const commandText = this.model.parts.reduce((text, part) => {
+            // use mxid to textify user pills in a command
+            if (part.type === "user-pill") {
+                return text + part.resourceId;
+            }
+            return text + part.text;
+        }, "");
+        const {cmd, args} = getCommand(commandText);
+        return [cmd, args, commandText];
+    }
+
+    async _runSlashCommand(cmd, args, roomId) {
+        const result = cmd.run(roomId, args);
+        let messageContent;
+        let error = result.error;
+        if (result.promise) {
+            try {
+                if (cmd.category === CommandCategories.messages) {
+                    messageContent = await result.promise;
+                } else {
+                    await result.promise;
+                }
+            } catch (err) {
+                error = err;
+            }
+        }
+        if (error) {
+            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 = !!result.promise;
+            const title = isServerError ? _td("Server error") : _td("Command error");
+
+            let errText;
+            if (typeof error === 'string') {
+                errText = error;
+            } else if (error.message) {
+                errText = error.message;
+            } else {
+                errText = _t("Server unavailable, overloaded, or something else went wrong.");
+            }
+
+            Modal.createTrackedDialog(title, '', ErrorDialog, {
+                title: _t(title),
+                description: errText,
+            });
+        } else {
+            console.log("Command success.");
+            if (messageContent) return messageContent;
+        }
+    }
+
+    _sendEdit = async () => {
         const startTime = CountlyAnalytics.getTimestamp();
         const editedEvent = this.props.editState.getEvent();
         const editContent = createEditContent(this.model, editedEvent);
         const newContent = editContent["m.new_content"];
+        let shouldSend = true;
 
         // If content is modified then send an updated event into the room
         if (this._isContentModified(newContent)) {
             const roomId = editedEvent.getRoomId();
-            this._cancelPreviousPendingEdit();
-            const prom = this.context.sendMessage(roomId, editContent);
-            dis.dispatch({action: "message_sent"});
-            CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);
+            if (!containsEmote(this.model) && this._isSlashCommand()) {
+                const [cmd, args, commandText] = this._getSlashCommand();
+                if (cmd) {
+                    if (cmd.category === CommandCategories.messages) {
+                        editContent["m.new_content"] = await this._runSlashCommand(cmd, args, roomId);
+                    } else {
+                        this._runSlashCommand(cmd, args, roomId);
+                        shouldSend = false;
+                    }
+                } else {
+                    // ask the user if their unknown command should be sent as a message
+                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                    const {finished} = Modal.createTrackedDialog("Unknown command", "", QuestionDialog, {
+                        title: _t("Unknown Command"),
+                        description: <div>
+                            <p>
+                                { _t("Unrecognised command: %(commandText)s", {commandText}) }
+                            </p>
+                            <p>
+                                { _t("You can use <code>/help</code> to list available commands. " +
+                                    "Did you mean to send this as a message?", {}, {
+                                    code: t => <code>{ t }</code>,
+                                }) }
+                            </p>
+                            <p>
+                                { _t("Hint: Begin your message with <code>//</code> to start it with a slash.", {}, {
+                                    code: t => <code>{ t }</code>,
+                                }) }
+                            </p>
+                        </div>,
+                        button: _t('Send as message'),
+                    });
+                    const [sendAnyway] = await finished;
+                    // if !sendAnyway bail to let the user edit the composer and try again
+                    if (!sendAnyway) return;
+                }
+            }
+            if (shouldSend) {
+                this._cancelPreviousPendingEdit();
+                const prom = this.context.sendMessage(roomId, editContent);
+                dis.dispatch({action: "message_sent"});
+                CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);
+            }
         }
 
         // close the event editing and focus composer
@@ -236,7 +351,7 @@ export default class EditMessageComposer extends React.Component {
     _createEditorModel() {
         const {editState} = this.props;
         const room = this._getRoom();
-        const partCreator = new PartCreator(room, this.context);
+        const partCreator = new CommandPartCreator(room, this.context);
         let parts;
         if (editState.hasEditorState()) {
             // if restoring state from a previous editor,

src/components/views/rooms/EntityTile.js

@@ -23,6 +23,7 @@ import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
 import classNames from "classnames";
 import E2EIcon from './E2EIcon';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const PRESENCE_CLASS = {
     "offline": "mx_EntityTile_offline",
@@ -50,6 +51,7 @@ function presenceClassForMember(presenceState, lastActiveAgo, showPresence) {
     }
 }
 
+@replaceableComponent("views.rooms.EntityTile")
 class EntityTile extends React.Component {
     static propTypes = {
         name: PropTypes.string,
@@ -174,8 +176,11 @@ class EntityTile extends React.Component {
         // The wrapping div is required to make the magic mouse listener work, for some reason.
         return (
             <div ref={(c) => this.container = c} >
-                <AccessibleButton className={classNames(mainClassNames)} title={this.props.title}
-                                  onClick={this.props.onClick}>
+                <AccessibleButton
+                    className={classNames(mainClassNames)}
+                    title={this.props.title}
+                    onClick={this.props.onClick}
+                >
                     <div className="mx_EntityTile_avatar">
                         { av }
                         { e2eIcon }

src/components/views/rooms/EventTile.tsx

@@ -1,8 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,63 +15,89 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import ReplyThread from "../elements/ReplyThread";
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from "classnames";
-import {EventType} from "matrix-js-sdk/src/@types/event";
-import { _t, _td } from '../../../languageHandler';
+
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Relations } from "matrix-js-sdk/src/models/relations";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+
+import ReplyThread from "../elements/ReplyThread";
+import { _t } from '../../../languageHandler';
 import * as TextForEvent from "../../../TextForEvent";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
-import {Layout, LayoutPropType} from "../../../settings/Layout";
-import {EventStatus} from 'matrix-js-sdk';
+import {Layout} from "../../../settings/Layout";
 import {formatTime} from "../../../DateUtils";
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
-import * as ObjectUtils from "../../../ObjectUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {E2E_STATE} from "./E2EIcon";
 import {toRem} from "../../../utils/units";
 import {WidgetType} from "../../../widgets/WidgetType";
 import RoomAvatar from "../avatars/RoomAvatar";
 import {WIDGET_LAYOUT_EVENT_TYPE} from "../../../stores/widgets/WidgetLayoutStore";
+import {objectHasDiff} from "../../../utils/objects";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Tooltip from "../elements/Tooltip";
+import { EditorStateTransfer } from "../../../utils/EditorStateTransfer";
+import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
+import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
+import NotificationBadge from "./NotificationBadge";
 
 const eventTileTypes = {
-    'm.room.message': 'messages.MessageEvent',
-    'm.sticker': 'messages.MessageEvent',
-    'm.key.verification.cancel': 'messages.MKeyVerificationConclusion',
-    'm.key.verification.done': 'messages.MKeyVerificationConclusion',
-    'm.room.encryption': 'messages.EncryptionEvent',
-    'm.call.invite': 'messages.TextualEvent',
-    'm.call.answer': 'messages.TextualEvent',
-    'm.call.hangup': 'messages.TextualEvent',
-    'm.call.reject': 'messages.TextualEvent',
+    [EventType.RoomMessage]: 'messages.MessageEvent',
+    [EventType.Sticker]: 'messages.MessageEvent',
+    [EventType.KeyVerificationCancel]: 'messages.MKeyVerificationConclusion',
+    [EventType.KeyVerificationDone]: 'messages.MKeyVerificationConclusion',
+    [EventType.CallInvite]: 'messages.TextualEvent',
+    [EventType.CallAnswer]: 'messages.TextualEvent',
+    [EventType.CallHangup]: 'messages.TextualEvent',
+    [EventType.CallReject]: 'messages.TextualEvent',
 };
 
 const stateEventTileTypes = {
-    'm.room.encryption': 'messages.EncryptionEvent',
-    'm.room.canonical_alias': 'messages.TextualEvent',
-    'm.room.create': 'messages.RoomCreate',
-    'm.room.member': 'messages.TextualEvent',
-    'm.room.name': 'messages.TextualEvent',
-    'm.room.avatar': 'messages.RoomAvatarEvent',
-    'm.room.third_party_invite': 'messages.TextualEvent',
-    'm.room.history_visibility': 'messages.TextualEvent',
-    'm.room.topic': 'messages.TextualEvent',
-    'm.room.power_levels': 'messages.TextualEvent',
-    'm.room.pinned_events': 'messages.TextualEvent',
-    'm.room.server_acl': 'messages.TextualEvent',
+    [EventType.RoomEncryption]: 'messages.EncryptionEvent',
+    [EventType.RoomCanonicalAlias]: 'messages.TextualEvent',
+    [EventType.RoomCreate]: 'messages.RoomCreate',
+    [EventType.RoomMember]: 'messages.TextualEvent',
+    [EventType.RoomName]: 'messages.TextualEvent',
+    [EventType.RoomAvatar]: 'messages.RoomAvatarEvent',
+    [EventType.RoomThirdPartyInvite]: 'messages.TextualEvent',
+    [EventType.RoomHistoryVisibility]: 'messages.TextualEvent',
+    [EventType.RoomTopic]: 'messages.TextualEvent',
+    [EventType.RoomPowerLevels]: 'messages.TextualEvent',
+    [EventType.RoomPinnedEvents]: 'messages.TextualEvent',
+    [EventType.RoomServerAcl]: 'messages.TextualEvent',
     // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
     'im.vector.modular.widgets': 'messages.TextualEvent',
     [WIDGET_LAYOUT_EVENT_TYPE]: 'messages.TextualEvent',
-    'm.room.tombstone': 'messages.TextualEvent',
-    'm.room.join_rules': 'messages.TextualEvent',
-    'm.room.guest_access': 'messages.TextualEvent',
-    'm.room.related_groups': 'messages.TextualEvent',
+    [EventType.RoomTombstone]: 'messages.TextualEvent',
+    [EventType.RoomJoinRules]: 'messages.TextualEvent',
+    [EventType.RoomGuestAccess]: 'messages.TextualEvent',
+    'm.room.related_groups': 'messages.TextualEvent', // legacy communities flair
 };
 
+const stateEventSingular = new Set([
+    EventType.RoomEncryption,
+    EventType.RoomCanonicalAlias,
+    EventType.RoomCreate,
+    EventType.RoomName,
+    EventType.RoomAvatar,
+    EventType.RoomHistoryVisibility,
+    EventType.RoomTopic,
+    EventType.RoomPowerLevels,
+    EventType.RoomPinnedEvents,
+    EventType.RoomServerAcl,
+    WIDGET_LAYOUT_EVENT_TYPE,
+    EventType.RoomTombstone,
+    EventType.RoomJoinRules,
+    EventType.RoomGuestAccess,
+    'm.room.related_groups',
+]);
+
 // Add all the Mjolnir stuff to the renderer
 for (const evType of ALL_RULE_TYPES) {
     stateEventTileTypes[evType] = 'messages.TextualEvent';
@@ -130,7 +154,12 @@ export function getHandlerTile(ev) {
         }
     }
 
-    return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type];
+    if (ev.isState()) {
+        if (stateEventSingular.has(type) && ev.getStateKey() !== "") return undefined;
+        return stateEventTileTypes[type];
+    }
+
+    return eventTileTypes[type];
 }
 
 const MAX_READ_AVATARS = 5;
@@ -146,94 +175,130 @@ const MAX_READ_AVATARS = 5;
 // |    '--------------------------------------'              |
 // '----------------------------------------------------------'
 
-export default class EventTile extends React.Component {
-    static propTypes = {
-        /* the MatrixEvent to show */
-        mxEvent: PropTypes.object.isRequired,
+interface IReadReceiptProps {
+    userId: string;
+    roomMember: RoomMember;
+    ts: number;
+}
 
-        /* true if mxEvent is redacted. This is a prop because using mxEvent.isRedacted()
-         * might not be enough when deciding shouldComponentUpdate - prevProps.mxEvent
-         * references the same this.props.mxEvent.
-         */
-        isRedacted: PropTypes.bool,
+interface IProps {
+    // the MatrixEvent to show
+    mxEvent: MatrixEvent;
 
-        /* true if this is a continuation of the previous event (which has the
-         * effect of not showing another avatar/displayname
-         */
-        continuation: PropTypes.bool,
+    // true if mxEvent is redacted. This is a prop because using mxEvent.isRedacted()
+    // might not be enough when deciding shouldComponentUpdate - prevProps.mxEvent
+    // references the same this.props.mxEvent.
+    isRedacted?: boolean;
 
-        /* true if this is the last event in the timeline (which has the effect
-         * of always showing the timestamp)
-         */
-        last: PropTypes.bool,
+    // true if this is a continuation of the previous event (which has the
+    // effect of not showing another avatar/displayname
+    continuation?: boolean;
 
-        // true if the event is the last event in a section (adds a css class for
-        // targeting)
-        lastInSection: PropTypes.bool,
+    // true if this is the last event in the timeline (which has the effect
+    // of always showing the timestamp)
+    last?: boolean;
 
-        /* true if this is search context (which has the effect of greying out
-         * the text
-         */
-        contextual: PropTypes.bool,
+    // true if the event is the last event in a section (adds a css class for
+    // targeting)
+    lastInSection?: boolean;
 
-        /* a list of words to highlight, ordered by longest first */
-        highlights: PropTypes.array,
+    // True if the event is the last successful (sent) event.
+    lastSuccessful?: boolean;
 
-        /* link URL for the highlights */
-        highlightLink: PropTypes.string,
+    // true if this is search context (which has the effect of greying out
+    // the text
+    contextual?: boolean;
 
-        /* should show URL previews for this event */
-        showUrlPreview: PropTypes.bool,
+    // a list of words to highlight, ordered by longest first
+    highlights?: string[];
 
-        /* is this the focused event */
-        isSelectedEvent: PropTypes.bool,
+    // link URL for the highlights
+    highlightLink?: string;
 
-        /* callback called when dynamic content in events are loaded */
-        onHeightChanged: PropTypes.func,
+    // should show URL previews for this event
+    showUrlPreview?: boolean;
 
-        /* a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'. */
-        readReceipts: PropTypes.arrayOf(PropTypes.object),
+    // is this the focused event
+    isSelectedEvent?: boolean;
 
-        /* opaque readreceipt info for each userId; used by ReadReceiptMarker
-         * to manage its animations. Should be an empty object when the room
-         * first loads
-         */
-        readReceiptMap: PropTypes.object,
+    // callback called when dynamic content in events are loaded
+    onHeightChanged?: () => void;
 
-        /* A function which is used to check if the parent panel is being
-         * unmounted, to avoid unnecessary work. Should return true if we
-         * are being unmounted.
-         */
-        checkUnmounting: PropTypes.func,
+    // a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'.
+    readReceipts?: IReadReceiptProps[];
 
-        /* the status of this event - ie, mxEvent.status. Denormalised to here so
-         * that we can tell when it changes. */
-        eventSendStatus: PropTypes.string,
+    // opaque readreceipt info for each userId; used by ReadReceiptMarker
+    // to manage its animations. Should be an empty object when the room
+    // first loads
+    readReceiptMap?: any;
 
-        /* the shape of the tile. by default, the layout is intended for the
-         * normal room timeline.  alternative values are: "file_list", "file_grid"
-         * and "notif".  This could be done by CSS, but it'd be horribly inefficient.
-         * It could also be done by subclassing EventTile, but that'd be quite
-         * boiilerplatey.  So just make the necessary render decisions conditional
-         * for now.
-         */
-        tileShape: PropTypes.string,
+    // A function which is used to check if the parent panel is being
+    // unmounted, to avoid unnecessary work. Should return true if we
+    // are being unmounted.
+    checkUnmounting?: () => boolean;
 
-        // show twelve hour timestamps
-        isTwelveHour: PropTypes.bool,
+    // the status of this event - ie, mxEvent.status. Denormalised to here so
+    // that we can tell when it changes.
+    eventSendStatus?: string;
 
-        // helper function to access relations for this event
-        getRelationsForEvent: PropTypes.func,
+    // the shape of the tile. by default, the layout is intended for the
+    // normal room timeline.  alternative values are: "file_list", "file_grid"
+    // and "notif".  This could be done by CSS, but it'd be horribly inefficient.
+    // It could also be done by subclassing EventTile, but that'd be quite
+    // boiilerplatey.  So just make the necessary render decisions conditional
+    // for now.
+    tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview';
 
-        // whether to show reactions for this event
-        showReactions: PropTypes.bool,
+    // show twelve hour timestamps
+    isTwelveHour?: boolean;
 
-        // which layout to use
-        layout: LayoutPropType,
+    // helper function to access relations for this event
+    getRelationsForEvent?: (eventId: string, relationType: string, eventType: string) => Relations;
 
-        // whether or not to show flair at all
-        enableFlair: PropTypes.bool,
-    };
+    // whether to show reactions for this event
+    showReactions?: boolean;
+
+    // which layout to use
+    layout: Layout;
+
+    // whether or not to show flair at all
+    enableFlair?: boolean;
+
+    // whether or not to show read receipts
+    showReadReceipts?: boolean;
+
+    // Used while editing, to pass the event, and to preserve editor state
+    // from one editor instance to another when remounting the editor
+    // upon receiving the remote echo for an unsent event.
+    editState?: EditorStateTransfer;
+
+    // Event ID of the event replacing the content of this event, if any
+    replacingEventId?: string;
+
+    // Helper to build permalinks for the room
+    permalinkCreator?: RoomPermalinkCreator;
+}
+
+interface IState {
+    // Whether the action bar is focused.
+    actionBarFocused: boolean;
+    // Whether all read receipts are being displayed. If not, only display
+    // a truncation of them.
+    allReadAvatars: boolean;
+    // Whether the event's sender has been verified.
+    verified: string;
+    // Whether onRequestKeysClick has been called since mounting.
+    previouslyRequestedKeys: boolean;
+    // The Relations model from the JS SDK for reactions to `mxEvent`
+    reactions: Relations;
+}
+
+@replaceableComponent("views.rooms.EventTile")
+export default class EventTile extends React.Component<IProps, IState> {
+    private suppressReadReceiptAnimation: boolean;
+    private isListeningForReceipts: boolean;
+    private tile = React.createRef();
+    private replyThread = React.createRef();
 
     static defaultProps = {
         // no-op function because onHeightChanged is optional yet some sub-components assume its existence
@@ -260,26 +325,102 @@ export default class EventTile extends React.Component {
         };
 
         // don't do RR animations until we are mounted
-        this._suppressReadReceiptAnimation = true;
+        this.suppressReadReceiptAnimation = true;
 
-        this._tile = createRef();
-        this._replyThread = createRef();
+        // Throughout the component we manage a read receipt listener to see if our tile still
+        // qualifies for a "sent" or "sending" state (based on their relevant conditions). We
+        // don't want to over-subscribe to the read receipt events being fired, so we use a flag
+        // to determine if we've already subscribed and use a combination of other flags to find
+        // out if we should even be subscribed at all.
+        this.isListeningForReceipts = false;
+    }
+
+    /**
+     * When true, the tile qualifies for some sort of special read receipt. This could be a 'sending'
+     * or 'sent' receipt, for example.
+     * @returns {boolean}
+     */
+    private get isEligibleForSpecialReceipt() {
+        // First, if there are other read receipts then just short-circuit this.
+        if (this.props.readReceipts && this.props.readReceipts.length > 0) return false;
+        if (!this.props.mxEvent) return false;
+
+        // Sanity check (should never happen, but we shouldn't explode if it does)
+        const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+        if (!room) return false;
+
+        // Quickly check to see if the event was sent by us. If it wasn't, it won't qualify for
+        // special read receipts.
+        const myUserId = MatrixClientPeg.get().getUserId();
+        if (this.props.mxEvent.getSender() !== myUserId) return false;
+
+        // Finally, determine if the type is relevant to the user. This notably excludes state
+        // events and pretty much anything that can't be sent by the composer as a message. For
+        // those we rely on local echo giving the impression of things changing, and expect them
+        // to be quick.
+        const simpleSendableEvents = [
+            EventType.Sticker,
+            EventType.RoomMessage,
+            EventType.RoomMessageEncrypted,
+        ];
+        if (!simpleSendableEvents.includes(this.props.mxEvent.getType())) return false;
+
+        // Default case
+        return true;
+    }
+
+    private get shouldShowSentReceipt() {
+        // If we're not even eligible, don't show the receipt.
+        if (!this.isEligibleForSpecialReceipt) return false;
+
+        // We only show the 'sent' receipt on the last successful event.
+        if (!this.props.lastSuccessful) return false;
+
+        // Check to make sure the sending state is appropriate. A null/undefined send status means
+        // that the message is 'sent', so we're just double checking that it's explicitly not sent.
+        if (this.props.eventSendStatus && this.props.eventSendStatus !== 'sent') return false;
+
+        // If anyone has read the event besides us, we don't want to show a sent receipt.
+        const receipts = this.props.readReceipts || [];
+        const myUserId = MatrixClientPeg.get().getUserId();
+        if (receipts.some(r => r.userId !== myUserId)) return false;
+
+        // Finally, we should show a receipt.
+        return true;
+    }
+
+    private get shouldShowSendingReceipt() {
+        // If we're not even eligible, don't show the receipt.
+        if (!this.isEligibleForSpecialReceipt) return false;
+
+        // Check the event send status to see if we are pending. Null/undefined status means the
+        // message was sent, so check for that and 'sent' explicitly.
+        if (!this.props.eventSendStatus || this.props.eventSendStatus === 'sent') return false;
+
+        // Default to showing - there's no other event properties/behaviours we care about at
+        // this point.
+        return true;
     }
 
     // TODO: [REACT-WARNING] Move into constructor
     // eslint-disable-next-line camelcase
     UNSAFE_componentWillMount() {
-        this._verifyEvent(this.props.mxEvent);
+        this.verifyEvent(this.props.mxEvent);
     }
 
     componentDidMount() {
-        this._suppressReadReceiptAnimation = false;
+        this.suppressReadReceiptAnimation = false;
         const client = this.context;
         client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
         client.on("userTrustStatusChanged", this.onUserVerificationChanged);
-        this.props.mxEvent.on("Event.decrypted", this._onDecrypted);
+        this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
         if (this.props.showReactions) {
-            this.props.mxEvent.on("Event.relationsCreated", this._onReactionsCreated);
+            this.props.mxEvent.on("Event.relationsCreated", this.onReactionsCreated);
+        }
+
+        if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
+            client.on("Room.receipt", this.onRoomReceipt);
+            this.isListeningForReceipts = true;
         }
     }
 
@@ -289,51 +430,81 @@ export default class EventTile extends React.Component {
         // re-check the sender verification as outgoing events progress through
         // the send process.
         if (nextProps.eventSendStatus !== this.props.eventSendStatus) {
-            this._verifyEvent(nextProps.mxEvent);
+            this.verifyEvent(nextProps.mxEvent);
         }
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-        if (!ObjectUtils.shallowEqual(this.state, nextState)) {
+        if (objectHasDiff(this.state, nextState)) {
             return true;
         }
 
-        return !this._propsEqual(this.props, nextProps);
+        return !this.propsEqual(this.props, nextProps);
     }
 
     componentWillUnmount() {
         const client = this.context;
         client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
         client.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
-        this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted);
+        client.removeListener("Room.receipt", this.onRoomReceipt);
+        this.isListeningForReceipts = false;
+        this.props.mxEvent.removeListener("Event.decrypted", this.onDecrypted);
         if (this.props.showReactions) {
-            this.props.mxEvent.removeListener("Event.relationsCreated", this._onReactionsCreated);
+            this.props.mxEvent.removeListener("Event.relationsCreated", this.onReactionsCreated);
         }
     }
 
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        // If we're not listening for receipts and expect to be, register a listener.
+        if (!this.isListeningForReceipts && (this.shouldShowSentReceipt || this.shouldShowSendingReceipt)) {
+            this.context.on("Room.receipt", this.onRoomReceipt);
+            this.isListeningForReceipts = true;
+        }
+    }
+
+    private onRoomReceipt = (ev, room) => {
+        // ignore events for other rooms
+        const tileRoom = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        if (room !== tileRoom) return;
+
+        if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt && !this.isListeningForReceipts) {
+            return;
+        }
+
+        // We force update because we have no state or prop changes to queue up, instead relying on
+        // the getters we use here to determine what needs rendering.
+        this.forceUpdate(() => {
+            // Per elsewhere in this file, we can remove the listener once we will have no further purpose for it.
+            if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt) {
+                this.context.removeListener("Room.receipt", this.onRoomReceipt);
+                this.isListeningForReceipts = false;
+            }
+        });
+    };
+
     /** called when the event is decrypted after we show it.
      */
-    _onDecrypted = () => {
+    private onDecrypted = () => {
         // we need to re-verify the sending device.
-        // (we call onHeightChanged in _verifyEvent to handle the case where decryption
+        // (we call onHeightChanged in verifyEvent to handle the case where decryption
         // has caused a change in size of the event tile)
-        this._verifyEvent(this.props.mxEvent);
+        this.verifyEvent(this.props.mxEvent);
         this.forceUpdate();
     };
 
-    onDeviceVerificationChanged = (userId, device) => {
+    private onDeviceVerificationChanged = (userId, device) => {
         if (userId === this.props.mxEvent.getSender()) {
-            this._verifyEvent(this.props.mxEvent);
+            this.verifyEvent(this.props.mxEvent);
         }
     };
 
-    onUserVerificationChanged = (userId, _trustStatus) => {
+    private onUserVerificationChanged = (userId, _trustStatus) => {
         if (userId === this.props.mxEvent.getSender()) {
-            this._verifyEvent(this.props.mxEvent);
+            this.verifyEvent(this.props.mxEvent);
         }
     };
 
-    async _verifyEvent(mxEvent) {
+    private async verifyEvent(mxEvent) {
         if (!mxEvent.isEncrypted()) {
             return;
         }
@@ -387,7 +558,7 @@ export default class EventTile extends React.Component {
         }, this.props.onHeightChanged); // Decryption may have caused a change in size
     }
 
-    _propsEqual(objA, objB) {
+    private propsEqual(objA, objB) {
         const keysA = Object.keys(objA);
         const keysB = Object.keys(objB);
 
@@ -454,6 +625,10 @@ export default class EventTile extends React.Component {
     };
 
     getReadAvatars() {
+        if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
+            return <SentReceipt messageState={this.props.mxEvent.getAssociatedStatus()} />;
+        }
+
         // return early if there are no read receipts
         if (!this.props.readReceipts || this.props.readReceipts.length === 0) {
             return (<span className="mx_EventTile_readAvatars" />);
@@ -497,7 +672,7 @@ export default class EventTile extends React.Component {
                     leftOffset={left} hidden={hidden}
                     readReceiptInfo={readReceiptInfo}
                     checkUnmounting={this.props.checkUnmounting}
-                    suppressAnimation={this._suppressReadReceiptAnimation}
+                    suppressAnimation={this.suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
                     timestamp={receipt.ts}
                     showTwelveHour={this.props.isTwelveHour}
@@ -554,7 +729,7 @@ export default class EventTile extends React.Component {
         });
     };
 
-    _renderE2EPadlock() {
+    private renderE2EPadlock() {
         const ev = this.props.mxEvent;
 
         // event could not be decrypted
@@ -603,9 +778,9 @@ export default class EventTile extends React.Component {
         });
     };
 
-    getTile = () => this._tile.current;
+    getTile = () => this.tile.current;
 
-    getReplyThread = () => this._replyThread.current;
+    getReplyThread = () => this.replyThread.current;
 
     getReactions = () => {
         if (
@@ -625,11 +800,11 @@ export default class EventTile extends React.Component {
         return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
     };
 
-    _onReactionsCreated = (relationType, eventType) => {
+    private onReactionsCreated = (relationType, eventType) => {
         if (relationType !== "m.annotation" || eventType !== "m.reaction") {
             return;
         }
-        this.props.mxEvent.removeListener("Event.relationsCreated", this._onReactionsCreated);
+        this.props.mxEvent.removeListener("Event.relationsCreated", this.onReactionsCreated);
         this.setState({
             reactions: this.getReactions(),
         });
@@ -692,9 +867,8 @@ export default class EventTile extends React.Component {
             mx_EventTile_isEditing: isEditing,
             mx_EventTile_info: isInfoMessage,
             mx_EventTile_12hr: this.props.isTwelveHour,
-            mx_EventTile_encrypting: this.props.eventSendStatus === 'encrypting',
+            // Note: we keep the `sending` state class for tests, not for our styles
             mx_EventTile_sending: !isEditing && isSending,
-            mx_EventTile_notSent: this.props.eventSendStatus === 'not_sent',
             mx_EventTile_highlight: this.props.tileShape === 'notif' ? false : this.shouldHighlight(),
             mx_EventTile_selected: this.props.isSelectedEvent,
             mx_EventTile_continuation: this.props.tileShape ? '' : this.props.continuation,
@@ -717,8 +891,6 @@ export default class EventTile extends React.Component {
             permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
         }
 
-        const readAvatars = this.getReadAvatars();
-
         let avatar;
         let sender;
         let avatarSize;
@@ -753,7 +925,7 @@ export default class EventTile extends React.Component {
             // so that the correct avatar is shown as the text is
             // `$target accepted the invitation for $email`
             if (this.props.mxEvent.getContent().third_party_invite) {
-               member = this.props.mxEvent.target;
+                member = this.props.mxEvent.target;
             } else {
                 member = this.props.mxEvent.sender;
             }
@@ -768,15 +940,11 @@ export default class EventTile extends React.Component {
         }
 
         if (needsSenderProfile) {
-            let text = null;
             if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') {
-                if (msgtype === 'm.image') text = _td('%(senderName)s sent an image');
-                else if (msgtype === 'm.video') text = _td('%(senderName)s sent a video');
-                else if (msgtype === 'm.file') text = _td('%(senderName)s uploaded a file');
                 sender = <SenderProfile onClick={this.onSenderProfileClick}
-                                        mxEvent={this.props.mxEvent}
-                                        enableFlair={this.props.enableFlair && !text}
-                                        text={text} />;
+                    mxEvent={this.props.mxEvent}
+                    enableFlair={this.props.enableFlair}
+                />;
             } else {
                 sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={this.props.enableFlair} />;
             }
@@ -821,7 +989,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 }
@@ -839,18 +1007,28 @@ export default class EventTile extends React.Component {
         }
 
         const linkedTimestamp = <a
-                href={permalink}
-                onClick={this.onPermalinkClicked}
-                aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
-            >
-                { timestamp }
-            </a>;
+            href={permalink}
+            onClick={this.onPermalinkClicked}
+            aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+        >
+            { timestamp }
+        </a>;
 
         const useIRCLayout = this.props.layout == Layout.IRC;
         const groupTimestamp = !useIRCLayout ? linkedTimestamp : null;
         const ircTimestamp = useIRCLayout ? linkedTimestamp : null;
-        const groupPadlock = !useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
-        const ircPadlock = useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
+        const groupPadlock = !useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
+        const ircPadlock = useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
+
+        let msgOption;
+        if (this.props.showReadReceipts) {
+            const readAvatars = this.getReadAvatars();
+            msgOption = (
+                <div className="mx_EventTile_msgOption">
+                    { readAvatars }
+                </div>
+            );
+        }
 
         switch (this.props.tileShape) {
             case 'notif': {
@@ -871,12 +1049,13 @@ export default class EventTile extends React.Component {
                             </a>
                         </div>
                         <div className="mx_EventTile_line">
-                            <EventTileType ref={this._tile}
-                                           mxEvent={this.props.mxEvent}
-                                           highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
-                                           showUrlPreview={this.props.showUrlPreview}
-                                           onHeightChanged={this.props.onHeightChanged} />
+                            <EventTileType ref={this.tile}
+                                mxEvent={this.props.mxEvent}
+                                highlights={this.props.highlights}
+                                highlightLink={this.props.highlightLink}
+                                showUrlPreview={this.props.showUrlPreview}
+                                onHeightChanged={this.props.onHeightChanged}
+                            />
                         </div>
                     </div>
                 );
@@ -885,13 +1064,14 @@ export default class EventTile extends React.Component {
                 return (
                     <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         <div className="mx_EventTile_line">
-                            <EventTileType ref={this._tile}
-                                           mxEvent={this.props.mxEvent}
-                                           highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
-                                           showUrlPreview={this.props.showUrlPreview}
-                                           tileShape={this.props.tileShape}
-                                           onHeightChanged={this.props.onHeightChanged} />
+                            <EventTileType ref={this.tile}
+                                mxEvent={this.props.mxEvent}
+                                highlights={this.props.highlights}
+                                highlightLink={this.props.highlightLink}
+                                showUrlPreview={this.props.showUrlPreview}
+                                tileShape={this.props.tileShape}
+                                onHeightChanged={this.props.onHeightChanged}
+                            />
                         </div>
                         <a
                             className="mx_EventTile_senderDetailsLink"
@@ -915,7 +1095,7 @@ export default class EventTile extends React.Component {
                         this.props.mxEvent,
                         this.props.onHeightChanged,
                         this.props.permalinkCreator,
-                        this._replyThread,
+                        this.replyThread,
                     );
                 }
                 return (
@@ -928,13 +1108,14 @@ export default class EventTile extends React.Component {
                             { groupTimestamp }
                             { groupPadlock }
                             { thread }
-                            <EventTileType ref={this._tile}
-                                           mxEvent={this.props.mxEvent}
-                                           highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
-                                           onHeightChanged={this.props.onHeightChanged}
-                                           replacingEventId={this.props.replacingEventId}
-                                           showUrlPreview={false} />
+                            <EventTileType ref={this.tile}
+                                mxEvent={this.props.mxEvent}
+                                highlights={this.props.highlights}
+                                highlightLink={this.props.highlightLink}
+                                onHeightChanged={this.props.onHeightChanged}
+                                replacingEventId={this.props.replacingEventId}
+                                showUrlPreview={false}
+                            />
                         </div>
                     </div>
                 );
@@ -944,7 +1125,7 @@ export default class EventTile extends React.Component {
                     this.props.mxEvent,
                     this.props.onHeightChanged,
                     this.props.permalinkCreator,
-                    this._replyThread,
+                    this.replyThread,
                     this.props.layout,
                 );
 
@@ -952,27 +1133,27 @@ export default class EventTile extends React.Component {
                 return (
                     <div className={classes} tabIndex={-1} aria-live={ariaLive} aria-atomic="true">
                         { ircTimestamp }
-                        <div className="mx_EventTile_msgOption">
-                            { readAvatars }
-                        </div>
                         { sender }
                         { ircPadlock }
                         <div className="mx_EventTile_line">
                             { groupTimestamp }
                             { groupPadlock }
                             { thread }
-                            <EventTileType ref={this._tile}
-                                           mxEvent={this.props.mxEvent}
-                                           replacingEventId={this.props.replacingEventId}
-                                           editState={this.props.editState}
-                                           highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
-                                           showUrlPreview={this.props.showUrlPreview}
-                                           onHeightChanged={this.props.onHeightChanged} />
+                            <EventTileType ref={this.tile}
+                                mxEvent={this.props.mxEvent}
+                                replacingEventId={this.props.replacingEventId}
+                                editState={this.props.editState}
+                                highlights={this.props.highlights}
+                                highlightLink={this.props.highlightLink}
+                                showUrlPreview={this.props.showUrlPreview}
+                                permalinkCreator={this.props.permalinkCreator}
+                                onHeightChanged={this.props.onHeightChanged}
+                            />
                             { keyRequestInfo }
                             { reactionsRow }
                             { actionBar }
                         </div>
+                        {msgOption}
                         {
                             // The avatar goes after the event tile as it's absolutely positioned to be over the
                             // event tile line, so needs to be later in the DOM so it appears on top (this avoids
@@ -1036,18 +1217,26 @@ function E2ePadlockUnknown(props) {
 
 function E2ePadlockUnauthenticated(props) {
     return (
-        <E2ePadlock title={_t("The authenticity of this encrypted message can't be guaranteed on this device.")} icon="unauthenticated" {...props} />
+        <E2ePadlock
+            title={_t("The authenticity of this encrypted message can't be guaranteed on this device.")}
+            icon="unauthenticated"
+            {...props}
+        />
     );
 }
 
-class E2ePadlock extends React.Component {
-    static propTypes = {
-        icon: PropTypes.string.isRequired,
-        title: PropTypes.string.isRequired,
-    };
+interface IE2ePadlockProps {
+    icon: string;
+    title: string;
+}
 
-    constructor() {
-        super();
+interface IE2ePadlockState {
+    hover: boolean;
+}
+
+class E2ePadlock extends React.Component<IE2ePadlockProps, IE2ePadlockState> {
+    constructor(props) {
+        super(props);
 
         this.state = {
             hover: false,
@@ -1065,18 +1254,80 @@ class E2ePadlock extends React.Component {
     render() {
         let tooltip = null;
         if (this.state.hover) {
-            const Tooltip = sdk.getComponent("elements.Tooltip");
-            tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} dir="auto" />;
+            tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} />;
         }
 
         const classes = `mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${this.props.icon}`;
         return (
             <div
                 className={classes}
-                onClick={this.onClick}
                 onMouseEnter={this.onHoverStart}
                 onMouseLeave={this.onHoverEnd}
             >{tooltip}</div>
         );
     }
 }
+
+interface ISentReceiptProps {
+    messageState: string; // TODO: Types for message sending state
+}
+
+interface ISentReceiptState {
+    hover: boolean;
+}
+
+class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptState> {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    onHoverStart = () => {
+        this.setState({hover: true});
+    };
+
+    onHoverEnd = () => {
+        this.setState({hover: false});
+    };
+
+    render() {
+        const isSent = !this.props.messageState || this.props.messageState === 'sent';
+        const isFailed = this.props.messageState === 'not_sent';
+        const receiptClasses = classNames({
+            'mx_EventTile_receiptSent': isSent,
+            'mx_EventTile_receiptSending': !isSent && !isFailed,
+        });
+
+        let nonCssBadge = null;
+        if (isFailed) {
+            nonCssBadge = <NotificationBadge
+                notification={StaticNotificationState.RED_EXCLAMATION}
+            />;
+        }
+
+        let tooltip = null;
+        if (this.state.hover) {
+            let label = _t("Sending your message...");
+            if (this.props.messageState === 'encrypting') {
+                label = _t("Encrypting your message...");
+            } else if (isSent) {
+                label = _t("Your message was sent");
+            } else if (isFailed) {
+                label = _t("Failed to send");
+            }
+            // The yOffset is somewhat arbitrary - it just brings the tooltip down to be more associated
+            // with the read receipt.
+            tooltip = <Tooltip className="mx_EventTile_readAvatars_receiptTooltip" label={label} yOffset={20} />;
+        }
+
+        return <span className="mx_EventTile_readAvatars">
+            <span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
+                {nonCssBadge}
+                {tooltip}
+            </span>
+        </span>;
+    }
+}

src/components/views/rooms/ExtraTile.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,7 +28,7 @@ interface IProps {
     isSelected: boolean;
     displayName: string;
     avatar: React.ReactElement;
-    notificationState: NotificationState;
+    notificationState?: NotificationState;
     onClick: () => void;
 }
 
@@ -36,8 +36,7 @@ interface IState {
     hover: boolean;
 }
 
-// TODO: Remove with community invites in the room list: https://github.com/vector-im/element-web/issues/14456
-export default class TemporaryTile extends React.Component<IProps, IState> {
+export default class ExtraTile extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
 
@@ -57,18 +56,21 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
     public render(): React.ReactElement {
         // XXX: We copy classes because it's easier
         const classes = classNames({
+            'mx_ExtraTile': true,
             'mx_RoomTile': true,
-            'mx_TemporaryTile': true,
             'mx_RoomTile_selected': this.props.isSelected,
             'mx_RoomTile_minimized': this.props.isMinimized,
         });
 
-        const badge = (
-            <NotificationBadge
-                notification={this.props.notificationState}
-                forceCount={false}
-            />
-        );
+        let badge;
+        if (this.props.notificationState) {
+            badge = (
+                <NotificationBadge
+                    notification={this.props.notificationState}
+                    forceCount={false}
+                />
+            );
+        }
 
         let name = this.props.displayName;
         if (typeof name !== 'string') name = '';
@@ -76,7 +78,7 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
 
         const nameClasses = classNames({
             "mx_RoomTile_name": true,
-            "mx_RoomTile_nameHasUnreadEvents": this.props.notificationState.isUnread,
+            "mx_RoomTile_nameHasUnreadEvents": this.props.notificationState?.isUnread,
         });
 
         let nameContainer = (

src/components/views/rooms/ForwardMessage.js

@@ -19,8 +19,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import {Key} from '../../../Keyboard';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-
+@replaceableComponent("views.rooms.ForwardMessage")
 export default class ForwardMessage extends React.Component {
     static propTypes = {
         onCancelClick: PropTypes.func.isRequired,

src/components/views/rooms/LinkPreviewWidget.js

@@ -25,7 +25,10 @@ import * as sdk from "../../../index";
 import Modal from "../../../Modal";
 import * as ImageUtils from "../../../ImageUtils";
 import { _t } from "../../../languageHandler";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
 
+@replaceableComponent("views.rooms.LinkPreviewWidget")
 export default class LinkPreviewWidget extends React.Component {
     static propTypes = {
         link: PropTypes.string.isRequired, // the URL being previewed
@@ -81,7 +84,7 @@ export default class LinkPreviewWidget extends React.Component {
 
         let src = p["og:image"];
         if (src && src.startsWith("mxc://")) {
-            src = MatrixClientPeg.get().mxcUrlToHttp(src);
+            src = mediaFromMxc(src).srcHttp;
         }
 
         const params = {
@@ -93,7 +96,7 @@ export default class LinkPreviewWidget extends React.Component {
             link: this.props.link,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
     render() {
@@ -107,9 +110,11 @@ export default class LinkPreviewWidget extends React.Component {
         if (!SettingsStore.getValue("showImages")) {
             image = null; // Don't render a button to show the image, just hide it outright
         }
-        const imageMaxWidth = 320; const imageMaxHeight = 240;
+        const imageMaxWidth = 100;
+        const imageMaxHeight = 100;
         if (image && image.startsWith("mxc://")) {
-            image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight);
+            // We deliberately don't want a square here, so use the source HTTP thumbnail function
+            image = mediaFromMxc(image).getThumbnailOfSourceHttp(imageMaxWidth, imageMaxHeight, 'scale');
         }
 
         let thumbHeight = imageMaxHeight;
@@ -123,8 +128,8 @@ export default class LinkPreviewWidget extends React.Component {
         let img;
         if (image) {
             img = <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
-                    <img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={image} onClick={this.onImageClick} />
-                  </div>;
+                <img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={image} onClick={this.onImageClick} />
+            </div>;
         }
 
         // The description includes &-encoded HTML entities, we decode those as React treats the thing as an
@@ -134,10 +139,6 @@ export default class LinkPreviewWidget extends React.Component {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <div className="mx_LinkPreviewWidget">
-                <AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>
-                    <img className="mx_filterFlipColor" alt="" role="presentation"
-                        src={require("../../../../res/img/cancel.svg")} width="18" height="18" />
-                </AccessibleButton>
                 { img }
                 <div className="mx_LinkPreviewWidget_caption">
                     <div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a></div>
@@ -146,6 +147,10 @@ export default class LinkPreviewWidget extends React.Component {
                         { description }
                     </div>
                 </div>
+                <AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>
+                    <img className="mx_filterFlipColor" alt="" role="presentation"
+                        src={require("../../../../res/img/cancel.svg")} width="18" height="18" />
+                </AccessibleButton>
             </div>
         );
     }

src/components/views/rooms/MemberList.js

@@ -27,6 +27,10 @@ import * as sdk from "../../../index";
 import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
 import BaseCard from "../right_panel/BaseCard";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import RoomAvatar from "../avatars/RoomAvatar";
+import RoomName from "../elements/RoomName";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SettingsStore from "../../../settings/SettingsStore";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -36,6 +40,7 @@ const SHOW_MORE_INCREMENT = 100;
 // matches all ASCII punctuation: !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~
 const SORT_REGEX = /[\x21-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]+/g;
 
+@replaceableComponent("views.rooms.MemberList")
 export default class MemberList extends React.Component {
     constructor(props) {
         super(props);
@@ -450,22 +455,14 @@ export default class MemberList extends React.Component {
         let inviteButton;
 
         if (room && room.getMyMembership() === 'join') {
-            // assume we can invite until proven false
-            let canInvite = true;
-
-            const plEvent = room.currentState.getStateEvents("m.room.power_levels", "");
-            const me = room.getMember(cli.getUserId());
-            if (plEvent && me) {
-                const content = plEvent.getContent();
-                if (content && content.invite > me.powerLevel) {
-                    canInvite = false;
-                }
-            }
+            const canInvite = room.canInvite(cli.getUserId());
 
             let inviteButtonText = _t("Invite to this room");
             const chat = CommunityPrototypeStore.instance.getSelectedCommunityGeneralChat();
             if (chat && chat.roomId === this.props.roomId) {
                 inviteButtonText = _t("Invite to this community");
+            } else if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) {
+                inviteButtonText = _t("Invite to this space");
             }
 
             const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
@@ -493,12 +490,26 @@ export default class MemberList extends React.Component {
                 onSearch={ this.onSearchQueryChanged } />
         );
 
+        let previousPhase = RightPanelPhases.RoomSummary;
+        // We have no previousPhase for when viewing a MemberList from a Space
+        let scopeHeader;
+        if (SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()) {
+            previousPhase = undefined;
+            scopeHeader = <div className="mx_RightPanel_scopeHeader">
+                <RoomAvatar room={room} height={32} width={32} />
+                <RoomName room={room} />
+            </div>;
+        }
+
         return <BaseCard
             className="mx_MemberList"
-            header={inviteButton}
+            header={<React.Fragment>
+                { scopeHeader }
+                { inviteButton }
+            </React.Fragment>}
             footer={footer}
             onClose={this.props.onClose}
-            previousPhase={RightPanelPhases.RoomSummary}
+            previousPhase={previousPhase}
         >
             <div className="mx_MemberList_wrapper">
                 <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}

src/components/views/rooms/MemberTile.js

@@ -23,7 +23,9 @@ import dis from "../../../dispatcher/dispatcher";
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import {Action} from "../../../dispatcher/actions";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.MemberTile")
 export default class MemberTile extends React.Component {
     static propTypes = {
         member: PropTypes.any.isRequired, // RoomMember

src/components/views/rooms/MessageComposer.tsx

@@ -1,7 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 New Vector Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-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.
@@ -15,16 +13,18 @@ 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, {createRef} from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import CallHandler from '../../../CallHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
 import dis from '../../../dispatcher/dispatcher';
+import { ActionPayload } from "../../../dispatcher/payloads";
 import Stickerpicker from './Stickerpicker';
-import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
+import { makeRoomPermalink, RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -32,115 +32,41 @@ import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ReplyPreview from "./ReplyPreview";
 import {UIFeature} from "../../../settings/UIFeature";
-import WidgetStore from "../../../stores/WidgetStore";
-import WidgetUtils from "../../../utils/WidgetUtils";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
-import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
-import { PlaceCallType } from "../../../CallHandler";
-import { CallState } from 'matrix-js-sdk/src/webrtc/call';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import VoiceRecordComposerTile from "./VoiceRecordComposerTile";
+import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
+import {RecordingState} from "../../../voice/VoiceRecording";
+import Tooltip, {Alignment} from "../elements/Tooltip";
+import ResizeNotifier from "../../../utils/ResizeNotifier";
+import { E2EStatus } from '../../../utils/ShieldUtils';
+import SendMessageComposer from "./SendMessageComposer";
 
-function ComposerAvatar(props) {
+interface IComposerAvatarProps {
+    me: object;
+}
+
+function ComposerAvatar(props: IComposerAvatarProps) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
     return <div className="mx_MessageComposer_avatar">
         <MemberStatusMessageAvatar member={props.me} width={24} height={24} />
     </div>;
 }
 
-ComposerAvatar.propTypes = {
-    me: PropTypes.object.isRequired,
-};
-
-function CallButton(props) {
-    const onVoiceCallClick = (ev) => {
-        dis.dispatch({
-            action: 'place_call',
-            type: PlaceCallType.Voice,
-            room_id: props.roomId,
-        });
-    };
-
-    return (<AccessibleTooltipButton
-        className="mx_MessageComposer_button mx_MessageComposer_voicecall"
-        onClick={onVoiceCallClick}
-        title={_t('Voice call')}
-    />);
+interface ISendButtonProps {
+    onClick: () => void;
 }
 
-CallButton.propTypes = {
-    roomId: PropTypes.string.isRequired,
-};
-
-function VideoCallButton(props) {
-    const onCallClick = (ev) => {
-        dis.dispatch({
-            action: 'place_call',
-            type: ev.shiftKey ? PlaceCallType.ScreenSharing : PlaceCallType.Video,
-            room_id: props.roomId,
-        });
-    };
-
-    return <AccessibleTooltipButton
-        className="mx_MessageComposer_button mx_MessageComposer_videocall"
-        onClick={onCallClick}
-        title={_t('Video call')}
-    />;
-}
-
-VideoCallButton.propTypes = {
-    roomId: PropTypes.string.isRequired,
-};
-
-function HangupButton(props) {
-    const onHangupClick = () => {
-        if (props.isConference) {
-            dis.dispatch({
-                action: props.canEndConference ? 'end_conference' : 'hangup_conference',
-                room_id: props.roomId,
-            });
-            return;
-        }
-
-        const call = CallHandler.sharedInstance().getCallForRoom(props.roomId);
-        if (!call) {
-            return;
-        }
-
-        const action = call.state === CallState.Ringing ? 'reject' : 'hangup';
-
-        dis.dispatch({
-            action,
-            // hangup the call for this room. NB. We use the room in props as the room ID
-            // as call.roomId may be the 'virtual room', and the dispatch actions always
-            // use the user-facing room (there was a time when we deliberately used
-            // call.roomId and *not* props.roomId, but that was for the old
-            // style Freeswitch conference calls and those times are gone.)
-            room_id: props.roomId,
-        });
-    };
-
-    let tooltip = _t("Hangup");
-    if (props.isConference && props.canEndConference) {
-        tooltip = _t("End conference");
-    }
-
-    const canLeaveConference = !props.isConference ? true : props.isInConference;
+function SendButton(props: ISendButtonProps) {
     return (
         <AccessibleTooltipButton
-            className="mx_MessageComposer_button mx_MessageComposer_hangup"
-            onClick={onHangupClick}
-            title={tooltip}
-            disabled={!canLeaveConference}
+            className="mx_MessageComposer_sendMessage"
+            onClick={props.onClick}
+            title={_t('Send message')}
         />
     );
 }
 
-HangupButton.propTypes = {
-    roomId: PropTypes.string.isRequired,
-    isConference: PropTypes.bool.isRequired,
-    canEndConference: PropTypes.bool,
-    isInConference: PropTypes.bool,
-};
-
 const EmojiButton = ({addEmoji}) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
 
@@ -148,7 +74,7 @@ const EmojiButton = ({addEmoji}) => {
     if (menuDisplayed) {
         const buttonRect = button.current.getBoundingClientRect();
         const EmojiPicker = sdk.getComponent('emojipicker.EmojiPicker');
-        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} catchTab={false}>
+        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
             <EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
         </ContextMenu>;
     }
@@ -178,39 +104,39 @@ const EmojiButton = ({addEmoji}) => {
     </React.Fragment>;
 };
 
-class UploadButton extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-    }
+interface IUploadButtonProps {
+    roomId: string;
+}
+
+class UploadButton extends React.Component<IUploadButtonProps> {
+    private uploadInput = React.createRef<HTMLInputElement>();
+    private dispatcherRef: string;
 
     constructor(props) {
         super(props);
-        this.onUploadClick = this.onUploadClick.bind(this);
-        this.onUploadFileInputChange = this.onUploadFileInputChange.bind(this);
 
-        this._uploadInput = createRef();
-        this._dispatcherRef = dis.register(this.onAction);
+        this.dispatcherRef = dis.register(this.onAction);
     }
 
     componentWillUnmount() {
-        dis.unregister(this._dispatcherRef);
+        dis.unregister(this.dispatcherRef);
     }
 
-    onAction = payload => {
+    private onAction = (payload: ActionPayload) => {
         if (payload.action === "upload_file") {
             this.onUploadClick();
         }
     };
 
-    onUploadClick(ev) {
+    private onUploadClick = () => {
         if (MatrixClientPeg.get().isGuest()) {
             dis.dispatch({action: 'require_registration'});
             return;
         }
-        this._uploadInput.current.click();
+        this.uploadInput.current.click();
     }
 
-    onUploadFileInputChange(ev) {
+    private onUploadFileInputChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
         if (ev.target.files.length === 0) return;
 
         // take a copy so we can safely reset the value of the form control
@@ -240,7 +166,7 @@ class UploadButton extends React.Component {
                 title={_t('Upload file')}
             >
                 <input
-                    ref={this._uploadInput}
+                    ref={this.uploadInput}
                     type="file"
                     style={uploadInputStyle}
                     multiple
@@ -251,27 +177,49 @@ class UploadButton extends React.Component {
     }
 }
 
-export default class MessageComposer extends React.Component {
+interface IProps {
+    room: Room;
+    resizeNotifier: ResizeNotifier;
+    permalinkCreator: RoomPermalinkCreator;
+    replyToEvent?: MatrixEvent;
+    e2eStatus?: E2EStatus;
+}
+
+interface IState {
+    tombstone: MatrixEvent;
+    canSendMessages: boolean;
+    isComposerEmpty: boolean;
+    haveRecording: boolean;
+    recordingTimeLeftSeconds?: number;
+    me?: RoomMember;
+}
+
+@replaceableComponent("views.rooms.MessageComposer")
+export default class MessageComposer extends React.Component<IProps, IState> {
+    private dispatcherRef: string;
+    private messageComposerInput: SendMessageComposer;
+    private voiceRecordingButton: VoiceRecordComposerTile;
+
     constructor(props) {
         super(props);
-        this.onInputStateChanged = this.onInputStateChanged.bind(this);
-        this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
-        this._onTombstoneClick = this._onTombstoneClick.bind(this);
-        this.renderPlaceholderText = this.renderPlaceholderText.bind(this);
-        WidgetStore.instance.on(UPDATE_EVENT, this._onWidgetUpdate);
-        ActiveWidgetStore.on('update', this._onActiveWidgetUpdate);
-        this._dispatcherRef = null;
+        VoiceRecordingStore.instance.on(UPDATE_EVENT, this.onVoiceStoreUpdate);
 
         this.state = {
-            tombstone: this._getRoomTombstone(),
+            tombstone: this.getRoomTombstone(),
             canSendMessages: this.props.room.maySendMessage(),
-            showCallButtons: SettingsStore.getValue("showCallButtonsInComposer"),
-            hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room),
-            joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room),
+            isComposerEmpty: true,
+            haveRecording: false,
+            recordingTimeLeftSeconds: null, // when set to a number, shows a toast
         };
     }
 
-    onAction = (payload) => {
+    componentDidMount() {
+        this.dispatcherRef = dis.register(this.onAction);
+        MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
+        this.waitForOwnMember();
+    }
+
+    private onAction = (payload: ActionPayload) => {
         if (payload.action === 'reply_to_event') {
             // add a timeout for the reply preview to be rendered, so
             // that the ScrollPanel listening to the resizeNotifier can
@@ -283,21 +231,7 @@ export default class MessageComposer extends React.Component {
         }
     };
 
-    _onWidgetUpdate = () => {
-        this.setState({hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room)});
-    };
-
-    _onActiveWidgetUpdate = () => {
-        this.setState({joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room)});
-    };
-
-    componentDidMount() {
-        this.dispatcherRef = dis.register(this.onAction);
-        MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
-        this._waitForOwnMember();
-    }
-
-    _waitForOwnMember() {
+    private waitForOwnMember() {
         // if we have the member already, do that
         const me = this.props.room.getMember(MatrixClientPeg.get().getUserId());
         if (me) {
@@ -315,35 +249,28 @@ export default class MessageComposer extends React.Component {
 
     componentWillUnmount() {
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
+            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
         }
-        WidgetStore.instance.removeListener(UPDATE_EVENT, this._onWidgetUpdate);
-        ActiveWidgetStore.removeListener('update', this._onActiveWidgetUpdate);
+        VoiceRecordingStore.instance.off(UPDATE_EVENT, this.onVoiceStoreUpdate);
         dis.unregister(this.dispatcherRef);
     }
 
-    _onRoomStateEvents(ev, state) {
+    private onRoomStateEvents = (ev, state) => {
         if (ev.getRoomId() !== this.props.room.roomId) return;
 
         if (ev.getType() === 'm.room.tombstone') {
-            this.setState({tombstone: this._getRoomTombstone()});
+            this.setState({tombstone: this.getRoomTombstone()});
         }
         if (ev.getType() === 'm.room.power_levels') {
             this.setState({canSendMessages: this.props.room.maySendMessage()});
         }
     }
 
-    _getRoomTombstone() {
+    private getRoomTombstone() {
         return this.props.room.currentState.getStateEvents('m.room.tombstone', '');
     }
 
-    onInputStateChanged(inputState) {
-        // Merge the new input state with old to support partial updates
-        inputState = Object.assign({}, this.state.inputState, inputState);
-        this.setState({inputState});
-    }
-
-    _onTombstoneClick(ev) {
+    private onTombstoneClick = (ev) => {
         ev.preventDefault();
 
         const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
@@ -373,7 +300,7 @@ export default class MessageComposer extends React.Component {
         });
     }
 
-    renderPlaceholderText() {
+    private renderPlaceholderText = () => {
         if (this.props.replyToEvent) {
             if (this.props.e2eStatus) {
                 return _t('Send an encrypted reply…');
@@ -396,6 +323,38 @@ export default class MessageComposer extends React.Component {
         });
     }
 
+    sendMessage = async () => {
+        if (this.state.haveRecording && this.voiceRecordingButton) {
+            // There shouldn't be any text message to send when a voice recording is active, so
+            // just send out the voice recording.
+            await this.voiceRecordingButton.send();
+            return;
+        }
+
+        // XXX: Private function access
+        this.messageComposerInput._sendMessage();
+    }
+
+    onChange = (model) => {
+        this.setState({
+            isComposerEmpty: model.isEmpty,
+        });
+    }
+
+    private onVoiceStoreUpdate = () => {
+        const recording = VoiceRecordingStore.instance.activeRecording;
+        this.setState({haveRecording: !!recording});
+        if (recording) {
+            // We show a little heads up that the recording is about to automatically end soon. The 3s
+            // display time is completely arbitrary. Note that we don't need to deregister the listener
+            // because the recording instance will clean that up for us.
+            recording.on(RecordingState.EndingSoon, ({secondsLeft}) => {
+                this.setState({recordingTimeLeftSeconds: secondsLeft});
+                setTimeout(() => this.setState({recordingTimeLeftSeconds: null}), 3000);
+            });
+        }
+    };
+
     render() {
         const controls = [
             this.state.me ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
@@ -405,12 +364,7 @@ export default class MessageComposer extends React.Component {
         ];
 
         if (!this.state.tombstone && this.state.canSendMessages) {
-            // This also currently includes the call buttons. Really we should
-            // check separately for whether we can call, but this is slightly
-            // complex because of conference calls.
-
             const SendMessageComposer = sdk.getComponent("rooms.SendMessageComposer");
-            const callInProgress = this.props.callState && this.props.callState !== 'ended';
 
             controls.push(
                 <SendMessageComposer
@@ -421,38 +375,35 @@ export default class MessageComposer extends React.Component {
                     resizeNotifier={this.props.resizeNotifier}
                     permalinkCreator={this.props.permalinkCreator}
                     replyToEvent={this.props.replyToEvent}
+                    onChange={this.onChange}
+                    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.showCallButtons) {
-                if (this.state.hasConference) {
-                    const canEndConf = WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
-                    controls.push(
-                        <HangupButton
-                            key="controls_hangup"
-                            roomId={this.props.room.roomId}
-                            isConference={true}
-                            canEndConference={canEndConf}
-                            isInConference={this.state.joinedConference}
-                        />,
-                    );
-                } else if (callInProgress) {
-                    controls.push(
-                        <HangupButton key="controls_hangup" roomId={this.props.room.roomId} isConference={false} />,
-                    );
-                } else {
-                    controls.push(
-                        <CallButton key="controls_call" roomId={this.props.room.roomId} />,
-                        <VideoCallButton key="controls_videocall" roomId={this.props.room.roomId} />,
-                    );
-                }
+            if (SettingsStore.getValue("feature_voice_messages")) {
+                controls.push(<VoiceRecordComposerTile
+                    key="controls_voice_record"
+                    ref={c => this.voiceRecordingButton = c}
+                    room={this.props.room} />);
+            }
+
+            if (!this.state.isComposerEmpty || this.state.haveRecording) {
+                controls.push(
+                    <SendButton key="controls_send" onClick={this.sendMessage} />,
+                );
             }
         } else if (this.state.tombstone) {
             const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
@@ -460,7 +411,7 @@ export default class MessageComposer extends React.Component {
             const continuesLink = replacementRoomId ? (
                 <a href={makeRoomPermalink(replacementRoomId)}
                     className="mx_MessageComposer_roomReplaced_link"
-                    onClick={this._onTombstoneClick}
+                    onClick={this.onTombstoneClick}
                 >
                     {_t("The conversation continues here.")}
                 </a>
@@ -468,7 +419,9 @@ export default class MessageComposer extends React.Component {
 
             controls.push(<div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
                 <div className="mx_MessageComposer_replaced_valign">
-                    <img className="mx_MessageComposer_roomReplaced_icon" src={require("../../../../res/img/room_replaced.svg")} />
+                    <img className="mx_MessageComposer_roomReplaced_icon"
+                        src={require("../../../../res/img/room_replaced.svg")}
+                    />
                     <span className="mx_MessageComposer_roomReplaced_header">
                         {_t("This room has been replaced and is no longer active.")}
                     </span><br />
@@ -483,8 +436,18 @@ export default class MessageComposer extends React.Component {
             );
         }
 
+        let recordingTooltip;
+        const secondsLeft = Math.round(this.state.recordingTimeLeftSeconds);
+        if (secondsLeft) {
+            recordingTooltip = <Tooltip
+                label={_t("%(seconds)ss left", {seconds: secondsLeft})}
+                alignment={Alignment.Top} yOffset={-50}
+            />;
+        }
+
         return (
             <div className="mx_MessageComposer mx_GroupLayout">
+                {recordingTooltip}
                 <div className="mx_MessageComposer_wrapper">
                     <ReplyPreview permalinkCreator={this.props.permalinkCreator} />
                     <div className="mx_MessageComposer_row">
@@ -495,14 +458,3 @@ export default class MessageComposer extends React.Component {
         );
     }
 }
-
-MessageComposer.propTypes = {
-    // js-sdk Room object
-    room: PropTypes.object.isRequired,
-
-    // string representing the current voip call state
-    callState: PropTypes.string,
-
-    // string representing the current room app drawer state
-    showApps: PropTypes.bool,
-};

src/components/views/rooms/MessageComposerFormatBar.js

@@ -19,7 +19,9 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import classNames from 'classnames';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.MessageComposerFormatBar")
 export default class MessageComposerFormatBar extends React.PureComponent {
     static propTypes = {
         onAction: PropTypes.func.isRequired,
@@ -83,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,24 +102,48 @@ const NewRoomIntro = () => {
             });
         }
 
-        let canInvite = inRoom;
-        const powerLevels = room.currentState.getStateEvents(EventType.RoomPowerLevels, "")?.getContent();
-        const me = room.getMember(cli.getUserId());
-        if (powerLevels && me && powerLevels.invite > me.powerLevel) {
-            canInvite = false;
+        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 (canInvite) {
-            const onInviteClick = () => {
-                dis.dispatch({ action: "view_invite", roomId });
-            };
-
+        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/NotificationBadge.tsx

@@ -21,6 +21,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from "../elements/AccessibleButton";
 import { XOR } from "../../../@types/common";
 import { NOTIFICATION_STATE_UPDATE, NotificationState } from "../../../stores/notifications/NotificationState";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     notification: NotificationState;
@@ -29,7 +30,7 @@ interface IProps {
      * If true, the badge will show a count if at all possible. This is typically
      * used to override the user's preference for things like room sublists.
      */
-    forceCount: boolean;
+    forceCount?: boolean;
 
     /**
      * The room ID, if any, the badge represents.
@@ -48,6 +49,7 @@ interface IState {
     showCounts: boolean; // whether or not to show counts. Independent of props.forceCount
 }
 
+@replaceableComponent("views.rooms.NotificationBadge")
 export default class NotificationBadge extends React.PureComponent<XOR<IProps, IClickableProps>, IState> {
     private countWatcherRef: string;
 

src/components/views/rooms/PinnedEventTile.js

@@ -23,7 +23,9 @@ import MessageEvent from "../messages/MessageEvent";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from '../../../languageHandler';
 import {formatFullDate} from '../../../DateUtils';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.PinnedEventTile")
 export default class PinnedEventTile extends React.Component {
     static propTypes = {
         mxRoom: PropTypes.object.isRequired,
@@ -51,9 +53,9 @@ export default class PinnedEventTile extends React.Component {
             if (index !== -1) {
                 pinned.splice(index, 1);
                 MatrixClientPeg.get().sendStateEvent(this.props.mxRoom.roomId, 'm.room.pinned_events', {pinned}, '')
-                .then(() => {
-                    if (this.props.onUnpinned) this.props.onUnpinned();
-                });
+                    .then(() => {
+                        if (this.props.onUnpinned) this.props.onUnpinned();
+                    });
             } else if (this.props.onUnpinned) this.props.onUnpinned();
         }
     };
@@ -96,8 +98,11 @@ export default class PinnedEventTile extends React.Component {
                     { formatFullDate(new Date(this.props.mxEvent.getTs())) }
                 </span>
                 <div className="mx_PinnedEventTile_message">
-                    <MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" maxImageHeight={150}
-                                  onHeightChanged={() => {}} // we need to give this, apparently
+                    <MessageEvent
+                        mxEvent={this.props.mxEvent}
+                        className="mx_PinnedEventTile_body"
+                        maxImageHeight={150}
+                        onHeightChanged={() => {}} // we need to give this, apparently
                     />
                 </div>
             </div>

src/components/views/rooms/PinnedEventsPanel.js

@@ -22,7 +22,9 @@ import AccessibleButton from "../elements/AccessibleButton";
 import PinnedEventTile from "./PinnedEventTile";
 import { _t } from '../../../languageHandler';
 import PinningUtils from "../../../utils/PinningUtils";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.PinnedEventsPanel")
 export default class PinnedEventsPanel extends React.Component {
     static propTypes = {
         // The Room from the js-sdk we're going to show pinned events for
@@ -62,10 +64,10 @@ export default class PinnedEventsPanel extends React.Component {
 
             pinnedEvents.getContent().pinned.map((eventId) => {
                 promises.push(cli.getEventTimeline(this.props.room.getUnfilteredTimelineSet(), eventId, 0).then(
-                (timeline) => {
-                    const event = timeline.getEvents().find((e) => e.getId() === eventId);
-                    return {eventId, timeline, event};
-                }).catch((err) => {
+                    (timeline) => {
+                        const event = timeline.getEvents().find((e) => e.getId() === eventId);
+                        return {eventId, timeline, event};
+                    }).catch((err) => {
                     console.error("Error looking up pinned event " + eventId + " in room " + this.props.room.roomId);
                     console.error(err);
                     return null; // return lack of context to avoid unhandled errors
@@ -111,10 +113,14 @@ export default class PinnedEventsPanel extends React.Component {
         }
 
         return this.state.pinned.map((context) => {
-            return (<PinnedEventTile key={context.event.getId()}
-                                     mxRoom={this.props.room}
-                                     mxEvent={context.event}
-                                     onUnpinned={this._updatePinnedMessages} />);
+            return (
+                <PinnedEventTile
+                    key={context.event.getId()}
+                    mxRoom={this.props.room}
+                    mxEvent={context.event}
+                    onUnpinned={this._updatePinnedMessages}
+                />
+            );
         });
     }
 

src/components/views/rooms/PresenceLabel.js

@@ -18,8 +18,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-
+@replaceableComponent("views.rooms.PresenceLabel")
 export default class PresenceLabel extends React.Component {
     static propTypes = {
         // number of milliseconds ago this user was last active.

src/components/views/rooms/ReadReceiptMarker.js

@@ -17,22 +17,15 @@ limitations under the License.
 
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
-import '../../../VelocityBounce';
 import { _t } from '../../../languageHandler';
 import {formatDate} from '../../../DateUtils';
-import Velociraptor from "../../../Velociraptor";
+import NodeAnimator from "../../../NodeAnimator";
 import * as sdk from "../../../index";
 import {toPx} from "../../../utils/units";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-let bounce = false;
-try {
-    if (global.localStorage) {
-        bounce = global.localStorage.getItem('avatar_bounce') == 'true';
-    }
-} catch (e) {
-}
-
-export default class ReadReceiptMarker extends React.Component {
+@replaceableComponent("views.rooms.ReadReceiptMarker")
+export default class ReadReceiptMarker extends React.PureComponent {
     static propTypes = {
         // the RoomMember to show the RR for
         member: PropTypes.object,
@@ -113,7 +106,18 @@ export default class ReadReceiptMarker extends React.Component {
             // we've already done our display - nothing more to do.
             return;
         }
+        this._animateMarker();
+    }
 
+    componentDidUpdate(prevProps) {
+        const differentLeftOffset = prevProps.leftOffset !== this.props.leftOffset;
+        const visibilityChanged = prevProps.hidden !== this.props.hidden;
+        if (differentLeftOffset || visibilityChanged) {
+            this._animateMarker();
+        }
+    }
+
+    _animateMarker() {
         // treat new RRs as though they were off the top of the screen
         let oldTop = -15;
 
@@ -137,34 +141,18 @@ export default class ReadReceiptMarker extends React.Component {
         }
 
         const startStyles = [];
-        const enterTransitionOpts = [];
 
         if (oldInfo && oldInfo.left) {
             // start at the old height and in the old h pos
-
             startStyles.push({ top: startTopOffset+"px",
                                left: toPx(oldInfo.left) });
-
-            const reorderTransitionOpts = {
-                duration: 100,
-                easing: 'easeOut',
-            };
-
-            enterTransitionOpts.push(reorderTransitionOpts);
         }
 
-        // then shift to the rightmost column,
-        // and then it will drop down to its resting position
-        startStyles.push({ top: startTopOffset+'px', left: '0px' });
-        enterTransitionOpts.push({
-            duration: bounce ? Math.min(Math.log(Math.abs(startTopOffset)) * 200, 3000) : 300,
-            easing: bounce ? 'easeOutBounce' : 'easeOutCubic',
-        });
+        startStyles.push({ top: startTopOffset+'px', left: '0' });
 
         this.setState({
             suppressDisplay: false,
             startStyles: startStyles,
-            enterTransitionOpts: enterTransitionOpts,
         });
     }
 
@@ -177,7 +165,6 @@ export default class ReadReceiptMarker extends React.Component {
         const style = {
             left: toPx(this.props.leftOffset),
             top: '0px',
-            visibility: this.props.hidden ? 'hidden' : 'visible',
         };
 
         let title;
@@ -200,9 +187,7 @@ export default class ReadReceiptMarker extends React.Component {
         }
 
         return (
-            <Velociraptor
-                    startStyles={this.state.startStyles}
-                    enterTransitionOpts={this.state.enterTransitionOpts} >
+            <NodeAnimator startStyles={this.state.startStyles}>
                 <MemberAvatar
                     member={this.props.member}
                     fallbackUserId={this.props.fallbackUserId}
@@ -213,7 +198,7 @@ export default class ReadReceiptMarker extends React.Component {
                     onClick={this.props.onClick}
                     inputRef={this._avatar}
                 />
-            </Velociraptor>
+            </NodeAnimator>
         );
     }
 }

src/components/views/rooms/ReplyPreview.js

@@ -23,6 +23,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import PropTypes from "prop-types";
 import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import {UIFeature} from "../../../settings/UIFeature";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 function cancelQuoting() {
     dis.dispatch({
@@ -31,6 +32,7 @@ function cancelQuoting() {
     });
 }
 
+@replaceableComponent("views.rooms.ReplyPreview")
 export default class ReplyPreview extends React.Component {
     static propTypes = {
         permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
@@ -77,8 +79,13 @@ export default class ReplyPreview extends React.Component {
                     { _t('Replying') }
                 </div>
                 <div className="mx_ReplyPreview_header mx_ReplyPreview_cancel">
-                    <img className="mx_filterFlipColor" src={require("../../../../res/img/cancel.svg")} width="18" height="18"
-                         onClick={cancelQuoting} />
+                    <img
+                        className="mx_filterFlipColor"
+                        src={require("../../../../res/img/cancel.svg")}
+                        width="18"
+                        height="18"
+                        onClick={cancelQuoting}
+                    />
                 </div>
                 <div className="mx_ReplyPreview_clear" />
                 <EventTile

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -27,6 +27,7 @@ import RoomListStore from "../../../stores/room-list/RoomListStore";
 import { DefaultTagID } from "../../../stores/room-list/models";
 import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
 import Toolbar from "../../../accessibility/Toolbar";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
 }
@@ -42,6 +43,7 @@ interface IState {
     skipFirst: boolean;
 }
 
+@replaceableComponent("views.rooms.RoomBreadcrumbs")
 export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState> {
     private isMounted = true;
 

src/components/views/rooms/RoomDetailList.js

@@ -22,7 +22,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import {roomShape} from './RoomDetailRow';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.RoomDetailList")
 export default class RoomDetailList extends React.Component {
     static propTypes = {
         rooms: PropTypes.arrayOf(roomShape),

src/components/views/rooms/RoomDetailRow.js

@@ -18,9 +18,9 @@ import * as sdk from '../../../index';
 import React, {createRef} from 'react';
 import { _t } from '../../../languageHandler';
 import { linkifyElement } from '../../../HtmlUtils';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import PropTypes from 'prop-types';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
 
 export function getDisplayAliasForRoom(room) {
     return room.canonicalAlias || (room.aliases ? room.aliases[0] : "");
@@ -39,6 +39,7 @@ export const roomShape = PropTypes.shape({
     guestCanJoin: PropTypes.bool,
 });
 
+@replaceableComponent("views.rooms.RoomDetailRow")
 export default class RoomDetailRow extends React.Component {
     static propTypes = {
         room: roomShape,
@@ -87,24 +88,25 @@ export default class RoomDetailRow extends React.Component {
         const name = room.name || getDisplayAliasForRoom(room) || _t('Unnamed room');
 
         const guestRead = room.worldReadable ? (
-                <div className="mx_RoomDirectory_perm">{ _t('World readable') }</div>
-            ) : <div />;
+            <div className="mx_RoomDirectory_perm">{ _t('World readable') }</div>
+        ) : <div />;
         const guestJoin = room.guestCanJoin ? (
-                <div className="mx_RoomDirectory_perm">{ _t('Guests can join') }</div>
-            ) : <div />;
+            <div className="mx_RoomDirectory_perm">{ _t('Guests can join') }</div>
+        ) : <div />;
 
         const perms = (guestRead || guestJoin) ? (<div className="mx_RoomDirectory_perms">
             { guestRead }&nbsp;
             { guestJoin }
         </div>) : <div />;
 
+        let avatarUrl = null;
+        if (room.avatarUrl) avatarUrl = mediaFromMxc(room.avatarUrl).getSquareThumbnailHttp(24);
+
         return <tr key={room.roomId} onClick={this.onClick} onMouseDown={this.props.onMouseDown}>
             <td className="mx_RoomDirectory_roomAvatar">
                 <BaseAvatar width={24} height={24} resizeMethod='crop'
                     name={name} idName={name}
-                    url={getHttpUriForMxc(
-                            MatrixClientPeg.get().getHomeserverUrl(),
-                            room.avatarUrl, 24, 24, "crop")} />
+                    url={avatarUrl} />
             </td>
             <td className="mx_RoomDirectory_roomDescription">
                 <div className="mx_RoomDirectory_name">{ name }</div>&nbsp;

src/components/views/rooms/RoomHeader.js

@@ -15,14 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import RateLimitedFunc from '../../../ratelimitedfunc';
 
-import { linkifyElement } from '../../../HtmlUtils';
 import {CancelButton} from './SimpleRoomHeader';
 import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
@@ -30,7 +29,12 @@ import E2EIcon from './E2EIcon';
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import {DefaultTagID} from "../../../stores/room-list/models";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import RoomTopic from "../elements/RoomTopic";
+import RoomName from "../elements/RoomName";
+import {PlaceCallType} from "../../../CallHandler";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.RoomHeader")
 export default class RoomHeader extends React.Component {
     static propTypes = {
         room: PropTypes.object,
@@ -44,6 +48,7 @@ export default class RoomHeader extends React.Component {
         e2eStatus: PropTypes.string,
         onAppsClick: PropTypes.func,
         appsShown: PropTypes.bool,
+        onCallPlaced: PropTypes.func, // (PlaceCallType) => void;
     };
 
     static defaultProps = {
@@ -52,35 +57,13 @@ export default class RoomHeader extends React.Component {
         onCancelClick: null,
     };
 
-    constructor(props) {
-        super(props);
-
-        this._topic = createRef();
-    }
-
     componentDidMount() {
         const cli = MatrixClientPeg.get();
         cli.on("RoomState.events", this._onRoomStateEvents);
         cli.on("Room.accountData", this._onRoomAccountData);
-
-        // When a room name occurs, RoomState.events is fired *before*
-        // room.name is updated. So we have to listen to Room.name as well as
-        // RoomState.events.
-        if (this.props.room) {
-            this.props.room.on("Room.name", this._onRoomNameChange);
-        }
-    }
-
-    componentDidUpdate() {
-        if (this._topic.current) {
-            linkifyElement(this._topic.current);
-        }
     }
 
     componentWillUnmount() {
-        if (this.props.room) {
-            this.props.room.removeListener("Room.name", this._onRoomNameChange);
-        }
         const cli = MatrixClientPeg.get();
         if (cli) {
             cli.removeListener("RoomState.events", this._onRoomStateEvents);
@@ -109,10 +92,6 @@ export default class RoomHeader extends React.Component {
         this.forceUpdate();
     }, 500);
 
-    _onRoomNameChange = (room) => {
-        this.forceUpdate();
-    };
-
     _hasUnreadPins() {
         const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", '');
         if (!currentPinEvent) return false;
@@ -170,29 +149,28 @@ export default class RoomHeader extends React.Component {
             }
         }
 
-        let roomName = _t("Join Room");
+        let oobName = _t("Join Room");
         if (this.props.oobData && this.props.oobData.name) {
-            roomName = this.props.oobData.name;
-        } else if (this.props.room) {
-            roomName = this.props.room.name;
+            oobName = this.props.oobData.name;
         }
 
         const textClasses = classNames('mx_RoomHeader_nametext', { mx_RoomHeader_settingsHint: settingsHint });
         const name =
             <div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
-                <div dir="auto" className={textClasses} title={roomName}>{ roomName }</div>
+                <RoomName room={this.props.room}>
+                    {(name) => {
+                        const roomName = name || oobName;
+                        return <div dir="auto" className={textClasses} title={roomName}>{ roomName }</div>;
+                    }}
+                </RoomName>
                 { searchStatus }
             </div>;
 
-        let topic;
-        if (this.props.room) {
-            const ev = this.props.room.currentState.getStateEvents('m.room.topic', '');
-            if (ev) {
-                topic = ev.getContent().topic;
-            }
-        }
-        const topicElement =
-            <div className="mx_RoomHeader_topic" ref={this._topic} title={topic} dir="auto">{ topic }</div>;
+        const topicElement = <RoomTopic room={this.props.room}>
+            {(topic, ref) => <div className="mx_RoomHeader_topic" ref={ref} title={topic} dir="auto">
+                { topic }
+            </div>}
+        </RoomTopic>;
 
         let roomAvatar;
         if (this.props.room) {
@@ -252,8 +230,26 @@ export default class RoomHeader extends React.Component {
                     title={_t("Search")} />;
         }
 
+        let voiceCallButton;
+        let videoCallButton;
+        if (this.props.inRoom && SettingsStore.getValue("showCallButtonsInComposer")) {
+            voiceCallButton =
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_voiceCallButton"
+                    onClick={() => this.props.onCallPlaced(PlaceCallType.Voice)}
+                    title={_t("Voice call")} />;
+            videoCallButton =
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_videoCallButton"
+                    onClick={(ev) => this.props.onCallPlaced(
+                        ev.shiftKey ? PlaceCallType.ScreenSharing : PlaceCallType.Video)}
+                    title={_t("Video call")} />;
+        }
+
         const rightRow =
             <div className="mx_RoomHeader_buttons">
+                { videoCallButton }
+                { voiceCallButton }
                 { pinnedEventsButton }
                 { forgetButton }
                 { appsButton }

src/components/views/rooms/RoomList.tsx

@@ -1,7 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 Vector Creations Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-2018, 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.
@@ -16,9 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react";
+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";
@@ -33,9 +33,8 @@ import RoomSublist from "./RoomSublist";
 import { ActionPayload } from "../../../dispatcher/payloads";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import GroupAvatar from "../avatars/GroupAvatar";
-import TemporaryTile from "./TemporaryTile";
+import ExtraTile from "./ExtraTile";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
-import { NotificationColor } from "../../../stores/notifications/NotificationColor";
 import { Action } from "../../../dispatcher/actions";
 import { ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
@@ -47,6 +46,11 @@ 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, showSpaceInvite} from "../../../utils/space";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import RoomAvatar from "../avatars/RoomAvatar";
+import { ISpaceSummaryRoom } from "../../structures/SpaceRoomDirectory";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -55,11 +59,14 @@ interface IProps {
     onResize: () => void;
     resizeNotifier: ResizeNotifier;
     isMinimized: boolean;
+    activeSpace: Room;
 }
 
 interface IState {
     sublists: ITagMap;
     isNameFiltering: boolean;
+    currentRoomId?: string;
+    suggestedRooms: ISpaceSummaryRoom[];
 }
 
 const TAG_ORDER: TagID[] = [
@@ -72,6 +79,7 @@ const TAG_ORDER: TagID[] = [
 
     DefaultTagID.LowPriority,
     DefaultTagID.ServerNotice,
+    DefaultTagID.Suggested,
     DefaultTagID.Archived,
 ];
 const CUSTOM_TAGS_BEFORE_TAG = DefaultTagID.LowPriority;
@@ -152,6 +160,50 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
         defaultHidden: false,
         addRoomLabel: _td("Add room"),
         addRoomContextMenu: (onFinished: () => void) => {
+            if (SpaceStore.instance.activeSpace) {
+                const canAddRooms = SpaceStore.instance.activeSpace.currentState.maySendStateEvent(EventType.SpaceChild,
+                    MatrixClientPeg.get().getUserId());
+
+                return <IconizedContextMenuOptionList first>
+                    <IconizedContextMenuOption
+                        label={_t("Create new room")}
+                        iconClassName="mx_RoomList_iconPlus"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onFinished();
+                            showCreateNewRoom(MatrixClientPeg.get(), SpaceStore.instance.activeSpace);
+                        }}
+                        disabled={!canAddRooms}
+                        tooltip={canAddRooms ? undefined
+                            : _t("You do not have permissions to create new rooms in this space")}
+                    />
+                    <IconizedContextMenuOption
+                        label={_t("Add existing room")}
+                        iconClassName="mx_RoomList_iconHash"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onFinished();
+                            showAddExistingRooms(MatrixClientPeg.get(), SpaceStore.instance.activeSpace);
+                        }}
+                        disabled={!canAddRooms}
+                        tooltip={canAddRooms ? undefined
+                            : _t("You do not have permissions to add rooms to this space")}
+                    />
+                    <IconizedContextMenuOption
+                        label={_t("Explore rooms")}
+                        iconClassName="mx_RoomList_iconBrowse"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onFinished();
+                            defaultDispatcher.fire(Action.ViewRoomDirectory);
+                        }}
+                    />
+                </IconizedContextMenuOptionList>;
+            }
+
             return <IconizedContextMenuOptionList first>
                 <IconizedContextMenuOption
                     label={_t("Create new room")}
@@ -195,6 +247,12 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
         isInvite: false,
         defaultHidden: true,
     },
+
+    [DefaultTagID.Suggested]: {
+        sectionLabel: _td("Suggested Rooms"),
+        isInvite: false,
+        defaultHidden: false,
+    },
 };
 
 function customTagAesthetics(tagId: TagID): ITagAesthetics {
@@ -209,10 +267,12 @@ function customTagAesthetics(tagId: TagID): ITagAesthetics {
     };
 }
 
+@replaceableComponent("views.rooms.RoomList")
 export default class RoomList extends React.PureComponent<IProps, IState> {
     private dispatcherRef;
     private customTagStoreRef;
     private tagAesthetics: ITagAestheticsMap;
+    private roomStoreToken: fbEmitter.EventSubscription;
 
     constructor(props: IProps) {
         super(props);
@@ -220,27 +280,37 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         this.state = {
             sublists: {},
             isNameFiltering: !!RoomListStore.instance.getFirstNameFilterCondition(),
+            suggestedRooms: SpaceStore.instance.suggestedRooms,
         };
 
         // shallow-copy from the template as we need to make modifications to it
         this.tagAesthetics = objectShallowClone(TAG_AESTHETICS);
         this.updateDmAddRoomAction();
-
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
     }
 
     public componentDidMount(): void {
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
+        SpaceStore.instance.on(SUGGESTED_ROOMS, this.updateSuggestedRooms);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists);
         this.customTagStoreRef = CustomRoomTagStore.addListener(this.updateLists);
         this.updateLists(); // trigger the first update
     }
 
     public componentWillUnmount() {
+        SpaceStore.instance.off(SUGGESTED_ROOMS, this.updateSuggestedRooms);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists);
         defaultDispatcher.unregister(this.dispatcherRef);
         if (this.customTagStoreRef) this.customTagStoreRef.remove();
+        if (this.roomStoreToken) this.roomStoreToken.remove();
     }
 
+    private onRoomViewStoreUpdate = () => {
+        this.setState({
+            currentRoomId: RoomViewStore.getRoomId(),
+        });
+    };
+
     private updateDmAddRoomAction() {
         const dmTagAesthetics = objectShallowClone(TAG_AESTHETICS[DefaultTagID.DM]);
         if (CallHandler.sharedInstance().getSupportsPstnProtocol()) {
@@ -272,7 +342,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
     private getRoomDelta = (roomId: string, delta: number, unread = false) => {
         const lists = RoomListStore.instance.orderedLists;
-        const rooms: Room = [];
+        const rooms: Room[] = [];
         TAG_ORDER.forEach(t => {
             let listRooms = lists[t];
 
@@ -293,6 +363,10 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         return room;
     };
 
+    private updateSuggestedRooms = (suggestedRooms: ISpaceSummaryRoom[]) => {
+        this.setState({ suggestedRooms });
+    };
+
     private updateLists = () => {
         const newLists = RoomListStore.instance.orderedLists;
         if (SettingsStore.getValue("advancedRoomListLogging")) {
@@ -347,7 +421,49 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         dis.dispatch({ action: Action.ViewRoomDirectory, initialText });
     };
 
-    private renderCommunityInvites(): TemporaryTile[] {
+    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");
+            const avatar = (
+                <RoomAvatar
+                    oobData={{
+                        name,
+                        avatarUrl: room.avatar_url,
+                    }}
+                    width={32}
+                    height={32}
+                    resizeMethod="crop"
+                />
+            );
+            const viewRoom = () => {
+                defaultDispatcher.dispatch({
+                    action: "view_room",
+                    room_id: room.room_id,
+                    oobData: {
+                        avatarUrl: room.avatar_url,
+                        name,
+                    },
+                });
+            };
+            return (
+                <ExtraTile
+                    isMinimized={this.props.isMinimized}
+                    isSelected={this.state.currentRoomId === room.room_id}
+                    displayName={name}
+                    avatar={avatar}
+                    onClick={viewRoom}
+                    key={`suggestedRoomTile_${room.room_id}`}
+                />
+            );
+        });
+    }
+
+    private renderCommunityInvites(): ReactComponentElement<typeof ExtraTile>[] {
         // TODO: Put community invites in a more sensible place (not in the room list)
         // See https://github.com/vector-im/element-web/issues/14456
         return MatrixClientPeg.get().getGroups().filter(g => {
@@ -368,12 +484,12 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 });
             };
             return (
-                <TemporaryTile
+                <ExtraTile
                     isMinimized={this.props.isMinimized}
                     isSelected={false}
                     displayName={g.name}
                     avatar={avatar}
-                    notificationState={StaticNotificationState.forSymbol("!", NotificationColor.Red)}
+                    notificationState={StaticNotificationState.RED_EXCLAMATION}
                     onClick={openGroup}
                     key={`temporaryGroupTile_${g.groupId}`}
                 />
@@ -382,55 +498,57 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
     }
 
     private renderSublists(): React.ReactElement[] {
-        const components: React.ReactElement[] = [];
-
-        const tagOrder = TAG_ORDER.reduce((p, c) => {
-            if (c === CUSTOM_TAGS_BEFORE_TAG) {
-                const customTags = Object.keys(this.state.sublists)
-                    .filter(t => isCustomTag(t));
-                p.push(...customTags);
-            }
-            p.push(c);
-            return p;
-        }, [] as TagID[]);
-
         // show a skeleton UI if the user is in no rooms and they are not filtering
         const showSkeleton = !this.state.isNameFiltering &&
             Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length);
 
-        for (const orderedTagId of tagOrder) {
-            const orderedRooms = this.state.sublists[orderedTagId] || [];
-            const extraTiles = orderedTagId === DefaultTagID.Invite ? this.renderCommunityInvites() : null;
-            const totalTiles = orderedRooms.length + (extraTiles ? extraTiles.length : 0);
-            if (totalTiles === 0 && !ALWAYS_VISIBLE_TAGS.includes(orderedTagId)) {
-                continue; // skip tag - not needed
+        return TAG_ORDER.reduce((tags, tagId) => {
+            if (tagId === CUSTOM_TAGS_BEFORE_TAG) {
+                const customTags = Object.keys(this.state.sublists)
+                    .filter(tagId => isCustomTag(tagId));
+                tags.push(...customTags);
             }
+            tags.push(tagId);
+            return tags;
+        }, [] as TagID[])
+            .map(orderedTagId => {
+                let extraTiles = null;
+                if (orderedTagId === DefaultTagID.Invite) {
+                    extraTiles = this.renderCommunityInvites();
+                } else if (orderedTagId === DefaultTagID.Suggested) {
+                    extraTiles = this.renderSuggestedRooms();
+                }
 
-            const aesthetics: ITagAesthetics = isCustomTag(orderedTagId)
-                ? customTagAesthetics(orderedTagId)
-                : this.tagAesthetics[orderedTagId];
-            if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
+                const aesthetics: ITagAesthetics = isCustomTag(orderedTagId)
+                    ? customTagAesthetics(orderedTagId)
+                    : this.tagAesthetics[orderedTagId];
+                if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
 
-            components.push(<RoomSublist
-                key={`sublist-${orderedTagId}`}
-                tagId={orderedTagId}
-                forRooms={true}
-                startAsHidden={aesthetics.defaultHidden}
-                label={aesthetics.sectionLabelRaw ? aesthetics.sectionLabelRaw : _t(aesthetics.sectionLabel)}
-                onAddRoom={aesthetics.onAddRoom}
-                addRoomLabel={aesthetics.addRoomLabel ? _t(aesthetics.addRoomLabel) : aesthetics.addRoomLabel}
-                addRoomContextMenu={aesthetics.addRoomContextMenu}
-                isMinimized={this.props.isMinimized}
-                onResize={this.props.onResize}
-                showSkeleton={showSkeleton}
-                extraBadTilesThatShouldntExist={extraTiles}
-            />);
-        }
-
-        return components;
+                // The cost of mounting/unmounting this component offsets the cost
+                // of keeping it in the DOM and hiding it when it is not required
+                return <RoomSublist
+                    key={`sublist-${orderedTagId}`}
+                    tagId={orderedTagId}
+                    forRooms={true}
+                    startAsHidden={aesthetics.defaultHidden}
+                    label={aesthetics.sectionLabelRaw ? aesthetics.sectionLabelRaw : _t(aesthetics.sectionLabel)}
+                    onAddRoom={aesthetics.onAddRoom}
+                    addRoomLabel={aesthetics.addRoomLabel ? _t(aesthetics.addRoomLabel) : aesthetics.addRoomLabel}
+                    addRoomContextMenu={aesthetics.addRoomContextMenu}
+                    isMinimized={this.props.isMinimized}
+                    onResize={this.props.onResize}
+                    showSkeleton={showSkeleton}
+                    extraTiles={extraTiles}
+                    resizeNotifier={this.props.resizeNotifier}
+                    alwaysVisible={ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
+                />
+            });
     }
 
     public render() {
+        const cli = MatrixClientPeg.get();
+        const userId = cli.getUserId();
+
         let explorePrompt: JSX.Element;
         if (!this.props.isMinimized) {
             if (this.state.isNameFiltering) {
@@ -448,9 +566,27 @@ 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?.canInvite(userId) || this.props.activeSpace?.getMyMembership() === "join"
+            ) {
+                explorePrompt = <div className="mx_RoomList_explorePrompt">
+                    <div>{ _t("Quick actions") }</div>
+                    { this.props.activeSpace.canInvite(userId) && <AccessibleButton
+                        className="mx_RoomList_explorePrompt_spaceInvite"
+                        onClick={this.onSpaceInviteClick}
+                    >
+                        {_t("Invite people")}
+                    </AccessibleButton> }
+                    { this.props.activeSpace.getMyMembership() === "join" && <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)) {
                 const unfilteredLists = RoomListStore.instance.unfilteredLists
                 const unfilteredRooms = unfilteredLists[DefaultTagID.Untagged] || [];

src/components/views/rooms/RoomListNumResults.tsx

@@ -19,6 +19,7 @@ import React, {useState} from "react";
 import { _t } from "../../../languageHandler";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import SpaceStore from "../../../stores/SpaceStore";
 
 const RoomListNumResults: React.FC = () => {
     const [count, setCount] = useState<number>(null);
@@ -34,7 +35,10 @@ const RoomListNumResults: React.FC = () => {
     if (typeof count !== "number") return null;
 
     return <div className="mx_LeftPanel_roomListFilterCount">
-        {_t("%(count)s results", { count })}
+        { SpaceStore.instance.spacePanelSpaces.length
+            ? _t("%(count)s results in all spaces", { count })
+            : _t("%(count)s results", { count })
+        }
     </div>;
 };
 

src/components/views/rooms/RoomPreviewBar.js

@@ -1,7 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-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.
@@ -27,6 +25,8 @@ import SdkConfig from "../../../SdkConfig";
 import IdentityAuthClient from '../../../IdentityAuthClient';
 import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import InviteReason from "../elements/InviteReason";
 
 const MessageCase = Object.freeze({
     NotLoggedIn: "NotLoggedIn",
@@ -45,6 +45,7 @@ const MessageCase = Object.freeze({
     OtherError: "OtherError",
 });
 
+@replaceableComponent("views.rooms.RoomPreviewBar")
 export default class RoomPreviewBar extends React.Component {
     static propTypes = {
         onJoinClick: PropTypes.func,
@@ -304,6 +305,7 @@ export default class RoomPreviewBar extends React.Component {
         let showSpinner = false;
         let title;
         let subTitle;
+        let reasonElement;
         let primaryActionHandler;
         let primaryActionLabel;
         let secondaryActionHandler;
@@ -489,6 +491,12 @@ export default class RoomPreviewBar extends React.Component {
                     primaryActionLabel = _t("Accept");
                 }
 
+                const myUserId = MatrixClientPeg.get().getUserId();
+                const reason = this.props.room.currentState.getMember(myUserId).events.member.event.content.reason;
+                if (reason) {
+                    reasonElement = <InviteReason reason={reason} />;
+                }
+
                 primaryActionHandler = this.props.onJoinClick;
                 secondaryActionLabel = _t("Reject");
                 secondaryActionHandler = this.props.onRejectClick;
@@ -580,6 +588,7 @@ export default class RoomPreviewBar extends React.Component {
                     { titleElement }
                     { subTitleElements }
                 </div>
+                { reasonElement }
                 <div className="mx_RoomPreviewBar_actions">
                     { secondaryButton }
                     { extraComponents }

src/components/views/rooms/RoomSublist.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import * as React from "react";
-import {createRef} from "react";
+import { createRef, ReactComponentElement } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import classNames from 'classnames';
 import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
@@ -44,13 +44,16 @@ import { ActionPayload } from "../../../dispatcher/payloads";
 import { Enable, Resizable } from "re-resizable";
 import { Direction } from "re-resizable/lib/resizer";
 import { polyfillTouchEvent } from "../../../@types/polyfill";
+import { ResizeNotifier } from "../../../utils/ResizeNotifier";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import RoomListLayoutStore from "../../../stores/room-list/RoomListLayoutStore";
 import { arrayFastClone, arrayHasOrderChange } from "../../../utils/arrays";
 import { objectExcluding, objectHasDiff } from "../../../utils/objects";
-import TemporaryTile from "./TemporaryTile";
+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
 const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
@@ -72,10 +75,9 @@ interface IProps {
     tagId: TagID;
     onResize: () => void;
     showSkeleton?: boolean;
-
-    // TODO: Don't use this. It's for community invites, and community invites shouldn't be here.
-    // You should feel bad if you use this.
-    extraBadTilesThatShouldntExist?: TemporaryTile[];
+    alwaysVisible?: boolean;
+    resizeNotifier: ResizeNotifier;
+    extraTiles?: ReactComponentElement<typeof ExtraTile>[];
 
     // TODO: Account for https://github.com/vector-im/element-web/issues/14179
 }
@@ -95,9 +97,10 @@ interface IState {
     isExpanded: boolean; // used for the for expand of the sublist when the room list is being filtered
     height: number;
     rooms: Room[];
-    filteredExtraTiles?: TemporaryTile[];
+    filteredExtraTiles?: ReactComponentElement<typeof ExtraTile>[];
 }
 
+@replaceableComponent("views.rooms.RoomSublist")
 export default class RoomSublist extends React.Component<IProps, IState> {
     private headerButton = createRef<HTMLDivElement>();
     private sublistRef = createRef<HTMLDivElement>();
@@ -124,8 +127,6 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         };
         // Why Object.assign() and not this.state.height? Because TypeScript says no.
         this.state = Object.assign(this.state, {height: this.calculateInitialHeight()});
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onListsUpdated);
     }
 
     private calculateInitialHeight() {
@@ -153,12 +154,12 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         return padding;
     }
 
-    private get extraTiles(): TemporaryTile[] | null {
+    private get extraTiles(): ReactComponentElement<typeof ExtraTile>[] | null {
         if (this.state.filteredExtraTiles) {
             return this.state.filteredExtraTiles;
         }
-        if (this.props.extraBadTilesThatShouldntExist) {
-            return this.props.extraBadTilesThatShouldntExist;
+        if (this.props.extraTiles) {
+            return this.props.extraTiles;
         }
         return null;
     }
@@ -177,7 +178,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     }
 
     public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>) {
-        const prevExtraTiles = prevState.filteredExtraTiles || prevProps.extraBadTilesThatShouldntExist;
+        const prevExtraTiles = prevState.filteredExtraTiles || prevProps.extraTiles;
         // as the rooms can come in one by one we need to reevaluate
         // the amount of available rooms to cap the amount of requested visible rooms by the layout
         if (RoomSublist.calcNumTiles(prevState.rooms, prevExtraTiles) !== this.numTiles) {
@@ -200,8 +201,8 @@ export default class RoomSublist extends React.Component<IProps, IState> {
 
         // If we're supposed to handle extra tiles, take the performance hit and re-render all the
         // time so we don't have to consider them as part of the visible room optimization.
-        const prevExtraTiles = this.props.extraBadTilesThatShouldntExist || [];
-        const nextExtraTiles = (nextState.filteredExtraTiles || nextProps.extraBadTilesThatShouldntExist) || [];
+        const prevExtraTiles = this.props.extraTiles || [];
+        const nextExtraTiles = (nextState.filteredExtraTiles || nextProps.extraTiles) || [];
         if (prevExtraTiles.length > 0 || nextExtraTiles.length > 0) {
             return true;
         }
@@ -241,6 +242,11 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         return false;
     }
 
+    public componentDidMount() {
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onListsUpdated);
+    }
+
     public componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onListsUpdated);
@@ -249,10 +255,10 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     private onListsUpdated = () => {
         const stateUpdates: IState & any = {}; // &any is to avoid a cast on the initializer
 
-        if (this.props.extraBadTilesThatShouldntExist) {
+        if (this.props.extraTiles) {
             const nameCondition = RoomListStore.instance.getFirstNameFilterCondition();
             if (nameCondition) {
-                stateUpdates.filteredExtraTiles = this.props.extraBadTilesThatShouldntExist
+                stateUpdates.filteredExtraTiles = this.props.extraTiles
                     .filter(t => nameCondition.matches(t.props.displayName || ""));
             } else if (this.state.filteredExtraTiles) {
                 stateUpdates.filteredExtraTiles = null;
@@ -470,18 +476,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
@@ -522,6 +529,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                 tiles.push(<RoomTile
                     room={room}
                     key={`room-${room.roomId}`}
+                    resizeNotifier={this.props.resizeNotifier}
                     showMessagePreview={this.layout.showPreviews}
                     isMinimized={this.props.isMinimized}
                     tag={this.props.tagId}
@@ -757,6 +765,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             'mx_RoomSublist': true,
             'mx_RoomSublist_hasMenuOpen': !!this.state.contextMenuPosition,
             'mx_RoomSublist_minimized': this.props.isMinimized,
+            'mx_RoomSublist_hidden': (
+                !this.state.rooms.length && !this.props.extraTiles?.length && this.props.alwaysVisible !== true
+            ),
         });
 
         let content = null;

src/components/views/rooms/RoomTile.tsx

@@ -1,8 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
 Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-2017, 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.
@@ -19,6 +17,7 @@ limitations under the License.
 
 import React, { createRef } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import classNames from "classnames";
 import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
 import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
@@ -51,12 +50,17 @@ import IconizedContextMenu, {
     IconizedContextMenuRadio,
 } from "../context_menus/IconizedContextMenu";
 import { CommunityPrototypeStore, IRoomProfile } from "../../../stores/CommunityPrototypeStore";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { getUnsentMessages } from "../../structures/RoomStatusBar";
+import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
+import { ResizeNotifier } from "../../../utils/ResizeNotifier";
 
 interface IProps {
     room: Room;
     showMessagePreview: boolean;
     isMinimized: boolean;
     tag: TagID;
+    resizeNotifier: ResizeNotifier;
 }
 
 type PartialDOMRect = Pick<DOMRect, "left" | "bottom">;
@@ -66,6 +70,7 @@ interface IState {
     notificationsMenuPosition: PartialDOMRect;
     generalMenuPosition: PartialDOMRect;
     messagePreview?: string;
+    hasUnsentEvents: boolean;
 }
 
 const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`;
@@ -78,6 +83,7 @@ const contextMenuBelow = (elementRect: PartialDOMRect) => {
     return {left, top, chevronFace};
 };
 
+@replaceableComponent("views.rooms.RoomTile")
 export default class RoomTile extends React.PureComponent<IProps, IState> {
     private dispatcherRef: string;
     private roomTileRef = createRef<HTMLDivElement>();
@@ -91,26 +97,20 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
             notificationsMenuPosition: null,
             generalMenuPosition: null,
+            hasUnsentEvents: this.countUnsentEvents() > 0,
 
             // generatePreview() will return nothing if the user has previews disabled
             messagePreview: this.generatePreview(),
         };
-
-        ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        MessagePreviewStore.instance.on(
-            MessagePreviewStore.getPreviewChangedEventName(this.props.room),
-            this.onRoomPreviewChanged,
-        );
         this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
-        this.notificationState.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
         this.roomProps = EchoChamber.forRoom(this.props.room);
-        this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
-        CommunityPrototypeStore.instance.on(
-            CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
-            this.onCommunityUpdate,
-        );
-        this.props.room.on("Room.name", this.onRoomNameUpdate);
+        if (this.props.resizeNotifier) {
+            this.props.resizeNotifier.on("middlePanelResized", this.onResize);
+        }
+    }
+
+    private countUnsentEvents(): number {
+        return getUnsentMessages(this.props.room).length;
     }
 
     private onRoomNameUpdate = (room) => {
@@ -121,6 +121,17 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         this.forceUpdate(); // notification state changed - update
     };
 
+    private onResize = () => {
+        if (this.showMessagePreview && !this.state.messagePreview) {
+            this.setState({messagePreview: this.generatePreview()});
+        }
+    };
+
+    private onLocalEchoUpdated = (ev: MatrixEvent, room: Room) => {
+        if (!room?.roomId === this.props.room.roomId) return;
+        this.setState({hasUnsentEvents: this.countUnsentEvents() > 0});
+    };
+
     private onRoomPropertyUpdate = (property: CachedRoomKey) => {
         if (property === CachedRoomKey.NotificationVolume) this.onNotificationUpdate();
         // else ignore - not important for this tile
@@ -165,6 +176,21 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         if (this.state.selected) {
             this.scrollIntoView();
         }
+
+        ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        MessagePreviewStore.instance.on(
+            MessagePreviewStore.getPreviewChangedEventName(this.props.room),
+            this.onRoomPreviewChanged,
+        );
+        this.notificationState.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+        this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
+        this.roomProps.on("Room.name", this.onRoomNameUpdate);
+        CommunityPrototypeStore.instance.on(
+            CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
+            this.onCommunityUpdate,
+        );
+        MatrixClientPeg.get().on("Room.localEchoUpdated", this.onLocalEchoUpdated);
     }
 
     public componentWillUnmount() {
@@ -180,8 +206,19 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             );
             this.props.room.off("Room.name", this.onRoomNameUpdate);
         }
+        if (this.props.resizeNotifier) {
+            this.props.resizeNotifier.off("middlePanelResized", this.onResize);
+        }
+        ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
         defaultDispatcher.unregister(this.dispatcherRef);
         this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+        this.roomProps.off(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
+        this.roomProps.off("Room.name", this.onRoomNameUpdate);
+        CommunityPrototypeStore.instance.off(
+            CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
+            this.onCommunityUpdate,
+        );
+        MatrixClientPeg.get()?.removeListener("Room.localEchoUpdated", this.onLocalEchoUpdated);
     }
 
     private onAction = (payload: ActionPayload) => {
@@ -331,6 +368,17 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         this.setState({generalMenuPosition: null}); // hide the menu
     };
 
+    private onInviteClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        dis.dispatch({
+            action: 'view_invite',
+            roomId: this.props.room.roomId,
+        });
+        this.setState({generalMenuPosition: null}); // hide the menu
+    };
+
     private async saveNotifState(ev: ButtonEvent, newState: Volume) {
         ev.preventDefault();
         ev.stopPropagation();
@@ -451,6 +499,8 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             const isLowPriority = roomTags.includes(DefaultTagID.LowPriority);
             const lowPriorityLabel = _t("Low Priority");
 
+            const userId = MatrixClientPeg.get().getUserId();
+            const canInvite = this.props.room.canInvite(userId);
             contextMenu = <IconizedContextMenu
                 {...contextMenuBelow(this.state.generalMenuPosition)}
                 onFinished={this.onCloseGeneralMenu}
@@ -470,7 +520,13 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
                         label={lowPriorityLabel}
                         iconClassName="mx_RoomTile_iconArrowDown"
                     />
-
+                    {canInvite ? (
+                        <IconizedContextMenuOption
+                            onClick={this.onInviteClick}
+                            label={_t("Invite People")}
+                            iconClassName="mx_RoomTile_iconInvite"
+                        />
+                    ) : null}
                     <IconizedContextMenuOption
                         onClick={this.onOpenRoomSettings}
                         label={_t("Settings")}
@@ -528,21 +584,38 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         let badge: React.ReactNode;
         if (!this.props.isMinimized) {
             // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below
-            badge = (
-                <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
-                    <NotificationBadge
-                        notification={this.notificationState}
-                        forceCount={false}
-                        roomId={this.props.room.roomId}
-                    />
-                </div>
-            );
+            if (this.state.hasUnsentEvents) {
+                // hardcode the badge to a danger state when there's unsent messages
+                badge = (
+                    <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
+                        <NotificationBadge
+                            notification={StaticNotificationState.RED_EXCLAMATION}
+                            forceCount={false}
+                            roomId={this.props.room.roomId}
+                        />
+                    </div>
+                );
+            } else if (this.notificationState) {
+                badge = (
+                    <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
+                        <NotificationBadge
+                            notification={this.notificationState}
+                            forceCount={false}
+                            roomId={this.props.room.roomId}
+                        />
+                    </div>
+                );
+            }
         }
 
         let messagePreview = null;
         if (this.showMessagePreview && this.state.messagePreview) {
             messagePreview = (
-                <div className="mx_RoomTile_messagePreview" id={messagePreviewId(this.props.room.roomId)}>
+                <div
+                    className="mx_RoomTile_messagePreview"
+                    id={messagePreviewId(this.props.room.roomId)}
+                    title={this.state.messagePreview}
+                >
                     {this.state.messagePreview}
                 </div>
             );

src/components/views/rooms/RoomUpgradeWarningBar.js

@@ -21,7 +21,9 @@ import Modal from '../../../Modal';
 
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.RoomUpgradeWarningBar")
 export default class RoomUpgradeWarningBar extends React.Component {
     static propTypes = {
         room: PropTypes.object.isRequired,

src/components/views/rooms/SearchBar.js

@@ -21,7 +21,9 @@ import classNames from "classnames";
 import { _t } from '../../../languageHandler';
 import {Key} from "../../../Keyboard";
 import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.SearchBar")
 export default class SearchBar extends React.Component {
     constructor(props) {
         super(props);

src/components/views/rooms/SearchResultTile.js

@@ -21,7 +21,9 @@ import * as sdk from '../../../index';
 import {haveTileForEvent} from "./EventTile";
 import SettingsStore from "../../../settings/SettingsStore";
 import {UIFeature} from "../../../settings/UIFeature";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.SearchResultTile")
 export default class SearchResultTile extends React.Component {
     static propTypes = {
         // a matrix-js-sdk SearchResult containing the details of this result

src/components/views/rooms/SendMessageComposer.js

@@ -33,21 +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);
@@ -111,12 +112,15 @@ export function isQuickReaction(model) {
     return false;
 }
 
+@replaceableComponent("views.rooms.SendMessageComposer")
 export default class SendMessageComposer extends React.Component {
     static propTypes = {
         room: PropTypes.object.isRequired,
         placeholder: PropTypes.string,
         permalinkCreator: PropTypes.object.isRequired,
         replyToEvent: PropTypes.object,
+        onChange: PropTypes.func,
+        disabled: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -144,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) {
@@ -262,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", {
@@ -287,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;
             }
@@ -304,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;
@@ -322,6 +323,7 @@ export default class SendMessageComposer extends React.Component {
             });
         } else {
             console.log("Command success.");
+            if (messageContent) return messageContent;
         }
     }
 
@@ -330,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");
@@ -371,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;
 
@@ -403,7 +415,9 @@ export default class SendMessageComposer extends React.Component {
         this._editorRef.clearUndoHistory();
         this._editorRef.focus();
         this._clearStoredEditorState();
-        dis.dispatch({action: "scroll_to_bottom"});
+        if (SettingsStore.getValue("scrollToBottomOnMessageSent")) {
+            dis.dispatch({action: "scroll_to_bottom"});
+        }
     }
 
     componentWillUnmount() {
@@ -448,16 +462,25 @@ 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();
         }
     }
 
     onAction = (payload) => {
+        // don't let the user into the composer if it is disabled - all of these branches lead
+        // to the cursor being in the composer
+        if (this.props.disabled) return;
+
         switch (payload.action) {
             case 'reply_to_event':
             case Action.FocusComposer:
@@ -483,9 +506,8 @@ export default class SendMessageComposer extends React.Component {
             member.rawDisplayName : userId;
         const caret = this._editorRef.getCaret();
         const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
-        // index is -1 if there are no parts but we only care for if this would be the part in position 0
-        const insertIndex = position.index > 0 ? position.index : 0;
-        const parts = partCreator.createMentionParts(insertIndex, displayName, userId);
+        // Insert suffix only if the caret is at the start of the composer
+        const parts = partCreator.createMentionParts(caret.offset === 0, displayName, userId);
         model.transform(() => {
             const addedLen = model.insert(parts, position);
             return model.positionForOffset(caret.offset + addedLen, true);
@@ -497,7 +519,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());
@@ -536,16 +558,22 @@ export default class SendMessageComposer extends React.Component {
         }
     }
 
+    onChange = () => {
+        if (this.props.onChange) this.props.onChange(this.model);
+    }
+
     render() {
         return (
             <div className="mx_SendMessageComposer" onClick={this.focusComposer} onKeyDown={this._onKeyDown}>
                 <BasicMessageComposer
+                    onChange={this.onChange}
                     ref={this._setEditorRef}
                     model={this.model}
                     room={this.props.room}
                     label={this.props.placeholder}
                     placeholder={this.props.placeholder}
                     onPaste={this._onPaste}
+                    disabled={this.props.disabled}
                 />
             </div>
         );

src/components/views/rooms/SimpleRoomHeader.js

@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 import AccessibleButton from '../elements/AccessibleButton';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 // cancel button which is shared between room header and simple room header
 export function CancelButton(props) {
@@ -36,6 +37,7 @@ export function CancelButton(props) {
  * A stripped-down room header used for things like the user settings
  * and room directory.
  */
+@replaceableComponent("views.rooms.SimpleRoomHeader")
 export default class SimpleRoomHeader extends React.Component {
     static propTypes = {
         title: PropTypes.string,

src/components/views/rooms/Stickerpicker.js

@@ -30,6 +30,7 @@ import {WidgetType} from "../../../widgets/WidgetType";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {Action} from "../../../dispatcher/actions";
 import {WidgetMessagingStore} from "../../../stores/widgets/WidgetMessagingStore";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 // This should be below the dialog level (4000), but above the rest of the UI (1000-2000).
 // We sit in a context menu, so this should be given to the context menu.
@@ -38,6 +39,7 @@ const STICKERPICKER_Z_INDEX = 3500;
 // Key to store the widget's AppTile under in PersistedElement
 const PERSISTED_ELEMENT_KEY = "stickerPicker";
 
+@replaceableComponent("views.rooms.Stickerpicker")
 export default class Stickerpicker extends React.Component {
     static currentWidget;
 
@@ -264,25 +266,25 @@ export default class Stickerpicker extends React.Component {
                             width: this.popoverWidth,
                         }}
                     >
-                    <PersistedElement persistKey={PERSISTED_ELEMENT_KEY} zIndex={STICKERPICKER_Z_INDEX}>
-                        <AppTile
-                            app={stickerApp}
-                            room={this.props.room}
-                            fullWidth={true}
-                            userId={MatrixClientPeg.get().credentials.userId}
-                            creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
-                            waitForIframeLoad={true}
-                            showMenubar={true}
-                            onEditClick={this._launchManageIntegrations}
-                            onDeleteClick={this._removeStickerpickerWidgets}
-                            showTitle={false}
-                            showCancel={false}
-                            showPopout={false}
-                            onMinimiseClick={this._onHideStickersClick}
-                            handleMinimisePointerEvents={true}
-                            userWidget={true}
-                        />
-                    </PersistedElement>
+                        <PersistedElement persistKey={PERSISTED_ELEMENT_KEY} zIndex={STICKERPICKER_Z_INDEX}>
+                            <AppTile
+                                app={stickerApp}
+                                room={this.props.room}
+                                fullWidth={true}
+                                userId={MatrixClientPeg.get().credentials.userId}
+                                creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
+                                waitForIframeLoad={true}
+                                showMenubar={true}
+                                onEditClick={this._launchManageIntegrations}
+                                onDeleteClick={this._removeStickerpickerWidgets}
+                                showTitle={false}
+                                showCancel={false}
+                                showPopout={false}
+                                onMinimiseClick={this._onHideStickersClick}
+                                handleMinimisePointerEvents={true}
+                                userWidget={true}
+                            />
+                        </PersistedElement>
                     </div>
                 </div>
             );

src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd.
+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.
@@ -15,31 +15,47 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {MatrixEvent} from "matrix-js-sdk";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
 import {_t} from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import * as sdk from "../../../index";
 import Modal from "../../../Modal";
 import {isValid3pidInvite} from "../../../RoomInvite";
+import RoomAvatar from "../avatars/RoomAvatar";
+import RoomName from "../elements/RoomName";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SettingsStore from "../../../settings/SettingsStore";
 
-export default class ThirdPartyMemberInfo extends React.Component {
-    static propTypes = {
-        event: PropTypes.instanceOf(MatrixEvent).isRequired,
-    };
+interface IProps {
+    event: MatrixEvent;
+}
+
+interface IState {
+    stateKey: string;
+    roomId: string;
+    displayName: string;
+    invited: boolean;
+    canKick: boolean;
+    senderName: string;
+}
+
+@replaceableComponent("views.rooms.ThirdPartyMemberInfo")
+export default class ThirdPartyMemberInfo extends React.Component<IProps, IState> {
+    private room: Room;
 
     constructor(props) {
         super(props);
 
-        const room = MatrixClientPeg.get().getRoom(this.props.event.getRoomId());
-        const me = room.getMember(MatrixClientPeg.get().getUserId());
-        const powerLevels = room.currentState.getStateEvents("m.room.power_levels", "");
+        this.room = MatrixClientPeg.get().getRoom(this.props.event.getRoomId());
+        const me = this.room.getMember(MatrixClientPeg.get().getUserId());
+        const powerLevels = this.room.currentState.getStateEvents("m.room.power_levels", "");
 
         let kickLevel = powerLevels ? powerLevels.getContent().kick : 50;
         if (typeof(kickLevel) !== 'number') kickLevel = 50;
 
-        const sender = room.getMember(this.props.event.getSender());
+        const sender = this.room.getMember(this.props.event.getSender());
 
         this.state = {
             stateKey: this.props.event.getStateKey(),
@@ -119,9 +135,18 @@ export default class ThirdPartyMemberInfo extends React.Component {
             );
         }
 
+        let scopeHeader;
+        if (SettingsStore.getValue("feature_spaces") && this.room.isSpaceRoom()) {
+            scopeHeader = <div className="mx_RightPanel_scopeHeader">
+                <RoomAvatar room={this.room} height={32} width={32} />
+                <RoomName room={this.room} />
+            </div>;
+        }
+
         // We shamelessly rip off the MemberInfo styles here.
         return (
             <div className="mx_MemberInfo" role="tabpanel">
+                { scopeHeader }
                 <div className="mx_MemberInfo_name">
                     <AccessibleButton className="mx_MemberInfo_cancel"
                         onClick={this.onCancel}

src/components/views/rooms/TopUnreadMessagesBar.js

@@ -20,7 +20,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.TopUnreadMessagesBar")
 export default class TopUnreadMessagesBar extends React.Component {
     static propTypes = {
         onScrollUpClick: PropTypes.func,

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -0,0 +1,230 @@
+/*
+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, {ReactNode} from "react";
+import {RecordingState, VoiceRecording} from "../../../voice/VoiceRecording";
+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";
+import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
+import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import RecordingPlayback from "../voice_messages/RecordingPlayback";
+import {MsgType} from "matrix-js-sdk/src/@types/event";
+import Modal from "../../../Modal";
+import ErrorDialog from "../dialogs/ErrorDialog";
+import CallMediaHandler from "../../../CallMediaHandler";
+
+interface IProps {
+    room: Room;
+}
+
+interface IState {
+    recorder?: VoiceRecording;
+    recordingPhase?: RecordingState;
+}
+
+/**
+ * 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, // no recording started by default
+        };
+    }
+
+    public async componentWillUnmount() {
+        await VoiceRecordingStore.instance.disposeRecording();
+    }
+
+    // called by composer
+    public async send() {
+        if (!this.state.recorder) {
+            throw new Error("No recording started - cannot send anything");
+        }
+
+        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",
+            "msgtype": MsgType.Audio,
+            "url": mxc,
+            "info": {
+                duration: Math.round(this.state.recorder.durationSeconds * 1000),
+                mimetype: this.state.recorder.contentType,
+                size: this.state.recorder.contentLength,
+            },
+
+            // MSC1767 experiment
+            "org.matrix.msc1767.text": "Voice message",
+            "org.matrix.msc1767.file": {
+                url: mxc,
+                name: "Voice message.ogg",
+                mimetype: this.state.recorder.contentType,
+                size: this.state.recorder.contentLength,
+            },
+            "org.matrix.msc1767.audio": {
+                duration: Math.round(this.state.recorder.durationSeconds * 1000),
+
+                // Events can't have floats, so we try to maintain resolution by using 1024
+                // as a maximum value. The waveform contains values between zero and 1, so this
+                // should come out largely sane.
+                //
+                // We're expecting about one data point per second of audio.
+                waveform: this.state.recorder.getPlayback().waveform.map(v => Math.round(v * 1024)),
+            },
+            "org.matrix.msc2516.voice": {}, // No content, this is a rendering hint
+        });
+        await this.disposeRecording();
+    }
+
+    private async disposeRecording() {
+        await VoiceRecordingStore.instance.disposeRecording();
+
+        // Reset back to no recording, which means no phase (ie: restart component entirely)
+        this.setState({recorder: null, recordingPhase: null});
+    }
+
+    private onCancel = async () => {
+        await this.disposeRecording();
+    };
+
+    private onRecordStartEndClick = async () => {
+        if (this.state.recorder) {
+            await this.state.recorder.stop();
+            return;
+        }
+
+        // The "microphone access error" dialogs are used a lot, so let's functionify them
+        const accessError = () => {
+            Modal.createTrackedDialog('Microphone Access Error', '', ErrorDialog, {
+                title: _t("Unable to access your microphone"),
+                description: <>
+                    <p>{_t(
+                        "We were unable to access your microphone. Please check your browser settings and try again.",
+                    )}</p>
+                </>,
+            });
+        };
+
+        // Do a sanity test to ensure we're about to grab a valid microphone reference. Things might
+        // change between this and recording, but at least we will have tried.
+        try {
+            const devices = await CallMediaHandler.getDevices();
+            if (!devices?.['audioinput']?.length) {
+                Modal.createTrackedDialog('No Microphone Error', '', ErrorDialog, {
+                    title: _t("No microphone found"),
+                    description: <>
+                        <p>{_t(
+                            "We didn't find a microphone on your device. Please check your settings and try again.",
+                        )}</p>
+                    </>,
+                });
+                return;
+            }
+            // else we probably have a device that is good enough
+        } catch (e) {
+            console.error("Error getting devices: ", e);
+            accessError();
+            return;
+        }
+
+        try {
+            const recorder = VoiceRecordingStore.instance.startRecording();
+            await recorder.start();
+
+            // We don't need to remove the listener: the recorder will clean that up for us.
+            recorder.on(UPDATE_EVENT, (ev: RecordingState) => {
+                if (ev === RecordingState.EndingSoon) return; // ignore this state: it has no UI purpose here
+                this.setState({recordingPhase: ev});
+            });
+
+            this.setState({recorder, recordingPhase: RecordingState.Started});
+        } catch (e) {
+            console.error("Error starting recording: ", e);
+            accessError();
+
+            // noinspection ES6MissingAwait - if this goes wrong we don't want it to affect the call stack
+            VoiceRecordingStore.instance.disposeRecording();
+        }
+    };
+
+    private renderWaveformArea(): ReactNode {
+        if (!this.state.recorder) return null; // no recorder means we're not recording: no waveform
+
+        if (this.state.recordingPhase !== RecordingState.Started) {
+            // TODO: @@ TR: Should we disable this during upload? What does a failed upload look like?
+            return <RecordingPlayback playback={this.state.recorder.getPlayback()} />;
+        }
+
+        // only other UI is the recording-in-progress UI
+        return <div className="mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
+            <LiveRecordingClock recorder={this.state.recorder} />
+            <LiveRecordingWaveform recorder={this.state.recorder} />
+        </div>;
+    }
+
+    public render(): ReactNode {
+        let recordingInfo;
+        let deleteButton;
+        if (!this.state.recordingPhase || this.state.recordingPhase === RecordingState.Started) {
+            const classes = classNames({
+                'mx_MessageComposer_button': !this.state.recorder,
+                'mx_MessageComposer_voiceMessage': !this.state.recorder,
+                'mx_VoiceRecordComposerTile_stop': this.state.recorder?.isRecording,
+            });
+
+            let tooltip = _t("Record a voice message");
+            if (!!this.state.recorder) {
+                tooltip = _t("Stop the recording");
+            }
+
+            let stopOrRecordBtn = <AccessibleTooltipButton
+                className={classes}
+                onClick={this.onRecordStartEndClick}
+                title={tooltip}
+            />;
+            if (this.state.recorder && !this.state.recorder?.isRecording) {
+                stopOrRecordBtn = null;
+            }
+
+            recordingInfo = stopOrRecordBtn;
+        }
+
+        if (this.state.recorder && this.state.recordingPhase !== RecordingState.Uploading) {
+            deleteButton = <AccessibleTooltipButton
+                className='mx_VoiceRecordComposerTile_delete'
+                title={_t("Delete recording")}
+                onClick={this.onCancel}
+            />;
+        }
+
+        return (<>
+            {deleteButton}
+            {this.renderWaveformArea()}
+            {recordingInfo}
+        </>);
+    }
+}

src/components/views/rooms/WhoIsTypingTile.js

@@ -21,7 +21,9 @@ import * as WhoIsTyping from '../../../WhoIsTyping';
 import Timer from '../../../utils/Timer';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import MemberAvatar from '../avatars/MemberAvatar';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.rooms.WhoIsTypingTile")
 export default class WhoIsTypingTile extends React.Component {
     static propTypes = {
         // the room this statusbar is representing.