Refactor + add message box.

src/components/common/messaging/Message.tsx

@@ -1,5 +1,5 @@
-import UserIcon from "../UserIcon";
-import { Username } from "../UserShort";
+import UserIcon from "../user/UserIcon";
+import { Username } from "../user/UserShort";
 import Markdown from "../../markdown/Markdown";
 import { Children } from "../../../types/Preact";
 import { attachContextMenu } from "preact-context-menu";

src/components/common/messaging/MessageBox.tsx

@@ -0,0 +1,89 @@
+import { useContext } from "preact/hooks";
+import { Channel } from "revolt.js";
+import { ulid } from "ulid";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { takeError } from "../../../context/revoltjs/util";
+import { defer } from "../../../lib/defer";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton";
+import { connectState } from "../../../redux/connector";
+import { WithDispatcher } from "../../../redux/reducers";
+import TextArea from "../../ui/TextArea";
+
+type Props = WithDispatcher & {
+    channel: Channel;
+    draft?: string;
+};
+
+function MessageBox({ channel, draft, dispatcher }: Props) {
+    const client = useContext(AppContext);
+
+    function setMessage(content?: string) {
+        if (content) {
+            dispatcher({
+                type: "SET_DRAFT",
+                channel: channel._id,
+                content
+            });
+        } else {
+            dispatcher({
+                type: "CLEAR_DRAFT",
+                channel: channel._id
+            });
+        }
+    }
+
+    async function send() {
+        const nonce = ulid();
+
+        const content = draft?.trim() ?? '';
+        if (content.length === 0) return;
+
+        setMessage();
+        dispatcher({
+            type: "QUEUE_ADD",
+            nonce,
+            channel: channel._id,
+            message: {
+                _id: nonce,
+                channel: channel._id,
+                author: client.user!._id,
+                content
+            }
+        });
+
+        defer(() => SingletonMessageRenderer.jumpToBottom(channel._id, SMOOTH_SCROLL_ON_RECEIVE));
+        // Sounds.playOutbound();
+
+        try {
+            await client.channels.sendMessage(channel._id, {
+                content,
+                nonce
+            });
+        } catch (error) {
+            dispatcher({
+                type: "QUEUE_FAIL",
+                error: takeError(error),
+                nonce
+            });
+        }
+    }
+
+    return (
+        <TextArea
+            value={draft}
+            onKeyDown={e => {
+                if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
+                    e.preventDefault();
+                    return send();
+                }
+            }}
+            onChange={e => setMessage(e.currentTarget.value)} />
+    )
+}
+
+export default connectState<Omit<Props, "dispatcher" | "draft">>(MessageBox, (state, { channel }) => {
+    return {
+        draft: state.drafts[channel._id]
+    }
+}, true)

src/components/common/messaging/SystemMessage.tsx

@@ -4,9 +4,9 @@ import { attachContextMenu } from "preact-context-menu";
 import { MessageObject } from "../../../context/revoltjs/util";
 import { useForceUpdate, useUser } from "../../../context/revoltjs/hooks";
 import { TextReact } from "../../../lib/i18n";
-import UserIcon from "../UserIcon";
-import Username from "../UserShort";
-import UserShort from "../UserShort";
+import UserIcon from "../user/UserIcon";
+import Username from "../user/UserShort";
+import UserShort from "../user/UserShort";
 import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
 import styled from "styled-components";