matrixgw_frontend/src/widgets/messages/MainMessagesWidget.tsx

@@ -1,3 +1,4 @@
+import { Divider } from "@mui/material";
 import React from "react";
 import {
   MatrixApiProfile,
@@ -6,9 +7,9 @@ import {
 import { MatrixApiRoom, type Room } from "../../api/matrix/MatrixApiRoom";
 import { MatrixSyncApi } from "../../api/MatrixSyncApi";
 import { AsyncWidget } from "../AsyncWidget";
-import { SpaceSelector } from "./SpaceSelector";
-import { Divider } from "@mui/material";
 import { RoomSelector } from "./RoomSelector";
+import { RoomWidget } from "./RoomWidget";
+import { SpaceSelector } from "./SpaceSelector";
 
 export function MainMessageWidget(): React.ReactElement {
   const [rooms, setRooms] = React.useState<Room[] | undefined>();
@@ -66,7 +67,19 @@ function _MainMessageWidget(p: {
         onChange={setRoom}
       />
       <Divider orientation="vertical" />
-      <span style={{ flex: 1 }}>todo</span>
+      {room === undefined && (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flex: 1,
+          }}
+        >
+          No room selected.
+        </div>
+      )}
+      {room && <RoomWidget {...p} room={room} />}
     </div>
   );
 }

matrixgw_frontend/src/widgets/messages/RoomWidget.tsx

@@ -0,0 +1,9 @@
+import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
+import type { Room } from "../../api/matrix/MatrixApiRoom";
+
+export function RoomWidget(p: {
+  room: Room;
+  users: UsersMap;
+}): React.ReactElement {
+  return <>room</>;
+}