Highlight messages we jump to.

src/pages/channels/messaging/MessageArea.tsx

@@ -60,7 +60,9 @@ export function MessageArea({ id }: Props) {
     const status = useContext(StatusContext);
     const { focusTaken } = useContext(IntermediateContext);
 
+    // ? Required data for message links.
     const { message } = useParams<{ message: string }>();
+    const [highlight, setHighlight] = useState<string | undefined>(undefined);
 
     // ? This is the scroll container.
     const ref = useRef<HTMLDivElement>(null);
@@ -99,7 +101,7 @@ export function MessageArea({ id }: Props) {
                 });
             } else if (scrollState.current.type === "ScrollToView") {
                 document.getElementById(scrollState.current.id)
-                    ?.scrollIntoView();
+                    ?.scrollIntoView({ block: 'center' });
                 
                 setScrollState({ type: "Free" });
             } else if (scrollState.current.type === "OffsetTop") {
@@ -170,6 +172,7 @@ export function MessageArea({ id }: Props) {
     // ? If message present or changes, load it as well.
     useEffect(() => {
         if (message) {
+            setHighlight(message);
             SingletonMessageRenderer.init(id, message);
 
             let channel = client.channels.get(id);
@@ -284,7 +287,7 @@ export function MessageArea({ id }: Props) {
                         </RequiresOnline>
                     )}
                     {state.type === "RENDER" && (
-                        <MessageRenderer id={id} state={state} />
+                        <MessageRenderer id={id} state={state} highlight={highlight} />
                     )}
                     {state.type === "EMPTY" && <ConversationStart id={id} />}
                 </div>

src/pages/channels/messaging/MessageRenderer.tsx

@@ -28,6 +28,7 @@ import MessageEditor from "./MessageEditor";
 interface Props {
     id: string;
     state: RenderState;
+    highlight?: string;
     queue: QueuedMessage[];
 }
 
@@ -42,7 +43,7 @@ const BlockedMessage = styled.div`
     }
 `;
 
-function MessageRenderer({ id, state, queue }: Props) {
+function MessageRenderer({ id, state, queue, highlight }: Props) {
     if (state.type !== "RENDER") return null;
 
     const client = useContext(AppContext);
@@ -132,6 +133,7 @@ function MessageRenderer({ id, state, queue }: Props) {
                     key={message._id}
                     message={message}
                     attachContext
+                    highlight={highlight === message._id}
                 />,
             );
         } else {
@@ -158,6 +160,7 @@ function MessageRenderer({ id, state, queue }: Props) {
                             ) : undefined
                         }
                         attachContext
+                        highlight={highlight === message._id}
                     />,
                 );
             }