Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering

src/components/views/rooms/Autocomplete.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, {createRef, KeyboardEvent} from 'react';
 import classNames from 'classnames';
 import flatMap from 'lodash/flatMap';
 import {ICompletion, ISelectionRange, IProviderCompletions} from '../../../autocomplete/Autocompleter';

src/components/views/rooms/AuxPanel.js

@@ -28,6 +28,7 @@ import classNames from 'classnames';
 import RateLimitedFunc from '../../../ratelimitedfunc';
 import SettingsStore from "../../../settings/SettingsStore";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import CallView from "../voip/CallView";
 
 
 export default createReactClass({
@@ -142,7 +143,6 @@ export default createReactClass({
     },
 
     render: function() {
-        const CallView = sdk.getComponent("voip.CallView");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         let fileDropTarget = null;

src/components/views/rooms/BasicMessageComposer.tsx

@@ -16,11 +16,13 @@ limitations under the License.
 */
 
 import classNames from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {createRef, ClipboardEvent} from 'react';
+import {Room} from 'matrix-js-sdk/src/models/room';
+import EMOTICON_REGEX from 'emojibase-regex/emoticon';
+
 import EditorModel from '../../../editor/model';
 import HistoryManager from '../../../editor/history';
-import {setSelection} from '../../../editor/caret';
+import {Caret, setSelection} from '../../../editor/caret';
 import {
     formatRangeAsQuote,
     formatRangeAsCode,
@@ -29,17 +31,21 @@ import {
 } from '../../../editor/operations';
 import {getCaretOffsetAndText, getRangeForSelection} from '../../../editor/dom';
 import Autocomplete, {generateCompletionDomId} from '../rooms/Autocomplete';
-import {autoCompleteCreator} from '../../../editor/parts';
+import {getAutoCompleteCreator} from '../../../editor/parts';
 import {parsePlainTextMessage} from '../../../editor/deserialize';
 import {renderModel} from '../../../editor/render';
-import {Room} from 'matrix-js-sdk';
 import TypingStore from "../../../stores/TypingStore";
 import SettingsStore from "../../../settings/SettingsStore";
-import EMOTICON_REGEX from 'emojibase-regex/emoticon';
-import * as sdk from '../../../index';
 import {Key} from "../../../Keyboard";
 import {EMOTICON_TO_EMOJI} from "../../../emoji";
 import {CommandCategories, CommandMap, parseCommandString} from "../../../SlashCommands";
+import Range from "../../../editor/range";
+import MessageComposerFormatBar from "./MessageComposerFormatBar";
+import DocumentOffset from "../../../editor/offset";
+import {IDiff} from "../../../editor/diff";
+import AutocompleteWrapperModel from "../../../editor/autocomplete";
+import DocumentPosition from "../../../editor/position";
+import {ICompletion} from "../../../autocomplete/Autocompleter";
 
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
 
@@ -49,7 +55,7 @@ function ctrlShortcutLabel(key) {
     return (IS_MAC ? "⌘" : "Ctrl") + "+" + key;
 }
 
-function cloneSelection(selection) {
+function cloneSelection(selection: Selection): Partial<Selection> {
     return {
         anchorNode: selection.anchorNode,
         anchorOffset: selection.anchorOffset,
@@ -61,7 +67,7 @@ function cloneSelection(selection) {
     };
 }
 
-function selectionEquals(a: Selection, b: Selection): boolean {
+function selectionEquals(a: Partial<Selection>, b: Selection): boolean {
     return a.anchorNode === b.anchorNode &&
         a.anchorOffset === b.anchorOffset &&
         a.focusNode === b.focusNode &&
@@ -71,45 +77,75 @@ function selectionEquals(a: Selection, b: Selection): boolean {
         a.type === b.type;
 }
 
-export default class BasicMessageEditor extends React.Component {
-    static propTypes = {
-        onChange: PropTypes.func,
-        onPaste: PropTypes.func, // returns true if handled and should skip internal onPaste handler
-        model: PropTypes.instanceOf(EditorModel).isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-        placeholder: PropTypes.string,
-        label: PropTypes.string,    // the aria label
-        initialCaret: PropTypes.object, // See DocumentPosition in editor/model.js
-    };
+enum Formatting {
+    Bold = "bold",
+    Italics = "italics",
+    Strikethrough = "strikethrough",
+    Code = "code",
+    Quote = "quote",
+}
+
+interface IProps {
+    model: EditorModel;
+    room: Room;
+    placeholder?: string;
+    label?: string;
+    initialCaret?: DocumentOffset;
+
+    onChange();
+    onPaste(event: ClipboardEvent<HTMLDivElement>, model: EditorModel): boolean;
+}
+
+interface IState {
+    showPillAvatar: boolean;
+    query?: string;
+    showVisualBell?: boolean;
+    autoComplete?: AutocompleteWrapperModel;
+    completionIndex?: number;
+}
+
+export default class BasicMessageEditor extends React.Component<IProps, IState> {
+    private editorRef = createRef<HTMLDivElement>();
+    private autocompleteRef = createRef<Autocomplete>();
+    private formatBarRef = createRef<typeof MessageComposerFormatBar>();
+
+    private modifiedFlag = false;
+    private isIMEComposing = false;
+    private hasTextSelected = false;
+
+    private _isCaretAtEnd: boolean;
+    private lastCaret: DocumentOffset;
+    private lastSelection: ReturnType<typeof cloneSelection>;
+
+    private readonly emoticonSettingHandle: string;
+    private readonly shouldShowPillAvatarSettingHandle: string;
+    private readonly historyManager = new HistoryManager();
 
     constructor(props) {
         super(props);
         this.state = {
-            autoComplete: null,
             showPillAvatar: SettingsStore.getValue("Pill.shouldShowPillAvatar"),
         };
-        this._editorRef = null;
-        this._autocompleteRef = null;
-        this._formatBarRef = null;
-        this._modifiedFlag = false;
-        this._isIMEComposing = false;
-        this._hasTextSelected = false;
-        this._emoticonSettingHandle = null;
-        this._shouldShowPillAvatarSettingHandle = null;
+
+        this.emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null,
+            this.configureEmoticonAutoReplace);
+        this.configureEmoticonAutoReplace();
+        this.shouldShowPillAvatarSettingHandle = SettingsStore.watchSetting("Pill.shouldShowPillAvatar", null,
+            this.configureShouldShowPillAvatar);
     }
 
-    componentDidUpdate(prevProps) {
+    public componentDidUpdate(prevProps: IProps) {
         if (this.props.placeholder !== prevProps.placeholder && this.props.placeholder) {
             const {isEmpty} = this.props.model;
             if (isEmpty) {
-                this._showPlaceholder();
+                this.showPlaceholder();
             } else {
-                this._hidePlaceholder();
+                this.hidePlaceholder();
             }
         }
     }
 
-    _replaceEmoticon = (caretPosition, inputType, diff) => {
+    private replaceEmoticon = (caretPosition: DocumentPosition) => {
         const {model} = this.props;
         const range = model.startRange(caretPosition);
         // expand range max 8 characters backwards from caretPosition,
@@ -139,30 +175,30 @@ export default class BasicMessageEditor extends React.Component {
                 return range.replace([partCreator.plain(data.unicode + " ")]);
             }
         }
-    }
+    };
 
-    _updateEditorState = (selection, inputType, diff) => {
-        renderModel(this._editorRef, this.props.model);
+    private updateEditorState = (selection: Caret, inputType?: string, diff?: IDiff) => {
+        renderModel(this.editorRef.current, this.props.model);
         if (selection) { // set the caret/selection
             try {
-                setSelection(this._editorRef, this.props.model, selection);
+                setSelection(this.editorRef.current, this.props.model, selection);
             } catch (err) {
                 console.error(err);
             }
             // if caret selection is a range, take the end position
-            const position = selection.end || selection;
-            this._setLastCaretFromPosition(position);
+            const position = selection instanceof Range ? selection.end : selection;
+            this.setLastCaretFromPosition(position);
         }
         const {isEmpty} = this.props.model;
         if (this.props.placeholder) {
             if (isEmpty) {
-                this._showPlaceholder();
+                this.showPlaceholder();
             } else {
-                this._hidePlaceholder();
+                this.hidePlaceholder();
             }
         }
         if (isEmpty) {
-            this._formatBarRef.hide();
+            this.formatBarRef.current.hide();
         }
         this.setState({autoComplete: this.props.model.autoComplete});
         this.historyManager.tryPush(this.props.model, selection, inputType, diff);
@@ -180,26 +216,28 @@ export default class BasicMessageEditor extends React.Component {
         if (this.props.onChange) {
             this.props.onChange();
         }
+    };
+
+    private showPlaceholder() {
+        // escape single quotes
+        const placeholder = this.props.placeholder.replace(/'/g, '\\\'');
+        this.editorRef.current.style.setProperty("--placeholder", `'${placeholder}'`);
+        this.editorRef.current.classList.add("mx_BasicMessageComposer_inputEmpty");
     }
 
-    _showPlaceholder() {
-        this._editorRef.style.setProperty("--placeholder", `'${this.props.placeholder}'`);
-        this._editorRef.classList.add("mx_BasicMessageComposer_inputEmpty");
+    private hidePlaceholder() {
+        this.editorRef.current.classList.remove("mx_BasicMessageComposer_inputEmpty");
+        this.editorRef.current.style.removeProperty("--placeholder");
     }
 
-    _hidePlaceholder() {
-        this._editorRef.classList.remove("mx_BasicMessageComposer_inputEmpty");
-        this._editorRef.style.removeProperty("--placeholder");
-    }
-
-    _onCompositionStart = (event) => {
-        this._isIMEComposing = true;
+    private onCompositionStart = () => {
+        this.isIMEComposing = true;
         // even if the model is empty, the composition text shouldn't be mixed with the placeholder
-        this._hidePlaceholder();
-    }
+        this.hidePlaceholder();
+    };
 
-    _onCompositionEnd = (event) => {
-        this._isIMEComposing = false;
+    private onCompositionEnd = () => {
+        this.isIMEComposing = false;
         // some browsers (Chrome) don't fire an input event after ending a composition,
         // so trigger a model update after the composition is done by calling the input handler.
 
@@ -213,48 +251,48 @@ export default class BasicMessageEditor extends React.Component {
         const isSafari = ua.includes('safari/') && !ua.includes('chrome/');
 
         if (isSafari) {
-            this._onInput({inputType: "insertCompositionText"});
+            this.onInput({inputType: "insertCompositionText"});
         } else {
             Promise.resolve().then(() => {
-                this._onInput({inputType: "insertCompositionText"});
+                this.onInput({inputType: "insertCompositionText"});
             });
         }
-    }
+    };
 
-    isComposing(event) {
+    isComposing(event: React.KeyboardEvent) {
         // checking the event.isComposing flag just in case any browser out there
         // emits events related to the composition after compositionend
         // has been fired
-        return !!(this._isIMEComposing || (event.nativeEvent && event.nativeEvent.isComposing));
+        return !!(this.isIMEComposing || (event.nativeEvent && event.nativeEvent.isComposing));
     }
 
-    _onCutCopy = (event, type) => {
+    private onCutCopy = (event: ClipboardEvent, type: string) => {
         const selection = document.getSelection();
         const text = selection.toString();
         if (text) {
             const {model} = this.props;
-            const range = getRangeForSelection(this._editorRef, model, selection);
+            const range = getRangeForSelection(this.editorRef.current, model, selection);
             const selectedParts = range.parts.map(p => p.serialize());
             event.clipboardData.setData("application/x-riot-composer", JSON.stringify(selectedParts));
             event.clipboardData.setData("text/plain", text); // so plain copy/paste works
             if (type === "cut") {
                 // Remove the text, updating the model as appropriate
-                this._modifiedFlag = true;
+                this.modifiedFlag = true;
                 replaceRangeAndMoveCaret(range, []);
             }
             event.preventDefault();
         }
-    }
+    };
 
-    _onCopy = (event) => {
-        this._onCutCopy(event, "copy");
-    }
+    private onCopy = (event: ClipboardEvent) => {
+        this.onCutCopy(event, "copy");
+    };
 
-    _onCut = (event) => {
-        this._onCutCopy(event, "cut");
-    }
+    private onCut = (event: ClipboardEvent) => {
+        this.onCutCopy(event, "cut");
+    };
 
-    _onPaste = (event) => {
+    private onPaste = (event: ClipboardEvent<HTMLDivElement>) => {
         event.preventDefault(); // we always handle the paste ourselves
         if (this.props.onPaste && this.props.onPaste(event, this.props.model)) {
             // to prevent double handling, allow props.onPaste to skip internal onPaste
@@ -273,28 +311,28 @@ export default class BasicMessageEditor extends React.Component {
             const text = event.clipboardData.getData("text/plain");
             parts = parsePlainTextMessage(text, partCreator);
         }
-        this._modifiedFlag = true;
-        const range = getRangeForSelection(this._editorRef, model, document.getSelection());
+        this.modifiedFlag = true;
+        const range = getRangeForSelection(this.editorRef.current, model, document.getSelection());
         replaceRangeAndMoveCaret(range, parts);
-    }
+    };
 
-    _onInput = (event) => {
+    private onInput = (event: Partial<InputEvent>) => {
         // ignore any input while doing IME compositions
-        if (this._isIMEComposing) {
+        if (this.isIMEComposing) {
             return;
         }
-        this._modifiedFlag = true;
+        this.modifiedFlag = true;
         const sel = document.getSelection();
-        const {caret, text} = getCaretOffsetAndText(this._editorRef, sel);
+        const {caret, text} = getCaretOffsetAndText(this.editorRef.current, sel);
         this.props.model.update(text, event.inputType, caret);
-    }
+    };
 
-    _insertText(textToInsert, inputType = "insertText") {
+    private insertText(textToInsert: string, inputType = "insertText") {
         const sel = document.getSelection();
-        const {caret, text} = getCaretOffsetAndText(this._editorRef, sel);
+        const {caret, text} = getCaretOffsetAndText(this.editorRef.current, sel);
         const newText = text.substr(0, caret.offset) + textToInsert + text.substr(caret.offset);
         caret.offset += textToInsert.length;
-        this._modifiedFlag = true;
+        this.modifiedFlag = true;
         this.props.model.update(newText, inputType, caret);
     }
 
@@ -303,28 +341,28 @@ export default class BasicMessageEditor extends React.Component {
     // we don't need to. But if the user is navigating the caret without input
     // we need to recalculate it, to be able to know where to insert content after
     // losing focus
-    _setLastCaretFromPosition(position) {
+    private setLastCaretFromPosition(position: DocumentPosition) {
         const {model} = this.props;
         this._isCaretAtEnd = position.isAtEnd(model);
-        this._lastCaret = position.asOffset(model);
-        this._lastSelection = cloneSelection(document.getSelection());
+        this.lastCaret = position.asOffset(model);
+        this.lastSelection = cloneSelection(document.getSelection());
     }
 
-    _refreshLastCaretIfNeeded() {
+    private refreshLastCaretIfNeeded() {
         // XXX: needed when going up and down in editing messages ... not sure why yet
         // because the editors should stop doing this when when blurred ...
         // maybe it's on focus and the _editorRef isn't available yet or something.
-        if (!this._editorRef) {
+        if (!this.editorRef.current) {
             return;
         }
         const selection = document.getSelection();
-        if (!this._lastSelection || !selectionEquals(this._lastSelection, selection)) {
-            this._lastSelection = cloneSelection(selection);
-            const {caret, text} = getCaretOffsetAndText(this._editorRef, selection);
-            this._lastCaret = caret;
+        if (!this.lastSelection || !selectionEquals(this.lastSelection, selection)) {
+            this.lastSelection = cloneSelection(selection);
+            const {caret, text} = getCaretOffsetAndText(this.editorRef.current, selection);
+            this.lastCaret = caret;
             this._isCaretAtEnd = caret.offset === text.length;
         }
-        return this._lastCaret;
+        return this.lastCaret;
     }
 
     clearUndoHistory() {
@@ -332,11 +370,11 @@ export default class BasicMessageEditor extends React.Component {
     }
 
     getCaret() {
-        return this._lastCaret;
+        return this.lastCaret;
     }
 
     isSelectionCollapsed() {
-        return !this._lastSelection || this._lastSelection.isCollapsed;
+        return !this.lastSelection || this.lastSelection.isCollapsed;
     }
 
     isCaretAtStart() {
@@ -347,51 +385,51 @@ export default class BasicMessageEditor extends React.Component {
         return this._isCaretAtEnd;
     }
 
-    _onBlur = () => {
-        document.removeEventListener("selectionchange", this._onSelectionChange);
-    }
+    private onBlur = () => {
+        document.removeEventListener("selectionchange", this.onSelectionChange);
+    };
 
-    _onFocus = () => {
-        document.addEventListener("selectionchange", this._onSelectionChange);
+    private onFocus = () => {
+        document.addEventListener("selectionchange", this.onSelectionChange);
         // force to recalculate
-        this._lastSelection = null;
-        this._refreshLastCaretIfNeeded();
-    }
+        this.lastSelection = null;
+        this.refreshLastCaretIfNeeded();
+    };
 
-    _onSelectionChange = () => {
+    private onSelectionChange = () => {
         const {isEmpty} = this.props.model;
 
-        this._refreshLastCaretIfNeeded();
+        this.refreshLastCaretIfNeeded();
         const selection = document.getSelection();
-        if (this._hasTextSelected && selection.isCollapsed) {
-            this._hasTextSelected = false;
-            if (this._formatBarRef) {
-                this._formatBarRef.hide();
+        if (this.hasTextSelected && selection.isCollapsed) {
+            this.hasTextSelected = false;
+            if (this.formatBarRef.current) {
+                this.formatBarRef.current.hide();
             }
         } else if (!selection.isCollapsed && !isEmpty) {
-            this._hasTextSelected = true;
-            if (this._formatBarRef) {
+            this.hasTextSelected = true;
+            if (this.formatBarRef.current) {
                 const selectionRect = selection.getRangeAt(0).getBoundingClientRect();
-                this._formatBarRef.showAt(selectionRect);
+                this.formatBarRef.current.showAt(selectionRect);
             }
         }
-    }
+    };
 
-    _onKeyDown = (event) => {
+    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("bold");
+            this.onFormatAction(Formatting.Bold);
             handled = true;
         // format italics
         } else if (modKey && event.key === Key.I) {
-            this._onFormatAction("italics");
+            this.onFormatAction(Formatting.Italics);
             handled = true;
         // format quote
         } else if (modKey && event.key === Key.GREATER_THAN) {
-            this._onFormatAction("quote");
+            this.onFormatAction(Formatting.Quote);
             handled = true;
         // redo
         } else if ((!IS_MAC && modKey && event.key === Key.Y) ||
@@ -414,18 +452,18 @@ export default class BasicMessageEditor extends React.Component {
             handled = true;
         // insert newline on Shift+Enter
         } else if (event.key === Key.ENTER && (event.shiftKey || (IS_MAC && event.altKey))) {
-            this._insertText("\n");
+            this.insertText("\n");
             handled = true;
         // move selection to start of composer
         } else if (modKey && event.key === Key.HOME && !event.shiftKey) {
-            setSelection(this._editorRef, model, {
+            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, model, {
+            setSelection(this.editorRef.current, model, {
                 index: model.parts.length - 1,
                 offset: model.parts[model.parts.length - 1].text.length,
             });
@@ -465,19 +503,19 @@ export default class BasicMessageEditor extends React.Component {
                         return; // don't preventDefault on anything else
                 }
             } else if (event.key === Key.TAB) {
-                this._tabCompleteName();
+                this.tabCompleteName(event);
                 handled = true;
             } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
-                this._formatBarRef.hide();
+                this.formatBarRef.current.hide();
             }
         }
         if (handled) {
             event.preventDefault();
             event.stopPropagation();
         }
-    }
+    };
 
-    async _tabCompleteName() {
+    private async tabCompleteName(event: React.KeyboardEvent) {
         try {
             await new Promise(resolve => this.setState({showVisualBell: false}, resolve));
             const {model} = this.props;
@@ -500,7 +538,7 @@ export default class BasicMessageEditor extends React.Component {
 
             // Don't try to do things with the autocomplete if there is none shown
             if (model.autoComplete) {
-                await model.autoComplete.onTab();
+                await model.autoComplete.onTab(event);
                 if (!model.autoComplete.hasSelection()) {
                     this.setState({showVisualBell: true});
                     model.autoComplete.close();
@@ -512,64 +550,58 @@ export default class BasicMessageEditor extends React.Component {
     }
 
     isModified() {
-        return this._modifiedFlag;
+        return this.modifiedFlag;
     }
 
-    _onAutoCompleteConfirm = (completion) => {
+    private onAutoCompleteConfirm = (completion: ICompletion) => {
         this.props.model.autoComplete.onComponentConfirm(completion);
-    }
-
-    _onAutoCompleteSelectionChange = (completion, completionIndex) => {
-        this.props.model.autoComplete.onComponentSelectionChange(completion);
-        this.setState({completionIndex});
-    }
-
-    _configureEmoticonAutoReplace = () => {
-        const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
-        this.props.model.setTransformCallback(shouldReplace ? this._replaceEmoticon : null);
     };
 
-    _configureShouldShowPillAvatar = () => {
+    private onAutoCompleteSelectionChange = (completion: ICompletion, completionIndex: number) => {
+        this.props.model.autoComplete.onComponentSelectionChange(completion);
+        this.setState({completionIndex});
+    };
+
+    private configureEmoticonAutoReplace = () => {
+        const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
+        this.props.model.setTransformCallback(shouldReplace ? this.replaceEmoticon : null);
+    };
+
+    private configureShouldShowPillAvatar = () => {
         const showPillAvatar = SettingsStore.getValue("Pill.shouldShowPillAvatar");
         this.setState({ showPillAvatar });
     };
 
     componentWillUnmount() {
-        document.removeEventListener("selectionchange", this._onSelectionChange);
-        this._editorRef.removeEventListener("input", this._onInput, true);
-        this._editorRef.removeEventListener("compositionstart", this._onCompositionStart, true);
-        this._editorRef.removeEventListener("compositionend", this._onCompositionEnd, true);
-        SettingsStore.unwatchSetting(this._emoticonSettingHandle);
-        SettingsStore.unwatchSetting(this._shouldShowPillAvatarSettingHandle);
+        document.removeEventListener("selectionchange", this.onSelectionChange);
+        this.editorRef.current.removeEventListener("input", this.onInput, true);
+        this.editorRef.current.removeEventListener("compositionstart", this.onCompositionStart, true);
+        this.editorRef.current.removeEventListener("compositionend", this.onCompositionEnd, true);
+        SettingsStore.unwatchSetting(this.emoticonSettingHandle);
+        SettingsStore.unwatchSetting(this.shouldShowPillAvatarSettingHandle);
     }
 
     componentDidMount() {
         const model = this.props.model;
-        model.setUpdateCallback(this._updateEditorState);
-        this._emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null,
-            this._configureEmoticonAutoReplace);
-        this._configureEmoticonAutoReplace();
-        this._shouldShowPillAvatarSettingHandle = SettingsStore.watchSetting("Pill.shouldShowPillAvatar", null,
-            this._configureShouldShowPillAvatar);
+        model.setUpdateCallback(this.updateEditorState);
         const partCreator = model.partCreator;
         // TODO: does this allow us to get rid of EditorStateTransfer?
         // not really, but we could not serialize the parts, and just change the autoCompleter
-        partCreator.setAutoCompleteCreator(autoCompleteCreator(
-            () => this._autocompleteRef,
+        partCreator.setAutoCompleteCreator(getAutoCompleteCreator(
+            () => this.autocompleteRef.current,
             query => new Promise(resolve => this.setState({query}, resolve)),
         ));
-        this.historyManager = new HistoryManager(partCreator);
         // initial render of model
-        this._updateEditorState(this._getInitialCaretPosition());
+        this.updateEditorState(this.getInitialCaretPosition());
         // attach input listener by hand so React doesn't proxy the events,
         // as the proxied event doesn't support inputType, which we need.
-        this._editorRef.addEventListener("input", this._onInput, true);
-        this._editorRef.addEventListener("compositionstart", this._onCompositionStart, true);
-        this._editorRef.addEventListener("compositionend", this._onCompositionEnd, true);
-        this._editorRef.focus();
+        this.editorRef.current.addEventListener("input", this.onInput, true);
+        this.editorRef.current.addEventListener("compositionstart", this.onCompositionStart, true);
+        this.editorRef.current.addEventListener("compositionend", this.onCompositionEnd, true);
+        this.editorRef.current.focus();
     }
 
-    _getInitialCaretPosition() {
+    private getInitialCaretPosition() {
         let caretPosition;
         if (this.props.initialCaret) {
             // if restoring state from a previous editor,
@@ -583,34 +615,34 @@ export default class BasicMessageEditor extends React.Component {
         return caretPosition;
     }
 
-    _onFormatAction = (action) => {
+    private onFormatAction = (action: Formatting) => {
         const range = getRangeForSelection(
-            this._editorRef,
+            this.editorRef.current,
             this.props.model,
             document.getSelection());
         if (range.length === 0) {
             return;
         }
         this.historyManager.ensureLastChangesPushed(this.props.model);
-        this._modifiedFlag = true;
+        this.modifiedFlag = true;
         switch (action) {
-            case "bold":
+            case Formatting.Bold:
                 toggleInlineFormat(range, "**");
                 break;
-            case "italics":
+            case Formatting.Italics:
                 toggleInlineFormat(range, "_");
                 break;
-            case "strikethrough":
+            case Formatting.Strikethrough:
                 toggleInlineFormat(range, "<del>", "</del>");
                 break;
-            case "code":
+            case Formatting.Code:
                 formatRangeAsCode(range);
                 break;
-            case "quote":
+            case Formatting.Quote:
                 formatRangeAsQuote(range);
                 break;
         }
-    }
+    };
 
     render() {
         let autoComplete;
@@ -619,10 +651,10 @@ export default class BasicMessageEditor extends React.Component {
             const queryLen = query.length;
             autoComplete = (<div className="mx_BasicMessageComposer_AutoCompleteWrapper">
                 <Autocomplete
-                    ref={ref => this._autocompleteRef = ref}
+                    ref={this.autocompleteRef}
                     query={query}
-                    onConfirm={this._onAutoCompleteConfirm}
-                    onSelectionChange={this._onAutoCompleteSelectionChange}
+                    onConfirm={this.onAutoCompleteConfirm}
+                    onSelectionChange={this.onAutoCompleteSelectionChange}
                     selection={{beginning: true, end: queryLen, start: queryLen}}
                     room={this.props.room}
                 />
@@ -635,7 +667,6 @@ export default class BasicMessageEditor extends React.Component {
             "mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar,
         });
 
-        const MessageComposerFormatBar = sdk.getComponent('rooms.MessageComposerFormatBar');
         const shortcuts = {
             bold: ctrlShortcutLabel("B"),
             italics: ctrlShortcutLabel("I"),
@@ -646,18 +677,18 @@ export default class BasicMessageEditor extends React.Component {
 
         return (<div className={wrapperClasses}>
             { autoComplete }
-            <MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} shortcuts={shortcuts} />
+            <MessageComposerFormatBar ref={this.formatBarRef} onAction={this.onFormatAction} shortcuts={shortcuts} />
             <div
                 className={classes}
                 contentEditable="true"
-                tabIndex="0"
-                onBlur={this._onBlur}
-                onFocus={this._onFocus}
-                onCopy={this._onCopy}
-                onCut={this._onCut}
-                onPaste={this._onPaste}
-                onKeyDown={this._onKeyDown}
-                ref={ref => this._editorRef = ref}
+                tabIndex={0}
+                onBlur={this.onBlur}
+                onFocus={this.onFocus}
+                onCopy={this.onCopy}
+                onCut={this.onCut}
+                onPaste={this.onPaste}
+                onKeyDown={this.onKeyDown}
+                ref={this.editorRef}
                 aria-label={this.props.label}
                 role="textbox"
                 aria-multiline="true"
@@ -671,6 +702,6 @@ export default class BasicMessageEditor extends React.Component {
     }
 
     focus() {
-        this._editorRef.focus();
+        this.editorRef.current.focus();
     }
 }

src/components/views/rooms/E2EIcon.js

@@ -28,6 +28,7 @@ export const E2E_STATE = {
     WARNING: "warning",
     UNKNOWN: "unknown",
     NORMAL: "normal",
+    UNAUTHENTICATED: "unauthenticated",
 };
 
 const crossSigningUserTitles = {
@@ -41,11 +42,12 @@ const crossSigningRoomTitles = {
     [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
 };
 
-const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
+const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordered}) => {
     const [hover, setHover] = useState(false);
 
     const classes = classNames({
         mx_E2EIcon: true,
+        mx_E2EIcon_bordered: bordered,
         mx_E2EIcon_warning: status === E2E_STATE.WARNING,
         mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
         mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,
@@ -64,7 +66,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
     }
 
     const onMouseOver = () => setHover(true);
-    const onMouseOut = () => setHover(false);
+    const onMouseLeave = () => setHover(false);
 
     let tip;
     if (hover && !hideTooltip) {
@@ -76,7 +78,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
             <AccessibleButton
                 onClick={onClick}
                 onMouseOver={onMouseOver}
-                onMouseOut={onMouseOut}
+                onMouseLeave={onMouseLeave}
                 className={classes}
                 style={style}
             >
@@ -85,7 +87,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
         );
     }
 
-    return <div onMouseOver={onMouseOver} onMouseOut={onMouseOut} className={classes} style={style}>
+    return <div onMouseOver={onMouseOver} onMouseLeave={onMouseLeave} className={classes} style={style}>
         { tip }
     </div>;
 };

src/components/views/rooms/EntityTile.js

@@ -170,7 +170,7 @@ const EntityTile = createReactClass({
         let e2eIcon;
         const { e2eStatus } = this.props;
         if (e2eStatus) {
-            e2eIcon = <E2EIcon status={e2eStatus} isUser={true} />;
+            e2eIcon = <E2EIcon status={e2eStatus} isUser={true} bordered={true} />;
         }
 
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');

src/components/views/rooms/EventTile.js

@@ -313,35 +313,52 @@ export default createReactClass({
             return;
         }
 
-        // If we directly trust the device, short-circuit here
-        const verified = await this.context.isEventSenderVerified(mxEvent);
-        if (verified) {
+        const encryptionInfo = this.context.getEventEncryptionInfo(mxEvent);
+        const senderId = mxEvent.getSender();
+        const userTrust = this.context.checkUserTrust(senderId);
+
+        if (encryptionInfo.mismatchedSender) {
+            // something definitely wrong is going on here
             this.setState({
-                verified: E2E_STATE.VERIFIED,
-            }, () => {
-                // Decryption may have caused a change in size
-                this.props.onHeightChanged();
-            });
+                verified: E2E_STATE.WARNING,
+            }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
-        if (!this.context.checkUserTrust(mxEvent.getSender()).isCrossSigningVerified()) {
+        if (!userTrust.isCrossSigningVerified()) {
+            // user is not verified, so default to everything is normal
             this.setState({
                 verified: E2E_STATE.NORMAL,
-            }, this.props.onHeightChanged);
+            }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
-        const eventSenderTrust = await this.context.checkEventSenderTrust(mxEvent);
+        const eventSenderTrust = encryptionInfo.sender && this.context.checkDeviceTrust(
+            senderId, encryptionInfo.sender.deviceId,
+        );
         if (!eventSenderTrust) {
             this.setState({
                 verified: E2E_STATE.UNKNOWN,
-            }, this.props.onHeightChanged); // Decryption may have cause a change in size
+            }, this.props.onHeightChanged); // Decryption may have caused a change in size
+            return;
+        }
+
+        if (!eventSenderTrust.isVerified()) {
+            this.setState({
+                verified: E2E_STATE.WARNING,
+            }, this.props.onHeightChanged); // Decryption may have caused a change in size
+            return;
+        }
+
+        if (!encryptionInfo.authenticated) {
+            this.setState({
+                verified: E2E_STATE.UNAUTHENTICATED,
+            }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
         this.setState({
-            verified: eventSenderTrust.isVerified() ? E2E_STATE.VERIFIED : E2E_STATE.WARNING,
+            verified: E2E_STATE.VERIFIED,
         }, this.props.onHeightChanged); // Decryption may have caused a change in size
     },
 
@@ -526,6 +543,8 @@ export default createReactClass({
                 return; // no icon if we've not even cross-signed the user
             } else if (this.state.verified === E2E_STATE.VERIFIED) {
                 return; // no icon for verified
+            } else if (this.state.verified === E2E_STATE.UNAUTHENTICATED) {
+                return (<E2ePadlockUnauthenticated />);
             } else if (this.state.verified === E2E_STATE.UNKNOWN) {
                 return (<E2ePadlockUnknown />);
             } else {
@@ -666,6 +685,9 @@ export default createReactClass({
             mx_EventTile_emote: msgtype === 'm.emote',
         });
 
+        // If the tile is in the Sending state, don't speak the message.
+        const ariaLive = (this.props.eventSendStatus !== null) ? 'off' : undefined;
+
         let permalink = "#";
         if (this.props.permalinkCreator) {
             permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
@@ -800,7 +822,7 @@ export default createReactClass({
             case 'notif': {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
                 return (
-                    <div className={classes}>
+                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         <div className="mx_EventTile_roomName">
                             <a href={permalink} onClick={this.onPermalinkClicked}>
                                 { room ? room.name : '' }
@@ -826,7 +848,7 @@ export default createReactClass({
             }
             case 'file_grid': {
                 return (
-                    <div className={classes}>
+                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         <div className="mx_EventTile_line">
                             <EventTileType ref={this._tile}
                                            mxEvent={this.props.mxEvent}
@@ -862,7 +884,7 @@ export default createReactClass({
                     );
                 }
                 return (
-                    <div className={classes}>
+                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         { ircTimestamp }
                         { avatar }
                         { sender }
@@ -892,7 +914,7 @@ export default createReactClass({
 
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return (
-                    <div className={classes} tabIndex={-1}>
+                    <div className={classes} tabIndex={-1} aria-live={ariaLive} aria-atomic="true">
                         { ircTimestamp }
                         <div className="mx_EventTile_msgOption">
                             { readAvatars }
@@ -976,6 +998,12 @@ 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} />
+    );
+}
+
 class E2ePadlock extends React.Component {
     static propTypes = {
         icon: PropTypes.string.isRequired,

src/components/views/rooms/InviteOnlyIcon.js

@@ -1,53 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
-
-export default class InviteOnlyIcon extends React.Component {
-    constructor() {
-        super();
-
-        this.state = {
-            hover: false,
-        };
-    }
-
-    onHoverStart = () => {
-        this.setState({hover: true});
-    };
-
-    onHoverEnd = () => {
-        this.setState({hover: false});
-    };
-
-    render() {
-        const classes = this.props.collapsedPanel ? "mx_InviteOnlyIcon_small": "mx_InviteOnlyIcon_large";
-
-        const Tooltip = sdk.getComponent("elements.Tooltip");
-        let tooltip;
-        if (this.state.hover) {
-            tooltip = <Tooltip className="mx_InviteOnlyIcon_tooltip" label={_t("Invite only")} dir="auto" />;
-        }
-        return (<div className={classes}
-          onMouseEnter={this.onHoverStart}
-          onMouseLeave={this.onHoverEnd}
-        >
-          { tooltip }
-        </div>);
-    }
-}

src/components/views/rooms/JumpToBottomButton.js

@@ -16,13 +16,18 @@ limitations under the License.
 
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
+import classNames from 'classnames';
 
 export default (props) => {
+    const className = classNames({
+        'mx_JumpToBottomButton': true,
+        'mx_JumpToBottomButton_highlight': props.highlight,
+    });
     let badge;
     if (props.numUnreadMessages) {
         badge = (<div className="mx_JumpToBottomButton_badge">{props.numUnreadMessages}</div>);
     }
-    return (<div className="mx_JumpToBottomButton">
+    return (<div className={className}>
         <AccessibleButton className="mx_JumpToBottomButton_scrollDown"
             title={_t("Scroll to most recent messages")}
             onClick={props.onScrollToBottomClick}>

src/components/views/rooms/MessageComposer.js

@@ -27,7 +27,8 @@ import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
 import SettingsStore from "../../../settings/SettingsStore";
-import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from "../../structures/ContextMenu";
+import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 function ComposerAvatar(props) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -41,7 +42,6 @@ ComposerAvatar.propTypes = {
 };
 
 function CallButton(props) {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
     const onVoiceCallClick = (ev) => {
         dis.dispatch({
             action: 'place_call',
@@ -50,10 +50,11 @@ function CallButton(props) {
         });
     };
 
-    return (<AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_voicecall"
-            onClick={onVoiceCallClick}
-            title={_t('Voice call')}
-        />);
+    return (<AccessibleTooltipButton
+        className="mx_MessageComposer_button mx_MessageComposer_voicecall"
+        onClick={onVoiceCallClick}
+        title={_t('Voice call')}
+    />);
 }
 
 CallButton.propTypes = {
@@ -61,7 +62,6 @@ CallButton.propTypes = {
 };
 
 function VideoCallButton(props) {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
     const onCallClick = (ev) => {
         dis.dispatch({
             action: 'place_call',
@@ -70,7 +70,8 @@ function VideoCallButton(props) {
         });
     };
 
-    return <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_videocall"
+    return <AccessibleTooltipButton
+        className="mx_MessageComposer_button mx_MessageComposer_videocall"
         onClick={onCallClick}
         title={_t('Video call')}
     />;
@@ -117,14 +118,15 @@ const EmojiButton = ({addEmoji}) => {
     }
 
     return <React.Fragment>
-        <ContextMenuButton className="mx_MessageComposer_button mx_MessageComposer_emoji"
-                           onClick={openMenu}
-                           isExpanded={menuDisplayed}
-                           label={_t('Emoji picker')}
-                           inputRef={button}
+        <ContextMenuTooltipButton
+            className="mx_MessageComposer_button mx_MessageComposer_emoji"
+            onClick={openMenu}
+            isExpanded={menuDisplayed}
+            title={_t('Emoji picker')}
+            inputRef={button}
         >
 
-        </ContextMenuButton>
+        </ContextMenuTooltipButton>
 
         { contextMenu }
     </React.Fragment>;
@@ -185,9 +187,9 @@ class UploadButton extends React.Component {
 
     render() {
         const uploadInputStyle = {display: 'none'};
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
-            <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_upload"
+            <AccessibleTooltipButton
+                className="mx_MessageComposer_button mx_MessageComposer_upload"
                 onClick={this.onUploadClick}
                 title={_t('Upload file')}
             >
@@ -198,7 +200,7 @@ class UploadButton extends React.Component {
                     multiple
                     onChange={this.onUploadFileInputChange}
                 />
-            </AccessibleButton>
+            </AccessibleTooltipButton>
         );
     }
 }

src/components/views/rooms/MessageComposerFormatBar.js

@@ -17,9 +17,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
 import classNames from 'classnames';
-import AccessibleButton from "../elements/AccessibleButton";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 export default class MessageComposerFormatBar extends React.PureComponent {
     static propTypes = {
@@ -68,28 +67,28 @@ class FormatButton extends React.PureComponent {
     };
 
     render() {
-        const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip');
         const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`;
         let shortcut;
         if (this.props.shortcut) {
             shortcut = <div className="mx_MessageComposerFormatBar_tooltipShortcut">{this.props.shortcut}</div>;
         }
-        const tooltipContent = (
-            <div className="mx_MessageComposerFormatBar_buttonTooltip">
-                <div>{this.props.label}</div>
+        const tooltip = <div>
+            <div className="mx_Tooltip_title">
+                {this.props.label}
+            </div>
+            <div className="mx_Tooltip_sub">
                 {shortcut}
             </div>
-        );
+        </div>;
 
         return (
-            <InteractiveTooltip content={tooltipContent} forceHidden={!this.props.visible}>
-                <AccessibleButton
-                    as="span"
-                    role="button"
-                    onClick={this.props.onClick}
-                    aria-label={this.props.label}
-                    className={className} />
-            </InteractiveTooltip>
+            <AccessibleTooltipButton
+                as="span"
+                role="button"
+                onClick={this.props.onClick}
+                title={this.props.label}
+                tooltip={tooltip}
+                className={className} />
         );
     }
 }

src/components/views/rooms/NotificationBadge.tsx

@@ -0,0 +1,137 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import classNames from "classnames";
+import { formatMinimalBadgeCount } from "../../../utils/FormattingUtils";
+import SettingsStore from "../../../settings/SettingsStore";
+import AccessibleButton from "../elements/AccessibleButton";
+import { XOR } from "../../../@types/common";
+import { NOTIFICATION_STATE_UPDATE, NotificationState } from "../../../stores/notifications/NotificationState";
+
+interface IProps {
+    notification: NotificationState;
+
+    /**
+     * 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;
+
+    /**
+     * The room ID, if any, the badge represents.
+     */
+    roomId?: string;
+}
+
+interface IClickableProps extends IProps, React.InputHTMLAttributes<Element> {
+    /**
+     * If specified will return an AccessibleButton instead of a div.
+     */
+    onClick?(ev: React.MouseEvent);
+}
+
+interface IState {
+    showCounts: boolean; // whether or not to show counts. Independent of props.forceCount
+}
+
+export default class NotificationBadge extends React.PureComponent<XOR<IProps, IClickableProps>, IState> {
+    private countWatcherRef: string;
+
+    constructor(props: IProps) {
+        super(props);
+        this.props.notification.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+
+        this.state = {
+            showCounts: SettingsStore.getValue("Notifications.alwaysShowBadgeCounts", this.roomId),
+        };
+
+        this.countWatcherRef = SettingsStore.watchSetting(
+            "Notifications.alwaysShowBadgeCounts", this.roomId,
+            this.countPreferenceChanged,
+        );
+    }
+
+    private get roomId(): string {
+        // We should convert this to null for safety with the SettingsStore
+        return this.props.roomId || null;
+    }
+
+    public componentWillUnmount() {
+        SettingsStore.unwatchSetting(this.countWatcherRef);
+        this.props.notification.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+    }
+
+    public componentDidUpdate(prevProps: Readonly<IProps>) {
+        if (prevProps.notification) {
+            prevProps.notification.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+        }
+
+        this.props.notification.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+    }
+
+    private countPreferenceChanged = () => {
+        this.setState({showCounts: SettingsStore.getValue("Notifications.alwaysShowBadgeCounts", this.roomId)});
+    };
+
+    private onNotificationUpdate = () => {
+        this.forceUpdate(); // notification state changed - update
+    };
+
+    public render(): React.ReactElement {
+        const {notification, forceCount, roomId, onClick, ...props} = this.props;
+
+        // Don't show a badge if we don't need to
+        if (notification.isIdle) return null;
+
+        // TODO: Update these booleans for FTUE Notifications: https://github.com/vector-im/riot-web/issues/14261
+        // As of writing, that is "if red, show count always" and "optionally show counts instead of dots".
+        // See git diff for what that boolean state looks like.
+        // XXX: We ignore this.state.showCounts (the setting which controls counts vs dots).
+        const hasAnySymbol = notification.symbol || notification.count > 0;
+        let isEmptyBadge = !hasAnySymbol || !notification.hasUnreadCount;
+        if (forceCount) {
+            isEmptyBadge = false;
+            if (!notification.hasUnreadCount) return null; // Can't render a badge
+        }
+
+        let symbol = notification.symbol || formatMinimalBadgeCount(notification.count);
+        if (isEmptyBadge) symbol = "";
+
+        const classes = classNames({
+            'mx_NotificationBadge': true,
+            'mx_NotificationBadge_visible': isEmptyBadge ? true : notification.hasUnreadCount,
+            'mx_NotificationBadge_highlighted': notification.hasMentions,
+            'mx_NotificationBadge_dot': isEmptyBadge,
+            'mx_NotificationBadge_2char': symbol.length > 0 && symbol.length < 3,
+            'mx_NotificationBadge_3char': symbol.length > 2,
+        });
+
+        if (onClick) {
+            return (
+                <AccessibleButton {...props} className={classes} onClick={onClick}>
+                    <span className="mx_NotificationBadge_count">{symbol}</span>
+                </AccessibleButton>
+            );
+        }
+
+        return (
+            <div className={classes}>
+                <span className="mx_NotificationBadge_count">{symbol}</span>
+            </div>
+        );
+    }
+}

src/components/views/rooms/ReadReceiptMarker.js

@@ -23,7 +23,7 @@ import { _t } from '../../../languageHandler';
 import {formatDate} from '../../../DateUtils';
 import Velociraptor from "../../../Velociraptor";
 import * as sdk from "../../../index";
-import {toRem} from "../../../utils/units";
+import {toPx} from "../../../utils/units";
 
 let bounce = false;
 try {
@@ -149,7 +149,7 @@ export default createReactClass({
             // start at the old height and in the old h pos
 
             startStyles.push({ top: startTopOffset+"px",
-                               left: toRem(oldInfo.left) });
+                               left: toPx(oldInfo.left) });
 
             const reorderTransitionOpts = {
                 duration: 100,
@@ -182,7 +182,7 @@ export default createReactClass({
         }
 
         const style = {
-            left: toRem(this.props.leftOffset),
+            left: toPx(this.props.leftOffset),
             top: '0px',
             visibility: this.props.hidden ? 'hidden' : 'visible',
         };

src/components/views/rooms/RoomBreadcrumbs.js

@@ -1,394 +0,0 @@
-/*
-Copyright 2019 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, {createRef} from "react";
-import dis from "../../../dispatcher/dispatcher";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
-import AccessibleButton from '../elements/AccessibleButton';
-import RoomAvatar from '../avatars/RoomAvatar';
-import classNames from 'classnames';
-import * as sdk from "../../../index";
-import Analytics from "../../../Analytics";
-import * as RoomNotifs from '../../../RoomNotifs';
-import * as FormattingUtils from "../../../utils/FormattingUtils";
-import DMRoomMap from "../../../utils/DMRoomMap";
-import {_t} from "../../../languageHandler";
-
-const MAX_ROOMS = 20;
-const MIN_ROOMS_BEFORE_ENABLED = 10;
-
-// The threshold time in milliseconds to wait for an autojoined room to show up.
-const AUTOJOIN_WAIT_THRESHOLD_MS = 90000; // 90 seconds
-
-export default class RoomBreadcrumbs extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {rooms: [], enabled: false};
-
-        this.onAction = this.onAction.bind(this);
-        this._dispatcherRef = null;
-
-        // The room IDs we're waiting to come down the Room handler and when we
-        // started waiting for them. Used to track a room over an upgrade/autojoin.
-        this._waitingRoomQueue = [/* { roomId, addedTs } */];
-
-        this._scroller = createRef();
-    }
-
-    // TODO: [REACT-WARNING] Move this to constructor
-    UNSAFE_componentWillMount() { // eslint-disable-line camelcase
-        this._dispatcherRef = dis.register(this.onAction);
-
-        const storedRooms = SettingsStore.getValue("breadcrumb_rooms");
-        this._loadRoomIds(storedRooms || []);
-
-        this._settingWatchRef = SettingsStore.watchSetting("breadcrumb_rooms", null, this.onBreadcrumbsChanged);
-
-        this.setState({enabled: this._shouldEnable()});
-
-        MatrixClientPeg.get().on("Room.myMembership", this.onMyMembership);
-        MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
-        MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
-        MatrixClientPeg.get().on("Event.decrypted", this.onEventDecrypted);
-        MatrixClientPeg.get().on("Room", this.onRoom);
-    }
-
-    componentWillUnmount() {
-        dis.unregister(this._dispatcherRef);
-
-        SettingsStore.unwatchSetting(this._settingWatchRef);
-
-        const client = MatrixClientPeg.get();
-        if (client) {
-            client.removeListener("Room.myMembership", this.onMyMembership);
-            client.removeListener("Room.receipt", this.onRoomReceipt);
-            client.removeListener("Room.timeline", this.onRoomTimeline);
-            client.removeListener("Event.decrypted", this.onEventDecrypted);
-            client.removeListener("Room", this.onRoom);
-        }
-    }
-
-    componentDidUpdate() {
-        const rooms = this.state.rooms.slice();
-
-        if (rooms.length) {
-            const roomModel = rooms[0];
-            if (!roomModel.animated) {
-                roomModel.animated = true;
-                setTimeout(() => this.setState({rooms}), 0);
-            }
-        }
-    }
-
-    onAction(payload) {
-        switch (payload.action) {
-            case 'view_room':
-                if (payload.auto_join && !MatrixClientPeg.get().getRoom(payload.room_id)) {
-                    // Queue the room instead of pushing it immediately - we're probably just waiting
-                    // for a join to complete (ie: joining the upgraded room).
-                    this._waitingRoomQueue.push({roomId: payload.room_id, addedTs: (new Date).getTime()});
-                    break;
-                }
-                this._appendRoomId(payload.room_id);
-                break;
-
-            // XXX: slight hack in order to zero the notification count when a room
-            // is read. Copied from RoomTile
-            case 'on_room_read': {
-                const room = MatrixClientPeg.get().getRoom(payload.roomId);
-                this._calculateRoomBadges(room, /*zero=*/true);
-                break;
-            }
-        }
-    }
-
-    onMyMembership = (room, membership) => {
-        if (membership === "leave" || membership === "ban") {
-            const rooms = this.state.rooms.slice();
-            const roomState = rooms.find((r) => r.room.roomId === room.roomId);
-            if (roomState) {
-                roomState.left = true;
-                this.setState({rooms});
-            }
-        }
-        this.onRoomMembershipChanged();
-    };
-
-    onRoomReceipt = (event, room) => {
-        if (this.state.rooms.map(r => r.room.roomId).includes(room.roomId)) {
-            this._calculateRoomBadges(room);
-        }
-    };
-
-    onRoomTimeline = (event, room) => {
-        if (!room) return; // Can be null for the notification timeline, etc.
-        if (this.state.rooms.map(r => r.room.roomId).includes(room.roomId)) {
-            this._calculateRoomBadges(room);
-        }
-    };
-
-    onEventDecrypted = (event) => {
-        if (this.state.rooms.map(r => r.room.roomId).includes(event.getRoomId())) {
-            this._calculateRoomBadges(MatrixClientPeg.get().getRoom(event.getRoomId()));
-        }
-    };
-
-    onBreadcrumbsChanged = (settingName, roomId, level, valueAtLevel, value) => {
-        if (!value) return;
-
-        const currentState = this.state.rooms.map((r) => r.room.roomId);
-        if (currentState.length === value.length) {
-            let changed = false;
-            for (let i = 0; i < currentState.length; i++) {
-                if (currentState[i] !== value[i]) {
-                    changed = true;
-                    break;
-                }
-            }
-            if (!changed) return;
-        }
-
-        this._loadRoomIds(value);
-    };
-
-    onRoomMembershipChanged = () => {
-        if (!this.state.enabled && this._shouldEnable()) {
-            this.setState({enabled: true});
-        }
-    };
-
-    onRoom = (room) => {
-        // Always check for membership changes when we see new rooms
-        this.onRoomMembershipChanged();
-
-        const waitingRoom = this._waitingRoomQueue.find(r => r.roomId === room.roomId);
-        if (!waitingRoom) return;
-        this._waitingRoomQueue.splice(this._waitingRoomQueue.indexOf(waitingRoom), 1);
-
-        const now = (new Date()).getTime();
-        if ((now - waitingRoom.addedTs) > AUTOJOIN_WAIT_THRESHOLD_MS) return; // Too long ago.
-        this._appendRoomId(room.roomId); // add the room we've been waiting for
-    };
-
-    _shouldEnable() {
-        const client = MatrixClientPeg.get();
-        const joinedRoomCount = client.getRooms().reduce((count, r) => {
-            return count + (r.getMyMembership() === "join" ? 1 : 0);
-        }, 0);
-        return joinedRoomCount >= MIN_ROOMS_BEFORE_ENABLED;
-    }
-
-    _loadRoomIds(roomIds) {
-        if (!roomIds || roomIds.length <= 0) return; // Skip updates with no rooms
-
-        // If we're here, the list changed.
-        const rooms = roomIds.map((r) => MatrixClientPeg.get().getRoom(r)).filter((r) => r).map((r) => {
-            const badges = this._calculateBadgesForRoom(r) || {};
-            return {
-                room: r,
-                animated: false,
-                ...badges,
-            };
-        });
-        this.setState({
-            rooms: rooms,
-        });
-    }
-
-    _calculateBadgesForRoom(room, zero=false) {
-        if (!room) return null;
-
-        // Reset the notification variables for simplicity
-        const roomModel = {
-            redBadge: false,
-            formattedCount: "0",
-            showCount: false,
-        };
-
-        if (zero) return roomModel;
-
-        const notifState = RoomNotifs.getRoomNotifsState(room.roomId);
-        if (RoomNotifs.MENTION_BADGE_STATES.includes(notifState)) {
-            const highlightNotifs = RoomNotifs.getUnreadNotificationCount(room, 'highlight');
-            const unreadNotifs = RoomNotifs.getUnreadNotificationCount(room);
-
-            const redBadge = highlightNotifs > 0;
-            const greyBadge = redBadge || (unreadNotifs > 0 && RoomNotifs.BADGE_STATES.includes(notifState));
-
-            if (redBadge || greyBadge) {
-                const notifCount = redBadge ? highlightNotifs : unreadNotifs;
-                const limitedCount = FormattingUtils.formatCount(notifCount);
-
-                roomModel.redBadge = redBadge;
-                roomModel.formattedCount = limitedCount;
-                roomModel.showCount = true;
-            }
-        }
-
-        return roomModel;
-    }
-
-    _calculateRoomBadges(room, zero=false) {
-        if (!room) return;
-
-        const rooms = this.state.rooms.slice();
-        const roomModel = rooms.find((r) => r.room.roomId === room.roomId);
-        if (!roomModel) return; // No applicable room, so don't do math on it
-
-        const badges = this._calculateBadgesForRoom(room, zero);
-        if (!badges) return; // No badges for some reason
-
-        Object.assign(roomModel, badges);
-        this.setState({rooms});
-    }
-
-    _appendRoomId(roomId) {
-        let room = MatrixClientPeg.get().getRoom(roomId);
-        if (!room) return;
-
-        const rooms = this.state.rooms.slice();
-
-        // If the room is upgraded, use that room instead. We'll also splice out
-        // any children of the room.
-        const history = MatrixClientPeg.get().getRoomUpgradeHistory(roomId);
-        if (history.length > 1) {
-            room = history[history.length - 1]; // Last room is most recent
-
-            // Take out any room that isn't the most recent room
-            for (let i = 0; i < history.length - 1; i++) {
-                const idx = rooms.findIndex((r) => r.room.roomId === history[i].roomId);
-                if (idx !== -1) rooms.splice(idx, 1);
-            }
-        }
-
-        const existingIdx = rooms.findIndex((r) => r.room.roomId === room.roomId);
-        if (existingIdx !== -1) {
-            rooms.splice(existingIdx, 1);
-        }
-
-        rooms.splice(0, 0, {room, animated: false});
-
-        if (rooms.length > MAX_ROOMS) {
-            rooms.splice(MAX_ROOMS, rooms.length - MAX_ROOMS);
-        }
-        this.setState({rooms});
-
-        if (this._scroller.current) {
-            this._scroller.current.moveToOrigin();
-        }
-
-        // We don't track room aesthetics (badges, membership, etc) over the wire so we
-        // don't need to do this elsewhere in the file. Just where we alter the room IDs
-        // and their order.
-        const roomIds = rooms.map((r) => r.room.roomId);
-        if (roomIds.length > 0) {
-            SettingsStore.setValue("breadcrumb_rooms", null, SettingLevel.ACCOUNT, roomIds);
-        }
-    }
-
-    _viewRoom(room, index) {
-        Analytics.trackEvent("Breadcrumbs", "click_node", index);
-        dis.dispatch({action: "view_room", room_id: room.roomId});
-    }
-
-    _onMouseEnter(room) {
-        this._onHover(room);
-    }
-
-    _onMouseLeave(room) {
-        this._onHover(null); // clear hover states
-    }
-
-    _onHover(room) {
-        const rooms = this.state.rooms.slice();
-        for (const r of rooms) {
-            r.hover = room && r.room.roomId === room.roomId;
-        }
-        this.setState({rooms});
-    }
-
-    _isDmRoom(room) {
-        const dmRooms = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
-        return Boolean(dmRooms);
-    }
-
-    render() {
-        const Tooltip = sdk.getComponent('elements.Tooltip');
-        const IndicatorScrollbar = sdk.getComponent('structures.IndicatorScrollbar');
-
-        // check for collapsed here and not at parent so we keep rooms in our state
-        // when collapsing and expanding
-        if (this.props.collapsed || !this.state.enabled) {
-            return null;
-        }
-
-        const rooms = this.state.rooms;
-        const avatars = rooms.map((r, i) => {
-            const isFirst = i === 0;
-            const classes = classNames({
-                "mx_RoomBreadcrumbs_crumb": true,
-                "mx_RoomBreadcrumbs_preAnimate": isFirst && !r.animated,
-                "mx_RoomBreadcrumbs_animate": isFirst,
-                "mx_RoomBreadcrumbs_left": r.left,
-            });
-
-            let tooltip = null;
-            if (r.hover) {
-                tooltip = <Tooltip label={r.room.name} />;
-            }
-
-            let badge;
-            if (r.showCount) {
-                const badgeClasses = classNames({
-                    'mx_RoomTile_badge': true,
-                    'mx_RoomTile_badgeButton': true,
-                    'mx_RoomTile_badgeRed': r.redBadge,
-                    'mx_RoomTile_badgeUnread': !r.redBadge,
-                });
-
-                badge = <div className={badgeClasses}>{r.formattedCount}</div>;
-            }
-
-            return (
-                <AccessibleButton
-                    className={classes}
-                    key={r.room.roomId}
-                    onClick={() => this._viewRoom(r.room, i)}
-                    onMouseEnter={() => this._onMouseEnter(r.room)}
-                    onMouseLeave={() => this._onMouseLeave(r.room)}
-                    aria-label={_t("Room %(name)s", {name: r.room.name})}
-                >
-                    <RoomAvatar room={r.room} width={32} height={32} />
-                    {badge}
-                    {tooltip}
-                </AccessibleButton>
-            );
-        });
-        return (
-            <div role="toolbar" aria-label={_t("Recent rooms")}>
-                <IndicatorScrollbar
-                    ref={this._scroller}
-                    className="mx_RoomBreadcrumbs"
-                    trackHorizontalOverflow={true}
-                    verticalScrollsHorizontally={true}
-                >
-                    { avatars }
-                </IndicatorScrollbar>
-            </div>
-        );
-    }
-}

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -0,0 +1,129 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { BreadcrumbsStore } from "../../../stores/BreadcrumbsStore";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import { _t } from "../../../languageHandler";
+import { Room } from "matrix-js-sdk/src/models/room";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import Analytics from "../../../Analytics";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+import { CSSTransition } from "react-transition-group";
+import RoomListStore from "../../../stores/room-list/RoomListStore";
+import { DefaultTagID } from "../../../stores/room-list/models";
+import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
+import Toolbar from "../../../accessibility/Toolbar";
+
+interface IProps {
+}
+
+interface IState {
+    // Both of these control the animation for the breadcrumbs. For details on the
+    // actual animation, see the CSS.
+    //
+    // doAnimation is to lie to the CSSTransition component (see onBreadcrumbsUpdate
+    // for info). skipFirst is used to try and reduce jerky animation - also see the
+    // breadcrumb update function for info on that.
+    doAnimation: boolean;
+    skipFirst: boolean;
+}
+
+export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState> {
+    private isMounted = true;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            doAnimation: true, // technically we want animation on mount, but it won't be perfect
+            skipFirst: false, // render the thing, as boring as it is
+        };
+
+        BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
+    }
+
+    public componentWillUnmount() {
+        this.isMounted = false;
+        BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
+    }
+
+    private onBreadcrumbsUpdate = () => {
+        if (!this.isMounted) return;
+
+        // We need to trick the CSSTransition component into updating, which means we need to
+        // tell it to not animate, then to animate a moment later. This causes two updates
+        // which means two renders. The skipFirst change is so that our don't-animate state
+        // doesn't show the breadcrumb we're about to reveal as it causes a visual jump/jerk.
+        // The second update, on the next available tick, causes the "enter" animation to start
+        // again and this time we want to show the newest breadcrumb because it'll be hidden
+        // off screen for the animation.
+        this.setState({doAnimation: false, skipFirst: true});
+        setTimeout(() => this.setState({doAnimation: true, skipFirst: false}), 0);
+    };
+
+    private viewRoom = (room: Room, index: number) => {
+        Analytics.trackEvent("Breadcrumbs", "click_node", index);
+        defaultDispatcher.dispatch({action: "view_room", room_id: room.roomId});
+    };
+
+    public render(): React.ReactElement {
+        const tiles = BreadcrumbsStore.instance.rooms.map((r, i) => {
+            const roomTags = RoomListStore.instance.getTagsForRoom(r);
+            const roomTag = roomTags.includes(DefaultTagID.DM) ? DefaultTagID.DM : roomTags[0];
+            return (
+                <RovingAccessibleTooltipButton
+                    className="mx_RoomBreadcrumbs_crumb"
+                    key={r.roomId}
+                    onClick={() => this.viewRoom(r, i)}
+                    aria-label={_t("Room %(name)s", {name: r.name})}
+                    title={r.name}
+                    tooltipClassName="mx_RoomBreadcrumbs_Tooltip"
+                >
+                    <DecoratedRoomAvatar
+                        room={r}
+                        avatarSize={32}
+                        tag={roomTag}
+                        displayBadge={true}
+                        forceCount={true}
+                    />
+                </RovingAccessibleTooltipButton>
+            );
+        });
+
+        if (tiles.length > 0) {
+            // NOTE: The CSSTransition timeout MUST match the timeout in our CSS!
+            return (
+                <CSSTransition
+                    appear={true} in={this.state.doAnimation} timeout={640}
+                    classNames='mx_RoomBreadcrumbs'
+                >
+                    <Toolbar className='mx_RoomBreadcrumbs'>
+                        {tiles.slice(this.state.skipFirst ? 1 : 0)}
+                    </Toolbar>
+                </CSSTransition>
+            );
+        } else {
+            return (
+                <div className='mx_RoomBreadcrumbs'>
+                    <div className="mx_RoomBreadcrumbs_placeholder">
+                        {_t("No recently visited rooms")}
+                    </div>
+                </div>
+            );
+        }
+    }
+}

src/components/views/rooms/RoomDropTarget.js

@@ -1,35 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import createReactClass from 'create-react-class';
-
-export default createReactClass({
-    displayName: 'RoomDropTarget',
-
-    render: function() {
-        return (
-            <div className="mx_RoomDropTarget_container">
-                <div className="mx_RoomDropTarget">
-                    <div className="mx_RoomDropTarget_label">
-                        { this.props.label }
-                    </div>
-                </div>
-            </div>
-        );
-    },
-});

src/components/views/rooms/RoomHeader.js

@@ -26,14 +26,14 @@ import Modal from "../../../Modal";
 import RateLimitedFunc from '../../../ratelimitedfunc';
 
 import { linkifyElement } from '../../../HtmlUtils';
-import AccessibleButton from '../elements/AccessibleButton';
 import ManageIntegsButton from '../elements/ManageIntegsButton';
 import {CancelButton} from './SimpleRoomHeader';
 import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
-import DMRoomMap from '../../../utils/DMRoomMap';
 import E2EIcon from './E2EIcon';
-import InviteOnlyIcon from './InviteOnlyIcon';
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import {DefaultTagID} from "../../../stores/room-list/models";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 export default createReactClass({
     displayName: 'RoomHeader',
@@ -152,26 +152,11 @@ export default createReactClass({
     },
 
     render: function() {
-        const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
-
         let searchStatus = null;
         let cancelButton = null;
         let settingsButton = null;
         let pinnedEventsButton = null;
 
-        const e2eIcon = this.props.e2eStatus ?
-            <E2EIcon status={this.props.e2eStatus} /> :
-            undefined;
-
-        const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId);
-        const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", "");
-        const joinRule = joinRules && joinRules.getContent().join_rule;
-        let privateIcon;
-        // Don't show an invite-only icon for DMs. Users know they're invite-only.
-        if (!dmUserId && joinRule === "invite") {
-            privateIcon = <InviteOnlyIcon />;
-        }
-
         if (this.props.onCancelClick) {
             cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
         }
@@ -221,24 +206,24 @@ export default createReactClass({
         }
         const topicElement =
             <div className="mx_RoomHeader_topic" ref={this._topic} title={topic} dir="auto">{ topic }</div>;
-        const avatarSize = 28;
+
         let roomAvatar;
         if (this.props.room) {
-            roomAvatar = (<RoomAvatar
+            roomAvatar = <DecoratedRoomAvatar
                 room={this.props.room}
-                width={avatarSize}
-                height={avatarSize}
+                avatarSize={32}
+                tag={DefaultTagID.Untagged} // to apply room publicity badging
                 oobData={this.props.oobData}
-                viewAvatarOnClick={true} />);
+                viewAvatarOnClick={true}
+            />;
         }
 
         if (this.props.onSettingsClick) {
             settingsButton =
-                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_settingsButton"
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_settingsButton"
                     onClick={this.props.onSettingsClick}
-                    title={_t("Settings")}
-                >
-                </AccessibleButton>;
+                    title={_t("Settings")} />;
         }
 
         if (this.props.onPinnedClick && SettingsStore.isFeatureEnabled('feature_pinning')) {
@@ -250,55 +235,45 @@ export default createReactClass({
             }
 
             pinnedEventsButton =
-                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_pinnedButton"
-                                  onClick={this.props.onPinnedClick} title={_t("Pinned Messages")}>
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_pinnedButton"
+                    onClick={this.props.onPinnedClick}
+                    title={_t("Pinned Messages")}
+                >
                     { pinsIndicator }
-                </AccessibleButton>;
+                </AccessibleTooltipButton>;
         }
 
-//        var leave_button;
-//        if (this.props.onLeaveClick) {
-//            leave_button =
-//                <div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
-//                    <TintableSvg src={require("../../../../res/img/leave.svg")} width="26" height="20"/>
-//                </div>;
-//        }
-
         let forgetButton;
         if (this.props.onForgetClick) {
             forgetButton =
-                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_forgetButton"
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_forgetButton"
                     onClick={this.props.onForgetClick}
-                    title={_t("Forget room")}
-                >
-                </AccessibleButton>;
+                    title={_t("Forget room")} />;
         }
 
         let searchButton;
         if (this.props.onSearchClick && this.props.inRoom) {
             searchButton =
-                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_searchButton"
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_searchButton"
                     onClick={this.props.onSearchClick}
-                    title={_t("Search")}
-                >
-                </AccessibleButton>;
+                    title={_t("Search")} />;
         }
 
         let shareRoomButton;
         if (this.props.inRoom) {
             shareRoomButton =
-                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_shareButton"
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_shareButton"
                     onClick={this.onShareRoomClick}
-                    title={_t('Share room')}
-                >
-                </AccessibleButton>;
+                    title={_t('Share room')} />;
         }
 
         let manageIntegsButton;
         if (this.props.room && this.props.room.roomId && this.props.inRoom) {
-            manageIntegsButton = <ManageIntegsButton
-                room={this.props.room}
-            />;
+            manageIntegsButton = <ManageIntegsButton room={this.props.room} />;
         }
 
         const rightRow =
@@ -311,11 +286,13 @@ export default createReactClass({
                 { searchButton }
             </div>;
 
+        const e2eIcon = this.props.e2eStatus ? <E2EIcon status={this.props.e2eStatus} /> : undefined;
+
         return (
             <div className="mx_RoomHeader light-panel">
                 <div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
-                    <div className="mx_RoomHeader_avatar">{ roomAvatar }{ e2eIcon }</div>
-                    { privateIcon }
+                    <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
+                    <div className="mx_RoomHeader_e2eIcon">{ e2eIcon }</div>
                     { name }
                     { topicElement }
                     { cancelButton }

src/components/views/rooms/RoomList.js

@@ -1,853 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 Vector Creations Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-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 SettingsStore from "../../../settings/SettingsStore";
-import Timer from "../../../utils/Timer";
-import React from "react";
-import ReactDOM from "react-dom";
-import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
-import * as utils from "matrix-js-sdk/src/utils";
-import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import rate_limited_func from "../../../ratelimitedfunc";
-import * as Rooms from '../../../Rooms';
-import DMRoomMap from '../../../utils/DMRoomMap';
-import TagOrderStore from '../../../stores/TagOrderStore';
-import CustomRoomTagStore from '../../../stores/CustomRoomTagStore';
-import GroupStore from '../../../stores/GroupStore';
-import RoomSubList from '../../structures/RoomSubList';
-import ResizeHandle from '../elements/ResizeHandle';
-import CallHandler from "../../../CallHandler";
-import dis from "../../../dispatcher/dispatcher";
-import * as sdk from "../../../index";
-import * as Receipt from "../../../utils/Receipt";
-import {Resizer} from '../../../resizer';
-import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
-import {RovingTabIndexProvider} from "../../../accessibility/RovingTabIndex";
-import {RoomListStoreTempProxy} from "../../../stores/room-list/RoomListStoreTempProxy";
-import {DefaultTagID} from "../../../stores/room-list/models";
-import * as Unread from "../../../Unread";
-import RoomViewStore from "../../../stores/RoomViewStore";
-import {TAG_DM} from "../../../stores/RoomListStore";
-
-const HIDE_CONFERENCE_CHANS = true;
-const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
-const HOVER_MOVE_TIMEOUT = 1000;
-
-function labelForTagName(tagName) {
-    if (tagName.startsWith('u.')) return tagName.slice(2);
-    return tagName;
-}
-
-export default createReactClass({
-    displayName: 'RoomList',
-
-    propTypes: {
-        ConferenceHandler: PropTypes.any,
-        collapsed: PropTypes.bool.isRequired,
-        searchFilter: PropTypes.string,
-    },
-
-    getInitialState: function() {
-
-        this._hoverClearTimer = null;
-        this._subListRefs = {
-            // key => RoomSubList ref
-        };
-
-        const sizesJson = window.localStorage.getItem("mx_roomlist_sizes");
-        const collapsedJson = window.localStorage.getItem("mx_roomlist_collapsed");
-        this.subListSizes = sizesJson ? JSON.parse(sizesJson) : {};
-        this.collapsedState = collapsedJson ? JSON.parse(collapsedJson) : {};
-        this._layoutSections = [];
-
-        const unfilteredOptions = {
-            allowWhitespace: false,
-            handleHeight: 1,
-        };
-        this._unfilteredlayout = new Layout((key, size) => {
-            const subList = this._subListRefs[key];
-            if (subList) {
-                subList.setHeight(size);
-            }
-            // update overflow indicators
-            this._checkSubListsOverflow();
-            // don't store height for collapsed sublists
-            if (!this.collapsedState[key]) {
-                this.subListSizes[key] = size;
-                window.localStorage.setItem("mx_roomlist_sizes",
-                    JSON.stringify(this.subListSizes));
-            }
-        }, this.subListSizes, this.collapsedState, unfilteredOptions);
-
-        this._filteredLayout = new Layout((key, size) => {
-            const subList = this._subListRefs[key];
-            if (subList) {
-                subList.setHeight(size);
-            }
-        }, null, null, {
-            allowWhitespace: false,
-            handleHeight: 0,
-        });
-
-        this._layout = this._unfilteredlayout;
-
-        return {
-            isLoadingLeftRooms: false,
-            totalRoomCount: null,
-            lists: {},
-            incomingCallTag: null,
-            incomingCall: null,
-            selectedTags: [],
-            hover: false,
-            customTags: CustomRoomTagStore.getTags(),
-        };
-    },
-
-    // TODO: [REACT-WARNING] Replace component with real class, put this in the constructor.
-    UNSAFE_componentWillMount: function() {
-        this.mounted = false;
-
-        const cli = MatrixClientPeg.get();
-
-        cli.on("Room", this.onRoom);
-        cli.on("deleteRoom", this.onDeleteRoom);
-        cli.on("Room.receipt", this.onRoomReceipt);
-        cli.on("RoomMember.name", this.onRoomMemberName);
-        cli.on("Event.decrypted", this.onEventDecrypted);
-        cli.on("accountData", this.onAccountData);
-        cli.on("Group.myMembership", this._onGroupMyMembership);
-        cli.on("RoomState.events", this.onRoomStateEvents);
-
-        const dmRoomMap = DMRoomMap.shared();
-        // A map between tags which are group IDs and the room IDs of rooms that should be kept
-        // in the room list when filtering by that tag.
-        this._visibleRoomsForGroup = {
-            // $groupId: [$roomId1, $roomId2, ...],
-        };
-        // All rooms that should be kept in the room list when filtering.
-        // By default, show all rooms.
-        this._visibleRooms = MatrixClientPeg.get().getVisibleRooms();
-
-        // Listen to updates to group data. RoomList cares about members and rooms in order
-        // to filter the room list when group tags are selected.
-        this._groupStoreToken = GroupStore.registerListener(null, () => {
-            (TagOrderStore.getOrderedTags() || []).forEach((tag) => {
-                if (tag[0] !== '+') {
-                    return;
-                }
-                // This group's rooms or members may have updated, update rooms for its tag
-                this.updateVisibleRoomsForTag(dmRoomMap, tag);
-                this.updateVisibleRooms();
-            });
-        });
-
-        this._tagStoreToken = TagOrderStore.addListener(() => {
-            // Filters themselves have changed
-            this.updateVisibleRooms();
-        });
-
-        this._roomListStoreToken = RoomListStoreTempProxy.addListener(() => {
-            this._delayedRefreshRoomList();
-        });
-
-
-        if (SettingsStore.isFeatureEnabled("feature_custom_tags")) {
-            this._customTagStoreToken = CustomRoomTagStore.addListener(() => {
-                this.setState({
-                    customTags: CustomRoomTagStore.getTags(),
-                });
-            });
-        }
-
-        this.refreshRoomList();
-
-        // order of the sublists
-        //this.listOrder = [];
-
-        // loop count to stop a stack overflow if the user keeps waggling the
-        // mouse for >30s in a row, or if running under mocha
-        this._delayedRefreshRoomListLoopCount = 0;
-    },
-
-    componentDidMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-        const cfg = {
-            getLayout: () => this._layout,
-        };
-        this.resizer = new Resizer(this.resizeContainer, Distributor, cfg);
-        this.resizer.setClassNames({
-            handle: "mx_ResizeHandle",
-            vertical: "mx_ResizeHandle_vertical",
-            reverse: "mx_ResizeHandle_reverse",
-        });
-        this._layout.update(
-            this._layoutSections,
-            this.resizeContainer && this.resizeContainer.offsetHeight,
-        );
-        this._checkSubListsOverflow();
-
-        this.resizer.attach();
-        if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.on("leftPanelResized", this.onResize);
-        }
-        this.mounted = true;
-    },
-
-    componentDidUpdate: function(prevProps) {
-        let forceLayoutUpdate = false;
-        this._repositionIncomingCallBox(undefined, false);
-        if (!this.props.searchFilter && prevProps.searchFilter) {
-            this._layout = this._unfilteredlayout;
-            forceLayoutUpdate = true;
-        } else if (this.props.searchFilter && !prevProps.searchFilter) {
-            this._layout = this._filteredLayout;
-            forceLayoutUpdate = true;
-        }
-        this._layout.update(
-            this._layoutSections,
-            this.resizeContainer && this.resizeContainer.clientHeight,
-            forceLayoutUpdate,
-        );
-        this._checkSubListsOverflow();
-    },
-
-    onAction: function(payload) {
-        switch (payload.action) {
-            case 'view_tooltip':
-                this.tooltip = payload.tooltip;
-                break;
-            case 'call_state':
-                var call = CallHandler.getCall(payload.room_id);
-                if (call && call.call_state === 'ringing') {
-                    this.setState({
-                        incomingCall: call,
-                        incomingCallTag: this.getTagNameForRoomId(payload.room_id),
-                    });
-                    this._repositionIncomingCallBox(undefined, true);
-                } else {
-                    this.setState({
-                        incomingCall: null,
-                        incomingCallTag: null,
-                    });
-                }
-                break;
-            case 'view_room_delta': {
-                const currentRoomId = RoomViewStore.getRoomId();
-                const {
-                    "im.vector.fake.invite": inviteRooms,
-                    "m.favourite": favouriteRooms,
-                    [TAG_DM]: dmRooms,
-                    "im.vector.fake.recent": recentRooms,
-                    "m.lowpriority": lowPriorityRooms,
-                    "im.vector.fake.archived": historicalRooms,
-                    "m.server_notice": serverNoticeRooms,
-                    ...tags
-                } = this.state.lists;
-
-                const shownCustomTagRooms = Object.keys(tags).filter(tagName => {
-                    return (!this.state.customTags || this.state.customTags[tagName]) &&
-                        !tagName.match(STANDARD_TAGS_REGEX);
-                }).map(tagName => tags[tagName]);
-
-                // this order matches the one when generating the room sublists below.
-                let rooms = this._applySearchFilter([
-                    ...inviteRooms,
-                    ...favouriteRooms,
-                    ...dmRooms,
-                    ...recentRooms,
-                    ...[].concat.apply([], shownCustomTagRooms), // eslint-disable-line prefer-spread
-                    ...lowPriorityRooms,
-                    ...historicalRooms,
-                    ...serverNoticeRooms,
-                ], this.props.searchFilter);
-
-                if (payload.unread) {
-                    // filter to only notification rooms (and our current active room so we can index properly)
-                    rooms = rooms.filter(room => {
-                        return room.roomId === currentRoomId || Unread.doesRoomHaveUnreadMessages(room);
-                    });
-                }
-
-                const currentIndex = rooms.findIndex(room => room.roomId === currentRoomId);
-                // use slice to account for looping around the start
-                const [room] = rooms.slice((currentIndex + payload.delta) % rooms.length);
-                if (room) {
-                    dis.dispatch({
-                        action: 'view_room',
-                        room_id: room.roomId,
-                        show_room_tile: true, // to make sure the room gets scrolled into view
-                    });
-                }
-                break;
-            }
-        }
-    },
-
-    componentWillUnmount: function() {
-        this.mounted = false;
-
-        dis.unregister(this.dispatcherRef);
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("Room", this.onRoom);
-            MatrixClientPeg.get().removeListener("deleteRoom", this.onDeleteRoom);
-            MatrixClientPeg.get().removeListener("Room.receipt", this.onRoomReceipt);
-            MatrixClientPeg.get().removeListener("RoomMember.name", this.onRoomMemberName);
-            MatrixClientPeg.get().removeListener("Event.decrypted", this.onEventDecrypted);
-            MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
-            MatrixClientPeg.get().removeListener("Group.myMembership", this._onGroupMyMembership);
-            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
-        }
-
-        if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.removeListener("leftPanelResized", this.onResize);
-        }
-
-
-        if (this._tagStoreToken) {
-            this._tagStoreToken.remove();
-        }
-
-        if (this._roomListStoreToken) {
-            this._roomListStoreToken.remove();
-        }
-        if (this._customTagStoreToken) {
-            this._customTagStoreToken.remove();
-        }
-
-        // NB: GroupStore is not a Flux.Store
-        if (this._groupStoreToken) {
-            this._groupStoreToken.unregister();
-        }
-
-        // cancel any pending calls to the rate_limited_funcs
-        this._delayedRefreshRoomList.cancelPendingCall();
-    },
-
-
-    onResize: function() {
-        if (this.mounted && this._layout && this.resizeContainer &&
-            Array.isArray(this._layoutSections)
-        ) {
-            this._layout.update(
-                this._layoutSections,
-                this.resizeContainer.offsetHeight,
-            );
-        }
-    },
-
-    onRoom: function(room) {
-        this.updateVisibleRooms();
-    },
-
-    onRoomStateEvents: function(ev, state) {
-        if (ev.getType() === "m.room.create" || ev.getType() === "m.room.tombstone") {
-            this.updateVisibleRooms();
-        }
-    },
-
-    onDeleteRoom: function(roomId) {
-        this.updateVisibleRooms();
-    },
-
-    onArchivedHeaderClick: function(isHidden, scrollToPosition) {
-        if (!isHidden) {
-            const self = this;
-            this.setState({ isLoadingLeftRooms: true });
-            // we don't care about the response since it comes down via "Room"
-            // events.
-            MatrixClientPeg.get().syncLeftRooms().catch(function(err) {
-                console.error("Failed to sync left rooms: %s", err);
-                console.error(err);
-            }).finally(function() {
-                self.setState({ isLoadingLeftRooms: false });
-            });
-        }
-    },
-
-    onRoomReceipt: function(receiptEvent, room) {
-        // because if we read a notification, it will affect notification count
-        // only bother updating if there's a receipt from us
-        if (Receipt.findReadReceiptFromUserId(receiptEvent, MatrixClientPeg.get().credentials.userId)) {
-            this._delayedRefreshRoomList();
-        }
-    },
-
-    onRoomMemberName: function(ev, member) {
-        this._delayedRefreshRoomList();
-    },
-
-    onEventDecrypted: function(ev) {
-        // An event being decrypted may mean we need to re-order the room list
-        this._delayedRefreshRoomList();
-    },
-
-    onAccountData: function(ev) {
-        if (ev.getType() == 'm.direct') {
-            this._delayedRefreshRoomList();
-        }
-    },
-
-    _onGroupMyMembership: function(group) {
-        this.forceUpdate();
-    },
-
-    onMouseMove: async function(ev) {
-        if (!this._hoverClearTimer) {
-            this.setState({hover: true});
-            this._hoverClearTimer = new Timer(HOVER_MOVE_TIMEOUT);
-            this._hoverClearTimer.start();
-            let finished = true;
-            try {
-                await this._hoverClearTimer.finished();
-            } catch (err) {
-                finished = false;
-            }
-            this._hoverClearTimer = null;
-            if (finished) {
-                this.setState({hover: false});
-                this._delayedRefreshRoomList();
-            }
-        } else {
-            this._hoverClearTimer.restart();
-        }
-    },
-
-    onMouseLeave: function(ev) {
-        if (this._hoverClearTimer) {
-            this._hoverClearTimer.abort();
-            this._hoverClearTimer = null;
-        }
-        this.setState({hover: false});
-
-        // Refresh the room list just in case the user missed something.
-        this._delayedRefreshRoomList();
-    },
-
-    _delayedRefreshRoomList: rate_limited_func(function() {
-        this.refreshRoomList();
-    }, 500),
-
-    // Update which rooms and users should appear in RoomList for a given group tag
-    updateVisibleRoomsForTag: function(dmRoomMap, tag) {
-        if (!this.mounted) return;
-        // For now, only handle group tags
-        if (tag[0] !== '+') return;
-
-        this._visibleRoomsForGroup[tag] = [];
-        GroupStore.getGroupRooms(tag).forEach((room) => this._visibleRoomsForGroup[tag].push(room.roomId));
-        GroupStore.getGroupMembers(tag).forEach((member) => {
-            if (member.userId === MatrixClientPeg.get().credentials.userId) return;
-            dmRoomMap.getDMRoomsForUserId(member.userId).forEach(
-                (roomId) => this._visibleRoomsForGroup[tag].push(roomId),
-            );
-        });
-        // TODO: Check if room has been tagged to the group by the user
-    },
-
-    // Update which rooms and users should appear according to which tags are selected
-    updateVisibleRooms: function() {
-        const selectedTags = TagOrderStore.getSelectedTags();
-        const visibleGroupRooms = [];
-        selectedTags.forEach((tag) => {
-            (this._visibleRoomsForGroup[tag] || []).forEach(
-                (roomId) => visibleGroupRooms.push(roomId),
-            );
-        });
-
-        // If there are any tags selected, constrain the rooms listed to the
-        // visible rooms as determined by visibleGroupRooms. Here, we
-        // de-duplicate and filter out rooms that the client doesn't know
-        // about (hence the Set and the null-guard on `room`).
-        if (selectedTags.length > 0) {
-            const roomSet = new Set();
-            visibleGroupRooms.forEach((roomId) => {
-                const room = MatrixClientPeg.get().getRoom(roomId);
-                if (room) {
-                    roomSet.add(room);
-                }
-            });
-            this._visibleRooms = Array.from(roomSet);
-        } else {
-            // Show all rooms
-            this._visibleRooms = MatrixClientPeg.get().getVisibleRooms();
-        }
-        this._delayedRefreshRoomList();
-    },
-
-    refreshRoomList: function() {
-        if (this.state.hover) {
-            // Don't re-sort the list if we're hovering over the list
-            return;
-        }
-
-        // TODO: ideally we'd calculate this once at start, and then maintain
-        // any changes to it incrementally, updating the appropriate sublists
-        // as needed.
-        // Alternatively we'd do something magical with Immutable.js or similar.
-        const lists = this.getRoomLists();
-        let totalRooms = 0;
-        for (const l of Object.values(lists)) {
-            totalRooms += l.length;
-        }
-        this.setState({
-            lists,
-            totalRoomCount: totalRooms,
-            // Do this here so as to not render every time the selected tags
-            // themselves change.
-            selectedTags: TagOrderStore.getSelectedTags(),
-        }, () => {
-            // we don't need to restore any size here, do we?
-            // i guess we could have triggered a new group to appear
-            // that already an explicit size the last time it appeared ...
-            this._checkSubListsOverflow();
-        });
-
-        // this._lastRefreshRoomListTs = Date.now();
-    },
-
-    getTagNameForRoomId: function(roomId) {
-        const lists = RoomListStoreTempProxy.getRoomLists();
-        for (const tagName of Object.keys(lists)) {
-            for (const room of lists[tagName]) {
-                // Should be impossible, but guard anyways.
-                if (!room) {
-                    continue;
-                }
-                const myUserId = MatrixClientPeg.get().getUserId();
-                if (HIDE_CONFERENCE_CHANS && Rooms.isConfCallRoom(room, myUserId, this.props.ConferenceHandler)) {
-                    continue;
-                }
-
-                if (room.roomId === roomId) return tagName;
-            }
-        }
-
-        return null;
-    },
-
-    getRoomLists: function() {
-        const lists = RoomListStoreTempProxy.getRoomLists();
-
-        const filteredLists = {};
-
-        const isRoomVisible = {
-            // $roomId: true,
-        };
-
-        this._visibleRooms.forEach((r) => {
-            isRoomVisible[r.roomId] = true;
-        });
-
-        Object.keys(lists).forEach((tagName) => {
-            const filteredRooms = lists[tagName].filter((taggedRoom) => {
-                // Somewhat impossible, but guard against it anyway
-                if (!taggedRoom) {
-                    return;
-                }
-                const myUserId = MatrixClientPeg.get().getUserId();
-                if (HIDE_CONFERENCE_CHANS && Rooms.isConfCallRoom(taggedRoom, myUserId, this.props.ConferenceHandler)) {
-                    return;
-                }
-
-                return Boolean(isRoomVisible[taggedRoom.roomId]);
-            });
-
-            if (filteredRooms.length > 0 || tagName.match(STANDARD_TAGS_REGEX)) {
-                filteredLists[tagName] = filteredRooms;
-            }
-        });
-
-        return filteredLists;
-    },
-
-    _getScrollNode: function() {
-        if (!this.mounted) return null;
-        const panel = ReactDOM.findDOMNode(this);
-        if (!panel) return null;
-
-        if (panel.classList.contains('gm-prevented')) {
-            return panel;
-        } else {
-            return panel.children[2]; // XXX: Fragile!
-        }
-    },
-
-    _whenScrolling: function(e) {
-        this._hideTooltip(e);
-        this._repositionIncomingCallBox(e, false);
-    },
-
-    _hideTooltip: function(e) {
-        // Hide tooltip when scrolling, as we'll no longer be over the one we were on
-        if (this.tooltip && this.tooltip.style.display !== "none") {
-            this.tooltip.style.display = "none";
-        }
-    },
-
-    _repositionIncomingCallBox: function(e, firstTime) {
-        const incomingCallBox = document.getElementById("incomingCallBox");
-        if (incomingCallBox && incomingCallBox.parentElement) {
-            const scrollArea = this._getScrollNode();
-            if (!scrollArea) return;
-            // Use the offset of the top of the scroll area from the window
-            // as this is used to calculate the CSS fixed top position for the stickies
-            const scrollAreaOffset = scrollArea.getBoundingClientRect().top + window.pageYOffset;
-            // Use the offset of the top of the component from the window
-            // as this is used to calculate the CSS fixed top position for the stickies
-            const scrollAreaHeight = ReactDOM.findDOMNode(this).getBoundingClientRect().height;
-
-            let top = (incomingCallBox.parentElement.getBoundingClientRect().top + window.pageYOffset);
-            // Make sure we don't go too far up, if the headers aren't sticky
-            top = (top < scrollAreaOffset) ? scrollAreaOffset : top;
-            // make sure we don't go too far down, if the headers aren't sticky
-            const bottomMargin = scrollAreaOffset + (scrollAreaHeight - 45);
-            top = (top > bottomMargin) ? bottomMargin : top;
-
-            incomingCallBox.style.top = top + "px";
-            incomingCallBox.style.left = scrollArea.offsetLeft + scrollArea.offsetWidth + 12 + "px";
-        }
-    },
-
-    _makeGroupInviteTiles(filter) {
-        const ret = [];
-        const lcFilter = filter && filter.toLowerCase();
-
-        const GroupInviteTile = sdk.getComponent('groups.GroupInviteTile');
-        for (const group of MatrixClientPeg.get().getGroups()) {
-            const {groupId, name, myMembership} = group;
-            // filter to only groups in invite state and group_id starts with filter or group name includes it
-            if (myMembership !== 'invite') continue;
-            if (lcFilter && !groupId.toLowerCase().startsWith(lcFilter) &&
-                !(name && name.toLowerCase().includes(lcFilter))) continue;
-            ret.push(<GroupInviteTile key={groupId} group={group} collapsed={this.props.collapsed} />);
-        }
-
-        return ret;
-    },
-
-    _applySearchFilter: function(list, filter) {
-        if (filter === "") return list;
-        const lcFilter = filter.toLowerCase();
-        // apply toLowerCase before and after removeHiddenChars because different rules get applied
-        // e.g M -> M but m -> n, yet some unicode homoglyphs come out as uppercase, e.g 𝚮 -> H
-        const fuzzyFilter = utils.removeHiddenChars(lcFilter).toLowerCase();
-        // case insensitive if room name includes filter,
-        // or if starts with `#` and one of room's aliases starts with filter
-        return list.filter((room) => {
-            if (filter[0] === "#") {
-                if (room.getCanonicalAlias() && room.getCanonicalAlias().toLowerCase().startsWith(lcFilter)) {
-                    return true;
-                }
-                if (room.getAltAliases().some((alias) => alias.toLowerCase().startsWith(lcFilter))) {
-                    return true;
-                }
-            }
-            return room.name && utils.removeHiddenChars(room.name.toLowerCase()).toLowerCase().includes(fuzzyFilter);
-        });
-    },
-
-    _handleCollapsedState: function(key, collapsed) {
-        // persist collapsed state
-        this.collapsedState[key] = collapsed;
-        window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.collapsedState));
-        // load the persisted size configuration of the expanded sub list
-        if (collapsed) {
-            this._layout.collapseSection(key);
-        } else {
-            this._layout.expandSection(key, this.subListSizes[key]);
-        }
-        // check overflow, as sub lists sizes have changed
-        // important this happens after calling resize above
-        this._checkSubListsOverflow();
-    },
-
-    // check overflow for scroll indicator gradient
-    _checkSubListsOverflow() {
-        Object.values(this._subListRefs).forEach(l => l.checkOverflow());
-    },
-
-    _subListRef: function(key, ref) {
-        if (!ref) {
-            delete this._subListRefs[key];
-        } else {
-            this._subListRefs[key] = ref;
-        }
-    },
-
-    _mapSubListProps: function(subListsProps) {
-        this._layoutSections = [];
-        const defaultProps = {
-            collapsed: this.props.collapsed,
-            isFiltered: !!this.props.searchFilter,
-        };
-
-        subListsProps.forEach((p) => {
-            p.list = this._applySearchFilter(p.list, this.props.searchFilter);
-        });
-
-        subListsProps = subListsProps.filter((props => {
-            const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
-            return len !== 0 || props.onAddRoom;
-        }));
-
-        return subListsProps.reduce((components, props, i) => {
-            props = {...defaultProps, ...props};
-            const isLast = i === subListsProps.length - 1;
-            const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
-            const {key, label, onHeaderClick, ...otherProps} = props;
-            const chosenKey = key || label;
-            const onSubListHeaderClick = (collapsed) => {
-                this._handleCollapsedState(chosenKey, collapsed);
-                if (onHeaderClick) {
-                    onHeaderClick(collapsed);
-                }
-            };
-            const startAsHidden = props.startAsHidden || this.collapsedState[chosenKey];
-            this._layoutSections.push({
-                id: chosenKey,
-                count: len,
-            });
-            const subList = (<RoomSubList
-                ref={this._subListRef.bind(this, chosenKey)}
-                startAsHidden={startAsHidden}
-                forceExpand={!!this.props.searchFilter}
-                onHeaderClick={onSubListHeaderClick}
-                key={chosenKey}
-                label={label}
-                {...otherProps} />);
-
-            if (!isLast) {
-                return components.concat(
-                    subList,
-                    <ResizeHandle key={chosenKey+"-resizer"} vertical={true} id={chosenKey} />
-                );
-            } else {
-                return components.concat(subList);
-            }
-        }, []);
-    },
-
-    _collectResizeContainer: function(el) {
-        this.resizeContainer = el;
-    },
-
-    render: function() {
-        const incomingCallIfTaggedAs = (tagName) => {
-            if (!this.state.incomingCall) return null;
-            if (this.state.incomingCallTag !== tagName) return null;
-            return this.state.incomingCall;
-        };
-
-        let subLists = [
-            {
-                list: [],
-                extraTiles: this._makeGroupInviteTiles(this.props.searchFilter),
-                label: _t('Community Invites'),
-                isInvite: true,
-            },
-            {
-                list: this.state.lists['im.vector.fake.invite'],
-                label: _t('Invites'),
-                incomingCall: incomingCallIfTaggedAs('im.vector.fake.invite'),
-                isInvite: true,
-            },
-            {
-                list: this.state.lists['m.favourite'],
-                label: _t('Favourites'),
-                tagName: "m.favourite",
-                incomingCall: incomingCallIfTaggedAs('m.favourite'),
-            },
-            {
-                list: this.state.lists[DefaultTagID.DM],
-                label: _t('Direct Messages'),
-                tagName: DefaultTagID.DM,
-                incomingCall: incomingCallIfTaggedAs(DefaultTagID.DM),
-                onAddRoom: () => {dis.dispatch({action: 'view_create_chat'});},
-                addRoomLabel: _t("Start chat"),
-            },
-            {
-                list: this.state.lists['im.vector.fake.recent'],
-                label: _t('Rooms'),
-                incomingCall: incomingCallIfTaggedAs('im.vector.fake.recent'),
-                onAddRoom: () => {dis.dispatch({action: 'view_create_room'});},
-                addRoomLabel: _t("Create room"),
-            },
-        ];
-        const tagSubLists = Object.keys(this.state.lists)
-            .filter((tagName) => {
-                return (!this.state.customTags || this.state.customTags[tagName]) &&
-                    !tagName.match(STANDARD_TAGS_REGEX);
-            }).map((tagName) => {
-                return {
-                    list: this.state.lists[tagName],
-                    key: tagName,
-                    label: labelForTagName(tagName),
-                    tagName: tagName,
-                    incomingCall: incomingCallIfTaggedAs(tagName),
-                };
-            });
-        subLists = subLists.concat(tagSubLists);
-        subLists = subLists.concat([
-            {
-                list: this.state.lists['m.lowpriority'],
-                label: _t('Low priority'),
-                tagName: "m.lowpriority",
-                incomingCall: incomingCallIfTaggedAs('m.lowpriority'),
-            },
-            {
-                list: this.state.lists['im.vector.fake.archived'],
-                label: _t('Historical'),
-                incomingCall: incomingCallIfTaggedAs('im.vector.fake.archived'),
-                startAsHidden: true,
-                showSpinner: this.state.isLoadingLeftRooms,
-                onHeaderClick: this.onArchivedHeaderClick,
-            },
-            {
-                list: this.state.lists['m.server_notice'],
-                label: _t('System Alerts'),
-                tagName: "m.lowpriority",
-                incomingCall: incomingCallIfTaggedAs('m.server_notice'),
-            },
-        ]);
-
-        const subListComponents = this._mapSubListProps(subLists);
-
-        const {resizeNotifier, collapsed, searchFilter, ConferenceHandler, onKeyDown, ...props} = this.props; // eslint-disable-line
-        return (
-            <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
-                {({onKeyDownHandler}) => <div
-                    {...props}
-                    onKeyDown={onKeyDownHandler}
-                    ref={this._collectResizeContainer}
-                    className="mx_RoomList"
-                    role="tree"
-                    aria-label={_t("Rooms")}
-                    // Firefox sometimes makes this element focusable due to
-                    // overflow:scroll;, so force it out of tab order.
-                    tabIndex="-1"
-                    onMouseMove={this.onMouseMove}
-                    onMouseLeave={this.onMouseLeave}
-                >
-                    { subListComponents }
-                </div> }
-            </RovingTabIndexProvider>
-        );
-    },
-});

src/components/views/rooms/RoomList.tsx

@@ -0,0 +1,353 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 2018 Vector Creations Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+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 * as React from "react";
+import { Dispatcher } from "flux";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { _t, _td } from "../../../languageHandler";
+import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
+import { ResizeNotifier } from "../../../utils/ResizeNotifier";
+import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
+import RoomViewStore from "../../../stores/RoomViewStore";
+import { ITagMap } from "../../../stores/room-list/algorithms/models";
+import { DefaultTagID, isCustomTag, TagID } from "../../../stores/room-list/models";
+import dis from "../../../dispatcher/dispatcher";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import RoomSublist from "./RoomSublist";
+import { ActionPayload } from "../../../dispatcher/payloads";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import GroupAvatar from "../avatars/GroupAvatar";
+import TemporaryTile from "./TemporaryTile";
+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";
+import SettingsStore from "../../../settings/SettingsStore";
+import CustomRoomTagStore from "../../../stores/CustomRoomTagStore";
+import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays";
+import { objectShallowClone, objectWithOnly } from "../../../utils/objects";
+
+interface IProps {
+    onKeyDown: (ev: React.KeyboardEvent) => void;
+    onFocus: (ev: React.FocusEvent) => void;
+    onBlur: (ev: React.FocusEvent) => void;
+    onResize: () => void;
+    resizeNotifier: ResizeNotifier;
+    collapsed: boolean;
+    isMinimized: boolean;
+}
+
+interface IState {
+    sublists: ITagMap;
+}
+
+const TAG_ORDER: TagID[] = [
+    DefaultTagID.Invite,
+    DefaultTagID.Favourite,
+    DefaultTagID.DM,
+    DefaultTagID.Untagged,
+
+    // -- Custom Tags Placeholder --
+
+    DefaultTagID.LowPriority,
+    DefaultTagID.ServerNotice,
+    DefaultTagID.Archived,
+];
+const CUSTOM_TAGS_BEFORE_TAG = DefaultTagID.LowPriority;
+const ALWAYS_VISIBLE_TAGS: TagID[] = [
+    DefaultTagID.DM,
+    DefaultTagID.Untagged,
+];
+
+interface ITagAesthetics {
+    sectionLabel: string;
+    sectionLabelRaw?: string;
+    addRoomLabel?: string;
+    onAddRoom?: (dispatcher?: Dispatcher<ActionPayload>) => void;
+    isInvite: boolean;
+    defaultHidden: boolean;
+}
+
+const TAG_AESTHETICS: {
+    // @ts-ignore - TS wants this to be a string but we know better
+    [tagId: TagID]: ITagAesthetics;
+} = {
+    [DefaultTagID.Invite]: {
+        sectionLabel: _td("Invites"),
+        isInvite: true,
+        defaultHidden: false,
+    },
+    [DefaultTagID.Favourite]: {
+        sectionLabel: _td("Favourites"),
+        isInvite: false,
+        defaultHidden: false,
+    },
+    [DefaultTagID.DM]: {
+        sectionLabel: _td("People"),
+        isInvite: false,
+        defaultHidden: false,
+        addRoomLabel: _td("Start chat"),
+        onAddRoom: (dispatcher?: Dispatcher<ActionPayload>) => {
+            (dispatcher || defaultDispatcher).dispatch({action: 'view_create_chat'});
+        },
+    },
+    [DefaultTagID.Untagged]: {
+        sectionLabel: _td("Rooms"),
+        isInvite: false,
+        defaultHidden: false,
+        addRoomLabel: _td("Create room"),
+        onAddRoom: (dispatcher?: Dispatcher<ActionPayload>) => {
+            (dispatcher || defaultDispatcher).dispatch({action: 'view_create_room'})
+        },
+    },
+    [DefaultTagID.LowPriority]: {
+        sectionLabel: _td("Low priority"),
+        isInvite: false,
+        defaultHidden: false,
+    },
+    [DefaultTagID.ServerNotice]: {
+        sectionLabel: _td("System Alerts"),
+        isInvite: false,
+        defaultHidden: false,
+    },
+
+    // TODO: Replace with archived view: https://github.com/vector-im/riot-web/issues/14038
+    [DefaultTagID.Archived]: {
+        sectionLabel: _td("Historical"),
+        isInvite: false,
+        defaultHidden: true,
+    },
+};
+
+function customTagAesthetics(tagId: TagID): ITagAesthetics {
+    if (tagId.startsWith("u.")) {
+        tagId = tagId.substring(2);
+    }
+    return {
+        sectionLabel: _td("Custom Tag"),
+        sectionLabelRaw: tagId,
+        isInvite: false,
+        defaultHidden: false,
+    };
+}
+
+export default class RoomList extends React.PureComponent<IProps, IState> {
+    private dispatcherRef;
+    private customTagStoreRef;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            sublists: {},
+        };
+
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+    }
+
+    public componentDidMount(): void {
+        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists);
+        this.customTagStoreRef = CustomRoomTagStore.addListener(this.updateLists);
+        this.updateLists(); // trigger the first update
+    }
+
+    public componentWillUnmount() {
+        RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists);
+        defaultDispatcher.unregister(this.dispatcherRef);
+        if (this.customTagStoreRef) this.customTagStoreRef.remove();
+    }
+
+    private onAction = (payload: ActionPayload) => {
+        if (payload.action === Action.ViewRoomDelta) {
+            const viewRoomDeltaPayload = payload as ViewRoomDeltaPayload;
+            const currentRoomId = RoomViewStore.getRoomId();
+            const room = this.getRoomDelta(currentRoomId, viewRoomDeltaPayload.delta, viewRoomDeltaPayload.unread);
+            if (room) {
+                dis.dispatch({
+                    action: 'view_room',
+                    room_id: room.roomId,
+                    show_room_tile: true, // to make sure the room gets scrolled into view
+                });
+            }
+        }
+    };
+
+    private getRoomDelta = (roomId: string, delta: number, unread = false) => {
+        const lists = RoomListStore.instance.orderedLists;
+        let rooms: Room = [];
+        TAG_ORDER.forEach(t => {
+            let listRooms = lists[t];
+
+            if (unread) {
+                // filter to only notification rooms (and our current active room so we can index properly)
+                listRooms = listRooms.filter(r => {
+                    const state = RoomNotificationStateStore.instance.getRoomState(r);
+                    return state.room.roomId === roomId || state.isUnread;
+                });
+            }
+
+            rooms.push(...listRooms);
+        });
+
+        const currentIndex = rooms.findIndex(r => r.roomId === roomId);
+        // use slice to account for looping around the start
+        const [room] = rooms.slice((currentIndex + delta) % rooms.length);
+        return room;
+    };
+
+    private updateLists = () => {
+        const newLists = RoomListStore.instance.orderedLists;
+        if (SettingsStore.getValue("advancedRoomListLogging")) {
+            // TODO: Remove debug: https://github.com/vector-im/riot-web/issues/14602
+            console.log("new lists", newLists);
+        }
+
+        const previousListIds = Object.keys(this.state.sublists);
+        const newListIds = Object.keys(newLists).filter(t => {
+            if (!isCustomTag(t)) return true; // always include non-custom tags
+
+            // if the tag is custom though, only include it if it is enabled
+            return CustomRoomTagStore.getTags()[t];
+        });
+
+        let doUpdate = arrayHasDiff(previousListIds, newListIds);
+        if (!doUpdate) {
+            // so we didn't have the visible sublists change, but did the contents of those
+            // sublists change significantly enough to break the sticky headers? Probably, so
+            // let's check the length of each.
+            for (const tagId of newListIds) {
+                const oldRooms = this.state.sublists[tagId];
+                const newRooms = newLists[tagId];
+                if (oldRooms.length !== newRooms.length) {
+                    doUpdate = true;
+                    break;
+                }
+            }
+        }
+
+        if (doUpdate) {
+            // We have to break our reference to the room list store if we want to be able to
+            // diff the object for changes, so do that.
+            const newSublists = objectWithOnly(newLists, newListIds);
+            const sublists = objectShallowClone(newSublists, (k, v) => arrayFastClone(v));
+
+            this.setState({sublists}, () => {
+                this.props.onResize();
+            });
+        }
+    };
+
+    private renderCommunityInvites(): TemporaryTile[] {
+        // TODO: Put community invites in a more sensible place (not in the room list)
+        // See https://github.com/vector-im/riot-web/issues/14456
+        return MatrixClientPeg.get().getGroups().filter(g => {
+           return g.myMembership === 'invite';
+        }).map(g => {
+            const avatar = (
+                <GroupAvatar
+                    groupId={g.groupId}
+                    groupName={g.name}
+                    groupAvatarUrl={g.avatarUrl}
+                    width={32} height={32} resizeMethod='crop'
+                />
+            );
+            const openGroup = () => {
+                defaultDispatcher.dispatch({
+                    action: 'view_group',
+                    group_id: g.groupId,
+                });
+            };
+            return (
+                <TemporaryTile
+                    isMinimized={this.props.isMinimized}
+                    isSelected={false}
+                    displayName={g.name}
+                    avatar={avatar}
+                    notificationState={StaticNotificationState.forSymbol("!", NotificationColor.Red)}
+                    onClick={openGroup}
+                    key={`temporaryGroupTile_${g.groupId}`}
+                />
+            );
+        });
+    }
+
+    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[]);
+
+        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
+            }
+
+            const aesthetics: ITagAesthetics = isCustomTag(orderedTagId)
+                ? customTagAesthetics(orderedTagId)
+                : TAG_AESTHETICS[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}
+                    isMinimized={this.props.isMinimized}
+                    onResize={this.props.onResize}
+                    extraBadTilesThatShouldntExist={extraTiles}
+                />
+            );
+        }
+
+        return components;
+    }
+
+    public render() {
+        const sublists = this.renderSublists();
+        return (
+            <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={this.props.onKeyDown}>
+                {({onKeyDownHandler}) => (
+                    <div
+                        onFocus={this.props.onFocus}
+                        onBlur={this.props.onBlur}
+                        onKeyDown={onKeyDownHandler}
+                        className="mx_RoomList"
+                        role="tree"
+                        aria-label={_t("Rooms")}
+                    >{sublists}</div>
+                )}
+            </RovingTabIndexProvider>
+        );
+    }
+}

src/components/views/rooms/RoomList2.tsx

@@ -1,230 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 Vector Creations Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-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 * as React from "react";
-import { _t, _td } from "../../../languageHandler";
-import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
-import { ResizeNotifier } from "../../../utils/ResizeNotifier";
-import RoomListStore, { LISTS_UPDATE_EVENT, RoomListStore2 } from "../../../stores/room-list/RoomListStore2";
-import { ITagMap } from "../../../stores/room-list/algorithms/models";
-import { DefaultTagID, TagID } from "../../../stores/room-list/models";
-import { Dispatcher } from "flux";
-import dis from "../../../dispatcher/dispatcher";
-import RoomSublist2 from "./RoomSublist2";
-import { ActionPayload } from "../../../dispatcher/payloads";
-import { NameFilterCondition } from "../../../stores/room-list/filters/NameFilterCondition";
-import { ListLayout } from "../../../stores/room-list/ListLayout";
-
-/*******************************************************************
- *   CAUTION                                                       *
- *******************************************************************
- * This is a work in progress implementation and isn't complete or *
- * even useful as a component. Please avoid using it until this    *
- * warning disappears.                                             *
- *******************************************************************/
-
-interface IProps {
-    onKeyDown: (ev: React.KeyboardEvent) => void;
-    onFocus: (ev: React.FocusEvent) => void;
-    onBlur: (ev: React.FocusEvent) => void;
-    resizeNotifier: ResizeNotifier;
-    collapsed: boolean;
-    searchFilter: string;
-}
-
-interface IState {
-    sublists: ITagMap;
-    layouts: Map<TagID, ListLayout>;
-}
-
-const TAG_ORDER: TagID[] = [
-    // -- Community Invites Placeholder --
-
-    DefaultTagID.Invite,
-    DefaultTagID.Favourite,
-    DefaultTagID.DM,
-    DefaultTagID.Untagged,
-
-    // -- Custom Tags Placeholder --
-
-    DefaultTagID.LowPriority,
-    DefaultTagID.ServerNotice,
-    DefaultTagID.Archived,
-];
-const COMMUNITY_TAGS_BEFORE_TAG = DefaultTagID.Invite;
-const CUSTOM_TAGS_BEFORE_TAG = DefaultTagID.LowPriority;
-const ALWAYS_VISIBLE_TAGS: TagID[] = [
-    DefaultTagID.DM,
-    DefaultTagID.Untagged,
-];
-
-interface ITagAesthetics {
-    sectionLabel: string;
-    addRoomLabel?: string;
-    onAddRoom?: (dispatcher: Dispatcher<ActionPayload>) => void;
-    isInvite: boolean;
-    defaultHidden: boolean;
-}
-
-const TAG_AESTHETICS: {
-    // @ts-ignore - TS wants this to be a string but we know better
-    [tagId: TagID]: ITagAesthetics;
-} = {
-    [DefaultTagID.Invite]: {
-        sectionLabel: _td("Invites"),
-        isInvite: true,
-        defaultHidden: false,
-    },
-    [DefaultTagID.Favourite]: {
-        sectionLabel: _td("Favourites"),
-        isInvite: false,
-        defaultHidden: false,
-    },
-    [DefaultTagID.DM]: {
-        sectionLabel: _td("Direct Messages"),
-        isInvite: false,
-        defaultHidden: false,
-        addRoomLabel: _td("Start chat"),
-        onAddRoom: (dispatcher: Dispatcher<ActionPayload>) => dispatcher.dispatch({action: 'view_create_chat'}),
-    },
-    [DefaultTagID.Untagged]: {
-        sectionLabel: _td("Rooms"),
-        isInvite: false,
-        defaultHidden: false,
-        addRoomLabel: _td("Create room"),
-        onAddRoom: (dispatcher: Dispatcher<ActionPayload>) => dispatcher.dispatch({action: 'view_create_room'}),
-    },
-    [DefaultTagID.LowPriority]: {
-        sectionLabel: _td("Low priority"),
-        isInvite: false,
-        defaultHidden: false,
-    },
-    [DefaultTagID.ServerNotice]: {
-        sectionLabel: _td("System Alerts"),
-        isInvite: false,
-        defaultHidden: false,
-    },
-    [DefaultTagID.Archived]: {
-        sectionLabel: _td("Historical"),
-        isInvite: false,
-        defaultHidden: true,
-    },
-};
-
-export default class RoomList2 extends React.Component<IProps, IState> {
-    private searchFilter: NameFilterCondition = new NameFilterCondition();
-
-    constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            sublists: {},
-            layouts: new Map<TagID, ListLayout>(),
-        };
-    }
-
-    public componentDidUpdate(prevProps: Readonly<IProps>): void {
-        if (prevProps.searchFilter !== this.props.searchFilter) {
-            const hadSearch = !!this.searchFilter.search.trim();
-            const haveSearch = !!this.props.searchFilter.trim();
-            this.searchFilter.search = this.props.searchFilter;
-            if (!hadSearch && haveSearch) {
-                // started a new filter - add the condition
-                RoomListStore.instance.addFilter(this.searchFilter);
-            } else if (hadSearch && !haveSearch) {
-                // cleared a filter - remove the condition
-                RoomListStore.instance.removeFilter(this.searchFilter);
-            } // else the filter hasn't changed enough for us to care here
-        }
-    }
-
-    public componentDidMount(): void {
-        RoomListStore.instance.on(LISTS_UPDATE_EVENT, (store: RoomListStore2) => {
-            const newLists = store.orderedLists;
-            console.log("new lists", newLists);
-
-            const layoutMap = new Map<TagID, ListLayout>();
-            for (const tagId of Object.keys(newLists)) {
-                layoutMap.set(tagId, new ListLayout(tagId));
-            }
-
-            this.setState({sublists: newLists, layouts: layoutMap});
-        });
-    }
-
-    private renderSublists(): React.ReactElement[] {
-        const components: React.ReactElement[] = [];
-
-        for (const orderedTagId of TAG_ORDER) {
-            if (COMMUNITY_TAGS_BEFORE_TAG === orderedTagId) {
-                // Populate community invites if we have the chance
-                // TODO
-            }
-            if (CUSTOM_TAGS_BEFORE_TAG === orderedTagId) {
-                // Populate custom tags if needed
-                // TODO
-            }
-
-            const orderedRooms = this.state.sublists[orderedTagId] || [];
-            if (orderedRooms.length === 0 && !ALWAYS_VISIBLE_TAGS.includes(orderedTagId)) {
-                continue; // skip tag - not needed
-            }
-
-            const aesthetics: ITagAesthetics = TAG_AESTHETICS[orderedTagId];
-            if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
-
-            const onAddRoomFn = aesthetics.onAddRoom ? () => aesthetics.onAddRoom(dis) : null;
-            components.push(
-                <RoomSublist2
-                    key={`sublist-${orderedTagId}`}
-                    forRooms={true}
-                    rooms={orderedRooms}
-                    startAsHidden={aesthetics.defaultHidden}
-                    label={_t(aesthetics.sectionLabel)}
-                    onAddRoom={onAddRoomFn}
-                    addRoomLabel={aesthetics.addRoomLabel}
-                    isInvite={aesthetics.isInvite}
-                    layout={this.state.layouts.get(orderedTagId)}
-                />
-            );
-        }
-
-        return components;
-    }
-
-    public render() {
-        const sublists = this.renderSublists();
-        return (
-            <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={this.props.onKeyDown}>
-                {({onKeyDownHandler}) => (
-                    <div
-                        onFocus={this.props.onFocus}
-                        onBlur={this.props.onBlur}
-                        onKeyDown={onKeyDownHandler}
-                        className="mx_RoomList mx_RoomList2"
-                        role="tree"
-                        aria-label={_t("Rooms")}
-                        // Firefox sometimes makes this element focusable due to
-                        // overflow:scroll;, so force it out of tab order.
-                        tabIndex={-1}
-                    >{sublists}</div>
-                )}
-            </RovingTabIndexProvider>
-        );
-    }
-}

src/components/views/rooms/RoomPreviewBar.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+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.
@@ -24,6 +24,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
+import SdkConfig from "../../../SdkConfig";
 import IdentityAuthClient from '../../../IdentityAuthClient';
 
 const MessageCase = Object.freeze({
@@ -282,11 +283,11 @@ export default createReactClass({
     },
 
     render: function() {
+        const brand = SdkConfig.get().brand;
         const Spinner = sdk.getComponent('elements.Spinner');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         let showSpinner = false;
-        let darkStyle = false;
         let title;
         let subTitle;
         let primaryActionHandler;
@@ -314,7 +315,6 @@ export default createReactClass({
                 break;
             }
             case MessageCase.NotLoggedIn: {
-                darkStyle = true;
                 title = _t("Join the conversation with an account");
                 primaryActionLabel = _t("Sign Up");
                 primaryActionHandler = this.onRegisterClick;
@@ -398,7 +398,8 @@ export default createReactClass({
                 );
                 subTitle = _t(
                     "Link this email with your account in Settings to receive invites " +
-                    "directly in Riot.",
+                    "directly in %(brand)s.",
+                    { brand },
                 );
                 primaryActionLabel = _t("Join the discussion");
                 primaryActionHandler = this.props.onJoinClick;
@@ -413,7 +414,8 @@ export default createReactClass({
                     },
                 );
                 subTitle = _t(
-                    "Use an identity server in Settings to receive invites directly in Riot.",
+                    "Use an identity server in Settings to receive invites directly in %(brand)s.",
+                    { brand },
                 );
                 primaryActionLabel = _t("Join the discussion");
                 primaryActionHandler = this.props.onJoinClick;
@@ -428,7 +430,8 @@ export default createReactClass({
                     },
                 );
                 subTitle = _t(
-                    "Share this email in Settings to receive invites directly in Riot.",
+                    "Share this email in Settings to receive invites directly in %(brand)s.",
+                    { brand },
                 );
                 primaryActionLabel = _t("Join the discussion");
                 primaryActionHandler = this.props.onJoinClick;
@@ -552,7 +555,6 @@ export default createReactClass({
         const classes = classNames("mx_RoomPreviewBar", "dark-panel", `mx_RoomPreviewBar_${messageCase}`, {
             "mx_RoomPreviewBar_panel": this.props.canPreview,
             "mx_RoomPreviewBar_dialog": !this.props.canPreview,
-            "mx_RoomPreviewBar_dark": darkStyle,
         });
 
         return (

src/components/views/rooms/RoomRecoveryReminder.js

@@ -21,7 +21,8 @@ import * as sdk from "../../../index";
 import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import SettingsStore from "../../../settings/SettingsStore";
+import {SettingLevel} from "../../../settings/SettingLevel";
 
 export default class RoomRecoveryReminder extends React.PureComponent {
     static propTypes = {

src/components/views/rooms/RoomSublist.tsx

@@ -0,0 +1,840 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 2018 Vector Creations Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+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 * as React from "react";
+import {createRef} from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import classNames from 'classnames';
+import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
+import { _t } from "../../../languageHandler";
+import AccessibleButton from "../../views/elements/AccessibleButton";
+import RoomTile from "./RoomTile";
+import { ListLayout } from "../../../stores/room-list/ListLayout";
+import {
+    ChevronFace,
+    ContextMenu,
+    ContextMenuTooltipButton,
+    StyledMenuItemCheckbox,
+    StyledMenuItemRadio,
+} from "../../structures/ContextMenu";
+import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
+import { ListAlgorithm, SortAlgorithm } from "../../../stores/room-list/algorithms/models";
+import { DefaultTagID, TagID } from "../../../stores/room-list/models";
+import dis from "../../../dispatcher/dispatcher";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import NotificationBadge from "./NotificationBadge";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { Key } from "../../../Keyboard";
+import { ActionPayload } from "../../../dispatcher/payloads";
+import { Enable, Resizable } from "re-resizable";
+import { Direction } from "re-resizable/lib/resizer";
+import { polyfillTouchEvent } from "../../../@types/polyfill";
+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 { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
+
+const SHOW_N_BUTTON_HEIGHT = 28; // As defined by CSS
+const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
+export const HEADER_HEIGHT = 32; // As defined by CSS
+
+const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT;
+
+// HACK: We really shouldn't have to do this.
+polyfillTouchEvent();
+
+interface IProps {
+    forRooms: boolean;
+    startAsHidden: boolean;
+    label: string;
+    onAddRoom?: () => void;
+    addRoomLabel: string;
+    isMinimized: boolean;
+    tagId: TagID;
+    onResize: () => void;
+
+    // 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[];
+
+    // TODO: Account for https://github.com/vector-im/riot-web/issues/14179
+}
+
+// TODO: Use re-resizer's NumberSize when it is exposed as the type
+interface ResizeDelta {
+    width: number;
+    height: number;
+}
+
+type PartialDOMRect = Pick<DOMRect, "left" | "top" | "height">;
+
+interface IState {
+    contextMenuPosition: PartialDOMRect;
+    isResizing: boolean;
+    isExpanded: boolean; // used for the for expand of the sublist when the room list is being filtered
+    height: number;
+    rooms: Room[];
+    filteredExtraTiles?: TemporaryTile[];
+}
+
+export default class RoomSublist extends React.Component<IProps, IState> {
+    private headerButton = createRef<HTMLDivElement>();
+    private sublistRef = createRef<HTMLDivElement>();
+    private dispatcherRef: string;
+    private layout: ListLayout;
+    private heightAtStart: number;
+    private isBeingFiltered: boolean;
+    private notificationState: ListNotificationState;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.layout = RoomListLayoutStore.instance.getLayoutFor(this.props.tagId);
+        this.heightAtStart = 0;
+        this.isBeingFiltered = !!RoomListStore.instance.getFirstNameFilterCondition();
+        this.notificationState = RoomNotificationStateStore.instance.getListState(this.props.tagId);
+        this.state = {
+            contextMenuPosition: null,
+            isResizing: false,
+            isExpanded: this.isBeingFiltered ? this.isBeingFiltered : !this.layout.isCollapsed,
+            height: 0, // to be fixed in a moment, we need `rooms` to calculate this.
+            rooms: arrayFastClone(RoomListStore.instance.orderedLists[this.props.tagId] || []),
+        };
+        // 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() {
+        const requestedVisibleTiles = Math.max(Math.floor(this.layout.visibleTiles), this.layout.minVisibleTiles);
+        const tileCount = Math.min(this.numTiles, requestedVisibleTiles);
+        return this.layout.tilesToPixelsWithPadding(tileCount, this.padding);
+    }
+
+    private get padding() {
+        let padding = RESIZE_HANDLE_HEIGHT;
+        // this is used for calculating the max height of the whole container,
+        // and takes into account whether there should be room reserved for the show more/less button
+        // when fully expanded. We can't rely purely on the layout's defaultVisible tile count
+        // because there are conditions in which we need to know that the 'show more' button
+        // is present while well under the default tile limit.
+        const needsShowMore = this.numTiles > this.numVisibleTiles;
+
+        // ...but also check this or we'll miss if the section is expanded and we need a
+        // 'show less'
+        const needsShowLess = this.numTiles > this.layout.defaultVisibleTiles;
+
+        if (needsShowMore || needsShowLess) {
+            padding += SHOW_N_BUTTON_HEIGHT;
+        }
+        return padding;
+    }
+
+    private get extraTiles(): TemporaryTile[] | null {
+        if (this.state.filteredExtraTiles) {
+            return this.state.filteredExtraTiles;
+        }
+        if (this.props.extraBadTilesThatShouldntExist) {
+            return this.props.extraBadTilesThatShouldntExist;
+        }
+        return null;
+    }
+
+    private get numTiles(): number {
+        return RoomSublist.calcNumTiles(this.state.rooms, this.extraTiles);
+    }
+
+    private static calcNumTiles(rooms: Room[], extraTiles: any[]) {
+        return (rooms || []).length + (extraTiles || []).length;
+    }
+
+    private get numVisibleTiles(): number {
+        const nVisible = Math.ceil(this.layout.visibleTiles);
+        return Math.min(nVisible, this.numTiles);
+    }
+
+    public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>) {
+        const prevExtraTiles = prevState.filteredExtraTiles || prevProps.extraBadTilesThatShouldntExist;
+        // 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) {
+            this.setState({height: this.calculateInitialHeight()});
+        }
+    }
+
+    public shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>): boolean {
+        if (objectHasDiff(this.props, nextProps)) {
+            // Something we don't care to optimize has updated, so update.
+            return true;
+        }
+
+        // Do the same check used on props for state, without the rooms we're going to no-op
+        const prevStateNoRooms = objectExcluding(this.state, ['rooms']);
+        const nextStateNoRooms = objectExcluding(nextState, ['rooms']);
+        if (objectHasDiff(prevStateNoRooms, nextStateNoRooms)) {
+            return true;
+        }
+
+        // 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) || [];
+        if (prevExtraTiles.length > 0 || nextExtraTiles.length > 0) {
+            return true;
+        }
+
+        // If we're about to update the height of the list, we don't really care about which rooms
+        // are visible or not for no-op purposes, so ensure that the height calculation runs through.
+        if (RoomSublist.calcNumTiles(nextState.rooms, nextExtraTiles) !== this.numTiles) {
+            return true;
+        }
+
+        // Before we go analyzing the rooms, we can see if we're collapsed. If we're collapsed, we don't need
+        // to render anything. We do this after the height check though to ensure that the height gets appropriately
+        // calculated for when/if we become uncollapsed.
+        if (!nextState.isExpanded) {
+            return false;
+        }
+
+        // Quickly double check we're not about to break something due to the number of rooms changing.
+        if (this.state.rooms.length !== nextState.rooms.length) {
+            return true;
+        }
+
+        // Finally, determine if the room update (as presumably that's all that's left) is within
+        // our visible range. If it is, then do a render. If the update is outside our visible range
+        // then we can skip the update.
+        //
+        // We also optimize for order changing here: if the update did happen in our visible range
+        // but doesn't result in the list re-sorting itself then there's no reason for us to update
+        // on our own.
+        const prevSlicedRooms = this.state.rooms.slice(0, this.numVisibleTiles);
+        const nextSlicedRooms = nextState.rooms.slice(0, this.numVisibleTiles);
+        if (arrayHasOrderChange(prevSlicedRooms, nextSlicedRooms)) {
+            return true;
+        }
+
+        // Finally, nothing happened so no-op the update
+        return false;
+    }
+
+    public componentWillUnmount() {
+        defaultDispatcher.unregister(this.dispatcherRef);
+        RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onListsUpdated);
+    }
+
+    private onListsUpdated = () => {
+        const stateUpdates: IState & any = {}; // &any is to avoid a cast on the initializer
+
+        if (this.props.extraBadTilesThatShouldntExist) {
+            const nameCondition = RoomListStore.instance.getFirstNameFilterCondition();
+            if (nameCondition) {
+                stateUpdates.filteredExtraTiles = this.props.extraBadTilesThatShouldntExist
+                    .filter(t => nameCondition.matches(t.props.displayName || ""));
+            } else if (this.state.filteredExtraTiles) {
+                stateUpdates.filteredExtraTiles = null;
+            }
+        }
+
+        const currentRooms = this.state.rooms;
+        const newRooms = arrayFastClone(RoomListStore.instance.orderedLists[this.props.tagId] || []);
+        if (arrayHasOrderChange(currentRooms, newRooms)) {
+            stateUpdates.rooms = newRooms;
+        }
+
+        const isStillBeingFiltered = !!RoomListStore.instance.getFirstNameFilterCondition();
+        if (isStillBeingFiltered !== this.isBeingFiltered) {
+            this.isBeingFiltered = isStillBeingFiltered;
+            if (isStillBeingFiltered) {
+                stateUpdates.isExpanded = true;
+            } else {
+                stateUpdates.isExpanded = !this.layout.isCollapsed;
+            }
+        }
+
+        if (Object.keys(stateUpdates).length > 0) {
+            this.setState(stateUpdates);
+        }
+    };
+
+    private onAction = (payload: ActionPayload) => {
+        if (payload.action === "view_room" && payload.show_room_tile && this.state.rooms) {
+            // XXX: we have to do this a tick later because we have incorrect intermediate props during a room change
+            // where we lose the room we are changing from temporarily and then it comes back in an update right after.
+            setImmediate(() => {
+                const roomIndex = this.state.rooms.findIndex((r) => r.roomId === payload.room_id);
+
+                if (!this.state.isExpanded && roomIndex > -1) {
+                    this.toggleCollapsed();
+                }
+                // extend the visible section to include the room if it is entirely invisible
+                if (roomIndex >= this.numVisibleTiles) {
+                    this.layout.visibleTiles = this.layout.tilesWithPadding(roomIndex + 1, MAX_PADDING_HEIGHT);
+                    this.forceUpdate(); // because the layout doesn't trigger a re-render
+                }
+            });
+        }
+    };
+
+    private onAddRoom = (e) => {
+        e.stopPropagation();
+        if (this.props.onAddRoom) this.props.onAddRoom();
+    };
+
+    private applyHeightChange(newHeight: number) {
+        const heightInTiles = Math.ceil(this.layout.pixelsToTiles(newHeight - this.padding));
+        this.layout.visibleTiles = Math.min(this.numTiles, heightInTiles);
+    }
+
+    private onResize = (
+        e: MouseEvent | TouchEvent,
+        travelDirection: Direction,
+        refToElement: HTMLDivElement,
+        delta: ResizeDelta,
+    ) => {
+        const newHeight = this.heightAtStart + delta.height;
+        this.applyHeightChange(newHeight);
+        this.setState({height: newHeight});
+    };
+
+    private onResizeStart = () => {
+        this.heightAtStart = this.state.height;
+        this.setState({isResizing: true});
+    };
+
+    private onResizeStop = (
+        e: MouseEvent | TouchEvent,
+        travelDirection: Direction,
+        refToElement: HTMLDivElement,
+        delta: ResizeDelta,
+    ) => {
+        const newHeight = this.heightAtStart + delta.height;
+        this.applyHeightChange(newHeight);
+        this.setState({isResizing: false, height: newHeight});
+    };
+
+    private onShowAllClick = () => {
+        // read number of visible tiles before we mutate it
+        const numVisibleTiles = this.numVisibleTiles;
+        const newHeight = this.layout.tilesToPixelsWithPadding(this.numTiles, this.padding);
+        this.applyHeightChange(newHeight);
+        this.setState({height: newHeight}, () => {
+            // focus the top-most new room
+            this.focusRoomTile(numVisibleTiles);
+        });
+    };
+
+    private onShowLessClick = () => {
+        const newHeight = this.layout.tilesToPixelsWithPadding(this.layout.defaultVisibleTiles, this.padding);
+        this.applyHeightChange(newHeight);
+        this.setState({height: newHeight});
+    };
+
+    private focusRoomTile = (index: number) => {
+        if (!this.sublistRef.current) return;
+        const elements = this.sublistRef.current.querySelectorAll<HTMLDivElement>(".mx_RoomTile");
+        const element = elements && elements[index];
+        if (element) {
+            element.focus();
+        }
+    };
+
+    private onOpenMenuClick = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const target = ev.target as HTMLButtonElement;
+        this.setState({contextMenuPosition: target.getBoundingClientRect()});
+    };
+
+    private onContextMenu = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({
+            contextMenuPosition: {
+                left: ev.clientX,
+                top: ev.clientY,
+                height: 0,
+            },
+        });
+    };
+
+    private onCloseMenu = () => {
+        this.setState({contextMenuPosition: null});
+    };
+
+    private onUnreadFirstChanged = async () => {
+        const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
+        const newAlgorithm = isUnreadFirst ? ListAlgorithm.Natural : ListAlgorithm.Importance;
+        await RoomListStore.instance.setListOrder(this.props.tagId, newAlgorithm);
+    };
+
+    private onTagSortChanged = async (sort: SortAlgorithm) => {
+        await RoomListStore.instance.setTagSorting(this.props.tagId, sort);
+    };
+
+    private onMessagePreviewChanged = () => {
+        this.layout.showPreviews = !this.layout.showPreviews;
+        this.forceUpdate(); // because the layout doesn't trigger a re-render
+    };
+
+    private onBadgeClick = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        let room;
+        if (this.props.tagId === DefaultTagID.Invite) {
+            // switch to first room as that'll be the top of the list for the user
+            room = this.state.rooms && this.state.rooms[0];
+        } else {
+            // find the first room with a count of the same colour as the badge count
+            room = this.state.rooms.find((r: Room) => {
+                const notifState = this.notificationState.getForRoom(r);
+                return notifState.count > 0 && notifState.color === this.notificationState.color;
+            });
+        }
+
+        if (room) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: room.roomId,
+                show_room_tile: true, // to make sure the room gets scrolled into view
+            });
+        }
+    };
+
+    private onHeaderClick = () => {
+        const possibleSticky = this.headerButton.current.parentElement;
+        const sublist = possibleSticky.parentElement.parentElement;
+        const list = sublist.parentElement.parentElement;
+        // the scrollTop is capped at the height of the header in LeftPanel, the top header is always sticky
+        const isAtTop = list.scrollTop <= HEADER_HEIGHT;
+        const isAtBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight;
+        const isStickyTop = possibleSticky.classList.contains('mx_RoomSublist_headerContainer_stickyTop');
+        const isStickyBottom = possibleSticky.classList.contains('mx_RoomSublist_headerContainer_stickyBottom');
+
+        if ((isStickyBottom && !isAtBottom) || (isStickyTop && !isAtTop)) {
+            // is sticky - jump to list
+            sublist.scrollIntoView({behavior: 'smooth'});
+        } else {
+            // on screen - toggle collapse
+            const isExpanded = this.state.isExpanded;
+            this.toggleCollapsed();
+            // if the bottom list is collapsed then scroll it in so it doesn't expand off screen
+            if (!isExpanded && isStickyBottom) {
+                setImmediate(() => {
+                    sublist.scrollIntoView({behavior: 'smooth'});
+                });
+            }
+        }
+    };
+
+    private toggleCollapsed = () => {
+        this.layout.isCollapsed = this.state.isExpanded;
+        this.setState({isExpanded: !this.layout.isCollapsed});
+        setImmediate(() => this.props.onResize()); // needs to happen when the DOM is updated
+    };
+
+    private onHeaderKeyDown = (ev: React.KeyboardEvent) => {
+        switch (ev.key) {
+            case Key.ARROW_LEFT:
+                ev.stopPropagation();
+                if (this.state.isExpanded) {
+                    // On ARROW_LEFT collapse the room sublist if it isn't already
+                    this.toggleCollapsed();
+                }
+                break;
+            case Key.ARROW_RIGHT: {
+                ev.stopPropagation();
+                if (!this.state.isExpanded) {
+                    // On ARROW_RIGHT expand the room sublist if it isn't already
+                    this.toggleCollapsed();
+                } else if (this.sublistRef.current) {
+                    // otherwise focus the first room
+                    const element = this.sublistRef.current.querySelector(".mx_RoomTile") as HTMLDivElement;
+                    if (element) {
+                        element.focus();
+                    }
+                }
+                break;
+            }
+        }
+    };
+
+    private onKeyDown = (ev: React.KeyboardEvent) => {
+        switch (ev.key) {
+            // On ARROW_LEFT go to the sublist header
+            case Key.ARROW_LEFT:
+                ev.stopPropagation();
+                this.headerButton.current.focus();
+                break;
+            // Consume ARROW_RIGHT so it doesn't cause focus to get sent to composer
+            case Key.ARROW_RIGHT:
+                ev.stopPropagation();
+        }
+    };
+
+    private renderVisibleTiles(): React.ReactElement[] {
+        if (!this.state.isExpanded) {
+            // don't waste time on rendering
+            return [];
+        }
+
+        const tiles: React.ReactElement[] = [];
+
+        if (this.state.rooms) {
+            const visibleRooms = this.state.rooms.slice(0, this.numVisibleTiles);
+            for (const room of visibleRooms) {
+                tiles.push(
+                    <RoomTile
+                        room={room}
+                        key={`room-${room.roomId}`}
+                        showMessagePreview={this.layout.showPreviews}
+                        isMinimized={this.props.isMinimized}
+                        tag={this.props.tagId}
+                    />
+                );
+            }
+        }
+
+        if (this.extraTiles) {
+            // HACK: We break typing here, but this 'extra tiles' property shouldn't exist.
+            (tiles as any[]).push(...this.extraTiles);
+        }
+
+        // We only have to do this because of the extra tiles. We do it conditionally
+        // to avoid spending cycles on slicing. It's generally fine to do this though
+        // as users are unlikely to have more than a handful of tiles when the extra
+        // tiles are used.
+        if (tiles.length > this.numVisibleTiles) {
+            return tiles.slice(0, this.numVisibleTiles);
+        }
+
+        return tiles;
+    }
+
+    private renderMenu(): React.ReactElement {
+        let contextMenu = null;
+        if (this.state.contextMenuPosition) {
+            const isAlphabetical = RoomListStore.instance.getTagSorting(this.props.tagId) === SortAlgorithm.Alphabetic;
+            const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
+
+            // Invites don't get some nonsense options, so only add them if we have to.
+            let otherSections = null;
+            if (this.props.tagId !== DefaultTagID.Invite) {
+                otherSections = (
+                    <React.Fragment>
+                        <hr />
+                        <div>
+                            <div className='mx_RoomSublist_contextMenu_title'>{_t("Appearance")}</div>
+                            <StyledMenuItemCheckbox
+                                onClose={this.onCloseMenu}
+                                onChange={this.onUnreadFirstChanged}
+                                checked={isUnreadFirst}
+                            >
+                                {_t("Show rooms with unread messages first")}
+                            </StyledMenuItemCheckbox>
+                            <StyledMenuItemCheckbox
+                                onClose={this.onCloseMenu}
+                                onChange={this.onMessagePreviewChanged}
+                                checked={this.layout.showPreviews}
+                            >
+                                {_t("Show previews of messages")}
+                            </StyledMenuItemCheckbox>
+                        </div>
+                    </React.Fragment>
+                );
+            }
+
+            contextMenu = (
+                <ContextMenu
+                    chevronFace={ChevronFace.None}
+                    left={this.state.contextMenuPosition.left}
+                    top={this.state.contextMenuPosition.top + this.state.contextMenuPosition.height}
+                    onFinished={this.onCloseMenu}
+                >
+                    <div className="mx_RoomSublist_contextMenu">
+                        <div>
+                            <div className='mx_RoomSublist_contextMenu_title'>{_t("Sort by")}</div>
+                            <StyledMenuItemRadio
+                                onClose={this.onCloseMenu}
+                                onChange={() => this.onTagSortChanged(SortAlgorithm.Recent)}
+                                checked={!isAlphabetical}
+                                name={`mx_${this.props.tagId}_sortBy`}
+                            >
+                                {_t("Activity")}
+                            </StyledMenuItemRadio>
+                            <StyledMenuItemRadio
+                                onClose={this.onCloseMenu}
+                                onChange={() => this.onTagSortChanged(SortAlgorithm.Alphabetic)}
+                                checked={isAlphabetical}
+                                name={`mx_${this.props.tagId}_sortBy`}
+                            >
+                                {_t("A-Z")}
+                            </StyledMenuItemRadio>
+                        </div>
+                        {otherSections}
+                    </div>
+                </ContextMenu>
+            );
+        }
+
+        return (
+            <React.Fragment>
+                <ContextMenuTooltipButton
+                    className="mx_RoomSublist_menuButton"
+                    onClick={this.onOpenMenuClick}
+                    title={_t("List options")}
+                    isExpanded={!!this.state.contextMenuPosition}
+                />
+                {contextMenu}
+            </React.Fragment>
+        );
+    }
+
+    private renderHeader(): React.ReactElement {
+        return (
+            <RovingTabIndexWrapper inputRef={this.headerButton}>
+                {({onFocus, isActive, ref}) => {
+                    const tabIndex = isActive ? 0 : -1;
+
+                    let ariaLabel = _t("Jump to first unread room.");
+                    if (this.props.tagId === DefaultTagID.Invite) {
+                        ariaLabel = _t("Jump to first invite.");
+                    }
+
+                    const badge = (
+                        <NotificationBadge
+                            forceCount={true}
+                            notification={this.notificationState}
+                            onClick={this.onBadgeClick}
+                            tabIndex={tabIndex}
+                            aria-label={ariaLabel}
+                        />
+                    );
+
+                    let addRoomButton = null;
+                    if (!!this.props.onAddRoom) {
+                        addRoomButton = (
+                            <AccessibleTooltipButton
+                                tabIndex={tabIndex}
+                                onClick={this.onAddRoom}
+                                className="mx_RoomSublist_auxButton"
+                                aria-label={this.props.addRoomLabel || _t("Add room")}
+                                title={this.props.addRoomLabel}
+                                tooltipClassName={"mx_RoomSublist_addRoomTooltip"}
+                            />
+                        );
+                    }
+
+                    const collapseClasses = classNames({
+                        'mx_RoomSublist_collapseBtn': true,
+                        'mx_RoomSublist_collapseBtn_collapsed': !this.state.isExpanded,
+                    });
+
+                    const classes = classNames({
+                        'mx_RoomSublist_headerContainer': true,
+                        'mx_RoomSublist_headerContainer_withAux': !!addRoomButton,
+                    });
+
+                    const badgeContainer = (
+                        <div className="mx_RoomSublist_badgeContainer">
+                            {badge}
+                        </div>
+                    );
+
+                    let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
+                    if (this.props.isMinimized) {
+                        Button = AccessibleTooltipButton;
+                    }
+
+                    // Note: the addRoomButton conditionally gets moved around
+                    // the DOM depending on whether or not the list is minimized.
+                    // If we're minimized, we want it below the header so it
+                    // doesn't become sticky.
+                    // The same applies to the notification badge.
+                    return (
+                        <div className={classes} onKeyDown={this.onHeaderKeyDown} onFocus={onFocus} aria-label={this.props.label}>
+                            <div className="mx_RoomSublist_stickable">
+                                <Button
+                                    onFocus={onFocus}
+                                    inputRef={ref}
+                                    tabIndex={tabIndex}
+                                    className="mx_RoomSublist_headerText"
+                                    role="treeitem"
+                                    aria-expanded={this.state.isExpanded}
+                                    aria-level={1}
+                                    onClick={this.onHeaderClick}
+                                    onContextMenu={this.onContextMenu}
+                                    title={this.props.isMinimized ? this.props.label : undefined}
+                                >
+                                    <span className={collapseClasses} />
+                                    <span>{this.props.label}</span>
+                                </Button>
+                                {this.renderMenu()}
+                                {this.props.isMinimized ? null : badgeContainer}
+                                {this.props.isMinimized ? null : addRoomButton}
+                            </div>
+                            {this.props.isMinimized ? badgeContainer : null}
+                            {this.props.isMinimized ? addRoomButton : null}
+                        </div>
+                    );
+                }}
+            </RovingTabIndexWrapper>
+        );
+    }
+
+    private onScrollPrevent(e: React.UIEvent<HTMLDivElement>) {
+        // the RoomTile calls scrollIntoView and the browser may scroll a div we do not wish to be scrollable
+        // this fixes https://github.com/vector-im/riot-web/issues/14413
+        (e.target as HTMLDivElement).scrollTop = 0;
+    }
+
+    public render(): React.ReactElement {
+        const visibleTiles = this.renderVisibleTiles();
+        const classes = classNames({
+            'mx_RoomSublist': true,
+            'mx_RoomSublist_hasMenuOpen': !!this.state.contextMenuPosition,
+            'mx_RoomSublist_minimized': this.props.isMinimized,
+        });
+
+        let content = null;
+        if (visibleTiles.length > 0) {
+            const layout = this.layout; // to shorten calls
+
+            const minTiles = Math.min(layout.minVisibleTiles, this.numTiles);
+            const showMoreAtMinHeight = minTiles < this.numTiles;
+            const minHeightPadding = RESIZE_HANDLE_HEIGHT + (showMoreAtMinHeight ? SHOW_N_BUTTON_HEIGHT : 0);
+            const minTilesPx = layout.tilesToPixelsWithPadding(minTiles, minHeightPadding);
+            let maxTilesPx = layout.tilesToPixelsWithPadding(this.numTiles, this.padding);
+            const showMoreBtnClasses = classNames({
+                'mx_RoomSublist_showNButton': true,
+            });
+
+            // If we're hiding rooms, show a 'show more' button to the user. This button
+            // floats above the resize handle, if we have one present. If the user has all
+            // tiles visible, it becomes 'show less'.
+            let showNButton = null;
+
+            if (maxTilesPx > this.state.height) {
+                // the height of all the tiles is greater than the section height: we need a 'show more' button
+                const nonPaddedHeight = this.state.height - RESIZE_HANDLE_HEIGHT - SHOW_N_BUTTON_HEIGHT;
+                const amountFullyShown = Math.floor(nonPaddedHeight / this.layout.tileHeight);
+                const numMissing = this.numTiles - amountFullyShown;
+                let showMoreText = (
+                    <span className='mx_RoomSublist_showNButtonText'>
+                        {_t("Show %(count)s more", {count: numMissing})}
+                    </span>
+                );
+                if (this.props.isMinimized) showMoreText = null;
+                showNButton = (
+                    <RovingAccessibleButton onClick={this.onShowAllClick} className={showMoreBtnClasses}>
+                        <span className='mx_RoomSublist_showMoreButtonChevron mx_RoomSublist_showNButtonChevron'>
+                            {/* set by CSS masking */}
+                        </span>
+                        {showMoreText}
+                    </RovingAccessibleButton>
+                );
+            } else if (this.numTiles > this.layout.defaultVisibleTiles) {
+                // we have all tiles visible - add a button to show less
+                let showLessText = (
+                    <span className='mx_RoomSublist_showNButtonText'>
+                        {_t("Show less")}
+                    </span>
+                );
+                if (this.props.isMinimized) showLessText = null;
+                showNButton = (
+                    <RovingAccessibleButton onClick={this.onShowLessClick} className={showMoreBtnClasses}>
+                        <span className='mx_RoomSublist_showLessButtonChevron mx_RoomSublist_showNButtonChevron'>
+                            {/* set by CSS masking */}
+                        </span>
+                        {showLessText}
+                    </RovingAccessibleButton>
+                );
+            }
+
+            // Figure out if we need a handle
+            const handles: Enable = {
+                bottom: true, // the only one we need, but the others must be explicitly false
+                bottomLeft: false,
+                bottomRight: false,
+                left: false,
+                right: false,
+                top: false,
+                topLeft: false,
+                topRight: false,
+            };
+            if (layout.visibleTiles >= this.numTiles && this.numTiles <= layout.minVisibleTiles) {
+                // we're at a minimum, don't have a bottom handle
+                handles.bottom = false;
+            }
+
+            // We have to account for padding so we can accommodate a 'show more' button and
+            // the resize handle, which are pinned to the bottom of the container. This is the
+            // easiest way to have a resize handle below the button as otherwise we're writing
+            // our own resize handling and that doesn't sound fun.
+            //
+            // The layout class has some helpers for dealing with padding, as we don't want to
+            // apply it in all cases. If we apply it in all cases, the resizing feels like it
+            // goes backwards and can become wildly incorrect (visibleTiles says 18 when there's
+            // only mathematically 7 possible).
+
+            const handleWrapperClasses = classNames({
+                'mx_RoomSublist_resizerHandles': true,
+                'mx_RoomSublist_resizerHandles_showNButton': !!showNButton,
+            });
+
+            content = (
+                <React.Fragment>
+                    <Resizable
+                        size={{height: this.state.height} as any}
+                        minHeight={minTilesPx}
+                        maxHeight={maxTilesPx}
+                        onResizeStart={this.onResizeStart}
+                        onResizeStop={this.onResizeStop}
+                        onResize={this.onResize}
+                        handleWrapperClass={handleWrapperClasses}
+                        handleClasses={{bottom: "mx_RoomSublist_resizerHandle"}}
+                        className="mx_RoomSublist_resizeBox"
+                        enable={handles}
+                    >
+                        <div className="mx_RoomSublist_tiles" onScroll={this.onScrollPrevent}>
+                            {visibleTiles}
+                        </div>
+                        {showNButton}
+                    </Resizable>
+                </React.Fragment>
+            );
+        }
+
+        return (
+            <div
+                ref={this.sublistRef}
+                className={classes}
+                role="group"
+                aria-label={this.props.label}
+                onKeyDown={this.onKeyDown}
+            >
+                {this.renderHeader()}
+                {content}
+            </div>
+        );
+    }
+}

src/components/views/rooms/RoomSublist2.tsx

@@ -1,282 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 Vector Creations Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-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 * as React from "react";
-import { createRef } from "react";
-import { Room } from "matrix-js-sdk/src/models/room";
-import classNames from 'classnames';
-import * as RoomNotifs from '../../../RoomNotifs';
-import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
-import { _t } from "../../../languageHandler";
-import AccessibleButton from "../../views/elements/AccessibleButton";
-import AccessibleTooltipButton from "../../views/elements/AccessibleTooltipButton";
-import * as FormattingUtils from '../../../utils/FormattingUtils';
-import RoomTile2 from "./RoomTile2";
-import { ResizableBox, ResizeCallbackData } from "react-resizable";
-import { ListLayout } from "../../../stores/room-list/ListLayout";
-
-/*******************************************************************
- *   CAUTION                                                       *
- *******************************************************************
- * This is a work in progress implementation and isn't complete or *
- * even useful as a component. Please avoid using it until this    *
- * warning disappears.                                             *
- *******************************************************************/
-
-interface IProps {
-    forRooms: boolean;
-    rooms?: Room[];
-    startAsHidden: boolean;
-    label: string;
-    onAddRoom?: () => void;
-    addRoomLabel: string;
-    isInvite: boolean;
-    layout: ListLayout;
-
-    // TODO: Collapsed state
-    // TODO: Group invites
-    // TODO: Calls
-    // TODO: forceExpand?
-    // TODO: Header clicking
-    // TODO: Spinner support for historical
-}
-
-interface IState {
-}
-
-export default class RoomSublist2 extends React.Component<IProps, IState> {
-    private headerButton = createRef();
-
-    private hasTiles(): boolean {
-        return this.numTiles > 0;
-    }
-
-    private get numTiles(): number {
-        // TODO: Account for group invites
-        return (this.props.rooms || []).length;
-    }
-
-    private onAddRoom = (e) => {
-        e.stopPropagation();
-        if (this.props.onAddRoom) this.props.onAddRoom();
-    };
-
-    private onResize = (e: React.MouseEvent, data: ResizeCallbackData) => {
-        const direction = e.movementY < 0 ? -1 : +1;
-        const tileDiff = this.props.layout.pixelsToTiles(Math.abs(e.movementY)) * direction;
-        this.props.layout.visibleTiles += tileDiff;
-        this.forceUpdate(); // because the layout doesn't trigger a re-render
-    };
-
-    private onShowAllClick = () => {
-        this.props.layout.visibleTiles = this.numTiles;
-        this.forceUpdate(); // because the layout doesn't trigger a re-render
-    };
-
-    private renderTiles(): React.ReactElement[] {
-        const tiles: React.ReactElement[] = [];
-
-        if (this.props.rooms) {
-            for (const room of this.props.rooms) {
-                tiles.push(<RoomTile2 room={room} key={`room-${room.roomId}`}/>);
-            }
-        }
-
-        return tiles;
-    }
-
-    private renderHeader(): React.ReactElement {
-        const notifications = !this.props.isInvite
-            ? RoomNotifs.aggregateNotificationCount(this.props.rooms)
-            : {count: 0, highlight: true};
-        const notifCount = notifications.count;
-        const notifHighlight = notifications.highlight;
-
-        // TODO: Title on collapsed
-        // TODO: Incoming call box
-
-        let chevron = null;
-        if (this.hasTiles()) {
-            const chevronClasses = classNames({
-                'mx_RoomSubList_chevron': true,
-                'mx_RoomSubList_chevronRight': false, // isCollapsed
-                'mx_RoomSubList_chevronDown': true, // !isCollapsed
-            });
-            chevron = (<div className={chevronClasses}/>);
-        }
-
-        return (
-            <RovingTabIndexWrapper inputRef={this.headerButton}>
-                {({onFocus, isActive, ref}) => {
-                    // TODO: Use onFocus
-                    const tabIndex = isActive ? 0 : -1;
-
-                    // TODO: Collapsed state
-                    let badge;
-                    if (true) { // !isCollapsed
-                        const badgeClasses = classNames({
-                            'mx_RoomSubList_badge': true,
-                            'mx_RoomSubList_badgeHighlight': notifHighlight,
-                        });
-                        // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
-                        if (notifCount > 0) {
-                            badge = (
-                                <AccessibleButton
-                                    tabIndex={tabIndex}
-                                    className={badgeClasses}
-                                    aria-label={_t("Jump to first unread room.")}
-                                >
-                                    <div>
-                                        {FormattingUtils.formatCount(notifCount)}
-                                    </div>
-                                </AccessibleButton>
-                            );
-                        } else if (this.props.isInvite && this.hasTiles()) {
-                            // Render the `!` badge for invites
-                            badge = (
-                                <AccessibleButton
-                                    tabIndex={tabIndex}
-                                    className={badgeClasses}
-                                    aria-label={_t("Jump to first invite.")}
-                                >
-                                    <div>
-                                        {FormattingUtils.formatCount(this.numTiles)}
-                                    </div>
-                                </AccessibleButton>
-                            );
-                        }
-                    }
-
-                    let addRoomButton = null;
-                    if (!!this.props.onAddRoom) {
-                        addRoomButton = (
-                            <AccessibleTooltipButton
-                                tabIndex={tabIndex}
-                                onClick={this.onAddRoom}
-                                className="mx_RoomSubList_addRoom"
-                                title={this.props.addRoomLabel || _t("Add room")}
-                            />
-                        );
-                    }
-
-                    // TODO: a11y (see old component)
-                    return (
-                        <div className={"mx_RoomSubList_labelContainer"}>
-                            <AccessibleButton
-                                inputRef={ref}
-                                tabIndex={tabIndex}
-                                className={"mx_RoomSubList_label"}
-                                role="treeitem"
-                                aria-level="1"
-                            >
-                                {chevron}
-                                <span>{this.props.label}</span>
-                            </AccessibleButton>
-                            {badge}
-                            {addRoomButton}
-                        </div>
-                    );
-                }}
-            </RovingTabIndexWrapper>
-        );
-    }
-
-    public render(): React.ReactElement {
-        // TODO: Proper rendering
-        // TODO: Error boundary
-
-        const tiles = this.renderTiles();
-
-        const classes = classNames({
-            // TODO: Proper collapse support
-            'mx_RoomSubList': true,
-            'mx_RoomSubList_hidden': false, // len && isCollapsed
-            'mx_RoomSubList_nonEmpty': this.hasTiles(), // len && !isCollapsed
-        });
-
-        let content = null;
-        if (tiles.length > 0) {
-            // TODO: Lazy list rendering
-            // TODO: Whatever scrolling magic needs to happen here
-            const layout = this.props.layout; // to shorten calls
-            const minTilesPx = layout.tilesToPixels(Math.min(tiles.length, layout.minVisibleTiles));
-            const maxTilesPx = layout.tilesToPixels(tiles.length);
-            const tilesPx = layout.tilesToPixels(Math.min(tiles.length, layout.visibleTiles));
-            let handles = ['s'];
-            if (layout.visibleTiles >= tiles.length && tiles.length <= layout.minVisibleTiles) {
-                handles = []; // no handles, we're at a minimum
-            }
-
-            // TODO: This might need adjustment, however for now it is fine as a round.
-            const nVisible = Math.round(layout.visibleTiles);
-            const visibleTiles = tiles.slice(0, nVisible);
-
-            // If we're hiding rooms, show a 'show more' button to the user. This button
-            // replaces the last visible tile, so will always show 2+ rooms. We do this
-            // because if it said "show 1 more room" we had might as well show that room
-            // instead. We also replace the last item so we don't have to adjust our math
-            // on pixel heights, etc. It's much easier to pretend the button is a tile.
-            if (tiles.length > nVisible) {
-                // we have a cutoff condition - add the button to show all
-
-                // we +1 to account for the room we're about to hide with our 'show more' button
-                // this results in the button always being 1+, and not needing an i18n `count`.
-                const numMissing = (tiles.length - visibleTiles.length) + 1;
-
-                // TODO: CSS TBD
-                // TODO: Make this an actual tile
-                // TODO: This is likely to pop out of the list, consider that.
-                visibleTiles.splice(visibleTiles.length - 1, 1, (
-                    <div
-                        onClick={this.onShowAllClick}
-                        style={{height: '34px', lineHeight: '34px', cursor: 'pointer'}}
-                        key='showall'
-                    >
-                        {_t("Show %(n)s more", {n: numMissing})}
-                    </div>
-                ));
-            }
-            content = (
-                <ResizableBox
-                    width={-1}
-                    height={tilesPx}
-                    axis="y"
-                    minConstraints={[-1, minTilesPx]}
-                    maxConstraints={[-1, maxTilesPx]}
-                    resizeHandles={handles}
-                    onResize={this.onResize}
-                    className="mx_RoomSublist2_resizeBox"
-                >
-                    {visibleTiles}
-                </ResizableBox>
-            )
-        }
-
-        // TODO: onKeyDown support
-        return (
-            <div
-                className={classes}
-                role="group"
-                aria-label={this.props.label}
-            >
-                {this.renderHeader()}
-                {content}
-            </div>
-        );
-    }
-}

src/components/views/rooms/RoomTile.js

@@ -1,565 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
-Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import classNames from 'classnames';
-import dis from '../../../dispatcher/dispatcher';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import DMRoomMap from '../../../utils/DMRoomMap';
-import * as sdk from '../../../index';
-import {ContextMenu, ContextMenuButton, toRightOf} from '../../structures/ContextMenu';
-import * as RoomNotifs from '../../../RoomNotifs';
-import * as FormattingUtils from '../../../utils/FormattingUtils';
-import ActiveRoomObserver from '../../../ActiveRoomObserver';
-import RoomViewStore from '../../../stores/RoomViewStore';
-import SettingsStore from "../../../settings/SettingsStore";
-import {_t} from "../../../languageHandler";
-import {RovingTabIndexWrapper} from "../../../accessibility/RovingTabIndex";
-import E2EIcon from './E2EIcon';
-import InviteOnlyIcon from './InviteOnlyIcon';
-// eslint-disable-next-line camelcase
-import rate_limited_func from '../../../ratelimitedfunc';
-import { shieldStatusForRoom } from '../../../utils/ShieldUtils';
-
-export default createReactClass({
-    displayName: 'RoomTile',
-
-    propTypes: {
-        onClick: PropTypes.func,
-
-        room: PropTypes.object.isRequired,
-        collapsed: PropTypes.bool.isRequired,
-        unread: PropTypes.bool.isRequired,
-        highlight: PropTypes.bool.isRequired,
-        // If true, apply mx_RoomTile_transparent class
-        transparent: PropTypes.bool,
-        isInvite: PropTypes.bool.isRequired,
-        incomingCall: PropTypes.object,
-    },
-
-    getDefaultProps: function() {
-        return {
-            isDragging: false,
-        };
-    },
-
-    getInitialState: function() {
-        const joinRules = this.props.room.currentState.getStateEvents("m.room.join_rules", "");
-        const joinRule = joinRules && joinRules.getContent().join_rule;
-
-        return ({
-            joinRule,
-            hover: false,
-            badgeHover: false,
-            contextMenuPosition: null, // DOM bounding box, null if non-shown
-            roomName: this.props.room.name,
-            notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
-            notificationCount: this.props.room.getUnreadNotificationCount(),
-            selected: this.props.room.roomId === RoomViewStore.getRoomId(),
-            statusMessage: this._getStatusMessage(),
-            e2eStatus: null,
-        });
-    },
-
-    _shouldShowStatusMessage() {
-        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
-            return false;
-        }
-        const isInvite = this.props.room.getMyMembership() === "invite";
-        const isJoined = this.props.room.getMyMembership() === "join";
-        const looksLikeDm = this.props.room.getInvitedAndJoinedMemberCount() === 2;
-        return !isInvite && isJoined && looksLikeDm;
-    },
-
-    _getStatusMessageUser() {
-        if (!MatrixClientPeg.get()) return null; // We've probably been logged out
-
-        const selfId = MatrixClientPeg.get().getUserId();
-        const otherMember = this.props.room.currentState.getMembersExcept([selfId])[0];
-        if (!otherMember) {
-            return null;
-        }
-        return otherMember.user;
-    },
-
-    _getStatusMessage() {
-        const statusUser = this._getStatusMessageUser();
-        if (!statusUser) {
-            return "";
-        }
-        return statusUser._unstable_statusMessage;
-    },
-
-    onRoomStateMember: function(ev, state, member) {
-        // we only care about leaving users
-        // because trust state will change if someone joins a megolm session anyway
-        if (member.membership !== "leave") {
-            return;
-        }
-        // ignore members in other rooms
-        if (member.roomId !== this.props.room.roomId) {
-            return;
-        }
-
-        this._updateE2eStatus();
-    },
-
-    onUserVerificationChanged: function(userId, _trustStatus) {
-        if (!this.props.room.getMember(userId)) {
-            // Not in this room
-            return;
-        }
-        this._updateE2eStatus();
-    },
-
-    onCrossSigningKeysChanged: function() {
-        this._updateE2eStatus();
-    },
-
-    onRoomTimeline: function(ev, room) {
-        if (!room) return;
-        if (room.roomId != this.props.room.roomId) return;
-        if (ev.getType() !== "m.room.encryption") return;
-        MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
-        this.onFindingRoomToBeEncrypted();
-    },
-
-    onFindingRoomToBeEncrypted: function() {
-        const cli = MatrixClientPeg.get();
-        cli.on("RoomState.members", this.onRoomStateMember);
-        cli.on("userTrustStatusChanged", this.onUserVerificationChanged);
-        cli.on("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
-        this._updateE2eStatus();
-    },
-
-    _updateE2eStatus: async function() {
-        const cli = MatrixClientPeg.get();
-        if (!cli.isRoomEncrypted(this.props.room.roomId)) {
-            return;
-        }
-
-        /* At this point, the user has encryption on and cross-signing on */
-        this.setState({
-            e2eStatus: await shieldStatusForRoom(cli, this.props.room),
-        });
-    },
-
-    onRoomName: function(room) {
-        if (room !== this.props.room) return;
-        this.setState({
-            roomName: this.props.room.name,
-        });
-    },
-
-    onJoinRule: function(ev) {
-        if (ev.getType() !== "m.room.join_rules") return;
-        if (ev.getRoomId() !== this.props.room.roomId) return;
-        this.setState({ joinRule: ev.getContent().join_rule });
-    },
-
-    onAccountData: function(accountDataEvent) {
-        if (accountDataEvent.getType() === 'm.push_rules') {
-            this.setState({
-                notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
-            });
-        }
-    },
-
-    onAction: function(payload) {
-        switch (payload.action) {
-            // XXX: slight hack in order to zero the notification count when a room
-            // is read. Ideally this state would be given to this via props (as we
-            // do with `unread`). This is still better than forceUpdating the entire
-            // RoomList when a room is read.
-            case 'on_room_read':
-                if (payload.roomId !== this.props.room.roomId) break;
-                this.setState({
-                    notificationCount: this.props.room.getUnreadNotificationCount(),
-                });
-                break;
-            // RoomTiles are one of the few components that may show custom status and
-            // also remain on screen while in Settings toggling the feature.  This ensures
-            // you can clearly see the status hide and show when toggling the feature.
-            case 'feature_custom_status_changed':
-                this.forceUpdate();
-                break;
-
-            case 'view_room':
-                // when the room is selected make sure its tile is visible, for breadcrumbs/keyboard shortcut access
-                if (payload.room_id === this.props.room.roomId && payload.show_room_tile) {
-                    this._scrollIntoView();
-                }
-                break;
-        }
-    },
-
-    _scrollIntoView: function() {
-        if (!this._roomTile.current) return;
-        this._roomTile.current.scrollIntoView({
-            block: "nearest",
-            behavior: "auto",
-        });
-    },
-
-    _onActiveRoomChange: function() {
-        this.setState({
-            selected: this.props.room.roomId === RoomViewStore.getRoomId(),
-        });
-    },
-
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
-        this._roomTile = createRef();
-    },
-
-    componentDidMount: function() {
-        /* We bind here rather than in the definition because otherwise we wind up with the
-           method only being callable once every 500ms across all instances, which would be wrong */
-        this._updateE2eStatus = rate_limited_func(this._updateE2eStatus, 500);
-
-        const cli = MatrixClientPeg.get();
-        cli.on("accountData", this.onAccountData);
-        cli.on("Room.name", this.onRoomName);
-        cli.on("RoomState.events", this.onJoinRule);
-        if (cli.isRoomEncrypted(this.props.room.roomId)) {
-            this.onFindingRoomToBeEncrypted();
-        } else {
-            cli.on("Room.timeline", this.onRoomTimeline);
-        }
-        ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange);
-        this.dispatcherRef = dis.register(this.onAction);
-
-        if (this._shouldShowStatusMessage()) {
-            const statusUser = this._getStatusMessageUser();
-            if (statusUser) {
-                statusUser.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
-            }
-        }
-
-        // when we're first rendered (or our sublist is expanded) make sure we are visible if we're active
-        if (this.state.selected) {
-            this._scrollIntoView();
-        }
-    },
-
-    componentWillUnmount: function() {
-        const cli = MatrixClientPeg.get();
-        if (cli) {
-            MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
-            MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
-            cli.removeListener("RoomState.events", this.onJoinRule);
-            cli.removeListener("RoomState.members", this.onRoomStateMember);
-            cli.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
-            cli.removeListener("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
-            cli.removeListener("Room.timeline", this.onRoomTimeline);
-        }
-        ActiveRoomObserver.removeListener(this.props.room.roomId, this._onActiveRoomChange);
-        dis.unregister(this.dispatcherRef);
-
-        if (this._shouldShowStatusMessage()) {
-            const statusUser = this._getStatusMessageUser();
-            if (statusUser) {
-                statusUser.removeListener(
-                    "User._unstable_statusMessage",
-                    this._onStatusMessageCommitted,
-                );
-            }
-        }
-    },
-
-    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps: function(props) {
-        // XXX: This could be a lot better - this makes the assumption that
-        // the notification count may have changed when the properties of
-        // the room tile change.
-        this.setState({
-            notificationCount: this.props.room.getUnreadNotificationCount(),
-        });
-    },
-
-    // Do a simple shallow comparison of props and state to avoid unnecessary
-    // renders. The assumption made here is that only state and props are used
-    // in rendering this component and children.
-    //
-    // RoomList is frequently made to forceUpdate, so this decreases number of
-    // RoomTile renderings.
-    shouldComponentUpdate: function(newProps, newState) {
-        if (Object.keys(newProps).some((k) => newProps[k] !== this.props[k])) {
-            return true;
-        }
-        if (Object.keys(newState).some((k) => newState[k] !== this.state[k])) {
-            return true;
-        }
-        return false;
-    },
-
-    _onStatusMessageCommitted() {
-        // The status message `User` object has observed a message change.
-        this.setState({
-            statusMessage: this._getStatusMessage(),
-        });
-    },
-
-    onClick: function(ev) {
-        if (this.props.onClick) {
-            this.props.onClick(this.props.room.roomId, ev);
-        }
-    },
-
-    onMouseEnter: function() {
-        this.setState( { hover: true });
-        this.badgeOnMouseEnter();
-    },
-
-    onMouseLeave: function() {
-        this.setState( { hover: false });
-        this.badgeOnMouseLeave();
-    },
-
-    badgeOnMouseEnter: function() {
-        // Only allow non-guests to access the context menu
-        // and only change it if it needs to change
-        if (!MatrixClientPeg.get().isGuest() && !this.state.badgeHover) {
-            this.setState( { badgeHover: true } );
-        }
-    },
-
-    badgeOnMouseLeave: function() {
-        this.setState( { badgeHover: false } );
-    },
-
-    _showContextMenu: function(boundingClientRect) {
-        // Only allow non-guests to access the context menu
-        if (MatrixClientPeg.get().isGuest()) return;
-
-        const state = {
-            contextMenuPosition: boundingClientRect,
-        };
-
-        // If the badge is clicked, then no longer show tooltip
-        if (this.props.collapsed) {
-            state.hover = false;
-        }
-
-        this.setState(state);
-    },
-
-    onContextMenuButtonClick: function(e) {
-        // Prevent the RoomTile onClick event firing as well
-        e.stopPropagation();
-        e.preventDefault();
-
-        this._showContextMenu(e.target.getBoundingClientRect());
-    },
-
-    onContextMenu: function(e) {
-        // Prevent the native context menu
-        e.preventDefault();
-
-        this._showContextMenu({
-            right: e.clientX,
-            top: e.clientY,
-            height: 0,
-        });
-    },
-
-    closeMenu: function() {
-        this.setState({
-            contextMenuPosition: null,
-        });
-        this.props.refreshSubList();
-    },
-
-    render: function() {
-        const isInvite = this.props.room.getMyMembership() === "invite";
-        const notificationCount = this.props.notificationCount;
-        // var highlightCount = this.props.room.getUnreadNotificationCount("highlight");
-
-        const notifBadges = notificationCount > 0 && RoomNotifs.shouldShowNotifBadge(this.state.notifState);
-        const mentionBadges = this.props.highlight && RoomNotifs.shouldShowMentionBadge(this.state.notifState);
-        const badges = notifBadges || mentionBadges;
-
-        let subtext = null;
-        if (this._shouldShowStatusMessage()) {
-            subtext = this.state.statusMessage;
-        }
-
-        const isMenuDisplayed = Boolean(this.state.contextMenuPosition);
-
-        const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId);
-
-        const classes = classNames({
-            'mx_RoomTile': true,
-            'mx_RoomTile_selected': this.state.selected,
-            'mx_RoomTile_unread': this.props.unread,
-            'mx_RoomTile_unreadNotify': notifBadges,
-            'mx_RoomTile_highlight': mentionBadges,
-            'mx_RoomTile_invited': isInvite,
-            'mx_RoomTile_menuDisplayed': isMenuDisplayed,
-            'mx_RoomTile_noBadges': !badges,
-            'mx_RoomTile_transparent': this.props.transparent,
-            'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
-        });
-
-        const avatarClasses = classNames({
-            'mx_RoomTile_avatar': true,
-        });
-
-        const badgeClasses = classNames({
-            'mx_RoomTile_badge': true,
-            'mx_RoomTile_badgeButton': this.state.badgeHover || isMenuDisplayed,
-        });
-
-        let name = this.state.roomName;
-        if (typeof name !== 'string') name = '';
-        name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
-
-        let badge;
-        if (badges) {
-            const limitedCount = FormattingUtils.formatCount(notificationCount);
-            const badgeContent = notificationCount ? limitedCount : '!';
-            badge = <div className={badgeClasses}>{ badgeContent }</div>;
-        }
-
-        let label;
-        let subtextLabel;
-        let tooltip;
-        if (!this.props.collapsed) {
-            const nameClasses = classNames({
-                'mx_RoomTile_name': true,
-                'mx_RoomTile_invite': this.props.isInvite,
-                'mx_RoomTile_badgeShown': badges || this.state.badgeHover || isMenuDisplayed,
-            });
-
-            subtextLabel = subtext ? <span className="mx_RoomTile_subtext">{ subtext }</span> : null;
-            // XXX: this is a workaround for Firefox giving this div a tabstop :( [tabIndex]
-            label = <div title={name} className={nameClasses} tabIndex={-1} dir="auto">{ name }</div>;
-        } else if (this.state.hover) {
-            const Tooltip = sdk.getComponent("elements.Tooltip");
-            tooltip = <Tooltip className="mx_RoomTile_tooltip" label={this.props.room.name} dir="auto" />;
-        }
-
-        //var incomingCallBox;
-        //if (this.props.incomingCall) {
-        //    var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
-        //    incomingCallBox = <IncomingCallBox incomingCall={ this.props.incomingCall }/>;
-        //}
-
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
-        let contextMenuButton;
-        if (!MatrixClientPeg.get().isGuest()) {
-            contextMenuButton = (
-                <ContextMenuButton
-                    className="mx_RoomTile_menuButton"
-                    label={_t("Options")}
-                    isExpanded={isMenuDisplayed}
-                    onClick={this.onContextMenuButtonClick} />
-            );
-        }
-
-        const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
-
-        let ariaLabel = name;
-
-        let dmOnline;
-        const { room } = this.props;
-        const member = room.getMember(dmUserId);
-        if (member && member.membership === "join" && room.getJoinedMemberCount() === 2) {
-            const UserOnlineDot = sdk.getComponent('rooms.UserOnlineDot');
-            dmOnline = <UserOnlineDot userId={dmUserId} />;
-        }
-
-        // The following labels are written in such a fashion to increase screen reader efficiency (speed).
-        if (notifBadges && mentionBadges && !isInvite) {
-            ariaLabel += " " + _t("%(count)s unread messages including mentions.", {
-                count: notificationCount,
-            });
-        } else if (notifBadges) {
-            ariaLabel += " " + _t("%(count)s unread messages.", { count: notificationCount });
-        } else if (mentionBadges && !isInvite) {
-            ariaLabel += " " + _t("Unread mentions.");
-        } else if (this.props.unread) {
-            ariaLabel += " " + _t("Unread messages.");
-        }
-
-        let contextMenu;
-        if (isMenuDisplayed) {
-            const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu');
-            contextMenu = (
-                <ContextMenu {...toRightOf(this.state.contextMenuPosition)} onFinished={this.closeMenu}>
-                    <RoomTileContextMenu room={this.props.room} onFinished={this.closeMenu} />
-                </ContextMenu>
-            );
-        }
-
-        let privateIcon = null;
-        if (this.state.joinRule === "invite" && !dmUserId) {
-            privateIcon = <InviteOnlyIcon collapsedPanel={this.props.collapsed} />;
-        }
-
-        let e2eIcon = null;
-        if (this.state.e2eStatus) {
-            e2eIcon = <E2EIcon status={this.state.e2eStatus} className="mx_RoomTile_e2eIcon" />;
-        }
-
-        return <React.Fragment>
-            <RovingTabIndexWrapper inputRef={this._roomTile}>
-                {({onFocus, isActive, ref}) =>
-                    <AccessibleButton
-                        onFocus={onFocus}
-                        tabIndex={isActive ? 0 : -1}
-                        inputRef={ref}
-                        className={classes}
-                        onClick={this.onClick}
-                        onMouseEnter={this.onMouseEnter}
-                        onMouseLeave={this.onMouseLeave}
-                        onContextMenu={this.onContextMenu}
-                        aria-label={ariaLabel}
-                        aria-selected={this.state.selected}
-                        role="treeitem"
-                    >
-                        <div className={avatarClasses}>
-                            <div className="mx_RoomTile_avatar_container">
-                                <RoomAvatar room={this.props.room} width={24} height={24} />
-                                { e2eIcon }
-                            </div>
-                        </div>
-                        { privateIcon }
-                        <div className="mx_RoomTile_nameContainer">
-                            <div className="mx_RoomTile_labelContainer">
-                                { label }
-                                { subtextLabel }
-                            </div>
-                            { dmOnline }
-                            { contextMenuButton }
-                            { badge }
-                        </div>
-                        { /* { incomingCallBox } */ }
-                        { tooltip }
-                    </AccessibleButton>
-                }
-            </RovingTabIndexWrapper>
-
-            { contextMenu }
-        </React.Fragment>;
-    },
-});

src/components/views/rooms/RoomTile.tsx

@@ -0,0 +1,587 @@
+/*
+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.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { createRef } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import classNames from "classnames";
+import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
+import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
+import dis from '../../../dispatcher/dispatcher';
+import defaultDispatcher from '../../../dispatcher/dispatcher';
+import { Key } from "../../../Keyboard";
+import ActiveRoomObserver from "../../../ActiveRoomObserver";
+import { _t } from "../../../languageHandler";
+import {
+    ChevronFace,
+    ContextMenu,
+    ContextMenuTooltipButton,
+    MenuItem,
+    MenuItemCheckbox,
+    MenuItemRadio,
+} from "../../structures/ContextMenu";
+import { DefaultTagID, TagID } from "../../../stores/room-list/models";
+import { MessagePreviewStore, ROOM_PREVIEW_CHANGED } from "../../../stores/room-list/MessagePreviewStore";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import { ALL_MESSAGES, ALL_MESSAGES_LOUD, MENTIONS_ONLY, MUTE, } from "../../../RoomNotifs";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import NotificationBadge from "./NotificationBadge";
+import { Volume } from "../../../RoomNotifsTypes";
+import RoomListStore from "../../../stores/room-list/RoomListStore";
+import RoomListActions from "../../../actions/RoomListActions";
+import { ActionPayload } from "../../../dispatcher/payloads";
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
+import { NOTIFICATION_STATE_UPDATE, NotificationState } from "../../../stores/notifications/NotificationState";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { EchoChamber } from "../../../stores/local-echo/EchoChamber";
+import { CachedRoomKey, RoomEchoChamber } from "../../../stores/local-echo/RoomEchoChamber";
+import { PROPERTY_UPDATED } from "../../../stores/local-echo/GenericEchoChamber";
+
+interface IProps {
+    room: Room;
+    showMessagePreview: boolean;
+    isMinimized: boolean;
+    tag: TagID;
+}
+
+type PartialDOMRect = Pick<DOMRect, "left" | "bottom">;
+
+interface IState {
+    selected: boolean;
+    notificationsMenuPosition: PartialDOMRect;
+    generalMenuPosition: PartialDOMRect;
+    messagePreview?: string;
+}
+
+const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`;
+
+const contextMenuBelow = (elementRect: PartialDOMRect) => {
+    // align the context menu's icons with the icon which opened the context menu
+    const left = elementRect.left + window.pageXOffset - 9;
+    const top = elementRect.bottom + window.pageYOffset + 17;
+    const chevronFace = ChevronFace.None;
+    return {left, top, chevronFace};
+};
+
+interface INotifOptionProps {
+    active: boolean;
+    iconClassName: string;
+    label: string;
+    onClick(ev: ButtonEvent);
+}
+
+const NotifOption: React.FC<INotifOptionProps> = ({active, onClick, iconClassName, label}) => {
+    const classes = classNames({
+        mx_RoomTile_contextMenu_activeRow: active,
+    });
+
+    let activeIcon;
+    if (active) {
+        activeIcon = <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconCheck" />;
+    }
+
+    return (
+        <MenuItemRadio className={classes} onClick={onClick} active={active} label={label}>
+            <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
+            <span className="mx_IconizedContextMenu_label">{ label }</span>
+            { activeIcon }
+        </MenuItemRadio>
+    );
+};
+
+export default class RoomTile extends React.PureComponent<IProps, IState> {
+    private dispatcherRef: string;
+    private roomTileRef = createRef<HTMLDivElement>();
+    private notificationState: NotificationState;
+    private roomProps: RoomEchoChamber;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
+            notificationsMenuPosition: null,
+            generalMenuPosition: null,
+
+            // 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(ROOM_PREVIEW_CHANGED, 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);
+    }
+
+    private onNotificationUpdate = () => {
+        this.forceUpdate(); // notification state changed - update
+    };
+
+    private onRoomPropertyUpdate = (property: CachedRoomKey) => {
+        if (property === CachedRoomKey.NotificationVolume) this.onNotificationUpdate();
+        // else ignore - not important for this tile
+    };
+
+    private get showContextMenu(): boolean {
+        return !this.props.isMinimized && this.props.tag !== DefaultTagID.Invite;
+    }
+
+    private get showMessagePreview(): boolean {
+        return !this.props.isMinimized && this.props.showMessagePreview;
+    }
+
+    public componentDidMount() {
+        // when we're first rendered (or our sublist is expanded) make sure we are visible if we're active
+        if (this.state.selected) {
+            this.scrollIntoView();
+        }
+    }
+
+    public componentWillUnmount() {
+        if (this.props.room) {
+            ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
+        }
+        defaultDispatcher.unregister(this.dispatcherRef);
+        MessagePreviewStore.instance.off(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged);
+        this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+    }
+
+    private onAction = (payload: ActionPayload) => {
+        if (payload.action === "view_room" && payload.room_id === this.props.room.roomId && payload.show_room_tile) {
+            setImmediate(() => {
+                this.scrollIntoView();
+            });
+        }
+    };
+
+    private onRoomPreviewChanged = (room: Room) => {
+        if (this.props.room && room.roomId === this.props.room.roomId) {
+            // generatePreview() will return nothing if the user has previews disabled
+            this.setState({messagePreview: this.generatePreview()});
+        }
+    };
+
+    private generatePreview(): string | null {
+        if (!this.showMessagePreview) {
+            return null;
+        }
+
+        return MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag);
+    }
+
+    private scrollIntoView = () => {
+        if (!this.roomTileRef.current) return;
+        this.roomTileRef.current.scrollIntoView({
+            block: "nearest",
+            behavior: "auto",
+        });
+    };
+
+    private onTileClick = (ev: React.KeyboardEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        dis.dispatch({
+            action: 'view_room',
+            show_room_tile: true, // make sure the room is visible in the list
+            room_id: this.props.room.roomId,
+            clear_search: (ev && (ev.key === Key.ENTER || ev.key === Key.SPACE)),
+        });
+    };
+
+    private onActiveRoomUpdate = (isActive: boolean) => {
+        this.setState({selected: isActive});
+    };
+
+    private onNotificationsMenuOpenClick = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const target = ev.target as HTMLButtonElement;
+        this.setState({notificationsMenuPosition: target.getBoundingClientRect()});
+    };
+
+    private onCloseNotificationsMenu = () => {
+        this.setState({notificationsMenuPosition: null});
+    };
+
+    private onGeneralMenuOpenClick = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const target = ev.target as HTMLButtonElement;
+        this.setState({generalMenuPosition: target.getBoundingClientRect()});
+    };
+
+    private onContextMenu = (ev: React.MouseEvent) => {
+        // If we don't have a context menu to show, ignore the action.
+        if (!this.showContextMenu) return;
+
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({
+            generalMenuPosition: {
+                left: ev.clientX,
+                bottom: ev.clientY,
+            },
+        });
+    };
+
+    private onCloseGeneralMenu = () => {
+        this.setState({generalMenuPosition: null});
+    };
+
+    private onTagRoom = (ev: ButtonEvent, tagId: TagID) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        if (tagId === DefaultTagID.Favourite || tagId === DefaultTagID.LowPriority) {
+            const inverseTag = tagId === DefaultTagID.Favourite ? DefaultTagID.LowPriority : DefaultTagID.Favourite;
+            const isApplied = RoomListStore.instance.getTagsForRoom(this.props.room).includes(tagId);
+            const removeTag = isApplied ? tagId : inverseTag;
+            const addTag = isApplied ? null : tagId;
+            dis.dispatch(RoomListActions.tagRoom(
+                MatrixClientPeg.get(),
+                this.props.room,
+                removeTag,
+                addTag,
+                undefined,
+                0
+            ));
+        } else {
+            console.warn(`Unexpected tag ${tagId} applied to ${this.props.room.room_id}`);
+        }
+
+        if ((ev as React.KeyboardEvent).key === Key.ENTER) {
+            // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
+            this.setState({generalMenuPosition: null}); // hide the menu
+        }
+    };
+
+    private onLeaveRoomClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.room.roomId,
+        });
+        this.setState({generalMenuPosition: null}); // hide the menu
+    };
+
+    private onForgetRoomClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        dis.dispatch({
+            action: 'forget_room',
+            room_id: this.props.room.roomId,
+        });
+        this.setState({generalMenuPosition: null}); // hide the menu
+    };
+
+    private onOpenRoomSettings = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        dis.dispatch({
+            action: 'open_room_settings',
+            room_id: this.props.room.roomId,
+        });
+        this.setState({generalMenuPosition: null}); // hide the menu
+    };
+
+    private async saveNotifState(ev: ButtonEvent, newState: Volume) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        this.roomProps.notificationVolume = newState;
+
+        const key = (ev as React.KeyboardEvent).key;
+        if (key === Key.ENTER) {
+            // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
+            this.setState({notificationsMenuPosition: null}); // hide the menu
+        }
+    }
+
+    private onClickAllNotifs = ev => this.saveNotifState(ev, ALL_MESSAGES);
+    private onClickAlertMe = ev => this.saveNotifState(ev, ALL_MESSAGES_LOUD);
+    private onClickMentions = ev => this.saveNotifState(ev, MENTIONS_ONLY);
+    private onClickMute = ev => this.saveNotifState(ev, MUTE);
+
+    private renderNotificationsMenu(isActive: boolean): React.ReactElement {
+        if (MatrixClientPeg.get().isGuest() || this.props.tag === DefaultTagID.Archived || !this.showContextMenu) {
+            // the menu makes no sense in these cases so do not show one
+            return null;
+        }
+
+        const state = this.roomProps.notificationVolume;
+
+        let contextMenu = null;
+        if (this.state.notificationsMenuPosition) {
+            contextMenu = (
+                <ContextMenu {...contextMenuBelow(this.state.notificationsMenuPosition)} onFinished={this.onCloseNotificationsMenu}>
+                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile_contextMenu">
+                        <div className="mx_IconizedContextMenu_optionList">
+                            <NotifOption
+                                label={_t("Use default")}
+                                active={state === ALL_MESSAGES}
+                                iconClassName="mx_RoomTile_iconBell"
+                                onClick={this.onClickAllNotifs}
+                            />
+                            <NotifOption
+                                label={_t("All messages")}
+                                active={state === ALL_MESSAGES_LOUD}
+                                iconClassName="mx_RoomTile_iconBellDot"
+                                onClick={this.onClickAlertMe}
+                            />
+                            <NotifOption
+                                label={_t("Mentions & Keywords")}
+                                active={state === MENTIONS_ONLY}
+                                iconClassName="mx_RoomTile_iconBellMentions"
+                                onClick={this.onClickMentions}
+                            />
+                            <NotifOption
+                                label={_t("None")}
+                                active={state === MUTE}
+                                iconClassName="mx_RoomTile_iconBellCrossed"
+                                onClick={this.onClickMute}
+                            />
+                        </div>
+                    </div>
+                </ContextMenu>
+            );
+        }
+
+        const classes = classNames("mx_RoomTile_notificationsButton", {
+            // Show bell icon for the default case too.
+            mx_RoomTile_iconBell: state === ALL_MESSAGES,
+            mx_RoomTile_iconBellDot: state === ALL_MESSAGES_LOUD,
+            mx_RoomTile_iconBellMentions: state === MENTIONS_ONLY,
+            mx_RoomTile_iconBellCrossed: state === MUTE,
+
+            // Only show the icon by default if the room is overridden to muted.
+            // TODO: [FTUE Notifications] Probably need to detect global mute state
+            mx_RoomTile_notificationsButton_show: state === MUTE,
+        });
+
+        return (
+            <React.Fragment>
+                <ContextMenuTooltipButton
+                    className={classes}
+                    onClick={this.onNotificationsMenuOpenClick}
+                    title={_t("Notification options")}
+                    isExpanded={!!this.state.notificationsMenuPosition}
+                    tabIndex={isActive ? 0 : -1}
+                />
+                {contextMenu}
+            </React.Fragment>
+        );
+    }
+
+    private renderGeneralMenu(): React.ReactElement {
+        if (!this.showContextMenu) return null; // no menu to show
+
+        let contextMenu = null;
+        if (this.state.generalMenuPosition && this.props.tag === DefaultTagID.Archived) {
+            contextMenu = (
+                <ContextMenu {...contextMenuBelow(this.state.generalMenuPosition)} onFinished={this.onCloseGeneralMenu}>
+                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile_contextMenu">
+                        <div className="mx_IconizedContextMenu_optionList mx_RoomTile_contextMenu_redRow">
+                            <MenuItem onClick={this.onForgetRoomClick} label={_t("Leave Room")}>
+                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSignOut" />
+                                <span className="mx_IconizedContextMenu_label">{_t("Forget Room")}</span>
+                            </MenuItem>
+                        </div>
+                    </div>
+                </ContextMenu>
+            );
+        } else if (this.state.generalMenuPosition) {
+            const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room);
+
+            const isFavorite = roomTags.includes(DefaultTagID.Favourite);
+            const favouriteLabel = isFavorite ? _t("Favourited") : _t("Favourite");
+
+            const isLowPriority = roomTags.includes(DefaultTagID.LowPriority);
+            const lowPriorityLabel = _t("Low Priority");
+
+            contextMenu = (
+                <ContextMenu {...contextMenuBelow(this.state.generalMenuPosition)} onFinished={this.onCloseGeneralMenu}>
+                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile_contextMenu">
+                        <div className="mx_IconizedContextMenu_optionList">
+                            <MenuItemCheckbox
+                                className={isFavorite ? "mx_RoomTile_contextMenu_activeRow" : ""}
+                                onClick={(e) => this.onTagRoom(e, DefaultTagID.Favourite)}
+                                active={isFavorite}
+                                label={favouriteLabel}
+                            >
+                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconStar" />
+                                <span className="mx_IconizedContextMenu_label">{favouriteLabel}</span>
+                            </MenuItemCheckbox>
+                            <MenuItemCheckbox
+                                className={isLowPriority ? "mx_RoomTile_contextMenu_activeRow" : ""}
+                                onClick={(e) => this.onTagRoom(e, DefaultTagID.LowPriority)}
+                                active={isLowPriority}
+                                label={lowPriorityLabel}
+                            >
+                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconArrowDown" />
+                                <span className="mx_IconizedContextMenu_label">{lowPriorityLabel}</span>
+                            </MenuItemCheckbox>
+                            <MenuItem onClick={this.onOpenRoomSettings} label={_t("Settings")}>
+                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSettings" />
+                                <span className="mx_IconizedContextMenu_label">{_t("Settings")}</span>
+                            </MenuItem>
+                        </div>
+                        <div className="mx_IconizedContextMenu_optionList mx_RoomTile_contextMenu_redRow">
+                            <MenuItem onClick={this.onLeaveRoomClick} label={_t("Leave Room")}>
+                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSignOut" />
+                                <span className="mx_IconizedContextMenu_label">{_t("Leave Room")}</span>
+                            </MenuItem>
+                        </div>
+                    </div>
+                </ContextMenu>
+            );
+        }
+
+        return (
+            <React.Fragment>
+                <ContextMenuTooltipButton
+                    className="mx_RoomTile_menuButton"
+                    onClick={this.onGeneralMenuOpenClick}
+                    title={_t("Room options")}
+                    isExpanded={!!this.state.generalMenuPosition}
+                />
+                {contextMenu}
+            </React.Fragment>
+        );
+    }
+
+    public render(): React.ReactElement {
+        const classes = classNames({
+            'mx_RoomTile': true,
+            'mx_RoomTile_selected': this.state.selected,
+            'mx_RoomTile_hasMenuOpen': !!(this.state.generalMenuPosition || this.state.notificationsMenuPosition),
+            'mx_RoomTile_minimized': this.props.isMinimized,
+        });
+
+        const roomAvatar = <DecoratedRoomAvatar
+            room={this.props.room}
+            avatarSize={32}
+            tag={this.props.tag}
+            displayBadge={this.props.isMinimized}
+        />;
+
+        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>
+            );
+        }
+
+        let name = this.props.room.name;
+        if (typeof name !== 'string') name = '';
+        name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
+
+        let messagePreview = null;
+        if (this.showMessagePreview && this.state.messagePreview) {
+            messagePreview = (
+                <div className="mx_RoomTile_messagePreview" id={messagePreviewId(this.props.room.roomId)}>
+                    {this.state.messagePreview}
+                </div>
+            );
+        }
+
+        const nameClasses = classNames({
+            "mx_RoomTile_name": true,
+            "mx_RoomTile_nameWithPreview": !!messagePreview,
+            "mx_RoomTile_nameHasUnreadEvents": this.notificationState.isUnread,
+        });
+
+        let nameContainer = (
+            <div className="mx_RoomTile_nameContainer">
+                <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
+                    {name}
+                </div>
+                {messagePreview}
+            </div>
+        );
+        if (this.props.isMinimized) nameContainer = null;
+
+        let ariaLabel = name;
+        // The following labels are written in such a fashion to increase screen reader efficiency (speed).
+        if (this.props.tag === DefaultTagID.Invite) {
+            // append nothing
+        } else if (this.notificationState.hasMentions) {
+            ariaLabel += " " + _t("%(count)s unread messages including mentions.", {
+                count: this.notificationState.count,
+            });
+        } else if (this.notificationState.hasUnreadCount) {
+            ariaLabel += " " + _t("%(count)s unread messages.", {
+                count: this.notificationState.count,
+            });
+        } else if (this.notificationState.isUnread) {
+            ariaLabel += " " + _t("Unread messages.");
+        }
+
+        let ariaDescribedBy: string;
+        if (this.showMessagePreview) {
+            ariaDescribedBy = messagePreviewId(this.props.room.roomId);
+        }
+
+        let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
+        if (this.props.isMinimized) {
+            Button = AccessibleTooltipButton;
+        }
+
+        return (
+            <React.Fragment>
+                <RovingTabIndexWrapper inputRef={this.roomTileRef}>
+                    {({onFocus, isActive, ref}) =>
+                        <Button
+                            onFocus={onFocus}
+                            tabIndex={isActive ? 0 : -1}
+                            inputRef={ref}
+                            className={classes}
+                            onClick={this.onTileClick}
+                            onContextMenu={this.onContextMenu}
+                            role="treeitem"
+                            aria-label={ariaLabel}
+                            aria-selected={this.state.selected}
+                            aria-describedby={ariaDescribedBy}
+                            title={this.props.isMinimized ? name : undefined}
+                        >
+                            {roomAvatar}
+                            {nameContainer}
+                            {badge}
+                            {this.renderGeneralMenu()}
+                            {this.renderNotificationsMenu(isActive)}
+                        </Button>
+                    }
+                </RovingTabIndexWrapper>
+            </React.Fragment>
+        );
+    }
+}

src/components/views/rooms/RoomTile2.tsx

@@ -1,277 +0,0 @@
-/*
-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.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, { createRef } from "react";
-import { Room } from "matrix-js-sdk/src/models/room";
-import classNames from "classnames";
-import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
-import AccessibleButton from "../../views/elements/AccessibleButton";
-import RoomAvatar from "../../views/avatars/RoomAvatar";
-import Tooltip from "../../views/elements/Tooltip";
-import dis from '../../../dispatcher/dispatcher';
-import { Key } from "../../../Keyboard";
-import * as RoomNotifs from '../../../RoomNotifs';
-import { EffectiveMembership, getEffectiveMembership } from "../../../stores/room-list/membership";
-import * as Unread from '../../../Unread';
-import * as FormattingUtils from "../../../utils/FormattingUtils";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-
-/*******************************************************************
- *   CAUTION                                                       *
- *******************************************************************
- * This is a work in progress implementation and isn't complete or *
- * even useful as a component. Please avoid using it until this    *
- * warning disappears.                                             *
- *******************************************************************/
-
-enum NotificationColor {
-    // Inverted (None -> Red) because we do integer comparisons on this
-    None, // nothing special
-    Bold, // no badge, show as unread
-    Grey, // unread notified messages
-    Red,  // unread pings
-}
-
-interface IProps {
-    room: Room;
-
-    // TODO: Allow falsifying counts (for invites and stuff)
-    // TODO: Transparency? Was this ever used?
-    // TODO: Incoming call boxes?
-}
-
-interface INotificationState {
-    symbol: string;
-    color: NotificationColor;
-}
-
-interface IState {
-    hover: boolean;
-    notificationState: INotificationState;
-}
-
-export default class RoomTile2 extends React.Component<IProps, IState> {
-    private roomTile = createRef();
-
-    // TODO: Custom status
-    // TODO: Lock icon
-    // TODO: Presence indicator
-    // TODO: e2e shields
-    // TODO: Handle changes to room aesthetics (name, join rules, etc)
-    // TODO: scrollIntoView?
-    // TODO: hover, badge, etc
-    // TODO: isSelected for hover effects
-    // TODO: Context menu
-    // TODO: a11y
-
-    constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            hover: false,
-            notificationState: this.getNotificationState(),
-        };
-
-        this.props.room.on("Room.receipt", this.handleRoomEventUpdate);
-        this.props.room.on("Room.timeline", this.handleRoomEventUpdate);
-        this.props.room.on("Room.redaction", this.handleRoomEventUpdate);
-        MatrixClientPeg.get().on("Event.decrypted", this.handleRoomEventUpdate);
-    }
-
-    public componentWillUnmount() {
-        if (this.props.room) {
-            this.props.room.removeListener("Room.receipt", this.handleRoomEventUpdate);
-            this.props.room.removeListener("Room.timeline", this.handleRoomEventUpdate);
-            this.props.room.removeListener("Room.redaction", this.handleRoomEventUpdate);
-        }
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("Event.decrypted", this.handleRoomEventUpdate);
-        }
-    }
-
-    // XXX: This is a bit of an awful-looking hack. We should probably be using state for
-    // this, but instead we're kinda forced to either duplicate the code or thread a variable
-    // through the code paths. This feels like the least evil option.
-    private get roomIsInvite(): boolean {
-        return getEffectiveMembership(this.props.room.getMyMembership()) === EffectiveMembership.Invite;
-    }
-
-    private handleRoomEventUpdate = (event: MatrixEvent) => {
-        const roomId = event.getRoomId();
-
-        // Sanity check: should never happen
-        if (roomId !== this.props.room.roomId) return;
-
-        this.updateNotificationState();
-    };
-
-    private updateNotificationState() {
-        this.setState({notificationState: this.getNotificationState()});
-    }
-
-    private getNotificationState(): INotificationState {
-        const state: INotificationState = {
-            color: NotificationColor.None,
-            symbol: null,
-        };
-
-        if (this.roomIsInvite) {
-            state.color = NotificationColor.Red;
-            state.symbol = "!";
-        } else {
-            const redNotifs = RoomNotifs.getUnreadNotificationCount(this.props.room, 'highlight');
-            const greyNotifs = RoomNotifs.getUnreadNotificationCount(this.props.room, 'total');
-
-            // For a 'true count' we pick the grey notifications first because they include the
-            // red notifications. If we don't have a grey count for some reason we use the red
-            // count. If that count is broken for some reason, assume zero. This avoids us showing
-            // a badge for 'NaN' (which formats as 'NaNB' for NaN Billion).
-            const trueCount = greyNotifs ? greyNotifs : (redNotifs ? redNotifs : 0);
-
-            // Note: we only set the symbol if we have an actual count. We don't want to show
-            // zero on badges.
-
-            if (redNotifs > 0) {
-                state.color = NotificationColor.Red;
-                state.symbol = FormattingUtils.formatCount(trueCount);
-            } else if (greyNotifs > 0) {
-                state.color = NotificationColor.Grey;
-                state.symbol = FormattingUtils.formatCount(trueCount);
-            } else {
-                // We don't have any notified messages, but we might have unread messages. Let's
-                // find out.
-                const hasUnread = Unread.doesRoomHaveUnreadMessages(this.props.room);
-                if (hasUnread) {
-                    state.color = NotificationColor.Bold;
-                    // no symbol for this state
-                }
-            }
-        }
-
-        return state;
-    }
-
-    private onTileMouseEnter = () => {
-        this.setState({hover: true});
-    };
-
-    private onTileMouseLeave = () => {
-        this.setState({hover: false});
-    };
-
-    private onTileClick = (ev: React.KeyboardEvent) => {
-        dis.dispatch({
-            action: 'view_room',
-            // TODO: Support show_room_tile in new room list
-            show_room_tile: true, // make sure the room is visible in the list
-            room_id: this.props.room.roomId,
-            clear_search: (ev && (ev.key === Key.ENTER || ev.key === Key.SPACE)),
-        });
-    };
-
-    public render(): React.ReactElement {
-        // TODO: Collapsed state
-        // TODO: Invites
-        // TODO: a11y proper
-        // TODO: Render more than bare minimum
-
-        const hasBadge = this.state.notificationState.color > NotificationColor.Bold;
-        const isUnread = this.state.notificationState.color > NotificationColor.None;
-        const classes = classNames({
-            'mx_RoomTile': true,
-            // 'mx_RoomTile_selected': this.state.selected,
-            'mx_RoomTile_unread': isUnread,
-            'mx_RoomTile_unreadNotify': this.state.notificationState.color >= NotificationColor.Grey,
-            'mx_RoomTile_highlight': this.state.notificationState.color >= NotificationColor.Red,
-            'mx_RoomTile_invited': this.roomIsInvite,
-            // 'mx_RoomTile_menuDisplayed': isMenuDisplayed,
-            'mx_RoomTile_noBadges': !hasBadge,
-            // 'mx_RoomTile_transparent': this.props.transparent,
-            // 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
-        });
-
-        const avatarClasses = classNames({
-            'mx_RoomTile_avatar': true,
-        });
-
-
-        let badge;
-        if (hasBadge) {
-            const badgeClasses = classNames({
-                'mx_RoomTile_badge': true,
-                'mx_RoomTile_badgeButton': false, // this.state.badgeHover || isMenuDisplayed
-            });
-            badge = <div className={badgeClasses}>{this.state.notificationState.symbol}</div>;
-        }
-
-        // TODO: the original RoomTile uses state for the room name. Do we need to?
-        let name = this.props.room.name;
-        if (typeof name !== 'string') name = '';
-        name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
-
-        const nameClasses = classNames({
-            'mx_RoomTile_name': true,
-            'mx_RoomTile_invite': this.roomIsInvite,
-            'mx_RoomTile_badgeShown': hasBadge,
-        });
-
-        // TODO: Support collapsed state properly
-        let tooltip = null;
-        if (false) { // isCollapsed
-            if (this.state.hover) {
-                tooltip = <Tooltip className="mx_RoomTile_tooltip" label={this.props.room.name} />
-            }
-        }
-
-        return (
-            <React.Fragment>
-                <RovingTabIndexWrapper inputRef={this.roomTile}>
-                    {({onFocus, isActive, ref}) =>
-                        <AccessibleButton
-                            onFocus={onFocus}
-                            tabIndex={isActive ? 0 : -1}
-                            inputRef={ref}
-                            className={classes}
-                            onMouseEnter={this.onTileMouseEnter}
-                            onMouseLeave={this.onTileMouseLeave}
-                            onClick={this.onTileClick}
-                            role="treeitem"
-                        >
-                            <div className={avatarClasses}>
-                                <div className="mx_RoomTile_avatar_container">
-                                    <RoomAvatar room={this.props.room} width={24} height={24}/>
-                                </div>
-                            </div>
-                            <div className="mx_RoomTile_nameContainer">
-                                <div className="mx_RoomTile_labelContainer">
-                                    <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
-                                        {name}
-                                    </div>
-                                </div>
-                                {badge}
-                            </div>
-                            {tooltip}
-                        </AccessibleButton>
-                    }
-                </RovingTabIndexWrapper>
-            </React.Fragment>
-        );
-    }
-}

src/components/views/rooms/RoomTileIcon.tsx

@@ -0,0 +1,168 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { DefaultTagID, TagID } from "../../../stores/room-list/models";
+import { User } from "matrix-js-sdk/src/models/user";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { isPresenceEnabled } from "../../../utils/presence";
+import { _t } from "../../../languageHandler";
+import TextWithTooltip from "../elements/TextWithTooltip";
+
+enum Icon {
+    // Note: the names here are used in CSS class names
+    None = "NONE", // ... except this one
+    Globe = "GLOBE",
+    PresenceOnline = "ONLINE",
+    PresenceAway = "AWAY",
+    PresenceOffline = "OFFLINE",
+}
+
+function tooltipText(variant: Icon) {
+    switch (variant) {
+        case Icon.Globe:
+            return _t("This room is public");
+        case Icon.PresenceOnline:
+            return _t("Online");
+        case Icon.PresenceAway:
+            return _t("Away");
+        case Icon.PresenceOffline:
+            return _t("Offline");
+    }
+}
+
+interface IProps {
+    room: Room;
+}
+
+interface IState {
+    icon: Icon;
+}
+
+export default class RoomTileIcon extends React.Component<IProps, IState> {
+    private _dmUser: User;
+    private isUnmounted = false;
+    private isWatchingTimeline = false;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            icon: this.calculateIcon(),
+        };
+    }
+
+    private get isPublicRoom(): boolean {
+        const joinRules = this.props.room.currentState.getStateEvents("m.room.join_rules", "");
+        const joinRule = joinRules && joinRules.getContent().join_rule;
+        return joinRule === 'public';
+    }
+
+    private get dmUser(): User {
+        return this._dmUser;
+    }
+
+    private set dmUser(val: User) {
+        const oldUser = this._dmUser;
+        this._dmUser = val;
+        if (oldUser && oldUser !== this._dmUser) {
+            oldUser.off('User.currentlyActive', this.onPresenceUpdate);
+            oldUser.off('User.presence', this.onPresenceUpdate);
+        }
+        if (this._dmUser && oldUser !== this._dmUser) {
+            this._dmUser.on('User.currentlyActive', this.onPresenceUpdate);
+            this._dmUser.on('User.presence', this.onPresenceUpdate);
+        }
+    }
+
+    public componentWillUnmount() {
+        this.isUnmounted = true;
+        if (this.isWatchingTimeline) this.props.room.off('Room.timeline', this.onRoomTimeline);
+        this.dmUser = null; // clear listeners, if any
+    }
+
+    private onRoomTimeline = (ev: MatrixEvent, room: Room) => {
+        if (this.isUnmounted) return;
+
+        // apparently these can happen?
+        if (!room) return;
+        if (this.props.room.roomId !== room.roomId) return;
+
+        if (ev.getType() === 'm.room.join_rules' || ev.getType() === 'm.room.member') {
+            this.setState({icon: this.calculateIcon()});
+        }
+    };
+
+    private onPresenceUpdate = () => {
+        if (this.isUnmounted) return;
+
+        let newIcon = this.getPresenceIcon();
+        if (newIcon !== this.state.icon) this.setState({icon: newIcon});
+    };
+
+    private getPresenceIcon(): Icon {
+        if (!this.dmUser) return Icon.None;
+
+        let icon = Icon.None;
+
+        const isOnline = this.dmUser.currentlyActive || this.dmUser.presence === 'online';
+        if (isOnline) {
+            icon = Icon.PresenceOnline;
+        } else if (this.dmUser.presence === 'offline') {
+            icon = Icon.PresenceOffline;
+        } else if (this.dmUser.presence === 'unavailable') {
+            icon = Icon.PresenceAway;
+        }
+
+        return icon;
+    }
+
+    private calculateIcon(): Icon {
+        let icon = Icon.None;
+
+        // We look at the DMRoomMap and not the tag here so that we don't exclude DMs in Favourites
+        const otherUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId);
+        if (otherUserId && this.props.room.getJoinedMemberCount() === 2) {
+            // Track presence, if available
+            if (isPresenceEnabled()) {
+                if (otherUserId) {
+                    this.dmUser = MatrixClientPeg.get().getUser(otherUserId);
+                    icon = this.getPresenceIcon();
+                }
+            }
+        } else {
+            // Track publicity
+            icon = this.isPublicRoom ? Icon.Globe : Icon.None;
+            if (!this.isWatchingTimeline) {
+                this.props.room.on('Room.timeline', this.onRoomTimeline);
+                this.isWatchingTimeline = true;
+            }
+        }
+        return icon;
+    }
+
+    public render(): React.ReactElement {
+        if (this.state.icon === Icon.None) return null;
+
+        return <TextWithTooltip
+            tooltip={tooltipText(this.state.icon)}
+            class={`mx_RoomTileIcon mx_RoomTileIcon_${this.state.icon.toLowerCase()}`}
+        />;
+    }
+}

src/components/views/rooms/SendMessageComposer.js

@@ -427,7 +427,9 @@ export default class SendMessageComposer extends React.Component {
 
     _onPaste = (event) => {
         const {clipboardData} = event;
-        if (clipboardData.files.length) {
+        // Prioritize text on the clipboard over files as Office on macOS puts a bitmap
+        // in the clipboard as well as the content being copied.
+        if (clipboardData.files.length && !clipboardData.types.some(t => t === "text/plain")) {
             // This actually not so much for 'files' as such (at time of writing
             // neither chrome nor firefox let you paste a plain file copied
             // from Finder) but more images copied from a different website

src/components/views/rooms/Stickerpicker.js

@@ -27,6 +27,8 @@ import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
 import {ContextMenu} from "../../structures/ContextMenu";
 import {WidgetType} from "../../../widgets/WidgetType";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import {Action} from "../../../dispatcher/actions";
 
 // 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.
@@ -180,7 +182,7 @@ export default class Stickerpicker extends React.Component {
             case "stickerpicker_close":
                 this.setState({showStickers: false});
                 break;
-            case "after_right_panel_phase_change":
+            case Action.AfterRightPanelPhaseChange:
             case "show_left_panel":
             case "hide_left_panel":
                 this.setState({showStickers: false});
@@ -409,14 +411,14 @@ export default class Stickerpicker extends React.Component {
         } else {
             // Show show-stickers button
             stickersButton =
-                <AccessibleButton
+                <AccessibleTooltipButton
                     id='stickersButton'
                     key="controls_show_stickers"
                     className="mx_MessageComposer_button mx_MessageComposer_stickers"
                     onClick={this._onShowStickersClick}
                     title={_t("Show Stickers")}
                 >
-                </AccessibleButton>;
+                </AccessibleTooltipButton>;
         }
         return <React.Fragment>
             { stickersButton }

src/components/views/rooms/TemporaryTile.tsx

@@ -0,0 +1,119 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import classNames from "classnames";
+import {
+    RovingAccessibleButton,
+    RovingAccessibleTooltipButton,
+    RovingTabIndexWrapper
+} from "../../../accessibility/RovingTabIndex";
+import AccessibleButton from "../../views/elements/AccessibleButton";
+import NotificationBadge from "./NotificationBadge";
+import { NotificationState } from "../../../stores/notifications/NotificationState";
+
+interface IProps {
+    isMinimized: boolean;
+    isSelected: boolean;
+    displayName: string;
+    avatar: React.ReactElement;
+    notificationState: NotificationState;
+    onClick: () => void;
+}
+
+interface IState {
+    hover: boolean;
+}
+
+// TODO: Remove with community invites in the room list: https://github.com/vector-im/riot-web/issues/14456
+export default class TemporaryTile extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    private onTileMouseEnter = () => {
+        this.setState({hover: true});
+    };
+
+    private onTileMouseLeave = () => {
+        this.setState({hover: false});
+    };
+
+    public render(): React.ReactElement {
+        // XXX: We copy classes because it's easier
+        const classes = classNames({
+            '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 name = this.props.displayName;
+        if (typeof name !== 'string') name = '';
+        name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
+
+        const nameClasses = classNames({
+            "mx_RoomTile_name": true,
+            "mx_RoomTile_nameHasUnreadEvents": this.props.notificationState.isUnread,
+        });
+
+        let nameContainer = (
+            <div className="mx_RoomTile_nameContainer">
+                <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
+                    {name}
+                </div>
+            </div>
+        );
+        if (this.props.isMinimized) nameContainer = null;
+
+        let Button = RovingAccessibleButton;
+        if (this.props.isMinimized) {
+            Button = RovingAccessibleTooltipButton;
+        }
+
+        return (
+            <React.Fragment>
+                <Button
+                    className={classes}
+                    onMouseEnter={this.onTileMouseEnter}
+                    onMouseLeave={this.onTileMouseLeave}
+                    onClick={this.props.onClick}
+                    role="treeitem"
+                    title={this.props.isMinimized ? name : undefined}
+                >
+                    <div className="mx_RoomTile_avatarContainer">
+                        {this.props.avatar}
+                    </div>
+                    {nameContainer}
+                    <div className="mx_RoomTile_badgeContainer">
+                        {badge}
+                    </div>
+                </Button>
+            </React.Fragment>
+        );
+    }
+}

src/components/views/rooms/UserOnlineDot.js

@@ -1,48 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, {useContext, useEffect, useMemo, useState, useCallback} from "react";
-import PropTypes from "prop-types";
-
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
-
-const UserOnlineDot = ({userId}) => {
-    const cli = useContext(MatrixClientContext);
-    const user = useMemo(() => cli.getUser(userId), [cli, userId]);
-
-    const [isOnline, setIsOnline] = useState(false);
-
-    // Recheck if the user or client changes
-    useEffect(() => {
-        setIsOnline(user && (user.currentlyActive || user.presence === "online"));
-    }, [cli, user]);
-    // Recheck also if we receive a User.currentlyActive event
-    const currentlyActiveHandler = useCallback((ev) => {
-        const content = ev.getContent();
-        setIsOnline(content.currently_active || content.presence === "online");
-    }, []);
-    useEventEmitter(user, "User.currentlyActive", currentlyActiveHandler);
-    useEventEmitter(user, "User.presence", currentlyActiveHandler);
-
-    return isOnline ? <span className="mx_UserOnlineDot" /> : null;
-};
-
-UserOnlineDot.propTypes = {
-    userId: PropTypes.string.isRequired,
-};
-
-export default UserOnlineDot;