web/roomview: include avatar and name in header

web/src/ui/RoomView.css

@@ -3,10 +3,22 @@ div.room-view {
 	height: 100%;
 	display: grid;
 	grid-template:
-		"header" 2rem
+		"header" 3rem
 		"messageview" 1fr
 		"input" 2rem
 		/ 1fr;
+
+	> div.room-header {
+		display: flex;
+		align-items: center;
+		gap: .5rem;
+		padding-left: 1rem;
+		border-bottom: 2px solid #ccc;
+
+		> span.room-name {
+			font-weight: bold;
+		}
+	}
 }
 
 form.message-composer {

web/src/ui/RoomView.tsx

@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import React, { use, useState } from "react"
+import { getMediaURL } from "../api/media.ts"
 import { RoomStateStore } from "../api/statestore.ts"
 import { useNonNullEventAsState } from "../util/eventdispatcher.ts"
 import { ClientContext } from "./ClientContext.ts"
@@ -38,7 +39,15 @@ const RoomView = ({ room }: RoomViewProps) => {
 	}
 	return <div className="room-view">
 		<div className="room-header">
-			{roomMeta.room_id}
+			<img
+				className="avatar"
+				loading="lazy"
+				src={getMediaURL(roomMeta.avatar)}
+				alt=""
+			/>
+			<span className="room-name">
+				{roomMeta.name ?? roomMeta.room_id}
+			</span>
 		</div>
 		<TimelineView room={room}/>
 		<form className="message-composer" onSubmit={sendMessage}>

web/src/ui/roomlist/Entry.tsx

@@ -36,7 +36,7 @@ const Entry = ({ room, setActiveRoom }: RoomListEntryProps) => {
 	const previewText = makePreviewText(room.preview_event)
 	return <div className="room-entry" onClick={setActiveRoom} data-room-id={room.room_id}>
 		<div className="room-entry-left">
-			<img loading="lazy" className="room-avatar" src={getMediaURL(room.avatar)} alt=""/>
+			<img loading="lazy" className="avatar room-avatar" src={getMediaURL(room.avatar)} alt=""/>
 		</div>
 		<div className="room-entry-right">
 			<div className="room-name">{room.name}</div>

web/src/ui/roomlist/RoomList.css

@@ -15,13 +15,10 @@ div.room-list {
 		}
 
 		> div.room-entry-left {
-			height: 48px;
-			width: 48px;
+			height: 3rem;
+			width: 3rem;
 
 			> img.room-avatar {
-				width: 40px;
-				height: 40px;
-				border-radius: 50%;
 				padding: 4px;
 			}
 		}
@@ -48,3 +45,10 @@ div.room-list {
 		}
 	}
 }
+
+img.avatar {
+	width: 2.5rem;
+	height: 2.5rem;
+	border-radius: 50%;
+	object-fit: cover;
+}

web/src/ui/timeline/TimelineEvent.css

@@ -15,13 +15,6 @@ div.timeline-event {
 		width: 40px;
 		height: 40px;
 		margin-top: 2px;
-
-		> img {
-			width: 100%;
-			height: 100%;
-			border-radius: 50%;
-			object-fit: cover;
-		}
 	}
 
 	> div.event-sender-and-time {

web/src/ui/timeline/TimelineEvent.tsx

@@ -69,7 +69,12 @@ const TimelineEvent = ({ room, evt }: TimelineEventProps) => {
 	const editEventTS = evt.last_edit ? new Date(evt.last_edit.timestamp) : null
 	return <div className={`timeline-event ${BodyType === HiddenEvent ? "hidden-event" : ""}`}>
 		<div className="sender-avatar" title={evt.sender}>
-			<img loading="lazy" src={getAvatarURL(evt.sender, memberEvtContent?.avatar_url)} alt="" />
+			<img
+				className="avatar"
+				loading="lazy"
+				src={getAvatarURL(evt.sender, memberEvtContent?.avatar_url)}
+				alt=""
+			/>
 		</div>
 		<div className="event-sender-and-time">
 			<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>