From 09ca63742f103052009dd7e2c06ee03a492f61b7 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 10 Oct 2024 01:39:48 +0300
Subject: [PATCH] web/timeline: render sender displayname

---
 web/src/api/statestore.ts             | 8 ++++++++
 web/src/ui/timeline/TimelineEvent.tsx | 4 +++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/web/src/api/statestore.ts b/web/src/api/statestore.ts
index c819c9b..7e4f68a 100644
--- a/web/src/api/statestore.ts
+++ b/web/src/api/statestore.ts
@@ -74,6 +74,14 @@ export class RoomStateStore {
 		this.meta = new NonNullCachedEventDispatcher(meta)
 	}
 
+	getStateEvent(type: EventType, stateKey: string): DBEvent | undefined {
+		const rowID = this.state.get(type)?.get(stateKey)
+		if (!rowID) {
+			return
+		}
+		return this.eventsByRowID.get(rowID)
+	}
+
 	applyPagination(history: DBEvent[]) {
 		// Pagination comes in newest to oldest, timeline is in the opposite order
 		history.reverse()
diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index d993a20..f164edc 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/web/src/ui/timeline/TimelineEvent.tsx
@@ -40,6 +40,8 @@ const TimelineEvent = ({ room, eventRowID }: TimelineEventProps) => {
 	if (!evt) {
 		return null
 	}
+	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">
@@ -48,7 +50,7 @@ const TimelineEvent = ({ room, eventRowID }: TimelineEventProps) => {
 	}
 	return <div className="timeline-event">
 		<div className="event-sender">
-			{evt.sender}
+			{memberEvtContent?.displayname ?? evt.sender}
 		</div>
 		<BodyType room={room} event={evt}/>
 	</div>