Room list: add custom section creation (#33155)

* feat: add creation section dialog * feat: add in skip list a method to change filters * feat: add helper to creation section * feat: add custom sections data to Settings * feat: add custom section to room list store v3 * feat: update header and room list item vms * feat: add toast to room list vm * feat: add new translation * chore: move util functions of room list specs * test: add custom section playwright tests * chore: call loadCustomSections in RoomListStoreV3 ctor
2026-04-17 12:02:42 +00:00
parent 73d4b63ada
commit 6b67b24254
27 changed files with 985 additions and 97 deletions
@@ -14,9 +14,11 @@ import type { RoomNotificationState } from "../../../../src/stores/notifications
 import {
    CHATS_TAG,
    LISTS_UPDATE_EVENT,
+    SECTION_CREATED_EVENT,
    RoomListStoreV3Class,
    type Section,
 } from "../../../../src/stores/room-list-v3/RoomListStoreV3";
+import * as sectionModule from "../../../../src/stores/room-list-v3/section";
 import { AsyncStoreWithClient } from "../../../../src/stores/AsyncStoreWithClient";
 import { RecencySorter } from "../../../../src/stores/room-list-v3/skip-list/sorters/RecencySorter";
 import { mkEvent, mkMessage, mkSpace, mkStubRoom, stubClient, upsertRoomStateEvents } from "../../../test-utils";
@@ -830,6 +832,7 @@ describe("RoomListStoreV3", () => {
        function enableSections(): void {
            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
                if (setting === "feature_room_list_sections") return true;
+                if (setting === "RoomList.OrderedCustomSections") return [];
                return false;
            });
        }
@@ -1007,6 +1010,84 @@ describe("RoomListStoreV3", () => {
            const favSection = findSection(sections, DefaultTagID.Favourite)!;
            expect(favSection.rooms).toContain(rooms[3]);
        });
+
+        describe("createSection", () => {
+            it("emits SECTION_CREATED_EVENT and LISTS_UPDATE_EVENT when section is created", async () => {
+                enableSections();
+                getClientAndRooms();
+                jest.spyOn(sectionModule, "createSection").mockResolvedValue(true);
+
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+
+                const sectionCreatedListener = jest.fn();
+                const listsUpdateListener = jest.fn();
+                store.on(SECTION_CREATED_EVENT, sectionCreatedListener);
+                store.on(LISTS_UPDATE_EVENT, listsUpdateListener);
+
+                await store.createSection();
+
+                expect(sectionCreatedListener).toHaveBeenCalled();
+                expect(listsUpdateListener).toHaveBeenCalled();
+            });
+
+            it("does not emit when section creation is cancelled", async () => {
+                enableSections();
+                getClientAndRooms();
+                jest.spyOn(sectionModule, "createSection").mockResolvedValue(false);
+
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+
+                const sectionCreatedListener = jest.fn();
+                store.on(SECTION_CREATED_EVENT, sectionCreatedListener);
+
+                await store.createSection();
+
+                expect(sectionCreatedListener).not.toHaveBeenCalled();
+            });
+        });
+
+        it("updates sections when RoomList.OrderedCustomSections setting changes", async () => {
+            enableSections();
+            const { rooms } = getClientAndRooms();
+
+            let settingsWatcher: (settingName: string) => void = () => {};
+            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((settingName, _roomId, callback) => {
+                if (settingName === "RoomList.OrderedCustomSections") settingsWatcher = callback as () => void;
+                return "watcher-id";
+            });
+
+            const customTag = "element.io.section.custom";
+
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
+                if (setting === "feature_room_list_sections") return true;
+                if (setting === "RoomList.OrderedCustomSections") return [];
+                return false;
+            });
+
+            const store = new RoomListStoreV3Class(dispatcher);
+            await store.start();
+
+            // Initial state: 3 sections (Favourite, Chats, LowPriority)
+            expect(store.getSortedRoomsInActiveSpace().sections).toHaveLength(3);
+
+            // 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 === "feature_room_list_sections") return true;
+                if (setting === "RoomList.OrderedCustomSections") return [customTag];
+                return false;
+            });
+
+            // Trigger the settings watcher
+            settingsWatcher("RoomList.OrderedCustomSections");
+
+            // Now there should be 4 sections (Favourite, custom, Chats, LowPriority)
+            expect(store.getSortedRoomsInActiveSpace().sections).toHaveLength(4);
+            const customSection = findSection(store.getSortedRoomsInActiveSpace().sections, customTag)!;
+            expect(customSection.rooms).toContain(rooms[0]);
+        });
    });

    describe("Muted rooms", () => {
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import Modal from "../../../../src/Modal";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import { createSection } from "../../../../src/stores/room-list-v3/section";
+import { CreateSectionDialog } from "../../../../src/components/views/dialogs/CreateSectionDialog";
+
+describe("createSection", () => {
+    beforeEach(() => {
+        jest.spyOn(SettingsStore, "getValue").mockReturnValue(null);
+        jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it.each([
+        [false, "", false],
+        [true, "", false],
+        [true, "My Section", true],
+    ])("returns %s when shouldCreate=%s and name='%s'", async (shouldCreate, name, expected) => {
+        jest.spyOn(Modal, "createDialog").mockReturnValue({
+            finished: Promise.resolve([shouldCreate, name]),
+            close: jest.fn(),
+        } as any);
+
+        const result = await createSection();
+        expect(result).toBe(expected);
+    });
+
+    it("opens the CreateSectionDialog", async () => {
+        const createDialogSpy = jest.spyOn(Modal, "createDialog").mockReturnValue({
+            finished: Promise.resolve([false, ""]),
+            close: jest.fn(),
+        } as any);
+
+        await createSection();
+        expect(createDialogSpy).toHaveBeenCalledWith(CreateSectionDialog);
+    });
+
+    it("saves section data and ordered sections at ACCOUNT level when confirmed", async () => {
+        const existingTag = "element.io.section.existing";
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+            if (setting === "RoomList.OrderedCustomSections") return [existingTag];
+            return null;
+        });
+        jest.spyOn(Modal, "createDialog").mockReturnValue({
+            finished: Promise.resolve([true, "My Section"]),
+            close: jest.fn(),
+        } as any);
+        const setValueSpy = jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
+
+        await createSection();
+
+        const customDataCall = setValueSpy.mock.calls.find(([name]) => name === "RoomList.CustomSectionData");
+        const savedSection = Object.values(customDataCall![3] as Record<string, { tag: string; name: string }>)[0];
+        expect(savedSection.name).toBe("My Section");
+        expect(savedSection.tag).toMatch(/^element\.io\.section\./);
+
+        const orderedCall = setValueSpy.mock.calls.find(([name]) => name === "RoomList.OrderedCustomSections");
+        const savedOrder = orderedCall![3] as string[];
+        expect(savedOrder[0]).toBe(existingTag);
+        expect(savedOrder[1]).toMatch(/^element\.io\.section\./);
+    });
+});
@@ -18,6 +18,9 @@ import { getMockedRooms } from "./getMockedRooms";
 import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
 import { MetaSpace } from "../../../../../src/stores/spaces";
 import { RoomNotificationStateStore } from "../../../../../src/stores/notifications/RoomNotificationStateStore";
+import { FavouriteFilter } from "../../../../../src/stores/room-list-v3/skip-list/filters/FavouriteFilter";
+import { FilterEnum } from "../../../../../src/stores/room-list-v3/skip-list/filters";
+import { DefaultTagID } from "../../../../../src/stores/room-list-v3/skip-list/tag";

 describe("RoomSkipList", () => {
    function generateSkipList(roomCount?: number): {
@@ -99,6 +102,26 @@ describe("RoomSkipList", () => {
        expect(() => skipList.addNewRoom(room)).toThrow("Can't add room to skiplist");
    });

+    it("Filters are applied to existing nodes when useNewFilters is called", () => {
+        const { skipList, rooms } = generateSkipList(10);
+
+        // Mark some rooms as favourite
+        const favouriteRooms = [rooms[2], rooms[5], rooms[8]];
+        for (const room of favouriteRooms) {
+            room.tags = { [DefaultTagID.Favourite]: { order: 0 } };
+        }
+
+        // No filters yet — all rooms are in the list
+        expect(skipList.size).toEqual(10);
+
+        // Apply the favourite filter
+        skipList.useNewFilters([new FavouriteFilter()]);
+
+        // Only favourite rooms should be returned when filtering by favourite
+        const filteredRooms = Array.from(skipList.getRoomsInActiveSpace([FilterEnum.FavouriteFilter]));
+        expect(filteredRooms).toHaveLength(favouriteRooms.length);
+    });
+
    it("Re-sort works when sorter is swapped", () => {
        const { skipList, rooms, sorter } = generateSkipList();
        const sortedByRecency = [...rooms].sort((a, b) => sorter.comparator(a, b));