Display the list of spaces

matrixgw_frontend/src/widgets/messages/SpaceSelector.tsx

@@ -0,0 +1,53 @@
+import HomeIcon from "@mui/icons-material/Home";
+import { Button } from "@mui/material";
+import React from "react";
+import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
+import type { Room } from "../../api/matrix/MatrixApiRoom";
+import { RoomIcon } from "./RoomIcon";
+
+export function SpaceSelector(p: {
+  rooms: Room[];
+  users: UsersMap;
+  selectedSpace?: string;
+  onChange: (space?: string) => void;
+}): React.ReactElement {
+  const spaces = React.useMemo(
+    () => p.rooms.filter((r) => r.is_space),
+    [p.rooms]
+  );
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <SpaceButton
+        icon={<HomeIcon />}
+        onClick={() => p.onChange()}
+        selected={p.selectedSpace === undefined}
+      />
+
+      {spaces.map((s) => (
+        <SpaceButton
+          key={s.id}
+          icon={<RoomIcon room={s} {...p} />}
+          onClick={() => p.onChange(s.id)}
+          selected={p.selectedSpace === s.id}
+        />
+      ))}
+    </div>
+  );
+}
+
+function SpaceButton(p: {
+  selected?: boolean;
+  icon: React.ReactElement;
+  onClick: () => void;
+}): React.ReactElement {
+  return (
+    <Button
+      variant={p.selected ? "contained" : "text"}
+      style={{ margin: "2px 5px", padding: "25px 10px", fontSize: "200%" }}
+      onClick={p.onClick}
+    >
+      {p.icon}
+    </Button>
+  );
+}