Display rooms list

matrixgw_frontend/src/widgets/messages/RoomIcon.tsx

@@ -1,9 +1,12 @@
-import { Icon } from "@mui/material";
+import { Avatar } from "@mui/material";
 import { MatrixApiMedia } from "../../api/matrix/MatrixApiMedia";
 import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
-import type { Room } from "../../api/matrix/MatrixApiRoom";
+import {
+  mainRoomMember,
+  roomName,
+  type Room,
+} from "../../api/matrix/MatrixApiRoom";
 import { useUserInfo } from "../dashboard/BaseAuthenticatedPage";
-import GroupIcon from "@mui/icons-material/Group";
 
 export function RoomIcon(p: {
   room: Room;
@@ -13,20 +16,18 @@ export function RoomIcon(p: {
 
   let url = p.room.avatar;
 
-  if (!url && p.room.members.length <= 1) url = p.room.members[0];
+  if (!url) {
+    const member = mainRoomMember(user.info, p.room);
+    if (member) url = p.users.get(member)?.avatar;
+  }
+  const name = roomName(user.info, p.room, p.users);
 
-  if (!url && p.room.members.length < 2)
-    url =
-      p.room.members[0] == user.info.matrix_user_id
-        ? p.room.members[1]
-        : p.room.members[0];
-
-  if (!url) return <GroupIcon />;
-  else
-    return (
-      <img
-        src={MatrixApiMedia.MediaURL(url, true)}
-        style={{ maxWidth: "1em", maxHeight: "1em" }}
-      />
-    );
+  return (
+    <Avatar
+      variant={p.room.is_space ? "square" : undefined}
+      src={url ? MatrixApiMedia.MediaURL(url, true) : undefined}
+    >
+      {name.slice(0, 1)}
+    </Avatar>
+  );
 }