From 9e460c5b3da63c9e70b27e2b855e731f06048852 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 20 Jun 2021 20:30:42 +0100
Subject: [PATCH] Refactor + add message box.

---
 src/components/common/messaging/Message.tsx   |  4 +-
 .../common/messaging/MessageBox.tsx           | 89 +++++++++++++++++++
 .../common/messaging/SystemMessage.tsx        |  6 +-
 .../common/{ => user}/UserCheckbox.tsx        |  2 +-
 .../common/{ => user}/UserHeader.tsx          | 10 +--
 src/components/common/{ => user}/UserIcon.tsx |  8 +-
 .../common/{ => user}/UserShort.tsx           |  0
 .../common/{ => user}/UserStatus.tsx          |  0
 .../navigation/items/ButtonItem.tsx           |  4 +-
 .../navigation/left/HomeSidebar.tsx           | 32 ++++---
 src/components/ui/TextArea.tsx                | 43 +++++++--
 src/context/intermediate/modals/Prompt.tsx    |  6 +-
 .../intermediate/popovers/UserPicker.tsx      |  2 +-
 .../intermediate/popovers/UserProfile.tsx     | 22 ++---
 src/context/revoltjs/CheckAuth.tsx            |  4 +-
 src/context/revoltjs/hooks.ts                 | 13 ++-
 src/lib/defer.ts                              |  3 +
 src/pages/channels/Channel.tsx                |  2 +
 src/pages/friends/Friend.tsx                  |  4 +-
 src/pages/settings/Settings.module.scss       | 22 -----
 src/pages/settings/SettingsTextArea.tsx       |  6 --
 src/pages/settings/channel/Overview.tsx       | 12 +--
 src/pages/settings/panes/Account.tsx          |  6 +-
 src/pages/settings/panes/Appearance.tsx       | 11 +--
 src/pages/settings/panes/Feedback.tsx         |  8 +-
 src/pages/settings/panes/Profile.tsx          | 12 +--
 src/pages/settings/server/Invites.tsx         |  2 +-
 src/pages/settings/server/Overview.tsx        | 12 +--
 28 files changed, 225 insertions(+), 120 deletions(-)
 create mode 100644 src/components/common/messaging/MessageBox.tsx
 rename src/components/common/{ => user}/UserCheckbox.tsx (85%)
 rename src/components/common/{ => user}/UserHeader.tsx (88%)
 rename src/components/common/{ => user}/UserIcon.tsx (92%)
 rename src/components/common/{ => user}/UserShort.tsx (100%)
 rename src/components/common/{ => user}/UserStatus.tsx (100%)
 create mode 100644 src/lib/defer.ts
 delete mode 100644 src/pages/settings/SettingsTextArea.tsx

diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx
index 03c13596..dfe9793d 100644
--- a/src/components/common/messaging/Message.tsx
+++ b/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";
diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
new file mode 100644
index 00000000..ae980526
--- /dev/null
+++ b/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)
diff --git a/src/components/common/messaging/SystemMessage.tsx b/src/components/common/messaging/SystemMessage.tsx
index c867f915..26de5f59 100644
--- a/src/components/common/messaging/SystemMessage.tsx
+++ b/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";
 
diff --git a/src/components/common/UserCheckbox.tsx b/src/components/common/user/UserCheckbox.tsx
similarity index 85%
rename from src/components/common/UserCheckbox.tsx
rename to src/components/common/user/UserCheckbox.tsx
index 35577ebc..05cb69f7 100644
--- a/src/components/common/UserCheckbox.tsx
+++ b/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 };
 
