Room list: add new settings to enable/disable the sections (#34151)

* Add new settings to enable/disable the sections

* Add `RoomList.showSections` settings to preference user settings

* Hide sections ui in room list header

- Hide the collapse/expand button and the *new section* entry in the
menu.
- Display the *start chat* button instead of the compose menu when the
only action available is to create a DM

* Hide sections ui in context menu of room item

* Listen to show section settings in room list item vm

* Listen to show sections setting in room list header vm

* Put all the rooms inside the chat section when sections are disabled

When the chat section is the only section, the room list is in "flat
list mode". Putting all the rooms inside the chat section.

The section filters (aka custom section, favourites etc) are not passed
to the skip list.

* Update preferences settings screenshot

* Add e2e test for RoomList.showSections toggle

* Hide "Chat moved" toast when a room is tagged when RoomList.showSections is disabled

apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -272,6 +272,7 @@ export default class PreferencesUserSettingsTab extends React.Component<EmptyObj
 
                     <SettingsSubsection heading={_t("settings|preferences|room_list_heading")} formWrap>
                         <SettingsFlag name="RoomList.showMessagePreview" level={SettingLevel.DEVICE} />
+                        <SettingsFlag name="RoomList.showSections" level={SettingLevel.ACCOUNT} />
                     </SettingsSubsection>
 
                     <SettingsSubsection heading={_t("common|spaces")} formWrap>

apps/web/src/i18n/strings/en_EN.json

@@ -2958,6 +2958,7 @@
         "show_nsfw_content": "Show NSFW content",
         "show_read_receipts": "Show read receipts sent by other users",
         "show_redaction_placeholder": "Show a placeholder for removed messages",
+        "show_sections": "Show sections",
         "show_stickers_button": "Show stickers button",
         "show_typing_notifications": "Show typing notifications",
         "showbold": "Show all activity in the room list (dots or number of unread messages)",

apps/web/src/settings/Settings.tsx

@@ -366,6 +366,7 @@ export interface Settings {
     "Developer.elementCallUrl": IBaseSetting<string>;
     "RoomList.CustomSectionData": IBaseSetting<CustomSectionsData>;
     "RoomList.OrderedCustomSections": IBaseSetting<ReorderableSection[]>;
+    "RoomList.showSections": IBaseSetting<boolean>;
 }
 
 export type SettingKey = keyof Settings;
@@ -1225,6 +1226,11 @@ export const SETTINGS: Settings = {
         default: false,
         displayName: _td("settings|show_message_previews"),
     },
+    "RoomList.showSections": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        default: true,
+        displayName: _td("settings|show_sections"),
+    },
     "RightPanel.phasesGlobal": {
         supportedLevels: [SettingLevel.DEVICE],
         default: null,

apps/web/src/stores/room-list-v3/RoomListStoreV3.ts

@@ -137,6 +137,8 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
         SpaceStore.instance.on(UPDATE_HOME_BEHAVIOUR, () => this.onActiveSpaceChanged());
         SettingsStore.watchSetting("RoomList.OrderedCustomSections", null, () => this.onOrderedCustomSectionsChange());
         this.loadCustomSections();
+
+        SettingsStore.watchSetting("RoomList.showSections", null, () => this.scheduleEmit());
     }
 
     /**
@@ -172,8 +174,11 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
      */
     public getSortedRoomsInActiveSpace(filterKeys?: FilterKey[]): RoomsResult {
         const spaceId = SpaceStore.instance.activeSpace;
+        const areSectionsEnabled = SettingsStore.getValue("RoomList.showSections");
 
-        const sections = this.getSections(filterKeys);
+        const sections = areSectionsEnabled
+            ? this.getSections(filterKeys)
+            : [{ tag: CHATS_TAG, rooms: Array.from(this.roomSkipList?.getRoomsInActiveSpace(filterKeys) ?? []) }];
 
         return {
             spaceId: spaceId,

apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts

@@ -70,6 +70,13 @@ export class RoomListHeaderViewModel
         );
         this.disposables.track(() => SettingsStore.unwatchSetting(settingsFeatureVideoRef));
 
+        const settingsShowSectionsRef = SettingsStore.watchSetting(
+            "RoomList.showSections",
+            null,
+            this.onShowSectionsChange,
+        );
+        this.disposables.track(() => SettingsStore.unwatchSetting(settingsShowSectionsRef));
+
         // Listen for space changes
         this.disposables.trackListener(props.spaceStore, UPDATE_SELECTED_SPACE, this.onSpaceChange);
         this.disposables.trackListener(props.spaceStore, UPDATE_HOME_BEHAVIOUR, this.onHomeBehaviourChange);
@@ -133,6 +140,15 @@ export class RoomListHeaderViewModel
         });
     };
 
