Implement new auto-size text area.

Add bars + header + sidebar to channels.

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 TextArea from "../../../components/ui/TextArea";
+import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { useContext, useEffect, useState } from "preact/hooks";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
@@ -70,9 +70,9 @@ export function Overview({ channel }: Props) {
                     <Text id="app.main.groups.description" /> :
                     <Text id="app.main.servers.channel_description" /> }
             </h3>
-            <TextArea
-                // maxRows={10}
-                // minHeight={60}
+            <TextAreaAutoSize
+                maxRows={10}
+                minHeight={60}
                 maxLength={1024}
                 value={description}
                 placeholder={"Add a description..."}

src/pages/settings/panes/Appearance.tsx

@@ -2,10 +2,10 @@ 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 { connectState } from "../../../redux/connector";
 import { WithDispatcher } from "../../../redux/reducers";
+import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import ColourSwatches from "../../../components/ui/ColourSwatches";
 import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
 import { Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
@@ -267,19 +267,13 @@ export function Component(props: Props & WithDispatcher) {
                 <h3>
                     <Text id="app.settings.pages.appearance.custom_css" />
                 </h3>
-                <TextArea
-                    // maxRows={20}
-                    // minHeight={480}
+                <TextAreaAutoSize
+                    maxRows={20}
+                    minHeight={480}
                     code
                     value={css}
-                    onChange={ev => setCSS(ev.currentTarget.value)}
-                />
+                    onChange={ev => setCSS(ev.currentTarget.value)} />
             </details>
-
-            {/*<h3>
-                <Text id="app.settings.pages.appearance.sync" />
-            </h3>
-            <p>Coming soon!</p>*/}
         </div>
     );
 }

src/pages/settings/server/Overview.tsx

@@ -2,8 +2,8 @@ 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 TextArea from "../../../components/ui/TextArea";
 import InputBox from "../../../components/ui/InputBox";
+import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { useContext, useEffect, useState } from "preact/hooks";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
@@ -65,9 +65,9 @@ export function Overview({ server }: Props) {
             <h3>
                 <Text id="app.main.servers.description" />
             </h3>
-            <TextArea
-                // maxRows={10}
-                // minHeight={60}
+            <TextAreaAutoSize
+                maxRows={10}
+                minHeight={60}
                 maxLength={1024}
                 value={description}
                 placeholder={"Add a topic..."}