Add unread toast to room list sections (#33961)
* Forward the scroller element and scroll handle through VirtualizedList The room list needs two things the generic list did not expose: the underlying scroll container (to observe which items are genuinely visible) and the imperative scroll handle (to scroll an item into view). Forward an optional scrollerRef from useVirtualizedList and pass scrollHandleRef through FlatVirtualizedList, mirroring what GroupedVirtualizedList already exposes. Both are additive and optional, so other consumers are unaffected. Signed-off-by: David Langley <langley.dave@gmail.com> * Add an unread-activity toast to the room list Show a clickable "You have unread activity" pill when there are unread rooms scrolled below the visible fold, including unreads hidden inside collapsed sections whose header is below the fold. Clicking it scrolls the next such unread into view. The visible fold is tracked with an IntersectionObserver over the rendered item elements, so the toast appears as soon as a room crosses the fold rather than only once it leaves Virtuoso's overscan buffer. The toast click is wired through an imperative scroll handle the view registers with the view model. Signed-off-by: David Langley <langley.dave@gmail.com> * Change toast to target notifications only, not unread activity. * Fix formatting and refresh Toast snapshots for compound-web 9.7.0 - Apply oxfmt to the room list view model and virtualized view. - Refresh the RoomListToast/RoomListView story snapshots: compound-web 9.7.0 moves the typography classes onto the toast .content element and rebuilds the Toast CSS module hashes. - Add the missing UnreadActivityToast render snapshot baseline. * Add e2e tests for the room list unread activity toast Cover the unread-activity toast end to end: - it appears for a notifying room scrolled below the fold and clicking it scrolls that room into view (then the toast clears); - a room with only an unread-activity dot (no notification count) does not raise it; - a collapsed section hiding a notifying room raises it, and clicking scrolls the section header into view. * Add visual snapshot baselines for the unread-activity toast stories * Converge room-list toast codepaths into a single state-driven toast Reviewer feedback: the unread-activity toast and the transient event toasts (section_created / chat_moved) should share one mechanism, with toast lifecycle and precedence owned by the view model rather than split across a separate snapshot flag and a view-level ternary. - RoomListViewModel now reconciles the transient event toast and the derived unread-activity state into a single snapshot.toast via recomputeToast(); the event toast still takes precedence and auto-dismisses, and the unread toast reappears once it clears. Drops hasUnreadActivityBelow from the snapshot. - RoomListView renders a single RoomListToast driven by snapshot.toast; the ToastType union gains 'unread_activity'. The standalone UnreadActivityToast component is folded into RoomListToast (clickable arrow-down variant). - Adds VM tests for the unread-activity toast and the event/unread precedence. * Pre-bundle the room-list dnd-kit + virtuoso graph in vitest browser mode The room-list suites (RoomListView, VirtualizedRoomListView, RoomListItemMoreOptionsMenu) import a heavy @dnd-kit + react-virtuoso graph. Only @dnd-kit/abstract was pinned in optimizeDeps.include; @dnd-kit/dom, @dnd-kit/react, @dnd-kit/abstract/modifiers and react-virtuoso were left to runtime discovery. Under CI load the browser-mode dep optimizer can discover them late, re-bundle and reload the page, which fails the in-flight setupTests.ts import for those suites. Pinning the whole graph forces it into the initial optimize pass so no re-run happens while tests load. --------- Signed-off-by: David Langley <langley.dave@gmail.com>
This commit is contained in:
David Langley
@@ -0,0 +1,205 @@
|
||||
/*
|
||||
* 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 { type Page } from "@playwright/test";
|
||||
import { rejectToast } from "@element-hq/element-web-playwright-common";
|
||||
|
||||
import { expect, test } from "../../../element-web-test";
|
||||
import { type ElementAppPage } from "../../../pages/ElementAppPage";
|
||||
import { getRoomList, getRoomOptionsMenu, getSectionHeader } from "./utils";
|
||||
|
||||
/**
|
||||
* The unread-activity toast ("Unread messages") appears at the bottom of the room list when a room with a
|
||||
* notification count (the green decoration) is scrolled below the visible area. Clicking it scrolls that
|
||||
* room into view. Rooms with only an unread-activity dot (white/black) must not trigger it.
|
||||
*/
|
||||
test.describe("Room list unread activity toast", () => {
|
||||
test.use({
|
||||
displayName: "Alice",
|
||||
botCreateOpts: {
|
||||
displayName: "BotBob",
|
||||
autoAcceptInvites: true,
|
||||
},
|
||||
});
|
||||
|
||||
const getToast = (page: Page) => page.getByRole("button", { name: "Unread messages" });
|
||||
|
||||
/**
|
||||
* Create `count` filler rooms whose names sort alphabetically before any room named "zzz …",
|
||||
* so that under A-Z sorting they fill the top of the list and push the "zzz …" room below the fold.
|
||||
*/
|
||||
async function createFillerRooms(app: ElementAppPage, count: number): Promise<void> {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await app.client.createRoom({ name: `room ${String(i).padStart(2, "0")}` });
|
||||
}
|
||||
}
|
||||
|
||||
/** Switch the room list to alphabetical sorting so room positions are deterministic. */
|
||||
async function sortAlphabetically(page: Page): Promise<void> {
|
||||
await getRoomOptionsMenu(page).click();
|
||||
await page.getByRole("menuitemradio", { name: "A-Z" }).click();
|
||||
}
|
||||
|
||||
test.describe("flat list", () => {
|
||||
test.use({ labsFlags: ["feature_new_room_list"] });
|
||||
|
||||
test.beforeEach(async ({ page, app, user }) => {
|
||||
// Toasts are displayed above the room list; dismiss the unrelated ones.
|
||||
await rejectToast(page, "Verify this device");
|
||||
await rejectToast(page, "Notifications");
|
||||
// Focus the user menu so room rows are not decorated by hover.
|
||||
await page.getByRole("button", { name: "User menu" }).focus();
|
||||
});
|
||||
|
||||
test("shows a toast for a notifying room below the fold and scrolls to it on click", async ({
|
||||
page,
|
||||
app,
|
||||
bot,
|
||||
}) => {
|
||||
const roomList = getRoomList(page);
|
||||
|
||||
// A room with a real notification count, named so it sorts to the very bottom under A-Z.
|
||||
const targetId = await app.client.createRoom({ name: "zzz unread room" });
|
||||
await app.client.inviteUser(targetId, bot.credentials.userId);
|
||||
await bot.joinRoom(targetId);
|
||||
|
||||
// Enough filler rooms to push the target well below the visible area.
|
||||
await createFillerRooms(app, 20);
|
||||
|
||||
await sortAlphabetically(page);
|
||||
|
||||
// The bot notifies the target room, producing a green notification count.
|
||||
await bot.sendMessage(targetId, "Hello from the bottom!");
|
||||
|
||||
const targetRow = roomList.getByRole("option", { name: "Open room zzz unread room" });
|
||||
|
||||
// The toast appears because the notifying room is below the fold, and the room itself is offscreen.
|
||||
await expect(getToast(page)).toBeVisible();
|
||||
await expect(targetRow).not.toBeInViewport();
|
||||
|
||||
// Clicking the toast scrolls the notifying room into view…
|
||||
await getToast(page).click();
|
||||
await expect(targetRow).toBeInViewport();
|
||||
|
||||
// …and the toast goes away once there is nothing left unread below the fold.
|
||||
await expect(getToast(page)).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("does not show a toast when the only unread room below the fold has an activity dot", async ({
|
||||
page,
|
||||
app,
|
||||
bot,
|
||||
}) => {
|
||||
const roomList = getRoomList(page);
|
||||
|
||||
// Another room to park on, so the activity room stays unread (focused rooms are marked read).
|
||||
const otherRoomId = await app.client.createRoom({ name: "aaa other room" });
|
||||
|
||||
// The target's unread state will only ever be an activity dot, never a notification count: set it
|
||||
// to "@mentions & keywords" so a plain (non-mention) message produces activity rather than a count.
|
||||
const targetId = await app.client.createRoom({ name: "zzz activity room" });
|
||||
await app.client.inviteUser(targetId, bot.credentials.userId);
|
||||
await bot.joinRoom(targetId);
|
||||
|
||||
await app.viewRoomById(targetId);
|
||||
await app.settings.openRoomSettings("Notifications");
|
||||
await page.getByText("@mentions & keywords").click();
|
||||
await app.settings.closeDialog();
|
||||
|
||||
// Enable showing activity (dots) in the room list, so the activity dot is actually rendered.
|
||||
await app.settings.openUserSettings("Notifications");
|
||||
await page
|
||||
.getByRole("switch", { name: "Show all activity in the room list (dots or number of unread messages)" })
|
||||
.check();
|
||||
await app.settings.closeDialog();
|
||||
|
||||
// Park on the other room so the target stays unread, then send a plain (non-mention) message.
|
||||
await app.viewRoomById(otherRoomId);
|
||||
await bot.sendMessage(targetId, "just activity, no mention");
|
||||
|
||||
// The target shows an unread-activity dot: a decoration with no count (no digits).
|
||||
const targetRow = roomList.getByRole("option", { name: "Open room zzz activity room" });
|
||||
const decoration = targetRow.getByTestId("notification-decoration");
|
||||
await expect(decoration).toBeVisible();
|
||||
await expect(decoration).not.toHaveText(/\d/);
|
||||
|
||||
// Push the activity-dot room below the fold with filler rooms and A-Z sorting.
|
||||
await createFillerRooms(app, 20);
|
||||
await sortAlphabetically(page);
|
||||
|
||||
// The list has settled (a top filler room is visible) but the activity dot must not raise the toast.
|
||||
await expect(roomList.getByRole("option", { name: "Open room room 00" })).toBeVisible();
|
||||
await expect(targetRow).not.toBeInViewport();
|
||||
await expect(getToast(page)).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("sections", () => {
|
||||
test.use({ labsFlags: ["feature_new_room_list", "feature_room_list_sections"] });
|
||||
|
||||
test.beforeEach(async ({ page, app, user }) => {
|
||||
await rejectToast(page, "Verify this device");
|
||||
await rejectToast(page, "Notifications");
|
||||
await page.getByRole("button", { name: "User menu" }).focus();
|
||||
});
|
||||
|
||||
test("shows a toast for a collapsed section that hides a notifying room", async ({ page, app, bot }) => {
|
||||
const roomList = getRoomList(page);
|
||||
|
||||
// A regular (Chats) room with a notification count.
|
||||
const notifyId = await app.client.createRoom({ name: "chats notify room" });
|
||||
await app.client.inviteUser(notifyId, bot.credentials.userId);
|
||||
await bot.joinRoom(notifyId);
|
||||
|
||||
// A favourite room so the list renders in section mode from the start.
|
||||
const favouriteId = await app.client.createRoom({ name: "favourite room" });
|
||||
await app.client.evaluate(async (client, roomId) => {
|
||||
await client.setRoomTag(roomId, "m.favourite");
|
||||
}, favouriteId);
|
||||
|
||||
const chatsHeader = getSectionHeader(page, "Chats");
|
||||
await expect(chatsHeader).toBeVisible();
|
||||
|
||||
// Notify the Chats room and collapse the section while its header is still on screen.
|
||||
await bot.sendMessage(notifyId, "Hidden in a collapsed section");
|
||||
await expect(
|
||||
roomList
|
||||
.getByRole("row", { name: "Open room chats notify room" })
|
||||
.getByTestId("notification-decoration"),
|
||||
).toBeVisible();
|
||||
await chatsHeader.click();
|
||||
await expect(chatsHeader).toHaveAttribute("aria-expanded", "false");
|
||||
|
||||
// Grow the Favourites section until the collapsed Chats header is pushed below the fold.
|
||||
for (let i = 0; i < 20; i++) {
|
||||
const id = await app.client.createRoom({ name: `favourite ${String(i).padStart(2, "0")}` });
|
||||
await app.client.evaluate(async (client, roomId) => {
|
||||
await client.setRoomTag(roomId, "m.favourite");
|
||||
}, id);
|
||||
}
|
||||
|
||||
// Wait until the collapsed Chats header has been pushed offscreen (all favourites synced).
|
||||
await expect(chatsHeader).not.toBeInViewport();
|
||||
|
||||
// Tagging rooms into the Favourites section raises a transient "Chat moved" toast, which
|
||||
// shares the single toast slot with — and takes precedence over — the unread-activity toast
|
||||
// (see RoomListView). Dismiss it via its close button so the unread toast can surface; by now
|
||||
// all favourites have synced, so it will not re-appear.
|
||||
const chatMovedToast = page.getByText("Chat moved");
|
||||
await expect(chatMovedToast).toBeVisible();
|
||||
await page.getByRole("button", { name: "Close" }).click();
|
||||
await expect(chatMovedToast).not.toBeVisible();
|
||||
|
||||
// The collapsed Chats header is offscreen, but its hidden notification raises the toast.
|
||||
await expect(getToast(page)).toBeVisible();
|
||||
|
||||
// Clicking the toast scrolls the collapsed section header into view.
|
||||
await getToast(page).click();
|
||||
await expect(chatsHeader).toBeInViewport();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user