New room list: hide favourites and people meta spaces (#29241)

* feat(new room list)!: hide Favourites and People meta spaces when the new room list is enabled

* test(space store): add testcase for new labs flag

* feat(quick settings): hide pin to sidebar and more options and add extra margin

res/css/structures/_QuickSettingsButton.pcss

@@ -104,6 +104,12 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
+.mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
+    .mx_QuickThemeSwitcher {
+        margin-top: var(--cpd-space-2x);
+    }
+}
+
 .mx_QuickSettingsButton_icon {
     // TODO remove when all icons have fill=currentColor
     * {

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

@@ -72,6 +72,9 @@ const SidebarUserSettingsTab: React.FC = () => {
         PosthogTrackers.trackInteraction("WebSettingsSidebarTabSpacesCheckbox", event, 1);
     };
 
+    // "Favourites" and "People" meta spaces are not available in the new room list
+    const newRoomListEnabled = useSettingValue("feature_new_room_list");
+
     return (
         <SettingsTab>
             <SettingsSection>
@@ -109,33 +112,43 @@ const SidebarUserSettingsTab: React.FC = () => {
                         </SettingsSubsectionText>
                     </StyledCheckbox>
 
-                    <StyledCheckbox
+                    {!newRoomListEnabled && (
-                        checked={!!favouritesEnabled}
+                        <>
-                        onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites, "WebSettingsSidebarTabSpacesCheckbox")}
+                            <StyledCheckbox
-                        className="mx_SidebarUserSettingsTab_checkbox"
+                                checked={!!favouritesEnabled}
-                    >
+                                onChange={onMetaSpaceChangeFactory(
-                        <SettingsSubsectionText>
+                                    MetaSpace.Favourites,
-                            <FavouriteSolidIcon />
+                                    "WebSettingsSidebarTabSpacesCheckbox",
-                            {_t("common|favourites")}
+                                )}
-                        </SettingsSubsectionText>
+                                className="mx_SidebarUserSettingsTab_checkbox"
-                        <SettingsSubsectionText>
+                            >
-                            {_t("settings|sidebar|metaspaces_favourites_description")}
+                                <SettingsSubsectionText>
-                        </SettingsSubsectionText>
+                                    <FavouriteSolidIcon />
-                    </StyledCheckbox>
+                                    {_t("common|favourites")}
+                                </SettingsSubsectionText>
+                                <SettingsSubsectionText>
+                                    {_t("settings|sidebar|metaspaces_favourites_description")}
+                                </SettingsSubsectionText>
+                            </StyledCheckbox>
 
-                    <StyledCheckbox
+                            <StyledCheckbox
-                        checked={!!peopleEnabled}
+                                checked={!!peopleEnabled}
-                        onChange={onMetaSpaceChangeFactory(MetaSpace.People, "WebSettingsSidebarTabSpacesCheckbox")}
+                                onChange={onMetaSpaceChangeFactory(
-                        className="mx_SidebarUserSettingsTab_checkbox"
+                                    MetaSpace.People,
-                    >
+                                    "WebSettingsSidebarTabSpacesCheckbox",
-                        <SettingsSubsectionText>
+                                )}
-                            <UserProfileSolidIcon />
+                                className="mx_SidebarUserSettingsTab_checkbox"
-                            {_t("common|people")}
+                            >
-                        </SettingsSubsectionText>
+                                <SettingsSubsectionText>
-                        <SettingsSubsectionText>
+                                    <UserProfileSolidIcon />
-                            {_t("settings|sidebar|metaspaces_people_description")}
+                                    {_t("common|people")}
-                        </SettingsSubsectionText>
+                                </SettingsSubsectionText>
-                    </StyledCheckbox>
+                                <SettingsSubsectionText>
+                                    {_t("settings|sidebar|metaspaces_people_description")}
+                                </SettingsSubsectionText>
+                            </StyledCheckbox>
+                        </>
+                    )}
 
                     <StyledCheckbox
                         checked={!!orphansEnabled}

src/components/views/spaces/QuickSettingsButton.tsx

@@ -40,13 +40,17 @@ const QuickSettingsButton: React.FC<{
 
     const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
     const developerModeEnabled = useSettingValue("developerMode");
+    // "Favourites" and "People" meta spaces are not available in the new room list
+    const newRoomListEnabled = useSettingValue("feature_new_room_list");
 
     let contextMenu: JSX.Element | undefined;
     if (menuDisplayed && handle.current) {
         contextMenu = (
             <ContextMenu
                 {...alwaysAboveRightOf(handle.current.getBoundingClientRect(), ChevronFace.None, 16)}
-                wrapperClassName="mx_QuickSettingsButton_ContextMenuWrapper"
+                wrapperClassName={classNames("mx_QuickSettingsButton_ContextMenuWrapper", {
+                    mx_QuickSettingsButton_ContextMenuWrapper_new_room_list: newRoomListEnabled,
+                })}
                 onFinished={closeMenu}
                 managed={false}
                 focusLock={true}
@@ -81,41 +85,50 @@ const QuickSettingsButton: React.FC<{
                     </AccessibleButton>
                 )}
 
-                <h4 className="mx_QuickSettingsButton_pinToSidebarHeading">
+                {!newRoomListEnabled && (
-                    <PinUprightIcon className="mx_QuickSettingsButton_icon" />
+                    <>
-                    {_t("quick_settings|metaspace_section")}
+                        <h4 className="mx_QuickSettingsButton_pinToSidebarHeading">
-                </h4>
+                            <PinUprightIcon className="mx_QuickSettingsButton_icon" />
-
+                            {_t("quick_settings|metaspace_section")}
-                <StyledCheckbox
+                        </h4>
-                    className="mx_QuickSettingsButton_favouritesCheckbox"
-                    checked={!!favouritesEnabled}
-                    onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites, "WebQuickSettingsPinToSidebarCheckbox")}
-                >
-                    <FavouriteSolidIcon className="mx_QuickSettingsButton_icon" />
-                    {_t("common|favourites")}
-                </StyledCheckbox>
-                <StyledCheckbox
-                    className="mx_QuickSettingsButton_peopleCheckbox"
-                    checked={!!peopleEnabled}
-                    onChange={onMetaSpaceChangeFactory(MetaSpace.People, "WebQuickSettingsPinToSidebarCheckbox")}
-                >
-                    <UserProfileSolidIcon className="mx_QuickSettingsButton_icon" />
-                    {_t("common|people")}
-                </StyledCheckbox>
-                <AccessibleButton
-                    className="mx_QuickSettingsButton_moreOptionsButton"
-                    onClick={() => {
-                        closeMenu();
-                        defaultDispatcher.dispatch({
-                            action: Action.ViewUserSettings,
-                            initialTabId: UserTab.Sidebar,
-                        });
-                    }}
-                >
-                    <OverflowHorizontalIcon className="mx_QuickSettingsButton_icon" />
-                    {_t("quick_settings|sidebar_settings")}
-                </AccessibleButton>
 
+                        <StyledCheckbox
+                            className="mx_QuickSettingsButton_favouritesCheckbox"
+                            checked={!!favouritesEnabled}
+                            onChange={onMetaSpaceChangeFactory(
+                                MetaSpace.Favourites,
+                                "WebQuickSettingsPinToSidebarCheckbox",
+                            )}
+                        >
+                            <FavouriteSolidIcon className="mx_QuickSettingsButton_icon" />
+                            {_t("common|favourites")}
+                        </StyledCheckbox>
+                        <StyledCheckbox
+                            className="mx_QuickSettingsButton_peopleCheckbox"
+                            checked={!!peopleEnabled}
+                            onChange={onMetaSpaceChangeFactory(
+                                MetaSpace.People,
+                                "WebQuickSettingsPinToSidebarCheckbox",
+                            )}
+                        >
+                            <UserProfileSolidIcon className="mx_QuickSettingsButton_icon" />
+                            {_t("common|people")}
+                        </StyledCheckbox>
+                        <AccessibleButton
+                            className="mx_QuickSettingsButton_moreOptionsButton"
+                            onClick={() => {
+                                closeMenu();
+                                defaultDispatcher.dispatch({
+                                    action: Action.ViewUserSettings,
+                                    initialTabId: UserTab.Sidebar,
+                                });
+                            }}
+                        >
+                            <OverflowHorizontalIcon className="mx_QuickSettingsButton_icon" />
+                            {_t("quick_settings|sidebar_settings")}
+                        </AccessibleButton>
+                    </>
+                )}
                 <QuickThemeSwitcher requestClose={closeMenu} />
             </ContextMenu>
         );

src/stores/spaces/SpaceStore.ts

@@ -162,6 +162,20 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
         SettingsStore.monitorSetting("feature_dynamic_room_predecessors", null);
     }
 
