filter test

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

@@ -10,3 +10,7 @@
     height: 100%;
     border-right: 1px solid var(--cpd-color-bg-subtle-primary);
 }
+
+.mx_RoomFilters {
+    padding: var(--cpd-space-2x) var(--cpd-space-3x);
+}

src/components/viewmodels/roomlist/RoomListViewModel.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import type { Room } from "matrix-js-sdk/src/matrix";
 import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
@@ -25,6 +25,8 @@ export interface RoomListViewState {
      * Open the room having given roomId.
      */
     openRoom: (roomId: string) => void;
+    filter: "test" | "without test" | undefined;
+    setFilter: (filter: "test" | "without test" | undefined) => void;
 }
 
 /**
@@ -33,6 +35,19 @@ export interface RoomListViewState {
  */
 export function useRoomListViewModel(): RoomListViewState {
     const [rooms, setRooms] = useState(RoomListStoreV3.instance.getSortedRoomInActiveSpace());
+    const [filter, setFilter] = useState<"test" | "without test" | undefined>();
+
+    const filterRooms = useMemo(() => {
+        return rooms.filter((room) => {
+            if (!filter) return true;
+
+            if (filter === "test") {
+                return room.name.toLowerCase().includes("test");
+            } else if (filter === "without test") {
+                return !room.name.toLowerCase().includes("test");
+            }
+        });
+    }, [rooms, filter]);
 
     useEventEmitter(RoomListStoreV3.instance, LISTS_UPDATE_EVENT, () => {
         const newRooms = RoomListStoreV3.instance.getSortedRoomInActiveSpace();
@@ -47,5 +62,5 @@ export function useRoomListViewModel(): RoomListViewState {
         });
     }, []);
 
-    return { rooms, openRoom };
+    return { rooms: filterRooms, openRoom, filter, setFilter };
 }

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

@@ -6,12 +6,45 @@
  */
 
 import React, { type JSX } from "react";
+import { ChatFilter } from "@vector-im/compound-web";
 
-import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewModel";
+import { type RoomListViewState, useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewModel";
 import { RoomList } from "./RoomList";
+import { Flex } from "../../../utils/Flex";
 
 export function RoomListView(): JSX.Element {
     const vm = useRoomListViewModel();
     // Room filters will be added soon
-    return <RoomList vm={vm} />;
+    return (
+        <>
+            <RoomFilters vm={vm} />
+            <RoomList vm={vm} />;
+        </>
+    );
+}
+
+interface RoomFiltersProps {
+    /**
+     * The view model state for the room list.
+     */
+    vm: RoomListViewState;
+}
+
+function RoomFilters({ vm }: RoomFiltersProps): JSX.Element {
+    return (
+        <Flex className="mx_RoomFilters" align="center" gap="var(--cpd-space-2x)">
+            <ChatFilter
+                selected={vm.filter === "test"}
+                onClick={() => vm.setFilter(vm.filter === "test" ? undefined : "test")}
+            >
+                With "Test"
+            </ChatFilter>
+            <ChatFilter
+                selected={vm.filter === "without test"}
+                onClick={() => vm.setFilter(vm.filter === "without test" ? undefined : "without test")}
+            >
+                Without "Test"
+            </ChatFilter>
+        </Flex>
+    );
 }