Implement more meta-spaces (matrix-org#7077)

Author: t3chguy

res/css/_components.scss

@@ -276,6 +276,7 @@
 @import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
+@import "./views/settings/tabs/user/_SidebarUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
 @import "./views/spaces/_SpaceBasicSettings.scss";
 @import "./views/spaces/_SpaceChildrenPicker.scss";

res/css/structures/_SpacePanel.scss

@@ -189,15 +189,35 @@ $activeBorderColor: $secondary-content;
             }
         }
 
-        &.mx_SpaceButton_home .mx_SpaceButton_icon {
-            background-color: #ffffff;
-
-            &::before {
-                background-color: #3f3d3d;
-                mask-image: url('$(res)/img/element-icons/home.svg');
+        &.mx_SpaceButton_home,
+        &.mx_SpaceButton_favourites,
+        &.mx_SpaceButton_people,
+        &.mx_SpaceButton_orphans {
+            .mx_SpaceButton_icon {
+                background-color: #ffffff;
+
+                &::before {
+                    background-color: #3f3d3d;
+                }
             }
         }
 
+        &.mx_SpaceButton_home .mx_SpaceButton_icon::before {
+            mask-image: url('$(res)/img/element-icons/home.svg');
+        }
+
+        &.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
+            mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
+        }
+
+        &.mx_SpaceButton_people .mx_SpaceButton_icon::before {
+            mask-image: url('$(res)/img/element-icons/room/members.svg');
+        }
+
+        &.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
+            mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
+        }
+
         &.mx_SpaceButton_new .mx_SpaceButton_icon {
             background-color: $roomlist-button-bg-color;
 

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -37,6 +37,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/settings/preference.svg');
 }
 
+.mx_UserSettingsDialog_sidebarIcon::before {
+    mask-image: url('$(res)/img/element-icons/settings/sidebar.svg');
+}
+
 .mx_UserSettingsDialog_securityIcon::before {
     mask-image: url('$(res)/img/element-icons/security.svg');
 }

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

@@ -0,0 +1,87 @@
+/*
+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_SidebarUserSettingsTab {
+    .mx_SidebarUserSettingsTab_subheading {
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $primary-content;
+        margin-bottom: 4px;
+    }
+
+    .mx_Checkbox {
+        margin-top: 12px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $secondary-content;
+    }
+
+    .mx_SidebarUserSettingsTab_checkboxMicrocopy {
+        margin-bottom: 12px;
+        margin-left: 24px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $secondary-content;
+    }
+
+    .mx_SidebarUserSettingsTab_homeAllRoomsCheckbox {
+        margin-left: 24px;
+
+        & + div {
+            margin-left: 48px;
+        }
+    }
+
+    .mx_SidebarUserSettingsTab_homeCheckbox,
+    .mx_SidebarUserSettingsTab_favouritesCheckbox,
+    .mx_SidebarUserSettingsTab_peopleCheckbox,
+    .mx_SidebarUserSettingsTab_orphansCheckbox {
+        .mx_Checkbox_background + div {
+            padding-left: 20px;
+            position: relative;
+
+            &::before {
+                background-color: $secondary-content;
+                content: "";
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                width: 16px;
+                height: 16px;
+                position: absolute;
+                left: 0;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+    }
+
+    .mx_SidebarUserSettingsTab_homeCheckbox .mx_Checkbox_background + div::before {
+        mask-image: url('$(res)/img/element-icons/home.svg');
+    }
+
+    .mx_SidebarUserSettingsTab_favouritesCheckbox .mx_Checkbox_background + div::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
+    }
+
+    .mx_SidebarUserSettingsTab_peopleCheckbox .mx_Checkbox_background + div::before {
+        mask-image: url('$(res)/img/element-icons/room/members.svg');
+    }
+
+    .mx_SidebarUserSettingsTab_orphansCheckbox .mx_Checkbox_background + div::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
+    }
+}

res/img/element-icons/settings/sidebar.svg

@@ -41,7 +41,7 @@ import UserActivity from "../UserActivity";
 import { ModalWidgetStore } from "../stores/ModalWidgetStore";
 import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
 import VoipUserMapper from "../VoipUserMapper";
-import { SpaceStoreClass } from "../stores/SpaceStore";
+import { SpaceStoreClass } from "../stores/spaces/SpaceStore";
 import TypingStore from "../stores/TypingStore";
 import { EventIndexPeg } from "../indexing/EventIndexPeg";
 import { VoiceRecordingStore } from "../stores/VoiceRecordingStore";

src/@types/global.d.ts

@@ -22,7 +22,7 @@ import { split } from "lodash";
 
 import DMRoomMap from './utils/DMRoomMap';
 import { mediaFromMxc } from "./customisations/Media";
-import SpaceStore from "./stores/SpaceStore";
+import SpaceStore from "./stores/spaces/SpaceStore";
 
 // Not to be used for BaseAvatar urls as that has similar default avatar fallback already
 export function avatarUrlForMember(

src/Avatar.ts

@@ -27,7 +27,7 @@ import NotifProvider from './NotifProvider';
 import { timeout } from "../utils/promise";
 import AutocompleteProvider, { ICommand } from "./AutocompleteProvider";
 import SpaceProvider from "./SpaceProvider";
-import SpaceStore from "../stores/SpaceStore";
+import SpaceStore from "../stores/spaces/SpaceStore";
 
 export interface ISelectionRange {
     beginning?: boolean; // whether the selection is in the first block of the editor or not

src/autocomplete/Autocompleter.ts

@@ -28,7 +28,7 @@ import { PillCompletion } from './Components';
 import { makeRoomPermalink } from "../utils/permalinks/Permalinks";
 import { ICompletion, ISelectionRange } from "./Autocompleter";
 import RoomAvatar from '../components/views/avatars/RoomAvatar';
-import SpaceStore from "../stores/SpaceStore";
+import SpaceStore from "../stores/spaces/SpaceStore";
 
 const ROOM_REGEX = /\B#\S*/g;
 

