Moved reply mention disable into internal event handler

src/components/common/messaging/bars/ReplyBar.tsx

@@ -3,6 +3,7 @@ import { File, XCircle } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { SYSTEM_USER_ID } from "revolt.js";
 import { Channel } from "revolt.js/dist/maps/Channels";
+import { Message } from "revolt.js/dist/maps/Messages";
 import styled from "styled-components";
 
 import { Text } from "preact-i18n";
@@ -80,49 +81,36 @@ const Base = styled.div`
 // ! FIXME: Move to global config
 const MAX_REPLIES = 4;
 export default observer(({ channel, replies, setReplies }: Props) => {
+    const client = useClient();
+
     useEffect(() => {
-        return internalSubscribe(
+        return internalSubscribe("ReplyBar", "add", (_message) => {
-            "ReplyBar",
+            const message = _message as Message;
-            "add",
+            if (
-            (id) =>
+                replies.length >= MAX_REPLIES ||
-                replies.length < MAX_REPLIES &&
+                replies.find((x) => x.id === message._id)
-                !replies.find((x) => x.id === id) &&
+            )
+                return;
+
             setReplies([
                 ...replies,
                 {
-                        id: id as string,
+                    id: message._id,
-                        mention: getState().sectionToggle.mention ?? false,
+                    mention:
+                        message.author_id === client.user!._id
+                            ? false
+                            : getState().sectionToggle.mention ?? false,
                 },
-                ]),
+            ]);
-        );
+        });
-    }, [replies, setReplies]);
+    }, [replies, setReplies, client.user]);
 
-    const client = useClient();
     const renderer = getRenderer(channel);
     if (renderer.state !== "RENDER") return null;
 
     const ids = replies.map((x) => x.id);
     const messages = renderer.messages.filter((x) => ids.includes(x._id));
 
-    useEffect(() => {
-        let mentionsChanged = false;
-        const modified = replies.map((reply) => {
-            const message = messages.find((x) => reply.id === x._id);
-            if (message?.author_id === client.user!._id && reply.mention) {
-                mentionsChanged = true;
-                return {
-                    ...reply,
-                    mention: false,
-                };
-            }
-
-            return reply;
-        });
-        if (mentionsChanged) {
-            setReplies(modified);
-        }
-    }, [replies, setReplies, client.user, messages]);
-
     return (
         <div>
             {replies.map((reply, index) => {

src/lib/ContextMenus.tsx

@@ -79,7 +79,7 @@ type Action =
     | { action: "retry_message"; message: QueuedMessage }
     | { action: "cancel_message"; message: QueuedMessage }
     | { action: "mention"; user: string }
-    | { action: "reply_message"; id: string }
+    | { action: "reply_message"; target: Message }
     | { action: "quote_message"; content: string }
     | { action: "edit_message"; id: string }
     | { action: "delete_message"; target: Message }
@@ -246,7 +246,7 @@ function ContextMenus(props: Props) {
 
                 case "reply_message":
                     {
-                        internalEmit("ReplyBar", "add", data.id);
+                        internalEmit("ReplyBar", "add", data.target);
                     }
                     break;
 
@@ -695,7 +695,7 @@ function ContextMenus(props: Props) {
                     if (message && !queued) {
                         generateAction({
                             action: "reply_message",
-                            id: message._id,
+                            target: message,
                         });
 
                         if (