Can filter rooms list

matrixgw_frontend/src/widgets/messages/RoomSelector.tsx

@@ -1,3 +1,4 @@
+import SearchIcon from "@mui/icons-material/Search";
 import {
   Chip,
   List,
@@ -5,6 +6,7 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  TextField,
 } from "@mui/material";
 import React from "react";
 import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
@@ -22,11 +24,17 @@ export function RoomSelector(p: {
 }): React.ReactElement {
   const user = useUserInfo();
 
+  const [filter, setFilter] = React.useState("");
   const [unread, setUnread] = React.useState(false);
 
   const shownRooms = React.useMemo(
-    () => p.rooms.filter((r) => !unread || r.number_unread_messages > 0),
-    [p.rooms, unread]
+    () =>
+      p.rooms
+        .filter((r) => !unread || r.number_unread_messages > 0)
+        .filter((r) =>
+          r.name?.toLocaleLowerCase()?.includes(filter.toLocaleLowerCase())
+        ),
+    [p.rooms, unread, filter]
   );
 
   if (p.rooms.length === 0)
@@ -45,6 +53,19 @@ export function RoomSelector(p: {
 
   return (
     <div style={{ display: "flex", flexDirection: "column" }}>
+      {/** Filter bar */}
+      <TextField
+        placeholder="Filter rooms"
+        slotProps={{
+          input: {
+            startAdornment: <SearchIcon style={{ marginRight: "10px" }} />,
+          },
+        }}
+        style={{ margin: "5px" }}
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+      />
+
       {/** Chip bar */}
       <div style={{ padding: "5px 10px", marginTop: "5px" }}>
         <span onClick={() => setUnread(!unread)} style={{ cursor: "pointer" }}>