src/autocomplete/RoomProvider.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import * as React from "react";
 import { createRef } from "react";
 import classNames from "classnames";
-import { Room } from "matrix-js-sdk/src/models/room";
 
 import dis from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
@@ -37,10 +36,12 @@ import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import RoomListNumResults from "../views/rooms/RoomListNumResults";
 import LeftPanelWidget from "./LeftPanelWidget";
 import { replaceableComponent } from "../../utils/replaceableComponent";
-import SpaceStore, { UPDATE_SELECTED_SPACE } from "../../stores/SpaceStore";
+import SpaceStore from "../../stores/spaces/SpaceStore";
+import { SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 import UIStore from "../../stores/UIStore";
 import { findSiblingElement, IState as IRovingTabIndexState } from "../../accessibility/RovingTabIndex";
+import MatrixClientContext from "../../contexts/MatrixClientContext";
 
 interface IProps {
     isMinimized: boolean;
@@ -49,7 +50,7 @@ interface IProps {
 
 interface IState {
     showBreadcrumbs: boolean;
-    activeSpace?: Room;
+    activeSpace: SpaceKey;
 }
 
 @replaceableComponent("structures.LeftPanel")
@@ -61,6 +62,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     private focusedElement = null;
     private isDoingStickyHeaders = false;
 
+    static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
+
     constructor(props: IProps) {
         super(props);
 
@@ -98,7 +102,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         }
     }
 
-    private updateActiveSpace = (activeSpace: Room) => {
+    private updateActiveSpace = (activeSpace: SpaceKey) => {
         this.setState({ activeSpace });
     };
 
@@ -343,6 +347,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 />;
         }
 
+        const space = this.state.activeSpace[0] === "!" ? this.context.getRoom(this.state.activeSpace) : null;
         return (
             <div
                 className="mx_LeftPanel_filterContainer"
@@ -363,9 +368,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                         mx_LeftPanel_exploreButton_space: !!this.state.activeSpace,
                     })}
                     onClick={this.onExplore}
-                    title={this.state.activeSpace
-                        ? _t("Explore %(spaceName)s", { spaceName: this.state.activeSpace.name })
-                        : _t("Explore rooms")}
+                    title={space ? _t("Explore %(spaceName)s", { spaceName: space.name }) : _t("Explore rooms")}
                 />
             </div>
         );