src/pages/channels/messaging/ConversationStart.tsx

+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+import { getChannelName } from "../../../context/revoltjs/util";
+
+const StartBase = styled.div`
+    margin: 18px 16px 10px 16px;
+
+    h1 {
+        font-size: 23px;
+        margin: 0 0 8px 0;
+    }
+
+    h4 {
+        font-weight: 400;
+        margin: 0;
+        font-size: 14px;
+    }
+`;
+
+interface Props {
+    id: string;
+}
+
+export default observer(({ id }: Props) => {
+    const client = useClient();
+    const channel = client.channels.get(id);
+    if (!channel) return null;
+
+    return (
+        <StartBase>
+            <h1>{getChannelName(channel, true)}</h1>
+            <h4>
+                <Text id="app.main.channel.start.group" />
+            </h4>
+        </StartBase>
+    );
+});

src/pages/channels/messaging/MessageArea.tsx

+import { useHistory, useParams } from "react-router-dom";
+import { animateScroll } from "react-scroll";
+import styled from "styled-components";
+import useResizeObserver from "use-resize-observer";
+
+import { createContext } from "preact";
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "preact/hooks";
+
+import { defer } from "../../../lib/defer";
+import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
+import { SingletonMessageRenderer } from "../../../lib/renderer/Singleton";
+import { RenderState, ScrollState } from "../../../lib/renderer/types";
+
+import { IntermediateContext } from "../../../context/intermediate/Intermediate";
+import RequiresOnline from "../../../context/revoltjs/RequiresOnline";
+import {
+    AppContext,
+    ClientStatus,
+    StatusContext,
+} from "../../../context/revoltjs/RevoltClient";
+
+import Preloader from "../../../components/ui/Preloader";
+
+import ConversationStart from "./ConversationStart";
+import MessageRenderer from "./MessageRenderer";
+
+const Area = styled.div`
+    height: 100%;
+    flex-grow: 1;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    word-break: break-word;
+
+    > div {
+        display: flex;
+        min-height: 100%;
+        padding-bottom: 24px;
+        flex-direction: column;
+        justify-content: flex-end;
+    }
+`;
+
+interface Props {
+    id: string;
+}
+
+export const MessageAreaWidthContext = createContext(0);
+export const MESSAGE_AREA_PADDING = 82;
+
+export function MessageArea({ id }: Props) {
+    const history = useHistory();
+    const client = useContext(AppContext);
+    const status = useContext(StatusContext);
+    const { focusTaken } = useContext(IntermediateContext);
+
+    // ? Required data for message links.
+    const { message } = useParams<{ message: string }>();
+    const [highlight, setHighlight] = useState<string | undefined>(undefined);
+
+    // ? This is the scroll container.
+    const ref = useRef<HTMLDivElement>(null);
+    const { width, height } = useResizeObserver<HTMLDivElement>({ ref });
+
+    // ? Current channel state.
+    const [state, setState] = useState<RenderState>({ type: "LOADING" });
+
+    // ? useRef to avoid re-renders
+    const scrollState = useRef<ScrollState>({ type: "Free" });
+
+    const setScrollState = useCallback((v: ScrollState) => {
+        if (v.type === "StayAtBottom") {
+            if (scrollState.current.type === "Bottom" || atBottom()) {
+                scrollState.current = {
+                    type: "ScrollToBottom",
+                    smooth: v.smooth,
+                };
+            } else {
+                scrollState.current = { type: "Free" };
+            }
+        } else {
+            scrollState.current = v;
+        }
+
+        defer(() => {
+            if (scrollState.current.type === "ScrollToBottom") {
+                setScrollState({
+                    type: "Bottom",
+                    scrollingUntil: +new Date() + 150,
+                });
+
+                animateScroll.scrollToBottom({
+                    container: ref.current,
+                    duration: scrollState.current.smooth ? 150 : 0,
+                });
+            } else if (scrollState.current.type === "ScrollToView") {
+                document
+                    .getElementById(scrollState.current.id)
+                    ?.scrollIntoView({ block: "center" });
+
+                setScrollState({ type: "Free" });
+            } else if (scrollState.current.type === "OffsetTop") {
+                animateScroll.scrollTo(
+                    Math.max(
+                        101,
+                        ref.current
+                            ? ref.current.scrollTop +
+                                  (ref.current.scrollHeight -
+                                      scrollState.current.previousHeight)
+                            : 101,
+                    ),
+                    {
+                        container: ref.current,
+                        duration: 0,
+                    },
+                );
+
+                setScrollState({ type: "Free" });
+            } else if (scrollState.current.type === "ScrollTop") {
+                animateScroll.scrollTo(scrollState.current.y, {
+                    container: ref.current,
+                    duration: 0,
+                });
+
+                setScrollState({ type: "Free" });
+            }
+        });
+    }, []);
+
+    // ? Determine if we are at the bottom of the scroll container.
+    // -> https://stackoverflow.com/a/44893438
+    // By default, we assume we are at the bottom, i.e. when we first load.
+    const atBottom = (offset = 0) =>
+        ref.current
+            ? Math.floor(ref.current?.scrollHeight - ref.current?.scrollTop) -
+                  offset <=
+              ref.current?.clientHeight
+            : true;
+
+    const atTop = (offset = 0) =>
+        ref.current ? ref.current.scrollTop <= offset : false;
+
+    // ? Handle global jump to bottom, e.g. when editing last message in chat.
+    useEffect(() => {
+        return internalSubscribe("MessageArea", "jump_to_bottom", () =>
+            setScrollState({ type: "ScrollToBottom" }),
+        );
+    }, [setScrollState]);
+
+    // ? Handle events from renderer.
+    useEffect(() => {
+        SingletonMessageRenderer.addListener("state", setState);
+        return () => SingletonMessageRenderer.removeListener("state", setState);
+    }, []);
+
+    useEffect(() => {
+        SingletonMessageRenderer.addListener("scroll", setScrollState);
+        return () =>
+            SingletonMessageRenderer.removeListener("scroll", setScrollState);
+    }, [scrollState, setScrollState]);
+
+    // ? Load channel initially.
+    useEffect(() => {
+        if (message) return;
+        SingletonMessageRenderer.init(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+
+    // ? If message present or changes, load it as well.
+    useEffect(() => {
+        if (message) {
+            setHighlight(message);
+            SingletonMessageRenderer.init(id, message);
+
+            const channel = client.channels.get(id);
+            if (channel?.channel_type === "TextChannel") {
+                history.push(`/server/${channel.server_id}/channel/${id}`);
+            } else {
+                history.push(`/channel/${id}`);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [message]);
+
+    // ? If we are waiting for network, try again.
+    useEffect(() => {
+        switch (status) {
+            case ClientStatus.ONLINE:
+                if (state.type === "WAITING_FOR_NETWORK") {
+                    SingletonMessageRenderer.init(id);
+                } else {
+                    SingletonMessageRenderer.reloadStale(id);
+                }
+
+                break;
+            case ClientStatus.OFFLINE:
+            case ClientStatus.DISCONNECTED:
+            case ClientStatus.CONNECTING:
+                SingletonMessageRenderer.markStale();
+                break;
+        }
+    }, [id, status, state]);
+
+    // ? When the container is scrolled.
+    // ? Also handle StayAtBottom
+    useEffect(() => {
+        const current = ref.current;
+        if (!current) return;
+
+        async function onScroll() {
+            if (scrollState.current.type === "Free" && atBottom()) {
+                setScrollState({ type: "Bottom" });
+            } else if (scrollState.current.type === "Bottom" && !atBottom()) {
+                if (
+                    scrollState.current.scrollingUntil &&
+                    scrollState.current.scrollingUntil > +new Date()
+                )
+                    return;
+                setScrollState({ type: "Free" });
+            }
+        }
+
+        current.addEventListener("scroll", onScroll);
+        return () => current.removeEventListener("scroll", onScroll);
+    }, [ref, scrollState, setScrollState]);
+
+    // ? Top and bottom loaders.
+    useEffect(() => {
+        const current = ref.current;
+        if (!current) return;
+
+        async function onScroll() {
+            if (atTop(100)) {
+                SingletonMessageRenderer.loadTop(ref.current!);
+            }
+
+            if (atBottom(100)) {
+                SingletonMessageRenderer.loadBottom(ref.current!);
+            }
+        }
+
+        current.addEventListener("scroll", onScroll);
+        return () => current.removeEventListener("scroll", onScroll);
+    }, [ref]);
+
+    // ? Scroll down whenever the message area resizes.
+    const stbOnResize = useCallback(() => {
+        if (!atBottom() && scrollState.current.type === "Bottom") {
+            animateScroll.scrollToBottom({
+                container: ref.current,
+                duration: 0,
+            });
+
+            setScrollState({ type: "Bottom" });
+        }
+    }, [setScrollState]);
+
+    // ? Scroll down when container resized.
+    useLayoutEffect(() => {
+        stbOnResize();
+    }, [stbOnResize, height]);
+
+    // ? Scroll down whenever the window resizes.
+    useLayoutEffect(() => {
+        document.addEventListener("resize", stbOnResize);
+        return () => document.removeEventListener("resize", stbOnResize);
+    }, [ref, scrollState, stbOnResize]);
+
+    // ? Scroll to bottom when pressing 'Escape'.
+    useEffect(() => {
+        function keyUp(e: KeyboardEvent) {
+            if (e.key === "Escape" && !focusTaken) {
+                SingletonMessageRenderer.jumpToBottom(id, true);
+                internalEmit("TextArea", "focus", "message");
+            }
+        }
+
+        document.body.addEventListener("keyup", keyUp);
+        return () => document.body.removeEventListener("keyup", keyUp);
+    }, [id, ref, focusTaken]);
+
+    return (
+        <MessageAreaWidthContext.Provider
+            value={(width ?? 0) - MESSAGE_AREA_PADDING}>
+            <Area ref={ref}>
+                <div>
+                    {state.type === "LOADING" && <Preloader type="ring" />}
+                    {state.type === "WAITING_FOR_NETWORK" && (
+                        <RequiresOnline>
+                            <Preloader type="ring" />
+                        </RequiresOnline>
+                    )}
+                    {state.type === "RENDER" && (
+                        <MessageRenderer
+                            id={id}
+                            state={state}
+                            highlight={highlight}
+                        />
+                    )}
+                    {state.type === "EMPTY" && <ConversationStart id={id} />}
+                </div>
+            </Area>
+        </MessageAreaWidthContext.Provider>
+    );
+}

src/pages/channels/messaging/MessageEditor.tsx

+import { Message } from "revolt.js/dist/maps/Messages";
+import styled from "styled-components";
+
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
+import {
+    IntermediateContext,
+    useIntermediate,
+} from "../../../context/intermediate/Intermediate";
+
+import AutoComplete, {
+    useAutoComplete,
+} from "../../../components/common/AutoComplete";
+
+const EditorBase = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    textarea {
+        resize: none;
+        padding: 12px;
+        white-space: pre-wrap;
+        font-size: var(--text-size);
+        border-radius: var(--border-radius);
+        background: var(--secondary-header);
+    }
+
+    .caption {
+        padding: 2px;
+        font-size: 11px;
+        color: var(--tertiary-foreground);
+
+        a {
+            cursor: pointer;
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+`;
+
+interface Props {
+    message: Message;
+    finish: () => void;
+}
+
+export default function MessageEditor({ message, finish }: Props) {
+    const [content, setContent] = useState((message.content as string) ?? "");
+    const { focusTaken } = useContext(IntermediateContext);
+    const { openScreen } = useIntermediate();
+
+    async function save() {
+        finish();
+
+        if (content.length === 0) {
+            openScreen({
+                id: "special_prompt",
+                type: "delete_message",
+                target: message,
+            });
+        } else if (content !== message.content) {
+            await message.edit({
+                content,
+            });
+        }
+    }
+
+    // ? Stop editing when pressing ESC.
+    useEffect(() => {
+        function keyUp(e: KeyboardEvent) {
+            if (e.key === "Escape" && !focusTaken) {
+                finish();
+            }
+        }
+
+        document.body.addEventListener("keyup", keyUp);
+        return () => document.body.removeEventListener("keyup", keyUp);
+    }, [focusTaken, finish]);
+
+    const {
+        onChange,
+        onKeyUp,
+        onKeyDown,
+        onFocus,
+        onBlur,
+        ...autoCompleteProps
+    } = useAutoComplete((v) => setContent(v ?? ""), {
+        users: { type: "all" },
+    });
+
+    return (
+        <EditorBase>
+            <AutoComplete detached {...autoCompleteProps} />
+            <TextAreaAutoSize
+                forceFocus
+                maxRows={3}
+                value={content}
+                maxLength={2000}
+                padding="var(--message-box-padding)"
+                onChange={(ev) => {
+                    onChange(ev);
+                    setContent(ev.currentTarget.value);
+                }}
+                onKeyDown={(e) => {
+                    if (onKeyDown(e)) return;
+
+                    if (
+                        !e.shiftKey &&
+                        e.key === "Enter" &&
+                        !isTouchscreenDevice
+                    ) {
+                        e.preventDefault();
+                        save();
+                    }
+                }}
+                onKeyUp={onKeyUp}
+                onFocus={onFocus}
+                onBlur={onBlur}
+            />
+            <span className="caption">
+                escape to <a onClick={finish}>cancel</a> &middot; enter to{" "}
+                <a onClick={save}>save</a>
+            </span>
+        </EditorBase>
+    );
+}

src/pages/channels/messaging/MessageRenderer.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
+import { X } from "@styled-icons/boxicons-regular";
+import { RelationshipStatus } from "revolt-api/types/Users";
+import { SYSTEM_USER_ID } from "revolt.js";
+import { Message as MessageI } from "revolt.js/dist/maps/Messages";
+import styled from "styled-components";
+import { decodeTime } from "ulid";
+
+import { Text } from "preact-i18n";
+import { memo } from "preact/compat";
+import { useEffect, useState } from "preact/hooks";
+
+import { internalSubscribe, internalEmit } from "../../../lib/eventEmitter";
+import { RenderState } from "../../../lib/renderer/types";
+
+import { connectState } from "../../../redux/connector";
+import { QueuedMessage } from "../../../redux/reducers/queue";
+
+import RequiresOnline from "../../../context/revoltjs/RequiresOnline";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import Message from "../../../components/common/messaging/Message";
+import { SystemMessage } from "../../../components/common/messaging/SystemMessage";
+import DateDivider from "../../../components/ui/DateDivider";
+import Preloader from "../../../components/ui/Preloader";
+
+import { Children } from "../../../types/Preact";
+import ConversationStart from "./ConversationStart";
+import MessageEditor from "./MessageEditor";
+
+interface Props {
+    id: string;
+    state: RenderState;
+    highlight?: string;
+    queue: QueuedMessage[];
+}
+
+const BlockedMessage = styled.div`
+    font-size: 0.8em;
+    margin-top: 6px;
+    padding: 4px 64px;
+    color: var(--tertiary-foreground);
+
+    &:hover {
+        background: var(--hover);
+    }
+`;
+
+function MessageRenderer({ id, state, queue, highlight }: Props) {
+    if (state.type !== "RENDER") return null;
+
+    const client = useClient();
+    const userId = client.user!._id;
+
+    const [editing, setEditing] = useState<string | undefined>(undefined);
+    const stopEditing = () => {
+        setEditing(undefined);
+        internalEmit("TextArea", "focus", "message");
+    };
+
+    useEffect(() => {
+        function editLast() {
+            if (state.type !== "RENDER") return;
+            for (let i = state.messages.length - 1; i >= 0; i--) {
+                if (state.messages[i].author_id === userId) {
+                    setEditing(state.messages[i]._id);
+                    internalEmit("MessageArea", "jump_to_bottom");
+                    return;
+                }
+            }
+        }
+
+        const subs = [
+            internalSubscribe("MessageRenderer", "edit_last", editLast),
+            internalSubscribe("MessageRenderer", "edit_message", setEditing),
+        ];
+
+        return () => subs.forEach((unsub) => unsub());
+    }, [state.messages, state.type, userId]);
+
+    const render: Children[] = [];
+    let previous: MessageI | undefined;
+
+    if (state.atTop) {
+        render.push(<ConversationStart id={id} />);
+    } else {
+        render.push(
+            <RequiresOnline>
+                <Preloader type="ring" />
+            </RequiresOnline>,
+        );
+    }
+
+    let head = true;
+    function compare(
+        current: string,
+        curAuthor: string,
+        previous: string,
+        prevAuthor: string,
+    ) {
+        const atime = decodeTime(current),
+            adate = new Date(atime),
+            btime = decodeTime(previous),
+            bdate = new Date(btime);
+
+        if (
+            adate.getFullYear() !== bdate.getFullYear() ||
+            adate.getMonth() !== bdate.getMonth() ||
+            adate.getDate() !== bdate.getDate()
+        ) {
+            render.push(<DateDivider date={adate} />);
+            head = true;
+        }
+
+        head = curAuthor !== prevAuthor || Math.abs(btime - atime) >= 420000;
+    }
+
+    let blocked = 0;
+    function pushBlocked() {
+        render.push(
+            <BlockedMessage>
+                <X size={16} />{" "}
+                <Text
+                    id="app.main.channel.misc.blocked_messages"
+                    fields={{ count: blocked }}
+                />
+            </BlockedMessage>,
+        );
+        blocked = 0;
+    }
+
+    for (const message of state.messages) {
+        if (previous) {
+            compare(
+                message._id,
+                message.author_id,
+                previous._id,
+                previous.author_id,
+            );
+        }
+
+        if (message.author_id === SYSTEM_USER_ID) {
+            render.push(
+                <SystemMessage
+                    key={message._id}
+                    message={message}
+                    attachContext
+                    highlight={highlight === message._id}
+                />,
+            );
+        } else if (
+            message.author?.relationship === RelationshipStatus.Blocked
+        ) {
+            blocked++;
+        } else {
+            if (blocked > 0) pushBlocked();
+
+            render.push(
+                <Message
+                    message={message}
+                    key={message._id}
+                    head={head}
+                    content={
+                        editing === message._id ? (
+                            <MessageEditor
+                                message={message}
+                                finish={stopEditing}
+                            />
+                        ) : undefined
+                    }
+                    attachContext
+                    highlight={highlight === message._id}
+                />,
+            );
+        }
+
+        previous = message;
+    }
+
+    if (blocked > 0) pushBlocked();
+
+    const nonces = state.messages.map((x) => x.nonce);
+    if (state.atBottom) {
+        for (const msg of queue) {
+            if (msg.channel !== id) continue;
+            if (nonces.includes(msg.id)) continue;
+
+            if (previous) {
+                compare(msg.id, userId!, previous._id, previous.author_id);
+
+                previous = {
+                    _id: msg.id,
+                    author_id: userId!,
+                } as MessageI;
+            }
+
+            render.push(
+                <Message
+                    message={
+                        new MessageI(client, {
+                            ...msg.data,
+                            replies: msg.data.replies.map((x) => x.id),
+                        })
+                    }
+                    key={msg.id}
+                    queued={msg}
+                    head={head}
+                    attachContext
+                />,
+            );
+        }
+    } else {
+        render.push(
+            <RequiresOnline>
+                <Preloader type="ring" />
+            </RequiresOnline>,
+        );
+    }
+
+    return <>{render}</>;
+}
+
+export default memo(
+    connectState<Omit<Props, "queue">>(MessageRenderer, (state) => {
+        return {
+            queue: state.queue,
+        };
+    }),
+);

src/pages/channels/voice/VoiceHeader.tsx

+import { BarChart } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { useContext } from "preact/hooks";
+
+import {
+    VoiceContext,
+    VoiceOperationsContext,
+    VoiceStatus,
+} from "../../../context/Voice";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import UserIcon from "../../../components/common/user/UserIcon";
+import Button from "../../../components/ui/Button";
+
+interface Props {
+    id: string;
+}
+
+const VoiceBase = styled.div`
+    padding: 20px;
+    background: var(--secondary-background);
+
+    .status {
+        flex: 1 0;
+        display: flex;
+        position: absolute;
+        align-items: center;
+
+        padding: 10px;
+        font-size: 14px;
+        font-weight: 600;
+        user-select: none;
+
+        color: var(--success);
+        border-radius: var(--border-radius);
+        background: var(--primary-background);
+
+        svg {
+            margin-inline-end: 4px;
+            cursor: help;
+        }
+    }
+
+    display: flex;
+    flex-direction: column;
+
+    .participants {
+        margin: 20px 0;
+        justify-content: center;
+        pointer-events: none;
+        user-select: none;
+        display: flex;
+        gap: 16px;
+
+        .disconnected {
+            opacity: 0.5;
+        }
+    }
+
+    .actions {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+    }
+`;
+
+export default observer(({ id }: Props) => {
+    const { status, participants, roomId } = useContext(VoiceContext);
+    if (roomId !== id) return null;
+
+    const { isProducing, startProducing, stopProducing, disconnect } =
+        useContext(VoiceOperationsContext);
+
+    const client = useClient();
+    const self = client.users.get(client.user!._id);
+
+    //const ctx = useForceUpdate();
+    //const self = useSelf(ctx);
+    const keys = participants ? Array.from(participants.keys()) : undefined;
+    const users = keys?.map((key) => client.users.get(key));
+
+    return (
+        <VoiceBase>
+            <div className="participants">
+                {users && users.length !== 0
+                    ? users.map((user, index) => {
+                          const id = keys![index];
+                          return (
+                              <div key={id}>
+                                  <UserIcon
+                                      size={80}
+                                      target={user}
+                                      status={false}
+                                      voice={
+                                          participants!.get(id)?.audio
+                                              ? undefined
+                                              : "muted"
+                                      }
+                                  />
+                              </div>
+                          );
+                      })
+                    : self !== undefined && (
+                          <div key={self._id} className="disconnected">
+                              <UserIcon
+                                  size={80}
+                                  target={self}
+                                  status={false}
+                              />
+                          </div>
+                      )}
+            </div>
+            <div className="status">
+                <BarChart size={20} />
+                {status === VoiceStatus.CONNECTED && (
+                    <Text id="app.main.channel.voice.connected" />
+                )}
+            </div>
+            <div className="actions">
+                <Button error onClick={disconnect}>
+                    <Text id="app.main.channel.voice.leave" />
+                </Button>
+                {isProducing("audio") ? (
+                    <Button onClick={() => stopProducing("audio")}>
+                        <Text id="app.main.channel.voice.mute" />
+                    </Button>
+                ) : (
+                    <Button onClick={() => startProducing("audio")}>
+                        <Text id="app.main.channel.voice.unmute" />
+                    </Button>
+                )}
+            </div>
+        </VoiceBase>
+    );
+});
+
+/**{voice.roomId === id && (
+                        <div className={styles.rtc}>
+                            <div className={styles.participants}>
+                                {participants.length !== 0 ? participants.map((user, index) => {
+                                    const id = participantIds[index];
+                                    return (
+                                        <div key={id}>
+                                            <UserIcon
+                                                size={80}
+                                                user={user}
+                                                status={false}
+                                                voice={
+                                                    voice.participants.get(id)
+                                                        ?.audio
+                                                        ? undefined
+                                                        : "muted"
+                                                }
+                                            />
+                                        </div>
+                                    );
+                                }) : self !== undefined && (
+                                    <div key={self._id} className={styles.disconnected}>
+                                            <UserIcon
+                                                size={80}
+                                                user={self}
+                                                status={false}
+                                            />
+                                        </div>
+                                )}
+                            </div>
+                            <div className={styles.status}>
+                                <BarChart size={20} />
+                                { voice.status === VoiceStatus.CONNECTED && <Text id="app.main.channel.voice.connected" /> }
+                            </div>
+                            <div className={styles.actions}>
+                                <Button
+                                    style="error"
+                                    onClick={() =>
+                                        voice.operations.disconnect()
+                                    }
+                                >
+                                    <Text id="app.main.channel.voice.leave" />
+                                </Button>
+                                {voice.operations.isProducing("audio") ? (
+                                    <Button
+                                        onClick={() =>
+                                            voice.operations.stopProducing(
+                                                "audio"
+                                            )
+                                        }
+                                    >
+                                        <Text id="app.main.channel.voice.mute" />
+                                    </Button>
+                                ) : (
+                                    <Button
+                                        onClick={() =>
+                                            voice.operations.startProducing(
+                                                "audio"
+                                            )
+                                        }
+                                    >
+                                        <Text id="app.main.channel.voice.unmute" />
+                                    </Button>
+                                )}
+                            </div>
+                        </div>
+                    )} */

src/pages/developer/Developer.tsx

+import { Wrench } from "@styled-icons/boxicons-solid";
+
 import { useContext } from "preact/hooks";
-import Header from "../../components/ui/Header";
+
 import PaintCounter from "../../lib/PaintCounter";
+import { TextReact } from "../../lib/i18n";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
-import { useUserPermission } from "../../context/revoltjs/hooks";
+
+import Header from "../../components/ui/Header";
 
 export default function Developer() {
     // const voice = useContext(VoiceContext);
     const client = useContext(AppContext);
-    const userPermission = useUserPermission(client.user!._id);
+    const userPermission = client.user!.permission;
 
     return (
         <div>
-            <Header placement="primary">Developer Tab</Header>
+            <Header placement="primary">
+                <Wrench size="24" />
+                Developer Tab
+            </Header>
             <div style={{ padding: "16px" }}>
                 <PaintCounter always />
             </div>
             <div style={{ padding: "16px" }}>
-                <b>User ID:</b> {client.user!._id} <br/>
-                <b>Permission against self:</b> {userPermission} <br/>
+                <b>User ID:</b> {client.user!._id} <br />
+                <b>Permission against self:</b> {userPermission} <br />
+            </div>
+            <div style={{ padding: "16px" }}>
+                <TextReact
+                    id="login.open_mail_provider"
+                    fields={{ provider: <b>GAMING!</b> }}
+                />
             </div>
             <div style={{ padding: "16px" }}>
                 {/*<span>

src/pages/friends/Friend.module.scss

+.title {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
 .list {
-    padding: 16px;
+    padding: 0 10px 10px 10px;
     user-select: none;
     overflow-y: scroll;
 
     &[data-empty="true"] {
         img {
             height: 120px;
-            border-radius: 8px;
+            border-radius: var(--border-radius);
         }
 
         gap: 16px;
@@ -16,15 +28,19 @@
         flex-direction: column;
         justify-content: center;
     }
+
+    &[data-mobile="true"] {
+        padding-bottom: var(--bottom-navigation-height);
+    }
 }
 
 .friend {
-    padding: 10px;
+    height: 60px;
     display: flex;
-    border-radius: 5px;
-    align-items: center;
-    flex-direction: row;
+    padding: 0 10px;
     cursor: pointer;
+    align-items: center;
+    border-radius: var(--border-radius);
 
     &:hover {
         background: var(--secondary-background);
@@ -38,17 +54,25 @@
         flex-grow: 1;
         margin: 0 12px;
         font-size: 16px;
-
+        font-weight: 600;
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        white-space: nowrap;
-        overflow: hidden;
         text-overflow: ellipsis;
+        overflow: hidden;
+
+        span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
         .subtext {
             font-size: 12px;
+            font-weight: 400;
             color: var(--tertiary-foreground);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 
@@ -56,16 +80,118 @@
         display: flex;
         gap: 12px;
 
-        > div {
-            height: 32px;
-            width: 32px;
+        .button {
+            width: 36px;
+            height: 36px;
+
+            &:hover.error {
+                background: var(--error);
+            }
+
+            &:hover.success {
+                background: var(--success);
+            }
         }
     }
 }
 
-//! FIXME: Move this to the Header component, do this:
-// 1. Check if header has topic, if yes, flex-grow: 0 on the title.
-// 2. If header has no topic (example: friends page), flex-grow 1 on the header title.
+.divider {
+    width: 1px;
+    height: 24px;
+    background: var(--primary-background);
+}
+
 .title {
     flex-grow: 1;
 }
+
+.pending {
+    padding: 1em;
+    display: flex;
+    cursor: pointer;
+    margin-top: 1em;
+    align-items: center;
+    flex-direction: row;
+    border-radius: var(--border-radius);
+    background: var(--secondary-background);
+
+    svg {
+        flex-shrink: 0;
+    }
+
+    .avatars {
+        display: flex;
+        flex-shrink: 0;
+        margin-inline-end: 15px;
+
+        svg:not(:first-child) {
+            position: relative;
+            margin-left: -32px;
+        }
+    }
+
+    .details {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        > div {
+            font-size: 16px;
+            font-weight: 800;
+            display: flex;
+            gap: 6px;
+            align-items: center;
+            min-width: 0;
+
+            
+            .title {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            span {
+                width: 1.5em;
+                height: 1.5em;
+                font-size: 12px;
+                color: white;
+                border-radius: 50%;
+                align-items: center;
+                display: inline-flex;
+                justify-content: center;
+                background: var(--error);
+                flex-shrink: 0;
+            }
+        }
+
+        .from {
+            .user {
+                font-weight: 600;
+            }
+        }
+
+        > span {
+            font-weight: 400;
+            font-size: 12px;
+            color: var(--tertiary-foreground);
+
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .list {
+        padding: 0 8px 8px 8px;
+    }
+
+    .remove {
+        display: none;
+    }
+}

src/pages/friends/Friend.tsx

-import { Text } from "preact-i18n";
-import { Link } from "react-router-dom";
+import { X, Plus } from "@styled-icons/boxicons-regular";
+import { PhoneCall, Envelope, UserX } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { useHistory } from "react-router-dom";
+import { RelationshipStatus } from "revolt-api/types/Users";
+import { User } from "revolt.js/dist/maps/Users";
+
 import styles from "./Friend.module.scss";
-import { useContext } from "preact/hooks";
-import { Children } from "../../types/Preact";
-import { X, Plus, Mail } from "@styled-icons/feather";
-import UserIcon from "../../components/common/UserIcon";
-import IconButton from "../../components/ui/IconButton";
+import classNames from "classnames";
 import { attachContextMenu } from "preact-context-menu";
-import { User, Users } from "revolt.js/dist/api/objects";
-import UserStatus from '../../components/common/UserStatus';
+import { Text } from "preact-i18n";
+import { useContext } from "preact/hooks";
+
 import { stopPropagation } from "../../lib/stopPropagation";
-import { AppContext } from "../../context/revoltjs/RevoltClient";
+
+import { VoiceOperationsContext } from "../../context/Voice";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 
+import UserIcon from "../../components/common/user/UserIcon";
+import UserStatus from "../../components/common/user/UserStatus";
+import IconButton from "../../components/ui/IconButton";
+
+import { Children } from "../../types/Preact";
+
 interface Props {
     user: User;
 }
 
-export function Friend({ user }: Props) {
-    const client = useContext(AppContext);
+export const Friend = observer(({ user }: Props) => {
+    const history = useHistory();
     const { openScreen } = useIntermediate();
+    const { connect } = useContext(VoiceOperationsContext);
 
     const actions: Children[] = [];
     let subtext: Children = null;
 
-    if (user.relationship === Users.Relationship.Friend) {
-        subtext = <UserStatus user={user} />
+    if (user.relationship === RelationshipStatus.Friend) {
+        subtext = <UserStatus user={user} />;
         actions.push(
-            <IconButton type="circle"
-                onClick={stopPropagation}>
-                <Link to={'/open/' + user._id}>
-                    <Mail size={20} />
-                </Link>
-            </IconButton>
+            <>
+                <IconButton
+                    type="circle"
+                    className={classNames(styles.button, styles.success)}
+                    onClick={(ev) =>
+                        stopPropagation(
+                            ev,
+                            user
+                                .openDM()
+                                .then(connect)
+                                .then((x) => history.push(`/channel/${x._id}`)),
+                        )
+                    }>
+                    <PhoneCall size={20} />
+                </IconButton>
+                <IconButton
+                    type="circle"
+                    className={styles.button}
+                    onClick={(ev) =>
+                        stopPropagation(
+                            ev,
+                            user
+                                .openDM()
+                                .then((channel) =>
+                                    history.push(`/channel/${channel._id}`),
+                                ),
+                        )
+                    }>
+                    <Envelope size={20} />
+                </IconButton>
+            </>,
         );
     }
 
-    if (user.relationship === Users.Relationship.Incoming) {
+    if (user.relationship === RelationshipStatus.Incoming) {
         actions.push(
-            <IconButton type="circle"
-                onClick={ev => stopPropagation(ev, client.users.addFriend(user.username))}>
+            <IconButton
+                type="circle"
+                className={styles.button}
+                onClick={(ev) => stopPropagation(ev, user.addFriend())}>
                 <Plus size={24} />
-            </IconButton>
+            </IconButton>,
         );
 
         subtext = <Text id="app.special.friends.incoming" />;
     }
 
-    if (user.relationship === Users.Relationship.Outgoing) {
+    if (user.relationship === RelationshipStatus.Outgoing) {
         subtext = <Text id="app.special.friends.outgoing" />;
     }
 
     if (
-        user.relationship === Users.Relationship.Friend ||
-        user.relationship === Users.Relationship.Outgoing ||
-        user.relationship === Users.Relationship.Incoming
+        user.relationship === RelationshipStatus.Friend ||
+        user.relationship === RelationshipStatus.Outgoing ||
+        user.relationship === RelationshipStatus.Incoming
     ) {
         actions.push(
-            <IconButton type="circle"
-                onClick={ev => stopPropagation(ev, client.users.removeFriend(user._id))}>
+            <IconButton
+                type="circle"
+                className={classNames(
+                    styles.button,
+                    styles.remove,
+                    styles.error,
+                )}
+                onClick={(ev) =>
+                    stopPropagation(
+                        ev,
+                        user.relationship === RelationshipStatus.Friend
+                            ? openScreen({
+                                  id: "special_prompt",
+                                  type: "unfriend_user",
+                                  target: user,
+                              })
+                            : user.removeFriend(),
+                    )
+                }>
                 <X size={24} />
-            </IconButton>
+            </IconButton>,
         );
     }
 
-    if (user.relationship === Users.Relationship.Blocked) {
+    if (user.relationship === RelationshipStatus.Blocked) {
         actions.push(
-            <IconButton type="circle"
-                onClick={ev => stopPropagation(ev, client.users.unblockUser(user._id))}>
-                <X size={24} />
-            </IconButton>
+            <IconButton
+                type="circle"
+                className={classNames(styles.button, styles.error)}
+                onClick={(ev) => stopPropagation(ev, user.unblockUser())}>
+                <UserX size={24} />
+            </IconButton>,
         );
     }
 
     return (
-        <div className={styles.friend}
-            onClick={() => openScreen({ id: 'profile', user_id: user._id })}
-            onContextMenu={attachContextMenu('Menu', { user: user._id })}>
-            <UserIcon target={user} size={32} status />
+        <div
+            className={styles.friend}
+            onClick={() => openScreen({ id: "profile", user_id: user._id })}
+            onContextMenu={attachContextMenu("Menu", { user: user._id })}>
+            <UserIcon target={user} size={36} status />
             <div className={styles.name}>
-                <span>@{user.username}</span>
-                {subtext && (
-                    <span className={styles.subtext}>{subtext}</span>
-                )}
+                <span>{user.username}</span>
+                {subtext && <span className={styles.subtext}>{subtext}</span>}
             </div>
             <div className={styles.actions}>{actions}</div>
         </div>
     );
-}
+});

src/pages/friends/Friends.tsx

-import styles from "./Friend.module.scss";
-import { UserPlus } from "@styled-icons/feather";
+import { ChevronRight } from "@styled-icons/boxicons-regular";
+import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { RelationshipStatus, Presence } from "revolt-api/types/Users";
+import { User } from "revolt.js/dist/maps/Users";
 
-import { Friend } from "./Friend";
+import styles from "./Friend.module.scss";
 import { Text } from "preact-i18n";
+
+import { TextReact } from "../../lib/i18n";
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+
+import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { useClient } from "../../context/revoltjs/RevoltClient";
+
+import CollapsibleSection from "../../components/common/CollapsibleSection";
+import Tooltip from "../../components/common/Tooltip";
+import UserIcon from "../../components/common/user/UserIcon";
 import Header from "../../components/ui/Header";
-import Overline from "../../components/ui/Overline";
 import IconButton from "../../components/ui/IconButton";
-import { useUsers } from "../../context/revoltjs/hooks";
-import { User, Users } from "revolt.js/dist/api/objects";
-import { useIntermediate } from "../../context/intermediate/Intermediate";
 
-export default function Friends() {
+import { Children } from "../../types/Preact";
+import { Friend } from "./Friend";
+
+export default observer(() => {
     const { openScreen } = useIntermediate();
 
-    const users = useUsers() as User[];
+    const client = useClient();
+    const users = [...client.users.values()];
     users.sort((a, b) => a.username.localeCompare(b.username));
 
-    const pending = users.filter(
-        x =>
-            x.relationship === Users.Relationship.Incoming ||
-            x.relationship === Users.Relationship.Outgoing
-    );
     const friends = users.filter(
-        x => x.relationship === Users.Relationship.Friend
-    );
-    const blocked = users.filter(
-        x => x.relationship === Users.Relationship.Blocked
+        (x) => x.relationship === RelationshipStatus.Friend,
     );
+    const lists = [
+        [
+            "",
+            users.filter((x) => x.relationship === RelationshipStatus.Incoming),
+        ],
+        [
+            "app.special.friends.sent",
+            users.filter((x) => x.relationship === RelationshipStatus.Outgoing),
+            "outgoing",
+        ],
+        [
+            "app.status.online",
+            friends.filter(
+                (x) => x.online && x.status?.presence !== Presence.Invisible,
+            ),
+            "online",
+        ],
+        [
+            "app.status.offline",
+            friends.filter(
+                (x) => !x.online || x.status?.presence === Presence.Invisible,
+            ),
+            "offline",
+        ],
+        [
+            "app.special.friends.blocked",
+            users.filter((x) => x.relationship === RelationshipStatus.Blocked),
+            "blocked",
+        ],
+    ] as [string, User[], string][];
 
+    const incoming = lists[0][1];
+    const userlist: Children[] = incoming.map((x) => (
+        <b key={x._id}>{x.username}</b>
+    ));
+    for (let i = incoming.length - 1; i > 0; i--) userlist.splice(i, 0, ", ");
+
+    const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0;
     return (
         <>
             <Header placement="primary">
+                {!isTouchscreenDevice && <UserDetail size={24} />}
                 <div className={styles.title}>
                     <Text id="app.navigation.tabs.friends" />
                 </div>
-                <div className="actions">
-                    <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
-                        <UserPlus size={24} />
-                    </IconButton>
+                <div className={styles.actions}>
+                    {/*<Tooltip content={"Create Category"} placement="bottom">
+                        <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
+                            <ListPlus size={28} />
+                        </IconButton>
+                    </Tooltip>
+                    <div className={styles.divider} />*/}
+                    <Tooltip content={"Create Group"} placement="bottom">
+                        <IconButton
+                            onClick={() =>
+                                openScreen({
+                                    id: "special_input",
+                                    type: "create_group",
+                                })
+                            }>
+                            <MessageAdd size={24} />
+                        </IconButton>
+                    </Tooltip>
+                    <Tooltip content={"Add Friend"} placement="bottom">
+                        <IconButton
+                            onClick={() =>
+                                openScreen({
+                                    id: "special_input",
+                                    type: "add_friend",
+                                })
+                            }>
+                            <UserPlus size={27} />
+                        </IconButton>
+                    </Tooltip>
+                    {/* 
+                    <div className={styles.divider} />
+                    <Tooltip content={"Friend Activity"} placement="bottom">
+                        <IconButton>
+                            <TennisBall size={24} />
+                        </IconButton>            
+                    </Tooltip>
+                    */}
                 </div>
             </Header>
             <div
                 className={styles.list}
-                data-empty={
-                    pending.length + friends.length + blocked.length === 0
-                }
-            >
-                {pending.length + friends.length + blocked.length === 0 && (
+                data-empty={isEmpty}
+                data-mobile={isTouchscreenDevice}>
+                {isEmpty && (
                     <>
                         <img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
                         <Text id="app.special.friends.nobody" />
                     </>
                 )}
-                {pending.length > 0 && (
-                    <Overline type="subtle">
-                        <Text id="app.special.friends.pending" /> –{" "}
-                        {pending.length}
-                    </Overline>
-                )}
-                {pending.map(y => (
-                    <Friend key={y._id} user={y} />
-                ))}
-                {friends.length > 0 && (
-                    <Overline type="subtle">
-                        <Text id="app.navigation.tabs.friends" /> –{" "}
-                        {friends.length}
-                    </Overline>
-                )}
-                {friends.map(y => (
-                    <Friend key={y._id} user={y} />
-                ))}
-                {blocked.length > 0 && (
-                    <Overline type="subtle">
-                        <Text id="app.special.friends.blocked" /> –{" "}
-                        {blocked.length}
-                    </Overline>
+
+                {incoming.length > 0 && (
+                    <div
+                        className={styles.pending}
+                        onClick={() =>
+                            openScreen({
+                                id: "pending_requests",
+                                users: incoming,
+                            })
+                        }>
+                        <div className={styles.avatars}>
+                            {incoming.map(
+                                (x, i) =>
+                                    i < 3 && (
+                                        <UserIcon
+                                            target={x}
+                                            size={64}
+                                            mask={
+                                                i <
+                                                Math.min(incoming.length - 1, 2)
+                                                    ? "url(#overlap)"
+                                                    : undefined
+                                            }
+                                        />
+                                    ),
+                            )}
+                        </div>
+                        <div className={styles.details}>
+                            <div>
+                                <Text id="app.special.friends.pending" />{" "}
+                                <span>{incoming.length}</span>
+                            </div>
+                            <span>
+                                {incoming.length > 3 ? (
+                                    <TextReact
+                                        id="app.special.friends.from.several"
+                                        fields={{
+                                            userlist: userlist.slice(0, 6),
+                                            count: incoming.length - 3,
+                                        }}
+                                    />
+                                ) : incoming.length > 1 ? (
+                                    <TextReact
+                                        id="app.special.friends.from.multiple"
+                                        fields={{
+                                            user: userlist.shift()!,
+                                            userlist: userlist.slice(1),
+                                        }}
+                                    />
+                                ) : (
+                                    <TextReact
+                                        id="app.special.friends.from.single"
+                                        fields={{ user: userlist[0] }}
+                                    />
+                                )}
+                            </span>
+                        </div>
+                        <ChevronRight size={28} />
+                    </div>
                 )}
-                {blocked.map(y => (
-                    <Friend key={y._id} user={y} />
-                ))}
+
+                {lists.map(([i18n, list, section_id], index) => {
+                    if (index === 0) return;
+                    if (list.length === 0) return;
+
+                    return (
+                        <CollapsibleSection
+                            key={section_id}
+                            id={`friends_${section_id}`}
+                            defaultValue={true}
+                            sticky
+                            large
+                            summary={
+                                <div class="title">
+                                    <Text id={i18n} /> — {list.length}
+                                </div>
+                            }>
+                            {list.map((x) => (
+                                <Friend key={x._id} user={x} />
+                            ))}
+                        </CollapsibleSection>
+                    );
+                })}
             </div>
         </>
     );
-}
+});

src/pages/home/Home.module.scss

@@ -11,15 +11,13 @@
         }
     }
 
-    ul {
+    .actions {
+        gap: 8px;
         margin: auto;
-        display: block;
-        font-size: 18px;
-        text-align: center;
-
-        li {
-            list-style: lower-greek;
-        }
+        display: flex;
+        width: fit-content;
+        align-items: center;
+        flex-direction: column;
     }
 }
 

src/pages/home/Home.tsx

-import styles from "./Home.module.scss";
+import { Home as HomeIcon } from "@styled-icons/boxicons-solid";
 import { Link } from "react-router-dom";
 
+import styles from "./Home.module.scss";
 import { Text } from "preact-i18n";
-import Header from "../../components/ui/Header";
 
-import wideSVG from '../../assets/wide.svg';
+import wideSVG from "../../assets/wide.svg";
+import Tooltip from "../../components/common/Tooltip";
+import Button from "../../components/ui/Button";
+import Header from "../../components/ui/Header";
 
 export default function Home() {
     return (
         <div className={styles.home}>
-            <Header placement="primary"><Text id="app.navigation.tabs.home" /></Header>
+            <Header placement="primary">
+                <HomeIcon size={24} />
+                <Text id="app.navigation.tabs.home" />
+            </Header>
             <h3>
-                <Text id="app.special.modals.onboarding.welcome" /> <img src={wideSVG} />
+                <Text id="app.special.modals.onboarding.welcome" />
+                <br />
+                <img src={wideSVG} />
             </h3>
-            <ul>
-                <li>
-                    Go to your <Link to="/friends">friends list</Link>.
-                </li>
-                <li>
-                    Give <Link to="/settings/feedback">feedback</Link>.
-                </li>
-                <li>
-                    Join <Link to="/invite/Testers">testers server</Link>.
-                </li>
-                <li>
-                    View{" "}
-                    <a href="https://gitlab.insrt.uk/revolt" target="_blank">
-                        source code
-                    </a>
-                    .
-                </li>
-            </ul>
+            <div className={styles.actions}>
+                <Link to="/invite/Testers">
+                    <Button contrast error>
+                        Join testers server
+                    </Button>
+                </Link>
+                <a
+                    href="https://insrt.uk/donate"
+                    target="_blank"
+                    rel="noreferrer">
+                    <Button contrast gold>
+                        Donate to Revolt
+                    </Button>
+                </a>
+                <Link to="/settings/feedback">
+                    <Button contrast>Give feedback</Button>
+                </Link>
+                <Link to="/settings">
+                    <Tooltip content="You can also right-click the user icon in the top left, or left click it if you're already home.">
+                        <Button contrast>Open settings</Button>
+                    </Tooltip>
+                </Link>
+            </div>
         </div>
     );
 }

src/pages/invite/Invite.module.scss

+.invite {
+    height: 100%;
+    display: flex;
+    color: white;
+    user-select: none;
+    align-items: center;
+    flex-direction: column;
+    background-size: cover;
+    justify-content: center;
+    background-position: center;
+
+    * {
+        overflow: visible;
+    }
+
+    .icon {
+        width: 64px;
+        z-index: 100;
+        text-align: left;
+        position: relative;
+
+        > * {
+            top: -32px;
+            position: absolute;
+        }
+    }
+
+    .leave {
+        top: 8px;
+        left: 8px;
+        cursor: pointer;
+        position: fixed;
+    }
+
+    .details {
+        text-align: center;
+        align-self: center;
+        padding: 32px 16px 16px 16px;
+        background: rgba(0, 0, 0, 0.6);
+        border-radius: var(--border-radius);
+        
+        h1 {
+            margin: 0;
+            font-weight: 500;
+        }
+
+        h2 {
+            margin: 4px;
+            opacity: 0.7;
+            font-size: 0.8em;
+            font-weight: 400;
+        }
+
+        h3 {
+            gap: 8px;
+            display: flex;
+            font-size: 1em;
+            font-weight: 400;
+            flex-direction: row;
+            justify-content: center;
+        }
+
+        button {
+            margin: auto;
+            display: block;
+            background: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+
+.preloader {
+    height: 100%;
+    display: grid;
+    place-items: center;
+}

src/pages/invite/Invite.tsx

+import { ArrowBack } from "@styled-icons/boxicons-regular";
+import { autorun } from "mobx";
+import { useHistory, useParams } from "react-router-dom";
+import { RetrievedInvite } from "revolt-api/types/Invites";
+
+import styles from "./Invite.module.scss";
+import { Text } from "preact-i18n";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { defer } from "../../lib/defer";
+import { TextReact } from "../../lib/i18n";
+
+import RequiresOnline from "../../context/revoltjs/RequiresOnline";
+import {
+    AppContext,
+    ClientStatus,
+    StatusContext,
+} from "../../context/revoltjs/RevoltClient";
+import { takeError } from "../../context/revoltjs/util";
+
+import ServerIcon from "../../components/common/ServerIcon";
+import UserIcon from "../../components/common/user/UserIcon";
+import Button from "../../components/ui/Button";
+import Overline from "../../components/ui/Overline";
+import Preloader from "../../components/ui/Preloader";
+
+export default function Invite() {
+    const history = useHistory();
+    const client = useContext(AppContext);
+    const status = useContext(StatusContext);
+    const { code } = useParams<{ code: string }>();
+    const [processing, setProcessing] = useState(false);
+    const [error, setError] = useState<string | undefined>(undefined);
+    const [invite, setInvite] = useState<RetrievedInvite | undefined>(
+        undefined,
+    );
+
+    useEffect(() => {
+        if (
+            typeof invite === "undefined" &&
+            (status === ClientStatus.ONLINE || status === ClientStatus.READY)
+        ) {
+            client
+                .fetchInvite(code)
+                .then((data) => setInvite(data))
+                .catch((err) => setError(takeError(err)));
+        }
+    }, [client, code, invite, status]);
+
+    if (typeof invite === "undefined") {
+        return (
+            <div className={styles.preloader}>
+                <RequiresOnline>
+                    {error ? (
+                        <Overline type="error" error={error} />
+                    ) : (
+                        <Preloader type="spinner" />
+                    )}
+                </RequiresOnline>
+            </div>
+        );
+    }
+
+    // ! FIXME: add i18n translations
+    return (
+        <div
+            className={styles.invite}
+            style={{
+                backgroundImage: invite.server_banner
+                    ? `url('${client.generateFileURL(invite.server_banner)}')`
+                    : undefined,
+            }}>
+            <div className={styles.leave}>
+                <ArrowBack size={32} onClick={() => history.push("/")} />
+            </div>
+
+            {!processing && (
+                <div className={styles.icon}>
+                    <ServerIcon
+                        attachment={invite.server_icon}
+                        server_name={invite.server_name}
+                        size={64}
+                    />
+                </div>
+            )}
+
+            <div className={styles.details}>
+                {processing ? (
+                    <Preloader type="ring" />
+                ) : (
+                    <>
+                        <h1>{invite.server_name}</h1>
+                        <h2>#{invite.channel_name}</h2>
+                        <h3>
+                            <TextReact
+                                id="app.special.invite.invited_by"
+                                fields={{
+                                    user: (
+                                        <>
+                                            <UserIcon
+                                                size={24}
+                                                attachment={invite.user_avatar}
+                                            />{" "}
+                                            {invite.user_name}
+                                        </>
+                                    ),
+                                }}
+                            />
+                        </h3>
+                        <Overline type="error" error={error} />
+                        <Button
+                            contrast
+                            onClick={async () => {
+                                if (status === ClientStatus.READY) {
+                                    return history.push("/");
+                                }
+
+                                try {
+                                    setProcessing(true);
+
+                                    if (invite.type === "Server") {
+                                        if (
+                                            client.servers.get(invite.server_id)
+                                        ) {
+                                            history.push(
+                                                `/server/${invite.server_id}/channel/${invite.channel_id}`,
+                                            );
+                                        }
+
+                                        const dispose = autorun(() => {
+                                            const server = client.servers.get(
+                                                invite.server_id,
+                                            );
+
+                                            defer(() => {
+                                                if (server) {
+                                                    history.push(
+                                                        `/server/${server._id}/channel/${invite.channel_id}`,
+                                                    );
+                                                }
+                                            });
+
+                                            dispose();
+                                        });
+                                    }
+
+                                    await client.joinInvite(code);
+                                } catch (err) {
+                                    setError(takeError(err));
+                                    setProcessing(false);
+                                }
+                            }}>
+                            {status === ClientStatus.READY ? (
+                                <Text id="app.special.invite.login" />
+                            ) : (
+                                <Text id="app.special.invite.accept" />
+                            )}
+                        </Button>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

src/pages/login/FormField.tsx

-import Overline from '../../components/ui/Overline';
-import InputBox from '../../components/ui/InputBox';
-import { Text, Localizer } from 'preact-i18n';
+import { UseFormMethods } from "react-hook-form";
+
+import { Text, Localizer } from "preact-i18n";
+
+import InputBox from "../../components/ui/InputBox";
+import Overline from "../../components/ui/Overline";
 
 interface Props {
     type: "email" | "username" | "password" | "invite" | "current_password";
     showOverline?: boolean;
-    register: Function;
+    register: UseFormMethods["register"];
     error?: string;
     name?: string;
 }
@@ -15,7 +18,7 @@ export default function FormField({
     register,
     showOverline,
     error,
-    name
+    name,
 }: Props) {
     return (
         <>
@@ -26,7 +29,11 @@ export default function FormField({
             )}
             <Localizer>
                 <InputBox
-                    placeholder={(<Text id={`login.enter.${type}`} />) as any}
+                    placeholder={
+                        (
+                            <Text id={`login.enter.${type}`} />
+                        ) as unknown as string
+                    }
                     name={
                         type === "current_password" ? "password" : name ?? type
                     }
@@ -37,6 +44,8 @@ export default function FormField({
                             ? "password"
                             : type
                     }
+                    // See https://github.com/mozilla/contain-facebook/issues/783
+                    className="fbc-has-badge"
                     ref={register(
                         type === "password" || type === "current_password"
                             ? {
@@ -47,19 +56,19 @@ export default function FormField({
                                           ? "TooShort"
                                           : value.length > 1024
                                           ? "TooLong"
-                                          : undefined
+                                          : undefined,
                               }
                             : type === "email"
                             ? {
                                   required: "RequiredField",
                                   pattern: {
                                       value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                                      message: "InvalidEmail"
-                                  }
+                                      message: "InvalidEmail",
+                                  },
                               }
                             : type === "username"
                             ? { required: "RequiredField" }
-                            : { required: "RequiredField" }
+                            : { required: "RequiredField" },
                     )}
                 />
             </Localizer>

src/pages/login/Login.tsx

-import { Text } from "preact-i18n";
 import { Helmet } from "react-helmet";
+import { Route, Switch } from "react-router-dom";
+import { LIBRARY_VERSION } from "revolt.js";
+
 import styles from "./Login.module.scss";
+import { Text } from "preact-i18n";
 import { useContext } from "preact/hooks";
-import { APP_VERSION } from "../../version";
-import { LIBRARY_VERSION } from "revolt.js";
-import { Route, Switch } from "react-router-dom";
+
 import { ThemeContext } from "../../context/Theme";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-import background from "./background.jpg";
+import LocaleSelector from "../../components/common/LocaleSelector";
 
-import { FormLogin } from "./forms/FormLogin";
+import { Titlebar } from "../../components/native/Titlebar";
+import { APP_VERSION } from "../../version";
+import background from "./background.jpg";
 import { FormCreate } from "./forms/FormCreate";
+import { FormLogin } from "./forms/FormLogin";
 import { FormResend } from "./forms/FormResend";
 import { FormReset, FormSendReset } from "./forms/FormReset";
 
@@ -20,52 +24,57 @@ export default function Login() {
     const client = useContext(AppContext);
 
     return (
-        <div className={styles.login}>
-            <Helmet>
-                <meta name="theme-color" content={theme.background} />
-            </Helmet>
-            <div className={styles.content}>
-                <div className={styles.attribution}>
-                    <span>
-                        API:{" "}
-                        <code>{client.configuration?.revolt ?? "???"}</code>{" "}
-                        &middot; revolt.js: <code>{LIBRARY_VERSION}</code>{" "}
-                        &middot; App: <code>{APP_VERSION}</code>
-                    </span>
-                    <span>
-                        {/*<LocaleSelector />*/}
-                    </span>
-                </div>
-                <div className={styles.modal}>
-                    <Switch>
-                        <Route path="/login/create">
-                            <FormCreate />
-                        </Route>
-                        <Route path="/login/resend">
-                            <FormResend />
-                        </Route>
-                        <Route path="/login/reset/:token">
-                            <FormReset />
-                        </Route>
-                        <Route path="/login/reset">
-                            <FormSendReset />
-                        </Route>
-                        <Route path="/">
-                            <FormLogin />
-                        </Route>
-                    </Switch>
-                </div>
-                <div className={styles.attribution}>
-                    <span>
-                        <Text id="general.image_by" /> &lrm;@lorenzoherrera
-                        &rlm;· unsplash.com
-                    </span>
+        <>
+            {window.isNative && !window.native.getConfig().frame && (
+                <Titlebar />
+            )}
+            <div className={styles.login}>
+                <Helmet>
+                    <meta name="theme-color" content={theme.background} />
+                </Helmet>
+                <div className={styles.content}>
+                    <div className={styles.attribution}>
+                        <span>
+                            API:{" "}
+                            <code>{client.configuration?.revolt ?? "???"}</code>{" "}
+                            &middot; revolt.js: <code>{LIBRARY_VERSION}</code>{" "}
+                            &middot; App: <code>{APP_VERSION}</code>
+                        </span>
+                        <span>
+                            <LocaleSelector />
+                        </span>
+                    </div>
+                    <div className={styles.modal}>
+                        <Switch>
+                            <Route path="/login/create">
+                                <FormCreate />
+                            </Route>
+                            <Route path="/login/resend">
+                                <FormResend />
+                            </Route>
+                            <Route path="/login/reset/:token">
+                                <FormReset />
+                            </Route>
+                            <Route path="/login/reset">
+                                <FormSendReset />
+                            </Route>
+                            <Route path="/">
+                                <FormLogin />
+                            </Route>
+                        </Switch>
+                    </div>
+                    <div className={styles.attribution}>
+                        <span>
+                            <Text id="general.image_by" /> &lrm;@lorenzoherrera
+                            &rlm;· unsplash.com
+                        </span>
+                    </div>
                 </div>
+                <div
+                    className={styles.bg}
+                    style={{ background: `url('${background}')` }}
+                />
             </div>
-            <div
-                className={styles.bg}
-                style={{ background: `url('${background}')` }}
-            />
-        </div>
+        </>
     );
-};
+}

src/pages/login/forms/CaptchaBlock.tsx

-import { Text } from "preact-i18n";
-import styles from "../Login.module.scss";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
+
+import styles from "../Login.module.scss";
+import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
-import Preloader from "../../../components/ui/Preloader";
+
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
+import Preloader from "../../../components/ui/Preloader";
+
 export interface CaptchaProps {
     onSuccess: (token?: string) => void;
     onCancel: () => void;
@@ -17,16 +20,16 @@ export function CaptchaBlock(props: CaptchaProps) {
         if (!client.configuration?.features.captcha.enabled) {
             props.onSuccess();
         }
-    }, []);
+    }, [client.configuration?.features.captcha.enabled, props]);
 
     if (!client.configuration?.features.captcha.enabled)
-        return <Preloader />;
+        return <Preloader type="spinner" />;
 
     return (
         <div>
             <HCaptcha
                 sitekey={client.configuration.features.captcha.key}
-                onVerify={token => props.onSuccess(token)}
+                onVerify={(token) => props.onSuccess(token)}
             />
             <div className={styles.footer}>
                 <a onClick={props.onCancel}>

src/pages/login/forms/Form.tsx

-import { Legal } from "./Legal";
-import { Text } from "preact-i18n";
+import { CheckCircle, Envelope } from "@styled-icons/boxicons-regular";
+import { useForm } from "react-hook-form";
 import { Link } from "react-router-dom";
+
 import styles from "../Login.module.scss";
-import { useForm } from "react-hook-form";
-import { MailProvider } from "./MailProvider";
+import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
-import { CheckCircle, Mail } from "@styled-icons/feather";
-import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
-import { takeError } from "../../../context/revoltjs/util";
+
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { takeError } from "../../../context/revoltjs/util";
 
-import FormField from "../FormField";
+import wideSVG from "../../../assets/wide.svg";
 import Button from "../../../components/ui/Button";
 import Overline from "../../../components/ui/Overline";
 import Preloader from "../../../components/ui/Preloader";
 
+import FormField from "../FormField";
+import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
+import { Legal } from "./Legal";
+import { MailProvider } from "./MailProvider";
+
 interface Props {
     page: "create" | "login" | "send_reset" | "reset" | "resend";
     callback: (fields: {
@@ -26,11 +30,17 @@ interface Props {
 }
 
 function getInviteCode() {
-    if (typeof window === 'undefined') return '';
+    if (typeof window === "undefined") return "";
 
     const urlParams = new URLSearchParams(window.location.search);
-    const code = urlParams.get('code');
-    return code ?? '';
+    const code = urlParams.get("code");
+    return code ?? "";
+}
+
+interface FormInputs {
+    email: string;
+    password: string;
+    invite: string;
 }
 
 export function Form({ page, callback }: Props) {
@@ -41,23 +51,19 @@ export function Form({ page, callback }: Props) {
     const [error, setGlobalError] = useState<string | undefined>(undefined);
     const [captcha, setCaptcha] = useState<CaptchaProps | undefined>(undefined);
 
-    const { handleSubmit, register, errors, setError } = useForm({
+    const { handleSubmit, register, errors, setError } = useForm<FormInputs>({
         defaultValues: {
-            email: '',
-            password: '',
-            invite: getInviteCode()
-        }
+            email: "",
+            password: "",
+            invite: getInviteCode(),
+        },
     });
 
-    async function onSubmit(data: {
-        email: string;
-        password: string;
-        invite: string;
-    }) {
+    async function onSubmit(data: FormInputs) {
         setGlobalError(undefined);
         setLoading(true);
 
-        function onError(err: any) {
+        function onError(err: unknown) {
             setLoading(false);
 
             const error = takeError(err);
@@ -79,7 +85,7 @@ export function Form({ page, callback }: Props) {
                 page !== "reset"
             ) {
                 setCaptcha({
-                    onSuccess: async captcha => {
+                    onSuccess: async (captcha) => {
                         setCaptcha(undefined);
                         try {
                             await callback({ ...data, captcha });
@@ -91,7 +97,7 @@ export function Form({ page, callback }: Props) {
                     onCancel: () => {
                         setCaptcha(undefined);
                         setLoading(false);
-                    }
+                    },
                 });
             } else {
                 await callback(data);
@@ -107,7 +113,7 @@ export function Form({ page, callback }: Props) {
             <div className={styles.success}>
                 {client.configuration?.features.email ? (
                     <>
-                        <Mail size={72} />
+                        <Envelope size={72} />
                         <h2>
                             <Text id="login.check_mail" />
                         </h2>
@@ -136,11 +142,18 @@ export function Form({ page, callback }: Props) {
     }
 
     if (captcha) return <CaptchaBlock {...captcha} />;
-    if (loading) return <Preloader />;
+    if (loading) return <Preloader type="spinner" />;
 
     return (
         <div className={styles.form}>
-            <form onSubmit={handleSubmit(onSubmit) as any}>
+            <img src={wideSVG} />
+            {/* Preact / React typing incompatabilities */}
+            <form
+                onSubmit={
+                    handleSubmit(
+                        onSubmit,
+                    ) as JSX.GenericEventHandler<HTMLFormElement>
+                }>
                 {page !== "reset" && (
                     <FormField
                         type="email"

src/pages/login/forms/FormCreate.tsx

-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { useContext } from "preact/hooks";
+
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+
 import { Form } from "./Form";
 
 export function FormCreate() {
@@ -8,7 +10,7 @@ export function FormCreate() {
     return (
         <Form
             page="create"
-            callback={async data => {
+            callback={async (data) => {
                 await client.register(import.meta.env.VITE_API_URL, data);
             }}
         />

src/pages/login/forms/FormLogin.tsx

-import { Form } from "./Form";
 import { detect } from "detect-browser";
-import { useContext } from "preact/hooks";
 import { useHistory } from "react-router-dom";
+
+import { useContext } from "preact/hooks";
+
 import { OperationsContext } from "../../../context/revoltjs/RevoltClient";
 
+import { Form } from "./Form";
+
 export function FormLogin() {
     const { login } = useContext(OperationsContext);
     const history = useHistory();
@@ -11,12 +14,16 @@ export function FormLogin() {
     return (
         <Form
             page="login"
-            callback={async data => {
+            callback={async (data) => {
                 const browser = detect();
                 let device_name;
                 if (browser) {
                     const { name, os } = browser;
-                    device_name = `${name} on ${os}`;
+                    if (window.isNative) {
+                        device_name = `Revolt Desktop on ${os}`;
+                    } else {
+                        device_name = `${name} on ${os}`;
+                    }
                 } else {
                     device_name = "Unknown Device";
                 }

src/pages/login/forms/FormResend.tsx

-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { useContext } from "preact/hooks";
+
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+
 import { Form } from "./Form";
 
 export function FormResend() {
@@ -8,7 +10,7 @@ export function FormResend() {
     return (
         <Form
             page="resend"
-            callback={async data => {
+            callback={async (data) => {
                 await client.req("POST", "/auth/resend", data);
             }}
         />