src/components/common/AgeGate.tsx

+import { observer } from "mobx-react-lite";
+import { useHistory } from "react-router-dom";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { useState } from "preact/hooks";
+
+import { dispatch, getState } from "../../redux";
+
+import Button from "../ui/Button";
+import Checkbox from "../ui/Checkbox";
+
+import { Children } from "../../types/Preact";
+
+const Base = styled.div`
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    padding: 12px;
+
+    img {
+        height: 150px;
+    }
+
+    .subtext {
+        color: var(--secondary-foreground);
+        margin-bottom: 12px;
+        font-size: 14px;
+    }
+
+    .actions {
+        margin-top: 20px;
+        display: flex;
+        gap: 12px;
+    }
+`;
+
+type Props = {
+    gated: boolean;
+    children: Children;
+} & {
+    type: "channel";
+    channel: Channel;
+};
+
+export default observer((props: Props) => {
+    const history = useHistory();
+    const [consent, setConsent] = useState(
+        getState().sectionToggle["nsfw"] ?? false,
+    );
+    const [ageGate, setAgeGate] = useState(false);
+
+    if (ageGate || !props.gated) {
+        return <>{props.children}</>;
+    }
+    if (
+        !(
+            props.channel.channel_type === "Group" ||
+            props.channel.channel_type === "TextChannel"
+        )
+    )
+        return <>{props.children}</>;
+
+    return (
+        <Base>
+            <img
+                loading="eager"
+                src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
+                draggable={false}
+            />
+            <h2>{props.channel.name}</h2>
+            <span className="subtext">
+                <Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
+                <a href="#">
+                    <Text id={`app.main.channel.nsfw.learn_more`} />
+                </a>
+            </span>
+
+            <Checkbox
+                checked={consent}
+                onChange={(v) => {
+                    setConsent(v);
+                    if (v) {
+                        dispatch({
+                            type: "SECTION_TOGGLE_SET",
+                            id: "nsfw",
+                            state: true,
+                        });
+                    } else {
+                        dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" });
+                    }
+                }}>
+                <Text id="app.main.channel.nsfw.confirm" />
+            </Checkbox>
+            <div className="actions">
+                <Button contrast onClick={() => history.goBack()}>
+                    <Text id="app.special.modals.actions.back" />
+                </Button>
+                <Button contrast onClick={() => consent && setAgeGate(true)}>
+                    <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
+                </Button>
+            </div>
+        </Base>
+    );
+});

src/components/common/AutoComplete.tsx

