Include @ symbol when reply is a mention.

src/components/common/messaging/Message.tsx

@@ -81,6 +81,7 @@ const Message = observer(
                             index={index}
                             id={message_id}
                             channel={message.channel!}
+                            parent_mentions={message.mention_ids ?? []}
                         />
                     ))}
                 <MessageBase

src/components/common/messaging/attachments/MessageReply.tsx

@@ -18,6 +18,7 @@ import UserShort from "../../user/UserShort";
 import { SystemMessage } from "../SystemMessage";
 
 interface Props {
+    parent_mentions: string[];
     channel: Channel;
     index: number;
     id: string;
@@ -33,7 +34,6 @@ export const ReplyBase = styled.div<{
     display: flex;
     margin-inline-start: 30px;
     margin-inline-end: 12px;
-    /*margin-bottom: 4px;*/
     font-size: 0.8em;
     user-select: none;
     align-items: center;
@@ -137,7 +137,8 @@ export const ReplyBase = styled.div<{
         `}
 `;
 
-export const MessageReply = observer(({ index, channel, id }: Props) => {
+export const MessageReply = observer(
+    ({ index, channel, id, parent_mentions }: Props) => {
         const view = getRenderer(channel);
         if (view.state !== "RENDER") return null;
 
@@ -181,6 +182,9 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
                                         user={message.author}
                                         size={16}
                                         showServerIdentity
+                                        prefixAt={parent_mentions.includes(
+                                            message.author_id,
+                                        )}
                                     />
                                 </div>
                                 <div
@@ -188,7 +192,8 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
                                     onClick={() => {
                                         const channel = message.channel!;
                                         if (
-                                        channel.channel_type === "TextChannel"
+                                            channel.channel_type ===
+                                            "TextChannel"
                                         ) {
                                             history.push(
                                                 `/server/${channel.server_id}/channel/${channel._id}/${message._id}`,
@@ -203,7 +208,8 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
                                         <>
                                             <File size={16} />
                                             <em>
-                                            {message.attachments.length > 1 ? (
+                                                {message.attachments.length >
+                                                1 ? (
                                                     <Text id="app.main.channel.misc.sent_multiple_files" />
                                                 ) : (
                                                     <Text id="app.main.channel.misc.sent_file" />
@@ -224,4 +230,5 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
                 )}
             </ReplyBase>
         );
-});
+    },
+);

src/components/common/user/UserShort.tsx

@@ -28,10 +28,12 @@ const BotBadge = styled.div`
 export const Username = observer(
     ({
         user,
+        prefixAt,
         showServerIdentity,
         ...otherProps
     }: {
         user?: User;
+        prefixAt?: boolean;
         showServerIdentity?: boolean;
     } & JSX.HTMLAttributes<HTMLElement>) => {
         let username = user?.username;
@@ -84,6 +86,7 @@ export const Username = observer(
 
         return (
             <span {...otherProps} style={{ color }}>
+                {prefixAt ? "@" : undefined}
                 {username ?? <Text id="app.main.channel.unknown_user" />}
             </span>
         );
@@ -93,10 +96,12 @@ export const Username = observer(
 export default function UserShort({
     user,
     size,
+    prefixAt,
     showServerIdentity,
 }: {
     user?: User;
     size?: number;
+    prefixAt?: boolean;
     showServerIdentity?: boolean;
 }) {
     const { openScreen } = useIntermediate();
@@ -115,6 +120,7 @@ export default function UserShort({
                 user={user}
                 showServerIdentity={showServerIdentity}
                 onClick={openProfile}
+                prefixAt={prefixAt}
             />
         </>
     );