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) =>

src/components/common/messaging/MessageBase.tsx

@@ -7,7 +7,7 @@ import { MessageObject } from "../../../context/revoltjs/util";
 
 export interface BaseMessageProps {
     head?: boolean,
-    status?: boolean,
+    failed?: boolean,
     mention?: boolean,
     blocked?: boolean,
     sending?: boolean,
@@ -49,7 +49,7 @@ export default styled.div<BaseMessageProps>`
         color: var(--tertiary-foreground);
     ` }
 
-    ${ props => props.status && css`
+    ${ props => props.failed && css`
         color: var(--error);
     ` }
 

src/components/common/messaging/MessageBox.tsx

@@ -19,6 +19,7 @@ import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib
 
 import FilePreview from './bars/FilePreview';
 import { debounce } from "../../../lib/debounce";
+import { internalEmit } from "../../../lib/eventEmitter";
 
 type Props = WithDispatcher & {
     channel: Channel;
@@ -237,11 +238,22 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
                     />
                 </Action>
                 <TextAreaAutoSize
+                    autoFocus
                     hideBorder
                     maxRows={5}
                     padding={15}
+                    id="message"
                     value={draft ?? ''}
                     onKeyDown={e => {
+                        if (
+                            e.key === "ArrowUp" &&
+                            (!draft || draft.length === 0)
+                        ) {
+                            e.preventDefault();
+                            internalEmit("MessageRenderer", "edit_last");
+                            return;
+                        }
+
                         if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
                             e.preventDefault();
                             return send();