Can filter to show only unread rooms

matrixgw_frontend/src/widgets/messages/RoomSelector.tsx

@@ -6,6 +6,7 @@ import {
   ListItemIcon,
   ListItemText,
 } from "@mui/material";
+import React from "react";
 import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
 import { roomName, type Room } from "../../api/matrix/MatrixApiRoom";
 import { useUserInfo } from "../dashboard/BaseAuthenticatedPage";
@@ -21,6 +22,13 @@ export function RoomSelector(p: {
 }): React.ReactElement {
   const user = useUserInfo();
 
+  const [unread, setUnread] = React.useState(false);
+
+  const shownRooms = React.useMemo(
+    () => p.rooms.filter((r) => !unread || r.number_unread_messages > 0),
+    [p.rooms, unread]
+  );
+
   if (p.rooms.length === 0)
     return (
       <div
@@ -36,45 +44,62 @@ export function RoomSelector(p: {
     );
 
   return (
-    <List
-      style={{
-        width: ROOM_SELECTOR_WIDTH,
-      }}
-    >
-      {p.rooms.map((r) => (
-        <ListItem
-          key={r.id}
-          secondaryAction={
-            r.number_unread_messages === 0 ? undefined : (
-              <Chip color="error" label={r.number_unread_messages} />
-            )
-          }
-          disablePadding
-        >
-          <ListItemButton
-            role={undefined}
-            onClick={() => p.onChange(r)}
-            dense
-            selected={p.currRoom?.id === r.id}
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      {/** Chip bar */}
+      <div style={{ padding: "5px 10px", marginTop: "5px" }}>
+        <span onClick={() => setUnread(!unread)} style={{ cursor: "pointer" }}>
+          <Chip
+            label="Unread"
+            size="medium"
+            color={unread ? "success" : undefined}
+            variant="outlined"
+          />
+        </span>
+      </div>
+
+      {/** Rooms list */}
+      <List
+        style={{
+          flex: 1,
+          width: ROOM_SELECTOR_WIDTH,
+          overflow: "scroll",
+        }}
+      >
+        {shownRooms.map((r) => (
+          <ListItem
+            key={r.id}
+            secondaryAction={
+              r.number_unread_messages === 0 ? undefined : (
+                <Chip color="error" label={r.number_unread_messages} />
+              )
+            }
+            disablePadding
           >
-            <ListItemIcon>
-              <RoomIcon room={r} {...p} />
-            </ListItemIcon>
-            <ListItemText
-              primary={
-                <span
-                  style={{
-                    fontWeight:
-                      r.number_unread_messages > 0 ? "bold" : undefined,
-                  }}
-                >
-                  {roomName(user.info, r, p.users)}
-                </span>
-              }
-            />
-          </ListItemButton>
-        </ListItem>
-      ))}
-    </List>
+            <ListItemButton
+              role={undefined}
+              onClick={() => p.onChange(r)}
+              dense
+              selected={p.currRoom?.id === r.id}
+            >
+              <ListItemIcon>
+                <RoomIcon room={r} {...p} />
+              </ListItemIcon>
+              <ListItemText
+                primary={
+                  <span
+                    style={{
+                      fontWeight:
+                        r.number_unread_messages > 0 ? "bold" : undefined,
+                    }}
+                  >
+                    {roomName(user.info, r, p.users)}
+                  </span>
+                }
+              />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </div>
   );
 }