Wire up Space panel disablement

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;
             }

res/css/structures/_SpacePanel.scss

@@ -311,6 +311,13 @@ $activeBorderColor: $secondary-content;
             padding-left: 0;
         }
     }
+
+    .mx_UserMenu {
+        padding: 0 2px 8px;
+        margin-left: 18px;
+        margin-bottom: 8px;
+        border-bottom: 1px solid $quinary-content;
+    }
 }
 
 .mx_SpacePanel_contextMenu {

res/css/structures/_UserMenu.scss

@@ -15,10 +15,6 @@ limitations under the License.
 */
 
 .mx_UserMenu {
-    padding: 0 2px 8px;
-    border-bottom: 1px solid $quinary-content;
-    margin-left: 18px;
-    margin-bottom: 8px;
     box-sizing: border-box;
     display: flex;
     align-items: center;

src/components/structures/LeftPanel.tsx

@@ -40,10 +40,12 @@ import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager"
 import UIStore from "../../stores/UIStore";
 import { findSiblingElement, IState as IRovingTabIndexState } from "../../accessibility/RovingTabIndex";
 import RoomListHeader from "../views/rooms/RoomListHeader";
+import UserMenu from "./UserMenu";
 
 interface IProps {
     isMinimized: boolean;
     resizeNotifier: ResizeNotifier;
+    showUserMenu: boolean;
 }
 
 interface IState {
@@ -341,6 +343,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}
@@ -386,7 +390,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}

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.
@@ -135,6 +137,7 @@ interface IState {
     useCompactLayout: boolean;
     activeCalls: Array<MatrixCall>;
     backgroundImage?: string;
+    spacePanelEnabled: boolean;
 }
 
 /**
@@ -168,6 +171,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
             usageLimitDismissed: false,
             activeCalls: CallHandler.sharedInstance().getAllActiveCalls(),
+            spacePanelEnabled: SettingsStore.getValue("Spaces.sidebarEnabled"),
         };
 
         // stash the MatrixClient in case we log out before we are unmounted
@@ -180,6 +184,8 @@ class LoggedInView extends React.Component<IProps, IState> {
         this._roomView = React.createRef();
         this._resizeContainer = React.createRef();
         this.resizeHandler = React.createRef();
+
+        SettingsStore.monitorSetting("Spaces.sidebarEnabled", null);
     }
 
     componentDidMount() {
@@ -236,7 +242,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         this.setState({ backgroundImage });
     };
 
-    private onAction = (payload): void => {
+    private onAction = (payload: ActionPayload): void => {
         switch (payload.action) {
             case 'call_state': {
                 const activeCalls = CallHandler.sharedInstance().getAllActiveCalls();
@@ -245,6 +251,17 @@ class LoggedInView extends React.Component<IProps, IState> {
                 }
                 break;
             }
+
+            case Action.SettingUpdated: {
+                const settingUpdatedPayload = payload as SettingUpdatedPayload;
+                if (settingUpdatedPayload.settingName === "Spaces.sidebarEnabled") {
+                    const spacePanelEnabled = SettingsStore.getValue("Spaces.sidebarEnabled");
+                    if (spacePanelEnabled !== this.state.spacePanelEnabled) {
+                        this.setState({ spacePanelEnabled });
+                    }
+                }
+                break;
+            }
         }
     };
 
@@ -680,7 +697,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}
@@ -698,6 +715,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                                 <LeftPanel
                                     isMinimized={this.props.collapseLhs || false}
                                     resizeNotifier={this.props.resizeNotifier}
+                                    showUserMenu={!this.state.spacePanelEnabled}
                                 />
                             </div>
                         </div>

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();

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";
 
 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

@@ -892,6 +892,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

@@ -760,12 +760,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);
     };