+import { SYSTEM_USER_ID } from "revolt.js";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { User } from "revolt.js/dist/maps/Users";
+import styled, { css } from "styled-components";
+
+import { StateUpdater, useState } from "preact/hooks";
+
+import { useClient } from "../../context/revoltjs/RevoltClient";
+
+import { emojiDictionary } from "../../assets/emojis";
+import ChannelIcon from "./ChannelIcon";
+import Emoji from "./Emoji";
+import UserIcon from "./user/UserIcon";
+
+export type AutoCompleteState =
+    | { type: "none" }
+    | ({ selected: number; within: boolean } & (
+          | {
+                type: "emoji";
+                matches: string[];
+            }
+          | {
+                type: "user";
+                matches: User[];
+            }
+          | {
+                type: "channel";
+                matches: Channel[];
+            }
+      ));
+
+export type SearchClues = {
+    users?: { type: "channel"; id: string } | { type: "all" };
+    channels?: { server: string };
+};
+
+export type AutoCompleteProps = {
+    detached?: boolean;
+    state: AutoCompleteState;
+    setState: StateUpdater<AutoCompleteState>;
+
+    onKeyUp: (ev: KeyboardEvent) => void;
+    onKeyDown: (ev: KeyboardEvent) => boolean;
+    onChange: (ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => void;
+    onClick: JSX.MouseEventHandler<HTMLButtonElement>;
+    onFocus: JSX.FocusEventHandler<HTMLTextAreaElement>;
+    onBlur: JSX.FocusEventHandler<HTMLTextAreaElement>;
+};
+
+export function useAutoComplete(
+    setValue: (v?: string) => void,
+    searchClues?: SearchClues,
+): AutoCompleteProps {
+    const [state, setState] = useState<AutoCompleteState>({ type: "none" });
+    const [focused, setFocused] = useState(false);
+    const client = useClient();
+
+    function findSearchString(
+        el: HTMLTextAreaElement,
+    ): ["emoji" | "user" | "channel", string, number] | undefined {
+        if (el.selectionStart === el.selectionEnd) {
+            const cursor = el.selectionStart;
+            const content = el.value.slice(0, cursor);
+
+            const valid = /\w/;
+
+            let j = content.length - 1;
+            if (content[j] === "@") {
+                return ["user", "", j];
+            } else if (content[j] === "#") {
+                return ["channel", "", j];
+            }
+
+            while (j >= 0 && valid.test(content[j])) {
+                j--;
+            }
+
+            if (j === -1) return;
+            const current = content[j];
+
+            if (current === ":" || current === "@" || current === "#") {
+                const search = content.slice(j + 1, content.length);
+                if (search.length > 0) {
+                    return [
+                        current === "#"
+                            ? "channel"
+                            : current === ":"
+                            ? "emoji"
+                            : "user",
+                        search.toLowerCase(),
+                        j + 1,
+                    ];
+                }
+            }
+        }
+    }
+
+    function onChange(ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) {
+        const el = ev.currentTarget;
+
+        const result = findSearchString(el);
+        if (result) {
+            const [type, search] = result;
+            const regex = new RegExp(search, "i");
+
+            if (type === "emoji") {
+                // ! TODO: we should convert it to a Binary Search Tree and use that
+                const matches = Object.keys(emojiDictionary)
+                    .filter((emoji: string) => emoji.match(regex))
+                    .splice(0, 5);
+
+                if (matches.length > 0) {
+                    const currentPosition =
+                        state.type !== "none" ? state.selected : 0;
+
+                    setState({
+                        type: "emoji",
+                        matches,
+                        selected: Math.min(currentPosition, matches.length - 1),
+                        within: false,
+                    });
+
+                    return;
+                }
+            }
+
+            if (type === "user" && searchClues?.users) {
+                let users: User[] = [];
+                switch (searchClues.users.type) {
+                    case "all":
+                        users = [...client.users.values()];
+                        break;
+                    case "channel": {
+                        const channel = client.channels.get(
+                            searchClues.users.id,
+                        );
+                        switch (channel?.channel_type) {
+                            case "Group":
+                            case "DirectMessage":
+                                users = channel.recipients!.filter(
+                                    (x) => typeof x !== "undefined",
+                                ) as User[];
+                                break;
+                            case "TextChannel":
+                                {
+                                    const server = channel.server_id;
+                                    users = [...client.members.keys()]
+                                        .map((x) => JSON.parse(x))
+                                        .filter((x) => x.server === server)
+                                        .map((x) => client.users.get(x.user))
+                                        .filter(
+                                            (x) => typeof x !== "undefined",
+                                        ) as User[];
+                                }
+                                break;
+                            default:
+                                return;
+                        }
+                    }
+                }
+
+                users = users.filter((x) => x._id !== SYSTEM_USER_ID);
+
+                const matches = (
+                    search.length > 0
+                        ? users.filter((user) =>
+                              user.username.toLowerCase().match(regex),
+                          )
+                        : users
+                )
+                    .splice(0, 5)
+                    .filter((x) => typeof x !== "undefined");
+
+                if (matches.length > 0) {
+                    const currentPosition =
+                        state.type !== "none" ? state.selected : 0;
+
+                    setState({
+                        type: "user",
+                        matches,
+                        selected: Math.min(currentPosition, matches.length - 1),
+                        within: false,
+                    });
+
+                    return;
+                }
+            }
+
+            if (type === "channel" && searchClues?.channels) {
+                const channels = client.servers
+                    .get(searchClues.channels.server)
+                    ?.channels.filter(
+                        (x) => typeof x !== "undefined",
+                    ) as Channel[];
+
+                const matches = (
+                    search.length > 0
+                        ? channels.filter((channel) =>
+                              channel.name!.toLowerCase().match(regex),
+                          )
+                        : channels
+                )
+                    .splice(0, 5)
+                    .filter((x) => typeof x !== "undefined");
+
+                if (matches.length > 0) {
+                    const currentPosition =
+                        state.type !== "none" ? state.selected : 0;
+
+                    setState({
+                        type: "channel",
+                        matches,
+                        selected: Math.min(currentPosition, matches.length - 1),
+                        within: false,
+                    });
+
+                    return;
+                }
+            }
+        }
+
+        if (state.type !== "none") {
+            setState({ type: "none" });
+        }
+    }
+
+    function selectCurrent(el: HTMLTextAreaElement) {
+        if (state.type !== "none") {
+            const result = findSearchString(el);
+            if (result) {
+                const [_type, search, index] = result;
+
+                const content = el.value.split("");
+                if (state.type === "emoji") {
+                    content.splice(
+                        index,
+                        search.length,
+                        state.matches[state.selected],
+                        ": ",
+                    );
+                } else if (state.type === "user") {
+                    content.splice(
+                        index - 1,
+                        search.length + 1,
+                        "<@",
+                        state.matches[state.selected]._id,
+                        "> ",
+                    );
+                } else {
+                    content.splice(
+                        index - 1,
+                        search.length + 1,
+                        "<#",
+                        state.matches[state.selected]._id,
+                        "> ",
+                    );
+                }
+
+                setValue(content.join(""));
+            }
+        }
+    }
+
+    function onClick(ev: JSX.TargetedMouseEvent<HTMLButtonElement>) {
+        ev.preventDefault();
+        selectCurrent(document.querySelector("#message")!);
+    }
+
+    function onKeyDown(e: KeyboardEvent) {
+        if (focused && state.type !== "none") {
+            if (e.key === "ArrowUp") {
+                e.preventDefault();
+                if (state.selected > 0) {
+                    setState({
+                        ...state,
+                        selected: state.selected - 1,
+                    });
+                }
+
+                return true;
+            }
+
+            if (e.key === "ArrowDown") {
+                e.preventDefault();
+                if (state.selected < state.matches.length - 1) {
+                    setState({
+                        ...state,
+                        selected: state.selected + 1,
+                    });
+                }
+
+                return true;
+            }
+
+            if (e.key === "Enter" || e.key === "Tab") {
+                e.preventDefault();
+                selectCurrent(e.currentTarget as HTMLTextAreaElement);
+
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    function onKeyUp(e: KeyboardEvent) {
+        if (e.currentTarget !== null) {
+            // @ts-expect-error Type mis-match.
+            onChange(e);
+        }
+    }
+
+    function onFocus(ev: JSX.TargetedFocusEvent<HTMLTextAreaElement>) {
+        setFocused(true);
+        onChange(ev);
+    }
+
+    function onBlur() {
+        if (state.type !== "none" && state.within) return;
+        setFocused(false);
+    }
+
+    return {
+        state: focused ? state : { type: "none" },
+        setState,
+
+        onClick,
+        onChange,
+        onKeyUp,
+        onKeyDown,
+        onFocus,
+        onBlur,
+    };
+}
+
+const Base = styled.div<{ detached?: boolean }>`
+    position: relative;
+
+    > div {
+        bottom: 0;
+        width: 100%;
+        position: absolute;
+        background: var(--primary-header);
+    }
+
+    button {
+        gap: 8px;
+        margin: 4px;
+        padding: 6px;
+        border: none;
+        display: flex;
+        font-size: 1em;
+        cursor: pointer;
+        align-items: center;
+        flex-direction: row;
+        font-family: inherit;
+        background: transparent;
+        color: var(--foreground);
+        width: calc(100% - 12px);
+        border-radius: var(--border-radius);
+
+        span {
+            display: grid;
+            place-items: center;
+        }
+
+        &.active {
+            background: var(--primary-background);
+        }
+    }
+
+    ${(props) =>
+        props.detached &&
+        css`
+            bottom: 8px;
+
+            > div {
+                border-radius: var(--border-radius);
+            }
+        `}
+`;
+
+export default function AutoComplete({
+    detached,
+    state,
+    setState,
+    onClick,
+}: Pick<AutoCompleteProps, "detached" | "state" | "setState" | "onClick">) {
+    return (
+        <Base detached={detached}>
+            <div>
+                {state.type === "emoji" &&
+                    state.matches.map((match, i) => (
+                        <button
+                            key={match}
+                            className={i === state.selected ? "active" : ""}
+                            onMouseEnter={() =>
+                                (i !== state.selected || !state.within) &&
+                                setState({
+                                    ...state,
+                                    selected: i,
+                                    within: true,
+                                })
+                            }
+                            onMouseLeave={() =>
+                                state.within &&
+                                setState({
+                                    ...state,
+                                    within: false,
+                                })
+                            }
+                            onClick={onClick}>
+                            <Emoji
+                                emoji={
+                                    (emojiDictionary as Record<string, string>)[
+                                        match
+                                    ]
+                                }
+                                size={20}
+                            />
+                            :{match}:
+                        </button>
+                    ))}
+                {state.type === "user" &&
+                    state.matches.map((match, i) => (
+                        <button
+                            key={match}
+                            className={i === state.selected ? "active" : ""}
+                            onMouseEnter={() =>
+                                (i !== state.selected || !state.within) &&
+                                setState({
+                                    ...state,
+                                    selected: i,
+                                    within: true,
+                                })
+                            }
+                            onMouseLeave={() =>
+                                state.within &&
+                                setState({
+                                    ...state,
+                                    within: false,
+                                })
+                            }
+                            onClick={onClick}>
+                            <UserIcon size={24} target={match} status={true} />
+                            {match.username}
+                        </button>
+                    ))}
+                {state.type === "channel" &&
+                    state.matches.map((match, i) => (
+                        <button
+                            key={match}
+                            className={i === state.selected ? "active" : ""}
+                            onMouseEnter={() =>
+                                (i !== state.selected || !state.within) &&
+                                setState({
+                                    ...state,
+                                    selected: i,
+                                    within: true,
+                                })
+                            }
+                            onMouseLeave={() =>
+                                state.within &&
+                                setState({
+                                    ...state,
+                                    within: false,
+                                })
+                            }
+                            onClick={onClick}>
+                            <ChannelIcon size={24} target={match} />
+                            {match.name}
+                        </button>
+                    ))}
+            </div>
+        </Base>
+    );
+}

src/components/common/ChannelIcon.tsx

+import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { Channel } from "revolt.js/dist/maps/Channels";
+
 import { useContext } from "preact/hooks";
-import { Hash } from "@styled-icons/feather";
-import { Channels } from "revolt.js/dist/api/objects";
-import { ImageIconBase, IconBaseProps } from "./IconBase";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-interface Props extends IconBaseProps<Channels.GroupChannel | Channels.TextChannel> {
+import { ImageIconBase, IconBaseProps } from "./IconBase";
+import fallback from "./assets/group.png";
+
+interface Props extends IconBaseProps<Channel> {
     isServerChannel?: boolean;
 }
 
-import fallback from './assets/group.png';
-
-export default function ChannelIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
-    const client = useContext(AppContext);
+export default observer(
+    (
+        props: Props &
+            Omit<
+                JSX.HTMLAttributes<HTMLImageElement>,
+                keyof Props | "children" | "as"
+            >,
+    ) => {
+        const client = useContext(AppContext);
 
-    const { size, target, attachment, isServerChannel: server, animate, children, as, ...imgProps } = props;
-    const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
-    const isServerChannel = server || target?.channel_type === 'TextChannel';
+        const {
+            size,
+            target,
+            attachment,
+            isServerChannel: server,
+            animate,
+            ...imgProps
+        } = props;
+        const iconURL = client.generateFileURL(
+            target?.icon ?? attachment,
+            { max_side: 256 },
+            animate,
+        );
+        const isServerChannel =
+            server ||
+            (target &&
+                (target.channel_type === "TextChannel" ||
+                    target.channel_type === "VoiceChannel"));
 
-    if (typeof iconURL === 'undefined') {
-        if (isServerChannel) {
-            return (
-                <Hash size={size} />
-            )
+        if (typeof iconURL === "undefined") {
+            if (isServerChannel) {
+                if (target?.channel_type === "VoiceChannel") {
+                    return <VolumeFull size={size} />;
+                }
+                return <Hash size={size} />;
+            }
         }
-    }
-
-    return (
-        // ! fixme: replace fallback with <picture /> + <source />
-        <ImageIconBase {...imgProps}
-            width={size}
-            height={size}
-            aria-hidden="true"
-            square={isServerChannel}
-            src={iconURL ?? fallback} />
-    );
-}
+
+        return (
+            // ! TODO: replace fallback with <picture /> + <source />
+            <ImageIconBase
+                {...imgProps}
+                width={size}
+                height={size}
+                loading="lazy"
+                aria-hidden="true"
+                square={isServerChannel}
+                src={iconURL ?? fallback}
+            />
+        );
+    },
+);

src/components/common/CollapsibleSection.tsx

+import { ChevronDown } from "@styled-icons/boxicons-regular";
+
+import { State, store } from "../../redux";
+import { Action } from "../../redux/reducers";
+
+import Details from "../ui/Details";
+
+import { Children } from "../../types/Preact";
+
+interface Props {
+    id: string;
+    defaultValue: boolean;
+
+    sticky?: boolean;
+    large?: boolean;
+
+    summary: Children;
+    children: Children;
+}
+
+export default function CollapsibleSection({
+    id,
+    defaultValue,
+    summary,
+    children,
+    ...detailsProps
+}: Props) {
+    const state: State = store.getState();
+
+    function setState(state: boolean) {
+        if (state === defaultValue) {
+            store.dispatch({
+                type: "SECTION_TOGGLE_UNSET",
+                id,
+            } as Action);
+        } else {
+            store.dispatch({
+                type: "SECTION_TOGGLE_SET",
+                id,
+                state,
+            } as Action);
+        }
+    }
+
+    return (
+        <Details
+            open={state.sectionToggle[id] ?? defaultValue}
+            onToggle={(e) => setState(e.currentTarget.open)}
+            {...detailsProps}>
+            <summary>
+                <div class="padding">
+                    <ChevronDown size={20} />
+                    {summary}
+                </div>
+            </summary>
+            {children}
+        </Details>
+    );
+}

src/components/common/Emoji.tsx

+import { EmojiPacks } from "../../redux/reducers/settings";
+
+let EMOJI_PACK = "mutant";
+const REVISION = 3;
+
+export function setEmojiPack(pack: EmojiPacks) {
+    EMOJI_PACK = pack;
+}
+
+// Originally taken from Twemoji source code,
+// re-written by bree to be more readable.
+function codePoints(rune: string) {
+    const pairs = [];
+    let low = 0;
+    let i = 0;
+
+    while (i < rune.length) {
+        const charCode = rune.charCodeAt(i++);
+        if (low) {
+            pairs.push(0x10000 + ((low - 0xd800) << 10) + (charCode - 0xdc00));
+            low = 0;
+        } else if (0xd800 <= charCode && charCode <= 0xdbff) {
+            low = charCode;
+        } else {
+            pairs.push(charCode);
+        }
+    }
+
+    return pairs;
+}
+
+// Taken from Twemoji source code.
+// scripts/build.js#344
+// grabTheRightIcon(rawText);
+const UFE0Fg = /\uFE0F/g;
+const U200D = String.fromCharCode(0x200d);
+function toCodePoint(rune: string) {
+    return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, "") : rune)
+        .map((val) => val.toString(16))
+        .join("-");
+}
+
+function parseEmoji(emoji: string) {
+    const codepoint = toCodePoint(emoji);
+    return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
+}
+
+export default function Emoji({
+    emoji,
+    size,
+}: {
+    emoji: string;
+    size?: number;
+}) {
+    return (
+        <img
+            alt={emoji}
+            loading="lazy"
+            className="emoji"
+            draggable={false}
+            src={parseEmoji(emoji)}
+            style={
+                size ? { width: `${size}px`, height: `${size}px` } : undefined
+            }
+        />
+    );
+}
+
+export function generateEmoji(emoji: string) {
+    return `<img loading="lazy" class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(
+        emoji,
+    )}" />`;
+}

src/components/common/IconBase.tsx

-import { Attachment } from "revolt.js/dist/api/objects";
+import { Attachment } from "revolt-api/types/Autumn";
 import styled, { css } from "styled-components";
 
 export interface IconBaseProps<T> {
@@ -6,29 +6,54 @@ export interface IconBaseProps<T> {
     attachment?: Attachment;
 
     size: number;
+    hover?: boolean;
     animate?: boolean;
 }
 
 interface IconModifiers {
-    square?: boolean
+    square?: boolean;
+    hover?: boolean;
 }
 
 export default styled.svg<IconModifiers>`
+    flex-shrink: 0;
+
     img {
         width: 100%;
         height: 100%;
         object-fit: cover;
 
-        ${ props => !props.square && css`
-            border-radius: 50%;
-        ` }
+        ${(props) =>
+            !props.square &&
+            css`
+                border-radius: 50%;
+            `}
     }
+
+    ${(props) =>
+        props.hover &&
+        css`
+            &:hover .icon {
+                filter: brightness(0.8);
+            }
+        `}
 `;
 
 export const ImageIconBase = styled.img<IconModifiers>`
+    flex-shrink: 0;
     object-fit: cover;
 
-    ${ props => !props.square && css`
-        border-radius: 50%;
-    ` }
+    ${(props) =>
+        !props.square &&
+        css`
+            border-radius: 50%;
+        `}
+
+    ${(props) =>
+        props.hover &&
+        css`
+            &:hover img {
+                filter: brightness(0.8);
+            }
+        `}
 `;

src/components/common/LocaleSelector.tsx

+import { dispatch } from "../../redux";
+import { connectState } from "../../redux/connector";
+
+import { Language, Languages } from "../../context/Locale";
+
+import ComboBox from "../ui/ComboBox";
+
+type Props = {
+    locale: string;
+};
+
+export function LocaleSelector(props: Props) {
+    return (
+        <ComboBox
+            value={props.locale}
+            onChange={(e) =>
+                dispatch({
+                    type: "SET_LOCALE",
+                    locale: e.currentTarget.value as Language,
+                })
+            }>
+            {Object.keys(Languages).map((x) => {
+                const l = Languages[x as keyof typeof Languages];
+                return (
+                    <option value={x} key={x}>
+                        {l.emoji} {l.display}
+                    </option>
+                );
+            })}
+        </ComboBox>
+    );
+}
+
+export default connectState(LocaleSelector, (state) => {
+    return {
+        locale: state.locale,
+    };
+});

src/components/common/ServerHeader.tsx

+import { Cog } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { Link } from "react-router-dom";
+import { ServerPermission } from "revolt.js/dist/api/permissions";
+import { Server } from "revolt.js/dist/maps/Servers";
+import styled from "styled-components";
+
+import Header from "../ui/Header";
+import IconButton from "../ui/IconButton";
+
+interface Props {
+    server: Server;
+}
+
+const ServerName = styled.div`
+    flex-grow: 1;
+`;
+
+export default observer(({ server }: Props) => {
+    const bannerURL = server.generateBannerURL({ width: 480 });
+
+    return (
+        <Header
+            borders
+            placement="secondary"
+            background={typeof bannerURL !== "undefined"}
+            style={{
+                background: bannerURL ? `url('${bannerURL}')` : undefined,
+            }}>
+            <ServerName>{server.name}</ServerName>
+            {(server.permission & ServerPermission.ManageServer) > 0 && (
+                <div className="actions">
+                    <Link to={`/server/${server._id}/settings`}>
+                        <IconButton>
+                            <Cog size={24} />
+                        </IconButton>
+                    </Link>
+                </div>
+            )}
+        </Header>
+    );
+});

src/components/common/ServerIcon.tsx

+import { observer } from "mobx-react-lite";
+import { Server } from "revolt.js/dist/maps/Servers";
 import styled from "styled-components";
+
 import { useContext } from "preact/hooks";
-import { Server } from "revolt.js/dist/api/objects";
-import { IconBaseProps, ImageIconBase } from "./IconBase";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
+import { IconBaseProps, ImageIconBase } from "./IconBase";
+
 interface Props extends IconBaseProps<Server> {
     server_name?: string;
 }
 
 const ServerText = styled.div`
     display: grid;
-    padding: .2em;
+    padding: 0.2em;
     overflow: hidden;
     border-radius: 50%;
     place-items: center;
@@ -18,30 +22,47 @@ const ServerText = styled.div`
     background: var(--primary-background);
 `;
 
-const fallback = '/assets/group.png';
-export default function ServerIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
-    const client = useContext(AppContext);
+// const fallback = "/assets/group.png";
+export default observer(
+    (
+        props: Props &
+            Omit<
+                JSX.HTMLAttributes<HTMLImageElement>,
+                keyof Props | "children" | "as"
+            >,
+    ) => {
+        const client = useContext(AppContext);
+
+        const { target, attachment, size, animate, server_name, ...imgProps } =
+            props;
+        const iconURL = client.generateFileURL(
+            target?.icon ?? attachment,
+            { max_side: 256 },
+            animate,
+        );
 
-    const { target, attachment, size, animate, server_name, children, as, ...imgProps } = props;
-    const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
+        if (typeof iconURL === "undefined") {
+            const name = target?.name ?? server_name ?? "";
 
-    if (typeof iconURL === 'undefined') {
-        const name = target?.name ?? server_name ?? '';
+            return (
+                <ServerText style={{ width: size, height: size }}>
+                    {name
+                        .split(" ")
+                        .map((x) => x[0])
+                        .filter((x) => typeof x !== "undefined")}
+                </ServerText>
+            );
+        }
 
         return (
-            <ServerText style={{ width: size, height: size }}>
-                { name.split(' ')
-                      .map(x => x[0])
-                      .filter(x => typeof x !== 'undefined') }
-            </ServerText>
-        )
-    }
-
-    return (
-        <ImageIconBase {...imgProps}
-            width={size}
-            height={size}
-            aria-hidden="true"
-            src={iconURL} />
-    );
-}
+            <ImageIconBase
+                {...imgProps}
+                width={size}
+                height={size}
+                src={iconURL}
+                loading="lazy"
+                aria-hidden="true"
+            />
+        );
+    },
+);

src/components/common/Tooltip.tsx

+import Tippy, { TippyProps } from "@tippyjs/react";
 import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
 import { Children } from "../../types/Preact";
-import { Position, Tooltip as TooltipCore, TooltipProps } from "react-tippy";
 
-type Props = Omit<TooltipProps, 'html'> & {
-    position?: Position;
+type Props = Omit<TippyProps, "children"> & {
     children: Children;
     content: Children;
+};
+
+export default function Tooltip(props: Props) {
+    const { children, content, ...tippyProps } = props;
+
+    return (
+        <Tippy content={content} {...tippyProps}>
+            {/*
+            // @ts-expect-error Type mis-match. */}
+            <div style={`display: flex;`}>{children}</div>
+        </Tippy>
+    );
 }
 
-const TooltipBase = styled.div`
-    padding: 8px;
-    font-size: 12px;
-    border-radius: 4px;
-    color: var(--foreground);
-    background: var(--secondary-background);
+const PermissionTooltipBase = styled.div`
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    span {
+        font-weight: 700;
+        text-transform: uppercase;
+        color: var(--secondary-foreground);
+        font-size: 11px;
+    }
+
+    code {
+        font-family: var(--monospace-font);
+    }
 `;
 
-export default function Tooltip(props: Props) {
+export function PermissionTooltip(
+    props: Omit<Props, "content"> & { permission: string },
+) {
+    const { permission, ...tooltipProps } = props;
+
     return (
-        <TooltipCore
-            {...props}
-            // @ts-expect-error
-            html={<TooltipBase>{props.content}</TooltipBase>} />
+        <Tooltip
+            content={
+                <PermissionTooltipBase>
+                    <span>
+                        <Text id="app.permissions.required" />
+                    </span>
+                    <code>{permission}</code>
+                </PermissionTooltipBase>
+            }
+            {...tooltipProps}
+        />
     );
 }

src/components/common/UpdateIndicator.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
+import { Download, CloudDownload } from "@styled-icons/boxicons-regular";
+
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { internalSubscribe } from "../../lib/eventEmitter";
+
+import { ThemeContext } from "../../context/Theme";
+
+import IconButton from "../ui/IconButton";
+
+import { updateSW } from "../../main";
+import Tooltip from "./Tooltip";
+
+let pendingUpdate = false;
+internalSubscribe("PWA", "update", () => (pendingUpdate = true));
+
+interface Props {
+    style: "titlebar" | "channel";
+}
+
+export default function UpdateIndicator({ style }: Props) {
+    const [pending, setPending] = useState(pendingUpdate);
+
+    useEffect(() => {
+        return internalSubscribe("PWA", "update", () => setPending(true));
+    });
+
+    if (!pending) return null;
+    const theme = useContext(ThemeContext);
+
+    if (style === "titlebar") {
+        return (
+            <div class="actions">
+                <Tooltip
+                    content="A new update is available!"
+                    placement="bottom">
+                    <div onClick={() => updateSW(true)}>
+                        <CloudDownload size={22} color={theme.success} />
+                    </div>
+                </Tooltip>
+            </div>
+        );
+    }
+
+    if (window.isNative) return null;
+
+    return (
+        <IconButton onClick={() => updateSW(true)}>
+            <Download size={22} color={theme.success} />
+        </IconButton>
+    );
+}

src/components/common/UserIcon.tsx

-import { User } from "revolt.js";
-import { useContext } from "preact/hooks";
-import { MicOff } from "@styled-icons/feather";
-import styled, { css } from "styled-components";
-import { ThemeContext } from "../../context/Theme";
-import { Users } from "revolt.js/dist/api/objects";
-import IconBase, { IconBaseProps } from "./IconBase";
-import { AppContext } from "../../context/revoltjs/RevoltClient";
-
-type VoiceStatus = "muted";
-interface Props extends IconBaseProps<User> {
-    status?: boolean;
-    voice?: VoiceStatus;
-}
-
-export function useStatusColour(user?: User) {
-    const theme = useContext(ThemeContext);
-
-    return (
-        user?.online &&
-            user?.status?.presence !== Users.Presence.Invisible
-                ? user?.status?.presence === Users.Presence.Idle
-                    ? theme["status-away"]
-                    : user?.status?.presence ===
-                        Users.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);
-    ` }
-`;
-
-import fallback from './assets/user.png';
-
-export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
-    const client = useContext(AppContext);
-
-    const { target, attachment, size, voice, status, animate, children, as, ...svgProps } = props;
-    const iconURL = client.generateFileURL(target?.avatar ?? attachment, { max_side: 256 }, animate)
-        ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
-
-    return (
-        <IconBase {...svgProps}
-            width={size}
-            height={size}
-            aria-hidden="true"
-            viewBox="0 0 32 32">
-            <foreignObject x="0" y="0" width="32" height="32">
-                {
-                    <img src={iconURL}
-                        draggable={false} />
-                }
-            </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" && <MicOff size={6} />}
-                    </VoiceIndicator>
-                </foreignObject>
-            )}
-        </IconBase>
-    );
-}

src/components/common/UserShort.tsx

-import { User } from "revolt.js";
-import UserIcon from "./UserIcon";
-import { Text } from "preact-i18n";
-
-export function Username({ user }: { user?: User }) {
-    return <b>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</b>;
-}
-
-export default function UserShort({ user }: { user?: User }) {
-    return <>
-        <UserIcon size={24} target={user} />
-        <Username user={user} />
-    </>;
-}

src/components/common/messaging/Message.tsx

-import UserIcon from "../UserIcon";
-import { Username } from "../UserShort";
-import Markdown from "../../markdown/Markdown";
-import { Children } from "../../../types/Preact";
+import { observer } from "mobx-react-lite";
+import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
+
 import { attachContextMenu } from "preact-context-menu";
-import { useUser } from "../../../context/revoltjs/hooks";
-import { MessageObject } from "../../../context/revoltjs/util";
-import MessageBase, { MessageContent, MessageDetail, MessageInfo } from "./MessageBase";
+import { memo } from "preact/compat";
+import { useState } from "preact/hooks";
+
+import { QueuedMessage } from "../../../redux/reducers/queue";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import Overline from "../../ui/Overline";
+
+import { Children } from "../../../types/Preact";
+import Markdown from "../../markdown/Markdown";
+import UserIcon from "../user/UserIcon";
+import { Username } from "../user/UserShort";
+import MessageBase, {
+    MessageContent,
+    MessageDetail,
+    MessageInfo,
+} from "./MessageBase";
+import Attachment from "./attachments/Attachment";
+import { MessageReply } from "./attachments/MessageReply";
+import Embed from "./embed/Embed";
 
 interface Props {
-    attachContext?: boolean
-    message: MessageObject
-    contrast?: boolean
-    content?: Children
-    head?: boolean
+    attachContext?: boolean;
+    queued?: QueuedMessage;
+    message: MessageObject;
+    highlight?: boolean;
+    contrast?: boolean;
+    content?: Children;
+    head?: boolean;
 }
 
-export default function Message({ attachContext, message, contrast, content, head }: Props) {
-    // TODO: Can improve re-renders here by providing a list
-    // TODO: of dependencies. We only need to update on u/avatar.
-    let user = useUser(message.author);
-
-    return (
-        <MessageBase contrast={contrast}
-            onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel }) : undefined}>
-            <MessageInfo>
-                { head ?
-                    <UserIcon target={user} size={36} /> :
-                    <MessageDetail message={message} /> }
-            </MessageInfo>
-            <MessageContent>
-                { head && <Username user={user} /> }
-                { content ?? <Markdown content={message.content as string} /> }
-            </MessageContent>
-        </MessageBase>
-    )
-}
+const Message = observer(
+    ({
+        highlight,
+        attachContext,
+        message,
+        contrast,
+        content: replacement,
+        head: preferHead,
+        queued,
+    }: Props) => {
+        const client = useClient();
+        const user = message.author;
+
+        const { openScreen } = useIntermediate();
+
+        const content = message.content as string;
+        const head =
+            preferHead || (message.reply_ids && message.reply_ids.length > 0);
+
+        // ! TODO: tell fatal to make this type generic
+        // bree: Fatal please...
+        const userContext = attachContext
+            ? (attachContextMenu("Menu", {
+                  user: message.author_id,
+                  contextualChannel: message.channel_id,
+                  // eslint-disable-next-line
+              }) as any)
+            : undefined;
+
+        const openProfile = () =>
+            openScreen({ id: "profile", user_id: message.author_id });
+
+        // ! FIXME(?): animate on hover
+        const [animate, setAnimate] = useState(false);
+
+        return (
+            <div id={message._id}>
+                {message.reply_ids?.map((message_id, index) => (
+                    <MessageReply
+                        key={message_id}
+                        index={index}
+                        id={message_id}
+                        channel={message.channel!}
+                    />
+                ))}
+                <MessageBase
+                    highlight={highlight}
+                    head={
+                        (head &&
+                            !(
+                                message.reply_ids &&
+                                message.reply_ids.length > 0
+                            )) ??
+                        false
+                    }
+                    contrast={contrast}
+                    sending={typeof queued !== "undefined"}
+                    mention={message.mention_ids?.includes(client.user!._id)}
+                    failed={typeof queued?.error !== "undefined"}
+                    onContextMenu={
+                        attachContext
+                            ? attachContextMenu("Menu", {
+                                  message,
+                                  contextualChannel: message.channel_id,
+                                  queued,
+                              })
+                            : undefined
+                    }
+                    onMouseEnter={() => setAnimate(true)}
+                    onMouseLeave={() => setAnimate(false)}>
+                    <MessageInfo>
+                        {head ? (
+                            <UserIcon
+                                target={user}
+                                size={36}
+                                onContextMenu={userContext}
+                                onClick={openProfile}
+                                animate={animate}
+                            />
+                        ) : (
+                            <MessageDetail message={message} position="left" />
+                        )}
+                    </MessageInfo>
+                    <MessageContent>
+                        {head && (
+                            <span className="detail">
+                                <Username
+                                    className="author"
+                                    user={user}
+                                    onContextMenu={userContext}
+                                    onClick={openProfile}
+                                />
+                                <MessageDetail
+                                    message={message}
+                                    position="top"
+                                />
+                            </span>
+                        )}
+                        {replacement ?? <Markdown content={content} />}
+                        {queued?.error && (
+                            <Overline type="error" error={queued.error} />
+                        )}
+                        {message.attachments?.map((attachment, index) => (
+                            <Attachment
+                                key={index}
+                                attachment={attachment}
+                                hasContent={index > 0 || content.length > 0}
+                            />
+                        ))}
+                        {message.embeds?.map((embed, index) => (
+                            <Embed key={index} embed={embed} />
+                        ))}
+                    </MessageContent>
+                </MessageBase>
+            </div>
+        );
+    },
+);
+
+export default memo(Message);

