src/components/common/messaging/attachments/AttachmentActions.module.scss

+.actions.imageAction {
+    grid-template: 
+        "name icon external download" auto
+        "size icon external download" auto
+        / minmax(20px, 1fr) min-content min-content;
+}
+
+.actions {
+    display: grid;
+    grid-template: 
+        "icon name external download" auto
+        "icon size external download" auto
+        / min-content minmax(20px, 1fr) min-content;
+
+    align-items: center;
+    column-gap: 12px;
+    
+    width: 100%;
+    padding: 8px;
+    overflow: none;
+
+    color: var(--foreground);
+    background: var(--secondary-background);
+
+    span {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+    
+    .filesize {
+        grid-area: size;
+
+        font-size: 10px;
+        color: var(--secondary-foreground);
+    }
+
+    .downloadIcon {
+        grid-area: download;
+    }
+
+    .externalType {
+        grid-area: external;
+    }
+
+    .iconType {
+        grid-area: icon;
+    }
+}

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

+import {
+    Download,
+    LinkExternal,
+    File,
+    Headphone,
+    Video,
+} from "@styled-icons/boxicons-regular";
+import { Attachment } from "revolt-api/types/Autumn";
+
+import styles from "./AttachmentActions.module.scss";
+import classNames from "classnames";
+import { useContext } from "preact/hooks";
+
+import { determineFileSize } from "../../../../lib/fileSize";
+
+import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+
+import IconButton from "../../../ui/IconButton";
+
+interface Props {
+    attachment: Attachment;
+}
+
+export default function AttachmentActions({ attachment }: Props) {
+    const client = useContext(AppContext);
+    const { filename, metadata, size } = attachment;
+
+    const url = client.generateFileURL(attachment)!;
+    const open_url = `${url}/${filename}`;
+    const download_url = url.replace("attachments", "attachments/download");
+
+    const filesize = determineFileSize(size);
+
+    switch (metadata.type) {
+        case "Image":
+            return (
+                <div className={classNames(styles.actions, styles.imageAction)}>
+                    <span className={styles.filename}>{filename}</span>
+                    <span className={styles.filesize}>
+                        {`${metadata.width}x${metadata.height}`} ({filesize})
+                    </span>
+                    <a
+                        href={open_url}
+                        target="_blank"
+                        className={styles.iconType}
+                        rel="noreferrer">
+                        <IconButton>
+                            <LinkExternal size={24} />
+                        </IconButton>
+                    </a>
+                    <a
+                        href={download_url}
+                        className={styles.downloadIcon}
+                        download
+                        target="_blank"
+                        rel="noreferrer">
+                        <IconButton>
+                            <Download size={24} />
+                        </IconButton>
+                    </a>
+                </div>
+            );
+        case "Audio":
+            return (
+                <div className={classNames(styles.actions, styles.audioAction)}>
+                    <Headphone size={24} className={styles.iconType} />
+                    <span className={styles.filename}>{filename}</span>
+                    <span className={styles.filesize}>{filesize}</span>
+                    <a
+                        href={download_url}
+                        className={styles.downloadIcon}
+                        download
+                        target="_blank"
+                        rel="noreferrer">
+                        <IconButton>
+                            <Download size={24} />
+                        </IconButton>
+                    </a>
+                </div>
+            );
+        case "Video":
+            return (
+                <div className={classNames(styles.actions, styles.videoAction)}>
+                    <Video size={24} className={styles.iconType} />
+                    <span className={styles.filename}>{filename}</span>
+                    <span className={styles.filesize}>
+                        {`${metadata.width}x${metadata.height}`} ({filesize})
+                    </span>
+                    <a
+                        href={download_url}
+                        className={styles.downloadIcon}
+                        download
+                        target="_blank"
+                        rel="noreferrer">
+                        <IconButton>
+                            <Download size={24} />
+                        </IconButton>
+                    </a>
+                </div>
+            );
+        default:
+            return (
+                <div className={styles.actions}>
+                    <File size={24} className={styles.iconType} />
+                    <span className={styles.filename}>{filename}</span>
+                    <span className={styles.filesize}>{filesize}</span>
+                    {metadata.type === "Text" && (
+                        <a
+                            href={open_url}
+                            target="_blank"
+                            className={styles.externalType}
+                            rel="noreferrer">
+                            <IconButton>
+                                <LinkExternal size={24} />
+                            </IconButton>
+                        </a>
+                    )}
+                    <a
+                        href={download_url}
+                        className={styles.downloadIcon}
+                        download
+                        target="_blank"
+                        rel="noreferrer">
+                        <IconButton>
+                            <Download size={24} />
+                        </IconButton>
+                    </a>
+                </div>
+            );
+    }
+}

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

+import styled from "styled-components";
+
+import { Children } from "../../../../types/Preact";
+
+const Grid = styled.div`
+    display: grid;
+    overflow: hidden;
+
+    max-width: min(var(--attachment-max-width), 100%, var(--width));
+    max-height: min(var(--attachment-max-height), var(--height));
+    aspect-ratio: var(--aspect-ratio);
+
+    img,
+    video {
+        min-width: 100%;
+        min-height: 100%;
+
+        width: auto;
+        height: auto;
+
+        max-width: 100%;
+        max-height: 100%;
+
+        grid-area: 1 / 1;
+    }
+
+    &.spoiler {
+        img,
+        video {
+            filter: blur(44px);
+        }
+
+        border-radius: var(--border-radius);
+    }
+`;
+
+export default Grid;
+
+type Props = Omit<
+    JSX.HTMLAttributes<HTMLDivElement>,
+    "children" | "as" | "style"
+> & {
+    style?: JSX.CSSProperties;
+    children?: Children;
+    width: number;
+    height: number;
+};
+
+export function SizedGrid(props: Props) {
+    const { width, height, children, style, ...divProps } = props;
+
+    return (
+        <Grid
+            {...divProps}
+            style={{
+                ...style,
+                "--width": `${width}px`,
+                "--height": `${height}px`,
+                "--aspect-ratio": width / height,
+            }}>
+            {children}
+        </Grid>
+    );
+}

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

+import { File } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { useHistory } from "react-router-dom";
+import { RelationshipStatus } from "revolt-api/types/Users";
+import { SYSTEM_USER_ID } from "revolt.js";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { Message } from "revolt.js/dist/maps/Messages";
+import styled, { css } from "styled-components";
+
+import { Text } from "preact-i18n";
+import { useLayoutEffect, useState } from "preact/hooks";
+
+import { useRenderState } from "../../../../lib/renderer/Singleton";
+
+import Markdown from "../../../markdown/Markdown";
+import UserShort from "../../user/UserShort";
+import { SystemMessage } from "../SystemMessage";
+
+interface Props {
+    channel: Channel;
+    index: number;
+    id: string;
+}
+
+export const ReplyBase = styled.div<{
+    head?: boolean;
+    fail?: boolean;
+    preview?: boolean;
+}>`
+    gap: 4px;
+    min-width: 0;
+    display: flex;
+    margin-inline-start: 30px;
+    margin-inline-end: 12px;
+    /*margin-bottom: 4px;*/
+    font-size: 0.8em;
+    user-select: none;
+    align-items: center;
+    color: var(--secondary-foreground);
+
+    &::before {
+        content: "";
+        height: 10px;
+        width: 28px;
+        margin-inline-end: 2px;
+        align-self: flex-end;
+        display: flex;
+        border-top: 2.2px solid var(--tertiary-foreground);
+        border-inline-start: 2.2px solid var(--tertiary-foreground);
+        border-start-start-radius: 6px;
+    }
+
+    * {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .user {
+        gap: 6px;
+        display: flex;
+        flex-shrink: 0;
+        font-weight: 600;
+        overflow: visible;
+        align-items: center;
+        padding: 2px 0;
+
+        span {
+            cursor: pointer;
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        /*&::before {
+            position:relative;
+            width: 50px;
+            height: 2px;
+            background: red;
+        }*/
+    }
+
+    .content {
+        padding: 2px 0;
+        gap: 4px;
+        display: flex;
+        cursor: pointer;
+        align-items: center;
+        flex-direction: row;
+        transition: filter 1s ease-in-out;
+        transition: transform ease-in-out 0.1s;
+        filter: brightness(1);
+
+        &:hover {
+            filter: brightness(2);
+        }
+
+        &:active {
+            transform: translateY(1px);
+        }
+
+        > * {
+            pointer-events: none;
+        }
+
+        /*> span > p {
+            display: flex;
+        }*/
+    }
+
+    > svg:first-child {
+        flex-shrink: 0;
+        transform: scaleX(-1);
+        color: var(--tertiary-foreground);
+    }
+
+    ${(props) =>
+        props.fail &&
+        css`
+            color: var(--tertiary-foreground);
+        `}
+
+    ${(props) =>
+        props.head &&
+        css`
+            margin-top: 12px;
+        `}
+
+    ${(props) =>
+        props.preview &&
+        css`
+            margin-left: 0;
+        `}
+`;
+
+export const MessageReply = observer(({ index, channel, id }: Props) => {
+    const view = useRenderState(channel._id);
+    if (view?.type !== "RENDER") return null;
+
+    const [message, setMessage] = useState<Message | undefined>(undefined);
+
+    useLayoutEffect(() => {
+        // ! FIXME: We should do this through the message renderer, so it can fetch it from cache if applicable.
+        const m = view.messages.find((x) => x._id === id);
+
+        if (m) {
+            setMessage(m);
+        } else {
+            channel.fetchMessage(id).then(setMessage);
+        }
+    }, [id, channel, view.messages]);
+
+    if (!message) {
+        return (
+            <ReplyBase head={index === 0} fail>
+                <span>
+                    <Text id="app.main.channel.misc.failed_load" />
+                </span>
+            </ReplyBase>
+        );
+    }
+
+    const history = useHistory();
+
+    return (
+        <ReplyBase head={index === 0}>
+            {message.author?.relationship === RelationshipStatus.Blocked ? (
+                <Text id="app.main.channel.misc.blocked_user" />
+            ) : (
+                <>
+                    {message.author_id === SYSTEM_USER_ID ? (
+                        <SystemMessage message={message} hideInfo />
+                    ) : (
+                        <>
+                            <div className="user">
+                                <UserShort user={message.author} size={16} />
+                            </div>
+                            <div
+                                className="content"
+                                onClick={() => {
+                                    const channel = message.channel!;
+                                    if (
+                                        channel.channel_type === "TextChannel"
+                                    ) {
+                                        console.log(
+                                            `/server/${channel.server_id}/channel/${channel._id}/${message._id}`,
+                                        );
+                                        history.push(
+                                            `/server/${channel.server_id}/channel/${channel._id}/${message._id}`,
+                                        );
+                                    } else {
+                                        history.push(
+                                            `/channel/${channel._id}/${message._id}`,
+                                        );
+                                    }
+                                }}>
+                                {message.attachments && (
+                                    <>
+                                        <File size={16} />
+                                        <em>
+                                            {message.attachments.length > 1 ? (
+                                                <Text id="app.main.channel.misc.sent_multiple_files" />
+                                            ) : (
+                                                <Text id="app.main.channel.misc.sent_file" />
+                                            )}
+                                        </em>
+                                    </>
+                                )}
+                                <Markdown
+                                    disallowBigEmoji
+                                    content={(
+                                        message.content as string
+                                    ).replace(/\n/g, " ")}
+                                />
+                            </div>
+                        </>
+                    )}
+                </>
+            )}
+        </ReplyBase>
+    );
+});

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

+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
+const Base = styled.div`
+    display: grid;
+    place-items: center;
+
+    z-index: 1;
+    grid-area: 1 / 1;
+
+    cursor: pointer;
+    user-select: none;
+    text-transform: uppercase;
+
+    span {
+        padding: 8px;
+        color: var(--foreground);
+        background: var(--primary-background);
+        border-radius: calc(var(--border-radius) * 4);
+    }
+`;
+
+interface Props {
+    set: (v: boolean) => void;
+}
+
+export default function Spoiler({ set }: Props) {
+    return (
+        <Base onClick={() => set(false)}>
+            <span>
+                <Text id="app.main.channel.misc.spoiler_attachment" />
+            </span>
+        </Base>
+    );
+}

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

+import axios from "axios";
+import { Attachment } from "revolt-api/types/Autumn";
+
+import styles from "./Attachment.module.scss";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
+import {
+    AppContext,
+    StatusContext,
+} from "../../../../context/revoltjs/RevoltClient";
+
+import Preloader from "../../../ui/Preloader";
+
+interface Props {
+    attachment: Attachment;
+}
+
+const fileCache: { [key: string]: string } = {};
+
+export default function TextFile({ attachment }: Props) {
+    const [content, setContent] = useState<undefined | string>(undefined);
+    const [loading, setLoading] = useState(false);
+    const status = useContext(StatusContext);
+    const client = useContext(AppContext);
+
+    const url = client.generateFileURL(attachment)!;
+
+    useEffect(() => {
+        if (typeof content !== "undefined") return;
+        if (loading) return;
+
+        if (attachment.size > 20_000) {
+            setContent(
+                "This file is > 20 KB, for your sake I did not load it.\nSee tracking issue here for previews: https://gitlab.insrt.uk/revolt/revite/-/issues/2",
+            );
+            return;
+        }
+
+        setLoading(true);
+
+        const cached = fileCache[attachment._id];
+        if (cached) {
+            setContent(cached);
+            setLoading(false);
+        } else {
+            axios
+                .get(url, { transformResponse: [] })
+                .then((res) => {
+                    setContent(res.data);
+                    fileCache[attachment._id] = res.data;
+                    setLoading(false);
+                })
+                .catch(() => {
+                    console.error(
+                        "Failed to load text file. [",
+                        attachment._id,
+                        "]",
+                    );
+                    setLoading(false);
+                });
+        }
+    }, [content, loading, status, attachment._id, attachment.size, url]);
+
+    return (
+        <div
+            className={styles.textContent}
+            data-loading={typeof content === "undefined"}>
+            {content ? (
+                <pre>
+                    <code>{content}</code>
+                </pre>
+            ) : (
+                <RequiresOnline>
+                    <Preloader type="ring" />
+                </RequiresOnline>
+            )}
+        </div>
+    );
+}

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

+/* eslint-disable react-hooks/rules-of-hooks */
+import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { useEffect, useState } from "preact/hooks";
+
+import { determineFileSize } from "../../../../lib/fileSize";
+
+import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox";
+
+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;
+
+    &.fade {
+        opacity: 0.4;
+    }
+
+    span.fn {
+        margin: auto;
+        font-size: 0.8em;
+        overflow: hidden;
+        max-width: 180px;
+        text-align: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: var(--secondary-foreground);
+    }
+
+    span.size {
+        font-size: 0.6em;
+        color: var(--tertiary-foreground);
+        text-align: center;
+    }
+`;
+
+const Description = styled.div`
+    gap: 4px;
+    display: flex;
+    font-size: 0.9em;
+    align-items: center;
+    color: var(--secondary-foreground);
+`;
+
+const Divider = styled.div`
+    width: 4px;
+    height: 130px;
+    flex-shrink: 0;
+    border-radius: var(--border-radius);
+    background: var(--tertiary-background);
+`;
+
+const EmptyEntry = styled.div`
+    width: 100px;
+    height: 100px;
+    display: grid;
+    flex-shrink: 0;
+    cursor: pointer;
+    place-items: center;
+    border-radius: var(--border-radius);
+    background: var(--primary-background);
+    transition: 0.1s ease background-color;
+
+    &:hover {
+        background: var(--secondary-background);
+    }
+`;
+
+const PreviewBox = styled.div`
+    display: grid;
+    grid-template: "main" 100px / minmax(100px, 1fr);
+    justify-items: center;
+
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: var(--border-radius);
+    background: var(--primary-background);
+
+    .icon,
+    .overlay {
+        grid-area: main;
+    }
+
+    .icon {
+        height: 100px;
+        margin-bottom: 4px;
+        object-fit: contain;
+    }
+
+    .overlay {
+        display: grid;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        height: 100%;
+
+        opacity: 0;
+        visibility: hidden;
+
+        transition: 0.1s ease opacity;
+    }
+
+    &:hover {
+        .overlay {
+            visibility: visible;
+            opacity: 1;
+            background-color: rgba(0, 0, 0, 0.8);
+        }
+    }
+`;
+
+function FileEntry({
+    file,
+    remove,
+    index,
+}: {
+    file: File;
+    remove?: () => void;
+    index: number;
+}) {
+    if (!file.type.startsWith("image/"))
+        return (
+            <Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
+                <PreviewBox onClick={remove}>
+                    <EmptyEntry className="icon">
+                        <File size={36} />
+                    </EmptyEntry>
+                    <div class="overlay">
+                        <XCircle size={36} />
+                    </div>
+                </PreviewBox>
+                <span class="fn">{file.name}</span>
+                <span class="size">{determineFileSize(file.size)}</span>
+            </Entry>
+        );
+
+    const [url, setURL] = useState("");
+
+    useEffect(() => {
+        const url: string = URL.createObjectURL(file);
+        setURL(url);
+        return () => URL.revokeObjectURL(url);
+    }, [file]);
+
+    return (
+        <Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
+            <PreviewBox onClick={remove}>
+                <img class="icon" src={url} alt={file.name} loading="eager" />
+                <div class="overlay">
+                    <XCircle size={36} />
+                </div>
+            </PreviewBox>
+            <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) => (
+                    // @ts-expect-error brokey
+                    // eslint-disable-next-line react/jsx-no-undef
+                    <Fragment key={file.name}>
+                        {index === CAN_UPLOAD_AT_ONCE && <Divider />}
+                        <FileEntry
+                            index={index}
+                            file={file}
+                            key={file.name}
+                            remove={
+                                state.type === "attached"
+                                    ? () => removeFile(index)
+                                    : undefined
+                            }
+                        />
+                    </Fragment>
+                ))}
+                {state.type === "attached" && (
+                    <EmptyEntry onClick={addFile}>
+                        <Plus size={48} />
+                    </EmptyEntry>
+                )}
+            </Carousel>
+            {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

+import { DownArrowAlt } from "@styled-icons/boxicons-regular";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
+import {
+    SingletonMessageRenderer,
+    useRenderState,
+} from "../../../../lib/renderer/Singleton";
+
+const Bar = styled.div`
+    z-index: 10;
+    position: relative;
+
+    > div {
+        top: -26px;
+        height: 28px;
+        width: 100%;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        font-size: 13px;
+        padding: 0 8px;
+        user-select: none;
+        justify-content: space-between;
+        color: var(--secondary-foreground);
+        transition: color ease-in-out 0.08s;
+        background: var(--secondary-background);
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
+
+        > div {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        &:hover {
+            color: var(--primary-text);
+        }
+
+        &:active {
+            transform: translateY(1px);
+        }
+
+        @media (pointer: coarse) {
+            height: 34px;
+            top: -32px;
+            padding: 0 12px;
+        }
+    }
+`;
+
+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" />{" "}
+                    <DownArrowAlt size={20} />
+                </div>
+            </div>
+        </Bar>
+    );
+}

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

+import { At, Reply as ReplyIcon } from "@styled-icons/boxicons-regular";
+import { File, XCircle } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { SYSTEM_USER_ID } from "revolt.js";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { StateUpdater, useEffect } from "preact/hooks";
+
+import { internalSubscribe } from "../../../../lib/eventEmitter";
+import { useRenderState } from "../../../../lib/renderer/Singleton";
+
+import { Reply } from "../../../../redux/reducers/queue";
+
+import IconButton from "../../../ui/IconButton";
+
+import Markdown from "../../../markdown/Markdown";
+import UserShort from "../../user/UserShort";
+import { SystemMessage } from "../SystemMessage";
+import { ReplyBase } from "../attachments/MessageReply";
+
+interface Props {
+    channel: string;
+    replies: Reply[];
+    setReplies: StateUpdater<Reply[]>;
+}
+
+const Base = styled.div`
+    display: flex;
+    height: 30px;
+    padding: 0 12px;
+    user-select: none;
+    align-items: center;
+    background: var(--message-box);
+
+    > div {
+        flex-grow: 1;
+        margin-bottom: 0;
+
+        &::before {
+            display: none;
+        }
+    }
+
+    .toggle {
+        gap: 4px;
+        display: flex;
+        font-size: 12px;
+        align-items: center;
+        font-weight: 600;
+    }
+
+    .username {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-weight: 600;
+    }
+
+    .message {
+        display: flex;
+    }
+
+    .actions {
+        gap: 12px;
+        display: flex;
+    }
+
+    /*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse
+        .actions > svg {
+            height: 25px;
+        }
+    }*/
+`;
+
+// ! FIXME: Move to global config
+const MAX_REPLIES = 5;
+export default observer(({ channel, replies, setReplies }: Props) => {
+    useEffect(() => {
+        return internalSubscribe(
+            "ReplyBar",
+            "add",
+            (id) =>
+                replies.length < MAX_REPLIES &&
+                !replies.find((x) => x.id === id) &&
+                setReplies([...replies, { id: id as string, mention: false }]),
+        );
+    }, [replies, setReplies]);
+
+    const view = useRenderState(channel);
+    if (view?.type !== "RENDER") return null;
+
+    const ids = replies.map((x) => x.id);
+    const messages = view.messages.filter((x) => ids.includes(x._id));
+
+    return (
+        <div>
+            {replies.map((reply, index) => {
+                const message = messages.find((x) => reply.id === x._id);
+                // ! FIXME: better solution would be to
+                // ! have a hook for resolving messages from
+                // ! render state along with relevant users
+                // -> which then fetches any unknown messages
+                if (!message)
+                    return (
+                        <span>
+                            <Text id="app.main.channel.misc.failed_load" />
+                        </span>
+                    );
+
+                return (
+                    <Base key={reply.id}>
+                        <ReplyBase preview>
+                            <ReplyIcon size={22} />
+                            <div class="username">
+                                <UserShort user={message.author} size={16} />
+                            </div>
+                            <div class="message">
+                                {message.attachments && (
+                                    <>
+                                        <File size={16} />
+                                        <em>
+                                            {message.attachments.length > 1 ? (
+                                                <Text id="app.main.channel.misc.sent_multiple_files" />
+                                            ) : (
+                                                <Text id="app.main.channel.misc.sent_file" />
+                                            )}
+                                        </em>
+                                    </>
+                                )}
+                                {message.author_id === SYSTEM_USER_ID ? (
+                                    <SystemMessage message={message} />
+                                ) : (
+                                    <Markdown
+                                        disallowBigEmoji
+                                        content={(
+                                            message.content as string
+                                        ).replace(/\n/g, " ")}
+                                    />
+                                )}
+                            </div>
+                        </ReplyBase>
+                        <span class="actions">
+                            <IconButton
+                                onClick={() =>
+                                    setReplies(
+                                        replies.map((_, i) =>
+                                            i === index
+                                                ? { ..._, mention: !_.mention }
+                                                : _,
+                                        ),
+                                    )
+                                }>
+                                <span class="toggle">
+                                    <At size={16} />{" "}
+                                    {reply.mention ? "ON" : "OFF"}
+                                </span>
+                            </IconButton>
+                            <IconButton
+                                onClick={() =>
+                                    setReplies(
+                                        replies.filter((_, i) => i !== index),
+                                    )
+                                }>
+                                <XCircle size={16} />
+                            </IconButton>
+                        </span>
+                    </Base>
+                );
+            })}
+        </div>
+    );
+});

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

+import { observer } from "mobx-react-lite";
+import { RelationshipStatus } from "revolt-api/types/Users";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
+interface Props {
+    channel: Channel;
+}
+
+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 default observer(({ channel }: Props) => {
+    const users = channel.typing.filter(
+        (x) =>
+            typeof x !== "undefined" &&
+            x._id !== x.client.user!._id &&
+            x.relationship !== RelationshipStatus.Blocked,
+    );
+
+    if (users.length > 0) {
+        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 userlist = [...users].map((x) => x!.username);
+            const user = userlist.pop();
+
+            /*for (let i = 0; i < userlist.length - 1; i++) {
+                userlist.splice(i * 2 + 1, 0, ", ");
+            }*/
+
+            text = (
+                <Text
+                    id="app.main.channel.typing.multiple"
+                    fields={{
+                        user,
+                        userlist: userlist.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
+                                key={user!._id}
+                                loading="eager"
+                                src={user!.generateAvatarURL({ max_side: 256 })}
+                            />
+                        ))}
+                    </div>
+                    <div className="usernames">{text}</div>
+                </div>
+            </Base>
+        );
+    }
+
+    return null;
+});

src/components/common/messaging/embed/Embed.module.scss

+.embed {
+    margin: .2em 0;
+
+    iframe {
+        border: none;
+        border-radius: var(--border-radius);
+    }
+
+    &.image {
+        cursor: pointer;
+    }
+
+    &.website {
+        gap: 6px;
+        display: flex;
+        flex-direction: row;
+
+        > div:nth-child(1) {
+            gap: 6px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+        }
+
+        border-inline-start-width: 4px;
+        border-inline-start-style: solid;
+
+        padding: 12px;
+        width: fit-content;
+        background: var(--primary-header);
+        border-radius: var(--border-radius);
+
+        .siteinfo {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            user-select: none;
+
+            .favicon {
+                width: 14px;
+                height: 14px;
+                flex-shrink: 0;
+            }
+
+            .site {
+                font-size: 11px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: var(--secondary-foreground);
+            }
+        }
+
+        .author {
+            font-size: 1em;
+            color: var(--primary-text);
+            display: inline-block;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        .title {
+            display: inline-block;
+            font-size: 1.1em;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        .description {
+            margin: 0;
+            font-size: 12px;
+            overflow: hidden;
+            display: -webkit-box;
+            white-space: pre-wrap;
+            -webkit-line-clamp: 6;
+            -webkit-box-orient: vertical;
+        }
+
+        .footer {
+            font-size: 12px;
+        }
+        
+        img.image {
+            cursor: pointer;
+            object-fit: contain;
+            border-radius: var(--border-radius);
+        }
+    }
+}
+
+// TODO: unified actions css (see attachment.module.scss for other actions css)
+.actions {
+    display: grid;
+    grid-template: 
+        "name open" auto
+        "size open" auto
+        / minmax(20px, 1fr) min-content;
+
+    align-items: center;
+    column-gap: 12px;
+    
+    width: 100%;
+    padding: 8px;
+    overflow: none;
+
+    color: var(--foreground);
+    background: var(--secondary-background);
+
+    span {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+    
+    .filesize {
+        grid-area: size;
+
+        font-size: 10px;
+        color: var(--secondary-foreground);
+    }
+
+    .openIcon {
+        grid-area: open;
+    }
+}

src/components/common/messaging/embed/Embed.tsx

+import { Embed as EmbedI } from "revolt-api/types/January";
+
+import styles from "./Embed.module.scss";
+import classNames from "classnames";
+import { useContext } from "preact/hooks";
+
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { useClient } from "../../../../context/revoltjs/RevoltClient";
+
+import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
+import EmbedMedia from "./EmbedMedia";
+
+interface Props {
+    embed: EmbedI;
+}
+
+const MAX_EMBED_WIDTH = 480;
+const MAX_EMBED_HEIGHT = 640;
+const CONTAINER_PADDING = 24;
+const MAX_PREVIEW_SIZE = 150;
+
+export default function Embed({ embed }: Props) {
+    const client = useClient();
+
+    const { openScreen } = useIntermediate();
+    const maxWidth = Math.min(
+        useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
+        MAX_EMBED_WIDTH,
+    );
+
+    function calculateSize(
+        w: number,
+        h: number,
+    ): { width: number; height: number } {
+        const limitingWidth = Math.min(maxWidth, w);
+
+        const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
+
+        // Calculate smallest possible WxH.
+        const width = Math.min(limitingWidth, limitingHeight * (w / h));
+
+        const height = Math.min(limitingHeight, limitingWidth * (h / w));
+
+        return { width, height };
+    }
+
+    switch (embed.type) {
+        case "Website": {
+            // Determine special embed size.
+            let mw, mh;
+            const largeMedia =
+                (embed.special && embed.special.type !== "None") ||
+                embed.image?.size === "Large";
+            switch (embed.special?.type) {
+                case "YouTube":
+                case "Bandcamp": {
+                    mw = embed.video?.width ?? 1280;
+                    mh = embed.video?.height ?? 720;
+                    break;
+                }
+                case "Twitch": {
+                    mw = 1280;
+                    mh = 720;
+                    break;
+                }
+                default: {
+                    if (embed.image?.size === "Preview") {
+                        mw = MAX_EMBED_WIDTH;
+                        mh = Math.min(
+                            embed.image.height ?? 0,
+                            MAX_PREVIEW_SIZE,
+                        );
+                    } else {
+                        mw = embed.image?.width ?? MAX_EMBED_WIDTH;
+                        mh = embed.image?.height ?? 0;
+                    }
+                }
+            }
+
+            const { width, height } = calculateSize(mw, mh);
+            return (
+                <div
+                    className={classNames(styles.embed, styles.website)}
+                    style={{
+                        borderInlineStartColor:
+                            embed.color ?? "var(--tertiary-background)",
+                        width: width + CONTAINER_PADDING,
+                    }}>
+                    <div>
+                        {embed.site_name && (
+                            <div className={styles.siteinfo}>
+                                {embed.icon_url && (
+                                    <img
+                                        loading="lazy"
+                                        className={styles.favicon}
+                                        src={client.proxyFile(embed.icon_url)}
+                                        draggable={false}
+                                        onError={(e) =>
+                                            (e.currentTarget.style.display =
+                                                "none")
+                                        }
+                                    />
+                                )}
+                                <div className={styles.site}>
+                                    {embed.site_name}{" "}
+                                </div>
+                            </div>
+                        )}
+
+                        {/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/}
+                        {embed.title && (
+                            <span>
+                                <a
+                                    href={embed.url}
+                                    target={"_blank"}
+                                    className={styles.title}
+                                    rel="noreferrer">
+                                    {embed.title}
+                                </a>
+                            </span>
+                        )}
+                        {embed.description && (
+                            <div className={styles.description}>
+                                {embed.description}
+                            </div>
+                        )}
+
+                        {largeMedia && (
+                            <EmbedMedia embed={embed} height={height} />
+                        )}
+                    </div>
+                    {!largeMedia && (
+                        <div>
+                            <EmbedMedia
+                                embed={embed}
+                                width={
+                                    height *
+                                    ((embed.image?.width ?? 0) /
+                                        (embed.image?.height ?? 0))
+                                }
+                                height={height}
+                            />
+                        </div>
+                    )}
+                </div>
+            );
+        }
+        case "Image": {
+            return (
+                <img
+                    className={classNames(styles.embed, styles.image)}
+                    style={calculateSize(embed.width, embed.height)}
+                    src={client.proxyFile(embed.url)}
+                    type="text/html"
+                    frameBorder="0"
+                    loading="lazy"
+                    onClick={() => openScreen({ id: "image_viewer", embed })}
+                    onMouseDown={(ev) =>
+                        ev.button === 1 && window.open(embed.url, "_blank")
+                    }
+                />
+            );
+        }
+        default:
+            return null;
+    }
+}

src/components/common/messaging/embed/EmbedMedia.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
+import { Embed } from "revolt-api/types/January";
+
+import styles from "./Embed.module.scss";
+
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { useClient } from "../../../../context/revoltjs/RevoltClient";
+
+interface Props {
+    embed: Embed;
+    width?: number;
+    height: number;
+}
+
+export default function EmbedMedia({ embed, width, height }: Props) {
+    if (embed.type !== "Website") return null;
+    const { openScreen } = useIntermediate();
+    const client = useClient();
+
+    switch (embed.special?.type) {
+        case "YouTube":
+            return (
+                <iframe
+                    loading="lazy"
+                    src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
+                    allowFullScreen
+                    style={{ height }}
+                />
+            );
+        case "Twitch":
+            return (
+                <iframe
+                    src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${
+                        embed.special.id
+                    }&parent=${window.location.hostname}&autoplay=false`}
+                    frameBorder="0"
+                    allowFullScreen
+                    scrolling="no"
+                    loading="lazy"
+                    style={{ height }}
+                />
+            );
+        case "Spotify":
+            return (
+                <iframe
+                    src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
+                    loading="lazy"
+                    frameBorder="0"
+                    allowFullScreen
+                    allowTransparency
+                    style={{ height }}
+                />
+            );
+        case "Soundcloud":
+            return (
+                <iframe
+                    src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(
+                        embed.url!,
+                    )}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
+                    frameBorder="0"
+                    scrolling="no"
+                    loading="lazy"
+                    style={{ height }}
+                />
+            );
+        case "Bandcamp": {
+            return (
+                <iframe
+                    src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${
+                        embed.special.id
+                    }/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
+                    seamless
+                    loading="lazy"
+                    style={{ height }}
+                />
+            );
+        }
+        default: {
+            if (embed.image) {
+                const url = embed.image.url;
+                return (
+                    <img
+                        className={styles.image}
+                        src={client.proxyFile(url)}
+                        loading="lazy"
+                        style={{ width, height }}
+                        onClick={() =>
+                            openScreen({
+                                id: "image_viewer",
+                                embed: embed.image,
+                            })
+                        }
+                        onMouseDown={(ev) =>
+                            ev.button === 1 && window.open(url, "_blank")
+                        }
+                    />
+                );
+            }
+        }
+    }
+
+    return null;
+}

