New room list: add primary filters (#29481)

* feat(room filter): add component for the primary filters

* feat(room filter): add filter component to room list view

* test(room filter): add tests to primary filters

* test: update snapshots

* test(e2e): update snapshots

* test(e2e): add tests for primary filters

* refactor: change aria-label of primary filters

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

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2025 New Vector 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 { expect, test } from "../../../element-web-test";
+import type { Page } from "@playwright/test";
+
+test.describe("Room list filters and sort", () => {
+    test.use({
+        displayName: "Alice",
+        botCreateOpts: {
+            displayName: "BotBob",
+            autoAcceptInvites: true,
+        },
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the room list
+     * @param page
+     */
+    function getRoomList(page: Page) {
+        return page.getByTestId("room-list");
+    }
+
+    function getPrimaryFilters(page: Page) {
+        return page.getByRole("listbox", { name: "Room list filters" });
+    }
+
+    test.beforeEach(async ({ page, app, bot, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+
+        await app.client.createRoom({ name: "empty room" });
+
+        const unReadDmId = await bot.createRoom({
+            name: "unread dm",
+            invite: [user.userId],
+            is_direct: true,
+        });
+        await bot.sendMessage(unReadDmId, "I am a robot. Beep.");
+
+        const unReadRoomId = await app.client.createRoom({ name: "unread room" });
+        await app.client.inviteUser(unReadRoomId, bot.credentials.userId);
+        await bot.joinRoom(unReadRoomId);
+        await bot.sendMessage(unReadRoomId, "I am a robot. Beep.");
+
+        const favouriteId = await app.client.createRoom({ name: "favourite room" });
+        await app.client.evaluate(async (client, favouriteId) => {
+            await client.setRoomTag(favouriteId, "m.favourite", { order: 0.5 });
+        }, favouriteId);
+    });
+
+    test("should filter the list (with primary filters)", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomList = getRoomList(page);
+        const primaryFilters = getPrimaryFilters(page);
+
+        const allFilters = await primaryFilters.locator("option").all();
+        for (const filter of allFilters) {
+            expect(await filter.getAttribute("aria-selected")).toBe("false");
+        }
+        await expect(primaryFilters).toMatchScreenshot("unselected-primary-filters.png");
+
+        await primaryFilters.getByRole("option", { name: "Unread" }).click();
+        // only one room should be visible
+        await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(2);
+        await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
+
+        await primaryFilters.getByRole("option", { name: "Favourite" }).click();
+        await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(1);
+
+        await primaryFilters.getByRole("option", { name: "People" }).click();
+        await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(1);
+
+        await primaryFilters.getByRole("option", { name: "Rooms" }).click();
+        await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+        await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
+        expect(await roomList.locator("role=gridcell").count()).toBe(3);
+    });
+});

res/css/_components.pcss

@@ -273,6 +273,7 @@
 @import "./views/rooms/RoomListPanel/_RoomListCell.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListHeaderView.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListPanel.pcss";
+@import "./views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListSearch.pcss";
 @import "./views/rooms/_AppsDrawer.pcss";
 @import "./views/rooms/_Autocomplete.pcss";

res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss

@@ -0,0 +1,12 @@
+/*
+ * Copyright 2025 New Vector 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.
+ */
+
+.mx_RoomListPrimaryFilters {
+    margin: unset;
+    list-style-type: none;
+    padding: var(--cpd-space-2x) var(--cpd-space-3x);
+}

src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2025 New Vector 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 React, { type JSX } from "react";
+import { ChatFilter } from "@vector-im/compound-web";
+
+import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
+import { Flex } from "../../../utils/Flex";
+import { _t } from "../../../../languageHandler";
+
+interface RoomListPrimaryFiltersProps {
+    /**
+     * The view model for the room list
+     */
+    vm: RoomListViewState;
+}
+
+/**
+ * The primary filters for the room list
+ */
+export function RoomListPrimaryFilters({ vm }: RoomListPrimaryFiltersProps): JSX.Element {
+    return (
+        <Flex
+            as="ul"
+            role="listbox"
+            aria-label={_t("room_list|primary_filters")}
+            className="mx_RoomListPrimaryFilters"
+            align="center"
+            gap="var(--cpd-space-2x)"
+            wrap="wrap"
+        >
+            {vm.primaryFilters.map((filter) => (
+                <li role="option" aria-selected={filter.active} key={filter.name}>
+                    <ChatFilter selected={filter.active} onClick={filter.toggle}>
+                        {filter.name}
+                    </ChatFilter>
+                </li>
+            ))}
+        </Flex>
+    );
+}

src/components/views/rooms/RoomListPanel/RoomListView.tsx

@@ -9,12 +9,17 @@ import React, { type JSX } from "react";
 
 import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewModel";
 import { RoomList } from "./RoomList";
+import { RoomListPrimaryFilters } from "./RoomListPrimaryFilters";
 
 /**
  * Host the room list and the (future) room filters
  */
 export function RoomListView(): JSX.Element {
     const vm = useRoomListViewModel();
-    // Room filters will be added soon
-    return <RoomList vm={vm} />;
+    return (
+        <>
+            <RoomListPrimaryFilters vm={vm} />
+            <RoomList vm={vm} />
+        </>
+    );
 }

src/i18n/strings/en_EN.json

@@ -2114,6 +2114,7 @@
         "list_title": "Room list",
         "notification_options": "Notification options",
         "open_space_menu": "Open space menu",
+        "primary_filters": "Room list filters",
         "redacting_messages_status": {
             "one": "Currently removing messages in %(count)s room",
             "other": "Currently removing messages in %(count)s rooms"

test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2025 New Vector 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 React from "react";
+import { render, screen } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+
+import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
+import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms";
+import { RoomListPrimaryFilters } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters";
+
+describe("<RoomListPrimaryFilters />", () => {
+    let vm: RoomListViewState;
+
+    beforeEach(() => {
+        vm = {
+            rooms: [],
+            openRoom: jest.fn(),
+            primaryFilters: [
+                { name: "People", active: false, toggle: jest.fn() },
+                { name: "Rooms", active: true, toggle: jest.fn() },
+            ],
+            activateSecondaryFilter: () => {},
+            activeSecondaryFilter: SecondaryFilters.AllActivity,
+        };
+    });
+
+    it("should render primary filters", async () => {
+        const user = userEvent.setup();
+
+        const { asFragment } = render(<RoomListPrimaryFilters vm={vm} />);
+        expect(screen.getByRole("option", { name: "People" })).toBeInTheDocument();
+        expect(screen.getByRole("option", { name: "Rooms" })).toHaveAttribute("aria-selected", "true");
+        expect(asFragment()).toMatchSnapshot();
+
+        await user.click(screen.getByRole("button", { name: "People" }));
+        expect(vm.primaryFilters[0].toggle).toHaveBeenCalled();
+    });
+});

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap

@@ -24,6 +24,65 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
         </h1>
       </div>
     </header>
+    <ul
+      aria-label="Room list filters"
+      class="mx_Flex mx_RoomListPrimaryFilters"
+      role="listbox"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+    >
+      <li
+        aria-selected="false"
+        role="option"
+      >
+        <button
+          aria-selected="false"
+          class="_chat-filter_5qdp0_8"
+          role="button"
+          tabindex="0"
+        >
+          Unread
+        </button>
+      </li>
+      <li
+        aria-selected="false"
+        role="option"
+      >
+        <button
+          aria-selected="false"
+          class="_chat-filter_5qdp0_8"
+          role="button"
+          tabindex="0"
+        >
+          Favourites
+        </button>
+      </li>
+      <li
+        aria-selected="false"
+        role="option"
+      >
+        <button
+          aria-selected="false"
+          class="_chat-filter_5qdp0_8"
+          role="button"
+          tabindex="0"
+        >
+          People
+        </button>
+      </li>
+      <li
+        aria-selected="false"
+        role="option"
+      >
+        <button
+          aria-selected="false"
+          class="_chat-filter_5qdp0_8"
+          role="button"
+          tabindex="0"
+        >
+          Rooms
+        </button>
+      </li>
+    </ul>
     <div
       class="mx_RoomList"
       data-testid="room-list"
@@ -174,6 +233,65 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
         </div>
       </button>
     </header>
+    <ul
+      aria-label="Room list filters"
+      class="mx_Flex mx_RoomListPrimaryFilters"
+      role="listbox"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+    >
+      <li
+        aria-selected="false"
+        role="option"
+      >
+        <button
+          aria-selected="false"
+          class="_chat-filter_5qdp0_8"
+          role="button"
+          tabindex="0"
+        >
+          Unread
+        </button>
+      </li>
+      <li
+        aria-selected="false"
+        role="option"
+      >
+        <button
+          aria-selected="false"
+          class="_chat-filter_5qdp0_8"
+          role="button"
+          tabindex="0"
+        >
+          Favourites
+        </button>
+      </li>
+      <li
+        aria-selected="false"
+        role="option"
+      >
+        <button
+          aria-selected="false"
+          class="_chat-filter_5qdp0_8"
+          role="button"
+          tabindex="0"
+        >
+          People
+        </button>
+      </li>
+      <li
+        aria-selected="false"
+        role="option"
+      >
+        <button
+          aria-selected="false"
+          class="_chat-filter_5qdp0_8"
+          role="button"
+          tabindex="0"
+        >
+          Rooms
+        </button>
+      </li>
+    </ul>
     <div
       class="mx_RoomList"
       data-testid="room-list"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RoomListPrimaryFilters /> should render primary filters 1`] = `
+<DocumentFragment>
+  <ul
+    aria-label="Room list filters"
+    class="mx_Flex mx_RoomListPrimaryFilters"
+    role="listbox"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+  >
+    <li
+      aria-selected="false"
+      role="option"
+    >
+      <button
+        aria-selected="false"
+        class="_chat-filter_5qdp0_8"
+        role="button"
+        tabindex="0"
+      >
+        People
+      </button>
+    </li>
+    <li
+      aria-selected="true"
+      role="option"
+    >
+      <button
+        aria-selected="true"
+        class="_chat-filter_5qdp0_8"
+        role="button"
+        tabindex="0"
+      >
+        Rooms
+      </button>
+    </li>
+  </ul>
+</DocumentFragment>
+`;