src/assets/logo.svg

+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M290.947 209.226C290.947 227.612 280.944 238.648 259.595 238.648H224.247V180.471H259.601C280.944 180.471 290.947 191.837 290.947 209.226ZM133 133L167.222 180.583V367.669H224.254V279.094H237.93L286.63 367.689H351L296.969 274.746C312.054 271.066 325.434 262.333 334.893 249.993C344.353 237.652 349.325 222.444 348.986 206.885C348.986 166.096 320.306 133 262.938 133H167.222H133Z" fill="#FF4654" stroke="#FF4654" stroke-width="1.04306"/>
+</svg>

src/assets/sounds/Audio.ts

+import call_join from "./call_join.mp3";
+import call_leave from "./call_leave.mp3";
+import message from "./message.mp3";
+import outbound from "./outbound.mp3";
+
+const SoundMap: { [key in Sounds]: string } = {
+    message,
+    outbound,
+    call_join,
+    call_leave,
+};
+
+export type Sounds = "message" | "outbound" | "call_join" | "call_leave";
+export const SOUNDS_ARRAY: Sounds[] = [
+    "message",
+    "outbound",
+    "call_join",
+    "call_leave",
+];
+
+export function playSound(sound: Sounds) {
+    const file = SoundMap[sound];
+    const el = new Audio(file);
+    try {
+        el.play();
+    } catch (err) {
+        console.error("Failed to play audio file", file, err);
+    }
+}

src/assets/wide.svg

+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="193.733" height="37.438" viewBox="0 0 193.733 37.438">
+  <path d="M23.393,1.382c0,2.787-1.52,4.46-4.764,4.46H13.258V-2.977H18.63C21.873-2.977,23.393-1.254,23.393,1.382Zm-24-11.555,5.2,7.213V25.4h8.666V11.973h2.078l7.4,13.43h9.781l-8.21-14.089A10.355,10.355,0,0,0,32.212,1.027c0-6.183-4.358-11.2-13.075-11.2Zm60.035,0H37.634V25.4H59.426V18.46H46.3v-7.8H57.906V3.966H46.3V-2.969H59.426Zm20.981,26.86-8.818-26.86H62.365L74.984,25.4H85.83L98.449-10.173H89.276Zm56.659-9.173c0-10.693-8.058-18.194-18.194-18.194-10.085,0-18.3,7.5-18.3,18.194a17.9,17.9,0,0,0,18.3,18.244A17.815,17.815,0,0,0,137.066,7.514Zm-27.62,0c0-6.335,3.649-10.338,9.426-10.338,5.676,0,9.376,4,9.376,10.338,0,6.233-3.7,10.338-9.376,10.338C113.095,17.852,109.446,13.747,109.446,7.514ZM141.88-10.173V25.4H161.9v-6.95H150.545V-10.173Zm22.248,7.2h9.426V25.4h8.666V-2.975h9.426v-7.2H164.128Z" transform="translate(1.586 11.18)" fill="#fff" stroke="#fff" stroke-width="1"/>
+</svg>

src/components/common/AgeGate.tsx

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

src/components/common/AutoComplete.tsx

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

src/components/common/ChannelIcon.tsx

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

src/components/common/CollapsibleSection.tsx

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

src/components/common/Emoji.tsx

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