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
+    <div style={{ display: "flex", flexDirection: "column" }}>
-      style={{
+      {/** Chip bar */}
-        width: ROOM_SELECTOR_WIDTH,
+      <div style={{ padding: "5px 10px", marginTop: "5px" }}>
-      }}
+        <span onClick={() => setUnread(!unread)} style={{ cursor: "pointer" }}>
-    >
+          <Chip
-      {p.rooms.map((r) => (
+            label="Unread"
-        <ListItem
+            size="medium"
-          key={r.id}
+            color={unread ? "success" : undefined}
-          secondaryAction={
+            variant="outlined"
-            r.number_unread_messages === 0 ? undefined : (
+          />
-              <Chip color="error" label={r.number_unread_messages} />
+        </span>
-            )
+      </div>
-          }
+
-          disablePadding
+      {/** Rooms list */}
-        >
+      <List
-          <ListItemButton
+        style={{
-            role={undefined}
+          flex: 1,
-            onClick={() => p.onChange(r)}
+          width: ROOM_SELECTOR_WIDTH,
-            dense
+          overflow: "scroll",
-            selected={p.currRoom?.id === r.id}
+        }}
+      >
+        {shownRooms.map((r) => (
+          <ListItem
+            key={r.id}
+            secondaryAction={
+              r.number_unread_messages === 0 ? undefined : (
+                <Chip color="error" label={r.number_unread_messages} />
+              )
+            }
+            disablePadding
           >
-            <ListItemIcon>
+            <ListItemButton
-              <RoomIcon room={r} {...p} />
+              role={undefined}
-            </ListItemIcon>
+              onClick={() => p.onChange(r)}
-            <ListItemText
+              dense
-              primary={
+              selected={p.currRoom?.id === r.id}
-                <span
+            >
-                  style={{
+              <ListItemIcon>
-                    fontWeight:
+                <RoomIcon room={r} {...p} />
-                      r.number_unread_messages > 0 ? "bold" : undefined,
+              </ListItemIcon>
-                  }}
+              <ListItemText
-                >
+                primary={
-                  {roomName(user.info, r, p.users)}
+                  <span
-                </span>
+                    style={{
-              }
+                      fontWeight:
-            />
+                        r.number_unread_messages > 0 ? "bold" : undefined,
-          </ListItemButton>
+                    }}
-        </ListItem>
+                  >
-      ))}
+                    {roomName(user.info, r, p.users)}
-    </List>
+                  </span>
+                }
+              />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </div>
   );
 }