Merge branch 'develop' into poljar/seshat-search-pagination

src/components/structures/HomePage.tsx

@@ -22,9 +22,10 @@ import { _t } from "../../languageHandler";
 import SdkConfig from "../../SdkConfig";
 import * as sdk from "../../index";
 import dis from "../../dispatcher/dispatcher";
+import { Action } from "../../dispatcher/actions";
 
 const onClickSendDm = () => dis.dispatch({action: 'view_create_chat'});
-const onClickExplore = () => dis.dispatch({action: 'view_room_directory'});
+const onClickExplore = () => dis.fire(Action.ViewRoomDirectory);
 const onClickNewRoom = () => dis.dispatch({action: 'view_create_room'});
 
 const HomePage = () => {

src/components/structures/LeftPanel.js

@@ -26,7 +26,7 @@ import * as VectorConferenceHandler from '../../VectorConferenceHandler';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import Analytics from "../../Analytics";
-import RoomList2 from "../views/rooms/RoomList2";
+import {Action} from "../../dispatcher/actions";
 
 
 const LeftPanel = createReactClass({
@@ -198,7 +198,7 @@ const LeftPanel = createReactClass({
 
     onSearchCleared: function(source) {
         if (source === "keyboard") {
-            dis.dispatch({action: 'focus_composer'});
+            dis.fire(Action.FocusComposer);
         }
         this.setState({searchExpanded: false});
     },
@@ -252,7 +252,7 @@ const LeftPanel = createReactClass({
         if (!this.props.collapsed) {
             exploreButton = (
                 <div className={classNames("mx_LeftPanel_explore", {"mx_LeftPanel_explore_hidden": this.state.searchExpanded})}>
-                    <AccessibleButton onClick={() => dis.dispatch({action: 'view_room_directory'})}>{_t("Explore")}</AccessibleButton>
+                    <AccessibleButton onClick={() => dis.fire(Action.ViewRoomDirectory)}>{_t("Explore")}</AccessibleButton>
                 </div>
             );
         }
@@ -274,28 +274,15 @@ const LeftPanel = createReactClass({
             breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
         }
 
-        let roomList = null;
-        if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
-            roomList = <RoomList2
-                onKeyDown={this._onKeyDown}
-                resizeNotifier={this.props.resizeNotifier}
-                collapsed={this.props.collapsed}
-                searchFilter={this.state.searchFilter}
-                ref={this.collectRoomList}
-                onFocus={this._onFocus}
-                onBlur={this._onBlur}
-            />;
-        } else {
-            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} />;
-        }
+        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}>

src/components/structures/LeftPanel2.tsx

@@ -0,0 +1,166 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import TagPanel from "./TagPanel";
+import classNames from "classnames";
+import dis from "../../dispatcher/dispatcher";
+import { _t } from "../../languageHandler";
+import SearchBox from "./SearchBox";
+import RoomList2 from "../views/rooms/RoomList2";
+import { Action } from "../../dispatcher/actions";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import BaseAvatar from '../views/avatars/BaseAvatar';
+import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
+import UserMenuButton from "./UserMenuButton";
+import RoomSearch from "./RoomSearch";
+import AccessibleButton from "../views/elements/AccessibleButton";
+
+/*******************************************************************
+ *   CAUTION                                                       *
+ *******************************************************************
+ * This is a work in progress implementation and isn't complete or *
+ * even useful as a component. Please avoid using it until this    *
+ * warning disappears.                                             *
+ *******************************************************************/
+
+interface IProps {
+    // TODO: Support collapsed state
+}
+
+interface IState {
+    searchFilter: string; // TODO: Move search into room list?
+}
+
+export default class LeftPanel2 extends React.Component<IProps, IState> {
+    // TODO: Properly support TagPanel
+    // TODO: Properly support searching/filtering
+    // TODO: Properly support breadcrumbs
+    // TODO: a11y
+    // TODO: actually make this useful in general (match design proposals)
+    // TODO: Fadable support (is this still needed?)
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            searchFilter: "",
+        };
+    }
+
+    private onSearch = (term: string): void => {
+        this.setState({searchFilter: term});
+    };
+
+    private onExplore = () => {
+        dis.fire(Action.ViewRoomDirectory);
+    };
+
+    private renderHeader(): React.ReactNode {
+        // TODO: Update when profile info changes
+        // TODO: Presence
+        // TODO: Breadcrumbs toggle
+        // TODO: Menu button
+        const avatarSize = 32;
+        // TODO: Don't do this profile lookup in render()
+        const client = MatrixClientPeg.get();
+        let displayName = client.getUserId();
+        let avatarUrl: string = null;
+        const myUser = client.getUser(client.getUserId());
+        if (myUser) {
+            displayName = myUser.rawDisplayName;
+            avatarUrl = myUser.avatarUrl;
+        }
+        return (
+            <div className="mx_LeftPanel2_userHeader">
+                <div className="mx_LeftPanel2_headerRow">
+                    <span className="mx_LeftPanel2_userAvatarContainer">
+                        <BaseAvatar
+                            idName={MatrixClientPeg.get().getUserId()}
+                            name={displayName}
+                            url={avatarUrl}
+                            width={avatarSize}
+                            height={avatarSize}
+                            resizeMethod="crop"
+                            className="mx_LeftPanel2_userAvatar"
+                        />
+                    </span>
+                    <span className="mx_LeftPanel2_userName">{displayName}</span>
+                    <span className="mx_LeftPanel2_headerButtons">
+                        <UserMenuButton />
+                    </span>
+                </div>
+                <div className="mx_LeftPanel2_headerRow mx_LeftPanel2_breadcrumbsContainer">
+                    <RoomBreadcrumbs />
+                </div>
+            </div>
+        );
+    }
+
+    private renderSearchExplore(): React.ReactNode {
+        // TODO: Collapsed support
+
+        return (
+            <div className="mx_LeftPanel2_filterContainer">
+                <RoomSearch onQueryUpdate={this.onSearch} />
+                <AccessibleButton
+                    tabIndex={-1}
+                    className='mx_LeftPanel2_exploreButton'
+                    onClick={this.onExplore}
+                    alt={_t("Explore rooms")}
+                />
+            </div>
+        );
+    }
+
+    public render(): React.ReactNode {
+        const tagPanel = (
+            <div className="mx_LeftPanel2_tagPanelContainer">
+                <TagPanel/>
+            </div>
+        );
+
+        // TODO: Improve props for RoomList2
+        const roomList = <RoomList2
+            onKeyDown={() => {/*TODO*/}}
+            resizeNotifier={null}
+            collapsed={false}
+            searchFilter={this.state.searchFilter}
+            onFocus={() => {/*TODO*/}}
+            onBlur={() => {/*TODO*/}}
+        />;
+
+        // TODO: Breadcrumbs
+        // TODO: Conference handling / calls
+
+        const containerClasses = classNames({
+            "mx_LeftPanel2": true,
+        });
+
+        return (
+            <div className={containerClasses}>
+                {tagPanel}
+                <aside className="mx_LeftPanel2_roomListContainer">
+                    {this.renderHeader()}
+                    {this.renderSearchExplore()}
+                    <div className="mx_LeftPanel2_actualRoomListContainer">
+                        {roomList}
+                    </div>
+                </aside>
+            </div>
+        );
+    }
+}

src/components/structures/LoggedInView.tsx

@@ -51,6 +51,8 @@ import {
     showToast as showServerLimitToast,
     hideToast as hideServerLimitToast
 } from "../../toasts/ServerLimitToast";
+import { Action } from "../../dispatcher/actions";
+import LeftPanel2 from "./LeftPanel2";
 
 // 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.
@@ -358,7 +360,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
             // refocusing during a paste event will make the
             // paste end up in the newly focused element,
             // so dispatch synchronously before paste happens
-            dis.dispatch({action: 'focus_composer'}, true);
+            dis.fire(Action.FocusComposer, true);
         }
     };
 
@@ -450,9 +452,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
                 // composer, so CTRL+` it is
 
                 if (ctrlCmdOnly) {
-                    dis.dispatch({
-                        action: 'toggle_top_left_menu',
-                    });
+                    dis.fire(Action.ToggleUserMenu);
                     handled = true;
                 }
                 break;
@@ -508,7 +508,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
 
             if (!isClickShortcut && ev.key !== Key.TAB && !canElementReceiveInput(ev.target)) {
                 // synchronous dispatch so we focus before key generates input
-                dis.dispatch({action: 'focus_composer'}, true);
+                dis.fire(Action.FocusComposer, true);
                 ev.stopPropagation();
                 // we should *not* preventDefault() here as
                 // that would prevent typing in the now-focussed composer
@@ -667,6 +667,20 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
             bodyClasses += ' mx_MatrixChat_useCompactLayout';
         }
 
+        let leftPanel = (
+            <LeftPanel
+                resizeNotifier={this.props.resizeNotifier}
+                collapsed={this.props.collapseLhs || false}
+                disabled={this.props.leftDisabled}
+            />
+        );
+        if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
+            // TODO: Supply props like collapsed and disabled to LeftPanel2
+            leftPanel = (
+                <LeftPanel2 />
+            );
+        }
+
         return (
             <MatrixClientContext.Provider value={this._matrixClient}>
                 <div
@@ -680,11 +694,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
                     <ToastContainer />
                     <DragDropContext onDragEnd={this._onDragEnd}>
                         <div ref={this._resizeContainer} className={bodyClasses}>
-                            <LeftPanel
-                                resizeNotifier={this.props.resizeNotifier}
-                                collapsed={this.props.collapseLhs || false}
-                                disabled={this.props.leftDisabled}
-                            />
+                            { leftPanel }
                             <ResizeHandle />
                             { pageElement }
                         </div>

src/components/structures/MatrixChat.tsx

@@ -72,6 +72,7 @@ import {
     hideToast as hideAnalyticsToast
 } from "../../toasts/AnalyticsToast";
 import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast";
+import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -347,7 +348,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             Analytics.trackPageChange(durationMs);
         }
         if (this.focusComposer) {
-            dis.dispatch({action: 'focus_composer'});
+            dis.fire(Action.FocusComposer);
             this.focusComposer = false;
         }
     }
