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;
@@ -70,6 +71,19 @@ const Message = observer(
         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);
 
@@ -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
-    }: {
-        user?: User;
-        prefixAt?: boolean;
-        showServerIdentity?: boolean;
-    } & JSX.HTMLAttributes<HTMLElement>) => {
+    }: UsernameProps) => {
         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 => {
+                if (e.shiftKey) {
+                    internalEmit(
+                        "MessageBox",
+                        "append",
+                        `<@${item._id}>`,
+                        "mention",
+                    );
+                } else[
                     openScreen({
                         id: "profile",
                         user_id: item._id,
                     })
-            }
+                ]
+            }}
         />
     ),
 );