Refactor + add message box.

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>
         </>

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

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);
-        }
-    }
-}

src/pages/settings/SettingsTextArea.tsx

@@ -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} />;
-}

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)
                 }}
             />

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();

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>
 

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

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(

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

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)
                 }}
             />