Add message reply UI.

external/lang

@@ -1 +1 @@
-Subproject commit f3d13c09b6fa2f28f027ce32643caffadbb63cf1
+Subproject commit 5e57b0f203f1c03c2942222b967288257c218a4e

src/components/common/messaging/Message.tsx

@@ -13,6 +13,7 @@ import Overline from "../../ui/Overline";
 import { useContext } from "preact/hooks";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { memo } from "preact/compat";
+import { MessageReply } from "./attachments/MessageReply";
 
 interface Props {
     attachContext?: boolean
@@ -30,33 +31,36 @@ function Message({ attachContext, message, contrast, content: replacement, head:
     const client = useContext(AppContext);
 
     const content = message.content as string;
-    const head = (message.replies && message.replies.length > 0) || preferHead;
+    const head = preferHead || (message.replies && message.replies.length > 0);
     return (
-        <MessageBase id={message._id}
+        <>
-            head={head}
+            { message.replies?.map((message_id, index) => <MessageReply index={index} id={message_id} channel={message.channel} />) }
-            contrast={contrast}
+            <MessageBase id={message._id}
-            sending={typeof queued !== 'undefined'}
+                head={head && !message.replies}
-            mention={message.mentions?.includes(client.user!._id)}
+                contrast={contrast}
-            failed={typeof queued?.error !== 'undefined'}
+                sending={typeof queued !== 'undefined'}
-            onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
+                mention={message.mentions?.includes(client.user!._id)}
-            <MessageInfo>
+                failed={typeof queued?.error !== 'undefined'}
-                { head ?
+                onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
-                    <UserIcon target={user} size={36} /> :
+                <MessageInfo>
-                    <MessageDetail message={message} position="left" /> }
+                    { head ?
-            </MessageInfo>
+                        <UserIcon target={user} size={36} /> :
-            <MessageContent>
+                        <MessageDetail message={message} position="left" /> }
-                { head && <span className="author">
+                </MessageInfo>
-                    <Username user={user} />
+                <MessageContent>
-                    <MessageDetail message={message} position="top" />
+                    { head && <span className="author">
-                </span> }
+                        <Username user={user} />
-                { replacement ?? <Markdown content={content} /> }
+                        <MessageDetail message={message} position="top" />
-                { queued?.error && <Overline type="error" error={queued.error} /> }
+                    </span> }
-                { message.attachments?.map((attachment, index) =>
+                    { replacement ?? <Markdown content={content} /> }
-                    <Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) }
+                    { queued?.error && <Overline type="error" error={queued.error} /> }
-                { message.embeds?.map((embed, index) =>
+                    { message.attachments?.map((attachment, index) =>
-                    <Embed key={index} embed={embed} />) }
+                        <Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) }
-            </MessageContent>
+                    { message.embeds?.map((embed, index) =>
-        </MessageBase>
+                        <Embed key={index} embed={embed} />) }
+                </MessageContent>
+            </MessageBase>
+        </>
     )
 }
 

src/components/common/messaging/MessageBox.tsx

@@ -4,8 +4,10 @@ import styled from "styled-components";
 import { defer } from "../../../lib/defer";
 import IconButton from "../../ui/IconButton";
 import { Send } from '@styled-icons/feather';
+import { debounce } from "../../../lib/debounce";
 import Axios, { CancelTokenSource } from "axios";
 import { useTranslation } from "../../../lib/i18n";
+import { Reply } from "../../../redux/reducers/queue";
 import { connectState } from "../../../redux/connector";
 import { WithDispatcher } from "../../../redux/reducers";
 import { takeError } from "../../../context/revoltjs/util";
@@ -18,8 +20,8 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { FileUploader, grabFiles, uploadFile } from "../../../context/revoltjs/FileUploads";
 import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton";
 
+import ReplyBar from "./bars/ReplyBar";
 import FilePreview from './bars/FilePreview';
-import { debounce } from "../../../lib/debounce";
 import AutoComplete, { useAutoComplete } from "../AutoComplete";
 
 type Props = WithDispatcher & {
@@ -55,7 +57,8 @@ export const CAN_UPLOAD_AT_ONCE = 5;
 
 function MessageBox({ channel, draft, dispatcher }: Props) {
     const [ uploadState, setUploadState ] = useState<UploadState>({ type: 'none' });
-    const [typing, setTyping] = useState<boolean | number>(false);
+    const [ typing, setTyping ] = useState<boolean | number>(false);
+    const [ replies, setReplies ] = useState<Reply[]>([]);
     const { openScreen } = useIntermediate();
     const client = useContext(AppContext);
     const translate = useTranslation();
@@ -104,6 +107,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
         
         stopTyping();
         setMessage();
+        setReplies([]);
 
         const nonce = ulid();
         dispatcher({
@@ -114,7 +118,9 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
                 _id: nonce,
                 channel: channel._id,
                 author: client.user!._id,
-                content
+                
+                content,
+                replies
             }
         });
 
@@ -123,7 +129,8 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
         try {
             await client.channels.sendMessage(channel._id, {
                 content,
-                nonce
+                nonce,
+                replies
             });
         } catch (error) {
             dispatcher({
@@ -186,7 +193,8 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
             await client.channels.sendMessage(channel._id, {
                 content,
                 nonce,
-                attachments // ! FIXME: temp, allow multiple uploads on server
+                replies,
+                attachments
             });
         } catch (err) {
             setUploadState({
@@ -199,6 +207,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
         }
 
         setMessage();
+        setReplies([]);
 
         if (files.length > CAN_UPLOAD_AT_ONCE) {
             setUploadState({
@@ -257,6 +266,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
                         setUploadState({ type: 'attached', files: uploadState.files.filter((_, i) => index !== i) });
                     }
                 }} />
+            <ReplyBar channel={channel._id} replies={replies} setReplies={setReplies} />
             <Base>
                 <Action>
                     <FileUploader

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

@@ -0,0 +1,65 @@
+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 { useUser } from "../../../../context/revoltjs/hooks";
+import { useRenderState } from "../../../../lib/renderer/Singleton";
+
+interface Props {
+    channel: string
+    index: number
+    id: string
+}
+
+export const ReplyBase = styled.div<{ head?: boolean, fail?: boolean, preview?: boolean }>`
+    gap: 4px;
+    display: flex;
+    font-size: 0.8em;
+    margin-left: 30px;
+    user-select: none;
+    margin-bottom: 4px;
+    align-items: center;
+    color: var(--secondary-foreground);
+
+    svg {
+        color: var(--tertiary-foreground);
+    }
+
+    ${ props => props.fail && css`
+        color: var(--tertiary-foreground);
+    ` }
+
+    ${ props => props.head && css`
+        margin-top: 12px;
+    ` }
+
+    ${ props => props.preview && css`
+        margin-left: 0;
+    ` }
+`;
+
+export function MessageReply({ index, channel, id }: Props) {
+    const view = useRenderState(channel);
+    if (view?.type !== 'RENDER') return null;
+
+    const message = view.messages.find(x => x._id === id);
+    if (!message) {
+        return (
+            <ReplyBase head={index === 0} fail>
+                <CornerUpRight size={16} />
+                <span><Text id="app.main.channel.misc.failed_load" /></span>
+            </ReplyBase>
+        )
+    }
+
+    const user = useUser(message.author);
+
+    return (
+        <ReplyBase head={index === 0}>
+            <CornerUpRight size={16} />
+            <UserShort user={user} size={16} />
+            <Markdown disallowBigEmoji content={(message.content as string).split('\n').shift()} />
+        </ReplyBase>
+    )
+}

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

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import UserShort from "../../user/UserShort";
+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";
+
+interface Props {
+    channel: string,
+    replies: Reply[],
+    setReplies: StateUpdater<Reply[]>
+}
+
+const Base = styled.div`
+    display: flex;
+    padding: 0 22px;
+    user-select: none;
+    align-items: center;
+    background: var(--message-box);
+
+    div {
+        flex-grow: 1;
+    }
+
+    .actions {
+        gap: 12px;
+        display: flex;
+    }
+    
+    .toggle {
+        gap: 4px;
+        display: flex;
+        font-size: 0.7em;
+        align-items: center;
+    }
+`;
+
+// ! FIXME: Move to global config
+const MAX_REPLIES = 5;
+export default function ReplyBar({ channel, replies, setReplies }: Props) {
+    useEffect(() => {
+        return internalSubscribe("ReplyBar", "add", id => replies.length < MAX_REPLIES && !replies.find(x => x.id === id) && setReplies([ ...replies, { id, mention: false } ]));
+    }, [ replies ]);
+
+    const view = useRenderState(channel);
+    if (view?.type !== 'RENDER') return null;
+
+    const ids = replies.map(x => x.id);
+    const messages = view.messages.filter(x => ids.includes(x._id));
+    const users = useUsers(messages.map(x => x.author));
+    
+    return (
+        <div>
+            { replies.map((reply, index) => {
+                let message = messages.find(x => reply.id === x._id);
+                if (!message) return;
+
+                let user = users.find(x => message!.author === x?._id);
+                if (!user) return;
+
+                return (
+                    <Base key={reply.id}>
+                        <ReplyBase preview>
+                            <CornerUpRight size={22} />
+                            <UserShort user={user} size={16} />
+                            <Markdown disallowBigEmoji content={(message.content as string).split('\n').shift()} />
+                        </ReplyBase>
+                        <span class="actions">
+                            <IconButton onClick={() => setReplies(replies.map((_, i) => i === index ? { ..._, mention: !_.mention } : _))}>
+                                <span class="toggle">
+                                    <AtSign size={16} /> { reply.mention ? 'ON' : 'OFF' }
+                                </span>
+                            </IconButton>
+                            <IconButton onClick={() => setReplies(replies.filter((_, i) => i !== index))}>
+                                <XCircle size={16} />
+                            </IconButton>
+                        </span>
+                    </Base>
+                )
+            }) }
+        </div>
+    )
+}

src/components/common/user/UserShort.tsx

@@ -6,9 +6,9 @@ export function Username({ user }: { user?: User }) {
     return <b>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</b>;
 }
 
-export default function UserShort({ user }: { user?: User }) {
+export default function UserShort({ user, size }: { user?: User, size?: number }) {
     return <>
-        <UserIcon size={24} target={user} />
+        <UserIcon size={size ?? 24} target={user} />
         <Username user={user} />
     </>;
 }

src/lib/ContextMenus.tsx

@@ -39,6 +39,7 @@ type Action =
     | { action: "retry_message"; message: QueuedMessage }
     | { action: "cancel_message"; message: QueuedMessage }
     | { action: "mention"; user: string }
+    | { action: "reply_message"; id: string }
     | { action: "quote_message"; content: string }
     | { action: "edit_message"; id: string }
     | { action: "delete_message"; target: Channels.Message }
@@ -120,8 +121,9 @@ function ContextMenus(props: WithDispatcher) {
                             .sendMessage(
                                 data.message.channel,
                                 {
+                                    nonce: data.message.id,
                                     content: data.message.data.content as string,
-                                    nonce
+                                    replies: data.message.data.replies
                                 }
                             )
                             .catch(fail);
@@ -156,6 +158,17 @@ function ContextMenus(props: WithDispatcher) {
                 case "copy_text":
                     writeClipboard(data.content);
                     break;
+
+                case "reply_message":
+                    {
+                        internalEmit(
+                            "ReplyBar",
+                            "add",
+                            data.id
+                        );
+                    }
+                    break;
+
                 case "quote_message":
                     {
                         internalEmit(
@@ -471,10 +484,16 @@ function ContextMenus(props: WithDispatcher) {
                             typeof message.content === "string" &&
                             message.content.length > 0
                         ) {
+                            generateAction({
+                                action: "reply_message",
+                                id: message._id
+                            });
+
                             generateAction({
                                 action: "quote_message",
                                 content: message.content
                             });
+
                             generateAction({
                                 action: "copy_text",
                                 content: message.content

src/lib/eventEmitter.ts

@@ -19,3 +19,4 @@ export function internalEmit(ns: string, event: string, ...args: any[]) {
 // - Intermediate/navigate
 // - MessageBox/append
 // - TextArea/focus
+// - ReplyBar/add

src/redux/reducers/queue.ts

@@ -5,10 +5,20 @@ export enum QueueStatus {
     ERRORED = "errored",
 }
 
+export interface Reply {
+    id: string,
+    mention: boolean
+}
+
+export type QueuedMessageData = Omit<MessageObject, 'content' | 'replies'> & {
+    content: string;
+    replies: Reply[];
+}
+
 export interface QueuedMessage {
     id: string;
     channel: string;
-    data: MessageObject;
+    data: QueuedMessageData;
     status: QueueStatus;
     error?: string;
 }
@@ -19,7 +29,7 @@ export type QueueAction =
           type: "QUEUE_ADD";
           nonce: string;
           channel: string;
-          message: MessageObject;
+          message: QueuedMessageData;
       }
     | {
           type: "QUEUE_FAIL";