src/context/revoltjs/RevoltClient.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
 import { Client } from "revolt.js";
-import { createContext } from "preact";
-import { useState } from "preact/hooks";
-import { Children } from "../../types/Preact";
 import { Route } from "revolt.js/dist/api/routes";
+
+import { createContext } from "preact";
+import { useContext, useEffect, useMemo, useState } from "preact/hooks";
+
+import { SingletonMessageRenderer } from "../../lib/renderer/Singleton";
+
+import { dispatch } from "../../redux";
 import { connectState } from "../../redux/connector";
-import { WithDispatcher } from "../../redux/reducers";
 import { AuthState } from "../../redux/reducers/auth";
-import { SyncOptions } from "../../redux/reducers/sync";
+
+import Preloader from "../../components/ui/Preloader";
+
+import { Children } from "../../types/Preact";
+import { useIntermediate } from "../intermediate/Intermediate";
+import { registerEvents, setReconnectDisallowed } from "./events";
+import { takeError } from "./util";
 
 export enum ClientStatus {
+    INIT,
     LOADING,
     READY,
     OFFLINE,
@@ -25,53 +36,172 @@ export interface ClientOperations {
     ready: () => boolean;
 }
 
-export interface AppState {
-    status: ClientStatus;
-    operations: ClientOperations;
-}
-
-export const AppContext = createContext<AppState>(undefined as any);
+// By the time they are used, they should all be initialized.
+// Currently the app does not render until a client is built and the other two are always initialized on first render.
+// - insert's words
+export const AppContext = createContext<Client>(null!);
+export const StatusContext = createContext<ClientStatus>(null!);
+export const OperationsContext = createContext<ClientOperations>(null!);
 
-export const RevoltClient = new Client({
-    autoReconnect: false,
-    apiURL: import.meta.env.VITE_API_URL,
-    debug: process.env.NODE_ENV === "development",
-    // db: new Db("state", 3, ["channels", "servers", "users", "members"])
-});
-
-type Props = WithDispatcher & {
+type Props = {
     auth: AuthState;
-    sync: SyncOptions;
     children: Children;
 };
 
-function Context({ auth, sync, children, dispatcher }: Props) {
-    const [status, setStatus] = useState(ClientStatus.LOADING);
-
-    const value: AppState = {
-        status,
-        operations: {
-            login: async data => {},
-            logout: async shouldRequest => {},
-            loggedIn: () => false,
-            ready: () => false
-        }
-    };
+function Context({ auth, children }: Props) {
+    const { openScreen } = useIntermediate();
+    const [status, setStatus] = useState(ClientStatus.INIT);
+    const [client, setClient] = useState<Client>(
+        undefined as unknown as Client,
+    );
+
+    useEffect(() => {
+        (async () => {
+            const client = new Client({
+                autoReconnect: false,
+                apiURL: import.meta.env.VITE_API_URL,
+                debug: import.meta.env.DEV,
+            });
+
+            setClient(client);
+            SingletonMessageRenderer.subscribe(client);
+            setStatus(ClientStatus.LOADING);
+        })();
+    }, []);
+
+    if (status === ClientStatus.INIT) return null;
+
+    const operations: ClientOperations = useMemo(() => {
+        return {
+            login: async (data) => {
+                setReconnectDisallowed(true);
+
+                try {
+                    const onboarding = await client.login(data);
+                    setReconnectDisallowed(false);
+                    const login = () =>
+                        dispatch({
+                            type: "LOGIN",
+                            session: client.session!, // This [null assertion] is ok, we should have a session by now. - insert's words
+                        });
+
+                    if (onboarding) {
+                        openScreen({
+                            id: "onboarding",
+                            callback: async (username: string) =>
+                                onboarding(username, true).then(login),
+                        });
+                    } else {
+                        login();
+                    }
+                } catch (err) {
+                    setReconnectDisallowed(false);
+                    throw err;
+                }
+            },
+            logout: async (shouldRequest) => {
+                dispatch({ type: "LOGOUT" });
+
+                client.reset();
+                dispatch({ type: "RESET" });
+
+                openScreen({ id: "none" });
+                setStatus(ClientStatus.READY);
+
+                client.websocket.disconnect();
+
+                if (shouldRequest) {
+                    try {
+                        await client.logout();
+                    } catch (err) {
+                        console.error(err);
+                    }
+                }
+            },
+            loggedIn: () => typeof auth.active !== "undefined",
+            ready: () =>
+                operations.loggedIn() && typeof client.user !== "undefined",
+        };
+    }, [client, auth.active, openScreen]);
+
+    useEffect(
+        () => registerEvents({ operations }, setStatus, client),
+        [client, operations],
+    );
+
+    useEffect(() => {
+        (async () => {
+            if (auth.active) {
+                dispatch({ type: "QUEUE_FAIL_ALL" });
+
+                const active = auth.accounts[auth.active];
+                client.user = client.users.get(active.session.user_id);
+                if (!navigator.onLine) {
+                    return setStatus(ClientStatus.OFFLINE);
+                }
+
+                if (operations.ready()) setStatus(ClientStatus.CONNECTING);
+
+                if (navigator.onLine) {
+                    await client
+                        .fetchConfiguration()
+                        .catch(() =>
+                            console.error("Failed to connect to API server."),
+                        );
+                }
+
+                try {
+                    await client.fetchConfiguration();
+                    const callback = await client.useExistingSession(
+                        active.session,
+                    );
+
+                    if (callback) {
+                        openScreen({ id: "onboarding", callback });
+                    }
+                } catch (err) {
+                    setStatus(ClientStatus.DISCONNECTED);
+                    const error = takeError(err);
+                    if (error === "Forbidden" || error === "Unauthorized") {
+                        operations.logout(true);
+                        openScreen({ id: "signed_out" });
+                    } else {
+                        openScreen({ id: "error", error });
+                    }
+                }
+            } else {
+                try {
+                    await client.fetchConfiguration();
+                } catch (err) {
+                    console.error("Failed to connect to API server.");
+                }
+
+                setStatus(ClientStatus.READY);
+            }
+        })();
+        // eslint-disable-next-line
+    }, []);
+
+    if (status === ClientStatus.LOADING) {
+        return <Preloader type="spinner" />;
+    }
 
     return (
-        <AppContext.Provider value={value}>
-            { children }
+        <AppContext.Provider value={client}>
+            <StatusContext.Provider value={status}>
+                <OperationsContext.Provider value={operations}>
+                    {children}
+                </OperationsContext.Provider>
+            </StatusContext.Provider>
         </AppContext.Provider>
     );
 }
 
-export default connectState<{ children: Children }>(
-    Context,
-    state => {
-        return {
-            auth: state.auth,
-            sync: state.sync
-        };
-    },
-    true
-);
+export default connectState<{ children: Children }>(Context, (state) => {
+    return {
+        auth: state.auth,
+        sync: state.sync,
+    };
+});
+
+export const useClient = () => useContext(AppContext);

src/context/revoltjs/StateMonitor.tsx

+/**
+ * This file monitors the message cache to delete any queued messages that have already sent.
+ */
+import { Message } from "revolt.js/dist/maps/Messages";
+
+import { useContext, useEffect } from "preact/hooks";
+
+import { dispatch } from "../../redux";
+import { connectState } from "../../redux/connector";
+import { QueuedMessage } from "../../redux/reducers/queue";
+
+import { AppContext } from "./RevoltClient";
+
+type Props = {
+    messages: QueuedMessage[];
+};
+
+function StateMonitor(props: Props) {
+    const client = useContext(AppContext);
+
+    useEffect(() => {
+        dispatch({
+            type: "QUEUE_DROP_ALL",
+        });
+    }, []);
+
+    useEffect(() => {
+        function add(msg: Message) {
+            if (!msg.nonce) return;
+            if (!props.messages.find((x) => x.id === msg.nonce)) return;
+
+            dispatch({
+                type: "QUEUE_REMOVE",
+                nonce: msg.nonce,
+            });
+        }
+
+        client.addListener("message", add);
+        return () => client.removeListener("message", add);
+    }, [client, props.messages]);
+
+    return null;
+}
+
+export default connectState(StateMonitor, (state) => {
+    return {
+        messages: [...state.queue],
+    };
+});

src/context/revoltjs/SyncManager.tsx

+/**
+ * This file monitors changes to settings and syncs them to the server.
+ */
+import isEqual from "lodash.isequal";
+import { UserSettings } from "revolt-api/types/Sync";
+import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
+
+import { useCallback, useContext, useEffect, useMemo } from "preact/hooks";
+
+import { dispatch } from "../../redux";
+import { connectState } from "../../redux/connector";
+import { Notifications } from "../../redux/reducers/notifications";
+import { Settings } from "../../redux/reducers/settings";
+import {
+    DEFAULT_ENABLED_SYNC,
+    SyncData,
+    SyncKeys,
+    SyncOptions,
+} from "../../redux/reducers/sync";
+
+import { Language } from "../Locale";
+import { AppContext, ClientStatus, StatusContext } from "./RevoltClient";
+
+type Props = {
+    settings: Settings;
+    locale: Language;
+    sync: SyncOptions;
+    notifications: Notifications;
+};
+
+const lastValues: { [key in SyncKeys]?: unknown } = {};
+
+export function mapSync(
+    packet: UserSettings,
+    revision?: Record<string, number>,
+) {
+    const update: { [key in SyncKeys]?: [number, SyncData[key]] } = {};
+    for (const key of Object.keys(packet)) {
+        const [timestamp, obj] = packet[key];
+        if (timestamp < (revision ?? {})[key] ?? 0) {
+            continue;
+        }
+
+        let object;
+        if (obj[0] === "{") {
+            object = JSON.parse(obj);
+        } else {
+            object = obj;
+        }
+
+        lastValues[key as SyncKeys] = object;
+        update[key as SyncKeys] = [timestamp, object];
+    }
+
+    return update;
+}
+
+function SyncManager(props: Props) {
+    const client = useContext(AppContext);
+    const status = useContext(StatusContext);
+
+    useEffect(() => {
+        if (status === ClientStatus.ONLINE) {
+            client
+                .syncFetchSettings(
+                    DEFAULT_ENABLED_SYNC.filter(
+                        (x) => !props.sync?.disabled?.includes(x),
+                    ),
+                )
+                .then((data) => {
+                    dispatch({
+                        type: "SYNC_UPDATE",
+                        update: mapSync(data),
+                    });
+                });
+
+            client
+                .syncFetchUnreads()
+                .then((unreads) => dispatch({ type: "UNREADS_SET", unreads }));
+        }
+    }, [client, props.sync?.disabled, status]);
+
+    const syncChange = useCallback(
+        (key: SyncKeys, data: unknown) => {
+            const timestamp = +new Date();
+            dispatch({
+                type: "SYNC_SET_REVISION",
+                key,
+                timestamp,
+            });
+
+            client.syncSetSettings(
+                {
+                    [key]: data as string,
+                },
+                timestamp,
+            );
+        },
+        [client],
+    );
+
+    const disabled = useMemo(
+        () => props.sync.disabled ?? [],
+        [props.sync.disabled],
+    );
+    for (const [key, object] of [
+        ["appearance", props.settings.appearance],
+        ["theme", props.settings.theme],
+        ["locale", props.locale],
+        ["notifications", props.notifications],
+    ] as [SyncKeys, unknown][]) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+            if (disabled.indexOf(key) === -1) {
+                if (typeof lastValues[key] !== "undefined") {
+                    if (!isEqual(lastValues[key], object)) {
+                        syncChange(key, object);
+                    }
+                }
+            }
+
+            lastValues[key] = object;
+        }, [key, syncChange, disabled, object]);
+    }
+
+    useEffect(() => {
+        function onPacket(packet: ClientboundNotification) {
+            if (packet.type === "UserSettingsUpdate") {
+                const update: { [key in SyncKeys]?: [number, SyncData[key]] } =
+                    mapSync(packet.update, props.sync.revision);
+
+                dispatch({
+                    type: "SYNC_UPDATE",
+                    update,
+                });
+            }
+        }
+
+        client.addListener("packet", onPacket);
+        return () => client.removeListener("packet", onPacket);
+    }, [client, disabled, props.sync]);
+
+    return null;
+}
+
+export default connectState(SyncManager, (state) => {
+    return {
+        settings: state.settings,
+        locale: state.locale,
+        sync: state.sync,
+        notifications: state.notifications,
+    };
+});