src/components/common/messaging/MessageBase.tsx

-import dayjs from "dayjs";
-import styled, { css } from "styled-components";
+import { observer } from "mobx-react-lite";
+import { Message } from "revolt.js/dist/maps/Messages";
+import styled, { css, keyframes } from "styled-components";
 import { decodeTime } from "ulid";
-import { MessageObject } from "../../../context/revoltjs/util";
+
+import { Text } from "preact-i18n";
+
+import { useDictionary } from "../../../lib/i18n";
+
+import { dayjs } from "../../../context/Locale";
+
+import Tooltip from "../Tooltip";
 
 export interface BaseMessageProps {
-    head?: boolean,
-    status?: boolean,
-    mention?: boolean,
-    blocked?: boolean,
-    sending?: boolean,
-    contrast?: boolean
+    head?: boolean;
+    failed?: boolean;
+    mention?: boolean;
+    blocked?: boolean;
+    sending?: boolean;
+    contrast?: boolean;
+    highlight?: boolean;
 }
 
+const highlight = keyframes`
+    0% { background: var(--mention); }
+    66% { background: var(--mention); }
+    100% { background: transparent; }
+`;
+
 export default styled.div<BaseMessageProps>`
     display: flex;
-    overflow-x: none;
-    padding: .125rem;
+    overflow: none;
+    padding: 0.125rem;
     flex-direction: row;
-    padding-right: 16px;
+    padding-inline-end: 16px;
 
-    ${ props => props.contrast && css`
-        padding: .3rem;
-        border-radius: 4px;
-        background: var(--hover);
-    ` }
+    @media (pointer: coarse) {
+        user-select: none;
+    }
+
+    ${(props) =>
+        props.contrast &&
+        css`
+            padding: 0.3rem;
+            background: var(--hover);
+            border-radius: var(--border-radius);
+        `}
+
+    ${(props) =>
+        props.head &&
+        css`
+            margin-top: 12px;
+        `}
+
+    ${(props) =>
+        props.mention &&
+        css`
+            background: var(--mention);
+        `}
+
+    ${(props) =>
+        props.blocked &&
+        css`
+            filter: blur(4px);
+            transition: 0.2s ease filter;
 
