feat: Add a highlight to messages containing mentions of the current user

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} />
         )}

src/app/features/room/RoomTimeline.tsx

@@ -128,6 +128,8 @@ import { useTheme } from '../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 
+import './RoomTimelineVanilla.css';
+
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
     <Box
@@ -1063,6 +1065,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
               replyEventId && (
                 <Reply
                   room={room}
+                  replier={mEvent.getSender()}
                   timelineSet={timelineSet}
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}

src/app/features/room/RoomTimelineVanilla.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;
+  }
+}

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(',')}
       >