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";
 

src/components/common/user/UserCheckbox.tsx

@@ -1,6 +1,6 @@
 import { User } from "revolt.js";
 import UserIcon from "./UserIcon";
-import Checkbox, { CheckboxProps } from "../ui/Checkbox";
+import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
 
 type UserProps = Omit<CheckboxProps, "children"> & { user: User };
 

src/components/common/user/UserHeader.tsx

@@ -1,17 +1,17 @@
-import Tooltip from "./Tooltip";
+import Tooltip from "../Tooltip";
 import { User } from "revolt.js";
-import Header from "../ui/Header";
 import UserIcon from "./UserIcon";
 import { Text } from "preact-i18n";
+import Header from "../../ui/Header";
 import UserStatus from './UserStatus';
 import styled from "styled-components";
 import { Localizer } from 'preact-i18n';
 import { Link } from "react-router-dom";
-import IconButton from "../ui/IconButton";
+import IconButton from "../../ui/IconButton";
 import { Settings } from "@styled-icons/feather";
 import { openContextMenu } from "preact-context-menu";
-import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
-import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 const HeaderBase = styled.div`
     gap: 0;

src/components/common/user/UserIcon.tsx

@@ -2,10 +2,10 @@ import { User } from "revolt.js";
 import { useContext } from "preact/hooks";
 import { MicOff } from "@styled-icons/feather";
 import styled, { css } from "styled-components";
-import { ThemeContext } from "../../context/Theme";
 import { Users } from "revolt.js/dist/api/objects";
-import IconBase, { IconBaseProps } from "./IconBase";
-import { AppContext } from "../../context/revoltjs/RevoltClient";
+import { ThemeContext } from "../../../context/Theme";
+import IconBase, { IconBaseProps } from "../IconBase";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 type VoiceStatus = "muted";
 interface Props extends IconBaseProps<User> {
@@ -47,7 +47,7 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
     ` }
 `;
 
-import fallback from './assets/user.png';
+import fallback from '../assets/user.png';
 
 export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
     const client = useContext(AppContext);