Merge pull request #4253 from matrix-org/travis/room-list-2

Rewrite the room list store

src/components/structures/LeftPanel.js

@@ -26,6 +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";
 
 
 const LeftPanel = createReactClass({
@@ -273,6 +274,29 @@ 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} />;
+        }
+
         return (
             <div className={containerClasses}>
                 { tagPanelContainer }
@@ -284,15 +308,7 @@ const LeftPanel = createReactClass({
                         { exploreButton }
                         { searchBox }
                     </div>
-                    <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} />
+                    {roomList}
                 </aside>
             </div>
         );

src/components/structures/LoggedInView.tsx

@@ -31,7 +31,6 @@ import dis from '../../dispatcher/dispatcher';
 import sessionStore from '../../stores/SessionStore';
 import {MatrixClientPeg, MatrixClientCreds} from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
-import RoomListStore from "../../stores/RoomListStore";
 
 import TagOrderActions from '../../actions/TagOrderActions';
 import RoomListActions from '../../actions/RoomListActions';
@@ -42,6 +41,8 @@ import * as KeyboardShortcuts from "../../accessibility/KeyboardShortcuts";
 import HomePage from "./HomePage";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PlatformPeg from "../../PlatformPeg";
+import { RoomListStoreTempProxy } from "../../stores/room-list/RoomListStoreTempProxy";
+import { DefaultTagID } from "../../stores/room-list/models";
 // 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.
 // NB. this is just for server notices rather than pinned messages in general.
@@ -297,18 +298,18 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
     };
 
     onRoomStateEvents = (ev, state) => {
-        const roomLists = RoomListStore.getRoomLists();
-        if (roomLists['m.server_notice'] && roomLists['m.server_notice'].some(r => r.roomId === ev.getRoomId())) {
+        const roomLists = RoomListStoreTempProxy.getRoomLists();
+        if (roomLists[DefaultTagID.ServerNotice] && roomLists[DefaultTagID.ServerNotice].some(r => r.roomId === ev.getRoomId())) {
             this._updateServerNoticeEvents();
         }
     };
 
     _updateServerNoticeEvents = async () => {
-        const roomLists = RoomListStore.getRoomLists();
-        if (!roomLists['m.server_notice']) return [];
+        const roomLists = RoomListStoreTempProxy.getRoomLists();
+        if (!roomLists[DefaultTagID.ServerNotice]) return [];
 
         const pinnedEvents = [];
-        for (const room of roomLists['m.server_notice']) {
+        for (const room of roomLists[DefaultTagID.ServerNotice]) {
             const pinStateEvent = room.currentState.getStateEvents("m.room.pinned_events", "");
 
             if (!pinStateEvent || !pinStateEvent.getContent().pinned) continue;

src/components/views/dialogs/InviteDialog.js

@@ -34,9 +34,10 @@ import {humanizeTime} from "../../../utils/humanize";
 import createRoom, {canEncryptToAllUsers} from "../../../createRoom";
 import {inviteMultipleToRoom} from "../../../RoomInvite";
 import SettingsStore from '../../../settings/SettingsStore';
-import RoomListStore, {TAG_DM} from "../../../stores/RoomListStore";
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
+import {RoomListStoreTempProxy} from "../../../stores/room-list/RoomListStoreTempProxy";
+import {DefaultTagID} from "../../../stores/room-list/models";
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
@@ -344,10 +345,10 @@ export default class InviteDialog extends React.PureComponent {
     _buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number} {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
-        // Also pull in all the rooms tagged as TAG_DM so we don't miss anything. Sometimes the
+        // Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the
         // room list doesn't tag the room for the DMRoomMap, but does for the room list.
-        const taggedRooms = RoomListStore.getRoomLists();
-        const dmTaggedRooms = taggedRooms[TAG_DM];
+        const taggedRooms = RoomListStoreTempProxy.getRoomLists();
+        const dmTaggedRooms = taggedRooms[DefaultTagID.DM];
         const myUserId = MatrixClientPeg.get().getUserId();
         for (const dmRoom of dmTaggedRooms) {
             const otherMembers = dmRoom.getJoinedMembers().filter(u => u.userId !== myUserId);

src/components/views/rooms/RoomList.js

@@ -29,7 +29,6 @@ import rate_limited_func from "../../../ratelimitedfunc";
 import * as Rooms from '../../../Rooms';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import TagOrderStore from '../../../stores/TagOrderStore';
-import RoomListStore, {TAG_DM} from '../../../stores/RoomListStore';
 import CustomRoomTagStore from '../../../stores/CustomRoomTagStore';
 import GroupStore from '../../../stores/GroupStore';
 import RoomSubList from '../../structures/RoomSubList';
@@ -41,6 +40,8 @@ import * as Receipt from "../../../utils/Receipt";
 import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
 import {RovingTabIndexProvider} from "../../../accessibility/RovingTabIndex";
+import {RoomListStoreTempProxy} from "../../../stores/room-list/RoomListStoreTempProxy";
+import {DefaultTagID} from "../../../stores/room-list/models";
 import * as Unread from "../../../Unread";
 import RoomViewStore from "../../../stores/RoomViewStore";
 
@@ -161,7 +162,7 @@ export default createReactClass({
             this.updateVisibleRooms();
         });
 
-        this._roomListStoreToken = RoomListStore.addListener(() => {
+        this._roomListStoreToken = RoomListStoreTempProxy.addListener(() => {
             this._delayedRefreshRoomList();
         });
 
@@ -521,7 +522,7 @@ export default createReactClass({
     },
 
     getTagNameForRoomId: function(roomId) {
-        const lists = RoomListStore.getRoomLists();
+        const lists = RoomListStoreTempProxy.getRoomLists();
         for (const tagName of Object.keys(lists)) {
             for (const room of lists[tagName]) {
                 // Should be impossible, but guard anyways.
@@ -541,7 +542,7 @@ export default createReactClass({
     },
 
     getRoomLists: function() {
-        const lists = RoomListStore.getRoomLists();
+        const lists = RoomListStoreTempProxy.getRoomLists();
 
         const filteredLists = {};
 
@@ -773,10 +774,10 @@ export default createReactClass({
                 incomingCall: incomingCallIfTaggedAs('m.favourite'),
             },
             {
-                list: this.state.lists[TAG_DM],
+                list: this.state.lists[DefaultTagID.DM],
                 label: _t('Direct Messages'),
-                tagName: TAG_DM,
-                incomingCall: incomingCallIfTaggedAs(TAG_DM),
+                tagName: DefaultTagID.DM,
+                incomingCall: incomingCallIfTaggedAs(DefaultTagID.DM),
                 onAddRoom: () => {dis.dispatch({action: 'view_create_chat'});},
                 addRoomLabel: _t("Start chat"),
             },

src/components/views/rooms/RoomList2.tsx

@@ -0,0 +1,246 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 2018 Vector Creations Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import { _t, _td } from "../../../languageHandler";
+import { 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 { 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";
+
+/*******************************************************************
+ *   CAUTION                                                       *
+ *******************************************************************
+ * This is a work in progress implementation and isn't complete or *
+ * even useful as a component. Please avoid using it until this    *
+ * warning disappears.                                             *
+ *******************************************************************/
+
+interface IProps {
+    onKeyDown: (ev: React.KeyboardEvent) => void;
+    onFocus: (ev: React.FocusEvent) => void;
+    onBlur: (ev: React.FocusEvent) => void;
+    resizeNotifier: ResizeNotifier;
+    collapsed: boolean;
+    searchFilter: string;
+}
+
+interface IState {
+    sublists: ITagMap;
+}
+
+const TAG_ORDER: TagID[] = [
+    // -- Community Invites Placeholder --
+
+    DefaultTagID.Invite,
+    DefaultTagID.Favourite,
+    DefaultTagID.DM,
+    DefaultTagID.Untagged,
+
+    // -- Custom Tags Placeholder --
+
+    DefaultTagID.LowPriority,
+    DefaultTagID.ServerNotice,
+    DefaultTagID.Archived,
+];
+const COMMUNITY_TAGS_BEFORE_TAG = DefaultTagID.Invite;
+const CUSTOM_TAGS_BEFORE_TAG = DefaultTagID.LowPriority;
+const ALWAYS_VISIBLE_TAGS: TagID[] = [
+    DefaultTagID.DM,
+    DefaultTagID.Untagged,
+];
+
+interface ITagAesthetics {
+    sectionLabel: string;
+    addRoomLabel?: string;
+    onAddRoom?: (dispatcher: Dispatcher<ActionPayload>) => void;
+    isInvite: boolean;
+    defaultHidden: boolean;
+}
+
+const TAG_AESTHETICS: {
+    // @ts-ignore - TS wants this to be a string but we know better
+    [tagId: TagID]: ITagAesthetics;
+} = {
+    [DefaultTagID.Invite]: {
+        sectionLabel: _td("Invites"),
+        isInvite: true,
+        defaultHidden: false,
+    },
+    [DefaultTagID.Favourite]: {
+        sectionLabel: _td("Favourites"),
+        isInvite: false,
+        defaultHidden: false,
+    },
+    [DefaultTagID.DM]: {
+        sectionLabel: _td("Direct Messages"),
+        isInvite: false,
+        defaultHidden: false,
+        addRoomLabel: _td("Start chat"),
+        onAddRoom: (dispatcher: Dispatcher<ActionPayload>) => dispatcher.dispatch({action: 'view_create_chat'}),
+    },
+    [DefaultTagID.Untagged]: {
+        sectionLabel: _td("Rooms"),
+        isInvite: false,
+        defaultHidden: false,
+        addRoomLabel: _td("Create room"),
+        onAddRoom: (dispatcher: Dispatcher<ActionPayload>) => dispatcher.dispatch({action: 'view_create_room'}),
+    },
+    [DefaultTagID.LowPriority]: {
+        sectionLabel: _td("Low priority"),
+        isInvite: false,
+        defaultHidden: false,
+    },
+    [DefaultTagID.ServerNotice]: {
+        sectionLabel: _td("System Alerts"),
+        isInvite: false,
+        defaultHidden: false,
+    },
+    [DefaultTagID.Archived]: {
+        sectionLabel: _td("Historical"),
+        isInvite: false,
+        defaultHidden: true,
+    },
+};
+
+export default class RoomList2 extends React.Component<IProps, IState> {
+    private sublistRefs: { [tagId: string]: React.RefObject<RoomSublist2> } = {};
+    private sublistSizes: { [tagId: string]: number } = {};
+    private sublistCollapseStates: { [tagId: string]: boolean } = {};
+    private unfilteredLayout: Layout;
+    private filteredLayout: Layout;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {sublists: {}};
+        this.loadSublistSizes();
+        this.prepareLayouts();
+    }
+
+    public componentDidMount(): void {
+        RoomListStore.instance.on(LISTS_UPDATE_EVENT, (store) => {
+            console.log("new lists", store.orderedLists);
+            this.setState({sublists: store.orderedLists});
+        });
+    }
+
+    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();
+            }
+        }, 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,
+        });
+    }
+
+    private renderSublists(): React.ReactElement[] {
+        const components: React.ReactElement[] = [];
+
+        for (const orderedTagId of TAG_ORDER) {
+            if (COMMUNITY_TAGS_BEFORE_TAG === orderedTagId) {
+                // Populate community invites if we have the chance
+                // TODO
+            }
+            if (CUSTOM_TAGS_BEFORE_TAG === orderedTagId) {
+                // Populate custom tags if needed
+                // TODO
+            }
+
+            const orderedRooms = this.state.sublists[orderedTagId] || [];
+            if (orderedRooms.length === 0 && !ALWAYS_VISIBLE_TAGS.includes(orderedTagId)) {
+                continue; // skip tag - not needed
+            }
+
+            const aesthetics: ITagAesthetics = TAG_AESTHETICS[orderedTagId];
+            if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
+
+            const onAddRoomFn = aesthetics.onAddRoom ? () => aesthetics.onAddRoom(dis) : null;
+            components.push(<RoomSublist2
+                key={`sublist-${orderedTagId}`}
+                forRooms={true}
+                rooms={orderedRooms}
+                startAsHidden={aesthetics.defaultHidden}
+                label={_t(aesthetics.sectionLabel)}
+                onAddRoom={onAddRoomFn}
+                addRoomLabel={aesthetics.addRoomLabel}
+                isInvite={aesthetics.isInvite}
+            />);
+        }
+
+        return components;
+    }
+
+    public render() {
+        const sublists = this.renderSublists();
+        return (
+            <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={this.props.onKeyDown}>
+                {({onKeyDownHandler}) => (
+                    <div
+                        onFocus={this.props.onFocus}
+                        onBlur={this.props.onBlur}
+                        onKeyDown={onKeyDownHandler}
+                        className="mx_RoomList"
+                        role="tree"
+                        aria-label={_t("Rooms")}
+                        // Firefox sometimes makes this element focusable due to
+                        // overflow:scroll;, so force it out of tab order.
+                        tabIndex={-1}
+                    >{sublists}</div>
+                )}
+            </RovingTabIndexProvider>
+        );
+    }
+}

src/components/views/rooms/RoomSublist2.tsx

@@ -0,0 +1,226 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 2018 Vector Creations Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import { createRef } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import classNames from 'classnames';
+import 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";
+
+/*******************************************************************
+ *   CAUTION                                                       *
+ *******************************************************************
+ * This is a work in progress implementation and isn't complete or *
+ * even useful as a component. Please avoid using it until this    *
+ * warning disappears.                                             *
+ *******************************************************************/
+
+interface IProps {
+    forRooms: boolean;
+    rooms?: Room[];
+    startAsHidden: boolean;
+    label: string;
+    onAddRoom?: () => void;
+    addRoomLabel: string;
+    isInvite: boolean;
+
+    // TODO: Collapsed state
+    // TODO: Height
+    // TODO: Group invites
+    // TODO: Calls
+    // TODO: forceExpand?
+    // TODO: Header clicking
+    // TODO: Spinner support for historical
+}
+
+interface IState {
+}
+
+export default class RoomSublist2 extends React.Component<IProps, IState> {
+    private headerButton = createRef();
+
+    public setHeight(size: number) {
+        // TODO: Do a thing (maybe - height changes are different in FTUE)
+    }
+
+    private hasTiles(): boolean {
+        return this.numTiles > 0;
+    }
+
+    private get numTiles(): number {
+        // TODO: Account for group invites
+        return (this.props.rooms || []).length;
+    }
+
+    private onAddRoom = (e) => {
+        e.stopPropagation();
+        if (this.props.onAddRoom) this.props.onAddRoom();
+    };
+
+    private renderTiles(): React.ReactElement[] {
+        const tiles: React.ReactElement[] = [];
+
+        if (this.props.rooms) {
+            for (const room of this.props.rooms) {
+                tiles.push(<RoomTile2 room={room} key={`room-${room.roomId}`}/>);
+            }
+        }
+
+        return tiles;
+    }
+
+    private renderHeader(): React.ReactElement {
+        const notifications = !this.props.isInvite
+            ? RoomNotifs.aggregateNotificationCount(this.props.rooms)
+            : {count: 0, highlight: true};
+        const notifCount = notifications.count;
+        const notifHighlight = notifications.highlight;
+
+        // TODO: Title on collapsed
+        // TODO: Incoming call box
+
+        let chevron = null;
+        if (this.hasTiles()) {
+            const chevronClasses = classNames({
+                'mx_RoomSubList_chevron': true,
+                'mx_RoomSubList_chevronRight': false, // isCollapsed
+                'mx_RoomSubList_chevronDown': true, // !isCollapsed
+            });
+            chevron = (<div className={chevronClasses}/>);
+        }
+
+        return (
+            <RovingTabIndexWrapper inputRef={this.headerButton}>
+                {({onFocus, isActive, ref}) => {
+                    // TODO: Use onFocus
+                    const tabIndex = isActive ? 0 : -1;
+
+                    // TODO: Collapsed state
+                    let badge;
+                    if (true) { // !isCollapsed
+                        const badgeClasses = classNames({
+                            'mx_RoomSubList_badge': true,
+                            'mx_RoomSubList_badgeHighlight': notifHighlight,
+                        });
+                        // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
+                        if (notifCount > 0) {
+                            badge = (
+                                <AccessibleButton
+                                    tabIndex={tabIndex}
+                                    className={badgeClasses}
+                                    aria-label={_t("Jump to first unread room.")}
+                                >
+                                    <div>
+                                        {FormattingUtils.formatCount(notifCount)}
+                                    </div>
+                                </AccessibleButton>
+                            );
+                        } else if (this.props.isInvite && this.hasTiles()) {
+                            // Render the `!` badge for invites
+                            badge = (
+                                <AccessibleButton
+                                    tabIndex={tabIndex}
+                                    className={badgeClasses}
+                                    aria-label={_t("Jump to first invite.")}
+                                >
+                                    <div>
+                                        {FormattingUtils.formatCount(this.numTiles)}
+                                    </div>
+                                </AccessibleButton>
+                            );
+                        }
+                    }
+
+                    let addRoomButton = null;
+                    if (!!this.props.onAddRoom) {
+                        addRoomButton = (
+                            <AccessibleTooltipButton
+                                tabIndex={tabIndex}
+                                onClick={this.onAddRoom}
+                                className="mx_RoomSubList_addRoom"
+                                title={this.props.addRoomLabel || _t("Add room")}
+                            />
+                        );
+                    }
+
+                    // TODO: a11y (see old component)
+                    return (
+                        <div className={"mx_RoomSubList_labelContainer"}>
+                            <AccessibleButton
+                                inputRef={ref}
+                                tabIndex={tabIndex}
+                                className={"mx_RoomSubList_label"}
+                                role="treeitem"
+                                aria-level="1"
+                            >
+                                {chevron}
+                                <span>{this.props.label}</span>
+                            </AccessibleButton>
+                            {badge}
+                            {addRoomButton}
+                        </div>
+                    );
+                }}
+            </RovingTabIndexWrapper>
+        );
+    }
+
+    public render(): React.ReactElement {
+        // TODO: Proper rendering
+        // TODO: Error boundary
+
+        const tiles = this.renderTiles();
+
+        const classes = classNames({
+            // TODO: Proper collapse support
+            'mx_RoomSubList': true,
+            'mx_RoomSubList_hidden': false, // len && isCollapsed
+            'mx_RoomSubList_nonEmpty': this.hasTiles(), // len && !isCollapsed
+        });
+
+        let content = null;
+        if (tiles.length > 0) {
+            // TODO: Lazy list rendering
+            // TODO: Whatever scrolling magic needs to happen here
+            content = (
+                <IndicatorScrollbar className='mx_RoomSubList_scroll'>
+                    {tiles}
+                </IndicatorScrollbar>
+            )
+        }
+
+        // TODO: onKeyDown support
+        return (
+            <div
+                className={classes}
+                role="group"
+                aria-label={this.props.label}
+            >
+                {this.renderHeader()}
+                {content}
+            </div>
+        );
+    }
+}

src/components/views/rooms/RoomTile2.tsx

@@ -0,0 +1,219 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { createRef } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import classNames from "classnames";
+import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
+import AccessibleButton from "../../views/elements/AccessibleButton";
+import RoomAvatar from "../../views/avatars/RoomAvatar";
+import Tooltip from "../../views/elements/Tooltip";
+import dis from '../../../dispatcher/dispatcher';
+import { Key } from "../../../Keyboard";
+import * as RoomNotifs from '../../../RoomNotifs';
+import { EffectiveMembership, getEffectiveMembership } from "../../../stores/room-list/membership";
+import * as Unread from '../../../Unread';
+import * as FormattingUtils from "../../../utils/FormattingUtils";
+
+/*******************************************************************
+ *   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 {
+    room: Room;
+
+    // TODO: Allow falsifying counts (for invites and stuff)
+    // TODO: Transparency? Was this ever used?
+    // TODO: Incoming call boxes?
+}
+
+interface IBadgeState {
+    showBadge: boolean; // if numUnread > 0 && !showBadge -> bold room
+    numUnread: number; // used only if showBadge or showBadgeHighlight is true
+    hasUnread: number; // used to make the room bold
+    showBadgeHighlight: boolean; // make the badge red
+    isInvite: boolean; // show a `!` instead of a number
+}
+
+interface IState extends IBadgeState {
+    hover: boolean;
+}
+
+export default class RoomTile2 extends React.Component<IProps, IState> {
+    private roomTile = createRef();
+
+    // TODO: Custom status
+    // TODO: Lock icon
+    // TODO: Presence indicator
+    // TODO: e2e shields
+    // TODO: Handle changes to room aesthetics (name, join rules, etc)
+    // TODO: scrollIntoView?
+    // TODO: hover, badge, etc
+    // TODO: isSelected for hover effects
+    // TODO: Context menu
+    // TODO: a11y
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            hover: false,
+
+            ...this.getBadgeState(),
+        };
+    }
+
+    public componentWillUnmount() {
+        // TODO: Listen for changes to the badge count and update as needed
+    }
+
+    private updateBadgeCount() {
+        this.setState({...this.getBadgeState()});
+    }
+
+    private getBadgeState(): IBadgeState {
+        // TODO: Make this code path faster
+        const highlightCount = RoomNotifs.getUnreadNotificationCount(this.props.room, 'highlight');
+        const numUnread = RoomNotifs.getUnreadNotificationCount(this.props.room);
+        const showBadge = Unread.doesRoomHaveUnreadMessages(this.props.room);
+        const myMembership = getEffectiveMembership(this.props.room.getMyMembership());
+        const isInvite = myMembership === EffectiveMembership.Invite;
+        const notifState = RoomNotifs.getRoomNotifsState(this.props.room.roomId);
+        const shouldShowNotifBadge = RoomNotifs.shouldShowNotifBadge(notifState);
+        const shouldShowHighlightBadge = RoomNotifs.shouldShowMentionBadge(notifState);
+
+        return {
+            showBadge: (showBadge && shouldShowNotifBadge) || isInvite,
+            numUnread,
+            hasUnread: showBadge,
+            showBadgeHighlight: (highlightCount > 0 && shouldShowHighlightBadge) || isInvite,
+            isInvite,
+        };
+    }
+
+    private onTileMouseEnter = () => {
+        this.setState({hover: true});
+    };
+
+    private onTileMouseLeave = () => {
+        this.setState({hover: false});
+    };
+
+    private onTileClick = (ev: React.KeyboardEvent) => {
+        dis.dispatch({
+            action: 'view_room',
+            // TODO: Support show_room_tile in new room list
+            show_room_tile: true, // make sure the room is visible in the list
+            room_id: this.props.room.roomId,
+            clear_search: (ev && (ev.key === Key.ENTER || ev.key === Key.SPACE)),
+        });
+    };
+
+    public render(): React.ReactElement {
+        // TODO: Collapsed state
+        // TODO: Invites
+        // TODO: a11y proper
+        // TODO: Render more than bare minimum
+
+        const classes = classNames({
+            'mx_RoomTile': true,
+            // 'mx_RoomTile_selected': this.state.selected,
+            'mx_RoomTile_unread': this.state.numUnread > 0 || this.state.hasUnread,
+            'mx_RoomTile_unreadNotify': this.state.showBadge,
+            'mx_RoomTile_highlight': this.state.showBadgeHighlight,
+            'mx_RoomTile_invited': this.state.isInvite,
+            // 'mx_RoomTile_menuDisplayed': isMenuDisplayed,
+            'mx_RoomTile_noBadges': !this.state.showBadge,
+            // 'mx_RoomTile_transparent': this.props.transparent,
+            // 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
+        });
+
+        const avatarClasses = classNames({
+            'mx_RoomTile_avatar': true,
+        });
+
+
+        let badge;
+        if (this.state.showBadge) {
+            const badgeClasses = classNames({
+                'mx_RoomTile_badge': true,
+                'mx_RoomTile_badgeButton': false, // this.state.badgeHover || isMenuDisplayed
+            });
+            const formattedCount = this.state.isInvite ? `!` : FormattingUtils.formatCount(this.state.numUnread);
+            badge = <div className={badgeClasses}>{formattedCount}</div>;
+        }
+
+        // TODO: the original RoomTile uses state for the room name. Do we need to?
+        let name = this.props.room.name;
+        if (typeof name !== 'string') name = '';
+        name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
+
+        const nameClasses = classNames({
+            'mx_RoomTile_name': true,
+            'mx_RoomTile_invite': this.state.isInvite,
+            'mx_RoomTile_badgeShown': this.state.showBadge,
+        });
+
+        // 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} dir="auto"/>
+            }
+        }
+
+        return (
+            <React.Fragment>
+                <RovingTabIndexWrapper inputRef={this.roomTile}>
+                    {({onFocus, isActive, ref}) =>
+                        <AccessibleButton
+                            onFocus={onFocus}
+                            tabIndex={isActive ? 0 : -1}
+                            inputRef={ref}
+                            className={classes}
+                            onMouseEnter={this.onTileMouseEnter}
+                            onMouseLeave={this.onTileMouseLeave}
+                            onClick={this.onTileClick}
+                            role="treeitem"
+                        >
+                            <div className={avatarClasses}>
+                                <div className="mx_RoomTile_avatar_container">
+                                    <RoomAvatar room={this.props.room} width={24} height={24}/>
+                                </div>
+                            </div>
+                            <div className="mx_RoomTile_nameContainer">
+                                <div className="mx_RoomTile_labelContainer">
+                                    <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
+                                        {name}
+                                    </div>
+                                </div>
+                                {badge}
+                            </div>
+                            {tooltip}
+                        </AccessibleButton>
+                    }
+                </RovingTabIndexWrapper>
+            </React.Fragment>
+        );
+    }
+}