src/components/common/messaging/embed/EmbedMediaActions.tsx

+import { LinkExternal } from "@styled-icons/boxicons-regular";
+import { EmbedImage } from "revolt-api/types/January";
+
+import styles from "./Embed.module.scss";
+
+import IconButton from "../../../ui/IconButton";
+
+interface Props {
+    embed: EmbedImage;
+}
+
+export default function EmbedMediaActions({ embed }: Props) {
+    const filename = embed.url.split("/").pop();
+
+    return (
+        <div className={styles.actions}>
+            <span className={styles.filename}>{filename}</span>
+            <span className={styles.filesize}>
+                {`${embed.width}x${embed.height}`}
+            </span>
+            <a
+                href={embed.url}
+                class={styles.openIcon}
+                target="_blank"
+                rel="noreferrer">
+                <IconButton>
+                    <LinkExternal size={24} />
+                </IconButton>
+            </a>
+        </div>
+    );
+}

src/components/common/UserCheckbox.tsx → src/components/common/user/UserCheckbox.tsx

-import { User } from "revolt.js";
+import { User } from "revolt.js/dist/maps/Users";
+
+import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
+
 import UserIcon from "./UserIcon";
-import Checkbox, { CheckboxProps } from "../ui/Checkbox";
+import { Username } from "./UserShort";
 
 type UserProps = Omit<CheckboxProps, "children"> & { user: User };
 
