Add shift+click to mention a user in the textarea

src/components/common/messaging/Message.tsx

@@ -25,6 +25,7 @@ import Attachment from "./attachments/Attachment";
 import { MessageReply } from "./attachments/MessageReply";
 import Embed from "./embed/Embed";
 import InviteList from "./embed/EmbedInvite";
+import { internalEmit } from "../../../lib/eventEmitter";
 
 interface Props {
     attachContext?: boolean;
@@ -61,15 +62,28 @@ const Message = observer(
         // bree: Fatal please...
         const userContext = attachContext
             ? (attachContextMenu("Menu", {
-                  user: message.author_id,
+                user: message.author_id,
-                  contextualChannel: message.channel_id,
+                contextualChannel: message.channel_id,
-                  // eslint-disable-next-line
+                // eslint-disable-next-line
-              }) as any)
+            }) as any)
             : undefined;
 
         const openProfile = () =>
             openScreen({ id: "profile", user_id: message.author_id });
 
+        const handleUserClick = (e: MouseEvent) => {
+            if (e.shiftKey && user?._id) {
+                internalEmit(
+                    "MessageBox",
+                    "append",
+                    `<@${user._id}>`,
+                    "mention",
+                );
+            } else {
+                openProfile()
+            }
+        }
+
         // ! FIXME(?): animate on hover
         const [animate, setAnimate] = useState(false);
 
@@ -91,11 +105,11 @@ const Message = observer(
                         hideReply
                             ? false
                             : (head &&
-                                  !(
+                                !(
-                                      message.reply_ids &&
+                                    message.reply_ids &&
-                                      message.reply_ids.length > 0
+                                    message.reply_ids.length > 0
-                                  )) ??
+                                )) ??
-                              false
+                            false
                     }
                     contrast={contrast}
                     sending={typeof queued !== "undefined"}
@@ -104,10 +118,10 @@ const Message = observer(
                     onContextMenu={
                         attachContext
                             ? attachContextMenu("Menu", {
-                                  message,
+                                message,
-                                  contextualChannel: message.channel_id,
+                                contextualChannel: message.channel_id,
-                                  queued,
+                                queued,
-                              })
+                            })
                             : undefined
                     }
                     onMouseEnter={() => setAnimate(true)}
@@ -118,7 +132,7 @@ const Message = observer(
                                 target={user}
                                 size={36}
                                 onContextMenu={userContext}
-                                onClick={openProfile}
+                                onClick={handleUserClick}
                                 animate={animate}
                                 showServerIdentity
                             />
@@ -133,7 +147,7 @@ const Message = observer(
                                     className="author"
                                     user={user}
                                     onContextMenu={userContext}
-                                    onClick={openProfile}
+                                    onClick={handleUserClick}
                                     showServerIdentity
                                 />
                                 <MessageDetail

src/components/common/user/UserShort.tsx

@@ -9,6 +9,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import UserIcon from "./UserIcon";
+import { internalEmit } from "../../../lib/eventEmitter";
 
 const BotBadge = styled.div`
     display: inline-block;
@@ -25,17 +26,18 @@ const BotBadge = styled.div`
     border-radius: calc(var(--border-radius) / 2);
 `;
 
+type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
+    user?: User;
+    prefixAt?: boolean;
+    showServerIdentity?: boolean;
+}
 export const Username = observer(
     ({
         user,
         prefixAt,
         showServerIdentity,
         ...otherProps
-    }: {
+    }: UsernameProps) => {
-        user?: User;
-        prefixAt?: boolean;
-        showServerIdentity?: boolean;
-    } & JSX.HTMLAttributes<HTMLElement>) => {
         let username = user?.username;
         let color;
 
@@ -108,18 +110,32 @@ export default function UserShort({
     const openProfile = () =>
         user && openScreen({ id: "profile", user_id: user._id });
 
+    const handleUserClick = (e: MouseEvent) => {
+        if (e.shiftKey && user?._id) {
+            e.preventDefault()
+            internalEmit(
+                "MessageBox",
+                "append",
+                `<@${user?._id}>`,
+                "mention",
+            );
+        } else {
+            openProfile()
+        }
+    }
+
     return (
         <>
             <UserIcon
                 size={size ?? 24}
                 target={user}
-                onClick={openProfile}
+                onClick={handleUserClick}
                 showServerIdentity={showServerIdentity}
             />
             <Username
                 user={user}
                 showServerIdentity={showServerIdentity}
-                onClick={openProfile}
+                onClick={handleUserClick}
                 prefixAt={prefixAt}
             />
         </>

src/components/navigation/right/MemberList.tsx

@@ -12,6 +12,7 @@ import {
 } from "../../../context/intermediate/Intermediate";
 
 import { UserButton } from "../items/ButtonItem";
+import { internalEmit } from "../../../lib/eventEmitter";
 
 export type MemberListGroup = {
     type: "online" | "offline" | "role";
@@ -53,12 +54,21 @@ const ItemContent = memo(
             user={item}
             margin
             context={context}
-            onClick={() =>
+            onClick={e => {
-                openScreen({
+                if (e.shiftKey) {
-                    id: "profile",
+                    internalEmit(
-                    user_id: item._id,
+                        "MessageBox",
-                })
+                        "append",
-            }
+                        `<@${item._id}>`,
+                        "mention",
+                    );
+                } else[
+                    openScreen({
+                        id: "profile",
+                        user_id: item._id,
+                    })
+                ]
+            }}
         />
     ),
 );