Show errors / queue on message.

Focus editor / box properly.

src/components/common/messaging/Message.tsx

@@ -6,18 +6,21 @@ import { Children } from "../../../types/Preact";
 import Attachment from "./attachments/Attachment";
 import { attachContextMenu } from "preact-context-menu";
 import { useUser } from "../../../context/revoltjs/hooks";
+import { QueuedMessage } from "../../../redux/reducers/queue";
 import { MessageObject } from "../../../context/revoltjs/util";
 import MessageBase, { MessageContent, MessageDetail, MessageInfo } from "./MessageBase";
+import Overline from "../../ui/Overline";
 
 interface Props {
     attachContext?: boolean
+    queued?: QueuedMessage
     message: MessageObject
     contrast?: boolean
     content?: Children
     head?: boolean
 }
 
-export default function Message({ attachContext, message, contrast, content: replacement, head }: Props) {
+export default function Message({ attachContext, message, contrast, content: replacement, head, queued }: Props) {
     // TODO: Can improve re-renders here by providing a list
     // TODO: of dependencies. We only need to update on u/avatar.
     let user = useUser(message.author);
@@ -25,9 +28,11 @@ export default function Message({ attachContext, message, contrast, content: rep
     const content = message.content as string;
     return (
         <MessageBase id={message._id}
-            contrast={contrast}
             head={head}
-            onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel }) : undefined}>
+            contrast={contrast}
+            sending={typeof queued !== 'undefined'}
+            failed={typeof queued?.error !== 'undefined'}
+            onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
             <MessageInfo>
                 { head ?
                     <UserIcon target={user} size={36} /> :
@@ -39,6 +44,7 @@ export default function Message({ attachContext, message, contrast, content: rep
                     <MessageDetail message={message} position="top" />
                 </span> }
                 { replacement ?? <Markdown content={content} /> }
+                { queued?.error && <Overline type="error" error={queued.error} /> }
                 { message.attachments?.map((attachment, index) =>
                     <Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) }
                 { message.embeds?.map((embed, index) =>