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

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"