diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx index d504f9667c268b46fdc491861035779d790ab6bb..0c53694936b6d4b4c203689a75081701b63c4610 100644 --- a/src/components/common/messaging/Message.tsx +++ b/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> ) } diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx index 0d7c0691c9653f6da80097087e168d1dd760fb8b..74952ea2eed6ae95817156e93baea825e6b4720f 100644 --- a/src/components/common/messaging/attachments/MessageReply.tsx +++ b/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> ) } diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx index 33a2da4f1f9b70cdefa5c47a98fa2d609cc9fa33..bfc550e48d6ff5f50f5a641ad3c329ab6e1d0642 100644 --- a/src/components/common/messaging/bars/ReplyBar.tsx +++ b/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 } : _))}> diff --git a/src/lib/ContextMenus.tsx b/src/lib/ContextMenus.tsx index 875e9a4403d490d7034022f871b331a73f6994ff..3636bdffcc44756a0ba9e12b1ebf4493d594c2ec 100644 --- a/src/lib/ContextMenus.tsx +++ b/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