Implement new auto-size text area.

Add bars + header + sidebar to channels.

src/components/common/messaging/Message.tsx

@@ -24,15 +24,19 @@ export default function Message({ attachContext, message, contrast, content: rep
 
     const content = message.content as string;
     return (
-        <MessageBase contrast={contrast}
+        <MessageBase id={message._id}
+            contrast={contrast}
             onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel }) : undefined}>
             <MessageInfo>
                 { head ?
                     <UserIcon target={user} size={36} /> :
-                    <MessageDetail message={message} /> }
+                    <MessageDetail message={message} position="left" /> }
             </MessageInfo>
             <MessageContent>
-                { head && <Username user={user} /> }
+                { head && <span className="author">
+                    <Username user={user} />
+                    <MessageDetail message={message} position="top" />
+                </span> }
                 { replacement ?? <Markdown content={content} /> }
                 { message.attachments?.map((attachment, index) =>
                     <Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) }

src/components/common/messaging/MessageBase.tsx

@@ -1,6 +1,8 @@
 import dayjs from "dayjs";
-import styled, { css } from "styled-components";
+import Tooltip from "../Tooltip";
 import { decodeTime } from "ulid";
+import { Text } from "preact-i18n";
+import styled, { css } from "styled-components";
 import { MessageObject } from "../../../context/revoltjs/util";
 
 export interface BaseMessageProps {
@@ -50,6 +52,12 @@ export default styled.div<BaseMessageProps>`
     ${ props => props.status && css`
         color: var(--error);
     ` }
+
+    .author {
+        gap: 8px;
+        display: flex;
+        align-items: center;
+    }
     
     .copy {
         width: 0;
@@ -98,14 +106,47 @@ export const MessageContent = styled.div`
     justify-content: center;
 `;
 
-export function MessageDetail({ message }: { message: MessageObject }) {
+export const DetailBase = styled.div`
+    gap: 4px;
+    font-size: 10px;
+    display: inline-flex;
+    color: var(--tertiary-foreground);
+`;
+
+export function MessageDetail({ message, position }: { message: MessageObject, position: 'left' | 'top' }) {
+    if (position === 'left') {
+        if (message.edited) {
+            return (
+                <span>
+                    <span className="copy">
+                        [<time>{dayjs(decodeTime(message._id)).format("H:mm")}</time>]
+                    </span>
+                    <Tooltip content={dayjs(message.edited).format("LLLL")}>
+                        <Text id="app.main.channel.edited" />
+                    </Tooltip>
+                </span>
+            )
+        } else {
+            return (
+                <>
+                    <time>
+                        <i className="copy">[</i>
+                        { dayjs(decodeTime(message._id)).format("H:mm") }
+                        <i className="copy">]</i>
+                    </time>
+                </>
+            )
+        }
+    }
+
     return (
-        <>
+        <DetailBase>
             <time>
-                <i className="copy">[</i>
-                {dayjs(decodeTime(message._id)).format("H:mm")}
-                <i className="copy">]</i>
+                {dayjs(decodeTime(message._id)).calendar()}
             </time>
-        </>
+            { message.edited && <Tooltip content={dayjs(message.edited).format("LLLL")}>
+                <Text id="app.main.channel.edited" />
+            </Tooltip> }
+        </DetailBase>
     )
 }

src/components/common/messaging/MessageBox.tsx

@@ -1,24 +1,59 @@
 import { ulid } from "ulid";
 import { Channel } from "revolt.js";
-import TextArea from "../../ui/TextArea";
-import { useContext } from "preact/hooks";
+import styled from "styled-components";
 import { defer } from "../../../lib/defer";
 import IconButton from "../../ui/IconButton";
 import { Send } from '@styled-icons/feather';
+import Axios, { CancelTokenSource } from "axios";
+import { useTranslation } from "../../../lib/i18n";
+import { useCallback, useContext, useState } from "preact/hooks";
 import { connectState } from "../../../redux/connector";
 import { WithDispatcher } from "../../../redux/reducers";
 import { takeError } from "../../../context/revoltjs/util";
+import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { FileUploader, grabFiles, uploadFile } from "../../../context/revoltjs/FileUploads";
 import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton";
 
+import FilePreview from './bars/FilePreview';
+import { debounce } from "../../../lib/debounce";
+
 type Props = WithDispatcher & {
     channel: Channel;
     draft?: string;
 };
 
+export type UploadState =
+    | { type: "none" }
+    | { type: "attached"; files: File[] }
+    | { type: "uploading"; files: File[]; percent: number; cancel: CancelTokenSource }
+    | { type: "sending"; files: File[] }
+    | { type: "failed"; files: File[]; error: string };
+
+const Base = styled.div`
+    display: flex;
+    padding: 0 12px;
+    background: var(--message-box);
+
+    textarea {
+        font-size: .875rem;
+        background: transparent;
+    }
+`;
+
+const Action = styled.div`
+    display: grid;
+    place-items: center;
+`;
+
 function MessageBox({ channel, draft, dispatcher }: Props) {
+    const [ uploadState, setUploadState ] = useState<UploadState>({ type: 'none' });
+    const [typing, setTyping] = useState<boolean | number>(false);
+    const { openScreen } = useIntermediate();
     const client = useContext(AppContext);
+    const translate = useTranslation();
 
     function setMessage(content?: string) {
         if (content) {
@@ -36,12 +71,16 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
     }
 
     async function send() {
-        const nonce = ulid();
-
+        if (uploadState.type === 'uploading' || uploadState.type === 'sending') return;
+        
         const content = draft?.trim() ?? '';
+        if (uploadState.type === 'attached') return sendFile(content);
         if (content.length === 0) return;
-
+        
+        stopTyping();
         setMessage();
+
+        const nonce = ulid();
         dispatcher({
             type: "QUEUE_ADD",
             nonce,
@@ -55,7 +94,6 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
         });
 
         defer(() => SingletonMessageRenderer.jumpToBottom(channel._id, SMOOTH_SCROLL_ON_RECEIVE));
-        // Sounds.playOutbound();
 
         try {
             await client.channels.sendMessage(channel._id, {
@@ -71,21 +109,164 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
         }
     }
 
+    async function sendFile(content: string) {
+        if (uploadState.type !== 'attached') return;
+        let attachments = [];
+
+        const cancel = Axios.CancelToken.source();
+        const files = uploadState.files;
+        stopTyping();
+        setUploadState({ type: "uploading", files, percent: 0, cancel });
+
+        try {
+            for (let i=0;i<files.length;i++) {
+                if (i>0)continue; // ! FIXME: temp, allow multiple uploads on server
+                const file = files[i];
+                attachments.push(
+                    await uploadFile(client.configuration!.features.autumn.url, 'attachments', file, {
+                        onUploadProgress: e =>
+                        setUploadState({
+                            type: "uploading",
+                            files,
+                            percent: Math.round(((i * 100) + (100 * e.loaded) / e.total) / (files.length)),
+                            cancel
+                        }),
+                        cancelToken: cancel.token
+                    })
+                );
+            }
+        } catch (err) {
+            if (err?.message === "cancel") {
+                setUploadState({
+                    type: "attached",
+                    files
+                });
+            } else {
+                setUploadState({
+                    type: "failed",
+                    files,
+                    error: takeError(err)
+                });
+            }
+
+            return;
+        }
+
+        setUploadState({
+            type: "sending",
+            files
+        });
+
+        const nonce = ulid();
+        try {
+            await client.channels.sendMessage(channel._id, {
+                content,
+                nonce,
+                attachment: attachments[0] // ! FIXME: temp, allow multiple uploads on server
+            });
+        } catch (err) {
+            setUploadState({
+                type: "failed",
+                files,
+                error: takeError(err)
+            });
+
+            return;
+        }
+
+        setMessage();
+        setUploadState({ type: "none" });
+    }
+    
+    function startTyping() {
+        if (typeof typing === 'number' && + new Date() < typing) return;
+
+        const ws = client.websocket;
+        if (ws.connected) {
+            setTyping(+ new Date() + 4000);
+            ws.send({
+                type: "BeginTyping",
+                channel: channel._id
+            });
+        }
+    }
+
+    function stopTyping(force?: boolean) {
+        if (force || typing) {
+            const ws = client.websocket;
+            if (ws.connected) {
+                setTyping(false);
+                ws.send({
+                    type: "EndTyping",
+                    channel: channel._id
+                });
+            }
+        }
+    }
+
+    const debouncedStopTyping = useCallback(debounce(stopTyping, 1000), [ channel._id ]);
+
     return (
-        <div style={{ display: 'flex' }}>
-            <TextArea
-                value={draft}
-                onKeyDown={e => {
-                    if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
-                        e.preventDefault();
-                        return send();
+        <>
+            <FilePreview state={uploadState} addFile={() => uploadState.type === 'attached' &&
+                grabFiles(20_000_000, files => setUploadState({ type: 'attached', files: [ ...uploadState.files, ...files ] }),
+                    () => openScreen({ id: "error", error: "FileTooLarge" }), true)}
+                removeFile={index => {
+                    if (uploadState.type !== 'attached') return;
+                    if (uploadState.files.length === 1) {
+                        setUploadState({ type: 'none' });
+                    } else {
+                        setUploadState({ type: 'attached', files: uploadState.files.filter((_, i) => index !== i) });
                     }
-                }}
-                onChange={e => setMessage(e.currentTarget.value)} />
-            <IconButton onClick={send}>
-                <Send size={20} />
-            </IconButton>
-        </div>
+                }} />
+            <Base>
+                <Action>
+                    <FileUploader
+                        size={24}
+                        behaviour='multi'
+                        style='attachment'
+                        fileType='attachments'
+                        maxFileSize={20_000_000}
+
+                        attached={uploadState.type !== 'none'}
+                        uploading={uploadState.type === 'uploading' || uploadState.type === 'sending'}
+
+                        remove={async () => setUploadState({ type: "none" })}
+                        onChange={files => setUploadState({ type: "attached", files })}
+                        cancel={() => uploadState.type === 'uploading' && uploadState.cancel.cancel("cancel")}
+                    />
+                </Action>
+                <TextAreaAutoSize
+                    hideBorder
+                    maxRows={5}
+                    padding={15}
+                    value={draft ?? ''}
+                    onKeyDown={e => {
+                        if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
+                            e.preventDefault();
+                            return send();
+                        }
+                        
+                        debouncedStopTyping(true);
+                    }}
+                    placeholder={
+                        channel.channel_type === "DirectMessage" ? translate("app.main.channel.message_who", {
+                            person: client.users.get(client.channels.getRecipient(channel._id))?.username })
+                        : channel.channel_type === "SavedMessages" ? translate("app.main.channel.message_saved")
+                        : translate("app.main.channel.message_where", { channel_name: channel.name })
+                    }
+                    disabled={uploadState.type === 'uploading' || uploadState.type === 'sending'}
+                    onChange={e => {
+                        setMessage(e.currentTarget.value);
+                        startTyping();
+                    }} />
+                <Action>
+                    <IconButton onClick={send}>
+                        <Send size={20} />
+                    </IconButton>
+                </Action>
+            </Base>
+        </>
     )
 }
 

src/components/common/messaging/SystemMessage.tsx

@@ -1,14 +1,11 @@
 import { User } from "revolt.js";
-import classNames from "classnames";
+import styled from "styled-components";
+import UserShort from "../user/UserShort";
+import { TextReact } from "../../../lib/i18n";
 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 "../user/UserIcon";
-import Username from "../user/UserShort";
-import UserShort from "../user/UserShort";
 import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
-import styled from "styled-components";
+import { useForceUpdate, useUser } from "../../../context/revoltjs/hooks";
 
 const SystemContent = styled.div`
     gap: 4px;
@@ -144,7 +141,7 @@ export function SystemMessage({ attachContext, message }: Props) {
                 { message, contextualChannel: message.channel }
             ) : undefined}>
             <MessageInfo>
