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>