diff --git a/src/components/common/UserHeader.tsx b/src/components/common/user/UserHeader.tsx
similarity index 88%
rename from src/components/common/UserHeader.tsx
rename to src/components/common/user/UserHeader.tsx
index 6a8265e3..848e8ce8 100644
--- a/src/components/common/UserHeader.tsx
+++ b/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;
diff --git a/src/components/common/UserIcon.tsx b/src/components/common/user/UserIcon.tsx
similarity index 92%
rename from src/components/common/UserIcon.tsx
rename to src/components/common/user/UserIcon.tsx
index 5e9243fd..65418b71 100644
--- a/src/components/common/UserIcon.tsx
+++ b/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);
diff --git a/src/components/common/UserShort.tsx b/src/components/common/user/UserShort.tsx
similarity index 100%
rename from src/components/common/UserShort.tsx
rename to src/components/common/user/UserShort.tsx
diff --git a/src/components/common/UserStatus.tsx b/src/components/common/user/UserStatus.tsx
similarity index 100%
rename from src/components/common/UserStatus.tsx
rename to src/components/common/user/UserStatus.tsx
diff --git a/src/components/navigation/items/ButtonItem.tsx b/src/components/navigation/items/ButtonItem.tsx
index bcbd59aa..4f5064e8 100644
--- a/src/components/navigation/items/ButtonItem.tsx
+++ b/src/components/navigation/items/ButtonItem.tsx
@@ -2,12 +2,12 @@ import classNames from 'classnames';
 import styles from "./Item.module.scss";
 import Tooltip from '../../common/Tooltip';
 import IconButton from '../../ui/IconButton';
-import UserIcon from '../../common/UserIcon';
 import { Localizer, Text } from "preact-i18n";
 import { X, Zap } from "@styled-icons/feather";
-import UserStatus from '../../common/UserStatus';
 import { Children } from "../../../types/Preact";
+import UserIcon from '../../common/user/UserIcon';
 import ChannelIcon from '../../common/ChannelIcon';
+import UserStatus from '../../common/user/UserStatus';
 import { attachContextMenu } from 'preact-context-menu';
 import { Channels, Users } from "revolt.js/dist/api/objects";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
diff --git a/src/components/navigation/left/HomeSidebar.tsx b/src/components/navigation/left/HomeSidebar.tsx
index a3082f35..9c6cf7a4 100644
--- a/src/components/navigation/left/HomeSidebar.tsx
+++ b/src/components/navigation/left/HomeSidebar.tsx
@@ -2,23 +2,23 @@ import { Localizer, Text } from "preact-i18n";
 import { useContext } from "preact/hooks";
 import { Home, Users, Tool, Save } from "@styled-icons/feather";
 
