From 26808d557ca54571657d3256bea950bbdcb6f590 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 10 Oct 2024 22:00:43 +0300
Subject: [PATCH] web/timeline: include sender avatar and timestamp

---
 web/src/ui/timeline/TimelineEvent.css | 34 +++++++++++++++++++++++++++
 web/src/ui/timeline/TimelineEvent.tsx | 25 +++++++++++++-------
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css
index fe63983..55bd226 100644
--- a/web/src/ui/timeline/TimelineEvent.css
+++ b/web/src/ui/timeline/TimelineEvent.css
@@ -2,6 +2,40 @@ div.timeline-event {
 	width: 100%;
 	max-width: 100%;
 	overflow: hidden;
+	display: flex;
+	gap: .5rem;
+	margin-top: .25rem;
+
+	> div.sender-avatar {
+		width: 40px;
+		height: 40px;
+		padding-top: 2px;
+
+		> img {
+			width: 100%;
+			height: 100%;
+			border-radius: 50%;
+			object-fit: cover;
+		}
+	}
+
+	> div.sender-and-content {
+		flex: 1;
+
+		> div.event-sender-and-time {
+			display: flex;
+			align-items: center;
+			gap: .5rem;
+
+			span.event-sender {
+				font-weight: bold;
+			}
+
+			span.event-time {
+				font-size: .8rem;
+			}
+		}
+	}
 }
 
 div.media-container {
diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index 7b5764d..0b76d45 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/web/src/ui/timeline/TimelineEvent.tsx
@@ -20,6 +20,7 @@ import HiddenEvent from "./content/HiddenEvent.tsx"
 import MessageBody from "./content/MessageBody.tsx"
 import { EventContentProps } from "./content/props.ts"
 import "./TimelineEvent.css"
+import { getMediaURL } from "../../api/media.ts"
 
 export interface TimelineEventProps {
 	room: RoomStateStore
@@ -43,16 +44,24 @@ const TimelineEvent = ({ room, eventRowID }: TimelineEventProps) => {
 	const memberEvt = room.getStateEvent("m.room.member", evt.sender)
 	const memberEvtContent = memberEvt?.content as MemberEventContent | undefined
 	const BodyType = getBodyType(evt)
-	if (BodyType === HiddenEvent) {
-		return <div className="timeline-event">
-			<BodyType room={room} event={evt}/>
-		</div>
-	}
+	// if (BodyType === HiddenEvent) {
+	// 	return <div className="timeline-event">
+	// 		<BodyType room={room} event={evt}/>
+	// 	</div>
+	// }
 	return <div className="timeline-event">
-		<div className="event-sender">
-			{memberEvtContent?.displayname ?? evt.sender}
+		<div className="sender-avatar">
+			<img src={getMediaURL(memberEvtContent?.avatar_url)} alt="" />
+		</div>
+		<div className="sender-and-content">
+			<div className="event-sender-and-time">
+				<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>
+				<span className="event-time">{new Date(evt.timestamp).toLocaleTimeString()}</span>
+			</div>
+			<div className="event-content">
+				<BodyType room={room} event={evt}/>
+			</div>
 		</div>
-		<BodyType room={room} event={evt}/>
 	</div>
 }