Merge branch 'develop' into uhoreg/keytar_logging

src/@types/global.d.ts

@@ -20,9 +20,11 @@ import { IMatrixClientPeg } from "../MatrixClientPeg";
 import ToastStore from "../stores/ToastStore";
 import DeviceListener from "../DeviceListener";
 import RebrandListener from "../RebrandListener";
-import { RoomListStore2 } from "../stores/room-list/RoomListStore2";
+import { RoomListStoreClass } from "../stores/room-list/RoomListStore";
 import { PlatformPeg } from "../PlatformPeg";
 import RoomListLayoutStore from "../stores/room-list/RoomListLayoutStore";
+import {IntegrationManagers} from "../integrations/IntegrationManagers";
+import {ModalManager} from "../Modal";
 
 declare global {
     interface Window {
@@ -32,21 +34,20 @@ declare global {
             init: () => Promise<void>;
         };
 
-        mx_ContentMessages: ContentMessages;
-        mx_ToastStore: ToastStore;
-        mx_DeviceListener: DeviceListener;
-        mx_RebrandListener: RebrandListener;
-        mx_RoomListStore2: RoomListStore2;
-        mx_RoomListLayoutStore: RoomListLayoutStore;
+        mxContentMessages: ContentMessages;
+        mxToastStore: ToastStore;
+        mxDeviceListener: DeviceListener;
+        mxRebrandListener: RebrandListener;
+        mxRoomListStore: RoomListStoreClass;
+        mxRoomListLayoutStore: RoomListLayoutStore;
         mxPlatformPeg: PlatformPeg;
-
-        // TODO: Remove flag before launch: https://github.com/vector-im/riot-web/issues/14231
-        mx_LoudRoomListLogging: boolean;
+        mxIntegrationManagers: typeof IntegrationManagers;
+        singletonModalManager: ModalManager;
     }
 
     // workaround for https://github.com/microsoft/TypeScript/issues/30933
     interface ObjectConstructor {
-        fromEntries?(xs: [string|number|symbol, any][]): object
+        fromEntries?(xs: [string|number|symbol, any][]): object;
     }
 
     interface Document {

src/ContentMessages.tsx

@@ -386,7 +386,7 @@ export default class ContentMessages {
         const isQuoting = Boolean(RoomViewStore.getQuotingEvent());
         if (isQuoting) {
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-            const {finished} = Modal.createTrackedDialog('Upload Reply Warning', '', QuestionDialog, {
+            const {finished} = Modal.createTrackedDialog<[boolean]>('Upload Reply Warning', '', QuestionDialog, {
                 title: _t('Replying With Files'),
                 description: (
                     <div>{_t(
@@ -397,7 +397,7 @@ export default class ContentMessages {
                 hasCancelButton: true,
                 button: _t("Continue"),
             });
-            const [shouldUpload]: [boolean] = await finished;
+            const [shouldUpload] = await finished;
             if (!shouldUpload) return;
         }
 
@@ -420,12 +420,12 @@ export default class ContentMessages {
 
         if (tooBigFiles.length > 0) {
             const UploadFailureDialog = sdk.getComponent("dialogs.UploadFailureDialog");
-            const {finished} = Modal.createTrackedDialog('Upload Failure', '', UploadFailureDialog, {
+            const {finished} = Modal.createTrackedDialog<[boolean]>('Upload Failure', '', UploadFailureDialog, {
                 badFiles: tooBigFiles,
                 totalFiles: files.length,
                 contentMessages: this,
             });
-            const [shouldContinue]: [boolean] = await finished;
+            const [shouldContinue] = await finished;
             if (!shouldContinue) return;
         }
 
@@ -437,12 +437,12 @@ export default class ContentMessages {
         for (let i = 0; i < okFiles.length; ++i) {
             const file = okFiles[i];
             if (!uploadAll) {
-                const {finished} = Modal.createTrackedDialog('Upload Files confirmation', '', UploadConfirmDialog, {
+                const {finished} = Modal.createTrackedDialog<[boolean, boolean]>('Upload Files confirmation', '', UploadConfirmDialog, {
                     file,
                     currentIndex: i,
                     totalFiles: okFiles.length,
                 });
-                const [shouldContinue, shouldUploadAll]: [boolean, boolean] = await finished;
+                const [shouldContinue, shouldUploadAll] = await finished;
                 if (!shouldContinue) break;
                 if (shouldUploadAll) {
                     uploadAll = true;
@@ -621,9 +621,9 @@ export default class ContentMessages {
     }
 
     static sharedInstance() {
-        if (window.mx_ContentMessages === undefined) {
-            window.mx_ContentMessages = new ContentMessages();
+        if (window.mxContentMessages === undefined) {
+            window.mxContentMessages = new ContentMessages();
         }
-        return window.mx_ContentMessages;
+        return window.mxContentMessages;
     }
 }

src/CrossSigningManager.js

@@ -40,25 +40,16 @@ export class AccessCancelledError extends Error {
     }
 }
 
-async function confirmToDismiss(name) {
-    let description;
-    if (name === "m.cross_signing.user_signing") {
-        description = _t("If you cancel now, you won't complete verifying the other user.");
-    } else if (name === "m.cross_signing.self_signing") {
-        description = _t("If you cancel now, you won't complete verifying your other session.");
-    } else {
-        description = _t("If you cancel now, you won't complete your operation.");
-    }
-
+async function confirmToDismiss() {
     const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
     const [sure] = await Modal.createDialog(QuestionDialog, {
         title: _t("Cancel entering passphrase?"),
-        description,
-        danger: true,
-        cancelButton: _t("Enter passphrase"),
-        button: _t("Cancel"),
+        description: _t("Are you sure you want to cancel entering passphrase?"),
+        danger: false,
+        button: _t("Go Back"),
+        cancelButton: _t("Cancel"),
     }).finished;
-    return sure;
+    return !sure;
 }
 
 async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
@@ -102,7 +93,7 @@ async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
         /* options= */ {
             onBeforeClose: async (reason) => {
                 if (reason === "backgroundClick") {
-                    return confirmToDismiss(ssssItemName);
+                    return confirmToDismiss();
                 }
                 return true;
             },

src/DeviceListener.ts

@@ -17,16 +17,16 @@ limitations under the License.
 import {MatrixClientPeg} from './MatrixClientPeg';
 import {
     hideToast as hideBulkUnverifiedSessionsToast,
-    showToast as showBulkUnverifiedSessionsToast
+    showToast as showBulkUnverifiedSessionsToast,
 } from "./toasts/BulkUnverifiedSessionsToast";
 import {
     hideToast as hideSetupEncryptionToast,
     Kind as SetupKind,
-    showToast as showSetupEncryptionToast
+    showToast as showSetupEncryptionToast,
 } from "./toasts/SetupEncryptionToast";
 import {
     hideToast as hideUnverifiedSessionsToast,
-    showToast as showUnverifiedSessionsToast
+    showToast as showUnverifiedSessionsToast,
 } from "./toasts/UnverifiedSessionToast";
 import {privateShouldBeEncrypted} from "./createRoom";
 
@@ -48,8 +48,8 @@ export default class DeviceListener {
     private displayingToastsForDeviceIds = new Set<string>();
 
     static sharedInstance() {
-        if (!window.mx_DeviceListener) window.mx_DeviceListener = new DeviceListener();
-        return window.mx_DeviceListener;
+        if (!window.mxDeviceListener) window.mxDeviceListener = new DeviceListener();
+        return window.mxDeviceListener;
     }
 
     start() {

src/HtmlUtils.tsx

@@ -184,7 +184,7 @@ const transformTags: sanitizeHtml.IOptions["transformTags"] = { // custom to mat
         if (typeof attribs.class !== 'undefined') {
             // Filter out all classes other than ones starting with language- for syntax highlighting.
             const classes = attribs.class.split(/\s/).filter(function(cl) {
-                return cl.startsWith('language-');
+                return cl.startsWith('language-') && !cl.startsWith('language-_');
             });
             attribs.class = classes.join(' ');
         }

src/Modal.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket 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.
@@ -17,6 +18,8 @@ limitations under the License.
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+
 import Analytics from './Analytics';
 import dis from './dispatcher/dispatcher';
 import {defer} from './utils/promise';
@@ -25,36 +28,48 @@ import AsyncWrapper from './AsyncWrapper';
 const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
 const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer";
 
-class ModalManager {
-    constructor() {
-        this._counter = 0;
+interface IModal<T extends any[]> {
+    elem: React.ReactNode;
+    className?: string;
+    beforeClosePromise?: Promise<boolean>;
+    closeReason?: string;
+    onBeforeClose?(reason?: string): Promise<boolean>;
+    onFinished(...args: T): void;
+    close(...args: T): void;
+}
 
-        // The modal to prioritise over all others. If this is set, only show
-        // this modal. Remove all other modals from the stack when this modal
-        // is closed.
-        this._priorityModal = null;
-        // The modal to keep open underneath other modals if possible. Useful
-        // for cases like Settings where the modal should remain open while the
-        // user is prompted for more information/errors.
-        this._staticModal = null;
-        // A list of the modals we have stacked up, with the most recent at [0]
-        // Neither the static nor priority modal will be in this list.
-        this._modals = [
-            /* {
-               elem: React component for this dialog
-               onFinished: caller-supplied onFinished callback
-               className: CSS class for the dialog wrapper div
-               } */
-        ];
+interface IHandle<T extends any[]> {
+    finished: Promise<T>;
+    close(...args: T): void;
+}
 
-        this.onBackgroundClick = this.onBackgroundClick.bind(this);
-    }
+interface IProps<T extends any[]> {
+    onFinished?(...args: T): void;
+    // TODO improve typing here once all Modals are TS and we can exhaustively check the props
+    [key: string]: any;
+}
 
-    hasDialogs() {
-        return this._priorityModal || this._staticModal || this._modals.length > 0;
-    }
+interface IOptions<T extends any[]> {
+    onBeforeClose?: IModal<T>["onBeforeClose"];
+}
 
-    getOrCreateContainer() {
+type ParametersWithoutFirst<T extends (...args: any) => any> = T extends (a: any, ...args: infer P) => any ? P : never;
+
+export class ModalManager {
+    private counter = 0;
+    // The modal to prioritise over all others. If this is set, only show
+    // this modal. Remove all other modals from the stack when this modal
+    // is closed.
+    private priorityModal: IModal<any> = null;
+    // The modal to keep open underneath other modals if possible. Useful
+    // for cases like Settings where the modal should remain open while the
+    // user is prompted for more information/errors.
+    private staticModal: IModal<any> = null;
+    // A list of the modals we have stacked up, with the most recent at [0]
+    // Neither the static nor priority modal will be in this list.
+    private modals: IModal<any>[] = [];
+
+    private static getOrCreateContainer() {
         let container = document.getElementById(DIALOG_CONTAINER_ID);
 
         if (!container) {
@@ -66,7 +81,7 @@ class ModalManager {
         return container;
     }
 
-    getOrCreateStaticContainer() {
+    private static getOrCreateStaticContainer() {
         let container = document.getElementById(STATIC_DIALOG_CONTAINER_ID);
 
         if (!container) {
@@ -78,63 +93,99 @@ class ModalManager {
         return container;
     }
 
-    createTrackedDialog(analyticsAction, analyticsInfo, ...rest) {
+    public hasDialogs() {
+        return this.priorityModal || this.staticModal || this.modals.length > 0;
+    }
+
+    public createTrackedDialog<T extends any[]>(
+        analyticsAction: string,
+        analyticsInfo: string,
+        ...rest: Parameters<ModalManager["createDialog"]>
+    ) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.createDialog(...rest);
+        return this.createDialog<T>(...rest);
     }
 
-    appendTrackedDialog(analyticsAction, analyticsInfo, ...rest) {
+    public appendTrackedDialog<T extends any[]>(
+        analyticsAction: string,
+        analyticsInfo: string,
+        ...rest: Parameters<ModalManager["appendDialog"]>
+    ) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.appendDialog(...rest);
+        return this.appendDialog<T>(...rest);
     }
 
-    createDialog(Element, ...rest) {
-        return this.createDialogAsync(Promise.resolve(Element), ...rest);
+    public createDialog<T extends any[]>(
+        Element: React.ComponentType,
+        ...rest: ParametersWithoutFirst<ModalManager["createDialogAsync"]>
+    ) {
+        return this.createDialogAsync<T>(Promise.resolve(Element), ...rest);
     }
 
-    appendDialog(Element, ...rest) {
-        return this.appendDialogAsync(Promise.resolve(Element), ...rest);
+    public appendDialog<T extends any[]>(
+        Element: React.ComponentType,
+        ...rest: ParametersWithoutFirst<ModalManager["appendDialogAsync"]>
+    ) {
+        return this.appendDialogAsync<T>(Promise.resolve(Element), ...rest);
     }
 
-    createTrackedDialogAsync(analyticsAction, analyticsInfo, ...rest) {
+    public createTrackedDialogAsync<T extends any[]>(
+        analyticsAction: string,
+        analyticsInfo: string,
+        ...rest: Parameters<ModalManager["appendDialogAsync"]>
+    ) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.createDialogAsync(...rest);
+        return this.createDialogAsync<T>(...rest);
     }
 
-    appendTrackedDialogAsync(analyticsAction, analyticsInfo, ...rest) {
+    public appendTrackedDialogAsync<T extends any[]>(
+        analyticsAction: string,
+        analyticsInfo: string,
+        ...rest: Parameters<ModalManager["appendDialogAsync"]>
+    ) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.appendDialogAsync(...rest);
+        return this.appendDialogAsync<T>(...rest);
     }
 
-    _buildModal(prom, props, className, options) {
-        const modal = {};
+    private buildModal<T extends any[]>(
+        prom: Promise<React.ComponentType>,
+        props?: IProps<T>,
+        className?: string,
+        options?: IOptions<T>
+    ) {
+        const modal: IModal<T> = {
+            onFinished: props ? props.onFinished : null,
+            onBeforeClose: options.onBeforeClose,
+            beforeClosePromise: null,
+            closeReason: null,
+            className,
+
+            // these will be set below but we need an object reference to pass to getCloseFn before we can do that
+            elem: null,
+            close: null,
+        };
 
         // never call this from onFinished() otherwise it will loop
-        const [closeDialog, onFinishedProm] = this._getCloseFn(modal, props);
+        const [closeDialog, onFinishedProm] = this.getCloseFn<T>(modal, props);
 
         // don't attempt to reuse the same AsyncWrapper for different dialogs,
         // otherwise we'll get confused.
-        const modalCount = this._counter++;
+        const modalCount = this.counter++;
 
         // FIXME: If a dialog uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the dialog from a button click!
-        modal.elem = (
-            <AsyncWrapper key={modalCount} prom={prom} {...props}
-                          onFinished={closeDialog} />
-        );
-        modal.onFinished = props ? props.onFinished : null;
-        modal.className = className;
-        modal.onBeforeClose = options.onBeforeClose;
-        modal.beforeClosePromise = null;
+        modal.elem = <AsyncWrapper key={modalCount} prom={prom} {...props} onFinished={closeDialog} />;
         modal.close = closeDialog;
-        modal.closeReason = null;
 
         return {modal, closeDialog, onFinishedProm};
     }
 
-    _getCloseFn(modal, props) {
-        const deferred = defer();
-        return [async (...args) => {
+    private getCloseFn<T extends any[]>(
+        modal: IModal<T>,
+        props: IProps<T>
+    ): [IHandle<T>["close"], IHandle<T>["finished"]] {
+        const deferred = defer<T>();
+        return [async (...args: T) => {
             if (modal.beforeClosePromise) {
                 await modal.beforeClosePromise;
             } else if (modal.onBeforeClose) {
@@ -147,26 +198,26 @@ class ModalManager {
             }
             deferred.resolve(args);
             if (props && props.onFinished) props.onFinished.apply(null, args);
-            const i = this._modals.indexOf(modal);
+            const i = this.modals.indexOf(modal);
             if (i >= 0) {
-                this._modals.splice(i, 1);
+                this.modals.splice(i, 1);
             }
 
-            if (this._priorityModal === modal) {
-                this._priorityModal = null;
+            if (this.priorityModal === modal) {
+                this.priorityModal = null;
 
                 // XXX: This is destructive
-                this._modals = [];
+                this.modals = [];
             }
 
-            if (this._staticModal === modal) {
-                this._staticModal = null;
+            if (this.staticModal === modal) {
+                this.staticModal = null;
 
                 // XXX: This is destructive
-                this._modals = [];
+                this.modals = [];
             }
 
-            this._reRender();
+            this.reRender();
         }, deferred.promise];
     }
 
@@ -207,38 +258,49 @@ class ModalManager {
      * @param {onBeforeClose} options.onBeforeClose a callback to decide whether to close the dialog
      * @returns {object} Object with 'close' parameter being a function that will close the dialog
      */
-    createDialogAsync(prom, props, className, isPriorityModal, isStaticModal, options = {}) {
-        const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className, options);
+    private createDialogAsync<T extends any[]>(
+        prom: Promise<React.ComponentType>,
+        props?: IProps<T>,
+        className?: string,
+        isPriorityModal = false,
+        isStaticModal = false,
+        options: IOptions<T> = {}
+    ): IHandle<T> {
+        const {modal, closeDialog, onFinishedProm} = this.buildModal<T>(prom, props, className, options);
         if (isPriorityModal) {
             // XXX: This is destructive
-            this._priorityModal = modal;
+            this.priorityModal = modal;
         } else if (isStaticModal) {
             // This is intentionally destructive
-            this._staticModal = modal;
+            this.staticModal = modal;
         } else {
-            this._modals.unshift(modal);
+            this.modals.unshift(modal);
         }
 
-        this._reRender();
+        this.reRender();
         return {
             close: closeDialog,
             finished: onFinishedProm,
         };
     }
 
-    appendDialogAsync(prom, props, className) {
-        const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className, {});
+    private appendDialogAsync<T extends any[]>(
+        prom: Promise<React.ComponentType>,
+        props?: IProps<T>,
+        className?: string
+    ): IHandle<T> {
+        const {modal, closeDialog, onFinishedProm} = this.buildModal<T>(prom, props, className, {});
 
-        this._modals.push(modal);
-        this._reRender();
+        this.modals.push(modal);
+        this.reRender();
         return {
             close: closeDialog,
             finished: onFinishedProm,
         };
     }
 
-    onBackgroundClick() {
-        const modal = this._getCurrentModal();
+    private onBackgroundClick = () => {
+        const modal = this.getCurrentModal();
         if (!modal) {
             return;
         }
@@ -249,21 +311,21 @@ class ModalManager {
         modal.closeReason = "backgroundClick";
         modal.close();
         modal.closeReason = null;
+    };
+
+    private getCurrentModal(): IModal<any> {
+        return this.priorityModal ? this.priorityModal : (this.modals[0] || this.staticModal);
     }
 
-    _getCurrentModal() {
-        return this._priorityModal ? this._priorityModal : (this._modals[0] || this._staticModal);
-    }
-
-    _reRender() {
-        if (this._modals.length === 0 && !this._priorityModal && !this._staticModal) {
+    private reRender() {
+        if (this.modals.length === 0 && !this.priorityModal && !this.staticModal) {
             // If there is no modal to render, make all of Riot available
             // to screen reader users again
             dis.dispatch({
                 action: 'aria_unhide_main_app',
             });
-            ReactDOM.unmountComponentAtNode(this.getOrCreateContainer());
-            ReactDOM.unmountComponentAtNode(this.getOrCreateStaticContainer());
+            ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateContainer());
+            ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateStaticContainer());
             return;
         }
 
@@ -274,49 +336,48 @@ class ModalManager {
             action: 'aria_hide_main_app',
         });
 
-        if (this._staticModal) {
-            const classes = "mx_Dialog_wrapper mx_Dialog_staticWrapper "
-                + (this._staticModal.className ? this._staticModal.className : '');
+        if (this.staticModal) {
+            const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
 
             const staticDialog = (
                 <div className={classes}>
                     <div className="mx_Dialog">
-                        { this._staticModal.elem }
+                        { this.staticModal.elem }
                     </div>
-                    <div className="mx_Dialog_background mx_Dialog_staticBackground" onClick={this.onBackgroundClick}></div>
+                    <div className="mx_Dialog_background mx_Dialog_staticBackground" onClick={this.onBackgroundClick} />
                 </div>
             );
 
-            ReactDOM.render(staticDialog, this.getOrCreateStaticContainer());
+            ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
         } else {
             // This is safe to call repeatedly if we happen to do that
-            ReactDOM.unmountComponentAtNode(this.getOrCreateStaticContainer());
+            ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateStaticContainer());
         }
 
-        const modal = this._getCurrentModal();
-        if (modal !== this._staticModal) {
-            const classes = "mx_Dialog_wrapper "
-                + (this._staticModal ? "mx_Dialog_wrapperWithStaticUnder " : '')
-                + (modal.className ? modal.className : '');
+        const modal = this.getCurrentModal();
+        if (modal !== this.staticModal) {
+            const classes = classNames("mx_Dialog_wrapper", modal.className, {
+                mx_Dialog_wrapperWithStaticUnder: this.staticModal,
+            });
 
             const dialog = (
                 <div className={classes}>
                     <div className="mx_Dialog">
                         {modal.elem}
                     </div>
-                    <div className="mx_Dialog_background" onClick={this.onBackgroundClick}></div>
+                    <div className="mx_Dialog_background" onClick={this.onBackgroundClick} />
                 </div>
             );
 
-            ReactDOM.render(dialog, this.getOrCreateContainer());
+            ReactDOM.render(dialog, ModalManager.getOrCreateContainer());
         } else {
             // This is safe to call repeatedly if we happen to do that
-            ReactDOM.unmountComponentAtNode(this.getOrCreateContainer());
+            ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateContainer());
         }
     }
 }
 
-if (!global.singletonModalManager) {
-    global.singletonModalManager = new ModalManager();
+if (!window.singletonModalManager) {
+    window.singletonModalManager = new ModalManager();
 }
-export default global.singletonModalManager;
+export default window.singletonModalManager;

src/RebrandListener.tsx

@@ -67,8 +67,8 @@ export default class RebrandListener {
     private nagAgainAt?: number = null;
 
     static sharedInstance() {
-        if (!window.mx_RebrandListener) window.mx_RebrandListener = new RebrandListener();
-        return window.mx_RebrandListener;
+        if (!window.mxRebrandListener) window.mxRebrandListener = new RebrandListener();
+        return window.mxRebrandListener;
     }
 
     constructor() {
@@ -114,6 +114,11 @@ export default class RebrandListener {
         }
     };
 
+    onOneTimeToastDismiss = async () => {
+        localStorage.setItem('mx_rename_dialog_dismissed', 'true');
+        this.recheck();
+    };
+
     onNagTimerFired = () => {
         this._reshowTimer = null;
         this.nagAgainAt = null;
@@ -143,10 +148,14 @@ export default class RebrandListener {
 
         if (nagToast || oneTimeToast) {
             let description;
+            let rejectLabel = null;
+            let onReject = null;
             if (nagToast) {
                 description = _t("Use your account to sign in to the latest version");
             } else {
                 description = _t("We’re excited to announce Riot is now Element");
+                rejectLabel = _t("Dismiss");
+                onReject = this.onOneTimeToastDismiss;
             }
 
             ToastStore.sharedInstance().addOrReplaceToast({
@@ -157,6 +166,8 @@ export default class RebrandListener {
                     description,
                     acceptLabel: _t("Learn More"),
                     onAccept: nagToast ? this.onNagToastLearnMore : this.onOneTimeToastLearnMore,
+                    rejectLabel,
+                    onReject,
                 },
                 component: GenericToast,
                 priority: 20,

src/RoomNotifs.js

@@ -34,27 +34,6 @@ export function shouldShowMentionBadge(roomNotifState) {
     return MENTION_BADGE_STATES.includes(roomNotifState);
 }
 
-export function countRoomsWithNotif(rooms) {
-    return rooms.reduce((result, room, index) => {
-        const roomNotifState = getRoomNotifsState(room.roomId);
-        const highlight = room.getUnreadNotificationCount('highlight') > 0;
-        const notificationCount = room.getUnreadNotificationCount();
-
-        const notifBadges = notificationCount > 0 && shouldShowNotifBadge(roomNotifState);
-        const mentionBadges = highlight && shouldShowMentionBadge(roomNotifState);
-        const isInvite = room.hasMembershipState(MatrixClientPeg.get().credentials.userId, 'invite');
-        const badges = notifBadges || mentionBadges || isInvite;
-
-        if (badges) {
-            result.count++;
-            if (highlight) {
-                result.highlight = true;
-            }
-        }
-        return result;
-    }, {count: 0, highlight: false});
-}
-
 export function aggregateNotificationCount(rooms) {
     return rooms.reduce((result, room) => {
         const roomNotifState = getRoomNotifsState(room.roomId);

src/SlashCommands.tsx

@@ -401,14 +401,16 @@ export const Commands = [
                     // If we need an identity server but don't have one, things
                     // get a bit more complex here, but we try to show something
                     // meaningful.
-                    let finished = Promise.resolve();
+                    let prom = Promise.resolve();
                     if (
                         getAddressType(address) === 'email' &&
                         !MatrixClientPeg.get().getIdentityServerUrl()
                     ) {
                         const defaultIdentityServerUrl = getDefaultIdentityServerUrl();
                         if (defaultIdentityServerUrl) {
-                            ({ finished } = Modal.createTrackedDialog('Slash Commands', 'Identity server',
+                            const { finished } = Modal.createTrackedDialog<[boolean]>(
+                                'Slash Commands',
+                                'Identity server',
                                 QuestionDialog, {
                                     title: _t("Use an identity server"),
                                     description: <p>{_t(
@@ -421,9 +423,9 @@ export const Commands = [
                                     )}</p>,
                                     button: _t("Continue"),
                                 },
-                            ));
+                            );
 
-                            finished = finished.then(([useDefault]: any) => {
+                            prom = finished.then(([useDefault]) => {
                                 if (useDefault) {
                                     useDefaultIdentityServer();
                                     return;
@@ -435,7 +437,7 @@ export const Commands = [
                         }
                     }
                     const inviter = new MultiInviter(roomId);
-                    return success(finished.then(() => {
+                    return success(prom.then(() => {
                         return inviter.invite([address]);
                     }).then(() => {
                         if (inviter.getCompletionState(address) !== "invited") {
@@ -1049,7 +1051,7 @@ export function parseCommandString(input) {
     // trim any trailing whitespace, as it can confuse the parser for
     // IRC-style commands
     input = input.replace(/\s+$/, '');
-    if (input[0] !== '/') return null; // not a command
+    if (input[0] !== '/') return {}; // not a command
 
     const bits = input.match(/^(\S+?)(?: +((.|\n)*))?$/);
     let cmd;

src/accessibility/context_menu/ContextMenuButton.tsx

@@ -18,9 +18,9 @@ limitations under the License.
 
 import React from "react";
 
-import AccessibleButton, {IProps as IAccessibleButtonProps} from "../../components/views/elements/AccessibleButton";
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
 
-interface IProps extends IAccessibleButtonProps {
+interface IProps extends React.ComponentProps<typeof AccessibleButton> {
     label?: string;
     // whether or not the context menu is currently open
     isExpanded: boolean;

src/accessibility/context_menu/ContextMenuTooltipButton.tsx

@@ -0,0 +1,47 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector 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 AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
+
+interface IProps extends React.ComponentProps<typeof AccessibleTooltipButton>  {
+    // whether or not the context menu is currently open
+    isExpanded: boolean;
+}
+
+// Semantic component for representing the AccessibleButton which launches a <ContextMenu />
+export const ContextMenuTooltipButton: React.FC<IProps> = ({
+    isExpanded,
+    children,
+    onClick,
+    onContextMenu,
+    ...props
+}) => {
+    return (
+        <AccessibleTooltipButton
+            {...props}
+            onClick={onClick}
+            onContextMenu={onContextMenu || onClick}
+            aria-haspopup={true}
+            aria-expanded={isExpanded}
+        >
+            { children }
+        </AccessibleTooltipButton>
+    );
+};

src/actions/RoomListActions.ts

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import { asyncAction } from './actionCreators';
-import { TAG_DM } from '../stores/RoomListStore';
 import Modal from '../Modal';
 import * as Rooms from '../Rooms';
 import { _t } from '../languageHandler';
@@ -24,7 +23,9 @@ import * as sdk from '../index';
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { AsyncActionPayload } from "../dispatcher/payloads";
-import { RoomListStoreTempProxy } from "../stores/room-list/RoomListStoreTempProxy";
+import RoomListStore from "../stores/room-list/RoomListStore";
+import { SortAlgorithm } from "../stores/room-list/algorithms/models";
+import { DefaultTagID } from "../stores/room-list/models";
 
 export default class RoomListActions {
     /**
@@ -51,9 +52,9 @@ export default class RoomListActions {
         let metaData = null;
 
         // Is the tag ordered manually?
-        if (newTag && !newTag.match(/^(m\.lowpriority|im\.vector\.fake\.(invite|recent|direct|archived))$/)) {
-            const lists = RoomListStoreTempProxy.getRoomLists();
-            const newList = [...lists[newTag]];
+        const store = RoomListStore.instance;
+        if (newTag && store.getTagSorting(newTag) === SortAlgorithm.Manual) {
+            const newList = [...store.orderedLists[newTag]];
 
             newList.sort((a, b) => a.tags[newTag].order - b.tags[newTag].order);
 
@@ -81,11 +82,11 @@ export default class RoomListActions {
             const roomId = room.roomId;
 
             // Evil hack to get DMs behaving
-            if ((oldTag === undefined && newTag === TAG_DM) ||
-                (oldTag === TAG_DM && newTag === undefined)
+            if ((oldTag === undefined && newTag === DefaultTagID.DM) ||
+                (oldTag === DefaultTagID.DM && newTag === undefined)
             ) {
                 return Rooms.guessAndSetDMRoom(
-                    room, newTag === TAG_DM,
+                    room, newTag === DefaultTagID.DM,
                 ).catch((err) => {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to set direct chat tag " + err);
@@ -102,12 +103,12 @@ export default class RoomListActions {
             // but we avoid ever doing a request with TAG_DM.
             //
             // if we moved lists, remove the old tag
-            if (oldTag && oldTag !== TAG_DM &&
+            if (oldTag && oldTag !== DefaultTagID.DM &&
                 hasChangedSubLists
             ) {
                 const promiseToDelete = matrixClient.deleteRoomTag(
                     roomId, oldTag,
-                ).catch(function (err) {
+                ).catch(function(err) {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to remove tag " + oldTag + " from room: " + err);
                     Modal.createTrackedDialog('Failed to remove tag from room', '', ErrorDialog, {
@@ -120,14 +121,14 @@ export default class RoomListActions {
             }
 
             // if we moved lists or the ordering changed, add the new tag
-            if (newTag && newTag !== TAG_DM &&
+            if (newTag && newTag !== DefaultTagID.DM &&
                 (hasChangedSubLists || metaData)
             ) {
                 // metaData is the body of the PUT to set the tag, so it must
                 // at least be an empty object.
                 metaData = metaData || {};
 
-                const promiseToAdd = matrixClient.setRoomTag(roomId, newTag, metaData).catch(function (err) {
+                const promiseToAdd = matrixClient.setRoomTag(roomId, newTag, metaData).catch(function(err) {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to add tag " + newTag + " to room: " + err);
                     Modal.createTrackedDialog('Failed to add tag to room', '', ErrorDialog, {

src/actions/TagOrderActions.ts

@@ -22,7 +22,6 @@ import { AsyncActionPayload } from "../dispatcher/payloads";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 
 export default class TagOrderActions {
-
     /**
      * Creates an action thunk that will do an asynchronous request to
      * move a tag in TagOrderStore to destinationIx.

src/autocomplete/EmojiProvider.tsx

@@ -34,7 +34,8 @@ import EMOTICON_REGEX from 'emojibase-regex/emoticon';
 const LIMIT = 20;
 
 // Match for ascii-style ";-)" emoticons or ":wink:" shortcodes provided by emojibase
-const EMOJI_REGEX = new RegExp('(' + EMOTICON_REGEX.source + '|:[+-\\w]*:?)$', 'g');
+// anchored to only match from the start of parts otherwise it'll show emoji suggestions whilst typing matrix IDs
+const EMOJI_REGEX = new RegExp('(' + EMOTICON_REGEX.source + '|(?:^|\\s):[+-\\w]*:?)$', 'g');
 
 interface IEmojiShort {
     emoji: IEmoji;

src/autocomplete/QueryMatcher.ts

@@ -18,16 +18,15 @@ limitations under the License.
 
 import _at from 'lodash/at';
 import _uniq from 'lodash/uniq';
-
-function stripDiacritics(str: string): string {
-    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-}
+import {removeHiddenChars} from "matrix-js-sdk/src/utils";
 
 interface IOptions<T extends {}> {
     keys: Array<string | keyof T>;
     funcs?: Array<(T) => string>;
     shouldMatchWordsOnly?: boolean;
     shouldMatchPrefix?: boolean;
+    // whether to apply unhomoglyph and strip diacritics to fuzz up the search. Defaults to true
+    fuzzy?: boolean;
 }
 
 /**
@@ -46,14 +45,10 @@ interface IOptions<T extends {}> {
  */
 export default class QueryMatcher<T extends Object> {
     private _options: IOptions<T>;
-    private _keys: IOptions<T>["keys"];
-    private _funcs: Required<IOptions<T>["funcs"]>;
     private _items: Map<string, {object: T, keyWeight: number}[]>;
 
     constructor(objects: T[], options: IOptions<T> = { keys: [] }) {
         this._options = options;
-        this._keys = options.keys;
-        this._funcs = options.funcs || [];
 
         this.setObjects(objects);
 
@@ -78,15 +73,17 @@ export default class QueryMatcher<T extends Object> {
             // type for their values. We assume that those values who's keys have
             // been specified will be string. Also, we cannot infer all the
             // types of the keys of the objects at compile.
-            const keyValues = _at<string>(<any>object, this._keys);
+            const keyValues = _at<string>(<any>object, this._options.keys);
 
-            for (const f of this._funcs) {
-                keyValues.push(f(object));
+            if (this._options.funcs) {
+                for (const f of this._options.funcs) {
+                    keyValues.push(f(object));
+                }
             }
 
             for (const [index, keyValue] of Object.entries(keyValues)) {
                 if (!keyValue) continue; // skip falsy keyValues
-                const key = stripDiacritics(keyValue).toLowerCase();
+                const key = this.processQuery(keyValue);
                 if (!this._items.has(key)) {
                     this._items.set(key, []);
                 }
@@ -99,7 +96,7 @@ export default class QueryMatcher<T extends Object> {
     }
 
     match(query: string): T[] {
-        query = stripDiacritics(query).toLowerCase();
+        query = this.processQuery(query);
         if (this._options.shouldMatchWordsOnly) {
             query = query.replace(/[^\w]/g, '');
         }
@@ -118,7 +115,7 @@ export default class QueryMatcher<T extends Object> {
             const index = resultKey.indexOf(query);
             if (index !== -1 && (!this._options.shouldMatchPrefix || index === 0)) {
                 matches.push(
-                    ...candidates.map((candidate) => ({index, ...candidate}))
+                    ...candidates.map((candidate) => ({index, ...candidate})),
                 );
             }
         }
@@ -142,4 +139,12 @@ export default class QueryMatcher<T extends Object> {
         // Now map the keys to the result objects. Also remove any duplicates.
         return _uniq(matches.map((match) => match.object));
     }
+
+    private processQuery(query: string): string {
+        if (this._options.fuzzy !== false) {
+            // lower case both the input and the output for consistency
+            return removeHiddenChars(query.toLowerCase()).toLowerCase();
+        }
+        return query.toLowerCase();
+    }
 }

src/components/structures/AutoHideScrollbar.js

@@ -38,12 +38,13 @@ export default class AutoHideScrollbar extends React.Component {
 
     render() {
         return (<div
-                    ref={this._collectContainerRef}
-                    style={this.props.style}
-                    className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
-                    onScroll={this.props.onScroll}
-                    onWheel={this.props.onWheel}
-                >
+            ref={this._collectContainerRef}
+            style={this.props.style}
+            className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
+            onScroll={this.props.onScroll}
+            onWheel={this.props.onWheel}
+            tabIndex={this.props.tabIndex}
+        >
             { this.props.children }
         </div>);
     }

src/components/structures/ContextMenu.tsx

@@ -461,6 +461,7 @@ export function createMenu(ElementClass, props) {
 
 // re-export the semantic helper components for simplicity
 export {ContextMenuButton} from "../../accessibility/context_menu/ContextMenuButton";
+export {ContextMenuTooltipButton} from "../../accessibility/context_menu/ContextMenuTooltipButton";
 export {MenuGroup} from "../../accessibility/context_menu/MenuGroup";
 export {MenuItem} from "../../accessibility/context_menu/MenuItem";
 export {MenuItemCheckbox} from "../../accessibility/context_menu/MenuItemCheckbox";

src/components/structures/CustomRoomTagPanel.js

@@ -72,17 +72,17 @@ class CustomRoomTagTile extends React.Component {
         const tag = this.props.tag;
         const avatarHeight = 40;
         const className = classNames({
-            CustomRoomTagPanel_tileSelected: tag.selected,
+            "CustomRoomTagPanel_tileSelected": tag.selected,
         });
         const name = tag.name;
-        const badge = tag.badge;
+        const badgeNotifState = tag.badgeNotifState;
         let badgeElement;
-        if (badge) {
+        if (badgeNotifState) {
             const badgeClasses = classNames({
                 "mx_TagTile_badge": true,
-                "mx_TagTile_badgeHighlight": badge.highlight,
+                "mx_TagTile_badgeHighlight": badgeNotifState.hasMentions,
             });
-            badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
+            badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badgeNotifState.count)}</div>);
         }
 
         return (

src/components/structures/IndicatorScrollbar.js

@@ -192,7 +192,7 @@ export default class IndicatorScrollbar extends React.Component {
             ref={this._collectScrollerComponent}
             wrappedRef={this._collectScroller}
             onWheel={this.onMouseWheel}
-            {... this.props}
+            {...this.props}
         >
             { leftOverflowIndicator }
             { this.props.children }

src/components/structures/LeftPanel.js

@@ -1,305 +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';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Key } from '../../Keyboard';
-import * as sdk from '../../index';
-import dis from '../../dispatcher/dispatcher';
-import * as VectorConferenceHandler from '../../VectorConferenceHandler';
-import SettingsStore from '../../settings/SettingsStore';
-import {_t} from "../../languageHandler";
-import Analytics from "../../Analytics";
-import {Action} from "../../dispatcher/actions";
-
-
-const LeftPanel = createReactClass({
-    displayName: 'LeftPanel',
-
-    // NB. If you add props, don't forget to update
-    // shouldComponentUpdate!
-    propTypes: {
-        collapsed: PropTypes.bool.isRequired,
-    },
-
-    getInitialState: function() {
-        return {
-            searchFilter: '',
-            breadcrumbs: false,
-        };
-    },
-
-    // TODO: [REACT-WARNING] Move this to constructor
-    UNSAFE_componentWillMount: function() {
-        this.focusedElement = null;
-
-        this._breadcrumbsWatcherRef = SettingsStore.watchSetting(
-            "breadcrumbs", null, this._onBreadcrumbsChanged);
-        this._tagPanelWatcherRef = SettingsStore.watchSetting(
-            "TagPanel.enableTagPanel", null, () => this.forceUpdate());
-
-        const useBreadcrumbs = !!SettingsStore.getValue("breadcrumbs");
-        Analytics.setBreadcrumbs(useBreadcrumbs);
-        this.setState({breadcrumbs: useBreadcrumbs});
-    },
-
-    componentWillUnmount: function() {
-        SettingsStore.unwatchSetting(this._breadcrumbsWatcherRef);
-        SettingsStore.unwatchSetting(this._tagPanelWatcherRef);
-    },
-
-    shouldComponentUpdate: function(nextProps, nextState) {
-        // MatrixChat will update whenever the user switches
-        // rooms, but propagating this change all the way down
-        // the react tree is quite slow, so we cut this off
-        // here. The RoomTiles listen for the room change
-        // events themselves to know when to update.
-        // We just need to update if any of these things change.
-        if (
-            this.props.collapsed !== nextProps.collapsed ||
-            this.props.disabled !== nextProps.disabled
-        ) {
-            return true;
-        }
-
-        if (this.state.searchFilter !== nextState.searchFilter) {
-            return true;
-        }
-        if (this.state.searchExpanded !== nextState.searchExpanded) {
-            return true;
-        }
-
-        return false;
-    },
-
-    componentDidUpdate(prevProps, prevState) {
-        if (prevState.breadcrumbs !== this.state.breadcrumbs) {
-            Analytics.setBreadcrumbs(this.state.breadcrumbs);
-        }
-    },
-
-    _onBreadcrumbsChanged: function(settingName, roomId, level, valueAtLevel, value) {
-        // Features are only possible at a single level, so we can get away with using valueAtLevel.
-        // The SettingsStore runs on the same tick as the update, so `value` will be wrong.
-        this.setState({breadcrumbs: valueAtLevel});
-
-        // For some reason the setState doesn't trigger a render of the component, so force one.
-        // Probably has to do with the change happening outside of a change detector cycle.
-        this.forceUpdate();
-    },
-
-    _onFocus: function(ev) {
-        this.focusedElement = ev.target;
-    },
-
-    _onBlur: function(ev) {
-        this.focusedElement = null;
-    },
-
-    _onFilterKeyDown: function(ev) {
-        if (!this.focusedElement) return;
-
-        switch (ev.key) {
-            // On enter of rooms filter select and activate first room if such one exists
-            case Key.ENTER: {
-                const firstRoom = ev.target.closest(".mx_LeftPanel").querySelector(".mx_RoomTile");
-                if (firstRoom) {
-                    firstRoom.click();
-                }
-                break;
-            }
-        }
-    },
-
-    _onKeyDown: function(ev) {
-        if (!this.focusedElement) return;
-
-        switch (ev.key) {
-            case Key.ARROW_UP:
-                this._onMoveFocus(ev, true, true);
-                break;
-            case Key.ARROW_DOWN:
-                this._onMoveFocus(ev, false, true);
-                break;
-        }
-    },
-
-    _onMoveFocus: function(ev, up, trap) {
-        let element = this.focusedElement;
-
-        // unclear why this isn't needed
-        // var descending = (up == this.focusDirection) ? this.focusDescending : !this.focusDescending;
-        // this.focusDirection = up;
-
-        let descending = false; // are we currently descending or ascending through the DOM tree?
-        let classes;
-
-        do {
-            const child = up ? element.lastElementChild : element.firstElementChild;
-            const sibling = up ? element.previousElementSibling : element.nextElementSibling;
-
-            if (descending) {
-                if (child) {
-                    element = child;
-                } else if (sibling) {
-                    element = sibling;
-                } else {
-                    descending = false;
-                    element = element.parentElement;
-                }
-            } else {
-                if (sibling) {
-                    element = sibling;
-                    descending = true;
-                } else {
-                    element = element.parentElement;
-                }
-            }
-
-            if (element) {
-                classes = element.classList;
-            }
-        } while (element && !(
-            classes.contains("mx_RoomTile") ||
-            classes.contains("mx_RoomSubList_label") ||
-            classes.contains("mx_LeftPanel_filterRooms")));
-
-        if (element) {
-            ev.stopPropagation();
-            ev.preventDefault();
-            element.focus();
-            this.focusedElement = element;
-        } else if (trap) {
-            // if navigation is via up/down arrow-keys, trap in the widget so it doesn't send to composer
-            ev.stopPropagation();
-            ev.preventDefault();
-        }
-    },
-
-    onSearch: function(term) {
-        this.setState({ searchFilter: term });
-    },
-
-    onSearchCleared: function(source) {
-        if (source === "keyboard") {
-            dis.fire(Action.FocusComposer);
-        }
-        this.setState({searchExpanded: false});
-    },
-
-    collectRoomList: function(ref) {
-        this._roomList = ref;
-    },
-
-    _onSearchFocus: function() {
-        this.setState({searchExpanded: true});
-    },
-
-    _onSearchBlur: function(event) {
-        if (event.target.value.length === 0) {
-            this.setState({searchExpanded: false});
-        }
-    },
-
-    render: function() {
-        const RoomList = sdk.getComponent('rooms.RoomList');
-        const RoomBreadcrumbs = sdk.getComponent('rooms.RoomBreadcrumbs');
-        const TagPanel = sdk.getComponent('structures.TagPanel');
-        const CustomRoomTagPanel = sdk.getComponent('structures.CustomRoomTagPanel');
-        const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton');
-        const SearchBox = sdk.getComponent('structures.SearchBox');
-        const CallPreview = sdk.getComponent('voip.CallPreview');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
-        const tagPanelEnabled = SettingsStore.getValue("TagPanel.enableTagPanel");
-        let tagPanelContainer;
-
-        const isCustomTagsEnabled = SettingsStore.isFeatureEnabled("feature_custom_tags");
-
-        if (tagPanelEnabled) {
-            tagPanelContainer = (<div className="mx_LeftPanel_tagPanelContainer">
-                <TagPanel />
-                { isCustomTagsEnabled ? <CustomRoomTagPanel /> : undefined }
-            </div>);
-        }
-
-        const containerClasses = classNames(
-            "mx_LeftPanel_container", "mx_fadable",
-            {
-                "collapsed": this.props.collapsed,
-                "mx_LeftPanel_container_hasTagPanel": tagPanelEnabled,
-                "mx_fadable_faded": this.props.disabled,
-            },
-        );
-
-        let exploreButton;
-        if (!this.props.collapsed) {
-            exploreButton = (
-                <div className={classNames("mx_LeftPanel_explore", {"mx_LeftPanel_explore_hidden": this.state.searchExpanded})}>
-                    <AccessibleButton onClick={() => dis.fire(Action.ViewRoomDirectory)}>{_t("Explore")}</AccessibleButton>
-                </div>
-            );
-        }
-
-        const searchBox = (<SearchBox
-            className="mx_LeftPanel_filterRooms"
-            enableRoomSearchFocus={true}
-            blurredPlaceholder={ _t('Filter') }
-            placeholder={ _t('Filter rooms…') }
-            onKeyDown={this._onFilterKeyDown}
-            onSearch={ this.onSearch }
-            onCleared={ this.onSearchCleared }
-            onFocus={this._onSearchFocus}
-            onBlur={this._onSearchBlur}
-            collapsed={this.props.collapsed} />);
-
-        let breadcrumbs;
-        if (this.state.breadcrumbs) {
-            breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
-        }
-
-        const roomList = <RoomList
-            onKeyDown={this._onKeyDown}
-            onFocus={this._onFocus}
-            onBlur={this._onBlur}
-            ref={this.collectRoomList}
-            resizeNotifier={this.props.resizeNotifier}
-            collapsed={this.props.collapsed}
-            searchFilter={this.state.searchFilter}
-            ConferenceHandler={VectorConferenceHandler} />;
-
-        return (
-            <div className={containerClasses}>
-                { tagPanelContainer }
-                <aside className="mx_LeftPanel dark-panel">
-                    <TopLeftMenuButton collapsed={this.props.collapsed} />
-                    { breadcrumbs }
-                    <CallPreview ConferenceHandler={VectorConferenceHandler} />
-                    <div className="mx_LeftPanel_exploreAndFilterRow" onKeyDown={this._onKeyDown} onFocus={this._onFocus} onBlur={this._onBlur}>
-                        { exploreButton }
-                        { searchBox }
-                    </div>
-                    {roomList}
-                </aside>
-            </div>
-        );
-    },
-});
-
-export default LeftPanel;

src/components/structures/LeftPanel.tsx

@@ -17,25 +17,26 @@ limitations under the License.
 import * as React from "react";
 import { createRef } from "react";
 import TagPanel from "./TagPanel";
+import CustomRoomTagPanel from "./CustomRoomTagPanel";
 import classNames from "classnames";
 import dis from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
-import RoomList2 from "../views/rooms/RoomList2";
-import { HEADER_HEIGHT } from "../views/rooms/RoomSublist2";
+import RoomList from "../views/rooms/RoomList";
+import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
 import { Action } from "../../dispatcher/actions";
 import UserMenu from "./UserMenu";
 import RoomSearch from "./RoomSearch";
-import AccessibleButton from "../views/elements/AccessibleButton";
-import RoomBreadcrumbs2 from "../views/rooms/RoomBreadcrumbs2";
+import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
 import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import SettingsStore from "../../settings/SettingsStore";
-import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore2";
+import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
 import {Key} from "../../Keyboard";
 import IndicatorScrollbar from "../structures/IndicatorScrollbar";
-
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
+import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
+import { OwnProfileStore } from "../../stores/OwnProfileStore";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 
 interface IProps {
     isMinimized: boolean;
@@ -43,7 +44,6 @@ interface IProps {
 }
 
 interface IState {
-    searchFilter: string;
     showBreadcrumbs: boolean;
     showTagPanel: boolean;
 }
@@ -52,14 +52,15 @@ interface IState {
 const cssClasses = [
     "mx_RoomSearch_input",
     "mx_RoomSearch_icon", // minimized <RoomSearch />
-    "mx_RoomSublist2_headerText",
-    "mx_RoomTile2",
-    "mx_RoomSublist2_showNButton",
+    "mx_RoomSublist_headerText",
+    "mx_RoomTile",
+    "mx_RoomSublist_showNButton",
 ];
 
-export default class LeftPanel2 extends React.Component<IProps, IState> {
+export default class LeftPanel extends React.Component<IProps, IState> {
     private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
     private tagPanelWatcherRef: string;
+    private bgImageWatcherRef: string;
     private focusedElement = null;
     private isDoingStickyHeaders = false;
 
@@ -67,13 +68,15 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         super(props);
 
         this.state = {
-            searchFilter: "",
             showBreadcrumbs: BreadcrumbsStore.instance.visible,
             showTagPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
         };
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate);
+        this.bgImageWatcherRef = SettingsStore.watchSetting(
+            "RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
         this.tagPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
             this.setState({showTagPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
         });
@@ -85,15 +88,13 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
 
     public componentWillUnmount() {
         SettingsStore.unwatchSetting(this.tagPanelWatcherRef);
+        SettingsStore.unwatchSetting(this.bgImageWatcherRef);
         BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate);
         this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
     }
 
-    private onSearch = (term: string): void => {
-        this.setState({searchFilter: term});
-    };
-
     private onExplore = () => {
         dis.fire(Action.ViewRoomDirectory);
     };
@@ -109,6 +110,20 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         }
     };
 
+    private onBackgroundImageUpdate = () => {
+        // Note: we do this in the LeftPanel as it uses this variable most prominently.
+        const avatarSize = 32; // arbitrary
+        let avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
+        const settingBgMxc = SettingsStore.getValue("RoomList.backgroundImage");
+        if (settingBgMxc) {
+            avatarUrl = MatrixClientPeg.get().mxcUrlToHttp(settingBgMxc, avatarSize, avatarSize);
+        }
+        const avatarUrlProp = `url(${avatarUrl})`;
+        if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
+            document.body.style.setProperty("--avatar-url", avatarUrlProp);
+        }
+    };
+
     private handleStickyHeaders(list: HTMLDivElement) {
         if (this.isDoingStickyHeaders) return;
         this.isDoingStickyHeaders = true;
@@ -121,7 +136,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
     private doStickyHeaders(list: HTMLDivElement) {
         const topEdge = list.scrollTop;
         const bottomEdge = list.offsetHeight + list.scrollTop;
-        const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist2");
+        const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist");
 
         const headerRightMargin = 16; // calculated from margins and widths to align with non-sticky tiles
         const headerStickyWidth = list.clientWidth - headerRightMargin;
@@ -137,7 +152,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         let lastTopHeader;
         let firstBottomHeader;
         for (const sublist of sublists) {
-            const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist2_stickable");
+            const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist_stickable");
             header.style.removeProperty("display"); // always clear display:none first
 
             // When an element is <=40% off screen, make it take over
@@ -173,8 +188,8 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
             }
 
             if (style.stickyTop) {
-                if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
-                    header.classList.add("mx_RoomSublist2_headerContainer_stickyTop");
+                if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) {
+                    header.classList.add("mx_RoomSublist_headerContainer_stickyTop");
                 }
 
                 const newTop = `${list.parentElement.offsetTop}px`;
@@ -182,8 +197,8 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                     header.style.top = newTop;
                 }
             } else {
-                if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
-                    header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop");
+                if (header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) {
+                    header.classList.remove("mx_RoomSublist_headerContainer_stickyTop");
                 }
                 if (header.style.top) {
                     header.style.removeProperty('top');
@@ -191,18 +206,18 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
             }
 
             if (style.stickyBottom) {
-                if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
-                    header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom");
+                if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
+                    header.classList.add("mx_RoomSublist_headerContainer_stickyBottom");
                 }
             } else {
-                if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
-                    header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom");
+                if (header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
+                    header.classList.remove("mx_RoomSublist_headerContainer_stickyBottom");
                 }
             }
 
             if (style.stickyTop || style.stickyBottom) {
-                if (!header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
-                    header.classList.add("mx_RoomSublist2_headerContainer_sticky");
+                if (!header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
+                    header.classList.add("mx_RoomSublist_headerContainer_sticky");
                 }
 
                 const newWidth = `${headerStickyWidth}px`;
@@ -210,8 +225,8 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                     header.style.width = newWidth;
                 }
             } else if (!style.stickyTop && !style.stickyBottom) {
-                if (header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
-                    header.classList.remove("mx_RoomSublist2_headerContainer_sticky");
+                if (header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
+                    header.classList.remove("mx_RoomSublist_headerContainer_sticky");
                 }
                 if (header.style.width) {
                     header.style.removeProperty('width');
@@ -221,16 +236,16 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
 
         // add appropriate sticky classes to wrapper so it has
         // the necessary top/bottom padding to put the sticky header in
-        const listWrapper = list.parentElement; // .mx_LeftPanel2_roomListWrapper
+        const listWrapper = list.parentElement; // .mx_LeftPanel_roomListWrapper
         if (lastTopHeader) {
-            listWrapper.classList.add("mx_LeftPanel2_roomListWrapper_stickyTop");
+            listWrapper.classList.add("mx_LeftPanel_roomListWrapper_stickyTop");
         } else {
-            listWrapper.classList.remove("mx_LeftPanel2_roomListWrapper_stickyTop");
+            listWrapper.classList.remove("mx_LeftPanel_roomListWrapper_stickyTop");
         }
         if (firstBottomHeader) {
-            listWrapper.classList.add("mx_LeftPanel2_roomListWrapper_stickyBottom");
+            listWrapper.classList.add("mx_LeftPanel_roomListWrapper_stickyBottom");
         } else {
-            listWrapper.classList.remove("mx_LeftPanel2_roomListWrapper_stickyBottom");
+            listWrapper.classList.remove("mx_LeftPanel_roomListWrapper_stickyBottom");
         }
     }
 
@@ -266,7 +281,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
     };
 
     private onEnter = () => {
-        const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile2");
+        const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile");
         if (firstRoom) {
             firstRoom.click();
             return true; // to get the field to clear
@@ -314,7 +329,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
 
     private renderHeader(): React.ReactNode {
         return (
-            <div className="mx_LeftPanel2_userHeader">
+            <div className="mx_LeftPanel_userHeader">
                 <UserMenu isMinimized={this.props.isMinimized} />
             </div>
         );
@@ -324,10 +339,13 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         if (this.state.showBreadcrumbs && !this.props.isMinimized) {
             return (
                 <IndicatorScrollbar
-                    className="mx_LeftPanel2_breadcrumbsContainer mx_AutoHideScrollbar"
+                    className="mx_LeftPanel_breadcrumbsContainer mx_AutoHideScrollbar"
                     verticalScrollsHorizontally={true}
+                    // Firefox sometimes makes this element focusable due to
+                    // overflow:scroll;, so force it out of tab order.
+                    tabIndex={-1}
                 >
-                    <RoomBreadcrumbs2 />
+                    <RoomBreadcrumbs />
                 </IndicatorScrollbar>
             );
         }
@@ -336,19 +354,18 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
     private renderSearchExplore(): React.ReactNode {
         return (
             <div
-                className="mx_LeftPanel2_filterContainer"
+                className="mx_LeftPanel_filterContainer"
                 onFocus={this.onFocus}
                 onBlur={this.onBlur}
                 onKeyDown={this.onKeyDown}
             >
                 <RoomSearch
-                    onQueryUpdate={this.onSearch}
                     isMinimized={this.props.isMinimized}
                     onVerticalArrow={this.onKeyDown}
                     onEnter={this.onEnter}
                 />
-                <AccessibleButton
-                    className="mx_LeftPanel2_exploreButton"
+                <AccessibleTooltipButton
+                    className="mx_LeftPanel_exploreButton"
                     onClick={this.onExplore}
                     title={_t("Explore rooms")}
                 />
@@ -358,16 +375,16 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
 
     public render(): React.ReactNode {
         const tagPanel = !this.state.showTagPanel ? null : (
-            <div className="mx_LeftPanel2_tagPanelContainer">
+            <div className="mx_LeftPanel_tagPanelContainer">
                 <TagPanel/>
+                {SettingsStore.isFeatureEnabled("feature_custom_tags") ? <CustomRoomTagPanel /> : null}
             </div>
         );
 
-        const roomList = <RoomList2
+        const roomList = <RoomList
             onKeyDown={this.onKeyDown}
             resizeNotifier={null}
             collapsed={false}
-            searchFilter={this.state.searchFilter}
             onFocus={this.onFocus}
             onBlur={this.onBlur}
             isMinimized={this.props.isMinimized}
@@ -375,24 +392,24 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         />;
 
         const containerClasses = classNames({
-            "mx_LeftPanel2": true,
-            "mx_LeftPanel2_hasTagPanel": !!tagPanel,
-            "mx_LeftPanel2_minimized": this.props.isMinimized,
+            "mx_LeftPanel": true,
+            "mx_LeftPanel_hasTagPanel": !!tagPanel,
+            "mx_LeftPanel_minimized": this.props.isMinimized,
         });
 
         const roomListClasses = classNames(
-            "mx_LeftPanel2_actualRoomListContainer",
+            "mx_LeftPanel_actualRoomListContainer",
             "mx_AutoHideScrollbar",
         );
 
         return (
             <div className={containerClasses}>
                 {tagPanel}
-                <aside className="mx_LeftPanel2_roomListContainer">
+                <aside className="mx_LeftPanel_roomListContainer">
                     {this.renderHeader()}
                     {this.renderSearchExplore()}
                     {this.renderBreadcrumbs()}
-                    <div className="mx_LeftPanel2_roomListWrapper">
+                    <div className="mx_LeftPanel_roomListWrapper">
                         <div
                             className={roomListClasses}
                             onScroll={this.onScroll}

src/components/structures/LoggedInView.tsx

@@ -40,7 +40,6 @@ import * as KeyboardShortcuts from "../../accessibility/KeyboardShortcuts";
 import HomePage from "./HomePage";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PlatformPeg from "../../PlatformPeg";
-import { RoomListStoreTempProxy } from "../../stores/room-list/RoomListStoreTempProxy";
 import { DefaultTagID } from "../../stores/room-list/models";
 import {
     showToast as showSetPasswordToast,
@@ -51,9 +50,10 @@ import {
     hideToast as hideServerLimitToast
 } from "../../toasts/ServerLimitToast";
 import { Action } from "../../dispatcher/actions";
-import LeftPanel2 from "./LeftPanel2";
+import LeftPanel from "./LeftPanel";
 import CallContainer from '../views/voip/CallContainer';
 import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload";
+import RoomListStore from "../../stores/room-list/RoomListStore";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -308,8 +308,8 @@ class LoggedInView extends React.Component<IProps, IState> {
     };
 
     onRoomStateEvents = (ev, state) => {
-        const roomLists = RoomListStoreTempProxy.getRoomLists();
-        if (roomLists[DefaultTagID.ServerNotice] && roomLists[DefaultTagID.ServerNotice].some(r => r.roomId === ev.getRoomId())) {
+        const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
+        if (serverNoticeList && serverNoticeList.some(r => r.roomId === ev.getRoomId())) {
             this._updateServerNoticeEvents();
         }
     };
@@ -328,11 +328,11 @@ class LoggedInView extends React.Component<IProps, IState> {
     }
 
     _updateServerNoticeEvents = async () => {
-        const roomLists = RoomListStoreTempProxy.getRoomLists();
-        if (!roomLists[DefaultTagID.ServerNotice]) return [];
+        const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
+        if (!serverNoticeList) return [];
 
         const events = [];
-        for (const room of roomLists[DefaultTagID.ServerNotice]) {
+        for (const room of serverNoticeList) {
             const pinStateEvent = room.currentState.getStateEvents("m.room.pinned_events", "");
 
             if (!pinStateEvent || !pinStateEvent.getContent().pinned) continue;
@@ -607,7 +607,6 @@ class LoggedInView extends React.Component<IProps, IState> {
     };
 
     render() {
-        const LeftPanel = sdk.getComponent('structures.LeftPanel');
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserView = sdk.getComponent('structures.UserView');
         const GroupView = sdk.getComponent('structures.GroupView');
@@ -661,21 +660,12 @@ class LoggedInView extends React.Component<IProps, IState> {
             bodyClasses += ' mx_MatrixChat_useCompactLayout';
         }
 
-        let leftPanel = (
+        const leftPanel = (
             <LeftPanel
+                isMinimized={this.props.collapseLhs || false}
                 resizeNotifier={this.props.resizeNotifier}
-                collapsed={this.props.collapseLhs || false}
-                disabled={this.props.leftDisabled}
             />
         );
-        if (SettingsStore.getValue("feature_new_room_list")) {
-            leftPanel = (
-                <LeftPanel2
-                    isMinimized={this.props.collapseLhs || false}
-                    resizeNotifier={this.props.resizeNotifier}
-                />
-            );
-        }
 
         return (
             <MatrixClientContext.Provider value={this._matrixClient}>

src/components/structures/MainSplit.js

@@ -16,77 +16,24 @@ limitations under the License.
 */
 
 import React from 'react';
-import ResizeHandle from '../views/elements/ResizeHandle';
-import {Resizer, FixedDistributor} from '../../resizer';
+import { Resizable } from 're-resizable';
 
 export default class MainSplit extends React.Component {
-    constructor(props) {
-        super(props);
-        this._setResizeContainerRef = this._setResizeContainerRef.bind(this);
-        this._onResized = this._onResized.bind(this);
+    _onResized = (event, direction, refToElement, delta) => {
+        window.localStorage.setItem("mx_rhs_size", this._loadSidePanelSize().width + delta.width);
     }
 
-    _onResized(size) {
-        window.localStorage.setItem("mx_rhs_size", size);
-        if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.notifyRightHandleResized();
-        }
-    }
+    _loadSidePanelSize() {
+        let rhsSize = parseInt(window.localStorage.getItem("mx_rhs_size"), 10);
 
-    _createResizer() {
-        const classNames = {
-            handle: "mx_ResizeHandle",
-            vertical: "mx_ResizeHandle_vertical",
-            reverse: "mx_ResizeHandle_reverse",
-        };
-        const resizer = new Resizer(
-            this.resizeContainer,
-            FixedDistributor,
-            {onResized: this._onResized},
-        );
-        resizer.setClassNames(classNames);
-        let rhsSize = window.localStorage.getItem("mx_rhs_size");
-        if (rhsSize !== null) {
-            rhsSize = parseInt(rhsSize, 10);
-        } else {
+        if (isNaN(rhsSize)) {
             rhsSize = 350;
         }
-        resizer.forHandleAt(0).resize(rhsSize);
 
-        resizer.attach();
-        this.resizer = resizer;
-    }
-
-    _setResizeContainerRef(div) {
-        this.resizeContainer = div;
-    }
-
-    componentDidMount() {
-        if (this.props.panel) {
-            this._createResizer();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.resizer) {
-            this.resizer.detach();
-            this.resizer = null;
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const wasPanelSet = this.props.panel && !prevProps.panel;
-        const wasPanelCleared = !this.props.panel && prevProps.panel;
-
-        if (this.resizeContainer && wasPanelSet) {
-            // The resizer can only be created when **both** expanded and the panel is
-            // set. Once both are true, the container ref will mount, which is required
-            // for the resizer to work.
-            this._createResizer();
-        } else if (this.resizer && wasPanelCleared) {
-            this.resizer.detach();
-            this.resizer = null;
-        }
+        return {
+            height: "100%",
+            width: rhsSize,
+        };
     }
 
     render() {
@@ -97,13 +44,29 @@ export default class MainSplit extends React.Component {
 
         let children;
         if (hasResizer) {
-            children = <React.Fragment>
-                <ResizeHandle reverse={true} />
+            children = <Resizable
+                defaultSize={this._loadSidePanelSize()}
+                minWidth={264}
+                maxWidth="50%"
+                enable={{
+                    top: false,
+                    right: false,
+                    bottom: false,
+                    left: true,
+                    topRight: false,
+                    bottomRight: false,
+                    bottomLeft: false,
+                    topLeft: false,
+                }}
+                onResizeStop={this._onResized}
+                className="mx_RightPanel_ResizeWrapper"
+                handleClasses={{left: "mx_RightPanel_ResizeHandle"}}
+            >
                 { panelView }
-            </React.Fragment>;
+            </Resizable>;
         }
 
-        return <div className="mx_MainSplit" ref={hasResizer ? this._setResizeContainerRef : undefined}>
+        return <div className="mx_MainSplit">
             { bodyView }
             { children }
         </div>;

src/components/structures/MatrixChat.tsx

@@ -58,7 +58,6 @@ import { messageForSyncError } from '../../utils/ErrorUtils';
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../utils/AutoDiscoveryUtils";
 import DMRoomMap from '../../utils/DMRoomMap';
-import { countRoomsWithNotif } from '../../RoomNotifs';
 import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
 import { FontWatcher } from '../../settings/watchers/FontWatcher';
 import { storeRoomAliasInCache } from '../../RoomAliasCache';
@@ -75,6 +74,7 @@ import {
 import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast";
 import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
 import ErrorDialog from "../views/dialogs/ErrorDialog";
+import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -1844,21 +1844,20 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     }
 
     updateStatusIndicator(state: string, prevState: string) {
-        // only count visible rooms to not torment the user with notification counts in rooms they can't see
-        // it will include highlights from the previous version of the room internally
-        const notifCount = countRoomsWithNotif(MatrixClientPeg.get().getVisibleRooms()).count;
+        const notificationState = RoomNotificationStateStore.instance.globalState;
+        const numUnreadRooms = notificationState.numUnreadStates; // we know that states === rooms here
 
         if (PlatformPeg.get()) {
             PlatformPeg.get().setErrorStatus(state === 'ERROR');
-            PlatformPeg.get().setNotificationCount(notifCount);
+            PlatformPeg.get().setNotificationCount(numUnreadRooms);
         }
 
         this.subTitleStatus = '';
         if (state === "ERROR") {
             this.subTitleStatus += `[${_t("Offline")}] `;
         }
-        if (notifCount > 0) {
-            this.subTitleStatus += `[${notifCount}]`;
+        if (numUnreadRooms > 0) {
+            this.subTitleStatus += `[${numUnreadRooms}]`;
         }
 
         this.setPageSubtitle();

src/components/structures/MessagePanel.js

@@ -346,9 +346,9 @@ export default class MessagePanel extends React.Component {
         }
     }
 
-    _isUnmounting() {
+    _isUnmounting = () => {
         return !this._isMounted;
-    }
+    };
 
     // TODO: Implement granular (per-room) hide options
     _shouldShowEvent(mxEv) {
@@ -571,12 +571,10 @@ export default class MessagePanel extends React.Component {
 
         const readReceipts = this._readReceiptsByEvent[eventId];
 
-        // Dev note: `this._isUnmounting.bind(this)` is important - it ensures that
-        // the function is run in the context of this class and not EventTile, therefore
-        // ensuring the right `this._mounted` variable is used by read receipts (which
-        // don't update their position if we, the MessagePanel, is unmounting).
+        // use txnId as key if available so that we don't remount during sending
         ret.push(
-            <li key={eventId}
+            <li
+                key={mxEv.getTxnId() || eventId}
                 ref={this._collectEventNode.bind(this, eventId)}
                 data-scroll-tokens={scrollToken}
             >
@@ -590,7 +588,7 @@ export default class MessagePanel extends React.Component {
                         readReceipts={readReceipts}
                         readReceiptMap={this._readReceiptMap}
                         showUrlPreview={this.props.showUrlPreview}
-                        checkUnmounting={this._isUnmounting.bind(this)}
+                        checkUnmounting={this._isUnmounting}
                         eventSendStatus={mxEv.getAssociatedStatus()}
                         tileShape={this.props.tileShape}
                         isTwelveHour={this.props.isTwelveHour}

src/components/structures/RoomSearch.tsx

@@ -24,9 +24,10 @@ import { throttle } from 'lodash';
 import { Key } from "../../Keyboard";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import { Action } from "../../dispatcher/actions";
+import RoomListStore from "../../stores/room-list/RoomListStore";
+import { NameFilterCondition } from "../../stores/room-list/filters/NameFilterCondition";
 
 interface IProps {
-    onQueryUpdate: (newQuery: string) => void;
     isMinimized: boolean;
     onVerticalArrow(ev: React.KeyboardEvent): void;
     onEnter(ev: React.KeyboardEvent): boolean;
@@ -40,6 +41,7 @@ interface IState {
 export default class RoomSearch extends React.PureComponent<IProps, IState> {
     private dispatcherRef: string;
     private inputRef: React.RefObject<HTMLInputElement> = createRef();
+    private searchFilter: NameFilterCondition = new NameFilterCondition();
 
     constructor(props: IProps) {
         super(props);
@@ -52,6 +54,21 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
     }
 
+    public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>): void {
+        if (prevState.query !== this.state.query) {
+            const hadSearch = !!this.searchFilter.search.trim();
+            const haveSearch = !!this.state.query.trim();
+            this.searchFilter.search = this.state.query;
+            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 componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
     }
@@ -78,19 +95,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     private onChange = () => {
         if (!this.inputRef.current) return;
         this.setState({query: this.inputRef.current.value});
-        this.onSearchUpdated();
     };
 
-    // it wants this at the top of the file, but we know better
-    // tslint:disable-next-line
-    private onSearchUpdated = throttle(
-        () => {
-            // We can't use the state variable because it can lag behind the input.
-            // The lag is most obvious when deleting/clearing text with the keyboard.
-            this.props.onQueryUpdate(this.inputRef.current.value);
-        }, 200, {trailing: true, leading: true},
-    );
-
     private onFocus = (ev: React.FocusEvent<HTMLInputElement>) => {
         this.setState({focused: true});
         ev.target.select();

src/components/structures/RoomSubList.js

@@ -1,496 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2018, 2019 New Vector 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, {createRef} from 'react';
-import classNames from 'classnames';
-import * as sdk from '../../index';
-import dis from '../../dispatcher/dispatcher';
-import * as Unread from '../../Unread';
-import * as RoomNotifs from '../../RoomNotifs';
-import * as FormattingUtils from '../../utils/FormattingUtils';
-import IndicatorScrollbar from './IndicatorScrollbar';
-import {Key} from '../../Keyboard';
-import { Group } from 'matrix-js-sdk';
-import PropTypes from 'prop-types';
-import RoomTile from "../views/rooms/RoomTile";
-import LazyRenderList from "../views/elements/LazyRenderList";
-import {_t} from "../../languageHandler";
-import {RovingTabIndexWrapper} from "../../accessibility/RovingTabIndex";
-import {toPx} from "../../utils/units";
-
-// turn this on for drop & drag console debugging galore
-const debug = false;
-
-class RoomTileErrorBoundary extends React.PureComponent {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            error: null,
-        };
-    }
-
-    static getDerivedStateFromError(error) {
-        // Side effects are not permitted here, so we only update the state so
-        // that the next render shows an error message.
-        return { error };
-    }
-
-    componentDidCatch(error, { componentStack }) {
-        // Browser consoles are better at formatting output when native errors are passed
-        // in their own `console.error` invocation.
-        console.error(error);
-        console.error(
-            "The above error occured while React was rendering the following components:",
-            componentStack,
-        );
-    }
-
-    render() {
-        if (this.state.error) {
-            return (<div className="mx_RoomTile mx_RoomTileError">
-                {this.props.roomId}
-            </div>);
-        } else {
-            return this.props.children;
-        }
-    }
-}
-
-export default class RoomSubList extends React.PureComponent {
-    static displayName = 'RoomSubList';
-    static debug = debug;
-
-    static propTypes = {
-        list: PropTypes.arrayOf(PropTypes.object).isRequired,
-        label: PropTypes.string.isRequired,
-        tagName: PropTypes.string,
-        addRoomLabel: PropTypes.string,
-
-        // passed through to RoomTile and used to highlight room with `!` regardless of notifications count
-        isInvite: PropTypes.bool,
-
-        startAsHidden: PropTypes.bool,
-        showSpinner: PropTypes.bool, // true to show a spinner if 0 elements when expanded
-        collapsed: PropTypes.bool.isRequired, // is LeftPanel collapsed?
-        onHeaderClick: PropTypes.func,
-        incomingCall: PropTypes.object,
-        extraTiles: PropTypes.arrayOf(PropTypes.node), // extra elements added beneath tiles
-        forceExpand: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        onHeaderClick: function() {
-        }, // NOP
-        extraTiles: [],
-        isInvite: false,
-    };
-
-    static getDerivedStateFromProps(props, state) {
-        return {
-            listLength: props.list.length,
-            scrollTop: props.list.length === state.listLength ? state.scrollTop : 0,
-        };
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            hidden: this.props.startAsHidden || false,
-            // some values to get LazyRenderList starting
-            scrollerHeight: 800,
-            scrollTop: 0,
-            // React 16's getDerivedStateFromProps(props, state) doesn't give the previous props so
-            // we have to store the length of the list here so we can see if it's changed or not...
-            listLength: null,
-        };
-
-        this._header = createRef();
-        this._subList = createRef();
-        this._scroller = createRef();
-        this._headerButton = createRef();
-    }
-
-    componentDidMount() {
-        this.dispatcherRef = dis.register(this.onAction);
-    }
-
-    componentWillUnmount() {
-        dis.unregister(this.dispatcherRef);
-    }
-
-    // The header is collapsible if it is hidden or not stuck
-    // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
-    isCollapsibleOnClick() {
-        const stuck = this._header.current.dataset.stuck;
-        if (!this.props.forceExpand && (this.state.hidden || stuck === undefined || stuck === "none")) {
-            return true;
-        } else {
-            return false;
-        }
-    }
-
-    onAction = (payload) => {
-        switch (payload.action) {
-            case 'on_room_read':
-                // XXX: Previously RoomList would forceUpdate whenever on_room_read is dispatched,
-                // but this is no longer true, so we must do it here (and can apply the small
-                // optimisation of checking that we care about the room being read).
-                //
-                // Ultimately we need to transition to a state pushing flow where something
-                // explicitly notifies the components concerned that the notif count for a room
-                // has change (e.g. a Flux store).
-                if (this.props.list.some((r) => r.roomId === payload.roomId)) {
-                    this.forceUpdate();
-                }
-                break;
-
-            case 'view_room':
-                if (this.state.hidden && !this.props.forceExpand && payload.show_room_tile &&
-                    this.props.list.some((r) => r.roomId === payload.room_id)
-                ) {
-                    this.toggle();
-                }
-        }
-    };
-
-    toggle = () => {
-        if (this.isCollapsibleOnClick()) {
-            // The header isCollapsible, so the click is to be interpreted as collapse and truncation logic
-            const isHidden = !this.state.hidden;
-            this.setState({hidden: isHidden}, () => {
-                this.props.onHeaderClick(isHidden);
-            });
-        } else {
-            // The header is stuck, so the click is to be interpreted as a scroll to the header
-            this.props.onHeaderClick(this.state.hidden, this._header.current.dataset.originalPosition);
-        }
-    };
-
-    onClick = (ev) => {
-        this.toggle();
-    };
-
-    onHeaderKeyDown = (ev) => {
-        switch (ev.key) {
-            case Key.ARROW_LEFT:
-                // On ARROW_LEFT collapse the room sublist
-                if (!this.state.hidden && !this.props.forceExpand) {
-                    this.onClick();
-                }
-                ev.stopPropagation();
-                break;
-            case Key.ARROW_RIGHT: {
-                ev.stopPropagation();
-                if (this.state.hidden && !this.props.forceExpand) {
-                    // sublist is collapsed, expand it
-                    this.onClick();
-                } else if (!this.props.forceExpand) {
-                    // sublist is expanded, go to first room
-                    const element = this._subList.current && this._subList.current.querySelector(".mx_RoomTile");
-                    if (element) {
-                        element.focus();
-                    }
-                }
-                break;
-            }
-        }
-    };
-
-    onKeyDown = (ev) => {
-        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();
-        }
-    };
-
-    onRoomTileClick = (roomId, ev) => {
-        dis.dispatch({
-            action: 'view_room',
-            show_room_tile: true, // to make sure the room gets scrolled into view
-            room_id: roomId,
-            clear_search: (ev && (ev.key === Key.ENTER || ev.key === Key.SPACE)),
-        });
-    };
-
-    _updateSubListCount = () => {
-        // Force an update by setting the state to the current state
-        // Doing it this way rather than using forceUpdate(), so that the shouldComponentUpdate()
-        // method is honoured
-        this.setState(this.state);
-    };
-
-    makeRoomTile = (room) => {
-        return <RoomTileErrorBoundary roomId={room.roomId}><RoomTile
-            room={room}
-            roomSubList={this}
-            tagName={this.props.tagName}
-            key={room.roomId}
-            collapsed={this.props.collapsed || false}
-            unread={Unread.doesRoomHaveUnreadMessages(room)}
-            highlight={this.props.isInvite || RoomNotifs.getUnreadNotificationCount(room, 'highlight') > 0}
-            notificationCount={RoomNotifs.getUnreadNotificationCount(room)}
-            isInvite={this.props.isInvite}
-            refreshSubList={this._updateSubListCount}
-            incomingCall={null}
-            onClick={this.onRoomTileClick}
-        /></RoomTileErrorBoundary>;
-    };
-
-    _onNotifBadgeClick = (e) => {
-        // prevent the roomsublist collapsing
-        e.preventDefault();
-        e.stopPropagation();
-        const room = this.props.list.find(room => RoomNotifs.getRoomHasBadge(room));
-        if (room) {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: room.roomId,
-            });
-        }
-    };
-
-    _onInviteBadgeClick = (e) => {
-        // prevent the roomsublist collapsing
-        e.preventDefault();
-        e.stopPropagation();
-        // switch to first room in sortedList as that'll be the top of the list for the user
-        if (this.props.list && this.props.list.length > 0) {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: this.props.list[0].roomId,
-            });
-        } else if (this.props.extraTiles && this.props.extraTiles.length > 0) {
-            // Group Invites are different in that they are all extra tiles and not rooms
-            // XXX: this is a horrible special case because Group Invite sublist is a hack
-            if (this.props.extraTiles[0].props && this.props.extraTiles[0].props.group instanceof Group) {
-                dis.dispatch({
-                    action: 'view_group',
-                    group_id: this.props.extraTiles[0].props.group.groupId,
-                });
-            }
-        }
-    };
-
-    onAddRoom = (e) => {
-        e.stopPropagation();
-        if (this.props.onAddRoom) this.props.onAddRoom();
-    };
-
-    _getHeaderJsx(isCollapsed) {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const AccessibleTooltipButton = sdk.getComponent('elements.AccessibleTooltipButton');
-        const subListNotifications = !this.props.isInvite ?
-            RoomNotifs.aggregateNotificationCount(this.props.list) :
-            {count: 0, highlight: true};
-        const subListNotifCount = subListNotifications.count;
-        const subListNotifHighlight = subListNotifications.highlight;
-
-        // When collapsed, allow a long hover on the header to show user
-        // the full tag name and room count
-        let title;
-        if (this.props.collapsed) {
-            title = this.props.label;
-        }
-
-        let incomingCall;
-        if (this.props.incomingCall) {
-            // We can assume that if we have an incoming call then it is for this list
-            const IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
-            incomingCall =
-                <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={this.props.incomingCall} />;
-        }
-
-        const len = this.props.list.length + this.props.extraTiles.length;
-        let chevron;
-        if (len) {
-            const chevronClasses = classNames({
-                'mx_RoomSubList_chevron': true,
-                'mx_RoomSubList_chevronRight': isCollapsed,
-                'mx_RoomSubList_chevronDown': !isCollapsed,
-            });
-            chevron = (<div className={chevronClasses} />);
-        }
-
-        return <RovingTabIndexWrapper inputRef={this._headerButton}>
-            {({onFocus, isActive, ref}) => {
-                const tabIndex = isActive ? 0 : -1;
-
-                let badge;
-                if (!this.props.collapsed) {
-                    const badgeClasses = classNames({
-                        'mx_RoomSubList_badge': true,
-                        'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
-                    });
-                    // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
-                    if (subListNotifCount > 0) {
-                        badge = (
-                            <AccessibleButton
-                                tabIndex={tabIndex}
-                                className={badgeClasses}
-                                onClick={this._onNotifBadgeClick}
-                                aria-label={_t("Jump to first unread room.")}
-                            >
-                                <div>
-                                    { FormattingUtils.formatCount(subListNotifCount) }
-                                </div>
-                            </AccessibleButton>
-                        );
-                    } else if (this.props.isInvite && this.props.list.length) {
-                        // no notifications but highlight anyway because this is an invite badge
-                        badge = (
-                            <AccessibleButton
-                                tabIndex={tabIndex}
-                                className={badgeClasses}
-                                onClick={this._onInviteBadgeClick}
-                                aria-label={_t("Jump to first invite.")}
-                            >
-                                <div>
-                                    { this.props.list.length }
-                                </div>
-                            </AccessibleButton>
-                        );
-                    }
-                }
-
-                let addRoomButton;
-                if (this.props.onAddRoom) {
-                    addRoomButton = (
-                        <AccessibleTooltipButton
-                            tabIndex={tabIndex}
-                            onClick={this.onAddRoom}
-                            className="mx_RoomSubList_addRoom"
-                            title={this.props.addRoomLabel || _t("Add room")}
-                        />
-                    );
-                }
-
-                return (
-                    <div className="mx_RoomSubList_labelContainer" title={title} ref={this._header} onKeyDown={this.onHeaderKeyDown}>
-                        <AccessibleButton
-                            onFocus={onFocus}
-                            tabIndex={tabIndex}
-                            inputRef={ref}
-                            onClick={this.onClick}
-                            className="mx_RoomSubList_label"
-                            aria-expanded={!isCollapsed}
-                            role="treeitem"
-                            aria-level="1"
-                        >
-                            { chevron }
-                            <span>{this.props.label}</span>
-                            { incomingCall }
-                        </AccessibleButton>
-                        { badge }
-                        { addRoomButton }
-                    </div>
-                );
-            } }
-        </RovingTabIndexWrapper>;
-    }
-
-    checkOverflow = () => {
-        if (this._scroller.current) {
-            this._scroller.current.checkOverflow();
-        }
-    };
-
-    setHeight = (height) => {
-        if (this._subList.current) {
-            this._subList.current.style.height = toPx(height);
-        }
-        this._updateLazyRenderHeight(height);
-    };
-
-    _updateLazyRenderHeight(height) {
-        this.setState({scrollerHeight: height});
-    }
-
-    _onScroll = () => {
-        this.setState({scrollTop: this._scroller.current.getScrollTop()});
-    };
-
-    _canUseLazyListRendering() {
-        // for now disable lazy rendering as they are already rendered tiles
-        // not rooms like props.list we pass to LazyRenderList
-        return !this.props.extraTiles || !this.props.extraTiles.length;
-    }
-
-    render() {
-        const len = this.props.list.length + this.props.extraTiles.length;
-        const isCollapsed = this.state.hidden && !this.props.forceExpand;
-
-        const subListClasses = classNames({
-            "mx_RoomSubList": true,
-            "mx_RoomSubList_hidden": len && isCollapsed,
-            "mx_RoomSubList_nonEmpty": len && !isCollapsed,
-        });
-
-        let content;
-        if (len) {
-            if (isCollapsed) {
-                // no body
-            } else if (this._canUseLazyListRendering()) {
-                content = (
-                    <IndicatorScrollbar ref={this._scroller} className="mx_RoomSubList_scroll" onScroll={this._onScroll}>
-                        <LazyRenderList
-                            scrollTop={this.state.scrollTop }
-                            height={ this.state.scrollerHeight }
-                            renderItem={ this.makeRoomTile }
-                            itemHeight={34}
-                            items={ this.props.list } />
-                    </IndicatorScrollbar>
-                );
-            } else {
-                const roomTiles = this.props.list.map(r => this.makeRoomTile(r));
-                const tiles = roomTiles.concat(this.props.extraTiles);
-                content = (
-                    <IndicatorScrollbar ref={this._scroller} className="mx_RoomSubList_scroll" onScroll={this._onScroll}>
-                        { tiles }
-                    </IndicatorScrollbar>
-                );
-            }
-        } else {
-            if (this.props.showSpinner && !isCollapsed) {
-                const Loader = sdk.getComponent("elements.Spinner");
-                content = <Loader />;
-            }
-        }
-
-        return (
-            <div
-                ref={this._subList}
-                className={subListClasses}
-                role="group"
-                aria-label={this.props.label}
-                onKeyDown={this.onKeyDown}
-            >
-                { this._getHeaderJsx(isCollapsed) }
-                { content }
-            </div>
-        );
-    }
-}

src/components/structures/ScrollPanel.js

@@ -648,7 +648,9 @@ export default createReactClass({
 
         if (scrollState.stuckAtBottom) {
             const sn = this._getScrollNode();
-            sn.scrollTop = sn.scrollHeight;
+            if (sn.scrollTop !== sn.scrollHeight) {
+                sn.scrollTop = sn.scrollHeight;
+            }
         } else if (scrollState.trackedScrollToken) {
             const itemlist = this._itemlist.current;
             const trackedNode = this._getTrackedNode();
@@ -657,7 +659,10 @@ export default createReactClass({
                 const bottomDiff = newBottomOffset - scrollState.bottomOffset;
                 this._bottomGrowth += bottomDiff;
                 scrollState.bottomOffset = newBottomOffset;
-                itemlist.style.height = `${this._getListHeight()}px`;
+                const newHeight = `${this._getListHeight()}px`;
+                if (itemlist.style.height !== newHeight) {
+                    itemlist.style.height = newHeight;
+                }
                 debuglog("balancing height because messages below viewport grew by", bottomDiff);
             }
         }
@@ -694,12 +699,16 @@ export default createReactClass({
         const height = Math.max(minHeight, contentHeight);
         this._pages = Math.ceil(height / PAGE_SIZE);
         this._bottomGrowth = 0;
-        const newHeight = this._getListHeight();
+        const newHeight = `${this._getListHeight()}px`;
 
         const scrollState = this.scrollState;
         if (scrollState.stuckAtBottom) {
-            itemlist.style.height = `${newHeight}px`;
-            sn.scrollTop = sn.scrollHeight;
+            if (itemlist.style.height !== newHeight) {
+                itemlist.style.height = newHeight;
+            }
+            if (sn.scrollTop !== sn.scrollHeight){
+                sn.scrollTop = sn.scrollHeight;
+            }
             debuglog("updateHeight to", newHeight);
         } else if (scrollState.trackedScrollToken) {
             const trackedNode = this._getTrackedNode();
@@ -709,7 +718,9 @@ export default createReactClass({
             // the currently filled piece of the timeline
             if (trackedNode) {
                 const oldTop = trackedNode.offsetTop;
-                itemlist.style.height = `${newHeight}px`;
+                if (itemlist.style.height !== newHeight) {
+                    itemlist.style.height = newHeight;
+                }
                 const newTop = trackedNode.offsetTop;
                 const topDiff = newTop - oldTop;
                 // important to scroll by a relative amount as

src/components/structures/TopLeftMenuButton.js

@@ -1,158 +0,0 @@
-/*
-Copyright 2018 New Vector 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 PropTypes from 'prop-types';
-import TopLeftMenu from '../views/context_menus/TopLeftMenu';
-import BaseAvatar from '../views/avatars/BaseAvatar';
-import {MatrixClientPeg} from '../../MatrixClientPeg';
-import * as Avatar from '../../Avatar';
-import { _t } from '../../languageHandler';
-import dis from "../../dispatcher/dispatcher";
-import {ContextMenu, ContextMenuButton} from "./ContextMenu";
-import {Action} from "../../dispatcher/actions";
-
-const AVATAR_SIZE = 28;
-
-export default class TopLeftMenuButton extends React.Component {
-    static propTypes = {
-        collapsed: PropTypes.bool.isRequired,
-    };
-
-    static displayName = 'TopLeftMenuButton';
-
-    constructor() {
-        super();
-        this.state = {
-            menuDisplayed: false,
-            profileInfo: null,
-        };
-    }
-
-    async _getProfileInfo() {
-        const cli = MatrixClientPeg.get();
-        const userId = cli.getUserId();
-        const profileInfo = await cli.getProfileInfo(userId);
-        const avatarUrl = Avatar.avatarUrlForUser(
-            {avatarUrl: profileInfo.avatar_url},
-            AVATAR_SIZE, AVATAR_SIZE, "crop");
-
-        return {
-            userId,
-            name: profileInfo.displayname,
-            avatarUrl,
-        };
-    }
-
-    async componentDidMount() {
-        this._dispatcherRef = dis.register(this.onAction);
-
-        try {
-            const profileInfo = await this._getProfileInfo();
-            this.setState({profileInfo});
-        } catch (ex) {
-            console.log("could not fetch profile");
-            console.error(ex);
-        }
-    }
-
-    componentWillUnmount() {
-        dis.unregister(this._dispatcherRef);
-    }
-
-    onAction = (payload) => {
-        // For accessibility
-        if (payload.action === Action.ToggleUserMenu) {
-            if (this._buttonRef) this._buttonRef.click();
-        }
-    };
-
-    _getDisplayName() {
-        if (MatrixClientPeg.get().isGuest()) {
-            return _t("Guest");
-        } else if (this.state.profileInfo) {
-            return this.state.profileInfo.name;
-        } else {
-            return MatrixClientPeg.get().getUserId();
-        }
-    }
-
-    openMenu = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.setState({ menuDisplayed: true });
-    };
-
-    closeMenu = () => {
-        this.setState({
-            menuDisplayed: false,
-        });
-    };
-
-    render() {
-        const cli = MatrixClientPeg.get().getUserId();
-
-        const name = this._getDisplayName();
-        let nameElement;
-        let chevronElement;
-        if (!this.props.collapsed) {
-            nameElement = <div className="mx_TopLeftMenuButton_name">
-                { name }
-            </div>;
-            chevronElement = <span className="mx_TopLeftMenuButton_chevron" />;
-        }
-
-        let contextMenu;
-        if (this.state.menuDisplayed) {
-            const elementRect = this._buttonRef.getBoundingClientRect();
-
-            contextMenu = (
-                <ContextMenu
-                    chevronFace="none"
-                    left={elementRect.left}
-                    top={elementRect.top + elementRect.height}
-                    onFinished={this.closeMenu}
-                >
-                    <TopLeftMenu displayName={name} userId={cli} onFinished={this.closeMenu} />
-                </ContextMenu>
-            );
-        }
-
-        return <React.Fragment>
-            <ContextMenuButton
-                className="mx_TopLeftMenuButton"
-                onClick={this.openMenu}
-                inputRef={(r) => this._buttonRef = r}
-                label={_t("Your profile")}
-                isExpanded={this.state.menuDisplayed}
-            >
-                <BaseAvatar
-                    idName={MatrixClientPeg.get().getUserId()}
-                    name={name}
-                    url={this.state.profileInfo && this.state.profileInfo.avatarUrl}
-                    width={AVATAR_SIZE}
-                    height={AVATAR_SIZE}
-                    resizeMethod="crop"
-                />
-                { nameElement }
-                { chevronElement }
-            </ContextMenuButton>
-
-            { contextMenu }
-        </React.Fragment>;
-    }
-}

src/components/structures/UserMenu.tsx

@@ -306,9 +306,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
 
     public render() {
         const avatarSize = 32; // should match border-radius of the avatar
-        const {body} = document;
-        const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
-        body.style.setProperty("--avatar-url", `url('${avatarUrl}')`);
 
         let name = <span className="mx_UserMenu_userName">{OwnProfileStore.instance.displayName}</span>;
         let buttons = (

src/components/views/avatars/BaseAvatar.tsx

@@ -134,7 +134,7 @@ const BaseAvatar = (props: IProps) => {
                 aria-hidden="true" />
         );
 
-        if (onClick !== null) {
+        if (onClick) {
             return (
                 <AccessibleButton
                     {...otherProps}
@@ -162,7 +162,7 @@ const BaseAvatar = (props: IProps) => {
         }
     }
 
-    if (onClick !== null) {
+    if (onClick) {
         return (
             <AccessibleButton
                 className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
@@ -196,4 +196,4 @@ const BaseAvatar = (props: IProps) => {
 };
 
 export default BaseAvatar;
-export type BaseAvatarType = React.FC<IProps>;
+export type BaseAvatarType = React.FC<IProps>;

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -44,7 +44,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         super(props);
 
         this.state = {
-            notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room, this.props.tag),
+            notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room),
         };
     }
 

src/components/views/create_room/CreateRoomButton.js

@@ -1,44 +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 PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
-    displayName: 'CreateRoomButton',
-    propTypes: {
-        onCreateRoom: PropTypes.func,
-    },
-
-    getDefaultProps: function() {
-        return {
-            onCreateRoom: function() {},
-        };
-    },
-
-    onClick: function() {
-        this.props.onCreateRoom();
-    },
-
-    render: function() {
-        return (
-            <button className="mx_CreateRoomButton" onClick={this.onClick}>{ _t("Create Room") }</button>
-        );
-    },
-});

src/components/views/dialogs/DevtoolsDialog.js

@@ -416,7 +416,7 @@ class RoomStateExplorer extends React.PureComponent {
                 {
                     Array.from(this.roomStateEvents.entries()).map(([eventType, allStateKeys]) => {
                         let onClickFn;
-                        if (allStateKeys.size() === 1 && allStateKeys.has("")) {
+                        if (allStateKeys.size === 1 && allStateKeys.has("")) {
                             onClickFn = this.onViewSourceClick(allStateKeys.get(""));
                         } else {
                             onClickFn = this.browseEventType(eventType);

src/components/views/dialogs/InviteDialog.js

@@ -35,8 +35,11 @@ import createRoom, {canEncryptToAllUsers, privateShouldBeEncrypted} from "../../
 import {inviteMultipleToRoom} from "../../../RoomInvite";
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
-import {RoomListStoreTempProxy} from "../../../stores/room-list/RoomListStoreTempProxy";
 import {DefaultTagID} from "../../../stores/room-list/models";
+import RoomListStore from "../../../stores/room-list/RoomListStore";
+
+// we have a number of types defined from the Matrix spec which can't reasonably be altered here.
+/* eslint-disable camelcase */
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
@@ -346,8 +349,7 @@ export default class InviteDialog extends React.PureComponent {
 
         // Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the
         // room list doesn't tag the room for the DMRoomMap, but does for the room list.
-        const taggedRooms = RoomListStoreTempProxy.getRoomLists();
-        const dmTaggedRooms = taggedRooms[DefaultTagID.DM];
+        const dmTaggedRooms = RoomListStore.instance.orderedLists[DefaultTagID.DM];
         const myUserId = MatrixClientPeg.get().getUserId();
         for (const dmRoom of dmTaggedRooms) {
             const otherMembers = dmRoom.getJoinedMembers().filter(u => u.userId !== myUserId);

src/components/views/elements/AccessibleButton.tsx

@@ -27,7 +27,7 @@ export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Elemen
  * onClick:  (required) Event handler for button activation. Should be
  *           implemented exactly like a normal onClick handler.
  */
-export interface IProps extends React.InputHTMLAttributes<Element> {
+interface IProps extends React.InputHTMLAttributes<Element> {
     inputRef?: React.Ref<Element>;
     element?: string;
     // The kind of button, similar to how Bootstrap works.
@@ -118,7 +118,7 @@ export default function AccessibleButton({
 AccessibleButton.defaultProps = {
     element: 'div',
     role: 'button',
-    tabIndex: "0",
+    tabIndex: 0,
 };
 
 AccessibleButton.displayName = "AccessibleButton";

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -19,10 +19,9 @@ import React from 'react';
 import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
-import {IProps} from "./AccessibleButton";
 import Tooltip from './Tooltip';
 
-interface ITooltipProps extends IProps {
+interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
     title: string;
     tooltip?: React.ReactNode;
     tooltipClassName?: string;
@@ -46,7 +45,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
         });
     };
 
-    onMouseOut = () => {
+    onMouseLeave = () => {
         this.setState({
             hover: false,
         });
@@ -61,7 +60,12 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
             label={tooltip || title}
         /> : <div />;
         return (
-            <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} aria-label={title}>
+            <AccessibleButton
+                {...props}
+                onMouseOver={this.onMouseOver}
+                onMouseLeave={this.onMouseLeave}
+                aria-label={title}
+            >
                 { children }
                 { tip }
             </AccessibleButton>

src/components/views/elements/AppTile.js

@@ -704,6 +704,7 @@ export default class AppTile extends React.Component {
 
     _onReloadWidgetClick() {
         // Reload iframe in this way to avoid cross-origin restrictions
+        // eslint-disable-next-line no-self-assign
         this._appFrame.current.src = this._appFrame.current.src;
     }
 

src/components/views/elements/CreateRoomButton.js

@@ -1,40 +0,0 @@
-/*
-Copyright 2017 Vector Creations 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 from 'react';
-import * as sdk from '../../../index';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-
-const CreateRoomButton = function(props) {
-    const ActionButton = sdk.getComponent('elements.ActionButton');
-    return (
-        <ActionButton action="view_create_room"
-            mouseOverAction={props.callout ? "callout_create_room" : null}
-            label={_t("Create new room")}
-            iconPath={require("../../../../res/img/icons-create-room.svg")}
-            size={props.size}
-            tooltip={props.tooltip}
-        />
-    );
-};
-
-CreateRoomButton.propTypes = {
-    size: PropTypes.string,
-    tooltip: PropTypes.bool,
-};
-
-export default CreateRoomButton;

src/components/views/elements/Field.tsx

@@ -248,6 +248,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
                 tooltipClassName={classNames("mx_Field_tooltip", tooltipClassName)}
                 visible={(this.state.focused && this.props.forceTooltipVisible) || this.state.feedbackVisible}
                 label={tooltipContent || this.state.feedback}
+                forceOnRight
             />;
         }
 

src/components/views/elements/InteractiveTooltip.js

@@ -1,336 +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 from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const InteractiveTooltipContainerId = "mx_InteractiveTooltip_Container";
-
-// If the distance from tooltip to window edge is below this value, the tooltip
-// will flip around to the other side of the target.
-const MIN_SAFE_DISTANCE_TO_WINDOW_EDGE = 20;
-
-function getOrCreateContainer() {
-    let container = document.getElementById(InteractiveTooltipContainerId);
-
-    if (!container) {
-        container = document.createElement("div");
-        container.id = InteractiveTooltipContainerId;
-        document.body.appendChild(container);
-    }
-
-    return container;
-}
-
-function isInRect(x, y, rect) {
-    const { top, right, bottom, left } = rect;
-    return x >= left && x <= right && y >= top && y <= bottom;
-}
-
-/**
- * Returns the positive slope of the diagonal of the rect.
- *
- * @param {DOMRect} rect
- * @return {integer}
- */
-function getDiagonalSlope(rect) {
-    const { top, right, bottom, left } = rect;
-    return (bottom - top) / (right - left);
-}
-
-function isInUpperLeftHalf(x, y, rect) {
-    const { bottom, left } = rect;
-    // Negative slope because Y values grow downwards and for this case, the
-    // diagonal goes from larger to smaller Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * -1;
-    return isInRect(x, y, rect) && (y <= bottom + diagonalSlope * (x - left));
-}
-
-function isInLowerRightHalf(x, y, rect) {
-    const { bottom, left } = rect;
-    // Negative slope because Y values grow downwards and for this case, the
-    // diagonal goes from larger to smaller Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * -1;
-    return isInRect(x, y, rect) && (y >= bottom + diagonalSlope * (x - left));
-}
-
-function isInUpperRightHalf(x, y, rect) {
-    const { top, left } = rect;
-    // Positive slope because Y values grow downwards and for this case, the
-    // diagonal goes from smaller to larger Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * 1;
-    return isInRect(x, y, rect) && (y <= top + diagonalSlope * (x - left));
-}
-
-function isInLowerLeftHalf(x, y, rect) {
-    const { top, left } = rect;
-    // Positive slope because Y values grow downwards and for this case, the
-    // diagonal goes from smaller to larger Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * 1;
-    return isInRect(x, y, rect) && (y >= top + diagonalSlope * (x - left));
-}
-
-/*
- * This style of tooltip takes a "target" element as its child and centers the
- * tooltip along one edge of the target.
- */
-export default class InteractiveTooltip extends React.Component {
-    static propTypes = {
-        // Content to show in the tooltip
-        content: PropTypes.node.isRequired,
-        // Function to call when visibility of the tooltip changes
-        onVisibilityChange: PropTypes.func,
-        // flag to forcefully hide this tooltip
-        forceHidden: PropTypes.bool,
-    };
-
-    constructor() {
-        super();
-
-        this.state = {
-            contentRect: null,
-            visible: false,
-        };
-    }
-
-    componentDidUpdate() {
-        // Whenever this passthrough component updates, also render the tooltip
-        // in a separate DOM tree. This allows the tooltip content to participate
-        // the normal React rendering cycle: when this component re-renders, the
-        // tooltip content re-renders.
-        // Once we upgrade to React 16, this could be done a bit more naturally
-        // using the portals feature instead.
-        this.renderTooltip();
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener("mousemove", this.onMouseMove);
-    }
-
-    collectContentRect = (element) => {
-        // We don't need to clean up when unmounting, so ignore
-        if (!element) return;
-
-        this.setState({
-            contentRect: element.getBoundingClientRect(),
-        });
-    }
-
-    collectTarget = (element) => {
-        this.target = element;
-    }
-
-    canTooltipFitAboveTarget() {
-        const { contentRect } = this.state;
-        const targetRect = this.target.getBoundingClientRect();
-        const targetTop = targetRect.top + window.pageYOffset;
-        return (
-            !contentRect ||
-            (targetTop - contentRect.height > MIN_SAFE_DISTANCE_TO_WINDOW_EDGE)
-        );
-    }
-
-    onMouseMove = (ev) => {
-        const { clientX: x, clientY: y } = ev;
-        const { contentRect } = this.state;
-        const targetRect = this.target.getBoundingClientRect();
-
-        // When moving the mouse from the target to the tooltip, we create a
-        // safe area that includes the tooltip, the target, and the trapezoid
-        // ABCD between them:
-        //                            ┌───────────┐
-        //                            │           │
-        //                            │           │
-        //                          A └───E───F───┘ B
-        //                                  V
-        //                                 ┌─┐
-        //                                 │ │
-        //                                C└─┘D
-        //
-        // As long as the mouse remains inside the safe area, the tooltip will
-        // stay open.
-        const buffer = 50;
-        if (isInRect(x, y, targetRect)) {
-            return;
-        }
-        if (this.canTooltipFitAboveTarget()) {
-            const contentRectWithBuffer = {
-                top: contentRect.top - buffer,
-                right: contentRect.right + buffer,
-                bottom: contentRect.bottom,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidLeft = {
-                top: contentRect.bottom,
-                right: targetRect.left,
-                bottom: targetRect.bottom,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidCenter = {
-                top: contentRect.bottom,
-                right: targetRect.right,
-                bottom: targetRect.bottom,
-                left: targetRect.left,
-            };
-            const trapezoidRight = {
-                top: contentRect.bottom,
-                right: contentRect.right + buffer,
-                bottom: targetRect.bottom,
-                left: targetRect.right,
-            };
-
-            if (
-                isInRect(x, y, contentRectWithBuffer) ||
-                isInUpperRightHalf(x, y, trapezoidLeft) ||
-                isInRect(x, y, trapezoidCenter) ||
-                isInUpperLeftHalf(x, y, trapezoidRight)
-            ) {
-                return;
-            }
-        } else {
-            const contentRectWithBuffer = {
-                top: contentRect.top,
-                right: contentRect.right + buffer,
-                bottom: contentRect.bottom + buffer,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidLeft = {
-                top: targetRect.top,
-                right: targetRect.left,
-                bottom: contentRect.top,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidCenter = {
-                top: targetRect.top,
-                right: targetRect.right,
-                bottom: contentRect.top,
-                left: targetRect.left,
-            };
-            const trapezoidRight = {
-                top: targetRect.top,
-                right: contentRect.right + buffer,
-                bottom: contentRect.top,
-                left: targetRect.right,
-            };
-
-            if (
-                isInRect(x, y, contentRectWithBuffer) ||
-                isInLowerRightHalf(x, y, trapezoidLeft) ||
-                isInRect(x, y, trapezoidCenter) ||
-                isInLowerLeftHalf(x, y, trapezoidRight)
-            ) {
-                return;
-            }
-        }
-
-        this.hideTooltip();
-    }
-
-    onTargetMouseOver = (ev) => {
-        this.showTooltip();
-    }
-
-    showTooltip() {
-        // Don't enter visible state if we haven't collected the target yet
-        if (!this.target) {
-            return;
-        }
-        this.setState({
-            visible: true,
-        });
-        if (this.props.onVisibilityChange) {
-            this.props.onVisibilityChange(true);
-        }
-        document.addEventListener("mousemove", this.onMouseMove);
-    }
-
-    hideTooltip() {
-        this.setState({
-            visible: false,
-        });
-        if (this.props.onVisibilityChange) {
-            this.props.onVisibilityChange(false);
-        }
-        document.removeEventListener("mousemove", this.onMouseMove);
-    }
-
-    renderTooltip() {
-        const { contentRect, visible } = this.state;
-        if (this.props.forceHidden === true || !visible) {
-            ReactDOM.render(null, getOrCreateContainer());
-            return null;
-        }
-
-        const targetRect = this.target.getBoundingClientRect();
-
-        // The window X and Y offsets are to adjust position when zoomed in to page
-        const targetLeft = targetRect.left + window.pageXOffset;
-        const targetBottom = targetRect.bottom + window.pageYOffset;
-        const targetTop = targetRect.top + window.pageYOffset;
-
-        // Place the tooltip above the target by default. If we find that the
-        // tooltip content would extend past the safe area towards the window
-        // edge, flip around to below the target.
-        const position = {};
-        let chevronFace = null;
-        if (this.canTooltipFitAboveTarget()) {
-            position.bottom = window.innerHeight - targetTop;
-            chevronFace = "bottom";
-        } else {
-            position.top = targetBottom;
-            chevronFace = "top";
-        }
-
-        // Center the tooltip horizontally with the target's center.
-        position.left = targetLeft + targetRect.width / 2;
-
-        const chevron = <div className={"mx_InteractiveTooltip_chevron_" + chevronFace} />;
-
-        const menuClasses = classNames({
-            'mx_InteractiveTooltip': true,
-            'mx_InteractiveTooltip_withChevron_top': chevronFace === 'top',
-            'mx_InteractiveTooltip_withChevron_bottom': chevronFace === 'bottom',
-        });
-
-        const menuStyle = {};
-        if (contentRect) {
-            menuStyle.left = `-${contentRect.width / 2}px`;
-        }
-
-        const tooltip = <div className="mx_InteractiveTooltip_wrapper" style={{...position}}>
-            <div className={menuClasses}
-                style={menuStyle}
-                ref={this.collectContentRect}
-            >
-                {chevron}
-                {this.props.content}
-            </div>
-        </div>;
-
-        ReactDOM.render(tooltip, getOrCreateContainer());
-    }
-
-    render() {
-        // We use `cloneElement` here to append some props to the child content
-        // without using a wrapper element which could disrupt layout.
-        return React.cloneElement(this.props.children, {
-            ref: this.collectTarget,
-            onMouseOver: this.onTargetMouseOver,
-        });
-    }
-}

src/components/views/elements/ManageIntegsButton.js

@@ -17,10 +17,10 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
 
 export default class ManageIntegsButton extends React.Component {
     constructor(props) {
@@ -45,9 +45,8 @@ export default class ManageIntegsButton extends React.Component {
     render() {
         let integrationsButton = <div />;
         if (IntegrationManagers.sharedInstance().hasManager()) {
-            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
             integrationsButton = (
-                <AccessibleButton
+                <AccessibleTooltipButton
                     className='mx_RoomHeader_button mx_RoomHeader_manageIntegsButton'
                     title={_t("Manage Integrations")}
                     onClick={this.onManageIntegrations}

src/components/views/elements/ReplyThread.js

@@ -27,6 +27,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import escapeHtml from "escape-html";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {Action} from "../../../dispatcher/actions";
+import sanitizeHtml from "sanitize-html";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@@ -92,7 +93,21 @@ export default class ReplyThread extends React.Component {
 
     // Part of Replies fallback support
     static stripHTMLReply(html) {
-        return html.replace(/^<mx-reply>[\s\S]+?<\/mx-reply>/, '');
+        // Sanitize the original HTML for inclusion in <mx-reply>.  We allow
+        // any HTML, since the original sender could use special tags that we
+        // don't recognize, but want to pass along to any recipients who do
+        // recognize them -- recipients should be sanitizing before displaying
+        // anyways.  However, we sanitize to 1) remove any mx-reply, so that we
+        // don't generate a nested mx-reply, and 2) make sure that the HTML is
+        // properly formatted (e.g. tags are closed where necessary)
+        return sanitizeHtml(
+            html,
+            {
+                allowedTags: false, // false means allow everything
+                allowedAttributes: false,
+                exclusiveFilter: (frame) => frame.tag === "mx-reply",
+            },
+        );
     }
 
     // Part of Replies fallback support
@@ -102,15 +117,19 @@ export default class ReplyThread extends React.Component {
         let {body, formatted_body: html} = ev.getContent();
         if (this.getParentEventId(ev)) {
             if (body) body = this.stripPlainReply(body);
-            if (html) html = this.stripHTMLReply(html);
         }
 
         if (!body) body = ""; // Always ensure we have a body, for reasons.
 
-        // Escape the body to use as HTML below.
-        // We also run a nl2br over the result to fix the fallback representation. We do this
-        // after converting the text to safe HTML to avoid user-provided BR's from being converted.
-        if (!html) html = escapeHtml(body).replace(/\n/g, '<br/>');
+        if (html) {
+            // sanitize the HTML before we put it in an <mx-reply>
+            html = this.stripHTMLReply(html);
+        } else {
+            // Escape the body to use as HTML below.
+            // We also run a nl2br over the result to fix the fallback representation. We do this
+            // after converting the text to safe HTML to avoid user-provided BR's from being converted.
+            html = escapeHtml(body).replace(/\n/g, '<br/>');
+        }
 
         // dev note: do not rely on `body` being safe for HTML usage below.
 

src/components/views/elements/TagTile.js

@@ -29,6 +29,7 @@ import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
 import TagOrderStore from '../../../stores/TagOrderStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import AccessibleButton from "./AccessibleButton";
 
 // A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
@@ -114,7 +115,7 @@ export default createReactClass({
         this.setState({ hover: true });
     },
 
-    onMouseOut: function() {
+    onMouseLeave: function() {
         this.setState({ hover: false });
     },
 
@@ -151,11 +152,14 @@ export default createReactClass({
             badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
         }
 
-        // FIXME: this ought to use AccessibleButton for a11y but that causes onMouseOut/onMouseOver to fire too much
         const contextButton = this.state.hover || this.props.menuDisplayed ?
-            <div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this.props.contextMenuButtonRef}>
+            <AccessibleButton
+                className="mx_TagTile_context_button"
+                onClick={this.openMenu}
+                inputRef={this.props.contextMenuButtonRef}
+            >
                 {"\u00B7\u00B7\u00B7"}
-            </div> : <div ref={this.props.contextMenuButtonRef} />;
+            </AccessibleButton> : <div ref={this.props.contextMenuButtonRef} />;
 
         const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
 
@@ -168,7 +172,7 @@ export default createReactClass({
             <div
                 className="mx_TagTile_avatar"
                 onMouseOver={this.onMouseOver}
-                onMouseOut={this.onMouseOut}
+                onMouseLeave={this.onMouseLeave}
             >
                 <BaseAvatar
                     name={name}

src/components/views/elements/TextWithTooltip.js

@@ -37,7 +37,7 @@ export default class TextWithTooltip extends React.Component {
         this.setState({hover: true});
     };
 
-    onMouseOut = () => {
+    onMouseLeave = () => {
         this.setState({hover: false});
     };
 
@@ -45,13 +45,12 @@ export default class TextWithTooltip extends React.Component {
         const Tooltip = sdk.getComponent("elements.Tooltip");
 
         return (
-            <span onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} className={this.props.class}>
+            <span onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={this.props.class}>
                 {this.props.children}
-                <Tooltip
+                {this.state.hover && <Tooltip
                     label={this.props.tooltip}
-                    visible={this.state.hover}
                     tooltipClassName={this.props.tooltipClass}
-                    className={"mx_TextWithTooltip_tooltip"} />
+                    className={"mx_TextWithTooltip_tooltip"} /> }
             </span>
         );
     }

src/components/views/elements/Tooltip.tsx

@@ -18,18 +18,15 @@ limitations under the License.
 */
 
 
-import React, { Component } from 'react';
+import React, {Component, CSSProperties} from 'react';
 import ReactDOM from 'react-dom';
-import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
-import { ViewTooltipPayload } from '../../../dispatcher/payloads/ViewTooltipPayload';
-import { Action } from '../../../dispatcher/actions';
 
 const MIN_TOOLTIP_HEIGHT = 25;
 
 interface IProps {
         // Class applied to the element used to position the tooltip
-        className: string;
+        className?: string;
         // Class applied to the tooltip itself
         tooltipClassName?: string;
         // Whether the tooltip is visible or hidden.
@@ -38,6 +35,7 @@ interface IProps {
         visible?: boolean;
         // the react element to put into the tooltip
         label: React.ReactNode;
+        forceOnRight?: boolean;
 }
 
 export default class Tooltip extends React.Component<IProps> {
@@ -68,18 +66,12 @@ export default class Tooltip extends React.Component<IProps> {
 
     // Remove the wrapper element, as the tooltip has finished using it
     public componentWillUnmount() {
-        dis.dispatch<ViewTooltipPayload>({
-            action: Action.ViewTooltip,
-            tooltip: null,
-            parent: null,
-        });
-
         ReactDOM.unmountComponentAtNode(this.tooltipContainer);
         document.body.removeChild(this.tooltipContainer);
         window.removeEventListener('scroll', this.renderTooltip, true);
     }
 
-    private updatePosition(style: {[key: string]: any}) {
+    private updatePosition(style: CSSProperties) {
         const parentBox = this.parent.getBoundingClientRect();
         let offset = 0;
         if (parentBox.height > MIN_TOOLTIP_HEIGHT) {
@@ -89,8 +81,14 @@ export default class Tooltip extends React.Component<IProps> {
             // we need so that we're still centered.
             offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
         }
+
         style.top = (parentBox.top - 2) + window.pageYOffset + offset;
-        style.left = 6 + parentBox.right + window.pageXOffset;
+        if (!this.props.forceOnRight && parentBox.right > window.innerWidth / 2) {
+            style.right = window.innerWidth - parentBox.right - window.pageXOffset - 8;
+        } else {
+            style.left = parentBox.right + window.pageXOffset + 6;
+        }
+
         return style;
     }
 
@@ -99,7 +97,6 @@ export default class Tooltip extends React.Component<IProps> {
         // positioned, also taking into account any window zoom
         // NOTE: The additional 6 pixels for the left position, is to take account of the
         // tooltips chevron
-        const parent = ReactDOM.findDOMNode(this).parentNode as Element;
         const style = this.updatePosition({});
         // Hide the entire container when not visible. This prevents flashing of the tooltip
         // if it is not meant to be visible on first mount.
@@ -119,19 +116,12 @@ export default class Tooltip extends React.Component<IProps> {
 
         // Render the tooltip manually, as we wish it not to be rendered within the parent
         this.tooltip = ReactDOM.render<Element>(tooltip, this.tooltipContainer);
-
-        // Tell the roomlist about us so it can manipulate us if it wishes
-        dis.dispatch<ViewTooltipPayload>({
-            action: Action.ViewTooltip,
-            tooltip: this.tooltip,
-            parent: parent,
-        });
     };
 
     public render() {
         // Render a placeholder
         return (
-            <div className={this.props.className} >
+            <div className={this.props.className}>
             </div>
         );
     }

src/components/views/elements/TooltipButton.js

@@ -34,7 +34,7 @@ export default createReactClass({
         });
     },
 
-    onMouseOut: function() {
+    onMouseLeave: function() {
         this.setState({
             hover: false,
         });
@@ -48,7 +48,7 @@ export default createReactClass({
             label={this.props.helpText}
         /> : <div />;
         return (
-            <div className="mx_TooltipButton" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} >
+            <div className="mx_TooltipButton" onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
                 ?
                 { tip }
             </div>

src/components/views/groups/GroupMemberList.js

@@ -24,7 +24,6 @@ import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
 import { showGroupInviteDialog } from '../../../GroupAddressPicker';
 import AccessibleButton from '../elements/AccessibleButton';
-import TintableSvg from '../elements/TintableSvg';
 import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 
@@ -211,15 +210,13 @@ export default createReactClass({
         let inviteButton;
         if (GroupStore.isUserPrivileged(this.props.groupId)) {
             inviteButton = (
-            <AccessibleButton
-                className="mx_RightPanel_invite"
-                onClick={this.onInviteToGroupButtonClick}
-            >
-                <div className="mx_RightPanel_icon" >
-                    <TintableSvg src={require("../../../../res/img/icon-invite-people.svg")} width="18" height="14" />
-                </div>
-                <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
-            </AccessibleButton>);
+                <AccessibleButton
+                    className="mx_MemberList_invite mx_MemberList_inviteCommunity"
+                    onClick={this.onInviteToGroupButtonClick}
+                >
+                    <span>{ _t('Invite to this community') }</span>
+                </AccessibleButton>
+            );
         }
 
         return (

src/components/views/groups/GroupRoomList.js

@@ -21,7 +21,6 @@ import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
 import { showGroupAddRoomDialog } from '../../../GroupAddressPicker';
 import AccessibleButton from '../elements/AccessibleButton';
-import TintableSvg from '../elements/TintableSvg';
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 
 const INITIAL_LOAD_NUM_ROOMS = 30;
@@ -135,13 +134,10 @@ export default createReactClass({
         if (GroupStore.isUserPrivileged(this.props.groupId)) {
             inviteButton = (
                 <AccessibleButton
-                    className="mx_RightPanel_invite"
+                    className="mx_MemberList_invite mx_MemberList_addRoomToCommunity"
                     onClick={this.onAddRoomToGroupButtonClick}
                 >
-                    <div className="mx_RightPanel_icon" >
-                        <TintableSvg src={require("../../../../res/img/icons-room-add.svg")} width="18" height="14" />
-                    </div>
-                    <div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
+                    <span>{ _t('Add rooms to this community') }</span>
                 </AccessibleButton>
             );
         }

src/components/views/messages/DateSeparator.js

@@ -21,7 +21,7 @@ import { _t } from '../../../languageHandler';
 import {formatFullDateNoTime} from '../../../DateUtils';
 
 function getdaysArray() {
-	return [
+    return [
         _t('Sunday'),
         _t('Monday'),
         _t('Tuesday'),

src/components/views/messages/MessageActionBar.js

@@ -22,11 +22,11 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
-import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from '../../structures/ContextMenu';
+import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from '../../structures/ContextMenu';
 import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
 import RoomContext from "../../../contexts/RoomContext";
 import Toolbar from "../../../accessibility/Toolbar";
-import {RovingAccessibleButton, useRovingTabIndex} from "../../../accessibility/RovingTabIndex";
+import {RovingAccessibleTooltipButton, useRovingTabIndex} from "../../../accessibility/RovingTabIndex";
 
 const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange}) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
@@ -55,9 +55,9 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
     }
 
     return <React.Fragment>
-        <ContextMenuButton
+        <ContextMenuTooltipButton
             className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
-            label={_t("Options")}
+            title={_t("Options")}
             onClick={openMenu}
             isExpanded={menuDisplayed}
             inputRef={ref}
@@ -86,9 +86,9 @@ const ReactButton = ({mxEvent, reactions, onFocusChange}) => {
     }
 
     return <React.Fragment>
-        <ContextMenuButton
+        <ContextMenuTooltipButton
             className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton"
-            label={_t("React")}
+            title={_t("React")}
             onClick={openMenu}
             isExpanded={menuDisplayed}
             inputRef={ref}
@@ -167,7 +167,7 @@ export default class MessageActionBar extends React.PureComponent {
                 );
             }
             if (this.context.canReply) {
-                replyButton = <RovingAccessibleButton
+                replyButton = <RovingAccessibleTooltipButton
                     className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
                     title={_t("Reply")}
                     onClick={this.onReplyClick}
@@ -175,7 +175,7 @@ export default class MessageActionBar extends React.PureComponent {
             }
         }
         if (canEditContent(this.props.mxEvent)) {
-            editButton = <RovingAccessibleButton
+            editButton = <RovingAccessibleTooltipButton
                 className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
                 title={_t("Edit")}
                 onClick={this.onEditClick}

src/components/views/messages/ReactionsRowButton.js

@@ -74,7 +74,7 @@ export default class ReactionsRowButton extends React.PureComponent {
         });
     }
 
-    onMouseOut = () => {
+    onMouseLeave = () => {
         this.setState({
             tooltipVisible: false,
         });
@@ -129,11 +129,12 @@ export default class ReactionsRowButton extends React.PureComponent {
         }
 
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return <AccessibleButton className={classes}
+        return <AccessibleButton
+            className={classes}
             aria-label={label}
             onClick={this.onClick}
             onMouseOver={this.onMouseOver}
-            onMouseOut={this.onMouseOut}
+            onMouseLeave={this.onMouseLeave}
         >
             <span className="mx_ReactionsRowButton_content" aria-hidden="true">
                 {content}

src/components/views/messages/ReactionsRowButtonTooltip.js

@@ -73,11 +73,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent {
 
         let tooltip;
         if (tooltipLabel) {
-            tooltip = <Tooltip
-                tooltipClassName="mx_Tooltip_timeline"
-                visible={visible}
-                label={tooltipLabel}
-            />;
+            tooltip = <Tooltip visible={visible} label={tooltipLabel} />;
         }
 
         return tooltip;

src/components/views/messages/SenderProfile.js

@@ -125,8 +125,10 @@ export default createReactClass({
         </span>;
 
         const content = this.props.text ?
-            <span className="mx_SenderProfile_aux">
-                { _t(this.props.text, { senderName: () => nameElem }) }
+            <span>
+                <span className="mx_SenderProfile_aux">
+                    { _t(this.props.text, { senderName: () => nameElem }) }
+                </span>
             </span> : nameFlair;
 
         return (

src/components/views/messages/TextualBody.js

@@ -107,7 +107,7 @@ export default createReactClass({
                         } else {
                             // Only syntax highlight if there's a class starting with language-
                             const classes = blocks[i].className.split(/\s+/).filter(function(cl) {
-                                return cl.startsWith('language-');
+                                return cl.startsWith('language-') && !cl.startsWith('language-_');
                             });
 
                             if (classes.length != 0) {
@@ -391,7 +391,6 @@ export default createReactClass({
                 onClick={this._openHistoryDialog}
                 title={_t("Edited at %(date)s. Click to view edits.", {date: dateString})}
                 tooltip={tooltip}
-                tooltipClassName="mx_Tooltip_timeline"
             >
                 <span>{`(${_t("edited")})`}</span>
             </AccessibleTooltipButton>

src/components/views/right_panel/HeaderButton.js

@@ -22,7 +22,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Analytics from '../../../Analytics';
-import AccessibleButton from '../elements/AccessibleButton';
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 export default class HeaderButton extends React.Component {
     constructor() {
@@ -42,13 +42,13 @@ export default class HeaderButton extends React.Component {
             [`mx_RightPanel_${this.props.name}`]: true,
         });
 
-        return <AccessibleButton
+        return <AccessibleTooltipButton
             aria-selected={this.props.isHighlighted}
             role="tab"
             title={this.props.title}
             className={classes}
-            onClick={this.onClick}>
-        </AccessibleButton>;
+            onClick={this.onClick}
+        />;
     }
 }
 

src/components/views/right_panel/UserInfo.js

@@ -1287,11 +1287,11 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     );
 
     // only display the devices list if our client supports E2E
-    const _enableDevices = cli.isCryptoEnabled();
+    const cryptoEnabled = cli.isCryptoEnabled();
 
     let text;
     if (!isRoomEncrypted) {
-        if (!_enableDevices) {
+        if (!cryptoEnabled) {
             text = _t("This client does not support end-to-end encryption.");
         } else if (room) {
             text = _t("Messages in this room are not end-to-end encrypted.");
@@ -1305,10 +1305,10 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     let verifyButton;
     const homeserverSupportsCrossSigning = useHomeserverSupportsCrossSigning(cli);
 
-    const userTrust = cli.checkUserTrust(member.userId);
-    const userVerified = userTrust.isCrossSigningVerified();
+    const userTrust = cryptoEnabled && cli.checkUserTrust(member.userId);
+    const userVerified = cryptoEnabled && userTrust.isCrossSigningVerified();
     const isMe = member.userId === cli.getUserId();
-    const canVerify = homeserverSupportsCrossSigning && !userVerified && !isMe;
+    const canVerify = cryptoEnabled && homeserverSupportsCrossSigning && !userVerified && !isMe;
 
     const setUpdating = (updating) => {
         setPendingUpdateCount(count => count + (updating ? 1 : -1));
@@ -1345,10 +1345,10 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
             <h3>{ _t("Security") }</h3>
             <p>{ text }</p>
             { verifyButton }
-            <DevicesSection
+            { cryptoEnabled && <DevicesSection
                 loading={showDeviceListSpinner}
                 devices={devices}
-                userId={member.userId} />
+                userId={member.userId} /> }
         </div>
     );
 

src/components/views/room_settings/UrlPreviewSettings.js

@@ -58,7 +58,7 @@ export default createReactClass({
                         'a': (sub)=><a onClick={this._onClickUserSettings} href=''>{ sub }</a>,
                     })
                 );
-            } else if (accountEnabled) {
+            } else {
                 previewsForAccount = (
                     _t("You have <a>disabled</a> URL previews by default.", {}, {
                         'a': (sub)=><a onClick={this._onClickUserSettings} href=''>{ sub }</a>,

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

@@ -66,7 +66,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordere
     }
 
     const onMouseOver = () => setHover(true);
-    const onMouseOut = () => setHover(false);
+    const onMouseLeave = () => setHover(false);
 
     let tip;
     if (hover && !hideTooltip) {
@@ -78,7 +78,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordere
             <AccessibleButton
                 onClick={onClick}
                 onMouseOver={onMouseOver}
-                onMouseOut={onMouseOut}
+                onMouseLeave={onMouseLeave}
                 className={classes}
                 style={style}
             >
@@ -87,7 +87,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordere
         );
     }
 
-    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/EventTile.js

@@ -685,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());
@@ -819,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 : '' }
@@ -845,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}
@@ -881,7 +884,7 @@ export default createReactClass({
                     );
                 }
                 return (
-                    <div className={classes}>
+                    <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         { ircTimestamp }
                         { avatar }
                         { sender }
@@ -911,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 }

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/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

@@ -72,6 +72,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
 
     public componentWillUnmount() {
         SettingsStore.unwatchSetting(this.countWatcherRef);
+        this.props.notification.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
     }
 
     public componentDidUpdate(prevProps: Readonly<IProps>) {

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

@@ -23,13 +23,11 @@ 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/RoomListStore2";
+import RoomListStore from "../../../stores/room-list/RoomListStore";
 import { DefaultTagID } from "../../../stores/room-list/models";
 import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
 import Toolbar from "../../../accessibility/Toolbar";
 
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
-
 interface IProps {
 }
 
@@ -44,7 +42,7 @@ interface IState {
     skipFirst: boolean;
 }
 
-export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState> {
+export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState> {
     private isMounted = true;
 
     constructor(props: IProps) {
@@ -88,12 +86,12 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
             const roomTag = roomTags.includes(DefaultTagID.DM) ? DefaultTagID.DM : roomTags[0];
             return (
                 <RovingAccessibleTooltipButton
-                    className="mx_RoomBreadcrumbs2_crumb"
+                    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_RoomBreadcrumbs2_Tooltip"}
+                    tooltipClassName="mx_RoomBreadcrumbs_Tooltip"
                 >
                     <DecoratedRoomAvatar
                         room={r}
@@ -111,17 +109,17 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
             return (
                 <CSSTransition
                     appear={true} in={this.state.doAnimation} timeout={640}
-                    classNames='mx_RoomBreadcrumbs2'
+                    classNames='mx_RoomBreadcrumbs'
                 >
-                    <Toolbar className='mx_RoomBreadcrumbs2'>
+                    <Toolbar className='mx_RoomBreadcrumbs'>
                         {tiles.slice(this.state.skipFirst ? 1 : 0)}
                     </Toolbar>
                 </CSSTransition>
             );
         } else {
             return (
-                <div className='mx_RoomBreadcrumbs2'>
-                    <div className="mx_RoomBreadcrumbs2_placeholder">
+                <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,7 +26,6 @@ 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";
@@ -34,6 +33,7 @@ import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
 import E2EIcon from './E2EIcon';
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import {DefaultTagID} from "../../../stores/room-list/models";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 export default createReactClass({
     displayName: 'RoomHeader',
@@ -220,11 +220,10 @@ export default createReactClass({
 
         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')) {
@@ -236,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 =

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

@@ -23,15 +23,14 @@ 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/RoomListStore2";
+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, TagID } from "../../../stores/room-list/models";
+import { DefaultTagID, isCustomTag, TagID } from "../../../stores/room-list/models";
 import dis from "../../../dispatcher/dispatcher";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import RoomSublist2 from "./RoomSublist2";
+import RoomSublist from "./RoomSublist";
 import { ActionPayload } from "../../../dispatcher/payloads";
-import { NameFilterCondition } from "../../../stores/room-list/filters/NameFilterCondition";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import GroupAvatar from "../avatars/GroupAvatar";
 import TemporaryTile from "./TemporaryTile";
@@ -40,8 +39,10 @@ import { NotificationColor } from "../../../stores/notifications/NotificationCol
 import { Action } from "../../../dispatcher/actions";
 import { ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
-
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
+import SettingsStore from "../../../settings/SettingsStore";
+import CustomRoomTagStore from "../../../stores/CustomRoomTagStore";
+import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays";
+import { objectShallowClone } from "../../../utils/objects";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -50,7 +51,6 @@ interface IProps {
     onResize: () => void;
     resizeNotifier: ResizeNotifier;
     collapsed: boolean;
-    searchFilter: string;
     isMinimized: boolean;
 }
 
@@ -78,8 +78,9 @@ const ALWAYS_VISIBLE_TAGS: TagID[] = [
 
 interface ITagAesthetics {
     sectionLabel: string;
+    sectionLabelRaw?: string;
     addRoomLabel?: string;
-    onAddRoom?: (dispatcher: Dispatcher<ActionPayload>) => void;
+    onAddRoom?: (dispatcher?: Dispatcher<ActionPayload>) => void;
     isInvite: boolean;
     defaultHidden: boolean;
 }
@@ -103,14 +104,18 @@ const TAG_AESTHETICS: {
         isInvite: false,
         defaultHidden: false,
         addRoomLabel: _td("Start chat"),
-        onAddRoom: (dispatcher: Dispatcher<ActionPayload>) => dispatcher.dispatch({action: 'view_create_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.dispatch({action: 'view_create_room'}),
+        onAddRoom: (dispatcher?: Dispatcher<ActionPayload>) => {
+            (dispatcher || defaultDispatcher).dispatch({action: 'view_create_room'})
+        },
     },
     [DefaultTagID.LowPriority]: {
         sectionLabel: _td("Low priority"),
@@ -131,9 +136,21 @@ const TAG_AESTHETICS: {
     },
 };
 
-export default class RoomList2 extends React.Component<IProps, IState> {
-    private searchFilter: NameFilterCondition = new NameFilterCondition();
+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);
@@ -145,29 +162,16 @@ export default class RoomList2 extends React.Component<IProps, IState> {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
     }
 
-    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, 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) => {
@@ -194,7 +198,7 @@ export default class RoomList2 extends React.Component<IProps, IState> {
             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, t);
+                    const state = RoomNotificationStateStore.instance.getRoomState(r);
                     return state.room.roomId === roomId || state.isUnread;
                 });
             }
@@ -210,22 +214,45 @@ export default class RoomList2 extends React.Component<IProps, IState> {
 
     private updateLists = () => {
         const newLists = RoomListStore.instance.orderedLists;
-        if (window.mx_LoudRoomListLogging) {
-            // TODO: Remove debug: https://github.com/vector-im/riot-web/issues/14035
+        if (SettingsStore.getValue("advancedRoomListLogging")) {
+            // TODO: Remove debug: https://github.com/vector-im/riot-web/issues/14602
             console.log("new lists", newLists);
         }
 
-        this.setState({sublists: newLists}, () => {
-            this.props.onResize();
-        });
+        const previousListIds = Object.keys(this.state.sublists);
+        const newListIds = Object.keys(newLists);
+
+        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 sublists = objectShallowClone(newLists, (k, v) => arrayFastClone(v));
+
+            this.setState({sublists}, () => {
+                this.props.onResize();
+            });
+        }
     };
 
-    private renderCommunityInvites(): React.ReactElement[] {
+    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 => {
-           if (g.myMembership !== 'invite') return false;
-           return !this.searchFilter || this.searchFilter.matches(g.name || "");
+           return g.myMembership === 'invite';
         }).map(g => {
             const avatar = (
                 <GroupAvatar
@@ -258,12 +285,18 @@ export default class RoomList2 extends React.Component<IProps, IState> {
     private renderSublists(): React.ReactElement[] {
         const components: React.ReactElement[] = [];
 
-        for (const orderedTagId of TAG_ORDER) {
-            if (CUSTOM_TAGS_BEFORE_TAG === orderedTagId) {
-                // Populate custom tags if needed
-                // TODO: Custom tags: https://github.com/vector-im/riot-web/issues/14091
+        const tagOrder = TAG_ORDER.reduce((p, c) => {
+            if (c === CUSTOM_TAGS_BEFORE_TAG) {
+                const customTags = Object.keys(this.state.sublists)
+                    .filter(t => isCustomTag(t))
+                    .filter(t => CustomRoomTagStore.getTags()[t]); // isSelected
+                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);
@@ -271,24 +304,23 @@ export default class RoomList2 extends React.Component<IProps, IState> {
                 continue; // skip tag - not needed
             }
 
-            const aesthetics: ITagAesthetics = TAG_AESTHETICS[orderedTagId];
+            const aesthetics: ITagAesthetics = isCustomTag(orderedTagId)
+                ? customTagAesthetics(orderedTagId)
+                : 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
+                <RoomSublist
                     key={`sublist-${orderedTagId}`}
                     tagId={orderedTagId}
                     forRooms={true}
-                    rooms={orderedRooms}
                     startAsHidden={aesthetics.defaultHidden}
-                    label={_t(aesthetics.sectionLabel)}
-                    onAddRoom={onAddRoomFn}
-                    addRoomLabel={aesthetics.addRoomLabel}
+                    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}
-                    isFiltered={!!this.searchFilter.search}
                 />
             );
         }
@@ -305,7 +337,7 @@ export default class RoomList2 extends React.Component<IProps, IState> {
                         onFocus={this.props.onFocus}
                         onBlur={this.props.onBlur}
                         onKeyDown={onKeyDownHandler}
-                        className="mx_RoomList2"
+                        className="mx_RoomList"
                         role="tree"
                         aria-label={_t("Rooms")}
                     >{sublists}</div>

src/components/views/rooms/RoomPreviewBar.js

@@ -288,7 +288,6 @@ export default createReactClass({
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         let showSpinner = false;
-        let darkStyle = false;
         let title;
         let subTitle;
         let primaryActionHandler;
@@ -316,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;
@@ -557,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/RoomSublist.tsx

@@ -23,22 +23,21 @@ import classNames from 'classnames';
 import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../../views/elements/AccessibleButton";
-import RoomTile2 from "./RoomTile2";
+import RoomTile from "./RoomTile";
 import { ListLayout } from "../../../stores/room-list/ListLayout";
 import {
     ChevronFace,
     ContextMenu,
-    ContextMenuButton,
+    ContextMenuTooltipButton,
     StyledMenuItemCheckbox,
     StyledMenuItemRadio,
 } from "../../structures/ContextMenu";
-import RoomListStore from "../../../stores/room-list/RoomListStore2";
+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 { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { Key } from "../../../Keyboard";
 import { ActionPayload } from "../../../dispatcher/payloads";
@@ -47,8 +46,10 @@ 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";
-
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
+import { arrayHasOrderChange } from "../../../utils/arrays";
+import { objectExcluding, objectHasValueChange } 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
@@ -61,7 +62,6 @@ polyfillTouchEvent();
 
 interface IProps {
     forRooms: boolean;
-    rooms?: Room[];
     startAsHidden: boolean;
     label: string;
     onAddRoom?: () => void;
@@ -69,11 +69,10 @@ interface IProps {
     isMinimized: boolean;
     tagId: TagID;
     onResize: () => void;
-    isFiltered: boolean;
 
     // TODO: Don't use this. It's for community invites, and community invites shouldn't be here.
     // You should feel bad if you use this.
-    extraBadTilesThatShouldntExist?: React.ReactElement[];
+    extraBadTilesThatShouldntExist?: TemporaryTile[];
 
     // TODO: Account for https://github.com/vector-im/riot-web/issues/14179
 }
@@ -87,35 +86,41 @@ interface ResizeDelta {
 type PartialDOMRect = Pick<DOMRect, "left" | "top" | "height">;
 
 interface IState {
-    notificationState: ListNotificationState;
     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 RoomSublist2 extends React.Component<IProps, IState> {
+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;
-        const height = this.calculateInitialHeight();
+        this.isBeingFiltered = !!RoomListStore.instance.getFirstNameFilterCondition();
+        this.notificationState = RoomNotificationStateStore.instance.getListState(this.props.tagId);
         this.state = {
-            notificationState: RoomNotificationStateStore.instance.getListState(this.props.tagId),
             contextMenuPosition: null,
             isResizing: false,
-            isExpanded: this.props.isFiltered ? this.props.isFiltered : !this.layout.isCollapsed,
-            height,
+            isExpanded: this.isBeingFiltered ? this.isBeingFiltered : !this.layout.isCollapsed,
+            height: 0, // to be fixed in a moment, we need `rooms` to calculate this.
+            rooms: RoomListStore.instance.orderedLists[this.props.tagId] || [],
         };
-        this.state.notificationState.setRooms(this.props.rooms);
+        // 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() {
@@ -143,12 +148,22 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         return padding;
     }
 
-    private get numTiles(): number {
-        return RoomSublist2.calcNumTiles(this.props);
+    private get extraTiles(): TemporaryTile[] | null {
+        if (this.state.filteredExtraTiles) {
+            return this.state.filteredExtraTiles;
+        }
+        if (this.props.extraBadTilesThatShouldntExist) {
+            return this.props.extraBadTilesThatShouldntExist;
+        }
+        return null;
     }
 
-    private static calcNumTiles(props) {
-        return (props.rooms || []).length + (props.extraBadTilesThatShouldntExist || []).length;
+    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 {
@@ -156,33 +171,116 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         return Math.min(nVisible, this.numTiles);
     }
 
-    public componentDidUpdate(prevProps: Readonly<IProps>) {
-        this.state.notificationState.setRooms(this.props.rooms);
-        if (prevProps.isFiltered !== this.props.isFiltered) {
-            if (this.props.isFiltered) {
-                this.setState({isExpanded: true});
-            } else {
-                this.setState({isExpanded: !this.layout.isCollapsed});
-            }
-        }
+    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 (RoomSublist2.calcNumTiles(prevProps) !== this.numTiles) {
+        if (RoomSublist.calcNumTiles(prevState.rooms, prevExtraTiles) !== this.numTiles) {
             this.setState({height: this.calculateInitialHeight()});
         }
     }
 
-    public componentWillUnmount() {
-        this.state.notificationState.destroy();
-        defaultDispatcher.unregister(this.dispatcherRef);
+    public shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>): boolean {
+        if (objectHasValueChange(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 (objectHasValueChange(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 = 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.props.rooms) {
+        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.props.rooms.findIndex((r) => r.roomId === payload.room_id);
+                const roomIndex = this.state.rooms.findIndex((r) => r.roomId === payload.room_id);
 
                 if (!this.state.isExpanded && roomIndex > -1) {
                     this.toggleCollapsed();
@@ -252,7 +350,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
 
     private focusRoomTile = (index: number) => {
         if (!this.sublistRef.current) return;
-        const elements = this.sublistRef.current.querySelectorAll<HTMLDivElement>(".mx_RoomTile2");
+        const elements = this.sublistRef.current.querySelectorAll<HTMLDivElement>(".mx_RoomTile");
         const element = elements && elements[index];
         if (element) {
             element.focus();
@@ -304,12 +402,12 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         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.props.rooms && this.props.rooms[0];
+            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.props.rooms.find((r: Room) => {
-                const notifState = this.state.notificationState.getForRoom(r);
-                return notifState.count > 0 && notifState.color === this.state.notificationState.color;
+            room = this.state.rooms.find((r: Room) => {
+                const notifState = this.notificationState.getForRoom(r);
+                return notifState.count > 0 && notifState.color === this.notificationState.color;
             });
         }
 
@@ -326,11 +424,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         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 LeftPanel2, the top header is always sticky
+        // 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_RoomSublist2_headerContainer_stickyTop');
-        const isStickyBottom = possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_stickyBottom');
+        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
@@ -370,7 +468,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     this.toggleCollapsed();
                 } else if (this.sublistRef.current) {
                     // otherwise focus the first room
-                    const element = this.sublistRef.current.querySelector(".mx_RoomTile2") as HTMLDivElement;
+                    const element = this.sublistRef.current.querySelector(".mx_RoomTile") as HTMLDivElement;
                     if (element) {
                         element.focus();
                     }
@@ -401,11 +499,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
 
         const tiles: React.ReactElement[] = [];
 
-        if (this.props.rooms) {
-            const visibleRooms = this.props.rooms.slice(0, this.numVisibleTiles);
+        if (this.state.rooms) {
+            const visibleRooms = this.state.rooms.slice(0, this.numVisibleTiles);
             for (const room of visibleRooms) {
                 tiles.push(
-                    <RoomTile2
+                    <RoomTile
                         room={room}
                         key={`room-${room.roomId}`}
                         showMessagePreview={this.layout.showPreviews}
@@ -416,8 +514,9 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
             }
         }
 
-        if (this.props.extraBadTilesThatShouldntExist) {
-            tiles.push(...this.props.extraBadTilesThatShouldntExist);
+        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
@@ -444,7 +543,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     <React.Fragment>
                         <hr />
                         <div>
-                            <div className='mx_RoomSublist2_contextMenu_title'>{_t("Appearance")}</div>
+                            <div className='mx_RoomSublist_contextMenu_title'>{_t("Appearance")}</div>
                             <StyledMenuItemCheckbox
                                 onClose={this.onCloseMenu}
                                 onChange={this.onUnreadFirstChanged}
@@ -471,9 +570,9 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     top={this.state.contextMenuPosition.top + this.state.contextMenuPosition.height}
                     onFinished={this.onCloseMenu}
                 >
-                    <div className="mx_RoomSublist2_contextMenu">
+                    <div className="mx_RoomSublist_contextMenu">
                         <div>
-                            <div className='mx_RoomSublist2_contextMenu_title'>{_t("Sort by")}</div>
+                            <div className='mx_RoomSublist_contextMenu_title'>{_t("Sort by")}</div>
                             <StyledMenuItemRadio
                                 onClose={this.onCloseMenu}
                                 onChange={() => this.onTagSortChanged(SortAlgorithm.Recent)}
@@ -499,10 +598,10 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
 
         return (
             <React.Fragment>
-                <ContextMenuButton
-                    className="mx_RoomSublist2_menuButton"
+                <ContextMenuTooltipButton
+                    className="mx_RoomSublist_menuButton"
                     onClick={this.onOpenMenuClick}
-                    label={_t("List options")}
+                    title={_t("List options")}
                     isExpanded={!!this.state.contextMenuPosition}
                 />
                 {contextMenu}
@@ -524,7 +623,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     const badge = (
                         <NotificationBadge
                             forceCount={true}
-                            notification={this.state.notificationState}
+                            notification={this.notificationState}
                             onClick={this.onBadgeClick}
                             tabIndex={tabIndex}
                             aria-label={ariaLabel}
@@ -537,30 +636,35 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                             <AccessibleTooltipButton
                                 tabIndex={tabIndex}
                                 onClick={this.onAddRoom}
-                                className="mx_RoomSublist2_auxButton"
+                                className="mx_RoomSublist_auxButton"
                                 aria-label={this.props.addRoomLabel || _t("Add room")}
                                 title={this.props.addRoomLabel}
-                                tooltipClassName={"mx_RoomSublist2_addRoomTooltip"}
+                                tooltipClassName={"mx_RoomSublist_addRoomTooltip"}
                             />
                         );
                     }
 
                     const collapseClasses = classNames({
-                        'mx_RoomSublist2_collapseBtn': true,
-                        'mx_RoomSublist2_collapseBtn_collapsed': !this.state.isExpanded,
+                        'mx_RoomSublist_collapseBtn': true,
+                        'mx_RoomSublist_collapseBtn_collapsed': !this.state.isExpanded,
                     });
 
                     const classes = classNames({
-                        'mx_RoomSublist2_headerContainer': true,
-                        'mx_RoomSublist2_headerContainer_withAux': !!addRoomButton,
+                        'mx_RoomSublist_headerContainer': true,
+                        'mx_RoomSublist_headerContainer_withAux': !!addRoomButton,
                     });
 
                     const badgeContainer = (
-                        <div className="mx_RoomSublist2_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
@@ -568,21 +672,22 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     // The same applies to the notification badge.
                     return (
                         <div className={classes} onKeyDown={this.onHeaderKeyDown} onFocus={onFocus} aria-label={this.props.label}>
-                            <div className="mx_RoomSublist2_stickable">
-                                <AccessibleButton
+                            <div className="mx_RoomSublist_stickable">
+                                <Button
                                     onFocus={onFocus}
                                     inputRef={ref}
                                     tabIndex={tabIndex}
-                                    className="mx_RoomSublist2_headerText"
+                                    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>
-                                </AccessibleButton>
+                                </Button>
                                 {this.renderMenu()}
                                 {this.props.isMinimized ? null : badgeContainer}
                                 {this.props.isMinimized ? null : addRoomButton}
@@ -605,9 +710,9 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
     public render(): React.ReactElement {
         const visibleTiles = this.renderVisibleTiles();
         const classes = classNames({
-            'mx_RoomSublist2': true,
-            'mx_RoomSublist2_hasMenuOpen': !!this.state.contextMenuPosition,
-            'mx_RoomSublist2_minimized': this.props.isMinimized,
+            'mx_RoomSublist': true,
+            'mx_RoomSublist_hasMenuOpen': !!this.state.contextMenuPosition,
+            'mx_RoomSublist_minimized': this.props.isMinimized,
         });
 
         let content = null;
@@ -620,7 +725,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
             const minTilesPx = layout.tilesToPixelsWithPadding(minTiles, minHeightPadding);
             let maxTilesPx = layout.tilesToPixelsWithPadding(this.numTiles, this.padding);
             const showMoreBtnClasses = classNames({
-                'mx_RoomSublist2_showNButton': true,
+                'mx_RoomSublist_showNButton': true,
             });
 
             // If we're hiding rooms, show a 'show more' button to the user. This button
@@ -634,14 +739,14 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                 const amountFullyShown = Math.floor(nonPaddedHeight / this.layout.tileHeight);
                 const numMissing = this.numTiles - amountFullyShown;
                 let showMoreText = (
-                    <span className='mx_RoomSublist2_showNButtonText'>
+                    <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_RoomSublist2_showMoreButtonChevron mx_RoomSublist2_showNButtonChevron'>
+                        <span className='mx_RoomSublist_showMoreButtonChevron mx_RoomSublist_showNButtonChevron'>
                             {/* set by CSS masking */}
                         </span>
                         {showMoreText}
@@ -650,14 +755,14 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
             } else if (this.numTiles > this.layout.defaultVisibleTiles) {
                 // we have all tiles visible - add a button to show less
                 let showLessText = (
-                    <span className='mx_RoomSublist2_showNButtonText'>
+                    <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_RoomSublist2_showLessButtonChevron mx_RoomSublist2_showNButtonChevron'>
+                        <span className='mx_RoomSublist_showLessButtonChevron mx_RoomSublist_showNButtonChevron'>
                             {/* set by CSS masking */}
                         </span>
                         {showLessText}
@@ -692,8 +797,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
             // only mathematically 7 possible).
 
             const handleWrapperClasses = classNames({
-                'mx_RoomSublist2_resizerHandles': true,
-                'mx_RoomSublist2_resizerHandles_showNButton': !!showNButton,
+                'mx_RoomSublist_resizerHandles': true,
+                'mx_RoomSublist_resizerHandles_showNButton': !!showNButton,
             });
 
             content = (
@@ -706,11 +811,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                         onResizeStop={this.onResizeStop}
                         onResize={this.onResize}
                         handleWrapperClass={handleWrapperClasses}
-                        handleClasses={{bottom: "mx_RoomSublist2_resizerHandle"}}
-                        className="mx_RoomSublist2_resizeBox"
+                        handleClasses={{bottom: "mx_RoomSublist_resizerHandle"}}
+                        className="mx_RoomSublist_resizeBox"
                         enable={handles}
                     >
-                        <div className="mx_RoomSublist2_tiles" onScroll={this.onScrollPrevent}>
+                        <div className="mx_RoomSublist_tiles" onScroll={this.onScrollPrevent}>
                             {visibleTiles}
                         </div>
                         {showNButton}

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

@@ -29,13 +29,13 @@ import { _t } from "../../../languageHandler";
 import {
     ChevronFace,
     ContextMenu,
-    ContextMenuButton,
+    ContextMenuTooltipButton,
     MenuItemRadio,
     MenuItemCheckbox,
     MenuItem,
 } from "../../structures/ContextMenu";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
-import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
+import { MessagePreviewStore, ROOM_PREVIEW_CHANGED } from "../../../stores/room-list/MessagePreviewStore";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import {
     getRoomNotifsState,
@@ -48,35 +48,31 @@ import {
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import NotificationBadge from "./NotificationBadge";
 import { Volume } from "../../../RoomNotifsTypes";
-import RoomListStore from "../../../stores/room-list/RoomListStore2";
+import RoomListStore from "../../../stores/room-list/RoomListStore";
 import RoomListActions from "../../../actions/RoomListActions";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import {ActionPayload} from "../../../dispatcher/payloads";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
-import { NotificationState } from "../../../stores/notifications/NotificationState";
-
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
+import { NOTIFICATION_STATE_UPDATE, NotificationState } from "../../../stores/notifications/NotificationState";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 interface IProps {
     room: Room;
     showMessagePreview: boolean;
     isMinimized: boolean;
     tag: TagID;
-
-    // TODO: Incoming call boxes: https://github.com/vector-im/riot-web/issues/14177
 }
 
 type PartialDOMRect = Pick<DOMRect, "left" | "bottom">;
 
 interface IState {
-    hover: boolean;
-    notificationState: NotificationState;
     selected: boolean;
     notificationsMenuPosition: PartialDOMRect;
     generalMenuPosition: PartialDOMRect;
+    messagePreview?: string;
 }
 
-const messagePreviewId = (roomId: string) => `mx_RoomTile2_messagePreview_${roomId}`;
+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
@@ -95,12 +91,12 @@ interface INotifOptionProps {
 
 const NotifOption: React.FC<INotifOptionProps> = ({active, onClick, iconClassName, label}) => {
     const classes = classNames({
-        mx_RoomTile2_contextMenu_activeRow: active,
+        mx_RoomTile_contextMenu_activeRow: active,
     });
 
     let activeIcon;
     if (active) {
-        activeIcon = <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconCheck" />;
+        activeIcon = <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconCheck" />;
     }
 
     return (
@@ -112,25 +108,34 @@ const NotifOption: React.FC<INotifOptionProps> = ({active, onClick, iconClassNam
     );
 };
 
-export default class RoomTile2 extends React.Component<IProps, IState> {
+export default class RoomTile extends React.PureComponent<IProps, IState> {
     private dispatcherRef: string;
     private roomTileRef = createRef<HTMLDivElement>();
+    private notificationState: NotificationState;
 
     constructor(props: IProps) {
         super(props);
 
         this.state = {
-            hover: false,
-            notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room, this.props.tag),
             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);
     }
 
+    private onNotificationUpdate = () => {
+        this.forceUpdate(); // notification state changed - update
+    };
+
     private get showContextMenu(): boolean {
         return !this.props.isMinimized && this.props.tag !== DefaultTagID.Invite;
     }
@@ -151,6 +156,8 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
             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) => {
@@ -161,6 +168,21 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         }
     };
 
+    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({
@@ -169,14 +191,6 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         });
     };
 
-    private onTileMouseEnter = () => {
-        this.setState({hover: true});
-    };
-
-    private onTileMouseLeave = () => {
-        this.setState({hover: false});
-    };
-
     private onTileClick = (ev: React.KeyboardEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -232,11 +246,11 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         ev.preventDefault();
         ev.stopPropagation();
 
-        if (tagId === DefaultTagID.Favourite) {
-            const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room);
-            const isFavourite = roomTags.includes(DefaultTagID.Favourite);
-            const removeTag = isFavourite ? DefaultTagID.Favourite : DefaultTagID.LowPriority;
-            const addTag = isFavourite ? null : DefaultTagID.Favourite;
+        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,
@@ -327,30 +341,30 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         if (this.state.notificationsMenuPosition) {
             contextMenu = (
                 <ContextMenu {...contextMenuBelow(this.state.notificationsMenuPosition)} onFinished={this.onCloseNotificationsMenu}>
-                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile2_contextMenu">
+                    <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_RoomTile2_iconBell"
+                                iconClassName="mx_RoomTile_iconBell"
                                 onClick={this.onClickAllNotifs}
                             />
                             <NotifOption
                                 label={_t("All messages")}
                                 active={state === ALL_MESSAGES_LOUD}
-                                iconClassName="mx_RoomTile2_iconBellDot"
+                                iconClassName="mx_RoomTile_iconBellDot"
                                 onClick={this.onClickAlertMe}
                             />
                             <NotifOption
                                 label={_t("Mentions & Keywords")}
                                 active={state === MENTIONS_ONLY}
-                                iconClassName="mx_RoomTile2_iconBellMentions"
+                                iconClassName="mx_RoomTile_iconBellMentions"
                                 onClick={this.onClickMentions}
                             />
                             <NotifOption
                                 label={_t("None")}
                                 active={state === MUTE}
-                                iconClassName="mx_RoomTile2_iconBellCrossed"
+                                iconClassName="mx_RoomTile_iconBellCrossed"
                                 onClick={this.onClickMute}
                             />
                         </div>
@@ -359,24 +373,24 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
             );
         }
 
-        const classes = classNames("mx_RoomTile2_notificationsButton", {
+        const classes = classNames("mx_RoomTile_notificationsButton", {
             // Show bell icon for the default case too.
-            mx_RoomTile2_iconBell: state === ALL_MESSAGES,
-            mx_RoomTile2_iconBellDot: state === ALL_MESSAGES_LOUD,
-            mx_RoomTile2_iconBellMentions: state === MENTIONS_ONLY,
-            mx_RoomTile2_iconBellCrossed: state === MUTE,
+            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_RoomTile2_notificationsButton_show: state === MUTE,
+            mx_RoomTile_notificationsButton_show: state === MUTE,
         });
 
         return (
             <React.Fragment>
-                <ContextMenuButton
+                <ContextMenuTooltipButton
                     className={classes}
                     onClick={this.onNotificationsMenuOpenClick}
-                    label={_t("Notification options")}
+                    title={_t("Notification options")}
                     isExpanded={!!this.state.notificationsMenuPosition}
                     tabIndex={isActive ? 0 : -1}
                 />
@@ -388,21 +402,14 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
     private renderGeneralMenu(): React.ReactElement {
         if (!this.showContextMenu) return null; // no menu to show
 
-        const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room);
-
-        const isFavorite = roomTags.includes(DefaultTagID.Favourite);
-        const favouriteIconClassName = isFavorite ? "mx_RoomTile2_iconFavorite" : "mx_RoomTile2_iconStar";
-        const favouriteLabelClassName = isFavorite ? "mx_RoomTile2_contextMenu_activeRow" : "";
-        const favouriteLabel = isFavorite ? _t("Favourited") : _t("Favourite");
-
         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_RoomTile2_contextMenu">
-                        <div className="mx_IconizedContextMenu_optionList mx_RoomTile2_contextMenu_redRow">
+                    <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_RoomTile2_iconSignOut" />
+                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSignOut" />
                                 <span className="mx_IconizedContextMenu_label">{_t("Forget Room")}</span>
                             </MenuItem>
                         </div>
@@ -410,27 +417,44 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
                 </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_RoomTile2_contextMenu">
+                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile_contextMenu">
                         <div className="mx_IconizedContextMenu_optionList">
                             <MenuItemCheckbox
-                                className={favouriteLabelClassName}
+                                className={isFavorite ? "mx_RoomTile_contextMenu_activeRow" : ""}
                                 onClick={(e) => this.onTagRoom(e, DefaultTagID.Favourite)}
                                 active={isFavorite}
                                 label={favouriteLabel}
                             >
-                                <span className={classNames("mx_IconizedContextMenu_icon", favouriteIconClassName)} />
+                                <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_RoomTile2_iconSettings" />
+                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSettings" />
                                 <span className="mx_IconizedContextMenu_label">{_t("Settings")}</span>
                             </MenuItem>
                         </div>
-                        <div className="mx_IconizedContextMenu_optionList mx_RoomTile2_contextMenu_redRow">
+                        <div className="mx_IconizedContextMenu_optionList mx_RoomTile_contextMenu_redRow">
                             <MenuItem onClick={this.onLeaveRoomClick} label={_t("Leave Room")}>
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconSignOut" />
+                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSignOut" />
                                 <span className="mx_IconizedContextMenu_label">{_t("Leave Room")}</span>
                             </MenuItem>
                         </div>
@@ -441,10 +465,10 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
 
         return (
             <React.Fragment>
-                <ContextMenuButton
-                    className="mx_RoomTile2_menuButton"
+                <ContextMenuTooltipButton
+                    className="mx_RoomTile_menuButton"
                     onClick={this.onGeneralMenuOpenClick}
-                    label={_t("Room options")}
+                    title={_t("Room options")}
                     isExpanded={!!this.state.generalMenuPosition}
                 />
                 {contextMenu}
@@ -454,10 +478,10 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
 
     public render(): React.ReactElement {
         const classes = classNames({
-            'mx_RoomTile2': true,
-            'mx_RoomTile2_selected': this.state.selected,
-            'mx_RoomTile2_hasMenuOpen': !!(this.state.generalMenuPosition || this.state.notificationsMenuPosition),
-            'mx_RoomTile2_minimized': this.props.isMinimized,
+            '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
@@ -471,9 +495,9 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         if (!this.props.isMinimized) {
             // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below
             badge = (
-                <div className="mx_RoomTile2_badgeContainer" aria-hidden="true">
+                <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
                     <NotificationBadge
-                        notification={this.state.notificationState}
+                        notification={this.notificationState}
                         forceCount={false}
                         roomId={this.props.room.roomId}
                     />
@@ -486,28 +510,22 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
         let messagePreview = null;
-        if (this.showMessagePreview) {
-            // The preview store heavily caches this info, so should be safe to hammer.
-            const text = MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag);
-
-            // Only show the preview if there is one to show.
-            if (text) {
-                messagePreview = (
-                    <div className="mx_RoomTile2_messagePreview" id={messagePreviewId(this.props.room.roomId)}>
-                        {text}
-                    </div>
-                );
-            }
+        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_RoomTile2_name": true,
-            "mx_RoomTile2_nameWithPreview": !!messagePreview,
-            "mx_RoomTile2_nameHasUnreadEvents": this.state.notificationState.isUnread,
+            "mx_RoomTile_name": true,
+            "mx_RoomTile_nameWithPreview": !!messagePreview,
+            "mx_RoomTile_nameHasUnreadEvents": this.notificationState.isUnread,
         });
 
         let nameContainer = (
-            <div className="mx_RoomTile2_nameContainer">
+            <div className="mx_RoomTile_nameContainer">
                 <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
                     {name}
                 </div>
@@ -520,15 +538,15 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         // 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.state.notificationState.hasMentions) {
+        } else if (this.notificationState.hasMentions) {
             ariaLabel += " " + _t("%(count)s unread messages including mentions.", {
-                count: this.state.notificationState.count,
+                count: this.notificationState.count,
             });
-        } else if (this.state.notificationState.hasUnreadCount) {
+        } else if (this.notificationState.hasUnreadCount) {
             ariaLabel += " " + _t("%(count)s unread messages.", {
-                count: this.state.notificationState.count,
+                count: this.notificationState.count,
             });
-        } else if (this.state.notificationState.isUnread) {
+        } else if (this.notificationState.isUnread) {
             ariaLabel += " " + _t("Unread messages.");
         }
 
@@ -537,30 +555,34 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
             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}) =>
-                        <AccessibleButton
+                        <Button
                             onFocus={onFocus}
                             tabIndex={isActive ? 0 : -1}
                             inputRef={ref}
                             className={classes}
-                            onMouseEnter={this.onTileMouseEnter}
-                            onMouseLeave={this.onTileMouseLeave}
                             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)}
-                        </AccessibleButton>
+                        </Button>
                     }
                 </RovingTabIndexWrapper>
             </React.Fragment>

src/components/views/rooms/RoomTileIcon.tsx

@@ -162,7 +162,6 @@ export default class RoomTileIcon extends React.Component<IProps, IState> {
 
         return <TextWithTooltip
             tooltip={tooltipText(this.state.icon)}
-            tooltipClass="mx_Tooltip_timeline"
             class={`mx_RoomTileIcon mx_RoomTileIcon_${this.state.icon.toLowerCase()}`}
         />;
     }

src/components/views/rooms/Stickerpicker.js

@@ -27,6 +27,7 @@ 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";
 
 // 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.
@@ -409,14 +410,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

@@ -16,7 +16,11 @@ limitations under the License.
 
 import React from "react";
 import classNames from "classnames";
-import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
+import {
+    RovingAccessibleButton,
+    RovingAccessibleTooltipButton,
+    RovingTabIndexWrapper
+} from "../../../accessibility/RovingTabIndex";
 import AccessibleButton from "../../views/elements/AccessibleButton";
 import NotificationBadge from "./NotificationBadge";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
@@ -55,10 +59,10 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
     public render(): React.ReactElement {
         // XXX: We copy classes because it's easier
         const classes = classNames({
-            'mx_RoomTile2': true,
+            'mx_RoomTile': true,
             'mx_TemporaryTile': true,
-            'mx_RoomTile2_selected': this.props.isSelected,
-            'mx_RoomTile2_minimized': this.props.isMinimized,
+            'mx_RoomTile_selected': this.props.isSelected,
+            'mx_RoomTile_minimized': this.props.isMinimized,
         });
 
         const badge = (
@@ -73,12 +77,12 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
         const nameClasses = classNames({
-            "mx_RoomTile2_name": true,
-            "mx_RoomTile2_nameHasUnreadEvents": this.props.notificationState.isUnread,
+            "mx_RoomTile_name": true,
+            "mx_RoomTile_nameHasUnreadEvents": this.props.notificationState.isUnread,
         });
 
         let nameContainer = (
-            <div className="mx_RoomTile2_nameContainer">
+            <div className="mx_RoomTile_nameContainer">
                 <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
                     {name}
                 </div>
@@ -86,30 +90,29 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
         );
         if (this.props.isMinimized) nameContainer = null;
 
+        let Button = RovingAccessibleButton;
+        if (this.props.isMinimized) {
+            Button = RovingAccessibleTooltipButton;
+        }
+
         return (
             <React.Fragment>
-                <RovingTabIndexWrapper>
-                    {({onFocus, isActive, ref}) =>
-                        <AccessibleButton
-                            onFocus={onFocus}
-                            tabIndex={isActive ? 0 : -1}
-                            inputRef={ref}
-                            className={classes}
-                            onMouseEnter={this.onTileMouseEnter}
-                            onMouseLeave={this.onTileMouseLeave}
-                            onClick={this.props.onClick}
-                            role="treeitem"
-                        >
-                            <div className="mx_RoomTile2_avatarContainer">
-                                {this.props.avatar}
-                            </div>
-                            {nameContainer}
-                            <div className="mx_RoomTile2_badgeContainer">
-                                {badge}
-                            </div>
-                        </AccessibleButton>
-                    }
-                </RovingTabIndexWrapper>
+                <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;

src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js

@@ -22,10 +22,6 @@ import * as sdk from "../../../../..";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import Modal from "../../../../../Modal";
 import dis from "../../../../../dispatcher/dispatcher";
-import RoomListStore from "../../../../../stores/room-list/RoomListStore2";
-import RoomListActions from "../../../../../actions/RoomListActions";
-import { DefaultTagID } from '../../../../../stores/room-list/models';
-import LabelledToggleSwitch from '../../../elements/LabelledToggleSwitch';
 
 export default class AdvancedRoomSettingsTab extends React.Component {
     static propTypes = {
@@ -36,13 +32,9 @@ export default class AdvancedRoomSettingsTab extends React.Component {
     constructor(props) {
         super(props);
 
-        const room = MatrixClientPeg.get().getRoom(props.roomId);
-        const roomTags = RoomListStore.instance.getTagsForRoom(room);
-
         this.state = {
             // This is eventually set to the value of room.getRecommendedVersion()
             upgradeRecommendation: null,
-            isLowPriorityRoom: roomTags.includes(DefaultTagID.LowPriority),
         };
     }
 
@@ -94,25 +86,6 @@ export default class AdvancedRoomSettingsTab extends React.Component {
         this.props.closeSettingsFn();
     };
 
-    _onToggleLowPriorityTag = (e) => {
-        this.setState({
-            isLowPriorityRoom: !this.state.isLowPriorityRoom,
-        });
-
-        const removeTag = this.state.isLowPriorityRoom ? DefaultTagID.LowPriority : DefaultTagID.Favourite;
-        const addTag = this.state.isLowPriorityRoom ? null : DefaultTagID.LowPriority;
-        const client = MatrixClientPeg.get();
-
-        dis.dispatch(RoomListActions.tagRoom(
-            client,
-            client.getRoom(this.props.roomId),
-            removeTag,
-            addTag,
-            undefined,
-            0,
-        ));
-    }
-
     render() {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
@@ -183,17 +156,6 @@ export default class AdvancedRoomSettingsTab extends React.Component {
                         {_t("Open Devtools")}
                     </AccessibleButton>
                 </div>
-                <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    <span className='mx_SettingsTab_subheading'>{_t('Make this room low priority')}</span>
-                    <LabelledToggleSwitch
-                        value={this.state.isLowPriorityRoom}
-                        onChange={this._onToggleLowPriorityTag}
-                        label={_t(
-                            "Low priority rooms show up at the bottom of your room list" +
-                            " in a dedicated section at the bottom of your room list",
-                        )}
-                    />
-                </div>
             </div>
         );
     }

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

@@ -66,6 +66,7 @@ export default class LabsUserSettingsTab extends React.Component {
                     <SettingsFlag name={"showHiddenEventsInTimeline"} level={SettingLevel.DEVICE} />
                     <SettingsFlag name={"lowBandwidth"} level={SettingLevel.DEVICE} />
                     <SettingsFlag name={"sendReadReceipts"} level={SettingLevel.ACCOUNT} />
+                    <SettingsFlag name={"advancedRoomListLogging"} level={SettingLevel.DEVICE} />
                 </div>
             </div>
         );

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

@@ -23,28 +23,12 @@ import SettingsStore from "../../../../../settings/SettingsStore";
 import Field from "../../../elements/Field";
 import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
-import {RoomListStoreTempProxy} from "../../../../../stores/room-list/RoomListStoreTempProxy";
 
 export default class PreferencesUserSettingsTab extends React.Component {
     static ROOM_LIST_SETTINGS = [
-        'RoomList.orderAlphabetically',
-        'RoomList.orderByImportance',
         'breadcrumbs',
     ];
 
-    // TODO: Remove temp structures: https://github.com/vector-im/riot-web/issues/14367
-    static ROOM_LIST_2_SETTINGS = [
-        'breadcrumbs',
-    ];
-
-    // TODO: Remove temp structures: https://github.com/vector-im/riot-web/issues/14367
-    static eligibleRoomListSettings = () => {
-        if (RoomListStoreTempProxy.isUsingNewStore()) {
-            return PreferencesUserSettingsTab.ROOM_LIST_2_SETTINGS;
-        }
-        return PreferencesUserSettingsTab.ROOM_LIST_SETTINGS;
-    };
-
     static COMPOSER_SETTINGS = [
         'MessageComposerInput.autoReplaceEmoji',
         'MessageComposerInput.suggestEmoji',
@@ -189,7 +173,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.eligibleRoomListSettings())}
+                    {this._renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
                 </div>
 
                 <div className="mx_SettingsTab_section">

src/components/views/voip/CallContainer.tsx

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import IncomingCallBox2 from './IncomingCallBox2';
-import CallPreview from './CallPreview2';
+import IncomingCallBox from './IncomingCallBox';
+import CallPreview from './CallPreview';
 import * as VectorConferenceHandler from '../../../VectorConferenceHandler';
 
 interface IProps {
@@ -30,8 +30,8 @@ interface IState {
 export default class CallContainer extends React.PureComponent<IProps, IState> {
     public render() {
         return <div className="mx_CallContainer">
-            <IncomingCallBox2 />
+            <IncomingCallBox />
             <CallPreview ConferenceHandler={VectorConferenceHandler} />
         </div>;
     }
-}
+}

src/components/views/voip/CallPreview.js

@@ -1,101 +0,0 @@
-/*
-Copyright 2017, 2018 New Vector 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 PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import RoomViewStore from '../../../stores/RoomViewStore';
-import CallHandler from '../../../CallHandler';
-import dis from '../../../dispatcher/dispatcher';
-import * as sdk from '../../../index';
-
-export default createReactClass({
-    displayName: 'CallPreview',
-
-    propTypes: {
-        // A Conference Handler implementation
-        // Must have a function signature:
-        //  getConferenceCallForRoom(roomId: string): MatrixCall
-        ConferenceHandler: PropTypes.object,
-    },
-
-    getInitialState: function() {
-        return {
-            roomId: RoomViewStore.getRoomId(),
-            activeCall: CallHandler.getAnyActiveCall(),
-        };
-    },
-
-    componentDidMount: function() {
-        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
-        this.dispatcherRef = dis.register(this._onAction);
-    },
-
-    componentWillUnmount: function() {
-        if (this._roomStoreToken) {
-            this._roomStoreToken.remove();
-        }
-        dis.unregister(this.dispatcherRef);
-    },
-
-    _onRoomViewStoreUpdate: function(payload) {
-        if (RoomViewStore.getRoomId() === this.state.roomId) return;
-        this.setState({
-            roomId: RoomViewStore.getRoomId(),
-        });
-    },
-
-    _onAction: function(payload) {
-        switch (payload.action) {
-            // listen for call state changes to prod the render method, which
-            // may hide the global CallView if the call it is tracking is dead
-            case 'call_state':
-                this.setState({
-                    activeCall: CallHandler.getAnyActiveCall(),
-                });
-                break;
-        }
-    },
-
-    _onCallViewClick: function() {
-        const call = CallHandler.getAnyActiveCall();
-        if (call) {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: call.groupRoomId || call.roomId,
-            });
-        }
-    },
-
-    render: function() {
-        const callForRoom = CallHandler.getCallForRoom(this.state.roomId);
-        const showCall = (this.state.activeCall && this.state.activeCall.call_state === 'connected' && !callForRoom);
-
-        if (showCall) {
-            const CallView = sdk.getComponent('voip.CallView');
-            return (
-                <CallView
-                    className="mx_LeftPanel_callView" showVoice={true} onClick={this._onCallViewClick}
-                    ConferenceHandler={this.props.ConferenceHandler}
-                />
-            );
-        }
-        const PersistentApp = sdk.getComponent('elements.PersistentApp');
-        return <PersistentApp />;
-    },
-});
-

src/components/views/voip/CallPreview.tsx

@@ -15,11 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
-
 import React from 'react';
 
-import CallView from "./CallView2";
+import CallView from "./CallView";
 import RoomViewStore from '../../../stores/RoomViewStore';
 import CallHandler from '../../../CallHandler';
 import dis from '../../../dispatcher/dispatcher';
@@ -37,7 +35,6 @@ interface IProps {
 interface IState {
     roomId: string;
     activeCall: any;
-    newRoomListActive: boolean;
 }
 
 export default class CallPreview extends React.Component<IProps, IState> {
@@ -51,12 +48,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
         this.state = {
             roomId: RoomViewStore.getRoomId(),
             activeCall: CallHandler.getAnyActiveCall(),
-            newRoomListActive: SettingsStore.getValue("feature_new_room_list"),
         };
-
-        this.settingsWatcherRef = SettingsStore.watchSetting("feature_new_room_list", null, (name, roomId, level, valAtLevel, newVal) => this.setState({
-            newRoomListActive: newVal,
-        }));
     }
 
     public componentDidMount() {
@@ -102,28 +94,25 @@ export default class CallPreview extends React.Component<IProps, IState> {
     };
 
     public render() {
-        if (this.state.newRoomListActive) {
-            const callForRoom = CallHandler.getCallForRoom(this.state.roomId);
-            const showCall = (
-                this.state.activeCall &&
-                this.state.activeCall.call_state === 'connected' &&
-                !callForRoom
+        const callForRoom = CallHandler.getCallForRoom(this.state.roomId);
+        const showCall = (
+            this.state.activeCall &&
+            this.state.activeCall.call_state === 'connected' &&
+            !callForRoom
+        );
+
+        if (showCall) {
+            return (
+                <CallView
+                    className="mx_CallPreview"
+                    onClick={this.onCallViewClick}
+                    ConferenceHandler={this.props.ConferenceHandler}
+                    showHangup={true}
+                />
             );
-
-            if (showCall) {
-                return (
-                    <CallView
-                        className="mx_CallPreview" onClick={this.onCallViewClick}
-                        ConferenceHandler={this.props.ConferenceHandler}
-                        showHangup={true}
-                    />
-                );
-            }
-
-            return <PersistentApp />;
         }
 
-        return null;
+        return <PersistentApp />;
     }
 }
 

src/components/views/voip/CallView.js

@@ -1,167 +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, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import dis from '../../../dispatcher/dispatcher';
-import CallHandler from '../../../CallHandler';
-import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
-    displayName: 'CallView',
-
-    propTypes: {
-        // js-sdk room object. If set, we will only show calls for the given
-        // room; if not, we will show any active call.
-        room: PropTypes.object,
-
-        // A Conference Handler implementation
-        // Must have a function signature:
-        //  getConferenceCallForRoom(roomId: string): MatrixCall
-        ConferenceHandler: PropTypes.object,
-
-        // maxHeight style attribute for the video panel
-        maxVideoHeight: PropTypes.number,
-
-        // a callback which is called when the user clicks on the video div
-        onClick: PropTypes.func,
-
-        // a callback which is called when the content in the callview changes
-        // in a way that is likely to cause a resize.
-        onResize: PropTypes.func,
-
-        // render ongoing audio call details - useful when in LeftPanel
-        showVoice: PropTypes.bool,
-    },
-
-    getInitialState: function() {
-        return {
-            // the call this view is displaying (if any)
-            call: null,
-        };
-    },
-
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
-        this._video = createRef();
-    },
-
-    componentDidMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-        this.showCall();
-    },
-
-    componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);
-    },
-
-    onAction: function(payload) {
-        // don't filter out payloads for room IDs other than props.room because
-        // we may be interested in the conf 1:1 room
-        if (payload.action !== 'call_state') {
-            return;
-        }
-        this.showCall();
-    },
-
-    showCall: function() {
-        let call;
-
-        if (this.props.room) {
-            const roomId = this.props.room.roomId;
-            call = CallHandler.getCallForRoom(roomId) ||
-                (this.props.ConferenceHandler ?
-                 this.props.ConferenceHandler.getConferenceCallForRoom(roomId) :
-                 null
-                );
-
-            if (this.call) {
-                this.setState({ call: call });
-            }
-        } else {
-            call = CallHandler.getAnyActiveCall();
-            // Ignore calls if we can't get the room associated with them.
-            // I think the underlying problem is that the js-sdk sends events
-            // for calls before it has made the rooms available in the store,
-            // although this isn't confirmed.
-            if (MatrixClientPeg.get().getRoom(call.roomId) === null) {
-                call = null;
-            }
-            this.setState({ call: call });
-        }
-
-        if (call) {
-            call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
-            call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
-            // always use a separate element for audio stream playback.
-            // this is to let us move CallView around the DOM without interrupting remote audio
-            // during playback, by having the audio rendered by a top-level <audio/> element.
-            // rather than being rendered by the main remoteVideo <video/> element.
-            call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
-        }
-        if (call && call.type === "video" && call.call_state !== "ended" && call.call_state !== "ringing") {
-            // if this call is a conf call, don't display local video as the
-            // conference will have us in it
-            this.getVideoView().getLocalVideoElement().style.display = (
-                call.confUserId ? "none" : "block"
-            );
-            this.getVideoView().getRemoteVideoElement().style.display = "block";
-        } else {
-            this.getVideoView().getLocalVideoElement().style.display = "none";
-            this.getVideoView().getRemoteVideoElement().style.display = "none";
-            dis.dispatch({action: 'video_fullscreen', fullscreen: false});
-        }
-
-        if (this.props.onResize) {
-            this.props.onResize();
-        }
-    },
-
-    getVideoView: function() {
-        return this._video.current;
-    },
-
-    render: function() {
-        const VideoView = sdk.getComponent('voip.VideoView');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
-        let voice;
-        if (this.state.call && this.state.call.type === "voice" && this.props.showVoice) {
-            const callRoom = MatrixClientPeg.get().getRoom(this.state.call.roomId);
-            voice = (
-                <AccessibleButton className="mx_CallView_voice" onClick={this.props.onClick}>
-                { _t("Active call (%(roomName)s)", {roomName: callRoom.name}) }
-                </AccessibleButton>
-            );
-        }
-
-        return (
-            <div>
-                <VideoView
-                    ref={this._video}
-                    onClick={this.props.onClick}
-                    onResize={this.props.onResize}
-                    maxHeight={this.props.maxVideoHeight}
-                />
-                { voice }
-            </div>
-        );
-    },
-});
-

src/components/views/voip/CallView.tsx

@@ -15,8 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
-
 import React, {createRef} from 'react';
 import Room from 'matrix-js-sdk/src/models/room';
 import dis from '../../../dispatcher/dispatcher';
@@ -156,7 +154,7 @@ export default class CallView extends React.Component<IProps, IState> {
             const client = MatrixClientPeg.get();
             const callRoom = client.getRoom(this.state.call.roomId);
 
-            view = <AccessibleButton className="mx_CallView2_voice" onClick={this.props.onClick}>
+            view = <AccessibleButton className="mx_CallView_voice" onClick={this.props.onClick}>
                 <PulsedAvatar>
                     <RoomAvatar
                         room={callRoom}
@@ -181,7 +179,7 @@ export default class CallView extends React.Component<IProps, IState> {
         let hangup: React.ReactNode;
         if (this.props.showHangup) {
             hangup = <div
-                className="mx_CallView2_hangup"
+                className="mx_CallView_hangup"
                 onClick={() => {
                     dis.dispatch({
                         action: 'hangup',

src/components/views/voip/IncomingCallBox.js

@@ -1,91 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector 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 PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher/dispatcher';
-import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
-
-export default createReactClass({
-    displayName: 'IncomingCallBox',
-
-    propTypes: {
-        incomingCall: PropTypes.object,
-    },
-
-    onAnswerClick: function(e) {
-        e.stopPropagation();
-        dis.dispatch({
-            action: 'answer',
-            room_id: this.props.incomingCall.roomId,
-        });
-    },
-
-    onRejectClick: function(e) {
-        e.stopPropagation();
-        dis.dispatch({
-            action: 'hangup',
-            room_id: this.props.incomingCall.roomId,
-        });
-    },
-
-    render: function() {
-        let room = null;
-        if (this.props.incomingCall) {
-            room = MatrixClientPeg.get().getRoom(this.props.incomingCall.roomId);
-        }
-
-        const caller = room ? room.name : _t("unknown caller");
-
-        let incomingCallText = null;
-        if (this.props.incomingCall) {
-            if (this.props.incomingCall.type === "voice") {
-                incomingCallText = _t("Incoming voice call from %(name)s", {name: caller});
-            } else if (this.props.incomingCall.type === "video") {
-                incomingCallText = _t("Incoming video call from %(name)s", {name: caller});
-            } else {
-                incomingCallText = _t("Incoming call from %(name)s", {name: caller});
-            }
-        }
-
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (
-            <div className="mx_IncomingCallBox" id="incomingCallBox">
-                <img className="mx_IncomingCallBox_chevron" src={require("../../../../res/img/chevron-left.png")} width="9" height="16" />
-                <div className="mx_IncomingCallBox_title">
-                    { incomingCallText }
-                </div>
-                <div className="mx_IncomingCallBox_buttons">
-                    <div className="mx_IncomingCallBox_buttons_cell">
-                        <AccessibleButton className="mx_IncomingCallBox_buttons_decline" onClick={this.onRejectClick}>
-                            { _t("Decline") }
-                        </AccessibleButton>
-                    </div>
-                    <div className="mx_IncomingCallBox_buttons_cell">
-                        <AccessibleButton className="mx_IncomingCallBox_buttons_accept" onClick={this.onAnswerClick}>
-                            { _t("Accept") }
-                        </AccessibleButton>
-                    </div>
-                </div>
-            </div>
-        );
-    },
-});
-

src/components/views/voip/IncomingCallBox.tsx

@@ -16,8 +16,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
-
 import React from 'react';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
@@ -35,7 +33,7 @@ interface IState {
     incomingCall: any;
 }
 
-export default class IncomingCallBox2 extends React.Component<IProps, IState> {
+export default class IncomingCallBox extends React.Component<IProps, IState> {
     private dispatcherRef: string;
 
     constructor(props: IProps) {
@@ -106,8 +104,8 @@ export default class IncomingCallBox2 extends React.Component<IProps, IState> {
             }
         }
 
-        return <div className="mx_IncomingCallBox2">
-            <div className="mx_IncomingCallBox2_CallerInfo">
+        return <div className="mx_IncomingCallBox">
+            <div className="mx_IncomingCallBox_CallerInfo">
                 <PulsedAvatar>
                     <RoomAvatar
                         room={room}
@@ -120,16 +118,16 @@ export default class IncomingCallBox2 extends React.Component<IProps, IState> {
                     <p>{incomingCallText}</p>
                 </div>
             </div>
-            <div className="mx_IncomingCallBox2_buttons">
+            <div className="mx_IncomingCallBox_buttons">
                 <FormButton
-                    className={"mx_IncomingCallBox2_decline"}
+                    className={"mx_IncomingCallBox_decline"}
                     onClick={this.onRejectClick}
                     kind="danger"
                     label={_t("Decline")}
                 />
-                <div className="mx_IncomingCallBox2_spacer" />
+                <div className="mx_IncomingCallBox_spacer" />
                 <FormButton
-                    className={"mx_IncomingCallBox2_accept"}
+                    className={"mx_IncomingCallBox_accept"}
                     onClick={this.onAnswerClick}
                     kind="primary"
                     label={_t("Accept")}

src/createRoom.ts

@@ -29,6 +29,9 @@ import {getAddressType} from "./UserAddress";
 
 const E2EE_WK_KEY = "im.vector.riot.e2ee";
 
+// we define a number of interfaces which take their names from the js-sdk
+/* eslint-disable camelcase */
+
 // TODO move these interfaces over to js-sdk once it has been typescripted enough to accept them
 enum Visibility {
     Public = "public",

src/dispatcher/actions.ts

@@ -45,11 +45,6 @@ export enum Action {
      */
     ViewRoomDirectory = "view_room_directory",
 
-    /**
-     * Sets the current tooltip. Should be use with ViewTooltipPayload.
-     */
-    ViewTooltip = "view_tooltip",
-
     /**
      * Forces the theme to reload. No additional payload information required.
      */

src/dispatcher/payloads/ViewTooltipPayload.ts

@@ -1,35 +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 { ActionPayload } from "../payloads";
-import { Action } from "../actions";
-import { Component } from "react";
-
-export interface ViewTooltipPayload extends ActionPayload {
-    action: Action.ViewTooltip;
-
-    /*
-     * The tooltip to render. If it's null the tooltip will not be rendered
-     * We need the void type because of typescript headaches.
-     */
-    tooltip: null | void | Element | Component<Element, any, any>;
-
-    /*
-     * The parent under which to render the tooltip. Can be null to remove
-     * the parent type.
-     */
-    parent: null | Element;
-}

src/editor/autocomplete.js

@@ -1,121 +0,0 @@
-/*
-Copyright 2019 New Vector 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.
-*/
-
-export default class AutocompleteWrapperModel {
-    constructor(updateCallback, getAutocompleterComponent, updateQuery, partCreator) {
-        this._updateCallback = updateCallback;
-        this._getAutocompleterComponent = getAutocompleterComponent;
-        this._updateQuery = updateQuery;
-        this._partCreator = partCreator;
-        this._query = null;
-    }
-
-    onEscape(e) {
-        this._getAutocompleterComponent().onEscape(e);
-        this._updateCallback({
-            replaceParts: [this._partCreator.plain(this._queryPart.text)],
-            close: true,
-        });
-    }
-
-    close() {
-        this._updateCallback({close: true});
-    }
-
-    hasSelection() {
-        return this._getAutocompleterComponent().hasSelection();
-    }
-
-    hasCompletions() {
-        const ac = this._getAutocompleterComponent();
-        return ac && ac.countCompletions() > 0;
-    }
-
-    onEnter() {
-        this._updateCallback({close: true});
-    }
-
-    async onTab(e) {
-        const acComponent = this._getAutocompleterComponent();
-
-        if (acComponent.countCompletions() === 0) {
-            // Force completions to show for the text currently entered
-            await acComponent.forceComplete();
-            // Select the first item by moving "down"
-            await acComponent.moveSelection(+1);
-        } else {
-            await acComponent.moveSelection(e.shiftKey ? -1 : +1);
-        }
-    }
-
-    onUpArrow() {
-        this._getAutocompleterComponent().moveSelection(-1);
-    }
-
-    onDownArrow() {
-        this._getAutocompleterComponent().moveSelection(+1);
-    }
-
-    onPartUpdate(part, pos) {
-        // cache the typed value and caret here
-        // so we can restore it in onComponentSelectionChange when the value is undefined (meaning it should be the typed text)
-        this._queryPart = part;
-        this._partIndex = pos.index;
-        return this._updateQuery(part.text);
-    }
-
-    onComponentSelectionChange(completion) {
-        if (!completion) {
-            this._updateCallback({
-                replaceParts: [this._queryPart],
-            });
-        } else {
-            this._updateCallback({
-                replaceParts: this._partForCompletion(completion),
-            });
-        }
-    }
-
-    onComponentConfirm(completion) {
-        this._updateCallback({
-            replaceParts: this._partForCompletion(completion),
-            close: true,
-        });
-    }
-
-    _partForCompletion(completion) {
-        const {completionId} = completion;
-        const text = completion.completion;
-        switch (completion.type) {
-            case "room":
-                return [this._partCreator.roomPill(text, completionId), this._partCreator.plain(completion.suffix)];
-            case "at-room":
-                return [this._partCreator.atRoomPill(completionId), this._partCreator.plain(completion.suffix)];
-            case "user":
-                // not using suffix here, because we also need to calculate
-                // the suffix when clicking a display name to insert a mention,
-                // which happens in createMentionParts
-                return this._partCreator.createMentionParts(this._partIndex, text, completionId);
-            case "command":
-                // command needs special handling for auto complete, but also renders as plain texts
-                return [this._partCreator.command(text)];
-            default:
-                // used for emoji and other plain text completion replacement
-                return [this._partCreator.plain(text)];
-        }
-    }
-}

src/editor/autocomplete.ts

@@ -0,0 +1,140 @@
+/*
+Copyright 2019 New Vector 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 {KeyboardEvent} from "react";
+
+import {Part, CommandPartCreator, PartCreator} from "./parts";
+import DocumentPosition from "./position";
+import {ICompletion} from "../autocomplete/Autocompleter";
+import Autocomplete from "../components/views/rooms/Autocomplete";
+
+export interface ICallback {
+    replaceParts?: Part[];
+    close?: boolean;
+}
+
+export type UpdateCallback = (data: ICallback) => void;
+export type GetAutocompleterComponent = () => Autocomplete;
+export type UpdateQuery = (test: string) => Promise<void>;
+
+export default class AutocompleteWrapperModel {
+    private queryPart: Part;
+    private partIndex: number;
+
+    constructor(
+        private updateCallback: UpdateCallback,
+        private getAutocompleterComponent: GetAutocompleterComponent,
+        private updateQuery: UpdateQuery,
+        private partCreator: PartCreator | CommandPartCreator,
+    ) {
+    }
+
+    public onEscape(e: KeyboardEvent) {
+        this.getAutocompleterComponent().onEscape(e);
+        this.updateCallback({
+            replaceParts: [this.partCreator.plain(this.queryPart.text)],
+            close: true,
+        });
+    }
+
+    public close() {
+        this.updateCallback({close: true});
+    }
+
+    public hasSelection() {
+        return this.getAutocompleterComponent().hasSelection();
+    }
+
+    public hasCompletions() {
+        const ac = this.getAutocompleterComponent();
+        return ac && ac.countCompletions() > 0;
+    }
+
+    public onEnter() {
+        this.updateCallback({close: true});
+    }
+
+    public async onTab(e: KeyboardEvent) {
+        const acComponent = this.getAutocompleterComponent();
+
+        if (acComponent.countCompletions() === 0) {
+            // Force completions to show for the text currently entered
+            await acComponent.forceComplete();
+            // Select the first item by moving "down"
+            await acComponent.moveSelection(+1);
+        } else {
+            await acComponent.moveSelection(e.shiftKey ? -1 : +1);
+        }
+    }
+
+    public onUpArrow(e: KeyboardEvent) {
+        this.getAutocompleterComponent().moveSelection(-1);
+    }
+
+    public onDownArrow(e: KeyboardEvent) {
+        this.getAutocompleterComponent().moveSelection(+1);
+    }
+
+    public onPartUpdate(part: Part, pos: DocumentPosition) {
+        // cache the typed value and caret here
+        // so we can restore it in onComponentSelectionChange when the value is undefined (meaning it should be the typed text)
+        this.queryPart = part;
+        this.partIndex = pos.index;
+        return this.updateQuery(part.text);
+    }
+
+    public onComponentSelectionChange(completion: ICompletion) {
+        if (!completion) {
+            this.updateCallback({
+                replaceParts: [this.queryPart],
+            });
+        } else {
+            this.updateCallback({
+                replaceParts: this.partForCompletion(completion),
+            });
+        }
+    }
+
+    public onComponentConfirm(completion: ICompletion) {
+        this.updateCallback({
+            replaceParts: this.partForCompletion(completion),
+            close: true,
+        });
+    }
+
+    private partForCompletion(completion: ICompletion) {
+        const {completionId} = completion;
+        const text = completion.completion;
+        switch (completion.type) {
+            case "room":
+                return [this.partCreator.roomPill(text, completionId), this.partCreator.plain(completion.suffix)];
+            case "at-room":
+                return [this.partCreator.atRoomPill(completionId), this.partCreator.plain(completion.suffix)];
+            case "user":
+                // not using suffix here, because we also need to calculate
+                // the suffix when clicking a display name to insert a mention,
+                // which happens in createMentionParts
+                return this.partCreator.createMentionParts(this.partIndex, text, completionId);
+            case "command":
+                // command needs special handling for auto complete, but also renders as plain texts
+                return [(this.partCreator as CommandPartCreator).command(text)];
+            default:
+                // used for emoji and other plain text completion replacement
+                return [this.partCreator.plain(text)];
+        }
+    }
+}

src/editor/caret.ts

@@ -17,8 +17,13 @@ limitations under the License.
 
 import {needsCaretNodeBefore, needsCaretNodeAfter} from "./render";
 import Range from "./range";
+import EditorModel from "./model";
+import DocumentPosition, {IPosition} from "./position";
+import {Part} from "./parts";
 
-export function setSelection(editor, model, selection) {
+export type Caret = Range | DocumentPosition;
+
+export function setSelection(editor: HTMLDivElement, model: EditorModel, selection: Range | IPosition) {
     if (selection instanceof Range) {
         setDocumentRangeSelection(editor, model, selection);
     } else {
@@ -26,7 +31,7 @@ export function setSelection(editor, model, selection) {
     }
 }
 
-function setDocumentRangeSelection(editor, model, range) {
+function setDocumentRangeSelection(editor: HTMLDivElement, model: EditorModel, range: Range) {
     const sel = document.getSelection();
     sel.removeAllRanges();
     const selectionRange = document.createRange();
@@ -37,7 +42,7 @@ function setDocumentRangeSelection(editor, model, range) {
     sel.addRange(selectionRange);
 }
 
-export function setCaretPosition(editor, model, caretPosition) {
+export function setCaretPosition(editor: HTMLDivElement, model: EditorModel, caretPosition: IPosition) {
     const range = document.createRange();
     const {node, offset} = getNodeAndOffsetForPosition(editor, model, caretPosition);
     range.setStart(node, offset);
@@ -62,7 +67,7 @@ export function setCaretPosition(editor, model, caretPosition) {
     sel.addRange(range);
 }
 
-function getNodeAndOffsetForPosition(editor, model, position) {
+function getNodeAndOffsetForPosition(editor: HTMLDivElement, model: EditorModel, position: IPosition) {
     const {offset, lineIndex, nodeIndex} = getLineAndNodePosition(model, position);
     const lineNode = editor.childNodes[lineIndex];
 
@@ -80,7 +85,7 @@ function getNodeAndOffsetForPosition(editor, model, position) {
     return {node: focusNode, offset};
 }
 
-export function getLineAndNodePosition(model, caretPosition) {
+export function getLineAndNodePosition(model: EditorModel, caretPosition: IPosition) {
     const {parts} = model;
     const partIndex = caretPosition.index;
     const lineResult = findNodeInLineForPart(parts, partIndex);
@@ -99,7 +104,7 @@ export function getLineAndNodePosition(model, caretPosition) {
     return {lineIndex, nodeIndex, offset};
 }
 
-function findNodeInLineForPart(parts, partIndex) {
+function findNodeInLineForPart(parts: Part[], partIndex: number) {
     let lineIndex = 0;
     let nodeIndex = -1;
 
@@ -135,7 +140,7 @@ function findNodeInLineForPart(parts, partIndex) {
     return {lineIndex, nodeIndex};
 }
 
-function moveOutOfUneditablePart(parts, partIndex, nodeIndex, offset) {
+function moveOutOfUneditablePart(parts: Part[], partIndex: number, nodeIndex: number, offset: number) {
     // move caret before or after uneditable part
     const part = parts[partIndex];
     if (part && !part.canEdit) {

src/editor/deserialize.ts

@@ -64,7 +64,7 @@ function parseCodeBlock(n: HTMLElement, partCreator: PartCreator) {
     let language = "";
     if (n.firstChild && n.firstChild.nodeName === "CODE") {
         for (const className of (<HTMLElement>n.firstChild).classList) {
-            if (className.startsWith("language-")) {
+            if (className.startsWith("language-") && !className.startsWith("language-_")) {
                 language = className.substr("language-".length);
                 break;
             }
@@ -257,7 +257,7 @@ function parseHtmlMessage(html: string, partCreator: PartCreator, isQuotedMessag
     return parts;
 }
 
-export function parsePlainTextMessage(body: string, partCreator: PartCreator, isQuotedMessage: boolean) {
+export function parsePlainTextMessage(body: string, partCreator: PartCreator, isQuotedMessage?: boolean) {
     const lines = body.split(/\r\n|\r|\n/g); // split on any new-line combination not just \n, collapses \r\n
     return lines.reduce((parts, line, i) => {
         if (isQuotedMessage) {

src/editor/diff.ts

@@ -15,7 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-function firstDiff(a, b) {
+export interface IDiff {
+    removed?: string;
+    added?: string;
+    at?: number;
+}
+
+function firstDiff(a: string, b: string) {
     const compareLen = Math.min(a.length, b.length);
     for (let i = 0; i < compareLen; ++i) {
         if (a[i] !== b[i]) {
@@ -25,7 +31,7 @@ function firstDiff(a, b) {
     return compareLen;
 }
 
-function diffStringsAtEnd(oldStr, newStr) {
+function diffStringsAtEnd(oldStr: string, newStr: string): IDiff {
     const len = Math.min(oldStr.length, newStr.length);
     const startInCommon = oldStr.substr(0, len) === newStr.substr(0, len);
     if (startInCommon && oldStr.length > newStr.length) {
@@ -43,7 +49,7 @@ function diffStringsAtEnd(oldStr, newStr) {
 }
 
 // assumes only characters have been deleted at one location in the string, and none added
-export function diffDeletion(oldStr, newStr) {
+export function diffDeletion(oldStr: string, newStr: string): IDiff {
     if (oldStr === newStr) {
         return {};
     }
@@ -61,7 +67,7 @@ export function diffDeletion(oldStr, newStr) {
  *                  `added` with the added string (if any), and
  *                  `removed` with the removed string (if any)
  */
-export function diffAtCaret(oldValue, newValue, caretPosition) {
+export function diffAtCaret(oldValue: string, newValue: string, caretPosition: number): IDiff {
     const diffLen = newValue.length - oldValue.length;
     const caretPositionBeforeInput = caretPosition - diffLen;
     const oldValueBeforeCaret = oldValue.substr(0, caretPositionBeforeInput);

src/editor/dom.ts

@@ -18,7 +18,10 @@ limitations under the License.
 import {CARET_NODE_CHAR, isCaretNode} from "./render";
 import DocumentOffset from "./offset";
 
-export function walkDOMDepthFirst(rootNode, enterNodeCallback, leaveNodeCallback) {
+type Predicate = (node: Node) => boolean;
+type Callback = (node: Node) => void;
+
+export function walkDOMDepthFirst(rootNode: Node, enterNodeCallback: Predicate, leaveNodeCallback: Callback) {
     let node = rootNode.firstChild;
     while (node && node !== rootNode) {
         const shouldDescend = enterNodeCallback(node);
@@ -40,12 +43,12 @@ export function walkDOMDepthFirst(rootNode, enterNodeCallback, leaveNodeCallback
     }
 }
 
-export function getCaretOffsetAndText(editor, sel) {
+export function getCaretOffsetAndText(editor: HTMLDivElement, sel: Selection) {
     const {offset, text} = getSelectionOffsetAndText(editor, sel.focusNode, sel.focusOffset);
     return {caret: offset, text};
 }
 
-function tryReduceSelectionToTextNode(selectionNode, selectionOffset) {
+function tryReduceSelectionToTextNode(selectionNode: Node, selectionOffset: number) {
     // if selectionNode is an element, the selected location comes after the selectionOffset-th child node,
     // which can point past any childNode, in which case, the end of selectionNode is selected.
     // we try to simplify this to point at a text node with the offset being
@@ -82,7 +85,7 @@ function tryReduceSelectionToTextNode(selectionNode, selectionOffset) {
     };
 }
 
-function getSelectionOffsetAndText(editor, selectionNode, selectionOffset) {
+function getSelectionOffsetAndText(editor: HTMLDivElement, selectionNode: Node, selectionOffset: number) {
     const {node, characterOffset} = tryReduceSelectionToTextNode(selectionNode, selectionOffset);
     const {text, offsetToNode} = getTextAndOffsetToNode(editor, node);
     const offset = getCaret(node, offsetToNode, characterOffset);
@@ -91,7 +94,7 @@ function getSelectionOffsetAndText(editor, selectionNode, selectionOffset) {
 
 // gets the caret position details, ignoring and adjusting to
 // the ZWS if you're typing in a caret node
-function getCaret(node, offsetToNode, offsetWithinNode) {
+function getCaret(node: Node, offsetToNode: number, offsetWithinNode: number) {
     // if no node is selected, return an offset at the start
     if (!node) {
         return new DocumentOffset(0, false);
@@ -114,7 +117,7 @@ function getCaret(node, offsetToNode, offsetWithinNode) {
 // gets the text of the editor as a string,
 // and the offset in characters where the selectionNode starts in that string
 // all ZWS from caret nodes are filtered out
-function getTextAndOffsetToNode(editor, selectionNode) {
+function getTextAndOffsetToNode(editor: HTMLDivElement, selectionNode: Node) {
     let offsetToNode = 0;
     let foundNode = false;
     let text = "";