Merge remote-tracking branch 'origin/develop' into travis/room-list/sublist-badges

res/css/_components.scss

@@ -19,6 +19,7 @@
 @import "./structures/_NotificationPanel.scss";
 @import "./structures/_RightPanel.scss";
 @import "./structures/_RoomDirectory.scss";
+@import "./structures/_RoomSearch.scss";
 @import "./structures/_RoomStatusBar.scss";
 @import "./structures/_RoomSubList.scss";
 @import "./structures/_RoomView.scss";

res/css/structures/_LeftPanel2.scss

@@ -88,7 +88,44 @@ $roomListMinimizedWidth: 50px;
         }
 
         .mx_LeftPanel2_filterContainer {
-            // TODO: Improve CSS for filtering and its input
+            margin-left: 12px;
+            margin-right: 12px;
+
+            // Create a flexbox to organize the inputs
+            display: flex;
+            align-items: center;
+
+            .mx_RoomSearch_expanded + .mx_LeftPanel2_exploreButton {
+                // Cheaty way to return the occupied space to the filter input
+                margin: 0;
+                width: 0;
+
+                // Don't forget to hide the masked ::before icon
+                visibility: hidden;
+            }
+
+            .mx_LeftPanel2_exploreButton {
+                width: 28px;
+                height: 28px;
+                border-radius: 20px;
+                background-color: #fff; // TODO: Variable and theme
+                position: relative;
+                margin-left: 8px;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 6px;
+                    left: 6px;
+                    width: 16px;
+                    height: 16px;
+                    mask-image: url('$(res)/img/feather-customised/compass.svg');
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background: $primary-fg-color;
+                }
+            }
         }
 
         .mx_LeftPanel2_actualRoomListContainer {

res/css/structures/_RoomSearch.scss

@@ -0,0 +1,70 @@
+/*
+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.
+*/
+
+// Note: this component expects to be contained within a flexbox
+.mx_RoomSearch {
+    flex: 1;
+    border-radius: 20px;
+    background-color: #fff; // TODO: Variable & theme
+    height: 26px;
+    padding: 2px;
+
+    // Create a flexbox for the icons (easier to manage)
+    display: flex;
+    align-items: center;
+
+    .mx_RoomSearch_icon {
+        width: 16px;
+        height: 16px;
+        mask: url('$(res)/img/feather-customised/search-input.svg');
+        mask-repeat: no-repeat;
+        background: $primary-fg-color;
+        margin-left: 7px;
+    }
+
+    .mx_RoomSearch_input {
+        border: none !important; // !important to override default app-wide styles
+        flex: 1 !important; // !important to override default app-wide styles
+        color: $primary-fg-color !important; // !important to override default app-wide styles
+        padding: 0;
+        height: 100%;
+        width: 100%;
+        font-size: $font-12px;
+        line-height: $font-16px;
+
+        &:not(.mx_RoomSearch_inputExpanded)::placeholder {
+            color: $primary-fg-color !important; // !important to override default app-wide styles
+        }
+    }
+
+    &.mx_RoomSearch_expanded {
+        .mx_RoomSearch_clearButton {
+            width: 16px;
+            height: 16px;
+            mask-image: url('$(res)/img/feather-customised/x.svg');
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+            margin-right: 8px;
+        }
+    }
+
+    .mx_RoomSearch_clearButton {
+        width: 0;
+        height: 0;
+    }
+}

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -43,3 +43,7 @@ limitations under the License.
     padding-left: 20px;
     padding-right: 5px;
 }
+
+.mx_SettingsTab_customFontSizeField {
+    margin-left: calc($font-16px + 10px);
+}

res/img/feather-customised/compass.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg>

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

@@ -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>
             );
         }

src/components/structures/LeftPanel2.tsx

@@ -18,16 +18,16 @@ import * as React from "react";
 import TagPanel from "./TagPanel";
 import classNames from "classnames";
 import dis from "../../dispatcher/dispatcher";
-import AccessibleButton from "../views/elements/AccessibleButton";
 import { _t } from "../../languageHandler";
 import SearchBox from "./SearchBox";
 import RoomList2 from "../views/rooms/RoomList2";
-import TopLeftMenuButton from "./TopLeftMenuButton";
 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                                                       *
@@ -42,7 +42,6 @@ interface IProps {
 }
 
 interface IState {
-    searchExpanded: boolean;
     searchFilter: string; // TODO: Move search into room list?
 }
 
