From 97eb660200565b297aa79b4061ee6fb01e226efa Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 12 Nov 2021 13:09:11 +0000
Subject: [PATCH] Wire up Space panel disablement

---
 res/css/structures/_LeftPanel.scss            |  4 +++
 res/css/structures/_SpacePanel.scss           |  6 ++++
 res/css/structures/_UserMenu.scss             |  3 --
 src/components/structures/LeftPanel.tsx       | 11 ++++++-
 src/components/structures/LoggedInView.tsx    | 19 ++++++++++-
 src/components/views/rooms/RoomListHeader.tsx |  5 ++-
 .../tabs/user/SidebarUserSettingsTab.tsx      |  3 ++
 src/i18n/strings/en_EN.json                   |  2 ++
 src/settings/Settings.tsx                     |  9 +++++-
 src/stores/room-list/SpaceWatcher.ts          | 32 +++++++++++++++----
 10 files changed, 80 insertions(+), 14 deletions(-)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index f8ca34a0c71..0bf6cdcbe68 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -111,6 +111,10 @@ $roomListCollapsedWidth: 68px;
             display: flex;
             align-items: center;
 
+            .mx_UserMenu {
+                margin-right: 12px;
+            }
+
             & + .mx_RoomListHeader {
                 margin-top: 12px;
             }
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 6749134a2c5..b2a3cef1b93 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -349,6 +349,12 @@ $activeBorderColor: $primary-content;
             mask-image: linear-gradient(180deg, transparent, black 5%, black 95%, transparent);
         }
     }
+
+    .mx_UserMenu {
+        padding: 0 2px 8px;
+        border-bottom: 1px solid $quinary-content;
+        margin: 12px 14px 4px 18px;
+    }
 }
 
 .mx_SpacePanel_contextMenu {
diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss
index 4545ecc0e60..66b89975e88 100644
--- a/res/css/structures/_UserMenu.scss
+++ b/res/css/structures/_UserMenu.scss
@@ -15,9 +15,6 @@ limitations under the License.
 */
 
 .mx_UserMenu {
-    padding: 0 2px 8px;
-    border-bottom: 1px solid $quinary-content;
-    margin: 12px 14px 4px 18px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 36038f6d9bc..c950e2d44f6 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -43,10 +43,12 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import IndicatorScrollbar from "./IndicatorScrollbar";
 import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
 import SettingsStore from "../../settings/SettingsStore";
+import UserMenu from "./UserMenu";
 
 interface IProps {
     isMinimized: boolean;
     resizeNotifier: ResizeNotifier;
+    showUserMenu: boolean;
 }
 
 enum BreadcrumbsMode {
@@ -380,6 +382,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 onBlur={this.onBlur}
                 onKeyDown={this.onKeyDown}
             >
+                { this.props.showUserMenu && <UserMenu isPanelCollapsed={true} /> }
+
                 <RoomSearch
                     isMinimized={this.props.isMinimized}
                     ref={this.roomSearchRef}
@@ -420,7 +424,12 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 <aside className="mx_LeftPanel_roomListContainer">
                     { this.renderSearchDialExplore() }
                     { this.renderBreadcrumbs() }
-                    { !this.props.isMinimized && <RoomListHeader onVisibilityChange={this.refreshStickyHeaders} /> }
+                    { !this.props.isMinimized && (
+                        <RoomListHeader
+                            onVisibilityChange={this.refreshStickyHeaders}
+                            spacePanelDisabled={this.props.showUserMenu}
+                        />
+                    ) }
                     <div className="mx_LeftPanel_roomListWrapper">
                         <div
                             className={roomListClasses}
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 427e5f84674..d516e1374bb 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -70,6 +70,8 @@ import GroupFilterPanel from './GroupFilterPanel';
 import CustomRoomTagPanel from './CustomRoomTagPanel';
 import { mediaFromMxc } from "../../customisations/Media";
 import LegacyCommunityPreview from "./LegacyCommunityPreview";
+import { SettingUpdatedPayload } from "../../dispatcher/payloads/SettingUpdatedPayload";
+import { ActionPayload } from "../../dispatcher/payloads";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -132,6 +134,7 @@ interface IState {
     useCompactLayout: boolean;
     activeCalls: Array<MatrixCall>;
     backgroundImage?: string;
+    spacePanelEnabled: boolean;
 }
 
 /**
@@ -153,6 +156,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 +168,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 +205,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 +226,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 +247,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 +684,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 +702,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                                 <LeftPanel
                                     isMinimized={this.props.collapseLhs || false}
                                     resizeNotifier={this.props.resizeNotifier}
+                                    showUserMenu={!this.state.spacePanelEnabled}
                                 />
                             </div>
                         </div>
diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx
index 9f094982f40..e04e5fb165d 100644
--- a/src/components/views/rooms/RoomListHeader.tsx
+++ b/src/components/views/rooms/RoomListHeader.tsx
@@ -148,10 +148,11 @@ const useJoiningRooms = (): Set<string> => {
 };
 
 interface IProps {
+    spacePanelDisabled: boolean;
     onVisibilityChange?(): void;
 }
 
-const RoomListHeader = ({ onVisibilityChange }: IProps) => {
+const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => {
     const cli = useContext(MatrixClientContext);
     const [mainMenuDisplayed, mainMenuHandle, openMainMenu, closeMainMenu] = useContextMenu<HTMLDivElement>();
     const [plusMenuDisplayed, plusMenuHandle, openPlusMenu, closePlusMenu] = useContextMenu<HTMLDivElement>();
@@ -183,6 +184,8 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
         return <div className="mx_LeftPanel_roomListFilterCount">
             { _t("%(count)s results", { count }) }
         </div>;
+    } else if (spacePanelDisabled) {
+        return null;
     }
 
     const communityId = CommunityPrototypeStore.instance.getSelectedCommunityId();
diff --git a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
index 92a5bacb64f..222ff291ede 100644
--- a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
+++ b/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.") }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 30d82dbe265..17af2c87e1c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 2e008eaf3d6..394966aa365 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -830,12 +830,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,
diff --git a/src/stores/room-list/SpaceWatcher.ts b/src/stores/room-list/SpaceWatcher.ts
index e7d6e78206a..766a0718913 100644
--- a/src/stores/room-list/SpaceWatcher.ts
+++ b/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);
     };