-    ${ props => props.head && css`
-        margin-top: 12px;
-    ` }
+            &:hover {
+                filter: none;
+            }
+        `}
 
-    ${ props => props.mention && css`
-        background: var(--mention);
-    ` }
+    ${(props) =>
+        props.sending &&
+        css`
+            opacity: 0.8;
+            color: var(--tertiary-foreground);
+        `}
 
-    ${ props => props.blocked && css`
-        filter: blur(4px);
-        transition: 0.2s ease filter;
+    ${(props) =>
+        props.failed &&
+        css`
+            color: var(--error);
+        `}
+
+    ${(props) =>
+        props.highlight &&
+        css`
+            animation-name: ${highlight};
+            animation-timing-function: ease;
+            animation-duration: 3s;
+        `}
+
+    .detail {
+        gap: 8px;
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    .author {
+        overflow: hidden;
+        cursor: pointer;
+        font-weight: 600 !important;
+
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        text-overflow: ellipsis;
+        white-space: normal;
 
         &:hover {
-            filter: none;
+            text-decoration: underline;
         }
-    ` }
-
-    ${ props => props.sending && css`
-        opacity: 0.8;
-        color: var(--tertiary-foreground);
-    ` }
+    }
 
-    ${ props => props.status && css`
-        color: var(--error);
-    ` }
-    
     .copy {
-        width: 0;
-        opacity: 0;
+        display: block;
+        overflow: hidden;
     }
 
     &:hover {
@@ -73,39 +135,125 @@ export const MessageInfo = styled.div`
     flex-direction: row;
     justify-content: center;
 
-    ::selection {
-        background-color: transparent;
-        color: var(--tertiary-foreground);
+    .copyBracket {
+        opacity: 0;
+        position: absolute;
+    }
+
+    .copyTime {
+        opacity: 0;
+        position: absolute;
+    }
+
+    svg {
+        user-select: none;
+        cursor: pointer;
+
+        &:active {
+            transform: translateY(1px);
+        }
     }
 
     time {
         opacity: 0;
+    }
+
+    time,
+    .edited {
+        margin-top: 1px;
         cursor: default;
         display: inline;
         font-size: 10px;
-        padding-top: 1px;
         color: var(--tertiary-foreground);
     }
+
+    time,
+    .edited > div {
+        &::selection {
+            background-color: transparent;
+            color: var(--tertiary-foreground);
+        }
+    }
+
+    .header {
+        cursor: pointer;
+    }
 `;
 
 export const MessageContent = styled.div`
     min-width: 0;
     flex-grow: 1;
     display: flex;
-    overflow: hidden;
-    font-size: 0.875rem;
+    // overflow: hidden;
     flex-direction: column;
     justify-content: center;
+    font-size: var(--text-size);
 `;
 
-export function MessageDetail({ message }: { message: MessageObject }) {
-    return (
-        <>
-            <time>
-                <i className="copy">[</i>
-                {dayjs(decodeTime(message._id)).format("H:mm")}
-                <i className="copy">]</i>
-            </time>
-        </>
-    )
-}
+export const DetailBase = styled.div`
+    flex-shrink: 0;
+    gap: 4px;
+    font-size: 10px;
+    display: inline-flex;
+    color: var(--tertiary-foreground);
+
+    .edited {
+        cursor: default;
+        &::selection {
+            background-color: transparent;
+            color: var(--tertiary-foreground);
+        }
+    }
+`;
+
+export const MessageDetail = observer(
+    ({ message, position }: { message: Message; position: "left" | "top" }) => {
+        const dict = useDictionary();
+
+        if (position === "left") {
+            if (message.edited) {
+                return (
+                    <>
+                        <time className="copyTime">
+                            <i className="copyBracket">[</i>
+                            {dayjs(decodeTime(message._id)).format(
+                                dict.dayjs?.timeFormat,
+                            )}
+                            <i className="copyBracket">]</i>
+                        </time>
+                        <span className="edited">
+                            <Tooltip
+                                content={dayjs(message.edited).format("LLLL")}>
+                                <Text id="app.main.channel.edited" />
+                            </Tooltip>
+                        </span>
+                    </>
+                );
+            }
+            return (
+                <>
+                    <time>
+                        <i className="copyBracket">[</i>
+                        {dayjs(decodeTime(message._id)).format(
+                            dict.dayjs?.timeFormat,
+                        )}
+                        <i className="copyBracket">]</i>
+                    </time>
+                </>
+            );
+        }
+
+        return (
+            <DetailBase>
+                <time>{dayjs(decodeTime(message._id)).calendar()}</time>
+                {message.edited && (
+                    <Tooltip content={dayjs(message.edited).format("LLLL")}>
+                        <span className="edited">
+                            <Text id="app.main.channel.edited" />
+                        </span>
+                    </Tooltip>
+                )}
+            </DetailBase>
+        );
+    },
+);

src/components/common/messaging/MessageBox.tsx

+import { Send, ShieldX } from "@styled-icons/boxicons-solid";
+import Axios, { CancelTokenSource } from "axios";
+import { observer } from "mobx-react-lite";
+import { ChannelPermission } from "revolt.js/dist/api/permissions";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import styled from "styled-components";
+import { ulid } from "ulid";
+
+import { Text } from "preact-i18n";
+import { useCallback, useContext, useEffect, useState } from "preact/hooks";
+
+import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
+import { debounce } from "../../../lib/debounce";
+import { defer } from "../../../lib/defer";
+import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
+import { useTranslation } from "../../../lib/i18n";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import {
+    SingletonMessageRenderer,
+    SMOOTH_SCROLL_ON_RECEIVE,
+} from "../../../lib/renderer/Singleton";
+
+import { dispatch, getState } from "../../../redux";
+import { Reply } from "../../../redux/reducers/queue";
+
+import { SoundContext } from "../../../context/Settings";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import {
+    FileUploader,
+    grabFiles,
+    uploadFile,
+} from "../../../context/revoltjs/FileUploads";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { takeError } from "../../../context/revoltjs/util";
+
+import IconButton from "../../ui/IconButton";
+
+import AutoComplete, { useAutoComplete } from "../AutoComplete";
+import { PermissionTooltip } from "../Tooltip";
+import FilePreview from "./bars/FilePreview";
+import ReplyBar from "./bars/ReplyBar";
+
+type Props = {
+    channel: Channel;
+};
+
+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;
+    align-items: flex-start;
+    background: var(--message-box);
+
+    textarea {
+        font-size: var(--text-size);
+        background: transparent;
+
+        &::placeholder {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+`;
+
+const Blocked = styled.div`
+    display: flex;
+    align-items: center;
+    user-select: none;
+    font-size: var(--text-size);
+    color: var(--tertiary-foreground);
+
+    .text {
+        padding: 14px 14px 14px 0;
+    }
+
+    svg {
+        flex-shrink: 0;
+    }
+`;
+
+const Action = styled.div`
+    display: flex;
+    place-items: center;
+
+    > div {
+        height: 48px;
+        width: 48px;
+        padding: 12px;
+    }
+
+    .mobile {
+        @media (pointer: fine) {
+            display: none;
+        }
+    }
+`;
+
+// ! FIXME: add to app config and load from app config
+export const CAN_UPLOAD_AT_ONCE = 4;
+
+export default observer(({ channel }: Props) => {
+    const [draft, setDraft] = useState(getState().drafts[channel._id] ?? "");
+
+    const [uploadState, setUploadState] = useState<UploadState>({
+        type: "none",
+    });
+    const [typing, setTyping] = useState<boolean | number>(false);
+    const [replies, setReplies] = useState<Reply[]>([]);
+    const playSound = useContext(SoundContext);
+    const { openScreen } = useIntermediate();
+    const client = useContext(AppContext);
+    const translate = useTranslation();
+
+    if (!(channel.permission & ChannelPermission.SendMessage)) {
+        return (
+            <Base>
+                <Blocked>
+                    <Action>
+                        <PermissionTooltip
+                            permission="SendMessages"
+                            placement="top">
+                            <ShieldX size={22} />
+                        </PermissionTooltip>
+                    </Action>
+                    <div className="text">
+                        <Text id="app.main.channel.misc.no_sending" />
+                    </div>
+                </Blocked>
+            </Base>
+        );
+    }
+
+    const setMessage = useCallback(
+        (content?: string) => {
+            setDraft(content ?? "");
+
+            if (content) {
+                dispatch({
+                    type: "SET_DRAFT",
+                    channel: channel._id,
+                    content,
+                });
+            } else {
+                dispatch({
+                    type: "CLEAR_DRAFT",
+                    channel: channel._id,
+                });
+            }
+        },
+        [channel._id],
+    );
+
+    useEffect(() => {
+        function append(content: string, action: "quote" | "mention") {
+            const text =
+                action === "quote"
+                    ? `${content
+                          .split("\n")
+                          .map((x) => `> ${x}`)
+                          .join("\n")}\n\n`
+                    : `${content} `;
+
+            if (!draft || draft.length === 0) {
+                setMessage(text);
+            } else {
+                setMessage(`${draft}\n${text}`);
+            }
+        }
+
+        return internalSubscribe(
+            "MessageBox",
+            "append",
+            append as (...args: unknown[]) => void,
+        );
+    }, [draft, setMessage]);
+
+    async function send() {
+        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();
+        setReplies([]);
+        playSound("outbound");
+
+        const nonce = ulid();
+        dispatch({
+            type: "QUEUE_ADD",
+            nonce,
+            channel: channel._id,
+            message: {
+                _id: nonce,
+                channel: channel._id,
+                author: client.user!._id,
+
+                content,
+                replies,
+            },
+        });
+
+        defer(() =>
+            SingletonMessageRenderer.jumpToBottom(
+                channel._id,
+                SMOOTH_SCROLL_ON_RECEIVE,
+            ),
+        );
+
+        try {
+            await channel.sendMessage({
+                content,
+                nonce,
+                replies,
+            });
+        } catch (error) {
+            dispatch({
+                type: "QUEUE_FAIL",
+                error: takeError(error),
+                nonce,
+            });
+        }
+    }
+
+    async function sendFile(content: string) {
+        if (uploadState.type !== "attached") return;
+        const attachments: string[] = [];
+
+        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 < CAN_UPLOAD_AT_ONCE; i++) {
+                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) /
+                                            Math.min(
+                                                files.length,
+                                                CAN_UPLOAD_AT_ONCE,
+                                            ),
+                                    ),
+                                    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 channel.sendMessage({
+                content,
+                nonce,
+                replies,
+                attachments,
+            });
+        } catch (err) {
+            setUploadState({
+                type: "failed",
+                files,
+                error: takeError(err),
+            });
+
+            return;
+        }
+
+        setMessage();
+        setReplies([]);
+        playSound("outbound");
+
+        if (files.length > CAN_UPLOAD_AT_ONCE) {
+            setUploadState({
+                type: "attached",
+                files: files.slice(CAN_UPLOAD_AT_ONCE),
+            });
+        } else {
+            setUploadState({ type: "none" });
+        }
+    }
+
+    function startTyping() {
+        if (typeof typing === "number" && +new Date() < typing) return;
+
+        const ws = client.websocket;
+        if (ws.connected) {
+            setTyping(+new Date() + 2500);
+            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,
+                });
+            }
+        }
+    }
+
+    // eslint-disable-next-line
+    const debouncedStopTyping = useCallback(
+        debounce(stopTyping as (...args: unknown[]) => void, 1000),
+        [channel._id],
+    );
+    const {
+        onChange,
+        onKeyUp,
+        onKeyDown,
+        onFocus,
+        onBlur,
+        ...autoCompleteProps
+    } = useAutoComplete(setMessage, {
+        users: { type: "channel", id: channel._id },
+        channels:
+            channel.channel_type === "TextChannel"
+                ? { server: channel.server_id! }
+                : undefined,
+    });
+
+    return (
+        <>
+            <AutoComplete {...autoCompleteProps} />
+            <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,
+                            ),
+                        });
+                    }
+                }}
+            />
+            <ReplyBar
+                channel={channel._id}
+                replies={replies}
+                setReplies={setReplies}
+            />
+            <Base>
+                {channel.permission & ChannelPermission.UploadFiles ? (
+                    <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")
+                            }
+                            append={(files) => {
+                                if (files.length === 0) return;
+
+                                if (uploadState.type === "none") {
+                                    setUploadState({ type: "attached", files });
+                                } else if (uploadState.type === "attached") {
+                                    setUploadState({
+                                        type: "attached",
+                                        files: [...uploadState.files, ...files],
+                                    });
+                                }
+                            }}
+                        />
+                    </Action>
+                ) : undefined}
+                <TextAreaAutoSize
+                    autoFocus
+                    hideBorder
+                    maxRows={20}
+                    id="message"
+                    onKeyUp={onKeyUp}
+                    value={draft ?? ""}
+                    padding="var(--message-box-padding)"
+                    onKeyDown={(e) => {
+                        if (onKeyDown(e)) return;
+
+                        if (
+                            e.key === "ArrowUp" &&
+                            (!draft || draft.length === 0)
+                        ) {
+                            e.preventDefault();
+                            internalEmit("MessageRenderer", "edit_last");
+                            return;
+                        }
+
+                        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: channel.recipient?.username,
+                              })
+                            : channel.channel_type === "SavedMessages"
+                            ? translate("app.main.channel.message_saved")
+                            : translate("app.main.channel.message_where", {
+                                  channel_name: channel.name ?? undefined,
+                              })
+                    }
+                    disabled={
+                        uploadState.type === "uploading" ||
+                        uploadState.type === "sending"
+                    }
+                    onChange={(e) => {
+                        setMessage(e.currentTarget.value);
+                        startTyping();
+                        onChange(e);
+                    }}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                />
+                <Action>
+                    {/*<IconButton onClick={emojiPicker}>
+                        <HappyAlt size={20} />
+                </IconButton>*/}
+                    <IconButton
+                        className="mobile"
+                        onClick={send}
+                        onMouseDown={(e) => e.preventDefault()}>
+                        <Send size={20} />
+                    </IconButton>
+                </Action>
+            </Base>
+        </>
+    );
+});

