Highlight messages we jump to.

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;