Implement new auto-size text area.

Add bars + header + sidebar to channels.

src/pages/channels/Channel.tsx

@@ -1,10 +1,15 @@
 import styled from "styled-components";
+import { useState } from "preact/hooks";
+import ChannelHeader from "./ChannelHeader";
 import { useParams } from "react-router-dom";
-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 { useRenderState } from "../../lib/renderer/Singleton";
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import MessageBox from "../../components/common/messaging/MessageBox";
+import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
+import MemberSidebar from "../../components/navigation/right/MemberSidebar";
+import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
+import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
 
 const ChannelMain = styled.div`
     flex-grow: 1;
@@ -21,26 +26,30 @@ const ChannelContent = styled.div`
     flex-direction: column;
 `;
 
-export default function Channel() {
-    const { channel: id } = useParams<{ channel: string }>();
-
+export function Channel({ id }: { id: string }) {
     const ctx = useForceUpdate();
     const channel = useChannel(id, ctx);
 
     if (!channel) return null;
-    // const view = useRenderState(id);
+    const [ showMembers, setMembers ] = useState(true);
 
     return (
         <>
-            <Header placement="primary">
-                Channel
-            </Header>
+            <ChannelHeader channel={channel} toggleSidebar={() => setMembers(!showMembers)} />
             <ChannelMain>
                 <ChannelContent>
                     <MessageArea id={id} />
+                    <TypingIndicator id={channel._id} />
+                    <JumpToBottom id={id} />
                     <MessageBox channel={channel} />
                 </ChannelContent>
+                { !isTouchscreenDevice && showMembers && <MemberSidebar channel={channel} /> }
             </ChannelMain>
         </>
     )
 }
+
+export default function() {
+    const { channel } = useParams<{ channel: string }>();
+    return <Channel id={channel} key={channel} />;
+}

src/pages/channels/ChannelHeader.tsx

@@ -0,0 +1,136 @@
+import styled from "styled-components";
+import { Channel, User } from "revolt.js";
+import { useContext } from "preact/hooks";
+import { useHistory } from "react-router-dom";
+import Header from "../../components/ui/Header";
+import IconButton from "../../components/ui/IconButton";
+import Markdown from "../../components/markdown/Markdown";
+import { getChannelName } from "../../context/revoltjs/util";
+import UserStatus from "../../components/common/user/UserStatus";
+import { AppContext } from "../../context/revoltjs/RevoltClient";
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+import { useStatusColour } from "../../components/common/user/UserIcon";
+import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { Save, AtSign, Users, Hash, UserPlus, Settings, Sidebar as SidebarIcon } from "@styled-icons/feather";
+
+interface Props {
+    channel: Channel,
+    toggleSidebar?: () => void
+}
+
+const Info = styled.div`
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+
+    * {
+        display: inline-block;
+    }
+
+    .divider {
+        height: 14px;
+        margin: 0 5px;
+        padding-left: 1px;
+        background-color: var(--tertiary-background);
+    }
+
+    .status {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        display: inline-block;
+        margin-inline-end: 6px;
+    }
+
+    .desc {
+        cursor: pointer;
+        font-size: 0.8em;
+        font-weight: 400;
+        color: var(--secondary-foreground);
+    }
+`;
+
+export default function ChannelHeader({ channel, toggleSidebar }: Props) {
+    const { openScreen } = useIntermediate();
+    const client = useContext(AppContext);
+    const history = useHistory();
+
+    const name = getChannelName(client, channel);
+    let icon, recipient;
+    switch (channel.channel_type) {
+        case "SavedMessages":
+            icon = <Save size={20} strokeWidth={1.5} />;
+            break;
+        case "DirectMessage":
+            icon = <AtSign size={20} strokeWidth={1.5} />;
+            const uid = client.channels.getRecipient(channel._id);
+            recipient = client.users.get(uid);
+            break;
+        case "Group":
+            icon = <Users size={20} strokeWidth={1.5} />;
+            break;
+        case "TextChannel":
+            icon = <Hash size={20} strokeWidth={1.5} />;
+            break;
+    }
+
+    return (
+        <Header placement="primary">
+            { icon }
+            <Info>
+                <span className="name">{ name }</span>
+                {channel.channel_type === "DirectMessage" && (
+                    <>
+                        <div className="divider" />
+                        <span className="desc">
+                            <div className="status" style={{ backgroundColor: useStatusColour(recipient as User) }} />
+                            <UserStatus user={recipient as User} />
+                        </span>
+                    </>
+                )}
+                {(channel.channel_type === "Group" || channel.channel_type === "TextChannel") && channel.description && (
+                    <>
+                        <div className="divider" />
+                        <span
+                            className="desc"
+                            onClick={() =>
+                                openScreen({
+                                    id: "channel_info",
+                                    channel_id: channel._id
+                                })
+                            }>
+                            <Markdown content={channel.description.split("\n")[0] ?? ""} disallowBigEmoji />
+                        </span>
+                    </>
+                )}
+            </Info>
+            <>
+                { channel.channel_type === "Group" && (
+                    <>
+                        <IconButton onClick={() =>
+                            openScreen({
+                                id: "user_picker",
+                                omit: channel.recipients,
+                                callback: async users => {
+                                    for (const user of users) {
+                                        await client.channels.addMember(channel._id, user);
+                                    }
+                                }
+                            })}>
+                            <UserPlus size={22} />
+                        </IconButton>
+                        <IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}>
+                            <Settings size={22} />
+                        </IconButton>
+                    </>
+                ) }
+                { channel.channel_type === "Group" && !isTouchscreenDevice && (
+                    <IconButton onClick={toggleSidebar}>
+                        <SidebarIcon size={22} />
+                    </IconButton>
+                ) }
+            </>
+        </Header>
+    )
+}

src/pages/channels/messaging/MessageArea.tsx

@@ -23,6 +23,7 @@ const Area = styled.div`
     > div {
         display: flex;
         min-height: 100%;
+        padding-bottom: 20px;
         flex-direction: column;
         justify-content: flex-end;
     }

src/pages/channels/messaging/MessageRenderer.tsx

@@ -160,7 +160,7 @@ function MessageRenderer({ id, state, queue }: Props) {
             );
         }
 
-        render.push(<div>end</div>);
+        // render.push(<div>end</div>);
     } else {
         render.push(
             <RequiresOnline>

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..."}