feat(vm): wire up vm and stores

Author: florianduros

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

@@ -15,6 +15,9 @@ import {
 import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
 import { NotificationStateEvents } from "../../stores/notifications/NotificationState";
 import { type RoomNotificationState } from "../../stores/notifications/RoomNotificationState";
+import SettingsStore from "../../settings/SettingsStore";
+import { DefaultTagID } from "../../stores/room-list-v3/skip-list/tag";
+import RoomListStoreV3 from "../../stores/room-list-v3/RoomListStoreV3";
 
 interface RoomListSectionHeaderViewModelProps {
     tag: string;
@@ -42,7 +45,18 @@ export class RoomListSectionHeaderViewModel
     private readonly expandedBySpace = new Map<string, boolean>();
 
     public constructor(props: RoomListSectionHeaderViewModelProps) {
-        super(props, { id: props.tag, title: props.title, isExpanded: true, isUnread: false });
+        const isDefaultSection = props.tag === DefaultTagID.Favourite || props.tag === DefaultTagID.LowPriority;
+        super(props, {
+            id: props.tag,
+            title: props.title,
+            isExpanded: true,
+            isUnread: false,
+            displaySectionMenu: !isDefaultSection,
+        });
+        const sectionWatherRef = SettingsStore.watchSetting("RoomList.CustomSectionData", null, () =>
+            this.onCustomSectionDataChange(),
+        );
+        this.disposables.track(() => SettingsStore.unwatchSetting(sectionWatherRef));
     }
 
     public onClick = (): void => {
@@ -120,4 +134,23 @@ export class RoomListSectionHeaderViewModel
         this.roomNotificationStates.clear();
         super.dispose();
     }
+
+    /**
+     * Handle changes to custom section data.
+     */
+    private onCustomSectionDataChange(): void {
+        const customSectionData = SettingsStore.getValue("RoomList.CustomSectionData") || {};
+        const sectionData = customSectionData[this.props.tag];
+        if (sectionData) {
+            this.snapshot.merge({ title: sectionData.name });
+        }
+    }
+
+    public editSection = async (): Promise<void> => {
+        await RoomListStoreV3.instance.editSection(this.props.tag);
+    };
+
+    public removeSection = async (): Promise<void> => {
+        await RoomListStoreV3.instance.removeSection(this.props.tag);
+    };
 }

apps/web/test/viewmodels/room-list/RoomListSectionHeaderViewModel-test.ts

@@ -12,6 +12,9 @@ import { RoomNotificationState } from "../../../src/stores/notifications/RoomNot
 import { RoomNotificationStateStore } from "../../../src/stores/notifications/RoomNotificationStateStore";
 import { NotificationStateEvents } from "../../../src/stores/notifications/NotificationState";
 import { createTestClient, mkRoom } from "../../test-utils";
+import SettingsStore from "../../../src/settings/SettingsStore";
+import RoomListStoreV3 from "../../../src/stores/room-list-v3/RoomListStoreV3";
+import { DefaultTagID } from "../../../src/stores/room-list-v3/skip-list/tag";
 
 describe("RoomListSectionHeaderViewModel", () => {
     let onToggleExpanded: jest.Mock;
@@ -20,6 +23,9 @@ describe("RoomListSectionHeaderViewModel", () => {
     beforeEach(() => {
         onToggleExpanded = jest.fn();
         matrixClient = createTestClient();
+        jest.spyOn(SettingsStore, "watchSetting").mockReturnValue("watcher-id");
+        jest.spyOn(SettingsStore, "unwatchSetting").mockReturnValue(undefined);
+        jest.spyOn(SettingsStore, "getValue").mockReturnValue(null);
     });
 
     afterEach(() => {
@@ -87,6 +93,96 @@ describe("RoomListSectionHeaderViewModel", () => {
         expect(vm.isExpanded).toBe(false);
     });
 
+    describe("displaySectionMenu", () => {
+        it.each([
+            [DefaultTagID.Favourite, false],
+            [DefaultTagID.LowPriority, false],
+            ["element.io.section.custom", true],
+        ])("should be %s for tag %s", (tag, expected) => {
+            const vm = new RoomListSectionHeaderViewModel({
+                tag,
+                title: "Section",
+                spaceId: "!space:server",
+                onToggleExpanded,
+            });
+            expect(vm.getSnapshot().displaySectionMenu).toBe(expected);
+        });
+    });
+
+    describe("onCustomSectionDataChange", () => {
+        let watchCallback: () => void;
+
+        beforeEach(() => {
+            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((settingName, _roomId, callback) => {
+                if (settingName === "RoomList.CustomSectionData") watchCallback = callback as () => void;
+                return "watcher-id";
+            });
+        });
+
+        it("should update title when custom section data changes", () => {
+            const tag = "element.io.section.custom";
+            const vm = new RoomListSectionHeaderViewModel({
+                tag,
+                title: "Old Title",
+                spaceId: "!space:server",
+                onToggleExpanded,
+            });
+            expect(vm.getSnapshot().title).toBe("Old Title");
+
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue({ [tag]: { tag, name: "New Title" } });
+            watchCallback();
+
+            expect(vm.getSnapshot().title).toBe("New Title");
+        });
+
+        it("should not update title when section data is missing", () => {
+            const tag = "element.io.section.custom";
+            const vm = new RoomListSectionHeaderViewModel({
+                tag,
+                title: "My Section",
+                spaceId: "!space:server",
+                onToggleExpanded,
+            });
+
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue({});
+            watchCallback();
+
+            expect(vm.getSnapshot().title).toBe("My Section");
+        });
+    });
+
+    describe("editSection", () => {
+        it("should delegate to RoomListStoreV3.instance.editSection", async () => {
+            const editSectionSpy = jest.spyOn(RoomListStoreV3.instance, "editSection").mockResolvedValue(undefined);
+            const tag = "element.io.section.custom";
+            const vm = new RoomListSectionHeaderViewModel({
+                tag,
+                title: "Section",
+                spaceId: "!space:server",
+                onToggleExpanded,
+            });
+
+            await vm.editSection();
+            expect(editSectionSpy).toHaveBeenCalledWith(tag);
+        });
+    });
+
+    describe("removeSection", () => {
+        it("should delegate to RoomListStoreV3.instance.removeSection", async () => {
+            const removeSectionSpy = jest.spyOn(RoomListStoreV3.instance, "removeSection").mockResolvedValue(undefined);
+            const tag = "element.io.section.custom";
+            const vm = new RoomListSectionHeaderViewModel({
+                tag,
+                title: "Section",
+                spaceId: "!space:server",
+                onToggleExpanded,
+            });
+
+            await vm.removeSection();
+            expect(removeSectionSpy).toHaveBeenCalledWith(tag);
+        });
+    });
+
     describe("unread status", () => {
         let room: Room;
         let notificationState: RoomNotificationState;