Add filter results count and explore prompt

Author: t3chguy

res/css/structures/_LeftPanel.scss

@@ -136,6 +136,14 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
             }
         }
 
+        .mx_LeftPanel_roomListFilterCount {
+            font-size: $font-13px;
+            font-weight: 500;
+            margin-left: 12px;
+            margin-top: 16px;
+            margin-bottom: -4px; // to counteract the normal roomListWrapper margin-top
+        }
+
         .mx_LeftPanel_roomListWrapper {
             overflow: hidden;
             margin-top: 10px; // so we're not up against the search/filter

res/css/views/rooms/_RoomList.scss

@@ -24,3 +24,37 @@ limitations under the License.
 .mx_RoomList_iconExplore::before {
     mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
 }
+
+.mx_RoomList_explorePrompt {
+    margin: 4px 12px 4px;
+    padding-top: 12px;
+    border-top: 1px solid #8D99A5;
+    font-size: $font-13px;
+
+    div:first-child {
+        font-weight: 500;
+        margin-bottom: 8px;
+    }
+
+    .mx_AccessibleButton {
+        color: $secondary-fg-color;
+        position: relative;
+        margin-left: 24px;
+        padding: 0;
+        font-size: inherit;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 0;
+            left: -24px;
+            background: $secondary-fg-color;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+        }
+    }
+}

src/components/structures/LeftPanel.tsx

@@ -37,6 +37,7 @@ import IndicatorScrollbar from "../structures/IndicatorScrollbar";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
+import RoomListNumResults from "../views/rooms/RoomListNumResults";
 
 interface IProps {
     isMinimized: boolean;
@@ -409,6 +410,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                     {this.renderHeader()}
                     {this.renderSearchExplore()}
                     {this.renderBreadcrumbs()}
+                    <RoomListNumResults />
                     <div className="mx_LeftPanel_roomListWrapper">
                         <div
                             className={roomListClasses}

src/components/views/rooms/RoomList.tsx

@@ -44,6 +44,7 @@ import CustomRoomTagStore from "../../../stores/CustomRoomTagStore";
 import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays";
 import { objectShallowClone, objectWithOnly } from "../../../utils/objects";
 import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../context_menus/IconizedContextMenu";
+import AccessibleButton from "../elements/AccessibleButton";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -278,6 +279,10 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         }
     };
 
+    private onExplore = () => {
+        dis.fire(Action.ViewRoomDirectory);
+    };
+
     private renderCommunityInvites(): TemporaryTile[] {
         // TODO: Put community invites in a more sensible place (not in the room list)
         // See https://github.com/vector-im/element-web/issues/14456
@@ -359,6 +364,16 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
     }
 
     public render() {
+        let explorePrompt: JSX.Element;
+        if (RoomListStore.instance.getFirstNameFilterCondition()) {
+            explorePrompt = <div className="mx_RoomList_explorePrompt">
+                <div>{_t("Can't see what you’re looking for?")}</div>
+                <AccessibleButton kind="link" onClick={this.onExplore}>
+                    {_t("Explore all public rooms")}
+                </AccessibleButton>
+            </div>;
+        }
+
         const sublists = this.renderSublists();
         return (
             <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={this.props.onKeyDown}>
@@ -370,7 +385,10 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                         className="mx_RoomList"
                         role="tree"
                         aria-label={_t("Rooms")}
-                    >{sublists}</div>
+                    >
+                        {sublists}
+                        {explorePrompt}
+                    </div>
                 )}
             </RovingTabIndexProvider>
         );

src/components/views/rooms/RoomListNumResults.tsx

@@ -0,0 +1,41 @@
+/*
+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, {useState} from "react";
+
+import { _t } from "../../../languageHandler";
+import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+
+const RoomListNumResults: React.FC = () => {
+    const [count, setCount] = useState<number>(null);
+    useEventEmitter(RoomListStore.instance, LISTS_UPDATE_EVENT, () => {
+        if (RoomListStore.instance.getFirstNameFilterCondition()) {
+            const numRooms = Object.values(RoomListStore.instance.orderedLists).flat(1).length;
+            setCount(numRooms);
+        } else {
+            setCount(null);
+        }
+    });
+
+    if (typeof count !== "number") return null;
+
+    return <div className="mx_LeftPanel_roomListFilterCount">
+        {_t("%(count)s results", { count })}
+    </div>;
+};
+
+export default RoomListNumResults;

src/i18n/strings/en_EN.json

@@ -1120,6 +1120,9 @@
     "System Alerts": "System Alerts",
     "Historical": "Historical",
     "Custom Tag": "Custom Tag",
+    "Can't see what you’re looking for?": "Can't see what you’re looking for?",
+    "Explore all public rooms": "Explore all public rooms",
+    "%(count)s results|other": "%(count)s results",
     "This room": "This room",
     "Joining room …": "Joining room …",
     "Loading …": "Loading …",