From 355cad35b615df1f0b4c1ad230c9aeaeeacb8c9d Mon Sep 17 00:00:00 2001
From: Sollace <sollacea@gmail.com>
Date: Tue, 3 Mar 2026 15:47:56 +0000
Subject: [PATCH 1/2] Highlight messages containing a reply or mention of the
 current user or room

---
 src/app/components/message/Reply.tsx         | 7 ++++++-
 src/app/features/room/RoomTimeline.css       | 9 +++++++++
 src/app/features/room/RoomTimeline.tsx       | 3 +++
 src/app/plugins/react-custom-html-parser.tsx | 2 ++
 4 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 src/app/features/room/RoomTimeline.css

diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 57bf2af99a..c6a7a7cf03 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -10,6 +10,7 @@ import * as css from './Reply.css';
 import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
 import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
 import { useRoomEvent } from '../../hooks/useRoomEvent';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 import colorMXID from '../../../util/colorMXID';
 import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 
@@ -56,6 +57,7 @@ type ReplyProps = {
   timelineSet?: EventTimelineSet | undefined;
   replyEventId: string;
   threadRootId?: string | undefined;
+  replier?: string | undefined,
   onClick?: MouseEventHandler | undefined;
   getMemberPowerTag?: GetMemberPowerTag;
   accessibleTagColors?: Map<string, string>;
@@ -69,6 +71,7 @@ export const Reply = as<'div', ReplyProps>(
       timelineSet,
       replyEventId,
       threadRootId,
+      replier,
       onClick,
       getMemberPowerTag,
       accessibleTagColors,
@@ -91,6 +94,8 @@ export const Reply = as<'div', ReplyProps>(
 
     const usernameColor = legacyUsernameColor ? colorMXID(sender ?? replyEventId) : tagColor;
 
+    const mx = useMatrixClient();
+
     const fallbackBody = replyEvent?.isRedacted() ? (
       <MessageDeletedContent />
     ) : (
@@ -101,7 +106,7 @@ export const Reply = as<'div', ReplyProps>(
     const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
 
     return (
-      <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
+      <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref} data-reply-highlight={mx.getUserId() === sender && sender !== replier}>
         {threadRootId && (
           <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
         )}
diff --git a/src/app/features/room/RoomTimeline.css b/src/app/features/room/RoomTimeline.css
new file mode 100644
index 0000000000..0d4d1b111c
--- /dev/null
+++ b/src/app/features/room/RoomTimeline.css
@@ -0,0 +1,9 @@
+
+/* Highlight messages containing mentions of the current user*/
+[data-message-id]:has([data-reply-highlight="true"], [data-highlight="true"][data-mention-id]) {
+  background: #AAAA001A;
+
+  &:hover {
+    background: #8888001A !important;
+  }
+}
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index d1678b65b3..334ec375ea 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -127,6 +127,8 @@ import { useTheme } from '../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 
+import './RoomTimeline.css';
+
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
     <Box
@@ -1062,6 +1064,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
               replyEventId && (
                 <Reply
                   room={room}
+                  replier={mEvent.getSender()}
                   timelineSet={timelineSet}
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx
index ba40c97876..40fa8c9576 100644
--- a/src/app/plugins/react-custom-html-parser.tsx
+++ b/src/app/plugins/react-custom-html-parser.tsx
@@ -86,6 +86,7 @@ export const renderMatrixMention = (
         href={href}
         {...customProps}
         className={css.Mention({ highlight: mx.getUserId() === userId })}
+        data-highlight={mx.getUserId() === userId}
         data-mention-id={userId}
       >
         {`@${
@@ -111,6 +112,7 @@ export const renderMatrixMention = (
         className={css.Mention({
           highlight: currentRoomId === (mentionRoom?.roomId ?? roomIdOrAlias),
         })}
+        data-highlight={currentRoomId === (mentionRoom?.roomId ?? roomIdOrAlias)}
         data-mention-id={mentionRoom?.roomId ?? roomIdOrAlias}
         data-mention-via={viaServers?.join(',')}
       >

From eae8c16dd3f570c6214e48b1fc94c75965336e99 Mon Sep 17 00:00:00 2001
From: Sollace <sollacea@gmail.com>
Date: Tue, 3 Mar 2026 15:56:13 +0000
Subject: [PATCH 2/2] Change filename to avoid conflict with vanilla-extracted
 styles

---
 src/app/features/room/RoomTimeline.tsx                          | 2 +-
 .../features/room/{RoomTimeline.css => RoomTimelineVanilla.css} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/app/features/room/{RoomTimeline.css => RoomTimelineVanilla.css} (100%)

diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 334ec375ea..e0000ce14a 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -127,7 +127,7 @@ import { useTheme } from '../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 
-import './RoomTimeline.css';
+import './RoomTimelineVanilla.css';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
diff --git a/src/app/features/room/RoomTimeline.css b/src/app/features/room/RoomTimelineVanilla.css
similarity index 100%
rename from src/app/features/room/RoomTimeline.css
rename to src/app/features/room/RoomTimelineVanilla.css