+    /**
+     * Handles show sections setting change events.
+     */
+    private readonly onShowSectionsChange = (): void => {
+        this.snapshot.merge({
+            areSectionsEnabled: SettingsStore.getValue("RoomList.showSections"),
+        });
+    };
+
     public createChatRoom = (e: Event): void => {
         defaultDispatcher.fire(Action.CreateChat);
         PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateChatItem", e);
@@ -310,6 +326,7 @@ function computeHeaderSpaceState(
 ): Omit<RoomListHeaderViewSnapshot, "activeSortOption" | "isMessagePreviewEnabled"> {
     const displaySectionReleaseAnnouncement =
         ReleaseAnnouncementStore.instance.getReleaseAnnouncement() === "room_list_section";
+    const areSectionsEnabled = SettingsStore.getValue("RoomList.showSections");
 
     const activeSpace = spaceStore.activeSpaceRoom;
     const title = getHeaderTitle(spaceStore);
@@ -330,5 +347,6 @@ function computeHeaderSpaceState(
         canInviteInSpace,
         canAccessSpaceSettings,
         displaySectionReleaseAnnouncement,
+        areSectionsEnabled,
     };
 }

apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts

@@ -110,6 +110,14 @@ export class RoomListItemViewModel
             SettingsStore.unwatchSetting(settingsWatchRef);
         });
 
+        // Subscribe to settings changes for section toggle
+        const settingsShowSectionsRef = SettingsStore.watchSetting(
+            "RoomList.showSections",
+            null,
+            this.onShowSectionsChange,
+        );
+        this.disposables.track(() => SettingsStore.unwatchSetting(settingsShowSectionsRef));
+
         // Subscribe to call state changes
         this.disposables.trackListener(CallStore.instance, CallStoreEvent.Call, this.onCallStateChanged);
         // If there is an active call for this room, listen to participant changes
@@ -153,6 +161,11 @@ export class RoomListItemViewModel
         void this.loadAndSetMessagePreview();
     };
 
+    private readonly onShowSectionsChange = (): void => {
+        const areSectionsEnabled = SettingsStore.getValue("RoomList.showSections");
+        this.snapshot.merge({ areSectionsEnabled });
+    };
+
     /**
      * Handler for call participant changes. Only updates the item if the call moves between having participants and not having participants, to avoid unnecessary updates.
      * @param participants The current call participants
@@ -321,6 +334,7 @@ export class RoomListItemViewModel
 
         // Build sections list for the "Move to section" submenu
         const sections: Section[] = RoomListItemViewModel.buildSections(roomTags, availableSections);
+        const areSectionsEnabled = SettingsStore.getValue("RoomList.showSections");
 
         return {
             id: room.roomId,
@@ -350,6 +364,7 @@ export class RoomListItemViewModel
             canMarkAsUnread,
             roomNotifState,
             sections,
+            areSectionsEnabled,
         };
     }
 

apps/web/src/viewmodels/room-list/RoomListViewModel.ts

@@ -42,6 +42,7 @@ import { RoomListSectionHeaderViewModel } from "./RoomListSectionHeaderViewModel
 import { getCustomSectionData, isCustomSectionTag, CHATS_TAG } from "../../stores/room-list-v3/section";
 import { tagRoom } from "../../utils/room/tagRoom";
 import { getSectionTagForRoom } from "../../utils/room/getSectionTagForRoom";
+import SettingsStore from "../../settings/SettingsStore";
 
 /**
  * Tracks the position of the active room within a specific section.
@@ -799,6 +800,10 @@ export class RoomListViewModel
     };
 
     public onRoomTagged = (): void => {
+        const areSectionsEnabled = SettingsStore.getValue("RoomList.showSections");
+        // Only show the "chat moved" toast if sections are enabled
+        if (!areSectionsEnabled) return;
+
         this.showToast("chat_moved");
     };