Merge pull request #538 from sumnerevans/render-room-topic

web/roomview: render room topic in header

web/src/ui/roomlist/RoomList.css

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

web/src/ui/roomview/RoomView.css

@@ -5,7 +5,7 @@ div.room-view {
 	display: grid;
 	outline: none;
 	grid-template:
-		"header" 3rem
+		"header" 3.5rem
 		"messageview" 1fr
 		"autocomplete" 0
 		"input" auto

web/src/ui/roomview/RoomViewHeader.css

@@ -6,12 +6,26 @@ div.room-header {
 	border-bottom: 1px solid var(--border-color);
 	overflow: hidden;
 
-	> div.room-name {
-		font-weight: bold;
+	> div.room-name-and-topic {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		> div.room-name, > div.room-topic {
 			overflow: hidden;
 			text-overflow: ellipsis;
 			text-wrap: nowrap;
-		flex: 1;
+		}
+
+		> div.room-name {
+			font-weight: bold;
+		}
+
+		> div.room-topic {
+			font-size: 0.85rem;
+			color: var(--secondary-text-color);
+		}
 	}
 
 	> button.back {

web/src/ui/roomview/RoomViewHeader.tsx

@@ -52,9 +52,14 @@ const RoomViewHeader = ({ room }: RoomViewHeaderProps) => {
 			onClick={use(LightboxContext)}
 			alt=""
 		/>
+		<div className="room-name-and-topic">
 			<div className="room-name">
 				{roomMeta.name ?? roomMeta.room_id}
 			</div>
+			{roomMeta.topic && <div className="room-topic">
+				{roomMeta.topic}
+			</div>}
+		</div>
 		<div className="right-buttons">
 			<button
 				data-target-panel="pinned-messages"

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>
+		<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>