From 4ff73a01722de70221dda4a600eb335f8b9f3da7 Mon Sep 17 00:00:00 2001
From: Sumner Evans <me@sumnerevans.com>
Date: Fri, 3 Jan 2025 08:49:03 -0700
Subject: [PATCH] fixup! web/timeline: render MSC4144 per-message profiles

Signed-off-by: Sumner Evans <me@sumnerevans.com>
---
 web/src/ui/timeline/ReplyBody.tsx     | 13 +++++++++++--
 web/src/ui/timeline/TimelineEvent.tsx |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/src/ui/timeline/ReplyBody.tsx b/web/src/ui/timeline/ReplyBody.tsx
index 8c636011..65c20c82 100644
--- a/web/src/ui/timeline/ReplyBody.tsx
+++ b/web/src/ui/timeline/ReplyBody.tsx
@@ -103,6 +103,15 @@ export const ReplyBody = ({
 		classNames.push("small")
 	}
 	const perMessageSender = getPerMessageProfile(event)
+	let renderMemberEvtContent = memberEvtContent
+	if (perMessageSender) {
+		renderMemberEvtContent = {
+			membership: "join",
+			displayname: perMessageSender.displayname ?? memberEvtContent?.displayname,
+			avatar_url: perMessageSender.avatar_url ?? memberEvtContent?.avatar_url,
+			avatar_file: perMessageSender.avatar_file ?? memberEvtContent?.avatar_file,
+		}
+	}
 	const userColorIndex = getUserColorIndex(perMessageSender?.id ?? event.sender)
 	classNames.push(`sender-color-${userColorIndex}`)
 	return <blockquote data-reply-to={event.event_id} className={classNames.join(" ")} onClick={onClickReply}>
@@ -115,7 +124,7 @@ export const ReplyBody = ({
 				<img
 					className="small avatar"
 					loading="lazy"
-					src={getAvatarURL(perMessageSender?.id ?? event.sender, perMessageSender ?? memberEvtContent)}
+					src={getAvatarURL(perMessageSender?.id ?? event.sender, renderMemberEvtContent)}
 					alt=""
 				/>
 			</div>
@@ -123,7 +132,7 @@ export const ReplyBody = ({
 				className={`event-sender sender-color-${userColorIndex}`}
 				title={perMessageSender ? perMessageSender.id : event.sender}
 			>
-				{getDisplayname(event.sender, perMessageSender ?? memberEvtContent)}
+				{getDisplayname(event.sender, renderMemberEvtContent)}
 			</span>
 			{perMessageSender && <div className="per-message-event-sender">
 				<span className="via">via</span>
diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index 2b250c82..d0a63907 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/web/src/ui/timeline/TimelineEvent.tsx
@@ -114,7 +114,6 @@ const TimelineEvent = ({ evt, prevEvt, disableMenu, smallReplies, isFocused }: T
 	}
 	const memberEvt = useRoomMember(client, roomCtx.store, evt.sender)
 	const memberEvtContent = memberEvt?.content as MemberEventContent | undefined
-	let renderMemberEvtContent = memberEvtContent
 	const BodyType = getBodyType(evt)
 	const eventTS = new Date(evt.timestamp)
 	const editEventTS = evt.last_edit ? new Date(evt.last_edit.timestamp) : null
@@ -173,6 +172,7 @@ const TimelineEvent = ({ evt, prevEvt, disableMenu, smallReplies, isFocused }: T
 	}
 	const perMessageSender = getPerMessageProfile(evt)
 	const prevPerMessageSender = getPerMessageProfile(prevEvt)
+	let renderMemberEvtContent = memberEvtContent
 	if (perMessageSender) {
 		renderMemberEvtContent = {
 			membership: "join",