@@ -8,7 +11,7 @@ export default function UserCheckbox({ user, ...props }: UserProps) {
     return (
         <Checkbox {...props}>
             <UserIcon target={user} size={32} />
-            {user.username}
+            <Username user={user} />
         </Checkbox>
     );
 }

src/components/common/UserHeader.tsx → src/components/common/user/UserHeader.tsx

-import Tooltip from "./Tooltip";
-import { User } from "revolt.js";
-import Header from "../ui/Header";
-import UserIcon from "./UserIcon";
-import { Text } from "preact-i18n";
-import UserStatus from './UserStatus';
-import styled from "styled-components";
-import { Localizer } from 'preact-i18n';
+import { Cog } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
-import IconButton from "../ui/IconButton";
-import { Settings } from "@styled-icons/feather";
+import { User } from "revolt.js/dist/maps/Users";
+import styled from "styled-components";
+
 import { openContextMenu } from "preact-context-menu";
-import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
-import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { Text, Localizer } from "preact-i18n";
+
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+
+import Header from "../../ui/Header";
+import IconButton from "../../ui/IconButton";
+
+import Tooltip from "../Tooltip";
+import UserStatus from "./UserStatus";
 
 const HeaderBase = styled.div`
     gap: 0;
@@ -19,7 +23,7 @@ const HeaderBase = styled.div`
     min-width: 0;
     display: flex;
     flex-direction: column;
