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/playwright/e2e/left-panel/room-list-panel/room-list-sections.spec.ts

@@ -8,6 +8,7 @@
 import { rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { expect, test } from "../../../element-web-test";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
 import { assertRoomInSection, dragRoomToSection, getPrimaryFilters, getRoomList, getSectionHeader } from "./utils";
 
 test.describe("Room list sections", () => {
@@ -89,6 +90,45 @@ test.describe("Room list sections", () => {
         });
     });
 
+    test.describe("Show sections setting", () => {
+        test.beforeEach(async ({ app }) => {
+            // A favourite room and a regular room so that, when sections are enabled, we get
+            // two meaningful sections (Favourites + Chats).
+            const favouriteId = await app.client.createRoom({ name: "favourite room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.favourite");
+            }, favouriteId);
+            await app.client.createRoom({ name: "regular room" });
+        });
+
+        test("toggling RoomList.showSections switches between a sectioned and a flat list", async ({ page, app }) => {
+            const roomList = getRoomList(page);
+
+            // Sections are enabled by default: section headers are visible and rooms render as treegrid rows.
+            await expect(getSectionHeader(page, "Favourites")).toBeVisible();
+            await expect(getSectionHeader(page, "Chats")).toBeVisible();
+            await expect(roomList.getByRole("row", { name: "Open room favourite room" })).toBeVisible();
+
+            // Disable sections
+            await app.settings.setValue("RoomList.showSections", null, SettingLevel.ACCOUNT, false);
+
+            // The list becomes flat: no section headers, rooms render as listbox options.
+            await expect(getSectionHeader(page, "Favourites")).not.toBeVisible();
+            await expect(getSectionHeader(page, "Chats")).not.toBeVisible();
+            await expect(page.getByRole("listbox", { name: "Room list", exact: true })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "Open room favourite room" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "Open room regular room" })).toBeVisible();
+
+            // Re-enable sections
+            await app.settings.setValue("RoomList.showSections", null, SettingLevel.ACCOUNT, true);
+
+            // The sections reappear.
+            await expect(getSectionHeader(page, "Favourites")).toBeVisible();
+            await expect(getSectionHeader(page, "Chats")).toBeVisible();
+            await expect(roomList.getByRole("row", { name: "Open room favourite room" })).toBeVisible();
+        });
+    });
+
     test.describe("Section collapse and expand", () => {
         [
             { section: "Favourites", roomName: "favourite room", tag: "m.favourite" },