web/settings: render room details in settings

Signed-off-by: Sumner Evans <sumner.evans@automattic.com>

web/src/ui/roomlist/RoomList.css

@@ -151,4 +151,9 @@ img.avatar {
 		width: 1rem;
 		height: 1rem;
 	}
+
+	&.large {
+		width: 5rem;
+		height: 5rem;
+	}
 }

web/src/ui/settings/SettingsView.css

@@ -1,4 +1,20 @@
 div.settings-view {
+	div.room-details {
+		display: flex;
+		gap: .5rem;
+
+		img.avatar {
+			margin-top: 0.5rem;
+		}
+
+		div.room-name {
+			font-size: 1.2rem;
+			font-weight: bold;
+			text-overflow: ellipsis;
+			text-wrap: nowrap;
+		}
+	}
+
 	width: min(60rem, 80vw);
 	display: flex;
 	flex-direction: column;

web/src/ui/settings/SettingsView.tsx

@@ -16,6 +16,7 @@
 import { Suspense, lazy, use, useCallback, useRef, useState } from "react"
 import { ScaleLoader } from "react-spinners"
 import Client from "@/api/client.ts"
+import { getRoomAvatarURL } from "@/api/media.ts"
 import { RoomStateStore, usePreferences } from "@/api/statestore"
 import {
 	Preference,
@@ -25,8 +26,10 @@ import {
 	preferenceContextToInt,
 	preferences,
 } from "@/api/types/preferences"
+import { useEventAsState } from "@/util/eventdispatcher.ts"
 import useEvent from "@/util/useEvent.ts"
 import ClientContext from "../ClientContext.ts"
+import { LightboxContext } from "../modal/Lightbox.tsx"
 import JSONView from "../util/JSONView.tsx"
 import Toggle from "../util/Toggle.tsx"
 import CloseIcon from "@/icons/close.svg?react"
@@ -289,6 +292,7 @@ const AppliedSettingsView = ({ room }: SettingsViewProps) => {
 }
 
 const SettingsView = ({ room }: SettingsViewProps) => {
+	const roomMeta = useEventAsState(room.meta)
 	const client = use(ClientContext)!
 	const setPref = useCallback((context: PreferenceContext, key: keyof Preferences, value: PreferenceValueType | undefined) => {
 		if (context === PreferenceContext.Account) {
@@ -330,7 +334,20 @@ const SettingsView = ({ room }: SettingsViewProps) => {
 	const roomLocal = room.localPreferenceCache
 	return <>
 		<h2>Settings</h2>
-		<code>{room.roomID}</code>
+		<div className="room-details">
+			<img
+				className="avatar large"
+				loading="lazy"
+				src={getRoomAvatarURL(roomMeta)}
+				onClick={use(LightboxContext)}
+				alt=""
+			/>
+			<div>
+				{roomMeta.name && <div className="room-name">{roomMeta.name}</div>}
+				<code>{room.roomID}</code>
+				<div>{roomMeta.topic}</div>
+			</div>
+		</div>
 		<table>
 			<thead>
 				<tr>