Replace breadcrumbs with recently viewed menu

res/css/_components.scss

@@ -143,6 +143,7 @@
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InfoTooltip.scss";
 @import "./views/elements/_InlineSpinner.scss";
+@import "./views/elements/_InteractiveTooltip.scss";
 @import "./views/elements/_InviteReason.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_MiniAvatarUploader.scss";
@@ -230,6 +231,7 @@
 @import "./views/rooms/_NotificationBadge.scss";
 @import "./views/rooms/_PinnedEventTile.scss";
 @import "./views/rooms/_PresenceLabel.scss";
+@import "./views/rooms/_RecentlyViewedButton.scss";
 @import "./views/rooms/_ReplyPreview.scss";
 @import "./views/rooms/_ReplyTile.scss";
 @import "./views/rooms/_RoomBreadcrumbs.scss";

res/css/structures/_ContextualMenu.scss

@@ -37,6 +37,7 @@ limitations under the License.
     position: absolute;
     font-size: $font-14px;
     z-index: 5001;
+    width: max-content;
 }
 
 .mx_ContextualMenu_right {

res/css/structures/_LeftPanel.scss

@@ -133,7 +133,8 @@ $roomListCollapsedWidth: 68px;
                     display: none;
                 }
 
-                & + .mx_LeftPanel_exploreButton {
+                & + .mx_LeftPanel_exploreButton,
+                & + .mx_LeftPanel_recentsButton {
                     // Cheaty way to return the occupied space to the filter input
                     flex-basis: 0;
                     margin: 0;
@@ -166,11 +167,12 @@ $roomListCollapsedWidth: 68px;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-content;
+                    background-color: $secondary-content;
                 }
             }
 
-            .mx_LeftPanel_exploreButton {
+            .mx_LeftPanel_exploreButton,
+            .mx_LeftPanel_recentsButton {
                 width: 32px;
                 height: 32px;
                 border-radius: 8px;
@@ -185,11 +187,10 @@ $roomListCollapsedWidth: 68px;
                     left: 8px;
                     width: 16px;
                     height: 16px;
-                    mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-content;
+                    background-color: $secondary-content;
                 }
 
                 &:hover {
@@ -200,6 +201,14 @@ $roomListCollapsedWidth: 68px;
                     }
                 }
             }
+
+            .mx_LeftPanel_exploreButton::before {
+                mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+            }
+
+            .mx_LeftPanel_recentsButton::before {
+                mask-image: url('$(res)/img/element-icons/clock.svg');
+            }
         }
 
         .mx_LeftPanel_roomListFilterCount {
@@ -257,7 +266,8 @@ $roomListCollapsedWidth: 68px;
                     background-color: transparent;
                 }
 
-                .mx_LeftPanel_exploreButton {
+                .mx_LeftPanel_exploreButton,
+                .mx_LeftPanel_recentsButton {
                     margin-left: 0;
                     margin-top: 8px;
                 }

res/css/views/avatars/_BaseAvatar.scss

@@ -27,11 +27,17 @@ limitations under the License.
     // https://bugzilla.mozilla.org/show_bug.cgi?id=255139
     display: inline-block;
     user-select: none;
+
+    &.mx_RoomAvatar_isSpaceRoom {
+        &.mx_BaseAvatar_image, .mx_BaseAvatar_image {
+            border-radius: 8px;
+        }
+    }
 }
 
 .mx_BaseAvatar_initial {
     position: absolute;
-    left: 0px;
+    left: 0;
     color: $avatar-initial-color;
     text-align: center;
     speak: none;

res/css/views/elements/_InteractiveTooltip.scss

@@ -0,0 +1,97 @@
+/*
+Copyright 2019 - 2021 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.
+*/
+
+.mx_InteractiveTooltip_wrapper {
+    position: fixed;
+    z-index: 5000;
+}
+
+.mx_InteractiveTooltip {
+    border-radius: 8px;
+    background-color: $background;
+    color: $primary-content;
+    position: absolute;
+    z-index: 5001;
+    box-shadow: 0 24px 8px rgb(17 17 26 / 4%), 0 8px 32px rgb(17 17 26 / 4%);
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
+    top: 10px; // 8px chevron + 2px spacing
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
+    left: 10px; // 8px chevron + 2px spacing
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
+    right: 10px; // 8px chevron + 2px spacing
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
+    bottom: 10px; // 8px chevron + 2px spacing
+}
+
+.mx_InteractiveTooltip_chevron_top {
+    position: absolute;
+    left: calc(50% - 8px);
+    top: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-bottom: 8px solid $background;
+    border-right: 8px solid transparent;
+}
+
+// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
+// by Sebastiano Guerriero (@guerriero_se)
+@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
+    .mx_InteractiveTooltip_chevron_top {
+        height: 16px;
+        width: 16px;
+        background-color: inherit;
+        border: none;
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+        transform: rotate(135deg);
+        border-radius: 0 0 0 3px;
+        top: calc(-8px / 1.414); // sqrt(2) because of rotation
+    }
+}
+
+.mx_InteractiveTooltip_chevron_bottom {
+    position: absolute;
+    left: calc(50% - 8px);
+    bottom: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-top: 8px solid $background;
+    border-right: 8px solid transparent;
+}
+
+// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
+// by Sebastiano Guerriero (@guerriero_se)
+@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
+    .mx_InteractiveTooltip_chevron_bottom {
+        height: 16px;
+        width: 16px;
+        background-color: inherit;
+        border: none;
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+        transform: rotate(-45deg);
+        border-radius: 0 0 0 3px;
+        bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
+    }
+}

