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