+    /**
+     * Get the order of meta spaces to display in the space panel.
+     *
+     * This accessor should be removed when the "feature_new_room_list" labs flag is removed.
+     * "People" and "Favourites" will be removed from the "metaSpaceOrder" array and this filter will no longer be needed.
+     * @private
+     */
+    private get metaSpaceOrder(): MetaSpace[] {
+        if (!SettingsStore.getValue("feature_new_room_list")) return metaSpaceOrder;
+
+        // People and Favourites are not shown when the new room list is enabled
+        return metaSpaceOrder.filter((space) => space !== MetaSpace.People && space !== MetaSpace.Favourites);
+    }
+
     public get invitedSpaces(): Room[] {
         return Array.from(this._invitedSpaces);
     }
@@ -1164,7 +1178,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
 
         const oldMetaSpaces = this._enabledMetaSpaces;
         const enabledMetaSpaces = SettingsStore.getValue("Spaces.enabledMetaSpaces");
-        this._enabledMetaSpaces = metaSpaceOrder.filter((k) => enabledMetaSpaces[k]);
+        this._enabledMetaSpaces = this.metaSpaceOrder.filter((k) => enabledMetaSpaces[k]);
 
         this._allRoomsInHome = SettingsStore.getValue("Spaces.allRoomsInHome");
         this.sendUserProperties();