-import { Link, Redirect, useLocation, useParams } from "react-router-dom";
-import { WithDispatcher } from "../../../redux/reducers";
-import { Unreads } from "../../../redux/reducers/unreads";
-import { connectState } from "../../../redux/connector";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import { useChannels, useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
-import { Users as UsersNS } from 'revolt.js/dist/api/objects';
-import { mapChannelWithUnread, useUnreads } from "./common";
-import { Channels } from "revolt.js/dist/api/objects";
-import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
-import ConnectionStatus from '../items/ConnectionStatus';
-import ButtonItem, { ChannelButton } from '../items/ButtonItem';
 import styled from "styled-components";
-import UserHeader from "../../common/UserHeader";
 import Category from '../../ui/Category';
 import PaintCounter from "../../../lib/PaintCounter";
+import UserHeader from "../../common/user/UserHeader";
+import { Channels } from "revolt.js/dist/api/objects";
+import { connectState } from "../../../redux/connector";
+import ConnectionStatus from '../items/ConnectionStatus';
+import { WithDispatcher } from "../../../redux/reducers";
+import { Unreads } from "../../../redux/reducers/unreads";
+import { mapChannelWithUnread, useUnreads } from "./common";
+import { Users as UsersNS } from 'revolt.js/dist/api/objects';
+import ButtonItem, { ChannelButton } from '../items/ButtonItem';
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { Link, Redirect, useLocation, useParams } from "react-router-dom";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
 
 type Props = WithDispatcher & {
     unreads: Unreads;
@@ -126,7 +126,11 @@ function HomeSidebar(props: Props) {
                     let user;
                     if (x.channel_type === 'DirectMessage') {
                         let recipient = client.channels.getRecipient(x._id);
-                        user = users.find(x => x!._id === recipient);
+                        user = users.find(x => x?._id === recipient);
+                        if (!user) {
+                            console.warn(`Skipped DM ${x._id} because user was missing.`);
+                            return null;
+                        }
                     }
                     
                     return (
diff --git a/src/components/ui/TextArea.tsx b/src/components/ui/TextArea.tsx
index d88dcb7b..ed15695f 100644
--- a/src/components/ui/TextArea.tsx
+++ b/src/components/ui/TextArea.tsx
@@ -1,12 +1,37 @@
-// ! FIXME: temporarily here until re-written
-// ! DO NOT IMRPOVE, JUST RE-WRITE
+// import classNames from "classnames";
+// import { memo } from "preact/compat";
+// import styles from "./TextArea.module.scss";
+// import { useState, useEffect, useRef, useLayoutEffect } from "preact/hooks";
+import styled, { css } from "styled-components";
 
-import classNames from "classnames";
-import { memo } from "preact/compat";
-import styles from "./TextArea.module.scss";
-import { useState, useEffect, useRef, useLayoutEffect } from "preact/hooks";
+interface Props {
+    code?: boolean;
+}
 
-export interface TextAreaProps {
+export default styled.textarea<Props>`
+    width: 100%;
+    resize: none;
+    display: block;
+    border-radius: 4px;
+
+    color: var(--foreground);
+    border: 2px solid transparent;
+    background: var(--secondary-background);
+    transition: border-color .2s ease-in-out;
+
+    &:focus {
+        outline: none;
+        border: 2px solid var(--accent);
+    }
+
+    ${ props => props.code ? css`
+        font-family: 'Fira Mono', 'Courier New', Courier, monospace;
+    ` : css`
+        font-family: 'Open Sans', sans-serif;
+    ` }
+`;
+
+/*export interface TextAreaProps {
     id?: string;
     value: string;
     maxRows?: number;
@@ -30,7 +55,7 @@ export interface TextAreaProps {
 
 const lineHeight = 20;
 
-export const TextArea = memo((props: TextAreaProps) => {
+export const TextAreaB = memo((props: TextAreaProps) => {
     const padding = props.padding ? props.padding * 2 : 0;
 
     const [height, setHeightState] = useState(
@@ -143,4 +168,4 @@ export const TextArea = memo((props: TextAreaProps) => {
             </div>
         </div>
     );
-});
+});*/
diff --git a/src/context/intermediate/modals/Prompt.tsx b/src/context/intermediate/modals/Prompt.tsx
index 3a1dac54..1a48e624 100644
--- a/src/context/intermediate/modals/Prompt.tsx
+++ b/src/context/intermediate/modals/Prompt.tsx
@@ -4,12 +4,12 @@ import { Children } from "../../../types/Preact";
 import { useIntermediate } from "../Intermediate";
 import InputBox from "../../../components/ui/InputBox";
 import Overline from "../../../components/ui/Overline";
-import UserIcon from "../../../components/common/UserIcon";
+import { AppContext } from "../../revoltjs/RevoltClient";
+import { mapMessage, takeError } from "../../revoltjs/util";
 import Modal, { Action } from "../../../components/ui/Modal";
 import { Channels, Servers } from "revolt.js/dist/api/objects";
 import { useContext, useEffect, useState } from "preact/hooks";
-import { AppContext } from "../../revoltjs/RevoltClient";
-import { mapMessage, takeError } from "../../revoltjs/util";
+import UserIcon from "../../../components/common/user/UserIcon";
 import Message from "../../../components/common/messaging/Message";
 
 interface Props {
diff --git a/src/context/intermediate/popovers/UserPicker.tsx b/src/context/intermediate/popovers/UserPicker.tsx
index 9c2a8e60..b4ab76ca 100644
--- a/src/context/intermediate/popovers/UserPicker.tsx
+++ b/src/context/intermediate/popovers/UserPicker.tsx
@@ -4,7 +4,7 @@ import styles from "./UserPicker.module.scss";
 import { useUsers } from "../../revoltjs/hooks";
 import Modal from "../../../components/ui/Modal";
 import { User, Users } from "revolt.js/dist/api/objects";
-import UserCheckbox from "../../../components/common/UserCheckbox";
+import UserCheckbox from "../../../components/common/user/UserCheckbox";
 
 interface Props {
     omit?: string[];
diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx
index 0a11cfd8..2b37ee7c 100644
--- a/src/context/intermediate/popovers/UserProfile.tsx
+++ b/src/context/intermediate/popovers/UserProfile.tsx
@@ -1,22 +1,22 @@
-import Modal from "../../../components/ui/Modal";
+import { decodeTime } from "ulid";
 import { Localizer, Text } from "preact-i18n";
 import styles from "./UserProfile.module.scss";
-import Preloader from "../../../components/ui/Preloader";
+import Modal from "../../../components/ui/Modal";
 import { Route } from "revolt.js/dist/api/routes";
 import { Users } from "revolt.js/dist/api/objects";
-import { IntermediateContext, useIntermediate } from "../Intermediate";
-import { Globe, Mail, Edit, UserPlus, Shield } from "@styled-icons/feather";
+import { useIntermediate } from "../Intermediate";
 import { Link, useHistory } from "react-router-dom";
-import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
-import { decodeTime } from "ulid";
 import { CashStack } from "@styled-icons/bootstrap";
-import { AppContext, ClientStatus, StatusContext } from "../../revoltjs/RevoltClient";
-import { useChannels, useForceUpdate, useUser, useUsers } from "../../revoltjs/hooks";
-import UserIcon from '../../../components/common/UserIcon';
-import UserStatus from '../../../components/common/UserStatus';
+import Preloader from "../../../components/ui/Preloader";
 import Tooltip from '../../../components/common/Tooltip';
-import ChannelIcon from '../../../components/common/ChannelIcon';
 import Markdown from '../../../components/markdown/Markdown';
+import UserIcon from '../../../components/common/user/UserIcon';
+import ChannelIcon from '../../../components/common/ChannelIcon';
+import UserStatus from '../../../components/common/user/UserStatus';
+import { Mail, Edit, UserPlus, Shield } from "@styled-icons/feather";
+import { useChannels, useForceUpdate, useUsers } from "../../revoltjs/hooks";
+import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
+import { AppContext, ClientStatus, StatusContext } from "../../revoltjs/RevoltClient";
 
 interface Props {
     user_id: string;
diff --git a/src/context/revoltjs/CheckAuth.tsx b/src/context/revoltjs/CheckAuth.tsx
index f084e933..1951985e 100644
--- a/src/context/revoltjs/CheckAuth.tsx
+++ b/src/context/revoltjs/CheckAuth.tsx
@@ -1,12 +1,12 @@
-import { ReactNode } from "react";
 import { useContext } from "preact/hooks";
 import { Redirect } from "react-router-dom";
+import { Children } from "../../types/Preact";
 
 import { OperationsContext } from "./RevoltClient";
 
 interface Props {
     auth?: boolean;
-    children: ReactNode | ReactNode[];
+    children: Children;
 }
 
 export const CheckAuth = (props: Props) => {
diff --git a/src/context/revoltjs/hooks.ts b/src/context/revoltjs/hooks.ts
index bb9fae13..e5e25a86 100644
--- a/src/context/revoltjs/hooks.ts
+++ b/src/context/revoltjs/hooks.ts
@@ -11,8 +11,17 @@ export interface HookContext {
 export function useForceUpdate(context?: HookContext): HookContext {
     const client = useContext(AppContext);
     if (context) return context;
-    const [, updateState] = useState({});
-    return { client, forceUpdate: useCallback(() => updateState({}), []) };
+    const H = useState(undefined);
+    var updateState: (_: undefined) => void;
+    if (Array.isArray(H)) {
+        let [, u] = H;
+        updateState = u;
+    } else {
+        console.warn('Failed to construct using useState.');
+        console.warn(H);
+        updateState = ()=>{};
+    }
+    return { client, forceUpdate: useCallback(() => updateState(undefined), []) };
 }
 
 function useObject(type: string, id?: string | string[], context?: HookContext) {
diff --git a/src/lib/defer.ts b/src/lib/defer.ts
new file mode 100644
index 00000000..2ad2d46c
--- /dev/null
+++ b/src/lib/defer.ts
@@ -0,0 +1,3 @@
+export function defer(cb: () => void) {
+    setTimeout(cb, 0);
+}
diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx
index 4c731ce5..5e4ec842 100644
--- a/src/pages/channels/Channel.tsx
+++ b/src/pages/channels/Channel.tsx
@@ -4,6 +4,7 @@ import Header from "../../components/ui/Header";
 import { useRenderState } from "../../lib/renderer/Singleton";
 import { useChannel, useForceUpdate, useUsers } from "../../context/revoltjs/hooks";
 import { MessageArea } from "./messaging/MessageArea";
+import MessageBox from "../../components/common/messaging/MessageBox";
 
 const ChannelMain = styled.div`
     flex-grow: 1;
@@ -37,6 +38,7 @@ export default function Channel() {
             <ChannelMain>
                 <ChannelContent>
                     <MessageArea id={id} />
+                    <MessageBox channel={channel} />
                 </ChannelContent>
             </ChannelMain>
         </>
diff --git a/src/pages/friends/Friend.tsx b/src/pages/friends/Friend.tsx
index d27ee852..bcacd299 100644
--- a/src/pages/friends/Friend.tsx
+++ b/src/pages/friends/Friend.tsx
@@ -4,12 +4,12 @@ import styles from "./Friend.module.scss";
 import { useContext } from "preact/hooks";
 import { Children } from "../../types/Preact";
 import { X, Plus, Mail } from "@styled-icons/feather";
-import UserIcon from "../../components/common/UserIcon";
 import IconButton from "../../components/ui/IconButton";
 import { attachContextMenu } from "preact-context-menu";
 import { User, Users } from "revolt.js/dist/api/objects";
-import UserStatus from '../../components/common/UserStatus';
 import { stopPropagation } from "../../lib/stopPropagation";
+import UserIcon from "../../components/common/user/UserIcon";
+import UserStatus from '../../components/common/user/UserStatus';
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index 9497a959..dcb24eb4 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -185,25 +185,3 @@
         margin: auto;
     }
 }
-
-.textarea {
-    margin-bottom: 1em;
-    border-radius: 4px;
-    font-family: 'Courier New', Courier, monospace;
-
-    textarea {
-        resize: none;
-        padding: 12px;
-        min-height: 180px;
-        border-radius: 4px;
-        color: var(--foreground);
-        border: 2px solid transparent;
-        background: var(--secondary-background);
-        transition: border-color .2s ease-in-out;
-
-        &:focus {
-            outline: none;
-            border: 2px solid var(--accent);
-        }
-    }
-}
diff --git a/src/pages/settings/SettingsTextArea.tsx b/src/pages/settings/SettingsTextArea.tsx
deleted file mode 100644
index 2cf4a64a..00000000
--- a/src/pages/settings/SettingsTextArea.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import styles from "./Settings.module.scss";
-import { TextArea, TextAreaProps } from "../../components/ui/TextArea";
-
-export function SettingsTextArea(props: TextAreaProps) {
-    return <TextArea {...props} className={styles.textarea} padding={16} />;
-}
diff --git a/src/pages/settings/channel/Overview.tsx b/src/pages/settings/channel/Overview.tsx
index 22eedca2..a73a3fde 100644
--- a/src/pages/settings/channel/Overview.tsx
+++ b/src/pages/settings/channel/Overview.tsx
@@ -3,7 +3,7 @@ import styles from "./Panes.module.scss";
 import Button from "../../../components/ui/Button";
 import { Channels } from "revolt.js/dist/api/objects";
 import InputBox from "../../../components/ui/InputBox";
-import { SettingsTextArea } from "../SettingsTextArea";
+import TextArea from "../../../components/ui/TextArea";
 import { useContext, useEffect, useState } from "preact/hooks";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
@@ -70,14 +70,14 @@ export function Overview({ channel }: Props) {
                     <Text id="app.main.groups.description" /> :
                     <Text id="app.main.servers.channel_description" /> }
             </h3>
-            <SettingsTextArea
-                maxRows={10}
-                minHeight={60}
+            <TextArea
+                // maxRows={10}
+                // minHeight={60}
                 maxLength={1024}
                 value={description}
                 placeholder={"Add a description..."}
-                onChange={content => {
-                    setDescription(content);
+                onChange={ev => {
+                    setDescription(ev.currentTarget.value);
                     if (!changed) setChanged(true)
                 }}
             />
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index 6147c25a..b3f7e61c 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -6,11 +6,11 @@ import { Users } from "revolt.js/dist/api/objects";
 import { Link, useHistory } from "react-router-dom";
 import Overline from "../../../components/ui/Overline";
 import { AtSign, Key, Mail } from "@styled-icons/feather";
-import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
-import UserIcon from "../../../components/common/UserIcon";
 import { useContext, useEffect, useState } from "preact/hooks";
-import { ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
+import UserIcon from "../../../components/common/user/UserIcon";
+import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
 
 export function Account() {
     const { openScreen } = useIntermediate();
diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index a7466143..4fa442ef 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -2,8 +2,8 @@ import { Text } from "preact-i18n";
 import styles from "./Panes.module.scss";
 import { debounce } from "../../../lib/debounce";
 import Button from "../../../components/ui/Button";
+import TextArea from "../../../components/ui/TextArea";
 import InputBox from "../../../components/ui/InputBox";
-import { SettingsTextArea } from "../SettingsTextArea";
 import { connectState } from "../../../redux/connector";
 import { WithDispatcher } from "../../../redux/reducers";
 import ColourSwatches from "../../../components/ui/ColourSwatches";
@@ -267,11 +267,12 @@ export function Component(props: Props & WithDispatcher) {
                 <h3>
                     <Text id="app.settings.pages.appearance.custom_css" />
                 </h3>
-                <SettingsTextArea
-                    maxRows={20}
-                    minHeight={480}
+                <TextArea
+                    // maxRows={20}
+                    // minHeight={480}
+                    code
                     value={css}
-                    onChange={css => setCSS(css)}
+                    onChange={ev => setCSS(ev.currentTarget.value)}
                 />
             </details>
 
diff --git a/src/pages/settings/panes/Feedback.tsx b/src/pages/settings/panes/Feedback.tsx
index bda00cd2..a54c087d 100644
--- a/src/pages/settings/panes/Feedback.tsx
+++ b/src/pages/settings/panes/Feedback.tsx
@@ -4,7 +4,7 @@ import { Localizer, Text } from "preact-i18n";
 import Radio from "../../../components/ui/Radio";
 import Button from "../../../components/ui/Button";
 import InputBox from "../../../components/ui/InputBox";
-import { SettingsTextArea } from "../SettingsTextArea";
+import TextArea from "../../../components/ui/TextArea";
 import { useSelf } from "../../../context/revoltjs/hooks";
 
 export function Feedback() {
@@ -80,12 +80,12 @@ export function Feedback() {
             <h3>
                 <Text id="app.settings.pages.feedback.describe" />
             </h3>
-            <SettingsTextArea
-                maxRows={10}
+            <TextArea
+                // maxRows={10}
                 value={description}
                 id="entry.685672624"
                 disabled={state === "sending"}
-                onChange={value => setDescription(value)}
+                onChange={ev => setDescription(ev.currentTarget.value)}
             />
             <Button type="submit" contrast>
                 <Text id="app.settings.pages.feedback.send" />
diff --git a/src/pages/settings/panes/Profile.tsx b/src/pages/settings/panes/Profile.tsx
index c87287f9..aab0ae0b 100644
--- a/src/pages/settings/panes/Profile.tsx
+++ b/src/pages/settings/panes/Profile.tsx
@@ -1,7 +1,7 @@
 import styles from "./Panes.module.scss";
 import Button from "../../../components/ui/Button";
 import { Users } from "revolt.js/dist/api/objects";
-import { SettingsTextArea } from "../SettingsTextArea";
+import TextArea from "../../../components/ui/TextArea";
 import { IntlContext, Text, translate } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
@@ -93,14 +93,14 @@ export function Profile() {
             <h3>
                 <Text id="app.settings.pages.profile.info" />
             </h3>
-            <SettingsTextArea
-                maxRows={10}
-                minHeight={200}
+            <TextArea
+                // maxRows={10}
+                // minHeight={200}
                 maxLength={2000}
                 value={profile?.content ?? ""}
                 disabled={typeof profile === "undefined"}
-                onChange={content => {
-                    setProfile({ ...profile, content })
+                onChange={ev => {
+                    setProfile({ ...profile, content: ev.currentTarget.value })
                     if (!changed) setChanged(true)
                 }}
                 placeholder={translate(
diff --git a/src/pages/settings/server/Invites.tsx b/src/pages/settings/server/Invites.tsx
index c1bca3df..42144a96 100644
--- a/src/pages/settings/server/Invites.tsx
+++ b/src/pages/settings/server/Invites.tsx
@@ -2,8 +2,8 @@ import styles from './Panes.module.scss';
 import { XCircle } from "@styled-icons/feather";
 import { useEffect, useState } from "preact/hooks";
 import Preloader from "../../../components/ui/Preloader";
-import UserIcon from "../../../components/common/UserIcon";
 import IconButton from "../../../components/ui/IconButton";
+import UserIcon from "../../../components/common/user/UserIcon";
 import { getChannelName } from "../../../context/revoltjs/util";
 import { Invites as InvitesNS, Servers } from "revolt.js/dist/api/objects";
 import { useChannels, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
diff --git a/src/pages/settings/server/Overview.tsx b/src/pages/settings/server/Overview.tsx
index d3ba3a3e..3c8e2ec1 100644
--- a/src/pages/settings/server/Overview.tsx
+++ b/src/pages/settings/server/Overview.tsx
@@ -2,7 +2,7 @@ import { Text } from "preact-i18n";
 import styles from './Panes.module.scss';
 import Button from "../../../components/ui/Button";
 import { Servers } from "revolt.js/dist/api/objects";
-import { SettingsTextArea } from "../SettingsTextArea";
+import TextArea from "../../../components/ui/TextArea";
 import InputBox from "../../../components/ui/InputBox";
 import { useContext, useEffect, useState } from "preact/hooks";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
@@ -65,14 +65,14 @@ export function Overview({ server }: Props) {
             <h3>
                 <Text id="app.main.servers.description" />
             </h3>
-            <SettingsTextArea
-                maxRows={10}
-                minHeight={60}
+            <TextArea
+                // maxRows={10}
+                // minHeight={60}
                 maxLength={1024}
                 value={description}
                 placeholder={"Add a topic..."}
-                onChange={content => {
-                    setDescription(content);
+                onChange={ev => {
+                    setDescription(ev.currentTarget.value);
                     if (!changed) setChanged(true)
                 }}
             />