-    
+
     * {
         min-width: 0;
         overflow: hidden;
@@ -41,45 +45,39 @@ const HeaderBase = styled.div`
 `;
 
 interface Props {
-    user: User
+    user: User;
 }
 
-export default function UserHeader({ user }: Props) {
+export default observer(({ user }: Props) => {
     const { writeClipboard } = useIntermediate();
 
-    function openPresenceSelector() {
-        openContextMenu("Status");
-    }
-
     return (
-        <Header placement="secondary">
-            <UserIcon
-                target={user}
-                size={32}
-                status
-                onClick={openPresenceSelector}
-            />
+        <Header borders placement="secondary">
             <HeaderBase>
                 <Localizer>
                     <Tooltip content={<Text id="app.special.copy_username" />}>
-                        <span className="username"
+                        <span
+                            className="username"
                             onClick={() => writeClipboard(user.username)}>
                             @{user.username}
                         </span>
                     </Tooltip>
                 </Localizer>
-                <span className="status"
-                    onClick={openPresenceSelector}>
+                <span
+                    className="status"
+                    onClick={() => openContextMenu("Status")}>
                     <UserStatus user={user} />
                 </span>
             </HeaderBase>
-            { !isTouchscreenDevice && <div className="actions">
-                <Link to="/settings">
-                    <IconButton>
-                        <Settings size={24} />
-                    </IconButton>
-                </Link>
-            </div> }
+            {!isTouchscreenDevice && (
+                <div className="actions">
+                    <Link to="/settings">
+                        <IconButton>
+                            <Cog size={24} />
+                        </IconButton>
+                    </Link>
+                </div>
+            )}
         </Header>
-    )
-}
+    );
+});