src/context/revoltjs/events.ts

+import { Client } from "revolt.js/dist";
+import { Message } from "revolt.js/dist/maps/Messages";
+import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
+
+import { StateUpdater } from "preact/hooks";
+
+import { dispatch } from "../../redux";
+
+import { ClientOperations, ClientStatus } from "./RevoltClient";
+
+export let preventReconnect = false;
+let preventUntil = 0;
+
+export function setReconnectDisallowed(allowed: boolean) {
+    preventReconnect = allowed;
+}
+
+export function registerEvents(
+    { operations }: { operations: ClientOperations },
+    setStatus: StateUpdater<ClientStatus>,
+    client: Client,
+) {
+    function attemptReconnect() {
+        if (preventReconnect) return;
+        function reconnect() {
+            preventUntil = +new Date() + 2000;
+            client.websocket.connect().catch((err) => console.error(err));
+        }
+
+        if (+new Date() > preventUntil) {
+            setTimeout(reconnect, 2000);
+        } else {
+            reconnect();
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let listeners: Record<string, (...args: any[]) => void> = {
+        connecting: () =>
+            operations.ready() && setStatus(ClientStatus.CONNECTING),
+
+        dropped: () => {
+            if (operations.ready()) {
+                setStatus(ClientStatus.DISCONNECTED);
+                attemptReconnect();
+            }
+        },
+
+        packet: (packet: ClientboundNotification) => {
+            switch (packet.type) {
+                case "ChannelAck": {
+                    dispatch({
+                        type: "UNREADS_MARK_READ",
+                        channel: packet.id,
+                        message: packet.message_id,
+                    });
+                    break;
+                }
+            }
+        },
+
+        message: (message: Message) => {
+            if (message.mention_ids?.includes(client.user!._id)) {
+                dispatch({
+                    type: "UNREADS_MENTION",
+                    channel: message.channel_id,
+                    message: message._id,
+                });
+            }
+        },
+
+        ready: () => setStatus(ClientStatus.ONLINE),
+    };
+
+    if (import.meta.env.DEV) {
+        listeners = new Proxy(listeners, {
+            get:
+                (target, listener) =>
+                (...args: unknown[]) => {
+                    console.debug(`Calling ${listener.toString()} with`, args);
+                    Reflect.get(target, listener)(...args);
+                },
+        });
+    }
+
+    // TODO: clean this a bit and properly handle types
+    for (const listener in listeners) {
+        client.addListener(listener, listeners[listener]);
+    }
+
+    const online = () => {
+        if (operations.ready()) {
+            setStatus(ClientStatus.RECONNECTING);
+            setReconnectDisallowed(false);
+            attemptReconnect();
+        }
+    };
+
+    const offline = () => {
+        if (operations.ready()) {
+            setReconnectDisallowed(true);
+            client.websocket.disconnect();
+            setStatus(ClientStatus.OFFLINE);
+        }
+    };
+
+    window.addEventListener("online", online);
+    window.addEventListener("offline", offline);
+
+    return () => {
+        for (const listener in listeners) {
+            client.removeListener(
+                listener,
+                listeners[listener as keyof typeof listeners],
+            );
+        }
+
+        window.removeEventListener("online", online);
+        window.removeEventListener("offline", offline);
+    };
+}

src/context/revoltjs/messages.ts

-import { Message } from "revolt.js/dist/api/objects";
-
-export type MessageObject = Omit<Message, "edited"> & { edited?: string };
-export function mapMessage(message: Partial<Message>) {
-    const { edited, ...msg } = message;
-    return {
-        ...msg,
-        edited: edited?.$date,
-    } as MessageObject;
-}

src/context/revoltjs/util.tsx

+import { Channel } from "revolt.js/dist/maps/Channels";
+
+import { Text } from "preact-i18n";
+
+import { Children } from "../../types/Preact";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function takeError(error: any): string {
+    const type = error?.response?.data?.type;
+    const id = type;
+    if (!type) {
+        if (error?.response?.status === 403) {
+            return "Unauthorized";
+        } else if (error && !!error.isAxiosError && !error.response) {
+            return "NetworkError";
+        }
+
+        console.error(error);
+        return "UnknownError";
+    }
+
+    return id;
+}
+
+export function getChannelName(
+    channel: Channel,
+    prefixType?: boolean,
+): Children {
+    if (channel.channel_type === "SavedMessages")
+        return <Text id="app.navigation.tabs.saved" />;
+
+    if (channel.channel_type === "DirectMessage") {
+        return (
+            <>
+                {prefixType && "@"}
+                {channel.recipient!.username}
+            </>
+        );
+    }
+
+    if (channel.channel_type === "TextChannel" && prefixType) {
+        return <>#{channel.name}</>;
+    }
+
+    return <>{channel.name}</>;
+}

src/env.d.ts

@@ -2,4 +2,3 @@ interface ImportMetaEnv {
     VITE_API_URL: string;
     VITE_THEMES_URL: string;
 }
-  
\ No newline at end of file

src/globals.d.ts

+type Build = "stable" | "nightly" | "dev";
+
+type NativeConfig = {
+    frame: boolean;
+    build: Build;
+    discordRPC: boolean;
+    hardwareAcceleration: boolean;
+};
+
+declare interface Window {
+    isNative?: boolean;
+    nativeVersion: string;
+    native: {
+        min();
+        max();
+        close();
+        reload();
+        relaunch();
+
+        getConfig(): NativeConfig;
+        set(key: keyof NativeConfig, value: unknown);
+
+        getAutoStart(): Promise<boolean>;
+        enableAutoStart(): Promise<void>;
+        disableAutoStart(): Promise<void>;
+    };
+}
+
+declare const Fragment = preact.Fragment;

src/lib/ConditionalLink.tsx

+import { Link, LinkProps } from "react-router-dom";
+
+type Props = LinkProps &
+    JSX.HTMLAttributes<HTMLAnchorElement> & {
+        active: boolean;
+    };
+
+export default function ConditionalLink(props: Props) {
+    const { active, ...linkProps } = props;
+
+    if (active) {
+        return <a>{props.children}</a>;
+    }
+    return <Link {...linkProps} />;
+}

src/lib/ContextMenus.tsx

+import {
+    At,
+    Bell,
+    BellOff,
+    Check,
+    CheckSquare,
+    ChevronRight,
+    Block,
+    Square,
+    LeftArrowAlt,
+    Trash,
+} from "@styled-icons/boxicons-regular";
+import { Cog, UserVoice } from "@styled-icons/boxicons-solid";
+import { useHistory } from "react-router-dom";
+import { Attachment } from "revolt-api/types/Autumn";
+import { Presence, RelationshipStatus } from "revolt-api/types/Users";
+import {
+    ChannelPermission,
+    ServerPermission,
+    UserPermission,
+} from "revolt.js/dist/api/permissions";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { Message } from "revolt.js/dist/maps/Messages";
+import { Server } from "revolt.js/dist/maps/Servers";
+import { User } from "revolt.js/dist/maps/Users";
+
+import {
+    ContextMenuWithData,
+    MenuItem,
+    openContextMenu,
+} from "preact-context-menu";
+import { Text } from "preact-i18n";
+import { useContext } from "preact/hooks";
+
+import { dispatch } from "../redux";
+import { connectState } from "../redux/connector";
+import {
+    getNotificationState,
+    Notifications,
+    NotificationState,
+} from "../redux/reducers/notifications";
+import { QueuedMessage } from "../redux/reducers/queue";
+
+import { Screen, useIntermediate } from "../context/intermediate/Intermediate";
+import {
+    AppContext,
+    ClientStatus,
+    StatusContext,
+} from "../context/revoltjs/RevoltClient";
+import { takeError } from "../context/revoltjs/util";
+
+import Tooltip from "../components/common/Tooltip";
+import UserStatus from "../components/common/user/UserStatus";
+import IconButton from "../components/ui/IconButton";
+import LineDivider from "../components/ui/LineDivider";
+
+import { Children } from "../types/Preact";
+import { internalEmit } from "./eventEmitter";
+
+interface ContextMenuData {
+    user?: string;
+    server?: string;
+    server_list?: string;
+    channel?: string;
+    message?: Message;
+
+    unread?: boolean;
+    queued?: QueuedMessage;
+    contextualChannel?: string;
+}
+
+type Action =
+    | { action: "copy_id"; id: string }
+    | { action: "copy_selection" }
+    | { action: "copy_text"; content: string }
+    | { action: "mark_as_read"; channel: Channel }
+    | { action: "retry_message"; message: QueuedMessage }
+    | { action: "cancel_message"; message: QueuedMessage }
+    | { action: "mention"; user: string }
+    | { action: "reply_message"; id: string }
+    | { action: "quote_message"; content: string }
+    | { action: "edit_message"; id: string }
+    | { action: "delete_message"; target: Message }
+    | { action: "open_file"; attachment: Attachment }
+    | { action: "save_file"; attachment: Attachment }
+    | { action: "copy_file_link"; attachment: Attachment }
+    | { action: "open_link"; link: string }
+    | { action: "copy_link"; link: string }
+    | { action: "remove_member"; channel: Channel; user: User }
+    | { action: "kick_member"; target: Server; user: User }
+    | { action: "ban_member"; target: Server; user: User }
+    | { action: "view_profile"; user: User }
+    | { action: "message_user"; user: User }
+    | { action: "block_user"; user: User }
+    | { action: "unblock_user"; user: User }
+    | { action: "add_friend"; user: User }
+    | { action: "remove_friend"; user: User }
+    | { action: "cancel_friend"; user: User }
+    | { action: "set_presence"; presence: Presence }
+    | { action: "set_status" }
+    | { action: "clear_status" }
+    | { action: "create_channel"; target: Server }
+    | {
+          action: "create_invite";
+          target: Channel;
+      }
+    | { action: "leave_group"; target: Channel }
+    | {
+          action: "delete_channel";
+          target: Channel;
+      }
+    | { action: "close_dm"; target: Channel }
+    | { action: "leave_server"; target: Server }
+    | { action: "delete_server"; target: Server }
+    | { action: "open_notification_options"; channel: Channel }
+    | { action: "open_settings" }
+    | { action: "open_channel_settings"; id: string }
+    | { action: "open_server_settings"; id: string }
+    | { action: "open_server_channel_settings"; server: string; id: string }
+    | {
+          action: "set_notification_state";
+          key: string;
+          state?: NotificationState;
+      };
+
+type Props = {
+    notifications: Notifications;
+};
+
+// ! FIXME: I dare someone to re-write this
+// Tip: This should just be split into separate context menus per logical area.
+function ContextMenus(props: Props) {
+    const { openScreen, writeClipboard } = useIntermediate();
+    const client = useContext(AppContext);
+    const userId = client.user!._id;
+    const status = useContext(StatusContext);
+    const isOnline = status === ClientStatus.ONLINE;
+    const history = useHistory();
+
+    function contextClick(data?: Action) {
+        if (typeof data === "undefined") return;
+
+        (async () => {
+            switch (data.action) {
+                case "copy_id":
+                    writeClipboard(data.id);
+                    break;
+                case "copy_selection":
+                    writeClipboard(document.getSelection()?.toString() ?? "");
+                    break;
+                case "mark_as_read":
+                    {
+                        if (
+                            data.channel.channel_type === "SavedMessages" ||
+                            data.channel.channel_type === "VoiceChannel"
+                        )
+                            return;
+
+                        const message =
+                            typeof data.channel.last_message === "string"
+                                ? data.channel.last_message
+                                : data.channel.last_message!._id;
+
+                        dispatch({
+                            type: "UNREADS_MARK_READ",
+                            channel: data.channel._id,
+                            message,
+                        });
+
+                        client.req(
+                            "PUT",
+                            `/channels/${data.channel._id}/ack/${message}` as "/channels/id/ack/id",
+                        );
+                    }
+                    break;
+
+                case "retry_message":
+                    {
+                        const nonce = data.message.id;
+                        const fail = (error: string) =>
+                            dispatch({
+                                type: "QUEUE_FAIL",
+                                nonce,
+                                error,
+                            });
+
+                        client.channels
+                            .get(data.message.channel)!
+                            .sendMessage({
+                                nonce: data.message.id,
+                                content: data.message.data.content as string,
+                                replies: data.message.data.replies,
+                            })
+                            .catch(fail);
+
+                        dispatch({
+                            type: "QUEUE_START",
+                            nonce,
+                        });
+                    }
+                    break;
+
+                case "cancel_message":
+                    {
+                        dispatch({
+                            type: "QUEUE_REMOVE",
+                            nonce: data.message.id,
+                        });
+                    }
+                    break;
+
+                case "mention":
+                    {
+                        internalEmit(
+                            "MessageBox",
+                            "append",
+                            `<@${data.user}>`,
+                            "mention",
+                        );
+                    }
+                    break;
+
+                case "copy_text":
+                    writeClipboard(data.content);
+                    break;
+
+                case "reply_message":
+                    {
+                        internalEmit("ReplyBar", "add", data.id);
+                    }
+                    break;
+
+                case "quote_message":
+                    {
+                        internalEmit(
+                            "MessageBox",
+                            "append",
+                            data.content,
+                            "quote",
+                        );
+                    }
+                    break;
+
+                case "edit_message":
+                    {
+                        internalEmit(
+                            "MessageRenderer",
+                            "edit_message",
+                            data.id,
+                        );
+                    }
+                    break;
+
+                case "open_file":
+                    {
+                        window
+                            .open(
+                                client.generateFileURL(data.attachment),
+                                "_blank",
+                            )
+                            ?.focus();
+                    }
+                    break;
+
+                case "save_file":
+                    {
+                        window.open(
+                            // ! FIXME: do this from revolt.js
+                            client
+                                .generateFileURL(data.attachment)
+                                ?.replace(
+                                    "attachments",
+                                    "attachments/download",
+                                ),
+                            "_blank",
+                        );
+                    }
+                    break;
+
+                case "copy_file_link":
+                    {
+                        const { filename } = data.attachment;
+                        writeClipboard(
+                            // ! FIXME: do from r.js
+                            `${client.generateFileURL(
+                                data.attachment,
+                            )}/${encodeURI(filename)}`,
+                        );
+                    }
+                    break;
+
+                case "open_link":
+                    {
+                        window.open(data.link, "_blank")?.focus();
+                    }
+                    break;
+
+                case "copy_link":
+                    {
+                        writeClipboard(data.link);
+                    }
+                    break;
+
+                case "remove_member":
+                    {
+                        data.channel.removeMember(data.user._id);
+                    }
+                    break;
+
+                case "view_profile":
+                    openScreen({ id: "profile", user_id: data.user._id });
+                    break;
+
+                case "message_user":
+                    {
+                        const channel = await data.user.openDM();
+                        if (channel) {
+                            history.push(`/channel/${channel._id}`);
+                        }
+                    }
+                    break;
+
+                case "add_friend":
+                    {
+                        await data.user.addFriend();
+                    }
+                    break;
+
+                case "block_user":
+                    openScreen({
+                        id: "special_prompt",
+                        type: "block_user",
+                        target: data.user,
+                    });
+                    break;
+                case "unblock_user":
+                    await data.user.unblockUser();
+                    break;
+                case "remove_friend":
+                    openScreen({
+                        id: "special_prompt",
+                        type: "unfriend_user",
+                        target: data.user,
+                    });
+                    break;
+                case "cancel_friend":
+                    await data.user.removeFriend();
+                    break;
+
+                case "set_presence":
+                    {
+                        await client.users.edit({
+                            status: {
+                                ...client.user?.status,
+                                presence: data.presence,
+                            },
+                        });
+                    }
+                    break;
+
+                case "set_status":
+                    openScreen({
+                        id: "special_input",
+                        type: "set_custom_status",
+                    });
+                    break;
+
+                case "clear_status":
+                    {
+                        const { text: _text, ...status } =
+                            client.user?.status ?? {};
+                        await client.users.edit({ status });
+                    }
+                    break;
+
+                case "leave_group":
+                case "close_dm":
+                case "leave_server":
+                case "delete_channel":
+                case "delete_server":
+                case "delete_message":
+                case "create_channel":
+                case "create_invite":
+                    // Typescript flattens the case types into a single type and type structure and specifity is lost
+                    openScreen({
+                        id: "special_prompt",
+                        type: data.action,
+                        target: data.target,
+                    } as unknown as Screen);
+                    break;
+
+                case "ban_member":
+                case "kick_member":
+                    openScreen({
+                        id: "special_prompt",
+                        type: data.action,
+                        target: data.target,
+                        user: data.user,
+                    });
+                    break;
+
+                case "open_notification_options": {
+                    openContextMenu("NotificationOptions", {
+                        channel: data.channel,
+                    });
+                    break;
+                }
+
+                case "open_settings":
+                    history.push("/settings");
+                    break;
+                case "open_channel_settings":
+                    history.push(`/channel/${data.id}/settings`);
+                    break;
+                case "open_server_channel_settings":
+                    history.push(
+                        `/server/${data.server}/channel/${data.id}/settings`,
+                    );
+                    break;
+                case "open_server_settings":
+                    history.push(`/server/${data.id}/settings`);
+                    break;
+
+                case "set_notification_state": {
+                    const { key, state } = data;
+                    if (state) {
+                        dispatch({ type: "NOTIFICATIONS_SET", key, state });
+                    } else {
+                        dispatch({ type: "NOTIFICATIONS_REMOVE", key });
+                    }
+                    break;
+                }
+            }
+        })().catch((err) => {
+            openScreen({ id: "error", error: takeError(err) });
+        });
+    }
+
+    return (
+        <>
+            <ContextMenuWithData id="Menu" onClose={contextClick}>
+                {({
+                    user: uid,
+                    channel: cid,
+                    server: sid,
+                    message,
+                    server_list,
+                    queued,
+                    unread,
+                    contextualChannel: cxid,
+                }: ContextMenuData) => {
+                    const elements: Children[] = [];
+                    let lastDivider = false;
+
+                    function generateAction(
+                        action: Action,
+                        locale?: string,
+                        disabled?: boolean,
+                        tip?: Children,
+                    ) {
+                        lastDivider = false;
+                        elements.push(
+                            <MenuItem data={action} disabled={disabled}>
+                                <Text
+                                    id={`app.context_menu.${
+                                        locale ?? action.action
+                                    }`}
+                                />
+                                {tip && <div className="tip">{tip}</div>}
+                            </MenuItem>,
+                        );
+                    }
+
+                    function pushDivider() {
+                        if (lastDivider || elements.length === 0) return;
+                        lastDivider = true;
+                        elements.push(<LineDivider />);
+                    }
+
+                    if (server_list) {
+                        const server = client.servers.get(server_list)!;
+                        const permissions = server.permission;
+                        if (server) {
+                            if (permissions & ServerPermission.ManageChannels)
+                                generateAction({
+                                    action: "create_channel",
+                                    target: server,
+                                });
+                            if (permissions & ServerPermission.ManageServer)
+                                generateAction({
+                                    action: "open_server_settings",
+                                    id: server_list,
+                                });
+                        }
+
+                        return elements;
+                    }
+
+                    if (document.getSelection()?.toString().length ?? 0 > 0) {
+                        generateAction(
+                            { action: "copy_selection" },
+                            undefined,
+                            undefined,
+                            <Text id="shortcuts.ctrlc" />,
+                        );
+                        pushDivider();
+                    }
+
+                    const channel = cid ? client.channels.get(cid) : undefined;
+                    const contextualChannel = cxid
+                        ? client.channels.get(cxid)
+                        : undefined;
+                    const targetChannel = channel ?? contextualChannel;
+
+                    const user = uid ? client.users.get(uid) : undefined;
+                    const serverChannel =
+                        targetChannel &&
+                        (targetChannel.channel_type === "TextChannel" ||
+                            targetChannel.channel_type === "VoiceChannel")
+                            ? targetChannel
+                            : undefined;
+
+                    const s = serverChannel ? serverChannel.server_id! : sid;
+                    const server = s ? client.servers.get(s) : undefined;
+
+                    const channelPermissions = targetChannel?.permission || 0;
+                    const serverPermissions =
+                        (server
+                            ? server.permission
+                            : serverChannel
+                            ? serverChannel.server?.permission
+                            : 0) || 0;
+                    const userPermissions = (user ? user.permission : 0) || 0;
+
+                    if (channel && unread) {
+                        generateAction({ action: "mark_as_read", channel });
+                    }
+
+                    if (contextualChannel) {
+                        if (user && user._id !== userId) {
+                            generateAction({
+                                action: "mention",
+                                user: user._id,
+                            });
+
+                            pushDivider();
+                        }
+                    }
+
+                    if (user) {
+                        let actions: Action["action"][];
+                        switch (user.relationship) {
+                            case RelationshipStatus.User:
+                                actions = [];
+                                break;
+                            case RelationshipStatus.Friend:
+                                actions = ["remove_friend", "block_user"];
+                                break;
+                            case RelationshipStatus.Incoming:
+                                actions = [
+                                    "add_friend",
+                                    "cancel_friend",
+                                    "block_user",
+                                ];
+                                break;
+                            case RelationshipStatus.Outgoing:
+                                actions = ["cancel_friend", "block_user"];
+                                break;
+                            case RelationshipStatus.Blocked:
+                                actions = ["unblock_user"];
+                                break;
+                            case RelationshipStatus.BlockedOther:
+                                actions = ["block_user"];
+                                break;
+                            case RelationshipStatus.None:
+                            default:
+                                actions = ["add_friend", "block_user"];
+                        }
+
+                        if (userPermissions & UserPermission.ViewProfile) {
+                            generateAction({
+                                action: "view_profile",
+                                user,
+                            });
+                        }
+
+                        if (
+                            user._id !== userId &&
+                            userPermissions & UserPermission.SendMessage
+                        ) {
+                            generateAction({
+                                action: "message_user",
+                                user,
+                            });
+                        }
+
+                        for (let i = 0; i < actions.length; i++) {
+                            // Typescript can't determine that user the actions are linked together correctly
+                            generateAction({
+                                action: actions[i],
+                                user,
+                            } as unknown as Action);
+                        }
+                    }
+
+                    if (contextualChannel) {
+                        if (contextualChannel.channel_type === "Group" && uid) {
+                            if (
+                                contextualChannel.owner_id === userId &&
+                                userId !== uid
+                            ) {
+                                generateAction({
+                                    action: "remove_member",
+                                    channel: contextualChannel,
+                                    user: user!,
+                                });
+                            }
+                        }
+
+                        if (
+                            server &&
+                            uid &&
+                            userId !== uid &&
+                            uid !== server.owner
+                        ) {
+                            if (
+                                serverPermissions & ServerPermission.KickMembers
+                            )
+                                generateAction({
+                                    action: "kick_member",
+                                    target: server,
+                                    user: user!,
+                                });
+
+                            if (serverPermissions & ServerPermission.BanMembers)
+                                generateAction({
+                                    action: "ban_member",
+                                    target: server,
+                                    user: user!,
+                                });
+                        }
+                    }
+
+                    if (queued) {
+                        generateAction({
+                            action: "retry_message",
+                            message: queued,
+                        });
+
+                        generateAction({
+                            action: "cancel_message",
+                            message: queued,
+                        });
+                    }
+
+                    if (message && !queued) {
+                        generateAction({
+                            action: "reply_message",
+                            id: message._id,
+                        });
+
+                        if (
+                            typeof message.content === "string" &&
+                            message.content.length > 0
+                        ) {
+                            generateAction({
+                                action: "quote_message",
+                                content: message.content,
+                            });
+
+                            generateAction({
+                                action: "copy_text",
+                                content: message.content,
+                            });
+                        }
+
+                        if (message.author_id === userId) {
+                            generateAction({
+                                action: "edit_message",
+                                id: message._id,
+                            });
+                        }
+
+                        if (
+                            message.author_id === userId ||
+                            channelPermissions &
+                                ChannelPermission.ManageMessages
+                        ) {
+                            generateAction({
+                                action: "delete_message",
+                                target: message,
+                            });
+                        }
+
+                        if (message.attachments) {
+                            pushDivider();
+                            const { metadata } = message.attachments[0];
+                            const { type } = metadata;
+
+                            generateAction(
+                                {
+                                    action: "open_file",
+                                    attachment: message.attachments[0],
+                                },
+                                type === "Image"
+                                    ? "open_image"
+                                    : type === "Video"
+                                    ? "open_video"
+                                    : "open_file",
+                            );
+
+                            generateAction(
+                                {
+                                    action: "save_file",
+                                    attachment: message.attachments[0],
+                                },
+                                type === "Image"
+                                    ? "save_image"
+                                    : type === "Video"
+                                    ? "save_video"
+                                    : "save_file",
+                            );
+
+                            generateAction(
+                                {
+                                    action: "copy_file_link",
+                                    attachment: message.attachments[0],
+                                },
+                                "copy_link",
+                            );
+                        }
+
+                        if (document.activeElement?.tagName === "A") {
+                            const link =
+                                document.activeElement.getAttribute("href");
+                            if (link) {
+                                pushDivider();
+                                generateAction({ action: "open_link", link });
+                                generateAction({ action: "copy_link", link });
+                            }
+                        }
+                    }
+
+                    const id = sid ?? cid ?? uid ?? message?._id;
+                    if (id) {
+                        pushDivider();
+
+                        if (channel) {
+                            if (channel.channel_type !== "VoiceChannel") {
+                                generateAction(
+                                    {
+                                        action: "open_notification_options",
+                                        channel,
+                                    },
+                                    undefined,
+                                    undefined,
+                                    <ChevronRight size={24} />,
+                                );
+                            }
+
+                            switch (channel.channel_type) {
+                                case "Group":
+                                    // ! generateAction({ action: "create_invite", target: channel }); FIXME: add support for group invites
+                                    generateAction(
+                                        {
+                                            action: "open_channel_settings",
+                                            id: channel._id,
+                                        },
+                                        "open_group_settings",
+                                    );
+                                    generateAction(
+                                        {
+                                            action: "leave_group",
+                                            target: channel,
+                                        },
+                                        "leave_group",
+                                    );
+                                    break;
+                                case "DirectMessage":
+                                    generateAction({
+                                        action: "close_dm",
+                                        target: channel,
+                                    });
+                                    break;
+                                case "TextChannel":
+                                case "VoiceChannel":
+                                    if (
+                                        channelPermissions &
+                                        ChannelPermission.InviteOthers
+                                    ) {
+                                        generateAction({
+                                            action: "create_invite",
+                                            target: channel,
+                                        });
+                                    }
+
+                                    if (
+                                        serverPermissions &
+                                        ServerPermission.ManageServer
+                                    )
+                                        generateAction(
+                                            {
+                                                action: "open_server_channel_settings",
+                                                server: channel.server_id!,
+                                                id: channel._id,
+                                            },
+                                            "open_channel_settings",
+                                        );
+
+                                    if (
+                                        serverPermissions &
+                                        ServerPermission.ManageChannels
+                                    )
+                                        generateAction({
+                                            action: "delete_channel",
+                                            target: channel,
+                                        });
+
+                                    break;
+                            }
+                        }
+
+                        if (sid && server) {
+                            if (
+                                serverPermissions &
+                                ServerPermission.ManageServer
+                            )
+                                generateAction(
+                                    {
+                                        action: "open_server_settings",
+                                        id: server._id,
+                                    },
+                                    "open_server_settings",
+                                );
+
+                            if (userId === server.owner) {
+                                generateAction(
+                                    { action: "delete_server", target: server },
+                                    "delete_server",
+                                );
+                            } else {
+                                generateAction(
+                                    { action: "leave_server", target: server },
+                                    "leave_server",
+                                );
+                            }
+                        }
+
+                        generateAction(
+                            { action: "copy_id", id },
+                            sid
+                                ? "copy_sid"
+                                : cid
+                                ? "copy_cid"
+                                : message
+                                ? "copy_mid"
+                                : "copy_uid",
+                        );
+                    }
+
+                    return elements;
+                }}
+            </ContextMenuWithData>
+            <ContextMenuWithData
+                id="Status"
+                onClose={contextClick}
+                className="Status">
+                {() => {
+                    const user = client.user!;
+                    return (
+                        <>
+                            <div className="header">
+                                <div className="main">
+                                    <div
+                                        className="username"
+                                        onClick={() =>
+                                            writeClipboard(
+                                                client.user!.username,
+                                            )
+                                        }>
+                                        <Tooltip
+                                            content={
+                                                <Text id="app.special.copy_username" />
+                                            }>
+                                            @{user.username}
+                                        </Tooltip>
+                                    </div>
+                                    <div
+                                        className="status"
+                                        onClick={() =>
+                                            contextClick({
+                                                action: "set_status",
+                                            })
+                                        }>
+                                        <UserStatus user={user} />
+                                    </div>
+                                </div>
+                                <IconButton>
+                                    <MenuItem
+                                        data={{ action: "open_settings" }}>
+                                        <Cog size={22} />
+                                    </MenuItem>
+                                </IconButton>
+                            </div>
+                            <LineDivider />
+                            <MenuItem
+                                data={{
+                                    action: "set_presence",
+                                    presence: Presence.Online,
+                                }}
+                                disabled={!isOnline}>
+                                <div className="indicator online" />
+                                <Text id={`app.status.online`} />
+                            </MenuItem>
+                            <MenuItem
+                                data={{
+                                    action: "set_presence",
+                                    presence: Presence.Idle,
+                                }}
+                                disabled={!isOnline}>
+                                <div className="indicator idle" />
+                                <Text id={`app.status.idle`} />
+                            </MenuItem>
+                            <MenuItem
+                                data={{
+                                    action: "set_presence",
+                                    presence: Presence.Busy,
+                                }}
+                                disabled={!isOnline}>
+                                <div className="indicator busy" />
+                                <Text id={`app.status.busy`} />
+                            </MenuItem>
+                            <MenuItem
+                                data={{
+                                    action: "set_presence",
+                                    presence: Presence.Invisible,
+                                }}
+                                disabled={!isOnline}>
+                                <div className="indicator invisible" />
+                                <Text id={`app.status.invisible`} />
+                            </MenuItem>
+                            <LineDivider />
+                            <MenuItem
+                                data={{ action: "set_status" }}
+                                disabled={!isOnline}>
+                                <UserVoice size={18} />
+                                <Text id={`app.context_menu.custom_status`} />
+                                {client.user!.status?.text && (
+                                    <IconButton>
+                                        <MenuItem
+                                            data={{ action: "clear_status" }}>
+                                            <Trash size={18} />
+                                        </MenuItem>
+                                    </IconButton>
+                                )}
+                            </MenuItem>
+                        </>
+                    );
+                }}
+            </ContextMenuWithData>
+            <ContextMenuWithData
+                id="NotificationOptions"
+                onClose={contextClick}>
+                {({ channel }: { channel: Channel }) => {
+                    const state = props.notifications[channel._id];
+                    const actual = getNotificationState(
+                        props.notifications,
+                        channel,
+                    );
+
+                    const elements: Children[] = [
+                        <MenuItem
+                            key="notif"
+                            data={{
+                                action: "set_notification_state",
+                                key: channel._id,
+                            }}>
+                            <Text
+                                id={`app.main.channel.notifications.default`}
+                            />
+                            <div className="tip">
+                                {state !== undefined && <Square size={20} />}
+                                {state === undefined && (
+                                    <CheckSquare size={20} />
+                                )}
+                            </div>
+                        </MenuItem>,
+                    ];
+
+                    function generate(key: string, icon: Children) {
+                        elements.push(
+                            <MenuItem
+                                key={key}
+                                data={{
+                                    action: "set_notification_state",
+                                    key: channel._id,
+                                    state: key,
+                                }}>
+                                {icon}
+                                <Text
+                                    id={`app.main.channel.notifications.${key}`}
+                                />
+                                {state === undefined && actual === key && (
+                                    <div className="tip">
+                                        <LeftArrowAlt size={20} />
+                                    </div>
+                                )}
+                                {state === key && (
+                                    <div className="tip">
+                                        <Check size={20} />
+                                    </div>
+                                )}
+                            </MenuItem>,
+                        );
+                    }
+
+                    generate("all", <Bell size={24} />);
+                    generate("mention", <At size={24} />);
+                    generate("muted", <BellOff size={24} />);
+                    generate("none", <Block size={24} />);
+
+                    return elements;
+                }}
+            </ContextMenuWithData>
+        </>
+    );
+}
+
+export default connectState(ContextMenus, (state) => {
+    return {
+        notifications: state.notifications,
+    };
+});

src/lib/PaintCounter.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from "preact/hooks";
+
+const counts: { [key: string]: number } = {};
+
+export default function PaintCounter({
+    small,
+    always,
+}: {
+    small?: boolean;
+    always?: boolean;
+}) {
+    if (import.meta.env.PROD && !always) return null;
+
+    const [uniqueId] = useState(`${Math.random()}`);
+    const count = counts[uniqueId] ?? 0;
+    counts[uniqueId] = count + 1;
+    return (
+        <div style={{ textAlign: "center", fontSize: "0.8em" }}>
+            {small ? <>P: {count + 1}</> : <>Painted {count + 1} time(s).</>}
+        </div>
+    );
+}

src/lib/TextAreaAutoSize.tsx

+import styled from "styled-components";
+
+import { RefObject } from "preact";
+import { useEffect, useLayoutEffect, useRef } from "preact/hooks";
+
+import TextArea, { TextAreaProps } from "../components/ui/TextArea";
+
+import { internalSubscribe } from "./eventEmitter";
+import { isTouchscreenDevice } from "./isTouchscreenDevice";
+
+type TextAreaAutoSizeProps = Omit<
+    JSX.HTMLAttributes<HTMLTextAreaElement>,
+    "style" | "value" | "onChange" | "children" | "as"
+> &
+    TextAreaProps & {
+        forceFocus?: boolean;
+        autoFocus?: boolean;
+        minHeight?: number;
+        maxRows?: number;
+        value: string;
+
+        id?: string;
+
+        onChange?: (ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => void;
+    };
+
+const Container = styled.div`
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+`;
+
+const Ghost = styled.div<{ lineHeight: string; maxRows: number }>`
+    flex: 0;
+    width: 100%;
+    overflow: hidden;
+    visibility: hidden;
+    position: relative;
+
+    > div {
+        width: 100%;
+        white-space: pre-wrap;
+        word-break: break-all;
+
+        top: 0;
+        position: absolute;
+        font-size: var(--text-size);
+        line-height: ${(props) => props.lineHeight};
+
+        max-height: calc(
+            calc(${(props) => props.lineHeight} * ${(props) => props.maxRows})
+        );
+    }
+`;
+
+export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
+    const {
+        autoFocus,
+        minHeight,
+        maxRows,
+        value,
+        padding,
+        lineHeight,
+        hideBorder,
+        forceFocus,
+        onChange,
+        ...textAreaProps
+    } = props;
+
+    const ref = useRef<HTMLTextAreaElement>() as RefObject<HTMLTextAreaElement>;
+    const ghost = useRef<HTMLDivElement>() as RefObject<HTMLDivElement>;
+
+    useLayoutEffect(() => {
+        if (ref.current && ghost.current) {
+            ref.current.style.height = `${ghost.current.clientHeight}px`;
+        }
+    }, [ghost, props.value]);
+
+    useEffect(() => {
+        if (isTouchscreenDevice) return;
+        autoFocus && ref.current && ref.current.focus();
+    }, [value, autoFocus]);
+
+    const inputSelected = () =>
+        ["TEXTAREA", "INPUT"].includes(document.activeElement?.nodeName ?? "");
+
+    useEffect(() => {
+        if (!ref.current) return;
+        if (forceFocus) {
+            ref.current.focus();
+        }
+
+        if (isTouchscreenDevice) return;
+        if (autoFocus && !inputSelected()) {
+            ref.current.focus();
+        }
+
+        // ? if you are wondering what this is
+        // ? it is a quick and dirty hack to fix
+        // ? value not setting correctly
+        // ? I have no clue what's going on
+        ref.current.value = value;
+
+        if (!autoFocus) return;
+        function keyDown(e: KeyboardEvent) {
+            if ((e.ctrlKey && e.key !== "v") || e.altKey || e.metaKey) return;
+            if (e.key.length !== 1) return;
+            if (ref && !inputSelected()) {
+                ref.current!.focus();
+            }
+        }
+
+        document.body.addEventListener("keydown", keyDown);
+        return () => document.body.removeEventListener("keydown", keyDown);
+    }, [ref, autoFocus, forceFocus, value]);
+
+    useEffect(() => {
+        if (!ref.current) return;
+        function focus(id: string) {
+            if (id === props.id) {
+                ref.current!.focus();
+            }
+        }
+
+        return internalSubscribe(
+            "TextArea",
+            "focus",
+            focus as (...args: unknown[]) => void,
+        );
+    }, [props.id, ref]);
+
+    return (
+        <Container>
+            <TextArea
+                ref={ref}
+                value={value}
+                padding={padding}
+                style={{ minHeight }}
+                hideBorder={hideBorder}
+                lineHeight={lineHeight}
+                onChange={(ev) => {
+                    onChange && onChange(ev);
+                }}
+                {...textAreaProps}
+            />
+            <Ghost
+                lineHeight={lineHeight ?? "var(--textarea-line-height)"}
+                maxRows={maxRows ?? 5}>
+                <div ref={ghost} style={{ padding }}>
+                    {props.value
+                        ? props.value
+                              .split("\n")
+                              .map((x) => `\u200e${x}`)
+                              .join("\n")
+                        : undefined ?? "‎\n"}
+                </div>
+            </Ghost>
+        </Container>
+    );
+}

src/lib/conversion.ts

+export function urlBase64ToUint8Array(base64String: string) {
+    const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+    const base64 = (base64String + padding)
+        .replace(/-/g, "+")
+        .replace(/_/g, "/");
+    const rawData = window.atob(base64);
+
+    return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)));
+}

