Implement more meta-spaces (#7077)

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');
+    }
+}

src/@types/global.d.ts

@@ -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/Avatar.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/autocomplete/Autocompleter.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/RoomProvider.tsx

@@ -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/components/structures/LeftPanel.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>
         );

src/components/structures/LoggedInView.tsx

@@ -64,7 +64,7 @@ import MyGroups from "./MyGroups";
 import UserView from "./UserView";
 import GroupView from "./GroupView";
 import BackdropPanel from "./BackdropPanel";
-import SpaceStore from "../../stores/SpaceStore";
+import SpaceStore from "../../stores/spaces/SpaceStore";
 import classNames from 'classnames';
 import GroupFilterPanel from './GroupFilterPanel';
 import CustomRoomTagPanel from './CustomRoomTagPanel';

src/components/structures/MatrixChat.tsx

@@ -78,7 +78,7 @@ import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
 import DialPadModal from "../views/voip/DialPadModal";
 import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast';
 import { shouldUseLoginForWelcome } from "../../utils/pages";
-import SpaceStore from "../../stores/SpaceStore";
+import SpaceStore from "../../stores/spaces/SpaceStore";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import RoomListStore from "../../stores/room-list/RoomListStore";
 import { RoomUpdateCause } from "../../stores/room-list/models";
@@ -712,10 +712,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 break;
             }
             case Action.ViewRoomDirectory: {
-                if (SpaceStore.instance.activeSpace) {
+                if (SpaceStore.instance.activeSpace[0] === "!") {
                     defaultDispatcher.dispatch({
                         action: "view_room",
-                        room_id: SpaceStore.instance.activeSpace.roomId,
+                        room_id: SpaceStore.instance.activeSpace,
                     });
                 } else {
                     Modal.createTrackedDialog('Room directory', '', RoomDirectory, {

src/components/structures/RightPanel.tsx

@@ -50,7 +50,7 @@ import NotificationPanel from "./NotificationPanel";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
 import { throttle } from 'lodash';
-import SpaceStore from "../../stores/SpaceStore";
+import SpaceStore from "../../stores/spaces/SpaceStore";
 import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
 import { E2EStatus } from '../../utils/ShieldUtils';
 import { dispatchShowThreadsPanelEvent } from '../../dispatcher/dispatch-actions/threads';

src/components/structures/RoomSearch.tsx

@@ -28,7 +28,8 @@ import RoomListStore from "../../stores/room-list/RoomListStore";
 import { NameFilterCondition } from "../../stores/room-list/filters/NameFilterCondition";
 import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 import { replaceableComponent } from "../../utils/replaceableComponent";
-import SpaceStore, { UPDATE_SELECTED_SPACE, UPDATE_TOP_LEVEL_SPACES } from "../../stores/SpaceStore";
+import SpaceStore from "../../stores/spaces/SpaceStore";
+import { UPDATE_SELECTED_SPACE, UPDATE_TOP_LEVEL_SPACES } from "../../stores/spaces";
 
 interface IProps {
     isMinimized: boolean;

src/components/structures/RoomView.tsx

@@ -88,7 +88,7 @@ import RoomStatusBar from "./RoomStatusBar";
 import MessageComposer from '../views/rooms/MessageComposer';
 import JumpToBottomButton from "../views/rooms/JumpToBottomButton";
 import TopUnreadMessagesBar from "../views/rooms/TopUnreadMessagesBar";
-import SpaceStore from "../../stores/SpaceStore";
+import SpaceStore from "../../stores/spaces/SpaceStore";
 
 import { logger } from "matrix-js-sdk/src/logger";
 import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';

src/components/structures/SpaceHierarchy.tsx

@@ -49,7 +49,7 @@ import { mediaFromMxc } from "../../customisations/Media";
 import InfoTooltip from "../views/elements/InfoTooltip";
 import TextWithTooltip from "../views/elements/TextWithTooltip";
 import { useStateToggle } from "../../hooks/useStateToggle";
-import { getChildOrder } from "../../stores/SpaceStore";
+import { getChildOrder } from "../../stores/spaces/SpaceStore";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { linkifyElement } from "../../HtmlUtils";
 import { useDispatcher } from "../../hooks/useDispatcher";

src/components/structures/SpaceRoomView.tsx

@@ -57,7 +57,7 @@ import {
 } from "../../utils/space";
 import SpaceHierarchy, { joinRoom, showRoom } from "./SpaceHierarchy";
 import MemberAvatar from "../views/avatars/MemberAvatar";
-import SpaceStore from "../../stores/SpaceStore";
+import SpaceStore from "../../stores/spaces/SpaceStore";
 import FacePile from "../views/elements/FacePile";
 import {
     AddExistingToSpace,

src/components/structures/UserMenu.tsx

@@ -54,7 +54,8 @@ import EditCommunityPrototypeDialog from "../views/dialogs/EditCommunityPrototyp
 import { UIFeature } from "../../settings/UIFeature";
 import HostSignupAction from "./HostSignupAction";
 import { IHostSignupConfig } from "../views/dialogs/HostSignupDialogTypes";
-import SpaceStore, { UPDATE_SELECTED_SPACE } from "../../stores/SpaceStore";
+import SpaceStore from "../../stores/spaces/SpaceStore";
+import { UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import RoomName from "../views/elements/RoomName";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import InlineSpinner from "../views/elements/InlineSpinner";
@@ -90,6 +91,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
             isDarkTheme: this.isUserOnDarkTheme(),
             isHighContrast: this.isUserOnHighContrastTheme(),
             pendingRoomJoin: new Set<string>(),
+            selectedSpace: SpaceStore.instance.activeSpaceRoom,
         };
 
         OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
@@ -162,8 +164,10 @@ export default class UserMenu extends React.Component<IProps, IState> {
         this.forceUpdate();
     };
 
-    private onSelectedSpaceUpdate = async (selectedSpace?: Room) => {
-        this.setState({ selectedSpace });
+    private onSelectedSpaceUpdate = async () => {
+        this.setState({
+            selectedSpace: SpaceStore.instance.activeSpaceRoom,
+        });
     };
 
     private onThemeChanged = () => {

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -24,7 +24,7 @@ import { _t } from '../../../languageHandler';
 import BaseDialog from "./BaseDialog";
 import Dropdown from "../elements/Dropdown";
 import SearchBox from "../../structures/SearchBox";
-import SpaceStore from "../../../stores/SpaceStore";
+import SpaceStore from "../../../stores/spaces/SpaceStore";
 import RoomAvatar from "../avatars/RoomAvatar";
 import { getDisplayAliasForRoom } from "../../../Rooms";
 import AccessibleButton from "../elements/AccessibleButton";

src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React, { ComponentProps, useMemo, useState } from 'react';
 
 import ConfirmUserActionDialog from "./ConfirmUserActionDialog";
-import SpaceStore from "../../../stores/SpaceStore";
+import SpaceStore from "../../../stores/spaces/SpaceStore";
 import { Room } from "matrix-js-sdk/src/models/room";
 import SpaceChildrenPicker from "../spaces/SpaceChildrenPicker";
 

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -32,7 +32,7 @@ import RoomAliasField from "../elements/RoomAliasField";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import DialogButtons from "../elements/DialogButtons";
 import BaseDialog from "../dialogs/BaseDialog";
-import SpaceStore from "../../../stores/SpaceStore";
+import SpaceStore from "../../../stores/spaces/SpaceStore";
 import JoinRuleDropdown from "../elements/JoinRuleDropdown";
 
 interface IProps {