@@ -58,7 +57,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         super(props);
 
         this.state = {
-            searchExpanded: false,
             searchFilter: "",
         };
     }
@@ -67,24 +65,10 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         this.setState({searchFilter: term});
     };
 
-    private onSearchCleared = (source: string): void => {
+    private onExplore = () => {
-        if (source === "keyboard") {
+        dis.fire(Action.ViewRoomDirectory);
-            dis.fire(Action.FocusComposer);
-        }
-        this.setState({searchExpanded: false});
-    }
-
-    private onSearchFocus = (): void => {
-        this.setState({searchExpanded: true});
     };
 
-    private onSearchBlur = (event: FocusEvent): void => {
-        const target = event.target as HTMLInputElement;
-        if (target.value.length === 0) {
-            this.setState({searchExpanded: false});
-        }
-    }
-
     private renderHeader(): React.ReactNode {
         // TODO: Update when profile info changes
         // TODO: Presence
@@ -126,6 +110,22 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         );
     }
 
+    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">
@@ -133,18 +133,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
             </div>
         );
 
-        const searchBox = (<SearchBox
-            className="mx_LeftPanel2_filterRoomsSearch"
-            enableRoomSearchFocus={true}
-            blurredPlaceholder={_t('Filter')}
-            placeholder={_t('Filter rooms…')}
-            onKeyDown={() => {/*TODO*/}}
-            onSearch={this.onSearch}
-            onCleared={this.onSearchCleared}
-            onFocus={this.onSearchFocus}
-            onBlur={this.onSearchBlur}
-            collapsed={false}/>); // TODO: Collapsed support
-
         // TODO: Improve props for RoomList2
         const roomList = <RoomList2
             onKeyDown={() => {/*TODO*/}}
@@ -167,14 +155,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                 {tagPanel}
                 <aside className="mx_LeftPanel2_roomListContainer">
                     {this.renderHeader()}
-                    <div
+                    {this.renderSearchExplore()}
-                        className="mx_LeftPanel2_filterContainer"
-                        onKeyDown={() => {/*TODO*/}}
-                        onFocus={() => {/*TODO*/}}
-                        onBlur={() => {/*TODO*/}}
-                    >
-                        {searchBox}
-                    </div>
                     <div className="mx_LeftPanel2_actualRoomListContainer">
                         {roomList}
                     </div>

src/components/structures/MatrixChat.tsx

@@ -624,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);
@@ -1611,9 +1611,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 action: 'require_registration',
             });
         } else if (screen === 'directory') {
-            dis.dispatch({
+            dis.fire(Action.ViewRoomDirectory);
-                action: 'view_room_directory',
-            });
         } 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/RoomView.js

@@ -1458,9 +1458,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({
+        dis.fire(Action.ViewRoomDirectory);
-            action: 'view_room_directory',
-        });
     },
 
     onSearchClick: function() {

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/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -281,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>
@@ -290,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()}
@@ -301,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>;
     }

src/dispatcher/actions.ts