-                <MessageDetail message={message} />
+                <MessageDetail message={message} position="left" />
             </MessageInfo>
             <SystemContent>{children}</SystemContent>
         </MessageBase>

src/components/common/messaging/attachments/AttachmentActions.tsx

@@ -2,6 +2,7 @@ import { useContext } from 'preact/hooks';
 import styles from './Attachment.module.scss';
 import IconButton from '../../../ui/IconButton';
 import { Attachment } from "revolt.js/dist/api/objects";
+import { determineFileSize } from '../../../../lib/fileSize';
 import { AppContext } from '../../../../context/revoltjs/RevoltClient';
 import { Download, ExternalLink, File, Headphones, Video } from '@styled-icons/feather';
 
@@ -9,16 +10,6 @@ interface Props {
     attachment: Attachment;
 }
 
-export function determineFileSize(size: number) {
-    if (size > 1e6) {
-        return `${(size / 1e6).toFixed(2)} MB`;
-    } else if (size > 1e3) {
-        return `${(size / 1e3).toFixed(2)} KB`;
-    }
-
-    return `${size} B`;
-}
-
 export default function AttachmentActions({ attachment }: Props) {
     const client = useContext(AppContext);
     const { filename, metadata, size } = attachment;

src/components/common/messaging/bars/FilePreview.tsx

@@ -0,0 +1,158 @@
+import { Text } from "preact-i18n";
+import styled from "styled-components";
+import { UploadState } from "../MessageBox";
+import { useEffect, useState } from 'preact/hooks';
+import { XCircle, Plus, Share, X } from "@styled-icons/feather";
+import { determineFileSize } from '../../../../lib/fileSize';
+
+interface Props {
+    state: UploadState,
+    addFile: () => void,
+    removeFile: (index: number) => void
+}
+
+const Container = styled.div`
+    gap: 4px;
+    padding: 8px;
+    display: flex;
+    user-select: none;
+    flex-direction: column;
+    background: var(--message-box);
+`;
+
+const Carousel = styled.div`
+    gap: 8px;
+    display: flex;
+    overflow-x: scroll;
+    flex-direction: row;
+`;
+
+const Entry = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    img {
+        height: 100px;
+        margin-bottom: 4px;
+        border-radius: 4px;
+        object-fit: contain;
+        background: var(--secondary-background);
+    }
+
+    span.fn {
+        margin: auto;
+        font-size: .8em;
+        overflow: hidden;
+        max-width: 180px;
+        text-align: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: var(--secondary-foreground);
+    }
+
+    span.size {
+        font-size: .6em;
+        color: var(--tertiary-foreground);
+        text-align: center;
+    }
+
+    div {
+        position: relative;
+        height: 0;
+
+        div {
+            display: grid;
+            height: 100px;
+            cursor: pointer;
+            border-radius: 4px;
+            place-items: center;
+            
+            opacity: 0;
+            transition: 0.1s ease opacity;
+            background: rgba(0, 0, 0, 0.5);
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+`;
+
+const Description = styled.div`
+    gap: 4px;
+    display: flex;
+    font-size: 0.9em;
+    align-items: center;
+    color: var(--secondary-foreground);
+`;
+
+const EmptyEntry = styled.div`
+    width: 100px;
+    height: 100px;
+    display: grid;
+    flex-shrink: 0;
+    cursor: pointer;
+    border-radius: 4px;
+    place-items: center;
+    background: var(--primary-background);
+    transition: 0.1s ease background-color;
+
+    &:hover {
+        background: var(--secondary-background);
+    }
+`;
+
+function FileEntry({ file, remove }: { file: File, remove?: () => void }) {
+    if (!file.type.startsWith('image/')) return (
+        <Entry>
+            <div><div onClick={remove}><XCircle size={36} /></div></div>
+            
+            <span class="fn">{file.name}</span>
+            <span class="size">{determineFileSize(file.size)}</span>
+        </Entry>
+    );
+
+    const [ url, setURL ] = useState('');
+
+    useEffect(() => {
+        let url: string = URL.createObjectURL(file);
+        setURL(url);
+        return () => URL.revokeObjectURL(url);
+    }, [ file ]);
+
+    return (
+        <Entry>
+            { remove && <div><div onClick={remove}><XCircle size={36} /></div></div> }
+            <img src={url}
+                 alt={file.name} />
+            <span class="fn">{file.name}</span>
+            <span class="size">{determineFileSize(file.size)}</span>
+        </Entry>
+    )
+}
+
+export default function FilePreview({ state, addFile, removeFile }: Props) {
+    if (state.type === 'none') return null;
+
+    return (
+        <Container>
+            <Carousel>
+                { state.files.map((file, index) => <FileEntry file={file} key={file.name} remove={state.type === 'attached' ? () => removeFile(index) : undefined} />) }
+                { state.type === 'attached' && <EmptyEntry onClick={addFile}><Plus size={48} /></EmptyEntry> }
+            </Carousel>
+            { state.files.length > 1 && state.type === 'attached' && <Description>Warning: Only first file will be uploaded, this will be changed in a future update.</Description> }
+            { state.type === 'uploading' && <Description>
+                <Share size={24} />
+                <Text id="app.main.channel.uploading_file" /> ({state.percent}%)
+            </Description> }
+            { state.type === 'sending' && <Description>
+                <Share size={24} />
+                Sending...
+            </Description> }
+            { state.type === 'failed' && <Description>
+                <X size={24} />
+                <Text id={`error.${state.error}`} />
+            </Description> }
+        </Container>
+    );
+}

src/components/common/messaging/bars/JumpToBottom.tsx

@@ -0,0 +1,53 @@
+import { Text } from "preact-i18n";
+import styled from "styled-components";
+import { ArrowDown } from "@styled-icons/feather";
+import { SingletonMessageRenderer, useRenderState } from "../../../../lib/renderer/Singleton";
+
+const Bar = styled.div`
+    z-index: 10;
+    position: relative;
+
+    > div {
+        top: -26px;
+        width: 100%;
+        position: absolute;
+        border-radius: 4px 4px 0 0;
+        display: flex;
+        cursor: pointer;
+        font-size: 13px;
+        padding: 4px 8px;
+        user-select: none;
+        color: var(--secondary-foreground);
+        background: var(--secondary-background);
+        justify-content: space-between;
+        transition: color ease-in-out .08s;
+
+        > div {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        &:hover {
+            color: var(--primary-text);
+        }
+
+        &:active {
+            transform: translateY(1px);
+        }
+    }
+`;
+
+export default function JumpToBottom({ id }: { id: string }) {
+    const view = useRenderState(id);
+    if (!view || view.type !== 'RENDER' || view.atBottom) return null;
+
+    return (
+        <Bar>
+            <div onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}>
+                <div><Text id="app.main.channel.misc.viewing_old" /></div>
+                <div><Text id="app.main.channel.misc.jump_present" /> <ArrowDown size={18} strokeWidth={2}/></div>
+            </div>
+        </Bar>
+    )
+}

src/components/common/messaging/bars/TypingIndicator.tsx

@@ -0,0 +1,111 @@
+import { User } from 'revolt.js';
+import { Text } from "preact-i18n";
+import styled from 'styled-components';
+import { useContext } from 'preact/hooks';
+import { connectState } from '../../../../redux/connector';
+import { useUsers } from '../../../../context/revoltjs/hooks';
+import { TypingUser } from '../../../../redux/reducers/typing';
+import { AppContext } from '../../../../context/revoltjs/RevoltClient';
+
+interface Props {
+    typing?: TypingUser[]
+}
+
+const Base = styled.div`
+    position: relative;
+
+    > div {
+        height: 24px;
+        margin-top: -24px;
+        position: absolute;
+
+        gap: 8px;
+        display: flex;
+        padding: 0 10px;
+        user-select: none;
+        align-items: center;
+        flex-direction: row;
+        width: calc(100% - 3px);
+        color: var(--secondary-foreground);
+        background: var(--secondary-background);
+    }
+
+    .avatars {
+        display: flex;
+        
+        img {
+            width: 16px;
+            height: 16px;
+            object-fit: cover;
+            border-radius: 50%;
+
+            &:not(:first-child) {
+                margin-left: -4px;
+            }
+        }
+    }
+
+    .usernames {
+        min-width: 0;
+        font-size: 13px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+`;
+
+export function TypingIndicator({ typing }: Props) {
+    if (typing && typing.length > 0) {
+        const client = useContext(AppContext);
+        const users = useUsers(typing.map(x => x.id))
+            .filter(x => typeof x !== 'undefined') as User[];
+
+        users.sort((a, b) => a._id.toUpperCase().localeCompare(b._id.toUpperCase()));
+
+        let text;
+        if (users.length >= 5) {
+            text = <Text id="app.main.channel.typing.several" />;
+        } else if (users.length > 1) {
+            const usersCopy = [...users];
+            text = (
+                <Text
+                    id="app.main.channel.typing.multiple"
+                    fields={{
+                        user: usersCopy.pop()?.username,
+                        userlist: usersCopy.map(x => x.username).join(", ")
+                    }}
+                />
+            );
+        } else {
+            text = (
+                <Text
+                    id="app.main.channel.typing.single"
+                    fields={{ user: users[0].username }}
+                />
+            );
+        }
+
+        return (
+            <Base>
+                <div>
+                    <div className="avatars">
+                        {users.map(user => (
+                            <img
+                                src={client.users.getAvatarURL(user._id, { max_side: 256 }, true)}
+                            />
+                        ))}
+                    </div>
+                    <div className="usernames">{text}</div>
+                </div>
+            </Base>
+        );
+    }
+
+    return null;
+}
+
+export default connectState<{ id: string }>(TypingIndicator, (state, props) => {
+    return {
+        typing: state.typing && state.typing[props.id]
+    };
+});

src/components/navigation/RightSidebar.tsx

@@ -1,19 +1,18 @@
 import { Route, Switch } from "react-router";
 import SidebarBase from "./SidebarBase";
 
-// import { MemberSidebar } from "./right/MemberSidebar";
+import MemberSidebar from "./right/MemberSidebar";
 
 export default function RightSidebar() {
     return (
         <SidebarBase>
             <Switch>
-                {/* 
                 <Route path="/server/:server/channel/:channel">
                     <MemberSidebar />
                 </Route>
                 <Route path="/channel/:channel">
                     <MemberSidebar />
-                </Route> */ }
+                </Route>
             </Switch>
         </SidebarBase>
     );

src/components/navigation/SidebarBase.tsx

@@ -12,3 +12,22 @@ export default styled.div`
         padding-bottom: 50px;
     ` }
 `;
+
+export const GenericSidebarBase = styled.div`
+    height: 100%;
+    width: 240px;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    background: var(--secondary-background);
+`;
+
+export const GenericSidebarList = styled.div`
+    padding: 6px;
+    flex-grow: 1;
+    overflow-y: scroll;
+
+    > svg {
+        width: 100%;
+    }
+`;

src/components/navigation/left/HomeSidebar.tsx

@@ -2,7 +2,6 @@ import { Localizer, Text } from "preact-i18n";
 import { useContext } from "preact/hooks";
 import { Home, Users, Tool, Save } from "@styled-icons/feather";
 
-import styled from "styled-components";
 import Category from '../../ui/Category';
 import PaintCounter from "../../../lib/PaintCounter";
 import UserHeader from "../../common/user/UserHeader";
@@ -16,6 +15,7 @@ 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 { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 import { Link, Redirect, useLocation, useParams } from "react-router-dom";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
@@ -24,25 +24,6 @@ type Props = WithDispatcher & {
     unreads: Unreads;
 }
 
-const HomeBase = styled.div`
-    height: 100%;
-    width: 240px;
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    background: var(--secondary-background);
-`;
-
-const HomeList = styled.div`
-    padding: 6px;
-    flex-grow: 1;
-    overflow-y: scroll;
-
-    > svg {
-        width: 100%;
-    }
-`;
-
 function HomeSidebar(props: Props) {
     const { pathname } = useLocation();
     const client = useContext(AppContext);
@@ -68,10 +49,10 @@ function HomeSidebar(props: Props) {
     channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
 
     return (
-        <HomeBase>
+        <GenericSidebarBase>
             <UserHeader user={client.user!} />
             <ConnectionStatus />
-            <HomeList>
+            <GenericSidebarList>
                 {!isTouchscreenDevice && (
                     <>
                         <Link to="/">
@@ -146,8 +127,8 @@ function HomeSidebar(props: Props) {
                     );
                 })}
                 <PaintCounter />
-            </HomeList>
-        </HomeBase>
+            </GenericSidebarList>
+        </GenericSidebarBase>
     );
 };
 

src/components/navigation/right/ChannelDebugInfo.tsx

@@ -0,0 +1,37 @@
+import { useRenderState } from "../../../lib/renderer/Singleton";
+
+interface Props {
+    id: string;
+}
+
+export function ChannelDebugInfo({ id }: Props) {
+    if (process.env.NODE_ENV !== "development") return null;
+    let view = useRenderState(id);
+    if (!view) return null;
+
+    return (
+        <span style={{ display: "block", padding: "12px 10px 0 10px" }}>
+            <span
+                style={{
+                    display: "block",
+                    fontSize: "12px",
+                    textTransform: "uppercase",
+                    fontWeight: "600"
+                }}
+            >
+                Channel Info
+            </span>
+            <p style={{ fontSize: "10px", userSelect: "text" }}>
+                State: <b>{ view.type }</b> <br />
+                { view.type === 'RENDER' && view.messages.length > 0 &&
+                    <>
+                        Start: <b>{view.messages[0]._id}</b> <br />
+                        End: <b>{view.messages[view.messages.length - 1]._id}</b> <br />
+                        At Top: <b>{view.atTop ? "Yes" : "No"}</b> <br />
+                        At Bottom: <b>{view.atBottom ? "Yes" : "No"}</b>
+                    </>
+                }
+            </p>
+        </span>
+    );
+}

src/components/navigation/right/MemberSidebar.tsx

@@ -0,0 +1,206 @@
+import { Text } from "preact-i18n";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { User } from "revolt.js";
+import Category from "../../ui/Category";
+import { useParams } from "react-router";
+import { UserButton } from "../items/ButtonItem";
+import { ChannelDebugInfo } from "./ChannelDebugInfo";
+import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
+import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
+import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
+import { HookContext, useChannel, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
+
+import placeholderSVG from "../items/placeholder.svg";
+import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
+
+interface Props {
+    ctx: HookContext
+}
+
+export default function MemberSidebar(props: { channel?: Channels.Channel }) {
+    const ctx = useForceUpdate();
+    const { channel: cid } = useParams<{ channel: string }>();
+    const channel = props.channel ?? useChannel(cid, ctx);
+
+    switch (channel?.channel_type) {
+        case 'Group': return <GroupMemberSidebar channel={channel} ctx={ctx} />;
+        case 'TextChannel': return <ServerMemberSidebar channel={channel} ctx={ctx} />;
+        default: return null;
+    }
+}
+
+export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels.GroupChannel }) {
+    const users = useUsers(undefined, ctx);
+    let members = channel.recipients
+        .map(x => users.find(y => y?._id === x))
+        .filter(x => typeof x !== "undefined") as User[];
+
+    /*const voice = useContext(VoiceContext);
+    const voiceActive = voice.roomId === channel._id;
+
+    let voiceParticipants: User[] = [];
+    if (voiceActive) {
+        const idArray = Array.from(voice.participants.keys());
+        voiceParticipants = idArray
+            .map(x => users.find(y => y?._id === x))
+            .filter(x => typeof x !== "undefined") as User[];
+
+        members = members.filter(member => idArray.indexOf(member._id) === -1);
+
+        voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
+    }*/
+
+    members.sort((a, b) => {
+        // ! FIXME: should probably rewrite all this code
+        let l = ((a.online &&
+            a.status?.presence !== Users.Presence.Invisible) ??
+            false) as any | 0;
+        let r = ((b.online &&
+            b.status?.presence !== Users.Presence.Invisible) ??
+            false) as any | 0;
+
+        let n = r - l;
+        if (n !== 0) {
+            return n;
+        }
+
+        return a.username.localeCompare(b.username);
+    });
+
+    return (
+        <GenericSidebarBase>
+            <GenericSidebarList>
+                <ChannelDebugInfo id={channel._id} />
+                {/*voiceActive && voiceParticipants.length !== 0 && (
+                    <Fragment>
+                        <Category
+                            type="members"
+                            text={
+                                <span>
+                                    <Text id="app.main.categories.participants" />{" "}
+                                    — {voiceParticipants.length}
+                                </span>
+                            }
+                        />
+                        {voiceParticipants.map(
+                            user =>
+                                user && (
+                                    <LinkProfile user_id={user._id}>
+                                        <UserButton
+                                            key={user._id}
+                                            user={user}
+                                            context={channel}
+                                        />
+                                    </LinkProfile>
+                                )
+                        )}
+                    </Fragment>
+                )*/}
+                {!(members.length === 0 /*&& voiceActive*/) && (
+                    <Category
+                        variant="uniform"
+                        text={
+                            <span>
+                                <Text id="app.main.categories.members" /> —{" "}
+                                {channel.recipients.length}
+                            </span>
+                        }
+                    />
+                )}
+                {members.length === 0 && /*!voiceActive &&*/ <img src={placeholderSVG} />}
+                {members.map(
+                    user =>
+                        user && (
+                            // <LinkProfile user_id={user._id}>
+                                <UserButton
+                                    key={user._id}
+                                    user={user}
+                                    context={channel}
+                                />
+                            // </LinkProfile>
+                        )
+                )}
+            </GenericSidebarList>
+        </GenericSidebarBase>
+    );
+}
+
+export function ServerMemberSidebar({ channel, ctx }: Props & { channel: Channels.TextChannel }) {
+    const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined);
+    const users = useUsers(members?.map(x => x._id.user) ?? []).filter(x => typeof x !== 'undefined', ctx) as Users.User[];
+    const status = useContext(StatusContext);
+    const client = useContext(AppContext);
+
+    useEffect(() => {
+        if (status === ClientStatus.ONLINE && typeof members === 'undefined') {
+            client.servers.members.fetchMembers(channel.server)
+                .then(members => setMembers(members))
+        }
+    }, [ status ]);
+
+    // ! FIXME: temporary code
+    useEffect(() => {
+        function onPacket(packet: ClientboundNotification) {
+            if (!members) return;
+            if (packet.type === 'ServerMemberJoin') {
+                if (packet.id !== channel.server) return;
+                setMembers([ ...members, { _id: { server: packet.id, user: packet.user } } ]);
+            } else if (packet.type === 'ServerMemberLeave') {
+                if (packet.id !== channel.server) return;
+                setMembers(members.filter(x => !(x._id.user === packet.user && x._id.server === packet.id)));
+            }
+        }
+
+        client.addListener('packet', onPacket);
+        return () => client.removeListener('packet', onPacket);
+    }, [ members ]);
+
+    // copy paste from above
+    users.sort((a, b) => {
+        // ! FIXME: should probably rewrite all this code
+        let l = ((a.online &&
+            a.status?.presence !== Users.Presence.Invisible) ??
+            false) as any | 0;
+        let r = ((b.online &&
+            b.status?.presence !== Users.Presence.Invisible) ??
+            false) as any | 0;
+
+        let n = r - l;
+        if (n !== 0) {
+            return n;
+        }
+
+        return a.username.localeCompare(b.username);
+    });
+
+    return (
+        <GenericSidebarBase>
+            <GenericSidebarList>
+                <ChannelDebugInfo id={channel._id} />
+                <Category
+                    variant="uniform"
+                    text={
+                        <span>
+                            <Text id="app.main.categories.members" /> —{" "}
+                            {users.length}
+                        </span>
+                    }
+                />
+                {users.length === 0 && <img src={placeholderSVG} />}
+                {users.map(
+                    user =>
+                        user && (
+                            // <LinkProfile user_id={user._id}>
+                                <UserButton
+                                    key={user._id}
+                                    user={user}
+                                    context={channel}
+                                />
+                            // </LinkProfile>
+                        )
+                )}
+            </GenericSidebarList>
+        </GenericSidebarBase>
+    );
+}

src/components/ui/ComboBox.tsx

@@ -5,4 +5,12 @@ export default styled.select`
     border-radius: 2px;
     color: var(--secondary-foreground);
     background: var(--secondary-background);
+
+    border: none;
+    outline: 2px solid transparent;
+    transition: outline-color 0.2s ease-in-out;
+
+    &:focus {
+        outline-color: var(--accent);
+    }
 `;

src/components/ui/InputBox.tsx

@@ -8,18 +8,21 @@ export default styled.input<Props>`
     z-index: 1;
     padding: 8px 16px;
     border-radius: 6px;
+    
     color: var(--foreground);
-    border: 2px solid transparent;
     background: var(--primary-background);
     transition: 0.2s ease background-color;
-    transition: border-color 0.2s ease-in-out;
+    
+    border: none;
+    outline: 2px solid transparent;
+    transition: outline-color 0.2s ease-in-out;
 
     &:hover {
         background: var(--secondary-background);
     }
 
     &:focus {
-        border: 2px solid var(--accent);
+        outline: 2px solid var(--accent);
     }
 
     ${(props) =>

src/components/ui/TextArea.tsx

@@ -7,23 +7,39 @@ import styled, { css } from "styled-components";
 export interface TextAreaProps {
     code?: boolean;
     padding?: number;
+    lineHeight?: number;
+    hideBorder?: boolean;
 }
 
+export const TEXT_AREA_BORDER_WIDTH = 2;
+export const DEFAULT_TEXT_AREA_PADDING = 16;
+export const DEFAULT_LINE_HEIGHT = 20;
+
 export default styled.textarea<TextAreaProps>`
     width: 100%;
     resize: none;
     display: block;
-    border-radius: 4px;
-    padding: ${ props => props.padding ?? 16 }px;
-
     color: var(--foreground);
-    border: 2px solid transparent;
     background: var(--secondary-background);
-    transition: border-color .2s ease-in-out;
+    padding: ${ props => props.padding ?? DEFAULT_TEXT_AREA_PADDING }px;
+    line-height: ${ props => props.lineHeight ?? DEFAULT_LINE_HEIGHT }px;
+
+    ${ props => props.hideBorder && css`
+        border: none;
+    ` }
+
+    ${ props => !props.hideBorder && css`
+        border-radius: 4px;
+        transition: border-color .2s ease-in-out;
+        border: ${TEXT_AREA_BORDER_WIDTH}px solid transparent;
+    ` }
 
     &:focus {
         outline: none;
-        border: 2px solid var(--accent);
+
+        ${ props => !props.hideBorder && css`
+            border: ${TEXT_AREA_BORDER_WIDTH}px solid var(--accent);
+        ` }
     }
 
     ${ props => props.code ? css`