From 7676f21292db3336c3d8d03618a804dd36ca30bf Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 19 Oct 2024 17:41:24 +0300
Subject: [PATCH] web/timeline: add different rendering for m.notice and
 m.emote messages

---
 web/src/ui/timeline/ReplyBody.tsx           |  2 +-
 web/src/ui/timeline/TimelineEvent.css       | 14 +++++++++--
 web/src/ui/timeline/TimelineEvent.tsx       |  2 +-
 web/src/ui/timeline/content/MessageBody.tsx | 27 +++++++++++++++------
 4 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/web/src/ui/timeline/ReplyBody.tsx b/web/src/ui/timeline/ReplyBody.tsx
index d05b723..3c7a978 100644
--- a/web/src/ui/timeline/ReplyBody.tsx
+++ b/web/src/ui/timeline/ReplyBody.tsx
@@ -79,7 +79,7 @@ export const ReplyBody = ({ room, event, onClose }: ReplyBodyProps) => {
 					alt=""
 				/>
 			</div>
-			<span className="event-sender">{memberEvtContent?.displayname ?? event.sender}</span>
+			<span className="event-sender">{memberEvtContent?.displayname || event.sender}</span>
 			{onClose && <button className="close-reply" onClick={onClose}><CloseButton/></button>}
 		</div>
 		<TextMessageBody room={room} event={event}/>
diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css
index a72bf3c..1602706 100644
--- a/web/src/ui/timeline/TimelineEvent.css
+++ b/web/src/ui/timeline/TimelineEvent.css
@@ -176,8 +176,18 @@ div.member-body {
 	gap: .25rem;
 }
 
-div.plaintext-body {
-	white-space: pre-wrap;
+div.message-text {
+	&.plaintext-body {
+		white-space: pre-wrap;
+	}
+
+	&.notice-message {
+		opacity: .6;
+	}
+
+	&.emote-message::before {
+		content: "* " attr(data-event-sender) " ";
+	}
 }
 
 div.html-body {
diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index 19c4fe7..8a82ff4 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/web/src/ui/timeline/TimelineEvent.tsx
@@ -146,7 +146,7 @@ const TimelineEvent = ({ room, evt, prevEvt, setReplyToRef }: TimelineEventProps
 			/>
 		</div>
 		<div className="event-sender-and-time" onClick={wrappedSetReplyTo}>
-			<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>
+			<span className="event-sender">{memberEvtContent?.displayname || evt.sender}</span>
 			<span className="event-time" title={fullTime}>{shortTime}</span>
 			{(editEventTS && editTime) ? <span className="event-edited" title={editTime}>
 				(edited at {formatShortTime(editEventTS)})
diff --git a/web/src/ui/timeline/content/MessageBody.tsx b/web/src/ui/timeline/content/MessageBody.tsx
index a85110d..0991248 100644
--- a/web/src/ui/timeline/content/MessageBody.tsx
+++ b/web/src/ui/timeline/content/MessageBody.tsx
@@ -13,7 +13,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 type { MediaMessageEventContent, MessageEventContent } from "@/api/types"
+import { MediaMessageEventContent, MemberEventContent, MessageEventContent } from "@/api/types"
 import { EventContentProps } from "./props.ts"
 import { useMediaContent } from "./useMediaContent.tsx"
 
@@ -24,18 +24,31 @@ const onClickHTML = (evt: React.MouseEvent<HTMLDivElement>) => {
 	}
 }
 
-export const TextMessageBody = ({ event }: EventContentProps) => {
+export const TextMessageBody = ({ event, room }: EventContentProps) => {
 	const content = event.content as MessageEventContent
+	const classNames = ["message-text"]
+	let eventSenderName: string | undefined
+	if (content.msgtype === "m.notice") {
+		classNames.push("notice-message")
+	} else if (content.msgtype === "m.emote") {
+		classNames.push("emote-message")
+		const memberEvt = room.getStateEvent("m.room.member", event.sender)
+		const memberEvtContent = memberEvt?.content as MemberEventContent | undefined
+		eventSenderName = memberEvtContent?.displayname || event.sender
+	}
 	if (event.local_content?.sanitized_html) {
-		const classNames = ["message-text", "html-body"]
+		classNames.push("html-body")
 		if (event.local_content.was_plaintext) {
 			classNames.push("plaintext-body")
 		}
-		return <div onClick={onClickHTML} className={classNames.join(" ")} dangerouslySetInnerHTML={{
-			__html: event.local_content!.sanitized_html!,
-		}}/>
+		return <div
+			onClick={onClickHTML}
+			className={classNames.join(" ")}
+			data-event-sender={eventSenderName}
+			dangerouslySetInnerHTML={{ __html: event.local_content!.sanitized_html! }}
+		/>
 	}
-	return <div className="message-text plaintext-body">{content.body}</div>
+	return <div className={classNames.join(" ")} data-event-sender={eventSenderName}>{content.body}</div>
 }
 
 export const MediaMessageBody = ({ event, room }: EventContentProps) => {