src/lib/debounce.ts

+export function debounce(cb: (...args: unknown[]) => void, duration: number) {
+    // Store the timer variable.
+    let timer: NodeJS.Timeout;
+    // This function is given to React.
+    return (...args: unknown[]) => {
+        // Get rid of the old timer.
+        clearTimeout(timer);
+        // Set a new timer.
+        timer = setTimeout(() => {
+            // Instead calling the new function.
+            // (with the newer data)
+            cb(...args);
+        }, duration);
+    };
+}

src/lib/defer.ts

+export const defer = (cb: () => void) => setTimeout(cb, 0);

src/lib/eventEmitter.ts

+import EventEmitter from "eventemitter3";
+
+export const InternalEvent = new EventEmitter();
+
+export function internalSubscribe(
+    ns: string,
+    event: string,
+    fn: (...args: unknown[]) => void,
+) {
+    InternalEvent.addListener(`${ns}/${event}`, fn);
+    return () => InternalEvent.removeListener(`${ns}/${event}`, fn);
+}
+
+export function internalEmit(ns: string, event: string, ...args: unknown[]) {
+    InternalEvent.emit(`${ns}/${event}`, ...args);
+}
+
+// Event structure: namespace/event
+
+/// Event List
+// - MessageArea/jump_to_bottom
+// - MessageRenderer/edit_last
+// - MessageRenderer/edit_message
+// - Intermediate/open_profile
+// - Intermediate/navigate
+// - MessageBox/append
+// - TextArea/focus
+// - ReplyBar/add
+// - Modal/close
+// - PWA/update

