From e00baf6853d85d5fdaf9860661e14b15a9cfa0cd Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Fri, 18 Oct 2024 01:16:13 +0300
Subject: [PATCH] web/timeline: highlight messages that mention you

---
 web/src/ui/timeline/TimelineEvent.css |  8 ++++++++
 web/src/ui/timeline/TimelineEvent.tsx | 11 +++++------
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css
index 200f8eb..5253832 100644
--- a/web/src/ui/timeline/TimelineEvent.css
+++ b/web/src/ui/timeline/TimelineEvent.css
@@ -10,8 +10,16 @@ div.timeline-event {
 		"avatar gap content status" auto
 		/ 2.5rem .5rem 1fr 2rem;
 
+	&.highlight {
+		background-color: rgba(255, 255, 0, .1);
+	}
+
 	&:hover {
 		background-color: #eee;
+
+		&.highlight {
+			background-color: #eec;
+		}
 	}
 
 	> div.sender-avatar {
diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index 03fed1a..87b037e 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/web/src/ui/timeline/TimelineEvent.tsx
@@ -16,7 +16,7 @@
 import React, { use, useCallback } from "react"
 import { getAvatarURL } from "@/api/media.ts"
 import { RoomStateStore } from "@/api/statestore"
-import { MemDBEvent, MemberEventContent } from "@/api/types"
+import { MemDBEvent, MemberEventContent, UnreadType } from "@/api/types"
 import { isEventID } from "@/util/validation.ts"
 import { ClientContext } from "../ClientContext.ts"
 import { LightboxContext } from "../Lightbox.tsx"
@@ -24,11 +24,7 @@ import { ReplyIDBody } from "./ReplyBody.tsx"
 import EncryptedBody from "./content/EncryptedBody.tsx"
 import HiddenEvent from "./content/HiddenEvent.tsx"
 import MemberBody from "./content/MemberBody.tsx"
-import {
-	MediaMessageBody,
-	TextMessageBody,
-	UnknownMessageBody,
-} from "./content/MessageBody.tsx"
+import { MediaMessageBody, TextMessageBody, UnknownMessageBody } from "./content/MessageBody.tsx"
 import RedactedBody from "./content/RedactedBody.tsx"
 import { EventContentProps } from "./content/props.ts"
 import ErrorIcon from "../../icons/error.svg?react"
@@ -122,6 +118,9 @@ const TimelineEvent = ({ room, evt, prevEvt, setReplyTo }: TimelineEventProps) =
 	const eventTS = new Date(evt.timestamp)
 	const editEventTS = evt.last_edit ? new Date(evt.last_edit.timestamp) : null
 	const wrapperClassNames = ["timeline-event"]
+	if (evt.unread_type & UnreadType.Highlight) {
+		wrapperClassNames.push("highlight")
+	}
 	let smallAvatar = false
 	if (isSmallEvent(BodyType)) {
 		wrapperClassNames.push("hidden-event")