New room list: fix missing/incorrect notification decoration (#29796)

* fix: recompute notification when room change in room list item vm

* test: add use case when room list change

* test(e2e): add screenshot to unread filter test

playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts

@@ -140,7 +140,10 @@ test.describe("Room list filters and sort", () => {
             expect(await roomList.locator("role=gridcell").count()).toBe(3);
         });
 
-        test("unread filter should only match unread rooms that have a count", async ({ page, app, bot }) => {
+        test(
+            "unread filter should only match unread rooms that have a count",
+            { tag: "@screenshot" },
+            async ({ page, app, bot }) => {
                 const roomListView = getRoomList(page);
 
                 // Let's configure unread dm room so that we only get notification for mentions and keywords
@@ -160,9 +163,12 @@ test.describe("Room list filters and sort", () => {
                 await page.getByRole("option", { name: "Unread" }).click();
 
                 // Unread filter should only show unread room and not unread dm!
-            await expect(roomListView.getByRole("gridcell", { name: "Open room unread room" })).toBeVisible();
+                const unreadDm = roomListView.getByRole("gridcell", { name: "Open room unread room" });
+                await expect(unreadDm).toBeVisible();
+                await expect(unreadDm).toMatchScreenshot("unread-dm.png");
                 await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible();
-        });
+            },
+        );
     });
 
     test.describe("Empty room list", () => {

src/components/viewmodels/roomlist/RoomListItemViewModel.tsx

@@ -92,6 +92,11 @@ export function useRoomListItemViewModel(room: Room): RoomListItemViewState {
         setNotificationValues(getNotificationValues(notificationState));
     });
 
+    // If the notification reference change due to room change, update the values
+    useEffect(() => {
+        setNotificationValues(getNotificationValues(notificationState));
+    }, [notificationState]);
+
     // We don't want to show the hover menu if
     // - there is an invitation for this room
     // - the user doesn't have access to both notification and more options menus

test/unit-tests/components/viewmodels/roomlist/RoomListItemViewModel-test.tsx

@@ -128,6 +128,24 @@ describe("RoomListItemViewModel", () => {
             );
             expect(vm.current.isBold).toBe(true);
         });
+
+        it("should recompute notification state when room changes", () => {
+            const newRoom = mkStubRoom("room2", "Room 2", room.client);
+            const newNotificationState = new RoomNotificationState(newRoom, false);
+
+            const { result, rerender } = renderHook((room) => useRoomListItemViewModel(room), {
+                ...withClientContextRenderOptions(room.client),
+                initialProps: room,
+            });
+
+            expect(result.current.showNotificationDecoration).toBe(false);
+
+            jest.spyOn(newNotificationState, "hasAnyNotificationOrActivity", "get").mockReturnValue(true);
+            jest.spyOn(RoomNotificationStateStore.instance, "getRoomState").mockReturnValue(newNotificationState);
+            rerender(newRoom);
+
+            expect(result.current.showNotificationDecoration).toBe(true);
+        });
     });
 
     describe("a11yLabel", () => {