src/lib/fileSize.ts

+export function determineFileSize(size: number) {
+    if (size > 1e6) {
+        return `${(size / 1e6).toFixed(2)} MB`;
+    } else if (size > 1e3) {
+        return `${(size / 1e3).toFixed(2)} KB`;
+    }
+
+    return `${size} B`;
+}

src/lib/i18n.tsx

+import { IntlContext, translate } from "preact-i18n";
+import { useContext } from "preact/hooks";
+
+import { Dictionary } from "../context/Locale";
+
+import { Children } from "../types/Preact";
+
+interface Fields {
+    [key: string]: Children;
+}
+
+interface Props {
+    id: string;
+    fields: Fields;
+}
+
+export interface IntlType {
+    intl: {
+        dictionary: Dictionary;
+    };
+}
+
+// This will exhibit O(2^n) behaviour.
+function recursiveReplaceFields(input: string, fields: Fields) {
+    const key = Object.keys(fields)[0];
+    if (key) {
+        const { [key]: field, ...restOfFields } = fields;
+        if (typeof field === "undefined") return [input];
+
+        const values: (Children | string[])[] = input
+            .split(`{{${key}}}`)
+            .map((v) => recursiveReplaceFields(v, restOfFields));
+
+        for (let i = values.length - 1; i > 0; i -= 2) {
+            values.splice(i, 0, field);
+        }
+
+        return values.flat();
+    }
+    // base case
+    return [input];
+}
+
+export function TextReact({ id, fields }: Props) {
+    const { intl } = useContext(IntlContext) as unknown as IntlType;
+
+    const path = id.split(".");
+    let entry = intl.dictionary[path.shift()!];
+    for (const key of path) {
+        // @ts-expect-error TODO: lazy
+        entry = entry[key];
+    }
+
+    return <>{recursiveReplaceFields(entry as string, fields)}</>;
+}
+
+export function useTranslation() {
+    const { intl } = useContext(IntlContext) as unknown as IntlType;
+    return (
+        id: string,
+        fields?: Record<string, string | undefined>,
+        plural?: number,
+        fallback?: string,
+    ) => translate(id, "", intl.dictionary, fields, plural, fallback);
+}
+
+export function useDictionary() {
+    const { intl } = useContext(IntlContext) as unknown as IntlType;
+    return intl.dictionary;
+}

src/lib/isTouchscreenDevice.ts

 import { isDesktop, isMobile, isTablet } from "react-device-detect";
+
 export const isTouchscreenDevice =
-    isDesktop && !isTablet
+    isDesktop || isTablet
         ? false
         : (typeof window !== "undefined"
               ? navigator.maxTouchPoints > 0

src/lib/js.ts

+/* eslint-disable @typescript-eslint/no-empty-function */
+export const noop = () => {};
+export const noopAsync = async () => {};
+/* eslint-enable @typescript-eslint/no-empty-function */