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,12 +44,28 @@ export function RoomSelector(p: {
     );
 
   return (
+    <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",
         }}
       >
-      {p.rooms.map((r) => (
+        {shownRooms.map((r) => (
           <ListItem
             key={r.id}
             secondaryAction={
@@ -76,5 +100,6 @@ export function RoomSelector(p: {
           </ListItem>
         ))}
       </List>
+    </div>
   );
 }