@@ -40,6 +40,11 @@ export enum Action {
      */
     ViewUserSettings = "view_user_settings",
 
+    /**
+     * Opens the room directory. No additional payload information required.
+     */
+    ViewRoomDirectory = "view_room_directory",
+
     /**
      * Sets the current tooltip. Should be use with ViewTooltipPayload.
      */

src/i18n/strings/en_EN.json

@@ -1958,6 +1958,7 @@
     "Explore": "Explore",
     "Filter": "Filter",
     "Filter rooms…": "Filter rooms…",
+    "Explore rooms": "Explore rooms",
     "Failed to reject invitation": "Failed to reject invitation",
     "This room is not public. You will not be able to rejoin without an invite.": "This room is not public. You will not be able to rejoin without an invite.",
     "Are you sure you want to leave the room '%(roomName)s'?": "Are you sure you want to leave the room '%(roomName)s'?",
@@ -2003,7 +2004,6 @@
     "Find a room…": "Find a room…",
     "Find a room… (e.g. %(exampleRoom)s)": "Find a room… (e.g. %(exampleRoom)s)",
     "If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.": "If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.",
-    "Explore rooms": "Explore rooms",
     "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.": "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.",
     "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please <a>contact your service administrator</a> to continue using the service.": "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please <a>contact your service administrator</a> to continue using the service.",
     "Your message wasn't sent because this homeserver has exceeded a resource limit. Please <a>contact your service administrator</a> to continue using the service.": "Your message wasn't sent because this homeserver has exceeded a resource limit. Please <a>contact your service administrator</a> to continue using the service.",

src/stores/room-list/algorithms/list-ordering/Algorithm.ts

@@ -20,9 +20,11 @@ import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import { EffectiveMembership, splitRoomsByMembership } from "../../membership";
 import { ITagMap, ITagSortingMap } from "../models";
 import DMRoomMap from "../../../../utils/DMRoomMap";
-import { FILTER_CHANGED, IFilterCondition } from "../../filters/IFilterCondition";
+import { FILTER_CHANGED, FilterPriority, IFilterCondition } from "../../filters/IFilterCondition";
 import { EventEmitter } from "events";
 import { UPDATE_EVENT } from "../../../AsyncStore";
+import { ArrayUtil } from "../../../../utils/arrays";
+import { getEnumValues } from "../../../../utils/enums";
 
 // TODO: Add locking support to avoid concurrent writes?
 
@@ -184,22 +186,33 @@ export abstract class Algorithm extends EventEmitter {
         }
 
         console.warn("Recalculating filtered room list");
-        const allowedByFilters = new Set<Room>();
         const filters = Array.from(this.allowedByFilter.keys());
+        const orderedFilters = new ArrayUtil(filters)
+            .groupBy(f => f.relativePriority)
+            .orderBy(getEnumValues(FilterPriority))
+            .value;
         const newMap: ITagMap = {};
         for (const tagId of Object.keys(this.cachedRooms)) {
             // Cheaply clone the rooms so we can more easily do operations on the list.
             // We optimize our lookups by trying to reduce sample size as much as possible
             // to the rooms we know will be deduped by the Set.
             const rooms = this.cachedRooms[tagId];
-            const remainingRooms = rooms.map(r => r).filter(r => !allowedByFilters.has(r));
+            let remainingRooms = rooms.map(r => r);
-            const allowedRoomsInThisTag = [];
+            let allowedRoomsInThisTag = [];
-            for (const filter of filters) {
+            let lastFilterPriority = orderedFilters[0].relativePriority;
+            for (const filter of orderedFilters) {
+                if (filter.relativePriority !== lastFilterPriority) {
+                    // Every time the filter changes priority, we want more specific filtering.
+                    // To accomplish that, reset the variables to make it look like the process
+                    // has started over, but using the filtered rooms as the seed.
+                    remainingRooms = allowedRoomsInThisTag;
+                    allowedRoomsInThisTag = [];
+                    lastFilterPriority = filter.relativePriority;
+                }
                 const filteredRooms = remainingRooms.filter(r => filter.isVisible(r));
                 for (const room of filteredRooms) {
                     const idx = remainingRooms.indexOf(room);
                     if (idx >= 0) remainingRooms.splice(idx, 1);
-                    allowedByFilters.add(room);
                     allowedRoomsInThisTag.push(room);
                 }
             }
@@ -207,7 +220,8 @@ export abstract class Algorithm extends EventEmitter {
             console.log(`[DEBUG] ${newMap[tagId].length}/${rooms.length} rooms filtered into ${tagId}`);
         }
 
-        this.allowedRoomsByFilters = allowedByFilters;
+        const allowedRooms = Object.values(newMap).reduce((rv, v) => { rv.push(...v); return rv; }, <Room[]>[]);
+        this.allowedRoomsByFilters = new Set(allowedRooms);
         this.filteredRooms = newMap;
         this.emit(LIST_UPDATED_EVENT);
     }

src/stores/room-list/filters/CommunityFilterCondition.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { Room } from "matrix-js-sdk/src/models/room";
-import { FILTER_CHANGED, IFilterCondition } from "./IFilterCondition";
+import { FILTER_CHANGED, FilterPriority, IFilterCondition } from "./IFilterCondition";
 import { Group } from "matrix-js-sdk/src/models/group";
 import { EventEmitter } from "events";
 import GroupStore from "../../GroupStore";
@@ -37,6 +37,11 @@ export class CommunityFilterCondition extends EventEmitter implements IFilterCon
         this.onStoreUpdate(); // trigger a false update to seed the store
     }
 
+    public get relativePriority(): FilterPriority {
+        // Lowest priority so we can coarsely find rooms.
+        return FilterPriority.Lowest;
+    }
+
     public isVisible(room: Room): boolean {
         return this.roomIds.includes(room.roomId);
     }

src/stores/room-list/filters/IFilterCondition.ts

@@ -19,6 +19,12 @@ import { EventEmitter } from "events";
 
 export const FILTER_CHANGED = "filter_changed";
 
+export enum FilterPriority {
+    Lowest,
+    // in the middle would be Low, Normal, and High if we had a need
+    Highest,
+}
+
 /**
  * A filter condition for the room list, determining if a room
  * should be shown or not.
@@ -32,6 +38,12 @@ export const FILTER_CHANGED = "filter_changed";
  * as a change in the user's input), this emits FILTER_CHANGED.
  */
 export interface IFilterCondition extends EventEmitter {
+    /**
+     * The relative priority that this filter should be applied with.
+     * Lower priorities get applied first.
+     */
+    relativePriority: FilterPriority;
+
     /**
      * Determines if a given room should be visible under this
      * condition.

src/stores/room-list/filters/NameFilterCondition.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { Room } from "matrix-js-sdk/src/models/room";
-import { FILTER_CHANGED, IFilterCondition } from "./IFilterCondition";
+import { FILTER_CHANGED, FilterPriority, IFilterCondition } from "./IFilterCondition";
 import { EventEmitter } from "events";
 
 /**
@@ -29,6 +29,11 @@ export class NameFilterCondition extends EventEmitter implements IFilterConditio
         super();
     }
 
+    public get relativePriority(): FilterPriority {
+        // We want this one to be at the highest priority so it can search within other filters.
+        return FilterPriority.Highest;
+    }
+
     public get search(): string {
         return this._search;
     }

src/utils/FormattingUtils.ts

@@ -121,11 +121,12 @@ export function formatCommaSeparatedList(items: string[], itemLimit?: number): s
 }
 
 /**
- * Formats a number into a 'minimal' badge count (9, 99, 99+).
+ * Formats a number into a 'minimal' badge count (9, 98, 99+).
  * @param count The number to convert
  * @returns The badge count, stringified.
  */
 export function formatMinimalBadgeCount(count: number): string {
-    if (count < 100) return count.toString();
+    // we specifically go from "98" to "99+"
+    if (count < 99) return count.toString();
     return "99+";
 }

src/utils/arrays.ts

@@ -45,3 +45,63 @@ export function arrayDiff<T>(a: T[], b: T[]): { added: T[], removed: T[] } {
         removed: a.filter(i => !b.includes(i)),
     };
 }
+
+/**
+ * Helper functions to perform LINQ-like queries on arrays.
+ */
+export class ArrayUtil<T> {
+    /**
+     * Create a new array helper.
+     * @param a The array to help. Can be modified in-place.
+     */
+    constructor(private a: T[]) {
+    }
+
+    /**
+     * The value of this array, after all appropriate alterations.
+     */
+    public get value(): T[] {
+        return this.a;
+    }
+
+    /**
+     * Groups an array by keys.
+     * @param fn The key-finding function.
+     * @returns This.
+     */
+    public groupBy<K>(fn: (a: T) => K): GroupedArray<K, T> {
+        const obj = this.a.reduce((rv: Map<K, T[]>, val: T) => {
+            const k = fn(val);
+            if (!rv.has(k)) rv.set(k, []);
+            rv.get(k).push(val);
+            return rv;
+        }, new Map<K, T[]>());
+        return new GroupedArray(obj);
+    }
+}
+
+/**
+ * Helper functions to perform LINQ-like queries on groups (maps).
+ */
+export class GroupedArray<K, T> {
+    /**
+     * Creates a new group helper.
+     * @param val The group to help. Can be modified in-place.
+     */
+    constructor(private val: Map<K, T[]>) {
+    }
+
+    /**
+     * Orders the grouping into an array using the provided key order.
+     * @param keyOrder The key order.
+     * @returns An array helper of the result.
+     */
+    public orderBy(keyOrder: K[]): ArrayUtil<T> {
+        const a: T[] = [];
+        for (const k of keyOrder) {
+            if (!this.val.has(k)) continue;
+            a.push(...this.val.get(k));
+        }
+        return new ArrayUtil(a);
+    }
+}

src/utils/enums.ts

@@ -0,0 +1,27 @@
+/*
+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.
+*/
+
+/**
+ * Get the values for an enum.
+ * @param e The enum.
+ * @returns The enum values.
+ */
+export function getEnumValues<T>(e: any): T[] {
+    const keys = Object.keys(e);
+    return keys
+        .filter(k => ['string', 'number'].includes(typeof(e[k])))
+        .map(k => e[k]);
+}