res/css/views/rooms/_RecentlyViewedButton.scss

@@ -0,0 +1,73 @@
+/*
+Copyright 2021 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.
+*/
+
+.mx_RecentlyViewedButton_ContextMenu {
+    padding: 16px 8px 16px 16px;
+    width: max-content;
+    max-width: 240px;
+    max-height: 400px;
+    border: 1px solid rgba($primary-content, .1);
+    border-radius: 8px;
+    box-shadow: 0 8px 4px rgba(0, 0, 0, 0.08);
+    display: flex;
+    flex-direction: column;
+
+    > h4 {
+        margin: 0 0 12px 0;
+    }
+
+    > div {
+        overflow-y: auto;
+
+        * {
+            margin-right: 4px;
+        }
+    }
+
+    .mx_AccessibleButton {
+        margin-top: 2px;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        border-radius: 8px;
+        min-height: 34px;
+
+        &:hover {
+            background-color: $panel-actions;
+        }
+
+        .mx_BaseAvatar {
+            margin-right: 8px;
+            width: 24px;
+        }
+
+        .mx_RecentlyViewedButton_entry_label {
+            display: grid;
+
+            > div {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .mx_RecentlyViewedButton_entry_spaces {
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-content;
+        }
+    }
+}

src/components/structures/LeftPanel.tsx

@@ -25,12 +25,7 @@ import CallHandler from "../../CallHandler";
 import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
 import { Action } from "../../dispatcher/actions";
 import RoomSearch from "./RoomSearch";
-import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
-import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
-import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import ResizeNotifier from "../../utils/ResizeNotifier";
-import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
-import IndicatorScrollbar from "../structures/IndicatorScrollbar";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import LeftPanelWidget from "./LeftPanelWidget";
 import { replaceableComponent } from "../../utils/replaceableComponent";
@@ -41,14 +36,27 @@ import UIStore from "../../stores/UIStore";
 import { findSiblingElement, IState as IRovingTabIndexState } from "../../accessibility/RovingTabIndex";
 import RoomListHeader from "../views/rooms/RoomListHeader";
 import { Key } from "../../Keyboard";
+import RecentlyViewedButton from "../views/rooms/RecentlyViewedButton";
+import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
+import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import IndicatorScrollbar from "./IndicatorScrollbar";
+import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
+import SettingsStore from "../../settings/SettingsStore";
 
 interface IProps {
     isMinimized: boolean;
     resizeNotifier: ResizeNotifier;
 }
 
+enum BreadcrumbsMode {
+    Disabled,
+    Legacy,
+    Labs,
+}
+
 interface IState {
-    showBreadcrumbs: boolean;
+    showBreadcrumbs: BreadcrumbsMode;
     activeSpace: SpaceKey;
 }
 
@@ -65,15 +73,20 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         super(props);
 
         this.state = {
-            showBreadcrumbs: BreadcrumbsStore.instance.visible,
             activeSpace: SpaceStore.instance.activeSpace,
+            showBreadcrumbs: LeftPanel.breadcrumbsMode,
         };
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
         SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
     }
 
+    private static get breadcrumbsMode(): BreadcrumbsMode {
+        if (!SettingsStore.getValue("breadcrumbs")) return BreadcrumbsMode.Disabled;
+        return SettingsStore.getValue("feature_breadcrumbs_v2") ? BreadcrumbsMode.Labs : BreadcrumbsMode.Legacy;
+    }
+
     public componentDidMount() {
         UIStore.instance.trackElementDimensions("LeftPanel", this.ref.current);
         UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current);
@@ -116,7 +129,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     };
 
     private onBreadcrumbsUpdate = () => {
-        const newVal = BreadcrumbsStore.instance.visible;
+        const newVal = LeftPanel.breadcrumbsMode;
         if (newVal !== this.state.showBreadcrumbs) {
             this.setState({ showBreadcrumbs: newVal });
 
@@ -323,7 +336,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     };
 
     private renderBreadcrumbs(): React.ReactNode {
-        if (this.state.showBreadcrumbs && !this.props.isMinimized) {
+        if (this.state.showBreadcrumbs === BreadcrumbsMode.Legacy && !this.props.isMinimized) {
             return (
                 <IndicatorScrollbar
                     className="mx_LeftPanel_breadcrumbsContainer mx_AutoHideScrollbar"
@@ -349,6 +362,17 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 />;
         }
 
+        let rightButton: JSX.Element;
+        if (this.state.showBreadcrumbs === BreadcrumbsMode.Labs) {
+            rightButton = <RecentlyViewedButton />;
+        } else if (this.state.activeSpace === MetaSpace.Home) {
+            rightButton = <AccessibleTooltipButton
+                className="mx_LeftPanel_exploreButton"
+                onClick={this.onExplore}
+                title={_t("Explore rooms")}
+            />;
+        }
+
         return (
             <div
                 className="mx_LeftPanel_filterContainer"
@@ -363,12 +387,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 />
 
                 { dialPadButton }
-
-                { this.state.activeSpace === MetaSpace.Home && <AccessibleTooltipButton
-                    className="mx_LeftPanel_exploreButton"
-                    onClick={this.onExplore}
-                    title={_t("Explore rooms")}
-                /> }
+                { rightButton }
             </div>
         );
     }