Wire up Space panel disablement

src/components/structures/LeftPanel.tsx

@@ -48,6 +48,7 @@ import UserMenu from "./UserMenu";
 interface IProps {
     isMinimized: boolean;
     resizeNotifier: ResizeNotifier;
+    spacePanelDisabled: boolean;
 }
 
 enum BreadcrumbsMode {
@@ -381,7 +382,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 onBlur={this.onBlur}
                 onKeyDown={this.onKeyDown}
             >
-                { !SpaceStore.spacesEnabled && <UserMenu isPanelCollapsed={true} /> }
+                { this.props.spacePanelDisabled && <UserMenu isPanelCollapsed={true} /> }
+
                 <RoomSearch
                     isMinimized={this.props.isMinimized}
                     ref={this.roomSearchRef}
@@ -425,7 +427,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                     { !this.props.isMinimized && (
                         <RoomListHeader
                             onVisibilityChange={this.refreshStickyHeaders}
-                            spacePanelDisabled={!SpaceStore.spacesEnabled}
+                            spacePanelDisabled={this.props.spacePanelDisabled}
                         />
                     ) }
                     <div className="mx_LeftPanel_roomListWrapper">

src/components/structures/LoggedInView.tsx

@@ -132,6 +132,7 @@ interface IState {
     useCompactLayout: boolean;
     activeCalls: Array<MatrixCall>;
     backgroundImage?: string;
+    spacePanelEnabled: boolean;
 }
 
 /**
@@ -153,6 +154,7 @@ class LoggedInView extends React.Component<IProps, IState> {
     protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
     protected compactLayoutWatcherRef: string;
     protected backgroundImageWatcherRef: string;
+    protected sidebarEnabledWatcherRef: string;
     protected resizer: Resizer;
 
     constructor(props, context) {
@@ -164,6 +166,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
             usageLimitDismissed: false,
             activeCalls: CallHandler.instance.getAllActiveCalls(),
+            spacePanelEnabled: SettingsStore.getValue("Spaces.sidebarEnabled"),
         };
 
         // stash the MatrixClient in case we log out before we are unmounted
@@ -200,6 +203,9 @@ class LoggedInView extends React.Component<IProps, IState> {
         this.backgroundImageWatcherRef = SettingsStore.watchSetting(
             "RoomList.backgroundImage", null, this.refreshBackgroundImage,
         );
+        this.sidebarEnabledWatcherRef = SettingsStore.watchSetting(
+            "Spaces.sidebarEnabled", null, this.onSidebarEnabledToggle,
+        );
 
         this.resizer = this.createResizer();
         this.resizer.attach();
@@ -218,6 +224,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         OwnProfileStore.instance.off(UPDATE_EVENT, this.refreshBackgroundImage);
         SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);
         SettingsStore.unwatchSetting(this.backgroundImageWatcherRef);
+        SettingsStore.unwatchSetting(this.sidebarEnabledWatcherRef);
         this.resizer.detach();
     }
 
@@ -238,6 +245,13 @@ class LoggedInView extends React.Component<IProps, IState> {
         this.setState({ backgroundImage });
     };
 
+    private onSidebarEnabledToggle = (): void => {
+        const spacePanelEnabled = SettingsStore.getValue("Spaces.sidebarEnabled");
+        if (spacePanelEnabled !== this.state.spacePanelEnabled) {
+            this.setState({ spacePanelEnabled });
+        }
+    };
+
     public canResetTimelineInRoom = (roomId: string) => {
         if (!this._roomView.current) {
             return true;
@@ -668,7 +682,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                                     { SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null }
                                 </div>)
                             }
-                            { SpaceStore.spacesEnabled ? <>
+                            { this.state.spacePanelEnabled ? <>
                                 <BackdropPanel
                                     blurMultiplier={0.5}
                                     backgroundImage={this.state.backgroundImage}
@@ -686,6 +700,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                                 <LeftPanel
                                     isMinimized={this.props.collapseLhs || false}
                                     resizeNotifier={this.props.resizeNotifier}
+                                    spacePanelDisabled={!this.state.spacePanelEnabled}
                                 />
                             </div>
                         </div>

src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx

@@ -22,6 +22,7 @@ import { SettingLevel } from "../../../../../settings/SettingLevel";
 import StyledCheckbox from "../../../elements/StyledCheckbox";
 import { useSettingValue } from "../../../../../hooks/useSettings";
 import { MetaSpace } from "../../../../../stores/spaces";
+import SettingsFlag from "../../../elements/SettingsFlag";
 
 export const onMetaSpaceChangeFactory = (metaSpace: MetaSpace) => (e: ChangeEvent<HTMLInputElement>) => {
     const currentValue = SettingsStore.getValue("Spaces.enabledMetaSpaces");
@@ -48,6 +49,8 @@ const SidebarUserSettingsTab = () => {
                 <span className="mx_SettingsTab_subheading">{ _t("Spaces") }</span>
                 <div className="mx_SettingsTab_subsectionText">{ _t("Spaces are ways to group rooms and people.") }</div>
 
+                <SettingsFlag name="Spaces.sidebarEnabled" level={SettingLevel.DEVICE} />
+
                 <div className="mx_SidebarUserSettingsTab_subheading">{ _t("Spaces to show") }</div>
                 <div className="mx_SettingsTab_subsectionText">
                     { _t("Along with the spaces you're in, you can use some pre-built ones too.") }

src/i18n/strings/en_EN.json

@@ -907,6 +907,8 @@
     "Manually verify all remote sessions": "Manually verify all remote sessions",
     "IRC display name width": "IRC display name width",
     "Show chat effects (animations when receiving e.g. confetti)": "Show chat effects (animations when receiving e.g. confetti)",
+    "Show spaces": "Show spaces",
+    "Display spaces on the left side of the sidebar": "Display spaces on the left side of the sidebar",
     "Show all rooms in Home": "Show all rooms in Home",
     "All rooms you're in will appear in Home.": "All rooms you're in will appear in Home.",
     "Display Communities instead of Spaces": "Display Communities instead of Spaces",

src/settings/Settings.tsx

@@ -831,12 +831,19 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: null,
     },
+    "Spaces.sidebarEnabled": {
+        displayName: _td("Show spaces"),
+        description: _td("Display spaces on the left side of the sidebar"),
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
+        default: true,
+        controller: new IncompatibleController("showCommunitiesInsteadOfSpaces"),
+    },
     "Spaces.allRoomsInHome": {
         displayName: _td("Show all rooms in Home"),
         description: _td("All rooms you're in will appear in Home."),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: false,
-        controller: new IncompatibleController("showCommunitiesInsteadOfSpaces", null),
+        controller: new IncompatibleController("showCommunitiesInsteadOfSpaces", true),
     },
     "Spaces.enabledMetaSpaces": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,

src/stores/room-list/SpaceWatcher.ts

@@ -18,6 +18,7 @@ import { RoomListStoreClass } from "./RoomListStore";
 import { SpaceFilterCondition } from "./filters/SpaceFilterCondition";
 import SpaceStore from "../spaces/SpaceStore";
 import { MetaSpace, SpaceKey, UPDATE_HOME_BEHAVIOUR, UPDATE_SELECTED_SPACE } from "../spaces";
+import SettingsStore from "../../settings/SettingsStore";
 
 /**
  * Watches for changes in spaces to manage the filter on the provided RoomListStore
@@ -27,28 +28,40 @@ export class SpaceWatcher {
     // we track these separately to the SpaceStore as we need to observe transitions
     private activeSpace: SpaceKey = SpaceStore.instance.activeSpace;
     private allRoomsInHome: boolean = SpaceStore.instance.allRoomsInHome;
+    private sidebarEnabled: boolean = SettingsStore.getValue("Spaces.sidebarEnabled");
 
     constructor(private store: RoomListStoreClass) {
-        if (SpaceWatcher.needsFilter(this.activeSpace, this.allRoomsInHome)) {
+        if (SpaceWatcher.needsFilter(this.activeSpace, this.allRoomsInHome, this.sidebarEnabled)) {
             this.updateFilter();
             store.addFilter(this.filter);
         }
         SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdated);
         SpaceStore.instance.on(UPDATE_HOME_BEHAVIOUR, this.onHomeBehaviourUpdated);
+        SettingsStore.watchSetting("Spaces.sidebarEnabled", null, this.onSidebarSettingChanged);
     }
 
-    private static needsFilter(spaceKey: SpaceKey, allRoomsInHome: boolean): boolean {
-        return !(spaceKey === MetaSpace.Home && allRoomsInHome);
+    private static needsFilter(spaceKey: SpaceKey, allRoomsInHome: boolean, sidebarEnabled: boolean): boolean {
+        return !(spaceKey === MetaSpace.Home && allRoomsInHome) && sidebarEnabled;
     }
 
-    private onSelectedSpaceUpdated = (activeSpace: SpaceKey, allRoomsInHome = this.allRoomsInHome) => {
-        if (activeSpace === this.activeSpace && allRoomsInHome === this.allRoomsInHome) return; // nop
+    private onSelectedSpaceUpdated = (
+        activeSpace = this.activeSpace,
+        allRoomsInHome = this.allRoomsInHome,
+        sidebarEnabled = this.sidebarEnabled,
+    ) => {
+        if (activeSpace === this.activeSpace &&
+            allRoomsInHome === this.allRoomsInHome &&
+            sidebarEnabled === this.sidebarEnabled
+        ) {
+            return; // nop
+        }
 
-        const neededFilter = SpaceWatcher.needsFilter(this.activeSpace, this.allRoomsInHome);
-        const needsFilter = SpaceWatcher.needsFilter(activeSpace, allRoomsInHome);
+        const neededFilter = SpaceWatcher.needsFilter(this.activeSpace, this.allRoomsInHome, this.sidebarEnabled);
+        const needsFilter = SpaceWatcher.needsFilter(activeSpace, allRoomsInHome, sidebarEnabled);
 
         this.activeSpace = activeSpace;
         this.allRoomsInHome = allRoomsInHome;
+        this.sidebarEnabled = sidebarEnabled;
 
         if (needsFilter) {
             this.updateFilter();
@@ -61,6 +74,11 @@ export class SpaceWatcher {
         }
     };
 
+    private onSidebarSettingChanged = () => {
+        const sidebarEnabled = SettingsStore.getValue("Spaces.sidebarEnabled");
+        this.onSelectedSpaceUpdated(this.activeSpace, this.allRoomsInHome, sidebarEnabled);
+    };
+
     private onHomeBehaviourUpdated = (allRoomsInHome: boolean) => {
         this.onSelectedSpaceUpdated(this.activeSpace, allRoomsInHome);
     };