@@ -604,9 +605,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 this.viewIndexedRoom(payload.roomIndex);
                 break;
             case Action.ViewUserSettings: {
+                const tabPayload = payload as OpenToTabPayload;
                 const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
-                Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {},
-                    /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
+                Modal.createTrackedDialog('User settings', '', UserSettingsDialog,
+                    {initialTabId: tabPayload.initialTabId},
+                    /*className=*/null, /*isPriority=*/false, /*isStatic=*/true
+                );
 
                 // View the welcome or home page if we need something to look at
                 this.viewSomethingBehindModal();
@@ -620,7 +624,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
                 break;
             }
-            case 'view_room_directory': {
+            case Action.ViewRoomDirectory: {
                 const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
                 Modal.createTrackedDialog('Room directory', '', RoomDirectory, {},
                     'mx_RoomDirectory_dialogWrapper', false, true);
@@ -1363,7 +1367,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 showNotificationsToast();
             }
 
-            dis.dispatch({action: 'focus_composer'});
+            dis.fire(Action.FocusComposer);
             this.setState({
                 ready: true,
             });
@@ -1607,9 +1611,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 action: 'require_registration',
             });
         } else if (screen === 'directory') {
-            dis.dispatch({
-                action: 'view_room_directory',
-            });
+            dis.fire(Action.ViewRoomDirectory);
         } else if (screen === 'groups') {
             dis.dispatch({
                 action: 'view_my_groups',

src/components/structures/RoomSearch.tsx

@@ -0,0 +1,144 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import { createRef } from "react";
+import classNames from "classnames";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { _t } from "../../languageHandler";
+import { ActionPayload } from "../../dispatcher/payloads";
+import { throttle } from 'lodash';
+import { Key } from "../../Keyboard";
+import AccessibleButton from "../views/elements/AccessibleButton";
+import { Action } from "../../dispatcher/actions";
+
+/*******************************************************************
+ *   CAUTION                                                       *
+ *******************************************************************
+ * This is a work in progress implementation and isn't complete or *
+ * even useful as a component. Please avoid using it until this    *
+ * warning disappears.                                             *
+ *******************************************************************/
+
+interface IProps {
+    onQueryUpdate: (newQuery: string) => void;
+}
+
+interface IState {
+    query: string;
+    focused: boolean;
+}
+
+export default class RoomSearch extends React.PureComponent<IProps, IState> {
+    private dispatcherRef: string;
+    private inputRef: React.RefObject<HTMLInputElement> = createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            query: "",
+            focused: false,
+        };
+
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+    }
+
+    public componentWillUnmount() {
+        defaultDispatcher.unregister(this.dispatcherRef);
+    }
+
+    private onAction = (payload: ActionPayload) => {
+        if (payload.action === 'view_room' && payload.clear_search) {
+            this.clearInput();
+        } else if (payload.action === 'focus_room_filter' && this.inputRef.current) {
+            this.inputRef.current.focus();
+        }
+    };
+
+    private clearInput = () => {
+        if (!this.inputRef.current) return;
+        this.inputRef.current.value = "";
+        this.onChange();
+    };
+
+    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();
+    };
+
+    private onBlur = () => {
+        this.setState({focused: false});
+    };
+
+    private onKeyDown = (ev: React.KeyboardEvent) => {
+        if (ev.key === Key.ESCAPE) {
+            this.clearInput();
+            defaultDispatcher.fire(Action.FocusComposer);
+        }
+    };
+
+    public render(): React.ReactNode {
+        const classes = classNames({
+            'mx_RoomSearch': true,
+            'mx_RoomSearch_expanded': this.state.query || this.state.focused,
+        });
+
+        const inputClasses = classNames({
+            'mx_RoomSearch_input': true,
+            'mx_RoomSearch_inputExpanded': this.state.query || this.state.focused,
+        });
+
+        return (
+            <div className={classes}>
+                <div className='mx_RoomSearch_icon'/>
+                <input
+                    type="text"
+                    ref={this.inputRef}
+                    className={inputClasses}
+                    value={this.state.query}
+                    onFocus={this.onFocus}
+                    onBlur={this.onBlur}
+                    onChange={this.onChange}
+                    onKeyDown={this.onKeyDown}
+                    placeholder={_t("Search")}
+                    autoComplete="off"
+                />
+                <AccessibleButton
+                    tabIndex={-1}
+                    className='mx_RoomSearch_clearButton'
+                    onClick={this.clearInput}
+                />
+            </div>
+        );
+    }
+}

src/components/structures/RoomStatusBar.js

@@ -26,6 +26,7 @@ import {MatrixClientPeg} from '../../MatrixClientPeg';
 import Resend from '../../Resend';
 import dis from '../../dispatcher/dispatcher';
 import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