@@ -1278,7 +1292,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
 
                     case "Spaces.enabledMetaSpaces": {
                         const newValue = SettingsStore.getValue("Spaces.enabledMetaSpaces");
-                        const enabledMetaSpaces = metaSpaceOrder.filter((k) => newValue[k]);
+                        const enabledMetaSpaces = this.metaSpaceOrder.filter((k) => newValue[k]);
                         if (arrayHasDiff(this._enabledMetaSpaces, enabledMetaSpaces)) {
                             const hadPeopleOrHomeEnabled = this.enabledMetaSpaces.some((s) => {
                                 return s === MetaSpace.Home || s === MetaSpace.People;

test/unit-tests/stores/SpaceStore-test.ts

@@ -141,6 +141,8 @@ describe("SpaceStore", () => {
     });
 
     afterEach(async () => {
+        // Disable the new room list feature flag
+        await SettingsStore.setValue("feature_new_room_list", null, SettingLevel.DEVICE, false);
         await testUtils.resetAsyncStoreWithClient(store);
     });
 
@@ -1391,6 +1393,15 @@ describe("SpaceStore", () => {
         removeListener();
     });
 
+    it("Favourites and People meta spaces should not be returned when the feature_new_room_list labs flag is enabled", async () => {
+        // Enable the new room list
+        await SettingsStore.setValue("feature_new_room_list", null, SettingLevel.DEVICE, true);
+
+        await run();
+        // Favourites and People meta spaces should not be returned
+        expect(SpaceStore.instance.enabledMetaSpaces).toStrictEqual([MetaSpace.Home, MetaSpace.Orphans]);
+    });
+
     describe("when feature_dynamic_room_predecessors is not enabled", () => {
         beforeAll(() => {
             jest.spyOn(SettingsStore, "getValue").mockImplementation(