Support replying to files, show icon in reply.

src/components/common/messaging/Message.tsx

@@ -35,9 +35,9 @@ function Message({ attachContext, message, contrast, content: replacement, head:
     const userContext = attachContext ? attachContextMenu('Menu', { user: message.author, contextualChannel: message.channel }) : undefined as any; // ! FIXME: tell fatal to make this type generic
 
     return (
-        <>
+        <div id={message._id}>
             { message.replies?.map((message_id, index) => <MessageReply index={index} id={message_id} channel={message.channel} />) }
-            <MessageBase id={message._id}
+            <MessageBase
                 head={head && !(message.replies && message.replies.length > 0)}
                 contrast={contrast}
                 sending={typeof queued !== 'undefined'}
@@ -64,7 +64,7 @@ function Message({ attachContext, message, contrast, content: replacement, head:
                         <Embed key={index} embed={embed} />) }
                 </MessageContent>
             </MessageBase>
-        </>
+        </div>
     )
 }
 

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

@@ -2,7 +2,7 @@ import { Text } from "preact-i18n";
 import UserShort from "../../user/UserShort";
 import styled, { css } from "styled-components";
 import Markdown from "../../../markdown/Markdown";
-import { CornerUpRight } from "@styled-icons/feather";
+import { CornerUpRight, File } from "@styled-icons/feather";
 import { useUser } from "../../../../context/revoltjs/hooks";
 import { useRenderState } from "../../../../lib/renderer/Singleton";
 
@@ -22,7 +22,12 @@ export const ReplyBase = styled.div<{ head?: boolean, fail?: boolean, preview?:
     align-items: center;
     color: var(--secondary-foreground);
 
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
     svg {
+        flex-shrink: 0;
         color: var(--tertiary-foreground);
     }
 
@@ -59,7 +64,8 @@ export function MessageReply({ index, channel, id }: Props) {
         <ReplyBase head={index === 0}>
             <CornerUpRight size={16} />
             <UserShort user={user} size={16} />
-            <Markdown disallowBigEmoji content={(message.content as string).split('\n').shift()} />
+            { message.attachments && message.attachments.length > 0 && <File size={16} /> }
+            <Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />
         </ReplyBase>
     )
 }

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

@@ -1,14 +1,15 @@
+import { Text } from "preact-i18n";
 import styled from "styled-components";
 import UserShort from "../../user/UserShort";
+import IconButton from "../../../ui/IconButton";
 import Markdown from "../../../markdown/Markdown";
-import { AtSign, CornerUpRight, XCircle } from "@styled-icons/feather";
 import { StateUpdater, useEffect } from "preact/hooks";
 import { ReplyBase } from "../attachments/MessageReply";
 import { Reply } from "../../../../redux/reducers/queue";
 import { useUsers } from "../../../../context/revoltjs/hooks";
 import { internalSubscribe } from "../../../../lib/eventEmitter";
 import { useRenderState } from "../../../../lib/renderer/Singleton";
-import IconButton from "../../../ui/IconButton";
+import { AtSign, CornerUpRight, File, XCircle } from "@styled-icons/feather";
 
 interface Props {
     channel: string,
@@ -58,7 +59,11 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
         <div>
             { replies.map((reply, index) => {
                 let message = messages.find(x => reply.id === x._id);
-                if (!message) return;
+                // ! FIXME: better solution would be to
+                // ! have a hook for resolving messages from 
+                // ! render state along with relevant users
+                // -> which then fetches any unknown messages
+                if (!message) return <span><Text id="app.main.channel.misc.failed_load" /></span>;
 
                 let user = users.find(x => message!.author === x?._id);
                 if (!user) return;
@@ -68,7 +73,8 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
                         <ReplyBase preview>
                             <CornerUpRight size={22} />
                             <UserShort user={user} size={16} />
-                            <Markdown disallowBigEmoji content={(message.content as string).split('\n').shift()} />
+                            { message.attachments && message.attachments.length > 0 && <File size={16} /> }
+                            <Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />
                         </ReplyBase>
                         <span class="actions">
                             <IconButton onClick={() => setReplies(replies.map((_, i) => i === index ? { ..._, mention: !_.mention } : _))}>

src/lib/ContextMenus.tsx

@@ -502,15 +502,15 @@ function ContextMenus(props: Props) {
                     }
 
                     if (message && !queued) {
+                        generateAction({
+                            action: "reply_message",
+                            id: message._id
+                        });
+                        
                         if (
                             typeof message.content === "string" &&
                             message.content.length > 0
                         ) {
-                            generateAction({
-                                action: "reply_message",
-                                id: message._id
-                            });
-
                             generateAction({
                                 action: "quote_message",
                                 content: message.content