src/components/common/messaging/SystemMessage.tsx

-import { User } from "revolt.js";
-import classNames from "classnames";
+import { observer } from "mobx-react-lite";
+import { Message } from "revolt.js/dist/maps/Messages";
+import { User } from "revolt.js/dist/maps/Users";
+import styled from "styled-components";
+
 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 "../UserIcon";
-import Username from "../UserShort";
-import UserShort from "../UserShort";
+
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import UserShort from "../user/UserShort";
 import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
-import styled from "styled-components";
 
 const SystemContent = styled.div`
     gap: 4px;
@@ -33,120 +35,136 @@ type SystemMessageParsed =
 
 interface Props {
     attachContext?: boolean;
-    message: MessageObject;
+    message: Message;
+    highlight?: boolean;
+    hideInfo?: boolean;
 }
 
-export function SystemMessage({ attachContext, message }: Props) {
-    const ctx = useForceUpdate();
+export const SystemMessage = observer(
+    ({ attachContext, message, highlight, hideInfo }: Props) => {
+        const client = useClient();
+
+        let data: SystemMessageParsed;
+        const content = message.content;
+        if (typeof content === "object") {
+            switch (content.type) {
+                case "text":
+                    data = content;
+                    break;
+                case "user_added":
+                case "user_remove":
+                    data = {
+                        type: content.type,
+                        user: client.users.get(content.id)!,
+                        by: client.users.get(content.by)!,
+                    };
+                    break;
+                case "user_joined":
+                case "user_left":
+                case "user_kicked":
+                case "user_banned":
+                    data = {
+                        type: content.type,
+                        user: client.users.get(content.id)!,
+                    };
+                    break;
+                case "channel_renamed":
+                    data = {
+                        type: "channel_renamed",
+                        name: content.name,
+                        by: client.users.get(content.by)!,
+                    };
+                    break;
+                case "channel_description_changed":
+                case "channel_icon_changed":
+                    data = {
+                        type: content.type,
+                        by: client.users.get(content.by)!,
+                    };
+                    break;
+                default:
+                    data = { type: "text", content: JSON.stringify(content) };
+            }
+        } else {
+            data = { type: "text", content };
+        }
 
-    let data: SystemMessageParsed;
-    let content = message.content;
-    if (typeof content === "object") {
-        switch (content.type) {
+        let children;
+        switch (data.type) {
             case "text":
-                data = content;
+                children = <span>{data.content}</span>;
                 break;
             case "user_added":
             case "user_remove":
-                data = {
-                    type: content.type,
-                    user: useUser(content.id, ctx) as User,
-                    by: useUser(content.by, ctx) as User
-                };
+                children = (
+                    <TextReact
+                        id={`app.main.channel.system.${
+                            data.type === "user_added"
+                                ? "added_by"
+                                : "removed_by"
+                        }`}
+                        fields={{
+                            user: <UserShort user={data.user} />,
+                            other_user: <UserShort user={data.by} />,
+                        }}
+                    />
+                );
                 break;
             case "user_joined":
             case "user_left":
             case "user_kicked":
             case "user_banned":
-                data = {
-                    type: content.type,
-                    user: useUser(content.id, ctx) as User
-                };
+                children = (
+                    <TextReact
+                        id={`app.main.channel.system.${data.type}`}
+                        fields={{
+                            user: <UserShort user={data.user} />,
+                        }}
+                    />
+                );
                 break;
             case "channel_renamed":
-                data = {
-                    type: "channel_renamed",
-                    name: content.name,
-                    by: useUser(content.by, ctx) as User
-                };
+                children = (
+                    <TextReact
+                        id={`app.main.channel.system.channel_renamed`}
+                        fields={{
+                            user: <UserShort user={data.by} />,
+                            name: <b>{data.name}</b>,
+                        }}
+                    />
+                );
                 break;
             case "channel_description_changed":
             case "channel_icon_changed":
-                data = {
-                    type: content.type,
-                    by: useUser(content.by, ctx) as User
-                };
+                children = (
+                    <TextReact
+                        id={`app.main.channel.system.${data.type}`}
+                        fields={{
+                            user: <UserShort user={data.by} />,
+                        }}
+                    />
+                );
                 break;
-            default:
-                data = { type: "text", content: JSON.stringify(content) };
         }
-    } else {
-        data = { type: "text", content };
-    }
 
-    let children;
-    switch (data.type) {
-        case "text":
-            children = <span>{data.content}</span>;
-            break;
-        case "user_added":
-        case "user_remove":
-            children = (
-                <TextReact
-                    id={`app.main.channel.system.${data.type === 'user_added' ? "added_by" : "removed_by"}`}
-                    fields={{
-                        user: <UserShort user={data.user} />,
-                        other_user: <UserShort user={data.by} />
-                    }}
-                />
-            );
-            break;
-        case "user_joined":
-        case "user_left":
-        case "user_kicked":
-        case "user_banned":
-            children = (
-                <TextReact
-                    id={`app.main.channel.system.${data.type}`}
-                    fields={{
-                        user: <UserShort user={data.user} />
-                    }}
-                />
-            );
-            break;
-        case "channel_renamed":
-            children = (
-                <TextReact
-                    id={`app.main.channel.system.channel_renamed`}
-                    fields={{
-                        user: <UserShort user={data.by} />,
-                        name: <b>{data.name}</b>
-                    }}
-                />
-            );
-            break;
-        case "channel_description_changed":
-        case "channel_icon_changed":
-            children = (
-                <TextReact
-                    id={`app.main.channel.system.${data.type}`}
-                    fields={{
-                        user: <UserShort user={data.by} />
-                    }}
-                />
-            );
-            break;
-    }
-
-    return (
-        <MessageBase
-            onContextMenu={attachContext ? attachContextMenu('Menu',
-                { message, contextualChannel: message.channel }
-            ) : undefined}>
-            <MessageInfo>
-                <MessageDetail message={message} />
-            </MessageInfo>
-            <SystemContent>{children}</SystemContent>
-        </MessageBase>
-    );
-}
+        return (
+            <MessageBase
+                highlight={highlight}
+                onContextMenu={
+                    attachContext
+                        ? attachContextMenu("Menu", {
+                              message,
+                              contextualChannel: message.channel,
+                          })
+                        : undefined
+                }>
+                {!hideInfo && (
+                    <MessageInfo>
+                        <MessageDetail message={message} position="left" />
+                    </MessageInfo>
+                )}
+                <SystemContent>{children}</SystemContent>
+            </MessageBase>
+        );
+    },
+);

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

+.attachment {
+    display: grid;
+    grid-auto-flow: row dense;
+    grid-auto-columns: min(100%, var(--attachment-max-width));
+
+    margin: 0.125rem 0 0.125rem;
+    width: max-content;
+    max-width: 100%;
+
+    &[data-spoiler="true"] {
+        filter: blur(30px);
+        pointer-events: none;
+    }
+
+    &.audio {
+        gap: 4px;
+        padding: 6px;
+        display: flex;
+        max-width: 100%;
+        flex-direction: column;
+        width: var(--attachment-default-width);
+        background: var(--secondary-background);
+
+        > audio {
+            width: 100%;
+        }
+    }
+
+    &.file {
+        > div {
+            padding: 12px;
+            max-width: 100%;
+            user-select: none;
+            width: fit-content;
+            border-radius: var(--border-radius);
+            width: var(--attachment-default-width);
+        }
+    }
+
+    &.text {
+        width: 100%;
+        overflow: hidden;
+        grid-auto-columns: unset;
+        max-width: var(--attachment-max-text-width);
+
+        .textContent {
+            height: 140px;
+            padding: 12px;
+            overflow-x: auto;
+            overflow-y: auto;
+            border-radius: 0 !important;
+            background: var(--secondary-header);
+
+            pre {
+                margin: 0;
+            }
+
+            pre code {
+                font-family: var(--monospace-font), sans-serif;
+            }
+
+            &[data-loading="true"] {
+                display: flex;
+
+                > * {
+                    flex-grow: 1;
+                }
+            }
+        }
+    }
+}
+
+.margin {
+    margin-top: 4px;
+}
+
+.container {
+    max-width: 100%;
+    overflow: hidden;
+    width: fit-content;
+
+    > :first-child {
+        width: min(var(--attachment-max-width), 100%, var(--width));
+    }
+}
+
+.container,
+.attachment,
+.image {
+    border-radius: var(--border-radius);
+}