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/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts

@@ -929,6 +929,7 @@ describe("RoomListStoreV3", () => {
     describe("Sections", () => {
         function enableSections(): void {
             jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
+                if (setting === "RoomList.showSections") return true;
                 if (setting === "RoomList.OrderedCustomSections") return [];
                 if (setting === "RoomList.CustomSectionData") return {};
                 return false;
@@ -961,6 +962,55 @@ describe("RoomListStoreV3", () => {
             expect(result.sections[2].tag).toBe(DefaultTagID.LowPriority);
         });
 
+        describe("RoomList.showSections disabled", () => {
+            function disableSections(): void {
+                jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
+                    if (setting === "RoomList.showSections") return false;
+                    if (setting === "RoomList.OrderedCustomSections") return [];
+                    if (setting === "RoomList.CustomSectionData") return {};
+                    return false;
+                });
+            }
+
+            it("returns a single Chats section containing the rooms", async () => {
+                disableSections();
+                const { rooms } = getClientAndRooms();
+
+                rooms[3].tags[DefaultTagID.Favourite] = {};
+                rooms[7].tags[DefaultTagID.LowPriority] = {};
+
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+
+                const { sections } = store.getSortedRoomsInActiveSpace();
+                expect(sections).toHaveLength(1);
+                expect(sections[0].tag).toBe(CHATS_TAG);
+                expect(sections[0].rooms).toContain(rooms[3]);
+                expect(sections[0].rooms).toContain(rooms[7]);
+            });
+        });
+
+        it("emits LISTS_UPDATE_EVENT when RoomList.showSections setting changes", async () => {
+            enableSections();
+            getClientAndRooms();
+
+            let settingsWatcher: () => void = () => {};
+            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((settingName, _roomId, callback) => {
+                if (settingName === "RoomList.showSections") settingsWatcher = callback as () => void;
+                return "watcher-id";
+            });
+
+            const store = new RoomListStoreV3Class(dispatcher);
+            await store.start();
+
+            const listsUpdateListener = jest.fn();
+            store.on(LISTS_UPDATE_EVENT, listsUpdateListener);
+
+            settingsWatcher();
+
+            expect(listsUpdateListener).toHaveBeenCalled();
+        });
+
         it.each([
             { tag: DefaultTagID.Favourite, label: "Favourite" },
             { tag: DefaultTagID.LowPriority, label: "LowPriority" },
@@ -1209,6 +1259,7 @@ describe("RoomListStoreV3", () => {
             const customTag = "element.io.section.custom";
 
             jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
+                if (setting === "RoomList.showSections") return true;
                 if (setting === "RoomList.OrderedCustomSections") return [];
                 if (setting === "RoomList.CustomSectionData") return {};
                 return false;
@@ -1223,6 +1274,7 @@ describe("RoomListStoreV3", () => {
             // Mark a room with the custom tag and update the settings
             rooms[0].tags = { [customTag]: { order: 0 } };
             jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
+                if (setting === "RoomList.showSections") return true;
                 if (setting === "RoomList.OrderedCustomSections") return [customTag];
                 if (setting === "RoomList.CustomSectionData")
                     return { [customTag]: { tag: customTag, name: "Custom" } };