Highlight messages we jump to.

src/components/common/messaging/Message.tsx

@@ -28,12 +28,14 @@ interface Props {
     attachContext?: boolean;
     queued?: QueuedMessage;
     message: MessageObject;
+    highlight?: boolean;
     contrast?: boolean;
     content?: Children;
     head?: boolean;
 }
 
 function Message({
+    highlight,
     attachContext,
     message,
     contrast,
@@ -72,6 +74,7 @@ function Message({
                 />
             ))}
             <MessageBase
+                highlight={highlight}
                 head={head && !(message.replies && message.replies.length > 0)}
                 contrast={contrast}
                 sending={typeof queued !== "undefined"}

src/components/common/messaging/MessageBase.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import { decodeTime } from "ulid";
 
 import { Text } from "preact-i18n";
@@ -17,8 +17,15 @@ export interface BaseMessageProps {
     blocked?: boolean;
     sending?: boolean;
     contrast?: boolean;
+    highlight?: boolean;
 }
 
+const highlight = keyframes`
+    0% { background: var(--mention); }
+    66% { background: var(--mention); }
+    100% { background: transparent; }
+`;
+
 export default styled.div<BaseMessageProps>`
     display: flex;
     overflow: none;
@@ -70,6 +77,14 @@ export default styled.div<BaseMessageProps>`
             color: var(--error);
         `}
 
+    ${(props) =>
+        props.highlight &&
+        css`
+            animation-name: ${highlight};
+            animation-timing-function: ease;
+            animation-duration: 3s;
+        `}
+
     .detail {
         gap: 8px;
         display: flex;

src/components/common/messaging/SystemMessage.tsx

@@ -35,9 +35,10 @@ type SystemMessageParsed =
 interface Props {
     attachContext?: boolean;
     message: MessageObject;
+    highlight?: boolean;
 }
 
-export function SystemMessage({ attachContext, message }: Props) {
+export function SystemMessage({ attachContext, message, highlight }: Props) {
     const ctx = useForceUpdate();
 
     let data: SystemMessageParsed;
@@ -143,6 +144,7 @@ export function SystemMessage({ attachContext, message }: Props) {
 
     return (
         <MessageBase
+            highlight={highlight}
             onContextMenu={
                 attachContext
                     ? attachContextMenu("Menu", {