From 082e5642aa7bbf19214a2d690de8d37d40855ab0 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Tue, 22 Oct 2024 20:00:15 +0300
Subject: [PATCH] web/timeline: mark thread replies

---
 web/src/ui/composer/MessageComposer.tsx |  7 ++++++-
 web/src/ui/timeline/ReplyBody.css       |  6 ++++++
 web/src/ui/timeline/ReplyBody.tsx       | 10 ++++++----
 web/src/ui/timeline/TimelineEvent.tsx   |  8 ++++++--
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/web/src/ui/composer/MessageComposer.tsx b/web/src/ui/composer/MessageComposer.tsx
index 997e575..b6cda62 100644
--- a/web/src/ui/composer/MessageComposer.tsx
+++ b/web/src/ui/composer/MessageComposer.tsx
@@ -255,7 +255,12 @@ const MessageComposer = ({ room, scrollToBottomRef, setReplyToRef }: MessageComp
 			setState={setState}
 			setAutocomplete={setAutocomplete}
 		/></div>}
-		{replyToEvt && <ReplyBody room={room} event={replyToEvt} onClose={closeReply}/>}
+		{replyToEvt && <ReplyBody
+			room={room}
+			event={replyToEvt}
+			onClose={closeReply}
+			isThread={replyToEvt.content["m.relates_to"]?.rel_type === "m.thread"}
+		/>}
 		{loadingMedia && <div className="composer-media"><ScaleLoader/></div>}
 		{state.media && <ComposerMedia content={state.media} clearMedia={clearMedia}/>}
 		<div className="input-area">
diff --git a/web/src/ui/timeline/ReplyBody.css b/web/src/ui/timeline/ReplyBody.css
index c1950d4..03af9f4 100644
--- a/web/src/ui/timeline/ReplyBody.css
+++ b/web/src/ui/timeline/ReplyBody.css
@@ -27,6 +27,12 @@ blockquote.reply-body {
 		color: #666;
 	}
 
+	&.thread > div.reply-sender > span.event-sender::after {
+		content: " (thread)";
+		font-size: .75rem;
+		color: #666;
+	}
+
 	> div.reply-sender {
 		display: flex;
 		align-items: center;
diff --git a/web/src/ui/timeline/ReplyBody.tsx b/web/src/ui/timeline/ReplyBody.tsx
index 3534845..d5e6857 100644
--- a/web/src/ui/timeline/ReplyBody.tsx
+++ b/web/src/ui/timeline/ReplyBody.tsx
@@ -25,15 +25,17 @@ import "./ReplyBody.css"
 interface ReplyBodyProps {
 	room: RoomStateStore
 	event: MemDBEvent
+	isThread: boolean
 	onClose?: (evt: React.MouseEvent) => void
 }
 
 interface ReplyIDBodyProps {
 	room: RoomStateStore
 	eventID: EventID
+	isThread: boolean
 }
 
-export const ReplyIDBody = ({ room, eventID }: ReplyIDBodyProps) => {
+export const ReplyIDBody = ({ room, eventID, isThread }: ReplyIDBodyProps) => {
 	const event = useRoomEvent(room, eventID)
 	if (!event) {
 		// This caches whether the event is requested or not, so it doesn't need to be wrapped in an effect.
@@ -42,7 +44,7 @@ export const ReplyIDBody = ({ room, eventID }: ReplyIDBodyProps) => {
 			Reply to unknown event<br/><code>{eventID}</code>
 		</blockquote>
 	}
-	return <ReplyBody room={room} event={event}/>
+	return <ReplyBody room={room} event={event} isThread={isThread}/>
 }
 
 const onClickReply = (evt: React.MouseEvent) => {
@@ -62,13 +64,13 @@ const onClickReply = (evt: React.MouseEvent) => {
 	}
 }
 
-export const ReplyBody = ({ room, event, onClose }: ReplyBodyProps) => {
+export const ReplyBody = ({ room, event, onClose, isThread }: ReplyBodyProps) => {
 	const memberEvt = useRoomState(room, "m.room.member", event.sender)
 	const memberEvtContent = memberEvt?.content as MemberEventContent | undefined
 	const BodyType = getBodyType(event, true)
 	return <blockquote
 		data-reply-to={event.event_id}
-		className={`reply-body ${onClose ? "composer" : ""}`}
+		className={`reply-body ${onClose ? "composer" : ""} ${isThread ? "thread" : ""}`}
 		onClick={onClickReply}
 	>
 		<div className="reply-sender">
diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index 5ee9fb1..2d4159a 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/web/src/ui/timeline/TimelineEvent.tsx
@@ -92,7 +92,7 @@ const TimelineEvent = ({ room, evt, prevEvt, setReplyToRef }: TimelineEventProps
 	const fullTime = fullTimeFormatter.format(eventTS)
 	const shortTime = formatShortTime(eventTS)
 	const editTime = editEventTS ? `Edited at ${fullTimeFormatter.format(editEventTS)}` : null
-	const replyTo = (evt.orig_content ?? evt.content)["m.relates_to"]?.["m.in_reply_to"]?.event_id
+	const replyTo = evt.content["m.relates_to"]?.["m.in_reply_to"]?.event_id
 	const mainEvent = <div data-event-id={evt.event_id} className={wrapperClassNames.join(" ")}>
 		<div className="sender-avatar" title={evt.sender}>
 			<img
@@ -114,7 +114,11 @@ const TimelineEvent = ({ room, evt, prevEvt, setReplyToRef }: TimelineEventProps
 			<span className="event-time" title={editTime ? `${fullTime} - ${editTime}` : fullTime}>{shortTime}</span>
 		</div>
 		<div className="event-content">
-			{isEventID(replyTo) && BodyType !== HiddenEvent ? <ReplyIDBody room={room} eventID={replyTo}/> : null}
+			{isEventID(replyTo) && BodyType !== HiddenEvent ? <ReplyIDBody
+				room={room}
+				eventID={replyTo}
+				isThread={evt.content["m.relates_to"]?.rel_type === "m.thread"}
+			/> : null}
 			<ContentErrorBoundary>
 				<BodyType room={room} sender={memberEvt} event={evt}/>
 			</ContentErrorBoundary>