From 455c82a2c4f7bd2c480156af06e054703e2c4acb Mon Sep 17 00:00:00 2001
From: Sumner Evans <sumner.evans@automattic.com>
Date: Fri, 6 Dec 2024 01:46:41 -0700
Subject: [PATCH 1/2] web/roomview: render room topic in header

Signed-off-by: Sumner Evans <sumner.evans@automattic.com>
---
 web/src/ui/roomview/RoomView.css       |  2 +-
 web/src/ui/roomview/RoomViewHeader.css | 24 +++++++++++++++++++-----
 web/src/ui/roomview/RoomViewHeader.tsx |  9 +++++++--
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/web/src/ui/roomview/RoomView.css b/web/src/ui/roomview/RoomView.css
index 0283d40d..9bc1efdb 100644
--- a/web/src/ui/roomview/RoomView.css
+++ b/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
diff --git a/web/src/ui/roomview/RoomViewHeader.css b/web/src/ui/roomview/RoomViewHeader.css
index d8248bda..aab85cd3 100644
--- a/web/src/ui/roomview/RoomViewHeader.css
+++ b/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;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		text-wrap: nowrap;
+	> 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;
+		}
+
+		> div.room-name {
+			font-weight: bold;
+		}
+
+		> div.room-topic {
+			font-size: 0.85rem;
+			color: var(--secondary-text-color);
+		}
 	}
 
 	> button.back {
diff --git a/web/src/ui/roomview/RoomViewHeader.tsx b/web/src/ui/roomview/RoomViewHeader.tsx
index c591bae4..8dd9ea29 100644
--- a/web/src/ui/roomview/RoomViewHeader.tsx
+++ b/web/src/ui/roomview/RoomViewHeader.tsx
@@ -52,8 +52,13 @@ const RoomViewHeader = ({ room }: RoomViewHeaderProps) => {
 			onClick={use(LightboxContext)}
 			alt=""
 		/>
-		<div className="room-name">
-			{roomMeta.name ?? roomMeta.room_id}
+		<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

From c6163806bd30976e1473ff133e5950b55462e50e Mon Sep 17 00:00:00 2001
From: Sumner Evans <sumner.evans@automattic.com>
Date: Fri, 6 Dec 2024 09:21:38 -0700
Subject: [PATCH 2/2] web/settings: render room details in settings

Signed-off-by: Sumner Evans <sumner.evans@automattic.com>
---
 web/src/ui/roomlist/RoomList.css     |  5 +++++
 web/src/ui/settings/SettingsView.css | 16 ++++++++++++++++
 web/src/ui/settings/SettingsView.tsx | 19 ++++++++++++++++++-
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/web/src/ui/roomlist/RoomList.css b/web/src/ui/roomlist/RoomList.css
index ccf4be02..d2fc7817 100644
--- a/web/src/ui/roomlist/RoomList.css
+++ b/web/src/ui/roomlist/RoomList.css
@@ -151,4 +151,9 @@ img.avatar {
 		width: 1rem;
 		height: 1rem;
 	}
+
+	&.large {
+		width: 5rem;
+		height: 5rem;
+	}
 }
diff --git a/web/src/ui/settings/SettingsView.css b/web/src/ui/settings/SettingsView.css
index b680e22e..2135a6b3 100644
--- a/web/src/ui/settings/SettingsView.css
+++ b/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;
diff --git a/web/src/ui/settings/SettingsView.tsx b/web/src/ui/settings/SettingsView.tsx
index 99a8b3ec..1621c8d4 100644
--- a/web/src/ui/settings/SettingsView.tsx
+++ b/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>