+import {Action} from "../../dispatcher/actions";
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -127,12 +128,12 @@ export default createReactClass({
 
     _onResendAllClick: function() {
         Resend.resendUnsentEvents(this.props.room);
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     _onCancelAllClick: function() {
         Resend.cancelUnsentEvents(this.props.room);
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     _onRoomLocalEchoUpdated: function(event, room, oldEventId, oldStatus) {

src/components/structures/RoomView.js

@@ -55,6 +55,7 @@ import {haveTileForEvent} from "../views/rooms/EventTile";
 import RoomContext from "../../contexts/RoomContext";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { shieldStatusForRoom } from '../../utils/ShieldUtils';
+import {Action} from "../../dispatcher/actions";
 
 const DEBUG = false;
 let debuglog = function() {};
@@ -1161,7 +1162,7 @@ export default createReactClass({
             ev.dataTransfer.files, this.state.room.roomId, this.context,
         );
         this.setState({ draggingFile: false });
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     onDragLeaveOrEnd: function(ev) {
@@ -1367,7 +1368,7 @@ export default createReactClass({
                 event: null,
             });
         }
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     onLeaveClick: function() {
@@ -1456,9 +1457,7 @@ export default createReactClass({
         // using /leave rather than /join. In the short term though, we
         // just ignore them.
         // https://github.com/vector-im/vector-web/issues/1134
-        dis.dispatch({
-            action: 'view_room_directory',
-        });
+        dis.fire(Action.ViewRoomDirectory);
     },
 
     onSearchClick: function() {
@@ -1478,7 +1477,7 @@ export default createReactClass({
     // jump down to the bottom of this room, where new events are arriving
     jumpToLiveTimeline: function() {
         this._messagePanel.jumpToLiveTimeline();
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     // jump up to wherever our read marker is

src/components/structures/TabbedView.tsx

@@ -27,25 +27,20 @@ import { ReactNode } from "react";
  * Represents a tab for the TabbedView.
  */
 export class Tab {
-    public label: string;
-    public icon: string;
-    public body: React.ReactNode;
-
     /**
      * Creates a new tab.
-     * @param {string} tabLabel The untranslated tab label.
-     * @param {string} tabIconClass The class for the tab icon. This should be a simple mask.
-     * @param {React.ReactNode} tabJsx The JSX for the tab container.
+     * @param {string} id The tab's ID.
+     * @param {string} label The untranslated tab label.
+     * @param {string} icon The class for the tab icon. This should be a simple mask.
+     * @param {React.ReactNode} body The JSX for the tab container.
      */
-    constructor(tabLabel: string, tabIconClass: string, tabJsx: React.ReactNode) {
-        this.label = tabLabel;
-        this.icon = tabIconClass;
-        this.body = tabJsx;
+    constructor(public id: string, public label: string, public icon: string, public body: React.ReactNode) {
     }
 }
 
 interface IProps {
     tabs: Tab[];
+    initialTabId?: string;
 }
 
 interface IState {
@@ -53,16 +48,17 @@ interface IState {
 }
 
 export default class TabbedView extends React.Component<IProps, IState> {
-    static propTypes = {
-        // The tabs to show
-        tabs: PropTypes.arrayOf(PropTypes.instanceOf(Tab)).isRequired,
-    };
-
     constructor(props: IProps) {
         super(props);
 
+        let activeTabIndex = 0;
+        if (props.initialTabId) {
+            const tabIndex = props.tabs.findIndex(t => t.id === props.initialTabId);
+            if (tabIndex >= 0) activeTabIndex = tabIndex;
+        }
+
         this.state = {
-            activeTabIndex: 0,
+            activeTabIndex,
         };
     }
 

src/components/structures/TopLeftMenuButton.js

@@ -24,6 +24,7 @@ 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;
 
@@ -75,7 +76,7 @@ export default class TopLeftMenuButton extends React.Component {
 
     onAction = (payload) => {
         // For accessibility
-        if (payload.action === "toggle_top_left_menu") {
+        if (payload.action === Action.ToggleUserMenu) {
             if (this._buttonRef) this._buttonRef.click();
         }
     };

src/components/structures/UserMenuButton.tsx

@@ -0,0 +1,270 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import {User} from "matrix-js-sdk/src/models/user";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { ActionPayload } from "../../dispatcher/payloads";
+import { Action } from "../../dispatcher/actions";
+import { createRef } from "react";
+import { _t } from "../../languageHandler";
+import {ContextMenu, ContextMenuButton} from "./ContextMenu";
+import {USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB} from "../views/dialogs/UserSettingsDialog";
+import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
+import RedesignFeedbackDialog from "../views/dialogs/RedesignFeedbackDialog";
+import Modal from "../../Modal";
+import LogoutDialog from "../views/dialogs/LogoutDialog";
+import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
+import {getCustomTheme} from "../../theme";
+import {getHostingLink} from "../../utils/HostingLink";
+import AccessibleButton from "../views/elements/AccessibleButton";
+
+interface IProps {
+}
+
+interface IState {
+    user: User;
+    menuDisplayed: boolean;
+    isDarkTheme: boolean;
+}
+
+export default class UserMenuButton extends React.Component<IProps, IState> {
+    private dispatcherRef: string;
+    private themeWatcherRef: string;
+    private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            menuDisplayed: false,
+            user: MatrixClientPeg.get().getUser(MatrixClientPeg.get().getUserId()),
+            isDarkTheme: this.isUserOnDarkTheme(),
+        };
+    }
+
+    private get displayName(): string {
+        if (MatrixClientPeg.get().isGuest()) {
+            return _t("Guest");
+        } else if (this.state.user) {
+            return this.state.user.displayName;
+        } else {
+            return MatrixClientPeg.get().getUserId();
+        }
+    }
+
+    public componentDidMount() {
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
+    }
+
+    public componentWillUnmount() {
+        if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef);
+        if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
+    }
+
+    private isUserOnDarkTheme(): boolean {
+        const theme = SettingsStore.getValue("theme");
+        if (theme.startsWith("custom-")) {
+            return getCustomTheme(theme.substring(0, 7)).is_dark;
+        }
+        return theme === "dark";
+    }
+
+    private onThemeChanged = () => {
+        this.setState({isDarkTheme: this.isUserOnDarkTheme()});
+    };
+
+    private onAction = (ev: ActionPayload) => {
+        if (ev.action !== Action.ToggleUserMenu) return; // not interested
+
+        // For accessibility
+        if (this.buttonRef.current) this.buttonRef.current.click();
+    };
+
+    private onOpenMenuClick = (ev: InputEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({menuDisplayed: true});
+    };
+
+    private onCloseMenu = () => {
+        this.setState({menuDisplayed: false});
+    };
+
+    private onSwitchThemeClick = () => {
+        // Disable system theme matching if the user hits this button
+        SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
+
+        const newTheme = this.state.isDarkTheme ? "light" : "dark";
+        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme);
+    };
+
+    private onSettingsOpen = (ev: React.MouseEvent, tabId: string) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        const payload: OpenToTabPayload = {action: Action.ViewUserSettings, initialTabId: tabId};
+        defaultDispatcher.dispatch(payload);
+        this.setState({menuDisplayed: false}); // also close the menu
+    };
+
+    private onShowArchived = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        // TODO: Archived room view (deferred)
+        console.log("TODO: Show archived rooms");
+    };
+
+    private onProvideFeedback = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
+        this.setState({menuDisplayed: false}); // also close the menu
+    };
+
+    private onSignOutClick = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
+        this.setState({menuDisplayed: false}); // also close the menu
+    };
+
+    public render() {
+        let contextMenu;
+        if (this.state.menuDisplayed) {
+            let hostingLink;
+            const signupLink = getHostingLink("user-context-menu");
+            if (signupLink) {
+                hostingLink = (
+                    <div className="mx_UserMenuButton_contextMenu_header">
+                        {_t(
+                            "<a>Upgrade</a> to your own domain", {},
+                            {
+                                a: sub => (
+                                    <a
+                                        href={signupLink}
+                                        target="_blank"
+                                        rel="noreferrer noopener"
+                                        tabIndex={-1}
+                                    >{sub}</a>
+                                ),
+                            },
+                        )}
+                    </div>
+                );
+            }
+
+            const elementRect = this.buttonRef.current.getBoundingClientRect();
+            contextMenu = (
+                <ContextMenu
+                    chevronFace="none"
+                    left={elementRect.left}
+                    top={elementRect.top + elementRect.height}
+                    onFinished={this.onCloseMenu}
+                >
+                    <div className="mx_UserMenuButton_contextMenu">
+                        <div className="mx_UserMenuButton_contextMenu_header">
+                            <div className="mx_UserMenuButton_contextMenu_name">
+                                <span className="mx_UserMenuButton_contextMenu_displayName">
+                                    {this.displayName}
+                                </span>
+                                <span className="mx_UserMenuButton_contextMenu_userId">
+                                    {MatrixClientPeg.get().getUserId()}
+                                </span>
+                            </div>
+                            <div
+                                className="mx_UserMenuButton_contextMenu_themeButton"
+                                onClick={this.onSwitchThemeClick}
+                                title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
+                            >
+                                <img
+                                    src={require("../../../res/img/feather-customised/sun.svg")}
+                                    alt={_t("Switch theme")}
+                                    width={16}
+                                />
+                            </div>
+                        </div>
+                        {hostingLink}
+                        <div className="mx_UserMenuButton_contextMenu_optionList">
+                            <ul>
+                                <li>
+                                    <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}>
+                                        <img src={require("../../../res/img/feather-customised/notifications.svg")} width={16} />
+                                        <span>{_t("Notification settings")}</span>
+                                    </AccessibleButton>
+                                </li>
+                                <li>
+                                    <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}>
+                                        <img src={require("../../../res/img/feather-customised/lock.svg")} width={16} />
+                                        <span>{_t("Security & privacy")}</span>
+                                    </AccessibleButton>
+                                </li>
+                                <li>
+                                    <AccessibleButton onClick={(e) => this.onSettingsOpen(e, null)}>
+                                        <img src={require("../../../res/img/feather-customised/settings.svg")} width={16} />
+                                        <span>{_t("All settings")}</span>
+                                    </AccessibleButton>
+                                </li>
+                                <li>
+                                    <AccessibleButton onClick={this.onShowArchived}>
+                                        <img src={require("../../../res/img/feather-customised/archive.svg")} width={16} />
+                                        <span>{_t("Archived rooms")}</span>
+                                    </AccessibleButton>
+                                </li>
+                                <li>
+                                    <AccessibleButton onClick={this.onProvideFeedback}>
+                                        <img src={require("../../../res/img/feather-customised/message-circle.svg")} width={16} />
+                                        <span>{_t("Feedback")}</span>
+                                    </AccessibleButton>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="mx_UserMenuButton_contextMenu_optionList">
+                            <ul>
+                                <li>
+                                    <AccessibleButton onClick={this.onSignOutClick}>
+                                        <img src={require("../../../res/img/feather-customised/sign-out.svg")} width={16} />
+                                        <span>{_t("Sign out")}</span>
+                                    </AccessibleButton>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </ContextMenu>
+            );
+        }
+
+        return (
+            <React.Fragment>
+                <ContextMenuButton
+                    className="mx_UserMenuButton"
+                    onClick={this.onOpenMenuClick}
+                    inputRef={this.buttonRef}
+                    label={_t("Account settings")}
+                    isExpanded={this.state.menuDisplayed}
+                >
+                    <img src={require("../../../res/img/feather-customised/more-horizontal.svg")} alt="..." width={14} />
+                </ContextMenuButton>
+                {contextMenu}
+            </React.Fragment>
+        )
+    }
+}

src/components/views/dialogs/RoomSettingsDialog.js

@@ -30,6 +30,13 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
 
+export const ROOM_GENERAL_TAB = "ROOM_GENERAL_TAB";
+export const ROOM_SECURITY_TAB = "ROOM_SECURITY_TAB";
+export const ROOM_ROLES_TAB = "ROOM_ROLES_TAB";
+export const ROOM_NOTIFICATIONS_TAB = "ROOM_NOTIFICATIONS_TAB";
+export const ROOM_BRIDGES_TAB = "ROOM_BRIDGES_TAB";
+export const ROOM_ADVANCED_TAB = "ROOM_ADVANCED_TAB";
+
 export default class RoomSettingsDialog extends React.Component {
     static propTypes = {
         roomId: PropTypes.string.isRequired,
@@ -56,21 +63,25 @@ export default class RoomSettingsDialog extends React.Component {
         const tabs = [];
 
         tabs.push(new Tab(
+            ROOM_GENERAL_TAB,
             _td("General"),
             "mx_RoomSettingsDialog_settingsIcon",
             <GeneralRoomSettingsTab roomId={this.props.roomId} />,
         ));
         tabs.push(new Tab(
+            ROOM_SECURITY_TAB,
             _td("Security & Privacy"),
             "mx_RoomSettingsDialog_securityIcon",
             <SecurityRoomSettingsTab roomId={this.props.roomId} />,
         ));
         tabs.push(new Tab(
+            ROOM_ROLES_TAB,
             _td("Roles & Permissions"),
             "mx_RoomSettingsDialog_rolesIcon",
             <RolesRoomSettingsTab roomId={this.props.roomId} />,
         ));
         tabs.push(new Tab(
+            ROOM_NOTIFICATIONS_TAB,
             _td("Notifications"),
             "mx_RoomSettingsDialog_notificationsIcon",
             <NotificationSettingsTab roomId={this.props.roomId} />,
@@ -78,6 +89,7 @@ export default class RoomSettingsDialog extends React.Component {
 
         if (SettingsStore.isFeatureEnabled("feature_bridge_state")) {
             tabs.push(new Tab(
+                ROOM_BRIDGES_TAB,
                 _td("Bridges"),
                 "mx_RoomSettingsDialog_bridgesIcon",
                 <BridgeSettingsTab roomId={this.props.roomId} />,
@@ -85,6 +97,7 @@ export default class RoomSettingsDialog extends React.Component {
         }
 
         tabs.push(new Tab(
+            ROOM_ADVANCED_TAB,
             _td("Advanced"),
             "mx_RoomSettingsDialog_warningIcon",
             <AdvancedRoomSettingsTab roomId={this.props.roomId} closeSettingsFn={this.props.onFinished} />,

src/components/views/dialogs/UserSettingsDialog.js

@@ -33,9 +33,21 @@ import * as sdk from "../../../index";
 import SdkConfig from "../../../SdkConfig";
 import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
 
+export const USER_GENERAL_TAB = "USER_GENERAL_TAB";
+export const USER_APPEARANCE_TAB = "USER_APPEARANCE_TAB";
+export const USER_FLAIR_TAB = "USER_FLAIR_TAB";
+export const USER_NOTIFICATIONS_TAB = "USER_NOTIFICATIONS_TAB";
+export const USER_PREFERENCES_TAB = "USER_PREFERENCES_TAB";
+export const USER_VOICE_TAB = "USER_VOICE_TAB";
+export const USER_SECURITY_TAB = "USER_SECURITY_TAB";
+export const USER_LABS_TAB = "USER_LABS_TAB";
+export const USER_MJOLNIR_TAB = "USER_MJOLNIR_TAB";
+export const USER_HELP_TAB = "USER_HELP_TAB";
+
 export default class UserSettingsDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
+        initialTabId: PropTypes.string,
     };
 
     constructor() {
@@ -63,42 +75,50 @@ export default class UserSettingsDialog extends React.Component {
         const tabs = [];
 
         tabs.push(new Tab(
+            USER_GENERAL_TAB,
             _td("General"),
             "mx_UserSettingsDialog_settingsIcon",
             <GeneralUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
         tabs.push(new Tab(
+            USER_APPEARANCE_TAB,
             _td("Appearance"),
             "mx_UserSettingsDialog_appearanceIcon",
             <AppearanceUserSettingsTab />,
         ));
         tabs.push(new Tab(
+            USER_FLAIR_TAB,
             _td("Flair"),
             "mx_UserSettingsDialog_flairIcon",
             <FlairUserSettingsTab />,
         ));
         tabs.push(new Tab(
+            USER_NOTIFICATIONS_TAB,
             _td("Notifications"),
             "mx_UserSettingsDialog_bellIcon",
             <NotificationUserSettingsTab />,
         ));
         tabs.push(new Tab(
+            USER_PREFERENCES_TAB,
             _td("Preferences"),
             "mx_UserSettingsDialog_preferencesIcon",
             <PreferencesUserSettingsTab />,
         ));
         tabs.push(new Tab(
+            USER_VOICE_TAB,
             _td("Voice & Video"),
             "mx_UserSettingsDialog_voiceIcon",
             <VoiceUserSettingsTab />,
         ));
         tabs.push(new Tab(
+            USER_SECURITY_TAB,
             _td("Security & Privacy"),
             "mx_UserSettingsDialog_securityIcon",
             <SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
         if (SdkConfig.get()['showLabsSettings'] || SettingsStore.getLabsFeatures().length > 0) {
             tabs.push(new Tab(
+                USER_LABS_TAB,
                 _td("Labs"),
                 "mx_UserSettingsDialog_labsIcon",
                 <LabsUserSettingsTab />,
@@ -106,12 +126,14 @@ export default class UserSettingsDialog extends React.Component {
         }
         if (this.state.mjolnirEnabled) {
             tabs.push(new Tab(
+                USER_MJOLNIR_TAB,
                 _td("Ignored users"),
                 "mx_UserSettingsDialog_mjolnirIcon",
                 <MjolnirUserSettingsTab />,
             ));
         }
         tabs.push(new Tab(
+            USER_HELP_TAB,
             _td("Help & About"),
             "mx_UserSettingsDialog_helpIcon",
             <HelpUserSettingsTab closeSettingsFn={this.props.onFinished} />,
@@ -127,7 +149,7 @@ export default class UserSettingsDialog extends React.Component {
             <BaseDialog className='mx_UserSettingsDialog' hasCancel={true}
                         onFinished={this.props.onFinished} title={_t("Settings")}>
                 <div className='ms_SettingsDialog_content'>
-                    <TabbedView tabs={this._getTabs()} />
+                    <TabbedView tabs={this._getTabs()} initialTabId={this.props.initialTabId} />
                 </div>
             </BaseDialog>
         );

src/components/views/elements/AppTile.js

@@ -39,6 +39,8 @@ import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 import {aboveLeftOf, ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
 import PersistedElement from "./PersistedElement";
 import {WidgetType} from "../../../widgets/WidgetType";
+import {Capability} from "../../../widgets/WidgetApi";
+import {sleep} from "../../../utils/promise";
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
 const ENABLE_REACT_PERF = false;
@@ -341,23 +343,37 @@ export default class AppTile extends React.Component {
     /**
      * Ends all widget interaction, such as cancelling calls and disabling webcams.
      * @private
+     * @returns {Promise<*>} Resolves when the widget is terminated, or timeout passed.
      */
     _endWidgetActions() {
-        // HACK: This is a really dirty way to ensure that Jitsi cleans up
-        // its hold on the webcam. Without this, the widget holds a media
-        // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
-        if (this._appFrame.current) {
-            // In practice we could just do `+= ''` to trick the browser
-            // into thinking the URL changed, however I can foresee this
-            // being optimized out by a browser. Instead, we'll just point
-            // the iframe at a page that is reasonably safe to use in the
-            // event the iframe doesn't wink away.
-            // This is relative to where the Riot instance is located.
-            this._appFrame.current.src = 'about:blank';
+        let terminationPromise;
+
+        if (this._hasCapability(Capability.ReceiveTerminate)) {
+            // Wait for widget to terminate within a timeout
+            const timeout = 2000;
+            const messaging = ActiveWidgetStore.getWidgetMessaging(this.props.app.id);
+            terminationPromise = Promise.race([messaging.terminate(), sleep(timeout)]);
+        } else {
+            terminationPromise = Promise.resolve();
         }
 
-        // Delete the widget from the persisted store for good measure.
-        PersistedElement.destroyElement(this._persistKey);
+        return terminationPromise.finally(() => {
+            // HACK: This is a really dirty way to ensure that Jitsi cleans up
+            // its hold on the webcam. Without this, the widget holds a media
+            // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
+            if (this._appFrame.current) {
+                // In practice we could just do `+= ''` to trick the browser
+                // into thinking the URL changed, however I can foresee this
+                // being optimized out by a browser. Instead, we'll just point
+                // the iframe at a page that is reasonably safe to use in the
+                // event the iframe doesn't wink away.
+                // This is relative to where the Riot instance is located.
+                this._appFrame.current.src = 'about:blank';
+            }
+
+            // Delete the widget from the persisted store for good measure.
+            PersistedElement.destroyElement(this._persistKey);
+        });
     }
 
     /* If user has permission to modify widgets, delete the widget,
@@ -381,12 +397,12 @@ export default class AppTile extends React.Component {
                     }
                     this.setState({deleting: true});
 
-                    this._endWidgetActions();
-
-                    WidgetUtils.setRoomWidget(
-                        this.props.room.roomId,
-                        this.props.app.id,
-                    ).catch((e) => {
+                    this._endWidgetActions().then(() => {
+                        return WidgetUtils.setRoomWidget(
+                            this.props.room.roomId,
+                            this.props.app.id,
+                        );
+                    }).catch((e) => {
                         console.error('Failed to delete widget', e);
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 
@@ -669,6 +685,17 @@ export default class AppTile extends React.Component {
     }
 
     _onPopoutWidgetClick() {
+        // Ensure Jitsi conferences are closed on pop-out, to not confuse the user to join them
+        // twice from the same computer, which Jitsi can have problems with (audio echo/gain-loop).
+        if (WidgetType.JITSI.matches(this.props.app.type) && this.props.show) {
+            this._endWidgetActions().then(() => {
+                if (this._appFrame.current) {
+                    // Reload iframe
+                    this._appFrame.current.src = this._getRenderedUrl();
+                    this.setState({});
+                }
+            });
+        }
         // Using Object.assign workaround as the following opens in a new window instead of a new tab.
         // window.open(this._getPopoutUrl(), '_blank', 'noopener=yes');
         Object.assign(document.createElement('a'),

src/components/views/elements/ReplyThread.js

@@ -26,6 +26,7 @@ import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks
 import SettingsStore from "../../../settings/SettingsStore";
 import escapeHtml from "escape-html";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {Action} from "../../../dispatcher/actions";
 
 // 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
@@ -290,7 +291,7 @@ export default class ReplyThread extends React.Component {
             events,
         }, this.loadNextEvent);
 
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     }
 
     render() {

src/components/views/elements/RoomDirectoryButton.js

@@ -18,11 +18,12 @@ import React from 'react';
 import * as sdk from '../../../index';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
+import {Action} from "../../../dispatcher/actions";
 
 const RoomDirectoryButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
-        <ActionButton action="view_room_directory"
+        <ActionButton action={Action.ViewRoomDirectory}
             mouseOverAction={props.callout ? "callout_room_directory" : null}
             label={_t("Room directory")}
             iconPath={require("../../../../res/img/icons-directory.svg")}

src/components/views/elements/Tooltip.tsx

@@ -94,7 +94,7 @@ export default class Tooltip extends React.Component<IProps> {
         return style;
     }
 
-    private renderTooltip() {
+    private renderTooltip = () => {
         // Add the parent's position to the tooltips, so it's correctly
         // positioned, also taking into account any window zoom
         // NOTE: The additional 6 pixels for the left position, is to take account of the

src/components/views/emojipicker/QuickReactions.js

@@ -27,8 +27,7 @@ const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀
     if (!data) {
         throw new Error(`Emoji ${emoji} doesn't exist in emojibase`);
     }
-    // Prefer our unicode value for quick reactions as we sometimes use variation selectors.
-    return Object.assign({}, data, { unicode: emoji });
+    return data;
 });
 
 class QuickReactions extends React.Component {

src/components/views/rooms/BasicMessageComposer.js

@@ -359,6 +359,8 @@ export default class BasicMessageEditor extends React.Component {
     }
 
     _onSelectionChange = () => {
+        const {isEmpty} = this.props.model;
+
         this._refreshLastCaretIfNeeded();
         const selection = document.getSelection();
         if (this._hasTextSelected && selection.isCollapsed) {
@@ -366,7 +368,7 @@ export default class BasicMessageEditor extends React.Component {
             if (this._formatBarRef) {
                 this._formatBarRef.hide();
             }
-        } else if (!selection.isCollapsed) {
+        } else if (!selection.isCollapsed && !isEmpty) {
             this._hasTextSelected = true;
             if (this._formatBarRef) {
                 const selectionRect = selection.getRangeAt(0).getBoundingClientRect();

src/components/views/rooms/EditMessageComposer.js

@@ -31,6 +31,7 @@ import {EventStatus} from 'matrix-js-sdk';
 import BasicMessageComposer from "./BasicMessageComposer";
 import {Key} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {Action} from "../../../dispatcher/actions";
 
 function _isReply(mxEvent) {
     const relatesTo = mxEvent.getContent()["m.relates_to"];
@@ -157,7 +158,7 @@ export default class EditMessageComposer extends React.Component {
                 dis.dispatch({action: 'edit_event', event: nextEvent});
             } else {
                 dis.dispatch({action: 'edit_event', event: null});
-                dis.dispatch({action: 'focus_composer'});
+                dis.fire(Action.FocusComposer);
             }
             event.preventDefault();
         }
@@ -165,7 +166,7 @@ export default class EditMessageComposer extends React.Component {
 
     _cancelEdit = () => {
         dis.dispatch({action: "edit_event", event: null});
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     }
 
     _isContentModified(newContent) {
@@ -195,7 +196,7 @@ export default class EditMessageComposer extends React.Component {
 
         // close the event editing and focus composer
         dis.dispatch({action: "edit_event", event: null});
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     };
 
     _cancelPreviousPendingEdit() {

src/components/views/rooms/NotificationBadge.tsx

@@ -0,0 +1,280 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import classNames from "classnames";
+import { formatMinimalBadgeCount } from "../../../utils/FormattingUtils";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
+import AccessibleButton from "../../views/elements/AccessibleButton";
+import RoomAvatar from "../../views/avatars/RoomAvatar";
+import dis from '../../../dispatcher/dispatcher';
+import { Key } from "../../../Keyboard";
+import * as RoomNotifs from '../../../RoomNotifs';
+import { EffectiveMembership, getEffectiveMembership } from "../../../stores/room-list/membership";
+import * as Unread from '../../../Unread';
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import ActiveRoomObserver from "../../../ActiveRoomObserver";
+import { EventEmitter } from "events";
+import { arrayDiff } from "../../../utils/arrays";
+import { IDestroyable } from "../../../utils/IDestroyable";
+
+export const NOTIFICATION_STATE_UPDATE = "update";
+
+export enum NotificationColor {
+    // Inverted (None -> Red) because we do integer comparisons on this
+    None, // nothing special
+    Bold, // no badge, show as unread
+    Grey, // unread notified messages
+    Red,  // unread pings
+}
+
+export interface INotificationState extends EventEmitter {
+    symbol?: string;
+    count: number;
+    color: NotificationColor;
+}
+
+interface IProps {
+    notification: INotificationState;
+
+    /**
+     * If true, the badge will conditionally display a badge without count for the user.
+     */
+    allowNoCount: boolean;
+}
+
+interface IState {
+}
+
+export default class NotificationBadge extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.props.notification.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+    }
+
+    public componentDidUpdate(prevProps: Readonly<IProps>) {
+        if (prevProps.notification) {
+            prevProps.notification.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+        }
+
+        this.props.notification.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
+    }
+
+    private onNotificationUpdate = () => {
+        this.forceUpdate(); // notification state changed - update
+    };
+
+    public render(): React.ReactElement {
+        // Don't show a badge if we don't need to
+        if (this.props.notification.color <= NotificationColor.Bold) return null;
+
+        const hasNotif = this.props.notification.color >= NotificationColor.Red;
+        const hasCount = this.props.notification.color >= NotificationColor.Grey;
+        const isEmptyBadge = this.props.allowNoCount && !localStorage.getItem("mx_rl_rt_badgeCount");
+
+        let symbol = this.props.notification.symbol || formatMinimalBadgeCount(this.props.notification.count);
+        if (isEmptyBadge) symbol = "";
+
+        const classes = classNames({
+            'mx_NotificationBadge': true,
+            'mx_NotificationBadge_visible': hasCount,
+            'mx_NotificationBadge_highlighted': hasNotif,
+            'mx_NotificationBadge_dot': isEmptyBadge,
+            'mx_NotificationBadge_2char': symbol.length > 0 && symbol.length < 3,
+            'mx_NotificationBadge_3char': symbol.length > 2,
+        });
+
+        return (
+            <div className={classes}>
+                <span className="mx_NotificationBadge_count">{symbol}</span>
+            </div>
+        );
+    }
+}
+
+export class RoomNotificationState extends EventEmitter implements IDestroyable {
+    private _symbol: string;
+    private _count: number;
+    private _color: NotificationColor;
+
+    constructor(private room: Room) {
+        super();
+        this.room.on("Room.receipt", this.handleRoomEventUpdate);
+        this.room.on("Room.timeline", this.handleRoomEventUpdate);
+        this.room.on("Room.redaction", this.handleRoomEventUpdate);
+        MatrixClientPeg.get().on("Event.decrypted", this.handleRoomEventUpdate);
+        this.updateNotificationState();
+    }
+
+    public get symbol(): string {
+        return this._symbol;
+    }
+
+    public get count(): number {
+        return this._count;
+    }
+
+    public get color(): NotificationColor {
+        return this._color;
+    }
+
+    private get roomIsInvite(): boolean {
+        return getEffectiveMembership(this.room.getMyMembership()) === EffectiveMembership.Invite;
+    }
+
+    public destroy(): void {
+        this.room.removeListener("Room.receipt", this.handleRoomEventUpdate);
+        this.room.removeListener("Room.timeline", this.handleRoomEventUpdate);
+        this.room.removeListener("Room.redaction", this.handleRoomEventUpdate);
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Event.decrypted", this.handleRoomEventUpdate);
+        }
+    }
+
+    private handleRoomEventUpdate = (event: MatrixEvent) => {
+        const roomId = event.getRoomId();
+
+        if (roomId !== this.room.roomId) return; // ignore - not for us
+        this.updateNotificationState();
+    };
+
+    private updateNotificationState() {
+        const before = {count: this.count, symbol: this.symbol, color: this.color};
+
+        if (this.roomIsInvite) {
+            this._color = NotificationColor.Red;
+            this._symbol = "!";
+            this._count = 1; // not used, technically
+        } else {
+            const redNotifs = RoomNotifs.getUnreadNotificationCount(this.room, 'highlight');
+            const greyNotifs = RoomNotifs.getUnreadNotificationCount(this.room, 'total');
+
+            // For a 'true count' we pick the grey notifications first because they include the
+            // red notifications. If we don't have a grey count for some reason we use the red
+            // count. If that count is broken for some reason, assume zero. This avoids us showing
+            // a badge for 'NaN' (which formats as 'NaNB' for NaN Billion).
+            const trueCount = greyNotifs ? greyNotifs : (redNotifs ? redNotifs : 0);
+
+            // Note: we only set the symbol if we have an actual count. We don't want to show
+            // zero on badges.
+
+            if (redNotifs > 0) {
+                this._color = NotificationColor.Red;
+                this._count = trueCount;
+                this._symbol = null; // symbol calculated by component
+            } else if (greyNotifs > 0) {
+                this._color = NotificationColor.Grey;
+                this._count = trueCount;
+                this._symbol = null; // symbol calculated by component
+            } else {
+                // We don't have any notified messages, but we might have unread messages. Let's
+                // find out.
+                const hasUnread = Unread.doesRoomHaveUnreadMessages(this.room);
+                if (hasUnread) {
+                    this._color = NotificationColor.Bold;
+                } else {
+                    this._color = NotificationColor.None;
+                }
+
+                // no symbol or count for this state
+                this._count = 0;
+                this._symbol = null;
+            }
+        }
+
+        // finally, publish an update if needed
+        const after = {count: this.count, symbol: this.symbol, color: this.color};
+        if (JSON.stringify(before) !== JSON.stringify(after)) {
+            this.emit(NOTIFICATION_STATE_UPDATE);
+        }
+    }
+}
+
+export class ListNotificationState extends EventEmitter {
+    private _count: number;
+    private _color: NotificationColor;
+    private rooms: Room[] = [];
+    private states: { [roomId: string]: RoomNotificationState } = {};
+
+    constructor(private byTileCount = false) {
+        super();
+    }
+
+    public get symbol(): string {
+        return null; // This notification state doesn't support symbols
+    }
+
+    public get count(): number {
+        return this._count;
+    }
+
+    public get color(): NotificationColor {
+        return this._color;
+    }
+
+    public setRooms(rooms: Room[]) {
+        // If we're only concerned about the tile count, don't bother setting up listeners.
+        if (this.byTileCount) {
+            this.rooms = rooms;
+            this.calculateTotalState();
+            return;
+        }
+
+        const oldRooms = this.rooms;
+        const diff = arrayDiff(oldRooms, rooms);
+        for (const oldRoom of diff.removed) {
+            const state = this.states[oldRoom.roomId];
+            delete this.states[oldRoom.roomId];
+            state.off(NOTIFICATION_STATE_UPDATE, this.onRoomNotificationStateUpdate);
+            state.destroy();
+        }
+        for (const newRoom of diff.added) {
+            const state = new RoomNotificationState(newRoom);
+            state.on(NOTIFICATION_STATE_UPDATE, this.onRoomNotificationStateUpdate);
+            this.states[newRoom.roomId] = state;
+        }
+
+        this.calculateTotalState();
+    }
+
+    private onRoomNotificationStateUpdate = () => {
+        this.calculateTotalState();
+    };
+
+    private calculateTotalState() {
+        const before = {count: this.count, symbol: this.symbol, color: this.color};
+
+        if (this.byTileCount) {
+            this._color = NotificationColor.Red;
+            this._count = this.rooms.length;
+        } else {
+            this._count = 0;
+            this._color = NotificationColor.None;
+            for (const state of Object.values(this.states)) {
+                this._count += state.count;
+                this._color = Math.max(this.color, state.color);
+            }
+        }
+
+        // finally, publish an update if needed
+        const after = {count: this.count, symbol: this.symbol, color: this.color};
+        if (JSON.stringify(before) !== JSON.stringify(after)) {
+            this.emit(NOTIFICATION_STATE_UPDATE);
+        }
+    }
+}

src/components/views/rooms/ReadReceiptMarker.js

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

src/components/views/rooms/RoomList2.tsx

@@ -18,18 +18,17 @@ limitations under the License.
 
 import * as React from "react";
 import { _t, _td } from "../../../languageHandler";
-import { Layout } from '../../../resizer/distributors/roomsublist2';
 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, RoomListStore2 } from "../../../stores/room-list/RoomListStore2";
 import { ITagMap } from "../../../stores/room-list/algorithms/models";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
 import { Dispatcher } from "flux";
 import dis from "../../../dispatcher/dispatcher";
 import RoomSublist2 from "./RoomSublist2";
 import { ActionPayload } from "../../../dispatcher/payloads";
-import { IFilterCondition } from "../../../stores/room-list/filters/IFilterCondition";
 import { NameFilterCondition } from "../../../stores/room-list/filters/NameFilterCondition";
+import { ListLayout } from "../../../stores/room-list/ListLayout";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -50,6 +49,7 @@ interface IProps {
 
 interface IState {
     sublists: ITagMap;
+    layouts: Map<TagID, ListLayout>;
 }
 
 const TAG_ORDER: TagID[] = [
@@ -96,7 +96,7 @@ const TAG_AESTHETICS: {
         defaultHidden: false,
     },
     [DefaultTagID.DM]: {
-        sectionLabel: _td("Direct Messages"),
+        sectionLabel: _td("People"),
         isInvite: false,
         defaultHidden: false,
         addRoomLabel: _td("Start chat"),
@@ -127,19 +127,15 @@ const TAG_AESTHETICS: {
 };
 
 export default class RoomList2 extends React.Component<IProps, IState> {
-    private sublistRefs: { [tagId: string]: React.RefObject<RoomSublist2> } = {};
-    private sublistSizes: { [tagId: string]: number } = {};
-    private sublistCollapseStates: { [tagId: string]: boolean } = {};
-    private unfilteredLayout: Layout;
-    private filteredLayout: Layout;
     private searchFilter: NameFilterCondition = new NameFilterCondition();
 
     constructor(props: IProps) {
         super(props);
 
-        this.state = {sublists: {}};
-        this.loadSublistSizes();
-        this.prepareLayouts();
+        this.state = {
+            sublists: {},
+            layouts: new Map<TagID, ListLayout>(),
+        };
     }
 
     public componentDidUpdate(prevProps: Readonly<IProps>): void {
@@ -158,49 +154,16 @@ export default class RoomList2 extends React.Component<IProps, IState> {
     }
 
     public componentDidMount(): void {
-        RoomListStore.instance.on(LISTS_UPDATE_EVENT, (store) => {
-            console.log("new lists", store.orderedLists);
-            this.setState({sublists: store.orderedLists});
-        });
-    }
+        RoomListStore.instance.on(LISTS_UPDATE_EVENT, (store: RoomListStore2) => {
+            const newLists = store.orderedLists;
+            console.log("new lists", newLists);
 
-    private loadSublistSizes() {
-        const sizesJson = window.localStorage.getItem("mx_roomlist_sizes");
-        if (sizesJson) this.sublistSizes = JSON.parse(sizesJson);
-
-        const collapsedJson = window.localStorage.getItem("mx_roomlist_collapsed");
-        if (collapsedJson) this.sublistCollapseStates = JSON.parse(collapsedJson);
-    }
-
-    private saveSublistSizes() {
-        window.localStorage.setItem("mx_roomlist_sizes", JSON.stringify(this.sublistSizes));
-        window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.sublistCollapseStates));
-    }
-
-    private prepareLayouts() {
-        // TODO: Change layout engine for FTUE support
-        this.unfilteredLayout = new Layout((tagId: string, height: number) => {
-            const sublist = this.sublistRefs[tagId];
-            if (sublist) sublist.current.setHeight(height);
-
-            // TODO: Check overflow (see old impl)
-
-            // Don't store a height for collapsed sublists
-            if (!this.sublistCollapseStates[tagId]) {
-                this.sublistSizes[tagId] = height;
-                this.saveSublistSizes();
+            const layoutMap = new Map<TagID, ListLayout>();
+            for (const tagId of Object.keys(newLists)) {
+                layoutMap.set(tagId, new ListLayout(tagId));
             }
-        }, this.sublistSizes, this.sublistCollapseStates, {
-            allowWhitespace: false,
-            handleHeight: 1,
-        });
 
-        this.filteredLayout = new Layout((tagId: string, height: number) => {
-            const sublist = this.sublistRefs[tagId];
-            if (sublist) sublist.current.setHeight(height);
-        }, null, null, {
-            allowWhitespace: false,
-            handleHeight: 0,
+            this.setState({sublists: newLists, layouts: layoutMap});
         });
     }
 
@@ -226,16 +189,20 @@ export default class RoomList2 extends React.Component<IProps, IState> {
             if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
 
             const onAddRoomFn = aesthetics.onAddRoom ? () => aesthetics.onAddRoom(dis) : null;
-            components.push(<RoomSublist2
-                key={`sublist-${orderedTagId}`}
-                forRooms={true}
-                rooms={orderedRooms}
-                startAsHidden={aesthetics.defaultHidden}
-                label={_t(aesthetics.sectionLabel)}
-                onAddRoom={onAddRoomFn}
-                addRoomLabel={aesthetics.addRoomLabel}
-                isInvite={aesthetics.isInvite}
-            />);
+            components.push(
+                <RoomSublist2
+                    key={`sublist-${orderedTagId}`}
+                    forRooms={true}
+                    rooms={orderedRooms}
+                    startAsHidden={aesthetics.defaultHidden}
+                    label={_t(aesthetics.sectionLabel)}
+                    onAddRoom={onAddRoomFn}
+                    addRoomLabel={aesthetics.addRoomLabel}
+                    isInvite={aesthetics.isInvite}
+                    layout={this.state.layouts.get(orderedTagId)}
+                    showMessagePreviews={orderedTagId === DefaultTagID.DM}
+                />
+            );
         }
 
         return components;
@@ -250,7 +217,7 @@ export default class RoomList2 extends React.Component<IProps, IState> {
                         onFocus={this.props.onFocus}
                         onBlur={this.props.onBlur}
                         onKeyDown={onKeyDownHandler}
-                        className="mx_RoomList"
+                        className="mx_RoomList2"
                         role="tree"
                         aria-label={_t("Rooms")}
                         // Firefox sometimes makes this element focusable due to

src/components/views/rooms/RoomSublist2.tsx

@@ -20,14 +20,13 @@ import * as React from "react";
 import { createRef } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import classNames from 'classnames';
-import IndicatorScrollbar from "../../structures/IndicatorScrollbar";
-import * as RoomNotifs from '../../../RoomNotifs';
 import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../../views/elements/AccessibleButton";
-import AccessibleTooltipButton from "../../views/elements/AccessibleTooltipButton";
-import * as FormattingUtils from '../../../utils/FormattingUtils';
 import RoomTile2 from "./RoomTile2";
+import { ResizableBox, ResizeCallbackData } from "react-resizable";
+import { ListLayout } from "../../../stores/room-list/ListLayout";
+import NotificationBadge, { ListNotificationState } from "./NotificationBadge";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -42,12 +41,13 @@ interface IProps {
     rooms?: Room[];
     startAsHidden: boolean;
     label: string;
+    showMessagePreviews: boolean;
     onAddRoom?: () => void;
     addRoomLabel: string;
     isInvite: boolean;
+    layout: ListLayout;
 
     // TODO: Collapsed state
-    // TODO: Height
     // TODO: Group invites
     // TODO: Calls
     // TODO: forceExpand?
@@ -56,17 +56,19 @@ interface IProps {
 }
 
 interface IState {
+    notificationState: ListNotificationState;
 }
 
 export default class RoomSublist2 extends React.Component<IProps, IState> {
     private headerButton = createRef();
 
-    public setHeight(size: number) {
-        // TODO: Do a thing (maybe - height changes are different in FTUE)
-    }
+    constructor(props: IProps) {
+        super(props);
 
-    private hasTiles(): boolean {
-        return this.numTiles > 0;
+        this.state = {
+            notificationState: new ListNotificationState(this.props.isInvite),
+        };
+        this.state.notificationState.setRooms(this.props.rooms);
     }
 
     private get numTiles(): number {
@@ -74,17 +76,39 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         return (this.props.rooms || []).length;
     }
 
+    public componentDidUpdate() {
+        this.state.notificationState.setRooms(this.props.rooms);
+    }
+
     private onAddRoom = (e) => {
         e.stopPropagation();
         if (this.props.onAddRoom) this.props.onAddRoom();
     };
 
+    private onResize = (e: React.MouseEvent, data: ResizeCallbackData) => {
+        const direction = e.movementY < 0 ? -1 : +1;
+        const tileDiff = this.props.layout.pixelsToTiles(Math.abs(e.movementY)) * direction;
+        this.props.layout.visibleTiles += tileDiff;
+        this.forceUpdate(); // because the layout doesn't trigger a re-render
+    };
+
+    private onShowAllClick = () => {
+        this.props.layout.visibleTiles = this.numTiles;
+        this.forceUpdate(); // because the layout doesn't trigger a re-render
+    };
+
     private renderTiles(): React.ReactElement[] {
         const tiles: React.ReactElement[] = [];
 
         if (this.props.rooms) {
             for (const room of this.props.rooms) {
-                tiles.push(<RoomTile2 room={room} key={`room-${room.roomId}`}/>);
+                tiles.push(
+                    <RoomTile2
+                        room={room}
+                        key={`room-${room.roomId}`}
+                        showMessagePreview={this.props.showMessagePreviews}
+                    />
+                );
             }
         }
 
@@ -92,25 +116,9 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
     }
 
     private renderHeader(): React.ReactElement {
-        const notifications = !this.props.isInvite
-            ? RoomNotifs.aggregateNotificationCount(this.props.rooms)
-            : {count: 0, highlight: true};
-        const notifCount = notifications.count;
-        const notifHighlight = notifications.highlight;
-
         // TODO: Title on collapsed
         // TODO: Incoming call box
 
-        let chevron = null;
-        if (this.hasTiles()) {
-            const chevronClasses = classNames({
-                'mx_RoomSubList_chevron': true,
-                'mx_RoomSubList_chevronRight': false, // isCollapsed
-                'mx_RoomSubList_chevronDown': true, // !isCollapsed
-            });
-            chevron = (<div className={chevronClasses}/>);
-        }
-
         return (
             <RovingTabIndexWrapper inputRef={this.headerButton}>
                 {({onFocus, isActive, ref}) => {
@@ -118,68 +126,37 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     const tabIndex = isActive ? 0 : -1;
 
                     // TODO: Collapsed state
-                    let badge;
-                    if (true) { // !isCollapsed
-                        const badgeClasses = classNames({
-                            'mx_RoomSubList_badge': true,
-                            'mx_RoomSubList_badgeHighlight': notifHighlight,
-                        });
-                        // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
-                        if (notifCount > 0) {
-                            badge = (
-                                <AccessibleButton
-                                    tabIndex={tabIndex}
-                                    className={badgeClasses}
-                                    aria-label={_t("Jump to first unread room.")}
-                                >
-                                    <div>
-                                        {FormattingUtils.formatCount(notifCount)}
-                                    </div>
-                                </AccessibleButton>
-                            );
-                        } else if (this.props.isInvite && this.hasTiles()) {
-                            // Render the `!` badge for invites
-                            badge = (
-                                <AccessibleButton
-                                    tabIndex={tabIndex}
-                                    className={badgeClasses}
-                                    aria-label={_t("Jump to first invite.")}
-                                >
-                                    <div>
-                                        {FormattingUtils.formatCount(this.numTiles)}
-                                    </div>
-                                </AccessibleButton>
-                            );
-                        }
-                    }
 
-                    let addRoomButton = null;
-                    if (!!this.props.onAddRoom) {
-                        addRoomButton = (
-                            <AccessibleTooltipButton
-                                tabIndex={tabIndex}
-                                onClick={this.onAddRoom}
-                                className="mx_RoomSubList_addRoom"
-                                title={this.props.addRoomLabel || _t("Add room")}
-                            />
-                        );
-                    }
+                    const badge = <NotificationBadge allowNoCount={false} notification={this.state.notificationState}/>;
+
+                    // TODO: Aux button
+                    // let addRoomButton = null;
+                    // if (!!this.props.onAddRoom) {
+                    //     addRoomButton = (
+                    //         <AccessibleTooltipButton
+                    //             tabIndex={tabIndex}
+                    //             onClick={this.onAddRoom}
+                    //             className="mx_RoomSublist2_addButton"
+                    //             title={this.props.addRoomLabel || _t("Add room")}
+                    //         />
+                    //     );
+                    // }
 
                     // TODO: a11y (see old component)
                     return (
-                        <div className={"mx_RoomSubList_labelContainer"}>
+                        <div className={"mx_RoomSublist2_headerContainer"}>
                             <AccessibleButton
                                 inputRef={ref}
                                 tabIndex={tabIndex}
-                                className={"mx_RoomSubList_label"}
+                                className={"mx_RoomSublist2_headerText"}
                                 role="treeitem"
                                 aria-level="1"
                             >
-                                {chevron}
                                 <span>{this.props.label}</span>
                             </AccessibleButton>
-                            {badge}
-                            {addRoomButton}
+                            <div className="mx_RoomSublist2_badgeContainer">
+                                {badge}
+                            </div>
                         </div>
                     );
                 }}
@@ -195,19 +172,65 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
 
         const classes = classNames({
             // TODO: Proper collapse support
-            'mx_RoomSubList': true,
-            'mx_RoomSubList_hidden': false, // len && isCollapsed
-            'mx_RoomSubList_nonEmpty': this.hasTiles(), // len && !isCollapsed
+            'mx_RoomSublist2': true,
+            'mx_RoomSublist2_collapsed': false, // len && isCollapsed
         });
 
         let content = null;
         if (tiles.length > 0) {
             // TODO: Lazy list rendering
             // TODO: Whatever scrolling magic needs to happen here
+            const layout = this.props.layout; // to shorten calls
+            const minTilesPx = layout.tilesToPixels(Math.min(tiles.length, layout.minVisibleTiles));
+            const maxTilesPx = layout.tilesToPixels(tiles.length);
+            const tilesPx = layout.tilesToPixels(Math.min(tiles.length, layout.visibleTiles));
+            let handles = ['s'];
+            if (layout.visibleTiles >= tiles.length && tiles.length <= layout.minVisibleTiles) {
+                handles = []; // no handles, we're at a minimum
+            }
+
+            // TODO: This might need adjustment, however for now it is fine as a round.
+            const nVisible = Math.round(layout.visibleTiles);
+            const visibleTiles = tiles.slice(0, nVisible);
+
+            // If we're hiding rooms, show a 'show more' button to the user. This button
+            // replaces the last visible tile, so will always show 2+ rooms. We do this
+            // because if it said "show 1 more room" we had might as well show that room
+            // instead. We also replace the last item so we don't have to adjust our math
+            // on pixel heights, etc. It's much easier to pretend the button is a tile.
+            if (tiles.length > nVisible) {
+                // we have a cutoff condition - add the button to show all
+
+                // we +1 to account for the room we're about to hide with our 'show more' button
+                // this results in the button always being 1+, and not needing an i18n `count`.
+                const numMissing = (tiles.length - visibleTiles.length) + 1;
+
+                // TODO: CSS TBD
+                // TODO: Make this an actual tile
+                // TODO: This is likely to pop out of the list, consider that.
+                visibleTiles.splice(visibleTiles.length - 1, 1, (
+                    <div
+                        onClick={this.onShowAllClick}
+                        className='mx_RoomSublist2_showMoreButton'
+                        key='showall'
+                    >
+                        {_t("Show %(n)s more", {n: numMissing})}
+                    </div>
+                ));
+            }
             content = (
-                <IndicatorScrollbar className='mx_RoomSubList_scroll'>
-                    {tiles}
-                </IndicatorScrollbar>
+                <ResizableBox
+                    width={-1}
+                    height={tilesPx}
+                    axis="y"
+                    minConstraints={[-1, minTilesPx]}
+                    maxConstraints={[-1, maxTilesPx]}
+                    resizeHandles={handles}
+                    onResize={this.onResize}
+                    className="mx_RoomSublist2_resizeBox"
+                >
+                    {visibleTiles}
+                </ResizableBox>
             )
         }
 

src/components/views/rooms/RoomTile2.tsx

@@ -23,15 +23,10 @@ import classNames from "classnames";
 import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
 import AccessibleButton from "../../views/elements/AccessibleButton";
 import RoomAvatar from "../../views/avatars/RoomAvatar";
-import Tooltip from "../../views/elements/Tooltip";
 import dis from '../../../dispatcher/dispatcher';
 import { Key } from "../../../Keyboard";
-import * as RoomNotifs from '../../../RoomNotifs';
-import { EffectiveMembership, getEffectiveMembership } from "../../../stores/room-list/membership";
-import * as Unread from '../../../Unread';
-import * as FormattingUtils from "../../../utils/FormattingUtils";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import ActiveRoomObserver from "../../../ActiveRoomObserver";
+import NotificationBadge, { INotificationState, NotificationColor, RoomNotificationState } from "./NotificationBadge";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -41,30 +36,19 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
  * warning disappears.                                             *
  *******************************************************************/
 
-enum NotificationColor {
-    // Inverted (None -> Red) because we do integer comparisons on this
-    None, // nothing special
-    Bold, // no badge, show as unread
-    Grey, // unread notified messages
-    Red,  // unread pings
-}
-
 interface IProps {
     room: Room;
+    showMessagePreview: boolean;
 
     // TODO: Allow falsifying counts (for invites and stuff)
     // TODO: Transparency? Was this ever used?
     // TODO: Incoming call boxes?
 }
 
-interface INotificationState {
-    symbol: string;
-    color: NotificationColor;
-}
-
 interface IState {
     hover: boolean;
     notificationState: INotificationState;
+    selected: boolean;
 }
 
 export default class RoomTile2 extends React.Component<IProps, IState> {
@@ -86,86 +70,17 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
 
         this.state = {
             hover: false,
-            notificationState: this.getNotificationState(),
+            notificationState: new RoomNotificationState(this.props.room),
+            selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
         };
 
-        this.props.room.on("Room.receipt", this.handleRoomEventUpdate);
-        this.props.room.on("Room.timeline", this.handleRoomEventUpdate);
-        this.props.room.on("Room.redaction", this.handleRoomEventUpdate);
-        MatrixClientPeg.get().on("Event.decrypted", this.handleRoomEventUpdate);
+        ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
     }
 
     public componentWillUnmount() {
         if (this.props.room) {
-            this.props.room.removeListener("Room.receipt", this.handleRoomEventUpdate);
-            this.props.room.removeListener("Room.timeline", this.handleRoomEventUpdate);
-            this.props.room.removeListener("Room.redaction", this.handleRoomEventUpdate);
+            ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
         }
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("Event.decrypted", this.handleRoomEventUpdate);
-        }
-    }
-
-    // XXX: This is a bit of an awful-looking hack. We should probably be using state for
-    // this, but instead we're kinda forced to either duplicate the code or thread a variable
-    // through the code paths. This feels like the least evil option.
-    private get roomIsInvite(): boolean {
-        return getEffectiveMembership(this.props.room.getMyMembership()) === EffectiveMembership.Invite;
-    }
-
-    private handleRoomEventUpdate = (event: MatrixEvent) => {
-        const roomId = event.getRoomId();
-
-        // Sanity check: should never happen
-        if (roomId !== this.props.room.roomId) return;
-
-        this.updateNotificationState();
-    };
-
-    private updateNotificationState() {
-        this.setState({notificationState: this.getNotificationState()});
-    }
-
-    private getNotificationState(): INotificationState {
-        const state: INotificationState = {
-            color: NotificationColor.None,
-            symbol: null,
-        };
-
-        if (this.roomIsInvite) {
-            state.color = NotificationColor.Red;
-            state.symbol = "!";
-        } else {
-            const redNotifs = RoomNotifs.getUnreadNotificationCount(this.props.room, 'highlight');
-            const greyNotifs = RoomNotifs.getUnreadNotificationCount(this.props.room, 'total');
-
-            // For a 'true count' we pick the grey notifications first because they include the
-            // red notifications. If we don't have a grey count for some reason we use the red
-            // count. If that count is broken for some reason, assume zero. This avoids us showing
-            // a badge for 'NaN' (which formats as 'NaNB' for NaN Billion).
-            const trueCount = greyNotifs ? greyNotifs : (redNotifs ? redNotifs : 0);
-
-            // Note: we only set the symbol if we have an actual count. We don't want to show
-            // zero on badges.
-
-            if (redNotifs > 0) {
-                state.color = NotificationColor.Red;
-                state.symbol = FormattingUtils.formatCount(trueCount);
-            } else if (greyNotifs > 0) {
-                state.color = NotificationColor.Grey;
-                state.symbol = FormattingUtils.formatCount(trueCount);
-            } else {
-                // We don't have any notified messages, but we might have unread messages. Let's
-                // find out.
-                const hasUnread = Unread.doesRoomHaveUnreadMessages(this.props.room);
-                if (hasUnread) {
-                    state.color = NotificationColor.Bold;
-                    // no symbol for this state
-                }
-            }
-        }
-
-        return state;
     }
 
     private onTileMouseEnter = () => {
@@ -186,60 +101,44 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         });
     };
 
+    private onActiveRoomUpdate = (isActive: boolean) => {
+        this.setState({selected: isActive});
+    };
+
     public render(): React.ReactElement {
         // TODO: Collapsed state
         // TODO: Invites
         // TODO: a11y proper
         // TODO: Render more than bare minimum
 
-        const hasBadge = this.state.notificationState.color > NotificationColor.Bold;
-        const isUnread = this.state.notificationState.color > NotificationColor.None;
         const classes = classNames({
-            'mx_RoomTile': true,
-            // 'mx_RoomTile_selected': this.state.selected,
-            'mx_RoomTile_unread': isUnread,
-            'mx_RoomTile_unreadNotify': this.state.notificationState.color >= NotificationColor.Grey,
-            'mx_RoomTile_highlight': this.state.notificationState.color >= NotificationColor.Red,
-            'mx_RoomTile_invited': this.roomIsInvite,
-            // 'mx_RoomTile_menuDisplayed': isMenuDisplayed,
-            'mx_RoomTile_noBadges': !hasBadge,
-            // 'mx_RoomTile_transparent': this.props.transparent,
-            // 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
+            'mx_RoomTile2': true,
+            'mx_RoomTile2_selected': this.state.selected,
         });
 
-        const avatarClasses = classNames({
-            'mx_RoomTile_avatar': true,
-        });
-
-
-        let badge;
-        if (hasBadge) {
-            const badgeClasses = classNames({
-                'mx_RoomTile_badge': true,
-                'mx_RoomTile_badgeButton': false, // this.state.badgeHover || isMenuDisplayed
-            });
-            badge = <div className={badgeClasses}>{this.state.notificationState.symbol}</div>;
-        }
+        const badge = <NotificationBadge notification={this.state.notificationState} allowNoCount={true} />;
 
         // TODO: the original RoomTile uses state for the room name. Do we need to?
         let name = this.props.room.name;
         if (typeof name !== 'string') name = '';
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
-        const nameClasses = classNames({
-            'mx_RoomTile_name': true,
-            'mx_RoomTile_invite': this.roomIsInvite,
-            'mx_RoomTile_badgeShown': hasBadge,
-        });
-
         // TODO: Support collapsed state properly
-        let tooltip = null;
-        if (false) { // isCollapsed
-            if (this.state.hover) {
-                tooltip = <Tooltip className="mx_RoomTile_tooltip" label={this.props.room.name} />
-            }
+        // TODO: Tooltip?
+
+        let messagePreview = null;
+        if (this.props.showMessagePreview) {
+            // TODO: Actually get the real message preview from state
+            messagePreview = <div className="mx_RoomTile2_messagePreview">I just ate a pie.</div>;
         }
 
+        const nameClasses = classNames({
+            "mx_RoomTile2_name": true,
+            "mx_RoomTile2_nameWithPreview": !!messagePreview,
+            "mx_RoomTile2_nameHasUnreadEvents": this.state.notificationState.color >= NotificationColor.Bold,
+        });
+
+        const avatarSize = 32;
         return (
             <React.Fragment>
                 <RovingTabIndexWrapper inputRef={this.roomTile}>
@@ -254,20 +153,18 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
                             onClick={this.onTileClick}
                             role="treeitem"
                         >
-                            <div className={avatarClasses}>
-                                <div className="mx_RoomTile_avatar_container">
-                                    <RoomAvatar room={this.props.room} width={24} height={24}/>
-                                </div>
+                            <div className="mx_RoomTile2_avatarContainer">
+                                <RoomAvatar room={this.props.room} width={avatarSize} height={avatarSize}/>
                             </div>
-                            <div className="mx_RoomTile_nameContainer">
-                                <div className="mx_RoomTile_labelContainer">
-                                    <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
-                                        {name}
-                                    </div>
+                            <div className="mx_RoomTile2_nameContainer">
+                                <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
+                                    {name}
                                 </div>
+                                {messagePreview}
+                            </div>
+                            <div className="mx_RoomTile2_badgeContainer">
                                 {badge}
                             </div>
-                            {tooltip}
                         </AccessibleButton>
                     }
                 </RovingTabIndexWrapper>

src/components/views/rooms/SendMessageComposer.js

@@ -44,6 +44,7 @@ import {Key} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import RateLimitedFunc from '../../../ratelimitedfunc';
+import {Action} from "../../../dispatcher/actions";
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@@ -364,7 +365,7 @@ export default class SendMessageComposer extends React.Component {
     onAction = (payload) => {
         switch (payload.action) {
             case 'reply_to_event':
-            case 'focus_composer':
+            case Action.FocusComposer:
                 this._editorRef && this._editorRef.focus();
                 break;
             case 'insert_mention':

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -62,7 +62,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         super(props);
 
         this.state = {
-            fontSize: SettingsStore.getValue("fontSize", null).toString(),
+            fontSize: (SettingsStore.getValue("baseFontSize", null) + FontWatcher.SIZE_DIFF).toString(),
             ...this.calculateThemeState(),
             customThemeUrl: "",
             customThemeMessage: {isError: false, text: ""},
@@ -132,13 +132,13 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
     private onFontSizeChanged = (size: number): void => {
         this.setState({fontSize: size.toString()});
-        SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, size);
+        SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, size - FontWatcher.SIZE_DIFF);
     };
 
     private onValidateFontSize = async ({value}: Pick<IFieldState, "value">): Promise<IValidationResult> => {
         const parsedSize = parseFloat(value);
-        const min = FontWatcher.MIN_SIZE;
-        const max = FontWatcher.MAX_SIZE;
+        const min = FontWatcher.MIN_SIZE + FontWatcher.SIZE_DIFF;
+        const max = FontWatcher.MAX_SIZE + FontWatcher.SIZE_DIFF;
 
         if (isNaN(parsedSize)) {
             return {valid: false, feedback: _t("Size must be a number")};
@@ -151,7 +151,13 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             };
         }
 
-        SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, value);
+        SettingsStore.setValue(
+            "baseFontSize",
+            null,
+            SettingLevel.DEVICE,
+            parseInt(value, 10) - FontWatcher.SIZE_DIFF
+        );
+
         return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
     }
 
@@ -275,7 +281,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     values={[13, 15, 16, 18, 20]}
                     value={parseInt(this.state.fontSize, 10)}
                     onSelectionChange={this.onFontSizeChanged}
-                    displayFunc={value => ""}
+                    displayFunc={_ => ""}
                     disabled={this.state.useCustomFontSize}
                 />
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
@@ -284,9 +290,10 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 name="useCustomFontSize"
                 level={SettingLevel.ACCOUNT}
                 onChange={(checked) => this.setState({useCustomFontSize: checked})}
+                useCheckbox={true}
             />
             <Field
-                type="text"
+                type="number"
                 label={_t("Font size")}
                 autoComplete="off"
                 placeholder={this.state.fontSize.toString()}
@@ -295,6 +302,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 onValidate={this.onValidateFontSize}
                 onChange={(value) => this.setState({fontSize: value.target.value})}
                 disabled={!this.state.useCustomFontSize}
+                className="mx_SettingsTab_customFontSizeField"
             />
         </div>;
     }