src/components/common/user/UserHover.tsx

+import { User } from "revolt.js/dist/maps/Users";
+import styled from "styled-components";
+
+import { Children } from "../../../types/Preact";
+import Tooltip from "../Tooltip";
+import { Username } from "./UserShort";
+import UserStatus from "./UserStatus";
+
+interface Props {
+    user?: User;
+    children: Children;
+}
+
+const Base = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    .username {
+        font-size: 13px;
+        font-weight: 600;
+    }
+
+    .status {
+        font-size: 11px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .tip {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        margin-top: 2px;
+        color: var(--secondary-foreground);
+    }
+`;
+
+export default function UserHover({ user, children }: Props) {
+    return (
+        <Tooltip
+            placement="right-end"
+            content={
+                <Base>
+                    <Username className="username" user={user} />
+                    <span className="status">
+                        <UserStatus user={user} />
+                    </span>
+                    {/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
+                </Base>
+            }>
+            {children}
+        </Tooltip>
+    );
+}

src/components/common/user/UserIcon.tsx

+import { MicrophoneOff } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { Presence } from "revolt-api/types/Users";
+import { User } from "revolt.js/dist/maps/Users";
+import styled, { css } from "styled-components";
+
+import { useContext } from "preact/hooks";
+
+import { ThemeContext } from "../../../context/Theme";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+
+import IconBase, { IconBaseProps } from "../IconBase";
+import fallback from "../assets/user.png";
+
+type VoiceStatus = "muted";
+interface Props extends IconBaseProps<User> {
+    mask?: string;
+    status?: boolean;
+    voice?: VoiceStatus;
+}
+
+export function useStatusColour(user?: User) {
+    const theme = useContext(ThemeContext);
+
+    return user?.online && user?.status?.presence !== Presence.Invisible
+        ? user?.status?.presence === Presence.Idle
+            ? theme["status-away"]
+            : user?.status?.presence === Presence.Busy
+            ? theme["status-busy"]
+            : theme["status-online"]
+        : theme["status-invisible"];
+}
+
+const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        stroke: white;
+    }
+
+    ${(props) =>
+        props.status === "muted" &&
+        css`
+            background: var(--error);
+        `}
+`;
+
+export default observer(
+    (
+        props: Props &
+            Omit<
+                JSX.SVGAttributes<SVGSVGElement>,
+                keyof Props | "children" | "as"
+            >,
+    ) => {
+        const client = useContext(AppContext);
+
+        const {
+            target,
+            attachment,
+            size,
+            status,
+            animate,
+            mask,
+            hover,
+            ...svgProps
+        } = props;
+        const iconURL =
+            client.generateFileURL(
+                target?.avatar ?? attachment,
+                { max_side: 256 },
+                animate,
+            ) ?? (target ? target.defaultAvatarURL : fallback);
+
+        return (
+            <IconBase
+                {...svgProps}
+                width={size}
+                height={size}
+                hover={hover}
+                aria-hidden="true"
+                viewBox="0 0 32 32">
+                <foreignObject
+                    x="0"
+                    y="0"
+                    width="32"
+                    height="32"
+                    class="icon"
+                    mask={mask ?? (status ? "url(#user)" : undefined)}>
+                    {<img src={iconURL} draggable={false} loading="lazy" />}
+                </foreignObject>
+                {props.status && (
+                    <circle
+                        cx="27"
+                        cy="27"
+                        r="5"
+                        fill={useStatusColour(target)}
+                    />
+                )}
+                {props.voice && (
+                    <foreignObject x="22" y="22" width="10" height="10">
+                        <VoiceIndicator status={props.voice}>
+                            {props.voice === "muted" && (
+                                <MicrophoneOff size={6} />
+                            )}
+                        </VoiceIndicator>
+                    </foreignObject>
+                )}
+            </IconBase>
+        );
+    },
+);

src/components/common/user/UserShort.tsx

+import { observer } from "mobx-react-lite";
+import { useParams } from "react-router-dom";
+import { User } from "revolt.js/dist/maps/Users";
+
+import { Text } from "preact-i18n";
+
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import UserIcon from "./UserIcon";
+
+export const Username = observer(
+    ({
+        user,
+        ...otherProps
+    }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) => {
+        let username = user?.username;
+        let color;
+
+        if (user) {
+            const { server } = useParams<{ server?: string }>();
+            if (server) {
+                const client = useClient();
+                const member = client.members.getKey({
+                    server,
+                    user: user._id,
+                });
+
+                if (member) {
+                    if (member.nickname) {
+                        username = member.nickname;
+                    }
+
+                    if (member.roles && member.roles.length > 0) {
+                        const srv = client.servers.get(member._id.server);
+                        if (srv?.roles) {
+                            for (const role of member.roles) {
+                                const c = srv.roles[role].colour;
+                                if (c) {
+                                    color = c;
+                                    continue;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        return (
+            <span {...otherProps} style={{ color }}>
+                {username ?? <Text id="app.main.channel.unknown_user" />}
+            </span>
+        );
+    },
+);
+
+export default function UserShort({
+    user,
+    size,
+}: {
+    user?: User;
+    size?: number;
+}) {
+    return (
+        <>
+            <UserIcon size={size ?? 24} target={user} />
+            <Username user={user} />
+        </>
+    );
+}

src/components/common/UserStatus.tsx → src/components/common/user/UserStatus.tsx

-import { User } from "revolt.js";
+import { observer } from "mobx-react-lite";
+import { Presence } from "revolt-api/types/Users";
+import { User } from "revolt.js/dist/maps/Users";
+
 import { Text } from "preact-i18n";
-import { Users } from "revolt.js/dist/api/objects";
+
+import Tooltip from "../Tooltip";
 
 interface Props {
-    user: User;
+    user?: User;
+    tooltip?: boolean;
 }
 
-export default function UserStatus({ user }: Props) {
-    if (user.online) {
+export default observer(({ user, tooltip }: Props) => {
+    if (user?.online) {
         if (user.status?.text) {
-            return <>{user.status?.text}</>;
+            if (tooltip) {
+                return (
+                    <Tooltip arrow={undefined} content={user.status.text}>
+                        {user.status.text}
+                    </Tooltip>
+                );
+            }
+
+            return <>{user.status.text}</>;
         }
 
-        if (user.status?.presence === Users.Presence.Busy) {
+        if (user.status?.presence === Presence.Busy) {
             return <Text id="app.status.busy" />;
         }
 
-        if (user.status?.presence === Users.Presence.Idle) {
+        if (user.status?.presence === Presence.Idle) {
             return <Text id="app.status.idle" />;
         }
 
-        if (user.status?.presence === Users.Presence.Invisible) {
+        if (user.status?.presence === Presence.Invisible) {
             return <Text id="app.status.offline" />;
         }
 
@@ -28,4 +41,4 @@ export default function UserStatus({ user }: Props) {
     }
 
     return <Text id="app.status.offline" />;
-}
+});