src/components/ui/TextArea.module.scss

 .container {
-    font-size: 0.875rem;
+    font-size: .875rem;
     line-height: 20px;
     position: relative;
 }

src/components/ui/TextArea.tsx

-// import classNames from "classnames";
-// import { memo } from "preact/compat";
-// import styles from "./TextArea.module.scss";
-// import { useState, useEffect, useRef, useLayoutEffect } from "preact/hooks";
 import styled, { css } from "styled-components";
 
 export interface TextAreaProps {
     code?: boolean;
-    padding?: number;
-    lineHeight?: number;
+    padding?: string;
+    lineHeight?: string;
     hideBorder?: boolean;
 }
 
@@ -21,30 +17,42 @@ export default styled.textarea<TextAreaProps>`
     display: block;
     color: var(--foreground);
     background: var(--secondary-background);
-    padding: ${ props => props.padding ?? DEFAULT_TEXT_AREA_PADDING }px;
-    line-height: ${ props => props.lineHeight ?? DEFAULT_LINE_HEIGHT }px;
-
-    ${ props => props.hideBorder && css`
-        border: none;
-    ` }
-
-    ${ props => !props.hideBorder && css`
-        border-radius: 4px;
-        transition: border-color .2s ease-in-out;
-        border: ${TEXT_AREA_BORDER_WIDTH}px solid transparent;
-    ` }
+    padding: ${(props) => props.padding ?? "var(--textarea-padding)"};
+    line-height: ${(props) =>
+        props.lineHeight ?? "var(--textarea-line-height)"};
+
+    ${(props) =>
+        props.hideBorder &&
+        css`
+            border: none;
+        `}
+
+    ${(props) =>
+        !props.hideBorder &&
+        css`
+            border-radius: var(--border-radius);
+            transition: border-color 0.2s ease-in-out;
+            border: var(--input-border-width) solid transparent;
+        `}
 
     &:focus {
         outline: none;
 
-        ${ props => !props.hideBorder && css`
-            border: ${TEXT_AREA_BORDER_WIDTH}px solid var(--accent);
-        ` }
+        ${(props) =>
+            !props.hideBorder &&
+            css`
+                border: var(--input-border-width) solid var(--accent);
+            `}
     }
 
-    ${ props => props.code ? css`
-        font-family: 'Fira Mono', 'Courier New', Courier, monospace;
-    ` : css`
-        font-family: 'Open Sans', sans-serif;
-    ` }
+    ${(props) =>
+        props.code
+            ? css`
+                  font-family: var(--monospace-font), monospace;
+              `
+            : css`
+                  font-family: inherit;
+              `}
+
+    font-variant-ligatures: var(--ligatures);
 `;

src/components/ui/Tip.tsx

-import styled from "styled-components";
-import { Info } from "@styled-icons/feather";
+import { InfoCircle } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
+
 import { Children } from "../../types/Preact";
 
-export const TipBase = styled.div`
+interface Props {
+    warning?: boolean;
+    error?: boolean;
+}
+
+export const Separator = styled.div<Props>`
+    height: 1px;
+    width: calc(100% - 10px);
+    background: var(--secondary-header);
+    margin: 18px auto;
+`;
+
+export const TipBase = styled.div<Props>`
     display: flex;
     padding: 12px;
     overflow: hidden;
     align-items: center;
 
     font-size: 14px;
-    border-radius: 7px;
     background: var(--primary-header);
+    border-radius: var(--border-radius);
     border: 2px solid var(--secondary-header);
 
     a {
@@ -22,15 +35,37 @@ export const TipBase = styled.div`
 
     svg {
         flex-shrink: 0;
-        margin-right: 10px;
+        margin-inline-end: 10px;
     }
+
+    ${(props) =>
+        props.warning &&
+        css`
+            color: var(--warning);
+            border: 2px solid var(--warning);
+            background: var(--secondary-header);
+        `}
+
+    ${(props) =>
+        props.error &&
+        css`
+            color: var(--error);
+            border: 2px solid var(--error);
+            background: var(--secondary-header);
+        `}
 `;
 
-export default function Tip(props: { children: Children }) {
+export default function Tip(
+    props: Props & { children: Children; hideSeparator?: boolean },
+) {
+    const { children, hideSeparator, ...tipProps } = props;
     return (
-        <TipBase>
-            <Info size={20} strokeWidth={2} />
-            <span>{props.children}</span>
-        </TipBase>
+        <>
+            {!hideSeparator && <Separator />}
+            <TipBase {...tipProps}>
+                <InfoCircle size={20} />
+                <span>{children}</span>
+            </TipBase>
+        </>
     );
 }

src/components/ui/fluent/CategoryButton.tsx

+import { ChevronRight, LinkExternal } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
+
+import { Children } from "../../../types/Preact";
+
+interface BaseProps {
+    readonly hover?: boolean;
+    readonly account?: boolean;
+    readonly disabled?: boolean;
+    readonly largeDescription?: boolean;
+}
+
+const CategoryBase = styled.div<BaseProps>`
+    /*height: 54px;*/
+    padding: 9.8px 12px;
+    border-radius: 6px;
+    margin-bottom: 10px;
+    color: var(--foreground);
+    background: var(--secondary-header);
+    gap: 12px;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    > svg {
+        flex-shrink: 0;
+    }
+
+    .content {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        font-weight: 600;
+        font-size: 14px;
+
+        .title {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+        }
+
+        .description {
+            ${(props) =>
+                props.largeDescription
+                    ? css`
+                          font-size: 14px;
+                      `
+                    : css`
+                          font-size: 11px;
+                      `}
+
+            font-weight: 400;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
+            overflow: hidden;
+
+            a:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    ${(props) =>
+        props.hover &&
+        css`
+            cursor: pointer;
+            opacity: 1;
+            transition: 0.1s ease background-color;
+
+            &:hover {
+                background: var(--secondary-background);
+            }
+        `}
+
+    ${(props) =>
+        props.disabled &&
+        css`
+            opacity: 0.4;
+            /*.content,
+            .action {
+                color: var(--tertiary-foreground);
+            }*/
+
+            .action {
+                font-size: 14px;
+            }
+        `}
+    
+    ${(props) =>
+        props.account &&
+        css`
+            height: 54px;
+
+            .content {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                .title {
+                    text-transform: uppercase;
+                    font-size: 12px;
+                    color: var(--secondary-foreground);
+                }
+
+                .description {
+                    font-size: 15px;
+
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    overflow: hidden;
+                }
+            }
+        `}
+`;
+
+interface Props extends BaseProps {
+    icon?: Children;
+    children?: Children;
+    description?: Children;
+
+    onClick?: () => void;
+    action?: "chevron" | "external" | Children;
+}
+
+export default function CategoryButton({
+    icon,
+    children,
+    description,
+    account,
+    disabled,
+    onClick,
+    hover,
+    action,
+}: Props) {
+    return (
+        <CategoryBase
+            hover={hover || typeof onClick !== "undefined"}
+            onClick={onClick}
+            disabled={disabled}
+            account={account}>
+            {icon}
+            <div class="content">
+                <div className="title">{children}</div>
+
+                <div className="description">{description}</div>
+            </div>
+            <div class="action">
+                {typeof action === "string" ? (
+                    action === "chevron" ? (
+                        <ChevronRight size={24} />
+                    ) : (
+                        <LinkExternal size={20} />
+                    )
+                ) : (
+                    action
+                )}
+            </div>
+        </CategoryBase>
+    );
+}

src/context/Locale.tsx

+import dayJS from "dayjs";
+import calendar from "dayjs/plugin/calendar";
+import format from "dayjs/plugin/localizedFormat";
+import update from "dayjs/plugin/updateLocale";
+import defaultsDeep from "lodash.defaultsdeep";
+
 import { IntlProvider } from "preact-i18n";
+import { useCallback, useEffect, useState } from "preact/hooks";
+
 import { connectState } from "../redux/connector";
-import { useEffect, useState } from "preact/hooks";
+
 import definition from "../../external/lang/en.json";
 
-import dayjs from "dayjs";
-import calendar from "dayjs/plugin/calendar";
-import update from "dayjs/plugin/updateLocale";
-import format from "dayjs/plugin/localizedFormat";
+export const dayjs = dayJS;
+
 dayjs.extend(calendar);
 dayjs.extend(format);
 dayjs.extend(update);
@@ -18,6 +24,7 @@ export enum Language {
     AZERBAIJANI = "az",
     CZECH = "cs",
     GERMAN = "de",
+    GREEK = "el",
     SPANISH = "es",
     FINNISH = "fi",
     FRENCH = "fr",
@@ -25,6 +32,7 @@ export enum Language {
     CROATIAN = "hr",
     HUNGARIAN = "hu",
     INDONESIAN = "id",
+    ITALIAN = "it",
     LITHUANIAN = "lt",
     MACEDONIAN = "mk",
     DUTCH = "nl",
@@ -34,6 +42,7 @@ export enum Language {
     RUSSIAN = "ru",
     SERBIAN = "sr",
     SWEDISH = "sv",
+    TOKIPONA = "tokipona",
     TURKISH = "tr",
     UKRANIAN = "uk",
     CHINESE_SIMPLIFIED = "zh_Hans",
@@ -42,7 +51,6 @@ export enum Language {
     PIRATE = "pr",
     BOTTOM = "bottom",
     PIGLATIN = "piglatin",
-    HARDCORE = "hardcore",
 }
 
 export interface LanguageEntry {
@@ -51,6 +59,7 @@ export interface LanguageEntry {
     i18n: string;
     dayjs?: string;
     rtl?: boolean;
+    cat?: "const" | "alt";
 }
 
 export const Languages: { [key in Language]: LanguageEntry } = {
@@ -65,13 +74,15 @@ export const Languages: { [key in Language]: LanguageEntry } = {
     az: { display: "Azərbaycan dili", emoji: "🇦🇿", i18n: "az" },
     cs: { display: "Čeština", emoji: "🇨🇿", i18n: "cs" },
     de: { display: "Deutsch", emoji: "🇩🇪", i18n: "de" },
+    el: { display: "Ελληνικά", emoji: "🇬🇷", i18n: "el" },
     es: { display: "Español", emoji: "🇪🇸", i18n: "es" },
     fi: { display: "suomi", emoji: "🇫🇮", i18n: "fi" },
     fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" },
     hi: { display: "हिन्दी", emoji: "🇮🇳", i18n: "hi" },
     hr: { display: "Hrvatski", emoji: "🇭🇷", i18n: "hr" },
-    hu: { display: "magyar", emoji: "🇭🇺", i18n: "hu" },
+    hu: { display: "Magyar", emoji: "🇭🇺", i18n: "hu" },
     id: { display: "bahasa Indonesia", emoji: "🇮🇩", i18n: "id" },
+    it: { display: "Italiano", emoji: "🇮🇹", i18n: "it" },
     lt: { display: "Lietuvių", emoji: "🇱🇹", i18n: "lt" },
     mk: { display: "Македонски", emoji: "🇲🇰", i18n: "mk" },
     nl: { display: "Nederlands", emoji: "🇳🇱", i18n: "nl" },
@@ -95,20 +106,41 @@ export const Languages: { [key in Language]: LanguageEntry } = {
         dayjs: "zh",
     },
 
-    owo: { display: "OwO", emoji: "🐱", i18n: "owo", dayjs: "en-gb" },
-    pr: { display: "Pirate", emoji: "🏴‍☠️", i18n: "pr", dayjs: "en-gb" },
-    bottom: { display: "Bottom", emoji: "🥺", i18n: "bottom", dayjs: "en-gb" },
+    tokipona: {
+        display: "Toki Pona",
+        emoji: "🙂",
+        i18n: "tokipona",
+        dayjs: "en-gb",
+        cat: "const",
+    },
+
+    owo: {
+        display: "OwO",
+        emoji: "🐱",
+        i18n: "owo",
+        dayjs: "en-gb",
+        cat: "alt",
+    },
+    pr: {
+        display: "Pirate",
+        emoji: "🏴‍☠️",
+        i18n: "pr",
+        dayjs: "en-gb",
+        cat: "alt",
+    },
+    bottom: {
+        display: "Bottom",
+        emoji: "🥺",
+        i18n: "bottom",
+        dayjs: "en-gb",
+        cat: "alt",
+    },
     piglatin: {
         display: "Pig Latin",
         emoji: "🐖",
         i18n: "piglatin",
         dayjs: "en-gb",
-    },
-    hardcore: {
-        display: "Hardcore Mode",
-        emoji: "🔥",
-        i18n: "hardcore",
-        dayjs: "en-gb",
+        cat: "alt",
     },
 };
 
@@ -117,40 +149,118 @@ interface Props {
     locale: Language;
 }
 
+export interface Dictionary {
+    dayjs?: {
+        defaults?: {
+            twelvehour?: "yes" | "no";
+            separator?: string;
+            date?: "traditional" | "simplified" | "ISO8601";
+        };
+        timeFormat?: string;
+    };
+    [key: string]:
+        | Record<string, Omit<Dictionary, "dayjs">>
+        | string
+        | undefined;
+}
+
 function Locale({ children, locale }: Props) {
-    const [defns, setDefinition] = useState(definition);
-    const lang = Languages[locale];
+    const [defns, setDefinition] = useState<Dictionary>(
+        definition as Dictionary,
+    );
 
-    useEffect(() => {
-        if (locale === "en") {
-            setDefinition(definition);
-            dayjs.locale("en");
-            return;
-        }
-
-        if (lang.i18n === "hardcore") {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            setDefinition({} as any);
-            return;
-        }
-
-        import(`../../external/lang/${lang.i18n}.json`).then(
-            async (lang_file) => {
-                const defn = lang_file.default;
-                const target = lang.dayjs ?? lang.i18n;
-                const dayjs_locale = await import(`../../node_modules/dayjs/esm/locale/${target}.js`);
-
-                if (defn.dayjs) {
-                    dayjs.updateLocale(target, { calendar: defn.dayjs });
-                }
-
-                dayjs.locale(dayjs_locale.default);
+    // Load relevant language information, fallback to English if invalid.
+    const lang = Languages[locale] ?? Languages.en;
+
+    function transformLanguage(source: Dictionary) {
+        // Fallback untranslated strings to English (UK)
+        const obj = defaultsDeep(source, definition);
+
+        // Take relevant objects out, dayjs and defaults
+        // should exist given we just took defaults above.
+        const { dayjs } = obj;
+        const { defaults } = dayjs;
+
+        // Determine whether we are using 12-hour clock.
+        const twelvehour = defaults?.twelvehour
+            ? defaults.twelvehour === "yes"
+            : false;
+
+        // Determine what date separator we are using.
+        const separator: string = defaults?.date_separator ?? "/";
+
+        // Determine what date format we are using.
+        const date: "traditional" | "simplified" | "ISO8601" =
+            defaults?.date_format ?? "traditional";
+
+        // Available date formats.
+        const DATE_FORMATS = {
+            traditional: `DD${separator}MM${separator}YYYY`,
+            simplified: `MM${separator}DD${separator}YYYY`,
+            ISO8601: "YYYY-MM-DD",
+        };
+
+        // Replace data in dayjs object, make sure to provide fallbacks.
+        dayjs["sameElse"] = DATE_FORMATS[date] ?? DATE_FORMATS.traditional;
+        dayjs["timeFormat"] = twelvehour ? "hh:mm A" : "HH:mm";
+
+        // Replace {{time}} format string in dayjs strings with the time format.
+        Object.keys(dayjs)
+            .filter((k) => typeof dayjs[k] === "string")
+            .forEach(
+                (k) =>
+                    (dayjs[k] = dayjs[k].replace(
+                        /{{time}}/g,
+                        dayjs["timeFormat"],
+                    )),
+            );
+
+        return obj;
+    }
+
+    const loadLanguage = useCallback(
+        (locale: string) => {
+            if (locale === "en") {
+                // If English, make sure to restore everything to defaults.
+                // Use what we already have.
+                const defn = transformLanguage(definition as Dictionary);
                 setDefinition(defn);
+                dayjs.locale("en");
+                dayjs.updateLocale("en", { calendar: defn.dayjs });
+                return;
             }
-        );
-    }, [locale, lang]);
+
+            import(`../../external/lang/${lang.i18n}.json`).then(
+                async (lang_file) => {
+                    // Transform the definitions data.
+                    const defn = transformLanguage(lang_file.default);
+
+                    // Determine and load dayjs locales.
+                    const target = lang.dayjs ?? lang.i18n;
+                    const dayjs_locale = await import(
+                        `../../node_modules/dayjs/esm/locale/${target}.js`
+                    );
+
+                    // Load dayjs locales.
+                    dayjs.locale(target, dayjs_locale.default);
+
+                    if (defn.dayjs) {
+                        // Override dayjs calendar locales with our own.
+                        dayjs.updateLocale(target, { calendar: defn.dayjs });
+                    }
+
+                    // Apply definition to app.
+                    setDefinition(defn);
+                },
+            );
+        },
+        [lang.dayjs, lang.i18n],
+    );
+
+    useEffect(() => loadLanguage(locale), [locale, lang, loadLanguage]);
 
     useEffect(() => {
+        // Apply RTL language format.
         document.body.style.direction = lang.rtl ? "rtl" : "";
     }, [lang.rtl]);
 
@@ -164,5 +274,5 @@ export default connectState<Omit<Props, "locale">>(
             locale: state.locale,
         };
     },
-    true
+    true,
 );

src/context/Settings.tsx

@@ -4,29 +4,58 @@
 //
 // Replace references to SettingsContext with connectState in the future
 // if it does cause problems though.
+//
+// This now also supports Audio stuff.
+import defaultsDeep from "lodash.defaultsdeep";
+
+import { createContext } from "preact";
+import { useMemo } from "preact/hooks";
 
-import { Settings } from "../redux/reducers/settings";
 import { connectState } from "../redux/connector";
+import {
+    DEFAULT_SOUNDS,
+    Settings,
+    SoundOptions,
+} from "../redux/reducers/settings";
+
+import { playSound, Sounds } from "../assets/sounds/Audio";
 import { Children } from "../types/Preact";
-import { createContext } from "preact";
 
-export const SettingsContext = createContext<Settings>({} as any);
+export const SettingsContext = createContext<Settings>({});
+export const SoundContext = createContext<(sound: Sounds) => void>(null!);
 
 interface Props {
-    children?: Children,
-    settings: Settings
+    children?: Children;
+    settings: Settings;
 }
 
-function Settings(props: Props) {
+function SettingsProvider({ settings, children }: Props) {
+    const play = useMemo(() => {
+        const enabled: SoundOptions = defaultsDeep(
+            settings.notification?.sounds ?? {},
+            DEFAULT_SOUNDS,
+        );
+        return (sound: Sounds) => {
+            if (enabled[sound]) {
+                playSound(sound);
+            }
+        };
+    }, [settings.notification]);
+
     return (
-        <SettingsContext.Provider value={props.settings}>
-            { props.children }
+        <SettingsContext.Provider value={settings}>
+            <SoundContext.Provider value={play}>
+                {children}
+            </SoundContext.Provider>
         </SettingsContext.Provider>
-    )
+    );
 }
 
-export default connectState(Settings, state => {
-    return {
-        settings: state.settings
-    }
-});
+export default connectState<Omit<Props, "settings">>(
+    SettingsProvider,
+    (state) => {
+        return {
+            settings: state.settings,
+        };
+    },
+);

src/context/Theme.tsx

-import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
+import { Helmet } from "react-helmet";
 import { createGlobalStyle } from "styled-components";
+
+import { createContext } from "preact";
+import { useEffect } from "preact/hooks";
+
 import { connectState } from "../redux/connector";
+
 import { Children } from "../types/Preact";
-import { createContext } from "preact";
-import { Helmet } from "react-helmet";
 
 export type Variables =
     | "accent"
@@ -16,7 +19,6 @@ export type Variables =
     | "warning"
     | "error"
     | "hover"
-    | "sidebar-active"
     | "scrollbar-thumb"
     | "scrollbar-track"
     | "primary-background"
@@ -32,20 +34,194 @@ export type Variables =
     | "status-streaming"
     | "status-invisible";
 
+// While this isn't used, it'd be good to keep this up to date as a reference or for future use
+export type HiddenVariables =
+    | "font"
+    | "ligatures"
+    | "app-height"
+    | "sidebar-active"
+    | "monospace-font";
+
+export type Fonts =
+    | "Open Sans"
+    | "Inter"
+    | "Atkinson Hyperlegible"
+    | "Roboto"
+    | "Noto Sans"
+    | "Lato"
+    | "Bree Serif"
+    | "Montserrat"
+    | "Poppins"
+    | "Raleway"
+    | "Ubuntu"
+    | "Comic Neue";
+export type MonospaceFonts =
+    | "Fira Code"
+    | "Roboto Mono"
+    | "Source Code Pro"
+    | "Space Mono"
+    | "Ubuntu Mono";
+
 export type Theme = {
     [variable in Variables]: string;
 } & {
     light?: boolean;
+    font?: Fonts;
     css?: string;
+    monospaceFont?: MonospaceFonts;
 };
 
 export interface ThemeOptions {
     preset?: string;
+    ligatures?: boolean;
     custom?: Partial<Theme>;
 }
 
+// import aaa from "@fontsource/open-sans/300.css?raw";
+// console.info(aaa);
+
+export const FONTS: Record<Fonts, { name: string; load: () => void }> = {
+    "Open Sans": {
+        name: "Open Sans",
+        load: async () => {
+            await import("@fontsource/open-sans/300.css");
+            await import("@fontsource/open-sans/400.css");
+            await import("@fontsource/open-sans/600.css");
+            await import("@fontsource/open-sans/700.css");
+            await import("@fontsource/open-sans/400-italic.css");
+        },
+    },
+    Inter: {
+        name: "Inter",
+        load: async () => {
+            await import("@fontsource/inter/300.css");
+            await import("@fontsource/inter/400.css");
+            await import("@fontsource/inter/600.css");
+            await import("@fontsource/inter/700.css");
+        },
+    },
+    "Atkinson Hyperlegible": {
+        name: "Atkinson Hyperlegible",
+        load: async () => {
+            await import("@fontsource/atkinson-hyperlegible/400.css");
+            await import("@fontsource/atkinson-hyperlegible/700.css");
+            await import("@fontsource/atkinson-hyperlegible/400-italic.css");
+        },
+    },
+    Roboto: {
+        name: "Roboto",
+        load: async () => {
+            await import("@fontsource/roboto/400.css");
+            await import("@fontsource/roboto/700.css");
+            await import("@fontsource/roboto/400-italic.css");
+        },
+    },
+    "Noto Sans": {
+        name: "Noto Sans",
+        load: async () => {
+            await import("@fontsource/noto-sans/400.css");
+            await import("@fontsource/noto-sans/700.css");
+            await import("@fontsource/noto-sans/400-italic.css");
+        },
+    },
+    "Bree Serif": {
+        name: "Bree Serif",
+        load: () => import("@fontsource/bree-serif/400.css"),
+    },
+    Lato: {
+        name: "Lato",
+        load: async () => {
+            await import("@fontsource/lato/300.css");
+            await import("@fontsource/lato/400.css");
+            await import("@fontsource/lato/700.css");
+            await import("@fontsource/lato/400-italic.css");
+        },
+    },
+    Montserrat: {
+        name: "Montserrat",
+        load: async () => {
+            await import("@fontsource/montserrat/300.css");
+            await import("@fontsource/montserrat/400.css");
+            await import("@fontsource/montserrat/600.css");
+            await import("@fontsource/montserrat/700.css");
+            await import("@fontsource/montserrat/400-italic.css");
+        },
+    },
+    Poppins: {
+        name: "Poppins",
+        load: async () => {
+            await import("@fontsource/poppins/300.css");
+            await import("@fontsource/poppins/400.css");
+            await import("@fontsource/poppins/600.css");
+            await import("@fontsource/poppins/700.css");
+            await import("@fontsource/poppins/400-italic.css");
+        },
+    },
+    Raleway: {
+        name: "Raleway",
+        load: async () => {
+            await import("@fontsource/raleway/300.css");
+            await import("@fontsource/raleway/400.css");
+            await import("@fontsource/raleway/600.css");
+            await import("@fontsource/raleway/700.css");
+            await import("@fontsource/raleway/400-italic.css");
+        },
+    },
+    Ubuntu: {
+        name: "Ubuntu",
+        load: async () => {
+            await import("@fontsource/ubuntu/300.css");
+            await import("@fontsource/ubuntu/400.css");
+            await import("@fontsource/ubuntu/500.css");
+            await import("@fontsource/ubuntu/700.css");
+            await import("@fontsource/ubuntu/400-italic.css");
+        },
+    },
+    "Comic Neue": {
+        name: "Comic Neue",
+        load: async () => {
+            await import("@fontsource/comic-neue/300.css");
+            await import("@fontsource/comic-neue/400.css");
+            await import("@fontsource/comic-neue/700.css");
+            await import("@fontsource/comic-neue/400-italic.css");
+        },
+    },
+};
+
+export const MONOSPACE_FONTS: Record<
+    MonospaceFonts,
+    { name: string; load: () => void }
+> = {
+    "Fira Code": {
+        name: "Fira Code",
+        load: () => import("@fontsource/fira-code/400.css"),
+    },
+    "Roboto Mono": {
+        name: "Roboto Mono",
+        load: () => import("@fontsource/roboto-mono/400.css"),
+    },
+    "Source Code Pro": {
+        name: "Source Code Pro",
+        load: () => import("@fontsource/source-code-pro/400.css"),
+    },
+    "Space Mono": {
+        name: "Space Mono",
+        load: () => import("@fontsource/space-mono/400.css"),
+    },
+    "Ubuntu Mono": {
+        name: "Ubuntu Mono",
+        load: () => import("@fontsource/ubuntu-mono/400.css"),
+    },
+};
+
+export const FONT_KEYS = Object.keys(FONTS).sort();
+export const MONOSPACE_FONT_KEYS = Object.keys(MONOSPACE_FONTS).sort();
+
+export const DEFAULT_FONT = "Open Sans";
+export const DEFAULT_MONO_FONT = "Fira Code";
+
 // Generated from https://gitlab.insrt.uk/revolt/community/themes
-export const PRESETS: { [key: string]: Theme } = {
+export const PRESETS: Record<string, Theme> = {
     light: {
         light: true,
         accent: "#FD6671",
@@ -56,9 +232,8 @@ export const PRESETS: { [key: string]: Theme } = {
         mention: "rgba(251, 255, 0, 0.40)",
         success: "#65E572",
         warning: "#FAA352",
-        error: "#F06464",
+        error: "#ED4245",
         hover: "rgba(0, 0, 0, 0.2)",
-        "sidebar-active": "#FD6671",
         "scrollbar-thumb": "#CA525A",
         "scrollbar-track": "transparent",
         "primary-background": "#FFFFFF",
@@ -84,9 +259,8 @@ export const PRESETS: { [key: string]: Theme } = {
         mention: "rgba(251, 255, 0, 0.06)",
         success: "#65E572",
         warning: "#FAA352",
-        error: "#F06464",
+        error: "#ED4245",
         hover: "rgba(0, 0, 0, 0.1)",
-        "sidebar-active": "#FD6671",
         "scrollbar-thumb": "#CA525A",
         "scrollbar-track": "transparent",
         "primary-background": "#242424",
@@ -104,52 +278,74 @@ export const PRESETS: { [key: string]: Theme } = {
     },
 };
 
+const keys = Object.keys(PRESETS.dark);
 const GlobalTheme = createGlobalStyle<{ theme: Theme }>`
 :root {
 	${(props) =>
         (Object.keys(props.theme) as Variables[]).map((key) => {
+            if (!keys.includes(key)) return;
             return `--${key}: ${props.theme[key]};`;
         })}
 }
 `;
 
-export const ThemeContext = createContext<Theme>({} as any);
+// Load the default default them and apply extras later
+export const ThemeContext = createContext<Theme>(PRESETS["dark"]);
 
 interface Props {
     children: Children;
     options?: ThemeOptions;
 }
 
-function Theme(props: Props) {
+function Theme({ children, options }: Props) {
     const theme: Theme = {
         ...PRESETS["dark"],
-        ...(PRESETS as any)[props.options?.preset as any],
-        ...props.options?.custom
+        ...PRESETS[options?.preset ?? ""],
+        ...options?.custom,
     };
 
+    const root = document.documentElement.style;
+    useEffect(() => {
+        const font = theme.font ?? DEFAULT_FONT;
+        root.setProperty("--font", `"${font}"`);
+        FONTS[font].load();
+    }, [root, theme.font]);
+
+    useEffect(() => {
+        const font = theme.monospaceFont ?? DEFAULT_MONO_FONT;
+        root.setProperty("--monospace-font", `"${font}"`);
+        MONOSPACE_FONTS[font].load();
+    }, [root, theme.monospaceFont]);
+
+    useEffect(() => {
+        root.setProperty("--ligatures", options?.ligatures ? "normal" : "none");
+    }, [root, options?.ligatures]);
+
+    useEffect(() => {
+        const resize = () =>
+            root.setProperty("--app-height", `${window.innerHeight}px`);
+        resize();
+
+        window.addEventListener("resize", resize);
+        return () => window.removeEventListener("resize", resize);
+    }, [root]);
+
     return (
         <ThemeContext.Provider value={theme}>
             <Helmet>
-                <meta
-                    name="theme-color"
-                    content={
-                        isTouchscreenDevice
-                            ? theme["primary-header"]
-                            : theme["tertiary-background"]
-                    }
-                />
+                <meta name="theme-color" content={theme["background"]} />
             </Helmet>
             <GlobalTheme theme={theme} />
             {theme.css && (
                 <style dangerouslySetInnerHTML={{ __html: theme.css }} />
             )}
-            {props.children}
+            {children}
         </ThemeContext.Provider>
     );
 }
 
-export default connectState<{ children: Children }>(Theme, state => {
+export default connectState<{ children: Children }>(Theme, (state) => {
     return {
-        options: state.settings.theme
+        options: state.settings.theme,
     };
 });

src/context/Voice.tsx

+import { Channel } from "revolt.js/dist/maps/Channels";
+
+import { createContext } from "preact";
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "preact/hooks";
+
+import type { ProduceType, VoiceUser } from "../lib/vortex/Types";
+import type VoiceClient from "../lib/vortex/VoiceClient";
+
+import { Children } from "../types/Preact";
+import { SoundContext } from "./Settings";
+
+export enum VoiceStatus {
+    LOADING = 0,
+    UNAVAILABLE,
+    ERRORED,
+    READY = 3,
+    CONNECTING = 4,
+    AUTHENTICATING,
+    RTC_CONNECTING,
+    CONNECTED,
+    // RECONNECTING
+}
+
+export interface VoiceOperations {
+    connect: (channel: Channel) => Promise<Channel>;
+    disconnect: () => void;
+    isProducing: (type: ProduceType) => boolean;
+    startProducing: (type: ProduceType) => Promise<void>;
+    stopProducing: (type: ProduceType) => Promise<void> | undefined;
+}
+
+export interface VoiceState {
+    roomId?: string;
+    status: VoiceStatus;
+    participants?: Readonly<Map<string, VoiceUser>>;
+}
+
+// They should be present from first render. - insert's words
+export const VoiceContext = createContext<VoiceState>(null!);
+export const VoiceOperationsContext = createContext<VoiceOperations>(null!);
+
+type Props = {
+    children: Children;
+};
+
+export default function Voice({ children }: Props) {
+    const [client, setClient] = useState<VoiceClient | undefined>(undefined);
+    const [state, setState] = useState<VoiceState>({
+        status: VoiceStatus.LOADING,
+        participants: new Map(),
+    });
+
+    const setStatus = useCallback(
+        (status: VoiceStatus, roomId?: string) => {
+            setState({
+                status,
+                roomId: roomId ?? client?.roomId,
+                participants: client?.participants ?? new Map(),
+            });
+        },
+        [client?.participants, client?.roomId],
+    );
+
+    useEffect(() => {
+        import("../lib/vortex/VoiceClient")
+            .then(({ default: VoiceClient }) => {
+                const client = new VoiceClient();
+                setClient(client);
+
+                if (!client?.supported()) {
+                    setStatus(VoiceStatus.UNAVAILABLE);
+                } else {
+                    setStatus(VoiceStatus.READY);
+                }
+            })
+            .catch((err) => {
+                console.error("Failed to load voice library!", err);
+                setStatus(VoiceStatus.UNAVAILABLE);
+            });
+    }, [setStatus]);
+
+    const isConnecting = useRef(false);
+    const operations: VoiceOperations = useMemo(() => {
+        return {
+            connect: async (channel) => {
+                if (!client?.supported()) throw new Error("RTC is unavailable");
+
+                isConnecting.current = true;
+                setStatus(VoiceStatus.CONNECTING, channel._id);
+
+                try {
+                    const call = await channel.joinCall();
+
+                    if (!isConnecting.current) {
+                        setStatus(VoiceStatus.READY);
+                        return channel;
+                    }
+
+                    // ! TODO: use configuration to check if voso is enabled
+                    // await client.connect("wss://voso.revolt.chat/ws");
+                    await client.connect(
+                        "wss://voso.revolt.chat/ws",
+                        channel._id,
+                    );
+
+                    setStatus(VoiceStatus.AUTHENTICATING);
+
+                    await client.authenticate(call.token);
+                    setStatus(VoiceStatus.RTC_CONNECTING);
+
+                    await client.initializeTransports();
+                } catch (error) {
+                    console.error(error);
+                    setStatus(VoiceStatus.READY);
+                    return channel;
+                }
+
+                setStatus(VoiceStatus.CONNECTED);
+                isConnecting.current = false;
+                return channel;
+            },
+            disconnect: () => {
+                if (!client?.supported()) throw new Error("RTC is unavailable");
+
+                // if (status <= VoiceStatus.READY) return;
+                // this will not update in this context
+
+                isConnecting.current = false;
+                client.disconnect();
+                setStatus(VoiceStatus.READY);
+            },
+            isProducing: (type: ProduceType) => {
+                switch (type) {
+                    case "audio":
+                        return client?.audioProducer !== undefined;
+                }
+            },
+            startProducing: async (type: ProduceType) => {
+                switch (type) {
+                    case "audio": {
+                        if (client?.audioProducer !== undefined)
+                            return console.log("No audio producer."); // ! TODO: let the user know
+                        if (navigator.mediaDevices === undefined)
+                            return console.log("No media devices."); // ! TODO: let the user know
+                        const mediaStream =
+                            await navigator.mediaDevices.getUserMedia({
+                                audio: true,
+                            });
+
+                        await client?.startProduce(
+                            mediaStream.getAudioTracks()[0],
+                            "audio",
+                        );
+                        return;
+                    }
+                }
+            },
+            stopProducing: (type: ProduceType) => {
+                return client?.stopProduce(type);
+            },
+        };
+    }, [client, setStatus]);
+
+    const playSound = useContext(SoundContext);
+
+    useEffect(() => {
+        if (!client?.supported()) return;
+
+        // ! TODO: message for fatal:
+        // ! get rid of these force updates
+        // ! handle it through state or smth
+
+        function stateUpdate() {
+            setStatus(state.status);
+        }
+
+        client.on("startProduce", stateUpdate);
+        client.on("stopProduce", stateUpdate);
+
+        client.on("userJoined", () => {
+            playSound("call_join");
+            stateUpdate();
+        });
+        client.on("userLeft", () => {
+            playSound("call_leave");
+            stateUpdate();
+        });
+
+        client.on("userStartProduce", stateUpdate);
+        client.on("userStopProduce", stateUpdate);
+
+        client.on("close", stateUpdate);
+
+        return () => {
+            client.removeListener("startProduce", stateUpdate);
+            client.removeListener("stopProduce", stateUpdate);
+
+            client.removeListener("userJoined", stateUpdate);
+            client.removeListener("userLeft", stateUpdate);
+            client.removeListener("userStartProduce", stateUpdate);
+            client.removeListener("userStopProduce", stateUpdate);
+            client.removeListener("close", stateUpdate);
+        };
+    }, [client, state, playSound, setStatus]);
+
+    return (
+        <VoiceContext.Provider value={state}>
+            <VoiceOperationsContext.Provider value={operations}>
+                {children}
+            </VoiceOperationsContext.Provider>
+        </VoiceContext.Provider>
+    );
+}

src/context/index.tsx

+import { BrowserRouter as Router } from "react-router-dom";
+
 import State from "../redux/State";
-import { Children } from "../types/Preact";
-import { BrowserRouter } from "react-router-dom";
 
-import Intermediate from './intermediate/Intermediate';
-import ClientContext from './revoltjs/RevoltClient';
+import { Children } from "../types/Preact";
 import Locale from "./Locale";
+import Settings from "./Settings";
 import Theme from "./Theme";
+import Voice from "./Voice";
+import Intermediate from "./intermediate/Intermediate";
+import Client from "./revoltjs/RevoltClient";
 
 export default function Context({ children }: { children: Children }) {
     return (
-        <BrowserRouter>
+        <Router>
             <State>
-                <Locale>
-                    <Intermediate>
-                        <ClientContext>
-                            <Theme>{children}</Theme>
-                        </ClientContext>
-                    </Intermediate>
-                </Locale>
+                <Theme>
+                    <Settings>
+                        <Locale>
+                            <Intermediate>
+                                <Client>
+                                    <Voice>{children}</Voice>
+                                </Client>
+                            </Intermediate>
+                        </Locale>
+                    </Settings>
+                </Theme>
             </State>
-        </BrowserRouter>
+        </Router>
     );
 }

src/context/intermediate/Intermediate.tsx

-import { Attachment, Channels, EmbedImage, Servers } from "revolt.js/dist/api/objects";
+import { Prompt } from "react-router";
+import { useHistory } from "react-router-dom";
+import type { Attachment } from "revolt-api/types/Autumn";
+import type { EmbedImage } from "revolt-api/types/January";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { Message } from "revolt.js/dist/maps/Messages";
+import { Server } from "revolt.js/dist/maps/Servers";
+import { User } from "revolt.js/dist/maps/Users";
+
+import { createContext } from "preact";
 import { useContext, useEffect, useMemo, useState } from "preact/hooks";
+
 import { internalSubscribe } from "../../lib/eventEmitter";
+
 import { Action } from "../../components/ui/Modal";
-import { useHistory } from "react-router-dom";
+
 import { Children } from "../../types/Preact";
-import { createContext } from "preact";
-import { Prompt } from "react-router";
-import Modals from './Modals';
+import Modals from "./Modals";
 
 export type Screen =
-| { id: "none" }
-
-// Modals
-| { id: "signed_out" }
-| { id: "error"; error: string }
-| { id: "clipboard"; text: string }
-| { id: "modify_account"; field: "username" | "email" | "password" }
-| { id: "_prompt"; question: Children; content?: Children; actions: Action[] }
-| ({ id: "special_prompt" } & (
-    { type: "leave_group", target: Channels.GroupChannel } |
-    { type: "close_dm", target: Channels.DirectMessageChannel } |
-    { type: "leave_server", target: Servers.Server } |
-    { type: "delete_server", target: Servers.Server } |
-    { type: "delete_channel", target: Channels.TextChannel } |
-    { type: "delete_message", target: Channels.Message } |
-    { type: "create_invite", target: Channels.TextChannel | Channels.GroupChannel } |
-    { type: "kick_member", target: Servers.Server, user: string } |
-    { type: "ban_member", target: Servers.Server, user: string }
-)) |
-({ id: "special_input" } & (
-    { type: "create_group" | "create_server" | "set_custom_status" | "add_friend" } |
-    { type: "create_channel", server: string }
-))
-| {
-      id: "_input";
-      question: Children;
-      field: Children;
-      defaultValue?: string;
-      callback: (value: string) => Promise<void>;
-  }
-| {
-      id: "onboarding";
-      callback: (
-          username: string,
-          loginAfterSuccess?: true
-      ) => Promise<void>;
-  }
-
-// Pop-overs
-| { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage; }
-| { id: "profile"; user_id: string }
-| { id: "channel_info"; channel_id: string }
-| {
-      id: "user_picker";
-      omit?: string[];
-      callback: (users: string[]) => Promise<void>;
-  };
+    | { id: "none" }
+
+    // Modals
+    | { id: "signed_out" }
+    | { id: "error"; error: string }
+    | { id: "clipboard"; text: string }
+    | {
+          id: "_prompt";
+          question: Children;
+          content?: Children;
+          actions: Action[];
+      }
+    | ({ id: "special_prompt" } & (
+          | { type: "leave_group"; target: Channel }
+          | { type: "close_dm"; target: Channel }
+          | { type: "leave_server"; target: Server }
+          | { type: "delete_server"; target: Server }
+          | { type: "delete_channel"; target: Channel }
+          | { type: "delete_message"; target: Message }
+          | {
+                type: "create_invite";
+                target: Channel;
+            }
+          | { type: "kick_member"; target: Server; user: User }
+          | { type: "ban_member"; target: Server; user: User }
+          | { type: "unfriend_user"; target: User }
+          | { type: "block_user"; target: User }
+          | { type: "create_channel"; target: Server }
+      ))
+    | ({ id: "special_input" } & (
+          | {
+                type:
+                    | "create_group"
+                    | "create_server"
+                    | "set_custom_status"
+                    | "add_friend";
+            }
+          | {
+                type: "create_role";
+                server: Server;
+                callback: (id: string) => void;
+            }
+      ))
+    | {
+          id: "_input";
+          question: Children;
+          field: Children;
+          defaultValue?: string;
+          callback: (value: string) => Promise<void>;
+      }
+    | {
+          id: "onboarding";
+          callback: (
+              username: string,
+              loginAfterSuccess?: true,
+          ) => Promise<void>;
+      }
+
+    // Pop-overs
+    | { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage }
+    | { id: "modify_account"; field: "username" | "email" | "password" }
+    | { id: "profile"; user_id: string }
+    | { id: "channel_info"; channel: Channel }
+    | { id: "pending_requests"; users: User[] }
+    | {
+          id: "user_picker";
+          omit?: string[];
+          callback: (users: string[]) => Promise<void>;
+      };
 
 export const IntermediateContext = createContext({
-    screen: { id: "none" } as Screen,
-    focusTaken: false
+    screen: { id: "none" },
+    focusTaken: false,
 });
 
-export const IntermediateActionsContext = createContext({
-    openScreen: (screen: Screen) => {},
-    writeClipboard: (text: string) => {}
+export const IntermediateActionsContext = createContext<{
+    openScreen: (screen: Screen) => void;
+    writeClipboard: (text: string) => void;
+}>({
+    openScreen: null!,
+    writeClipboard: null!,
 });
 
 interface Props {
@@ -77,7 +111,7 @@ export default function Intermediate(props: Props) {
 
     const value = {
         screen,
-        focusTaken: screen.id !== 'none'
+        focusTaken: screen.id !== "none",
     };
 
     const actions = useMemo(() => {
@@ -89,26 +123,35 @@ export default function Intermediate(props: Props) {
                 } else {
                     actions.openScreen({ id: "clipboard", text });
                 }
-            }
-        }
+            },
+        };
     }, []);
 
     useEffect(() => {
-        const openProfile = (user_id: string) => openScreen({ id: "profile", user_id });
+        const openProfile = (user_id: string) =>
+            openScreen({ id: "profile", user_id });
         const navigate = (path: string) => history.push(path);
 
         const subs = [
-            internalSubscribe("Intermediate", "open_profile", openProfile),
-            internalSubscribe("Intermediate", "navigate", navigate)
-        ]
-
-        return () => subs.map(unsub => unsub());
-    }, []);
+            internalSubscribe(
+                "Intermediate",
+                "openProfile",
+                openProfile as (...args: unknown[]) => void,
+            ),
+            internalSubscribe(
+                "Intermediate",
+                "navigate",
+                navigate as (...args: unknown[]) => void,
+            ),
+        ];
+
+        return () => subs.map((unsub) => unsub());
+    }, [history]);
 
     return (
         <IntermediateContext.Provider value={value}>
             <IntermediateActionsContext.Provider value={actions}>
-                {props.children}
+                {screen.id !== "onboarding" && props.children}
                 <Modals
                     {...value}
                     {...actions}
@@ -117,10 +160,19 @@ export default function Intermediate(props: Props) {
                     } /** By specifying a key, we reset state whenever switching screen. */
                 />
                 <Prompt
-                    when={[ 'modify_account', 'special_prompt', 'special_input', 'image_viewer', 'profile', 'channel_info', 'user_picker' ].includes(screen.id)}
+                    when={[
+                        "modify_account",
+                        "special_prompt",
+                        "special_input",
+                        "image_viewer",
+                        "profile",
+                        "channel_info",
+                        "pending_requests",
+                        "user_picker",
+                    ].includes(screen.id)}
                     message={(_, action) => {
-                        if (action === 'POP') {
-                            openScreen({ id: 'none' });
+                        if (action === "POP") {
+                            openScreen({ id: "none" });
                             setTimeout(() => history.push(history.location), 0);
 
                             return false;

src/context/intermediate/Modals.tsx

-import { Screen } from "./Intermediate";
+import { internalEmit } from "../../lib/eventEmitter";
+
+import { isModalClosing } from "../../components/ui/Modal";
 
+import { Screen } from "./Intermediate";
+import { ClipboardModal } from "./modals/Clipboard";
 import { ErrorModal } from "./modals/Error";
 import { InputModal } from "./modals/Input";
+import { OnboardingModal } from "./modals/Onboarding";
 import { PromptModal } from "./modals/Prompt";
 import { SignedOutModal } from "./modals/SignedOut";
-import { ClipboardModal } from "./modals/Clipboard";
-import { OnboardingModal } from "./modals/Onboarding";
-import { ModifyAccountModal } from "./modals/ModifyAccount";
 
 export interface Props {
     screen: Screen;
-    openScreen: (id: any) => void;
+    openScreen: (screen: Screen) => void;
 }
 
 export default function Modals({ screen, openScreen }: Props) {
-    const onClose = () => openScreen({ id: "none" });
+    const onClose = () =>
+        isModalClosing || screen.id === "onboarding"
+            ? openScreen({ id: "none" })
+            : internalEmit("Modal", "close");
 
     switch (screen.id) {
         case "_prompt":
@@ -27,8 +32,6 @@ export default function Modals({ screen, openScreen }: Props) {
             return <SignedOutModal onClose={onClose} {...screen} />;
         case "clipboard":
             return <ClipboardModal onClose={onClose} {...screen} />;
-        case "modify_account":
-            return <ModifyAccountModal onClose={onClose} {...screen} />;
         case "onboarding":
             return <OnboardingModal onClose={onClose} {...screen} />;
     }

src/context/intermediate/Popovers.tsx

-import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { useContext } from "preact/hooks";
 
-import { UserPicker } from "./popovers/UserPicker";
+import { internalEmit } from "../../lib/eventEmitter";
+
+import { isModalClosing } from "../../components/ui/Modal";
+
+import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { SpecialInputModal } from "./modals/Input";
 import { SpecialPromptModal } from "./modals/Prompt";
-import { UserProfile } from "./popovers/UserProfile";
-import { ImageViewer } from "./popovers/ImageViewer";
 import { ChannelInfo } from "./popovers/ChannelInfo";
+import { ImageViewer } from "./popovers/ImageViewer";
+import { ModifyAccountModal } from "./popovers/ModifyAccount";
+import { PendingRequests } from "./popovers/PendingRequests";
+import { UserPicker } from "./popovers/UserPicker";
+import { UserProfile } from "./popovers/UserProfile";
 
 export default function Popovers() {
     const { screen } = useContext(IntermediateContext);
     const { openScreen } = useIntermediate();
 
-    const onClose = () => openScreen({ id: "none" });
+    const onClose = () =>
+        isModalClosing
+            ? openScreen({ id: "none" })
+            : internalEmit("Modal", "close");
 
     switch (screen.id) {
         case "profile":
@@ -23,6 +32,10 @@ export default function Popovers() {
             return <ImageViewer {...screen} onClose={onClose} />;
         case "channel_info":
             return <ChannelInfo {...screen} onClose={onClose} />;
+        case "pending_requests":
+            return <PendingRequests {...screen} onClose={onClose} />;
+        case "modify_account":
+            return <ModifyAccountModal onClose={onClose} {...screen} />;
         case "special_prompt":
             return <SpecialPromptModal onClose={onClose} {...screen} />;
         case "special_input":

src/context/intermediate/modals/Clipboard.tsx

 import { Text } from "preact-i18n";
+
 import Modal from "../../../components/ui/Modal";
 
 interface Props {
@@ -16,10 +17,9 @@ export function ClipboardModal({ onClose, text }: Props) {
                 {
                     onClick: onClose,
                     confirmation: true,
-                    text: <Text id="app.special.modals.actions.close" />
-                }
-            ]}
-        >
+                    children: <Text id="app.special.modals.actions.close" />,
+                },
+            ]}>
             {location.protocol !== "https:" && (
                 <p>
                     <Text id="app.special.modals.clipboard.https" />

src/context/intermediate/modals/Error.tsx

 import { Text } from "preact-i18n";
+
 import Modal from "../../../components/ui/Modal";
 
 interface Props {
@@ -16,14 +17,13 @@ export function ErrorModal({ onClose, error }: Props) {
                 {
                     onClick: onClose,
                     confirmation: true,
-                    text: <Text id="app.special.modals.actions.ok" />
+                    children: <Text id="app.special.modals.actions.ok" />,
                 },
                 {
                     onClick: () => location.reload(),
-                    text: <Text id="app.special.modals.actions.reload" />
-                }
-            ]}
-        >
+                    children: <Text id="app.special.modals.actions.reload" />,
+                },
+            ]}>
             <Text id={`error.${error}`}>{error}</Text>
         </Modal>
     );

src/context/intermediate/modals/Input.tsx

+import { useHistory } from "react-router";
+import { Server } from "revolt.js/dist/maps/Servers";
 import { ulid } from "ulid";
+
 import { Text } from "preact-i18n";
-import { useHistory } from "react-router";
+import { useContext, useState } from "preact/hooks";
+
+import InputBox from "../../../components/ui/InputBox";
 import Modal from "../../../components/ui/Modal";
+import Overline from "../../../components/ui/Overline";
+
 import { Children } from "../../../types/Preact";
-import { takeError } from "../../revoltjs/util";
-import { useContext, useState } from "preact/hooks";
-import Overline from '../../../components/ui/Overline';
-import InputBox from '../../../components/ui/InputBox';
 import { AppContext } from "../../revoltjs/RevoltClient";
+import { takeError } from "../../revoltjs/util";
 
 interface Props {
     onClose: () => void;
@@ -22,7 +26,7 @@ export function InputModal({
     question,
     field,
     defaultValue,
-    callback
+    callback,
 }: Props) {
     const [processing, setProcessing] = useState(false);
     const [value, setValue] = useState(defaultValue ?? "");
@@ -35,39 +39,51 @@ export function InputModal({
             disabled={processing}
             actions={[
                 {
-                    text: <Text id="app.special.modals.actions.ok" />,
+                    confirmation: true,
+                    children: <Text id="app.special.modals.actions.ok" />,
                     onClick: () => {
                         setProcessing(true);
                         callback(value)
                             .then(onClose)
-                            .catch(err => {
+                            .catch((err) => {
                                 setError(takeError(err));
-                                setProcessing(false)
-                            })
-                    }
+                                setProcessing(false);
+                            });
+                    },
                 },
                 {
-                    text: <Text id="app.special.modals.actions.cancel" />,
-                    onClick: onClose
-                }
+                    children: <Text id="app.special.modals.actions.cancel" />,
+                    onClick: onClose,
+                },
             ]}
-            onClose={onClose}
-        >
-            { field ? <Overline error={error} block>
-                {field}
-            </Overline> : (error && <Overline error={error} type="error" block />) }
-            <InputBox
-                value={value}
-                onChange={e => setValue(e.currentTarget.value)}
-            />
+            onClose={onClose}>
+            <form>
+                {field ? (
+                    <Overline error={error} block>
+                        {field}
+                    </Overline>
+                ) : (
+                    error && <Overline error={error} type="error" block />
+                )}
+                <InputBox
+                    value={value}
+                    onChange={(e) => setValue(e.currentTarget.value)}
+                />
+            </form>
         </Modal>
     );
 }
 
 type SpecialProps = { onClose: () => void } & (
-    { type: "create_group" | "create_server" | "set_custom_status" | "add_friend" } |
-    { type: "create_channel", server: string }
-)
+    | {
+          type:
+              | "create_group"
+              | "create_server"
+              | "set_custom_status"
+              | "add_friend";
+      }
+    | { type: "create_role"; server: Server; callback: (id: string) => void }
+);
 
 export function SpecialInputModal(props: SpecialProps) {
     const history = useHistory();
@@ -76,83 +92,90 @@ export function SpecialInputModal(props: SpecialProps) {
     const { onClose } = props;
     switch (props.type) {
         case "create_group": {
-            return <InputModal
-                onClose={onClose}
-                question={<Text id="app.main.groups.create" />}
-                field={<Text id="app.main.groups.name" />}
-                callback={async name => {
-                    const group = await client.channels.createGroup(
-                        {
+            return (
+                <InputModal
+                    onClose={onClose}
+                    question={<Text id="app.main.groups.create" />}
+                    field={<Text id="app.main.groups.name" />}
+                    callback={async (name) => {
+                        const group = await client.channels.createGroup({
                             name,
                             nonce: ulid(),
-                            users: []
-                        }
-                    );
+                            users: [],
+                        });
 
-                    history.push(`/channel/${group._id}`);
-                }}
-            />;
+                        history.push(`/channel/${group._id}`);
+                    }}
+                />
+            );
         }
         case "create_server": {
-            return <InputModal
-                onClose={onClose}
-                question={<Text id="app.main.servers.create" />}
-                field={<Text id="app.main.servers.name" />}
-                callback={async name => {
-                    const server = await client.servers.createServer(
-                        {
+            return (
+                <InputModal
+                    onClose={onClose}
+                    question={<Text id="app.main.servers.create" />}
+                    field={<Text id="app.main.servers.name" />}
+                    callback={async (name) => {
+                        const server = await client.servers.createServer({
                             name,
-                            nonce: ulid()
-                        }
-                    );
+                            nonce: ulid(),
+                        });
 
-                    history.push(`/server/${server._id}`);
-                }}
-            />;
+                        history.push(`/server/${server._id}`);
+                    }}
+                />
+            );
         }
-        case "create_channel": {
-            return <InputModal
-                onClose={onClose}
-                question={<Text id="app.context_menu.create_channel" />}
-                field={<Text id="app.main.servers.channel_name" />}
-                callback={async name => {
-                    const channel = await client.servers.createChannel(
-                        props.server,
-                        {
-                            name,
-                            nonce: ulid()
-                        }
-                    );
-
-                    history.push(`/server/${props.server}/channel/${channel._id}`);
-                }}
-            />;
+        case "create_role": {
+            return (
+                <InputModal
+                    onClose={onClose}
+                    question={
+                        <Text id="app.settings.permissions.create_role" />
+                    }
+                    field={<Text id="app.settings.permissions.role_name" />}
+                    callback={async (name) => {
+                        const role = await props.server.createRole(name);
+                        props.callback(role.id);
+                    }}
+                />
+            );
         }
         case "set_custom_status": {
-            return <InputModal
-                onClose={onClose}
-                question={<Text id="app.context_menu.set_custom_status" />}
-                field={<Text id="app.context_menu.custom_status" />}
-                defaultValue={client.user?.status?.text}
-                callback={text =>
-                    client.users.editUser({
-                        status: {
-                            ...client.user?.status,
-                            text
-                        }
-                    })
-                }
-            />;
+            return (
+                <InputModal
+                    onClose={onClose}
+                    question={<Text id="app.context_menu.set_custom_status" />}
+                    field={<Text id="app.context_menu.custom_status" />}
+                    defaultValue={client.user?.status?.text}
+                    callback={(text) =>
+                        client.users.edit({
+                            status: {
+                                ...client.user?.status,
+                                text: text.trim().length > 0 ? text : undefined,
+                            },
+                        })
+                    }
+                />
+            );
         }
         case "add_friend": {
-            return <InputModal
-                onClose={onClose}
-                question={"Add Friend"}
-                callback={username =>
-                    client.users.addFriend(username)
-                }
-            />;
+            return (
+                <InputModal
+                    onClose={onClose}
+                    question={"Add Friend"}
+                    callback={(username) =>
+                        client
+                            .req(
+                                "PUT",
+                                `/users/${username}/friend` as "/users/id/friend",
+                            )
+                            .then(undefined)
+                    }
+                />
+            );
         }
-        default: return null;
+        default:
+            return null;
     }
 }

src/context/intermediate/modals/Onboarding.module.scss

 .onboarding {
+    height: 100vh;
     display: flex;
     align-items: center;
     flex-direction: column;
@@ -7,7 +8,9 @@
         flex: 1;
 
         &.header {
+            gap: 8px;
             padding: 3em;
+            display: flex;
             text-align: center;
 
             h1 {
@@ -23,7 +26,7 @@
                 margin: auto;
                 display: block;
                 max-height: 420px;
-                border-radius: 8px;
+                border-radius: var(--border-radius);
             }
 
             input {

src/context/intermediate/modals/Onboarding.tsx

+import { SubmitHandler, useForm } from "react-hook-form";
+
+import styles from "./Onboarding.module.scss";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
-import { useForm } from "react-hook-form";
-import styles from "./Onboarding.module.scss";
-import { takeError } from "../../revoltjs/util";
+
+import wideSVG from "../../../assets/wide.svg";
 import Button from "../../../components/ui/Button";
-import FormField from "../../../pages/login/FormField";
 import Preloader from "../../../components/ui/Preloader";
 
-import wideSVG from '../../../assets/wide.svg';
+import FormField from "../../../pages/login/FormField";
+import { takeError } from "../../revoltjs/util";
 
 interface Props {
     onClose: () => void;
     callback: (username: string, loginAfterSuccess?: true) => Promise<void>;
 }
 
+interface FormInputs {
+    username: string;
+}
+
 export function OnboardingModal({ onClose, callback }: Props) {
-    const { handleSubmit, register } = useForm();
+    const { handleSubmit, register } = useForm<FormInputs>();
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | undefined>(undefined);
 
-    async function onSubmit({ username }: { username: string }) {
+    const onSubmit: SubmitHandler<FormInputs> = ({ username }) => {
         setLoading(true);
         callback(username, true)
-            .then(onClose)
-            .catch((err: any) => {
+            .then(() => onClose())
+            .catch((err: unknown) => {
                 setError(takeError(err));
                 setLoading(false);
             });
-    }
+    };
 
     return (
         <div className={styles.onboarding}>
             <div className={styles.header}>
                 <h1>
                     <Text id="app.special.modals.onboarding.welcome" />
-                    <img src={wideSVG} />
+                    <img src={wideSVG} loading="eager" />
                 </h1>
             </div>
             <div className={styles.form}>
@@ -45,7 +51,12 @@ export function OnboardingModal({ onClose, callback }: Props) {
                         <p>
                             <Text id="app.special.modals.onboarding.pick" />
                         </p>
-                        <form onSubmit={handleSubmit(onSubmit) as any}>
+                        <form
+                            onSubmit={
+                                handleSubmit(
+                                    onSubmit,
+                                ) as JSX.GenericEventHandler<HTMLFormElement>
+                            }>
                             <div>
                                 <FormField
                                     type="username"

src/context/intermediate/modals/Prompt.module.scss

@@ -7,7 +7,7 @@
         user-select: all;
         font-size: 1.4em;
         text-align: center;
-        font-family: "Fira Mono";
+        font-family: var(--monospace-font);
     }
 }
 

src/context/intermediate/modals/Prompt.tsx

+import { observer } from "mobx-react-lite";
+import { useHistory } from "react-router-dom";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { Message as MessageI } from "revolt.js/dist/maps/Messages";
+import { Server } from "revolt.js/dist/maps/Servers";
+import { User } from "revolt.js/dist/maps/Users";
+import { ulid } from "ulid";
+
+import styles from "./Prompt.module.scss";
 import { Text } from "preact-i18n";
-import styles from './Prompt.module.scss';
-import { Children } from "../../../types/Preact";
-import { useIntermediate } from "../Intermediate";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { TextReact } from "../../../lib/i18n";
+
+import Message from "../../../components/common/messaging/Message";
+import UserIcon from "../../../components/common/user/UserIcon";
 import InputBox from "../../../components/ui/InputBox";
+import Modal, { Action } from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
+import Radio from "../../../components/ui/Radio";
+
+import { Children } from "../../../types/Preact";
 import { AppContext } from "../../revoltjs/RevoltClient";
-import { mapMessage, takeError } from "../../revoltjs/util";
-import Modal, { Action } from "../../../components/ui/Modal";
-import { Channels, Servers } from "revolt.js/dist/api/objects";
-import { useContext, useEffect, useState } from "preact/hooks";
-import UserIcon from "../../../components/common/user/UserIcon";
-import Message from "../../../components/common/messaging/Message";
+import { takeError } from "../../revoltjs/util";
+import { useIntermediate } from "../Intermediate";
 
 interface Props {
     onClose: () => void;
@@ -21,7 +33,14 @@ interface Props {
     error?: string;
 }
 
-export function PromptModal({ onClose, question, content, actions, disabled, error }: Props) {
+export function PromptModal({
+    onClose,
+    question,
+    content,
+    actions,
+    disabled,
+    error,
+}: Props) {
     return (
         <Modal
             visible={true}
@@ -29,68 +48,107 @@ export function PromptModal({ onClose, question, content, actions, disabled, err
             actions={actions}
             onClose={onClose}
             disabled={disabled}>
-            { error && <Overline error={error} type="error" /> }
-            { content }
+            {error && <Overline error={error} type="error" />}
+            {content}
         </Modal>
     );
 }
 
 type SpecialProps = { onClose: () => void } & (
-    { type: "leave_group", target: Channels.GroupChannel } |
-    { type: "close_dm", target: Channels.DirectMessageChannel } |
-    { type: "leave_server", target: Servers.Server } |
-    { type: "delete_server", target: Servers.Server } |
-    { type: "delete_channel", target: Channels.TextChannel } |
-    { type: "delete_message", target: Channels.Message } |
-    { type: "create_invite", target: Channels.TextChannel | Channels.GroupChannel } |
-    { type: "kick_member", target: Servers.Server, user: string } |
-    { type: "ban_member", target: Servers.Server, user: string }
-)
+    | { type: "leave_group"; target: Channel }
+    | { type: "close_dm"; target: Channel }
+    | { type: "leave_server"; target: Server }
+    | { type: "delete_server"; target: Server }
+    | { type: "delete_channel"; target: Channel }
+    | { type: "delete_message"; target: MessageI }
+    | {
+          type: "create_invite";
+          target: Channel;
+      }
+    | { type: "kick_member"; target: Server; user: User }
+    | { type: "ban_member"; target: Server; user: User }
+    | { type: "unfriend_user"; target: User }
+    | { type: "block_user"; target: User }
+    | { type: "create_channel"; target: Server }
+);
 
-export function SpecialPromptModal(props: SpecialProps) {
+export const SpecialPromptModal = observer((props: SpecialProps) => {
     const client = useContext(AppContext);
-    const [ processing, setProcessing ] = useState(false);
-    const [ error, setError ] = useState<undefined | string>(undefined);
+    const [processing, setProcessing] = useState(false);
+    const [error, setError] = useState<undefined | string>(undefined);
 
     const { onClose } = props;
     switch (props.type) {
-        case 'leave_group':
-        case 'close_dm':
-        case 'leave_server':
-        case 'delete_server': 
-        case 'delete_channel': {
+        case "leave_group":
+        case "close_dm":
+        case "leave_server":
+        case "delete_server":
+        case "delete_channel":
+        case "unfriend_user":
+        case "block_user": {
             const EVENTS = {
-                'close_dm':       'confirm_close_dm',
-                'delete_server':  'confirm_delete',
-                'delete_channel': 'confirm_delete',
-                'leave_group':    'confirm_leave',
-                'leave_server':   'confirm_leave'
+                close_dm: ["confirm_close_dm", "close"],
+                delete_server: ["confirm_delete", "delete"],
+                delete_channel: ["confirm_delete", "delete"],
+                leave_group: ["confirm_leave", "leave"],
+                leave_server: ["confirm_leave", "leave"],
+                unfriend_user: ["unfriend_user", "remove"],
+                block_user: ["block_user", "block"],
             };
 
-            let event = EVENTS[props.type];
-            let name = props.type === 'close_dm' ? client.users.get(client.channels.getRecipient(props.target._id))?.username : props.target.name;
+            const event = EVENTS[props.type];
+            let name;
+            switch (props.type) {
+                case "unfriend_user":
+                case "block_user":
+                    name = props.target.username;
+                    break;
+                case "close_dm":
+                    name = props.target.recipient?.username;
+                    break;
+                default:
+                    name = props.target.name;
+            }
 
             return (
                 <PromptModal
                     onClose={onClose}
-                    question={<Text
-                        id={`app.special.modals.prompt.${event}`}
-                        fields={{ name }}
-                    />}
+                    question={
+                        <Text
+                            id={`app.special.modals.prompt.${event[0]}`}
+                            fields={{ name }}
+                        />
+                    }
                     actions={[
                         {
                             confirmation: true,
                             contrast: true,
                             error: true,
-                            text: <Text id="app.special.modals.actions.delete" />,
+                            children: (
+                                <Text
+                                    id={`app.special.modals.actions.${event[1]}`}
+                                />
+                            ),
                             onClick: async () => {
                                 setProcessing(true);
 
                                 try {
-                                    if (props.type === 'leave_group' || props.type === 'close_dm' || props.type === 'delete_channel') {
-                                        await client.channels.delete(props.target._id);
-                                    } else {
-                                        await client.servers.delete(props.target._id);
+                                    switch (props.type) {
+                                        case "unfriend_user":
+                                            await props.target.removeFriend();
+                                            break;
+                                        case "block_user":
+                                            await props.target.blockUser();
+                                            break;
+                                        case "leave_group":
+                                        case "close_dm":
+                                        case "delete_channel":
+                                            props.target.delete();
+                                            break;
+                                        case "leave_server":
+                                        case "delete_server":
+                                            props.target.delete();
+                                            break;
                                     }
 
                                     onClose();
@@ -98,63 +156,89 @@ export function SpecialPromptModal(props: SpecialProps) {
                                     setError(takeError(err));
                                     setProcessing(false);
                                 }
-                            }
+                            },
+                        },
+                        {
+                            children: (
+                                <Text id="app.special.modals.actions.cancel" />
+                            ),
+                            onClick: onClose,
                         },
-                        { text: <Text id="app.special.modals.actions.cancel" />, onClick: onClose }
                     ]}
-                    content={<Text id={`app.special.modals.prompt.${event}_long`} />}
+                    content={
+                        <TextReact
+                            id={`app.special.modals.prompt.${event[0]}_long`}
+                            fields={{ name: <b>{name}</b> }}
+                        />
+                    }
                     disabled={processing}
                     error={error}
                 />
-            )
+            );
         }
-        case 'delete_message': {
+        case "delete_message": {
             return (
                 <PromptModal
                     onClose={onClose}
-                    question={<Text id={'app.context_menu.delete_message'} />}
+                    question={<Text id={"app.context_menu.delete_message"} />}
                     actions={[
                         {
                             confirmation: true,
                             contrast: true,
                             error: true,
-                            text: <Text id="app.special.modals.actions.delete" />,
+                            children: (
+                                <Text id="app.special.modals.actions.delete" />
+                            ),
                             onClick: async () => {
                                 setProcessing(true);
 
                                 try {
-                                    await client.channels.deleteMessage(props.target.channel, props.target._id);
-
+                                    props.target.delete();
                                     onClose();
                                 } catch (err) {
                                     setError(takeError(err));
                                     setProcessing(false);
                                 }
-                            }
+                            },
+                        },
+                        {
+                            children: (
+                                <Text id="app.special.modals.actions.cancel" />
+                            ),
+                            onClick: onClose,
+                            plain: true,
                         },
-                        { text: <Text id="app.special.modals.actions.cancel" />, onClick: onClose }
                     ]}
-                    content={<>
-                        <Text id={`app.special.modals.prompt.confirm_delete_message_long`} />
-                        <Message message={mapMessage(props.target)} head={true} contrast />
-                    </>}
+                    content={
+                        <>
+                            <Text
+                                id={`app.special.modals.prompt.confirm_delete_message_long`}
+                            />
+                            <Message
+                                message={props.target}
+                                head={true}
+                                contrast
+                            />
+                        </>
+                    }
                     disabled={processing}
                     error={error}
                 />
-            )
+            );
         }
         case "create_invite": {
-            const [ code, setCode ] = useState('abcdef');
+            const [code, setCode] = useState("abcdef");
             const { writeClipboard } = useIntermediate();
 
             useEffect(() => {
                 setProcessing(true);
 
-                client.channels.createInvite(props.target._id)
-                    .then(code => setCode(code))
-                    .catch(err => setError(takeError(err)))
+                props.target
+                    .createInvite()
+                    .then((code) => setCode(code))
+                    .catch((err) => setError(takeError(err)))
                     .finally(() => setProcessing(false));
-            }, []);
+            }, [props.target]);
 
             return (
                 <PromptModal
@@ -162,69 +246,89 @@ export function SpecialPromptModal(props: SpecialProps) {
                     question={<Text id={`app.context_menu.create_invite`} />}
                     actions={[
                         {
-                            text: <Text id="app.special.modals.actions.ok" />,
+                            children: (
+                                <Text id="app.special.modals.actions.ok" />
+                            ),
                             confirmation: true,
-                            onClick: onClose
+                            onClick: onClose,
                         },
                         {
-                            text: <Text id="app.context_menu.copy_link" />,
-                            onClick: () => writeClipboard(`${window.location.protocol}//${window.location.host}/invite/${code}`)
-                        }
+                            children: <Text id="app.context_menu.copy_link" />,
+                            onClick: () =>
+                                writeClipboard(
+                                    `${window.location.protocol}//${window.location.host}/invite/${code}`,
+                                ),
+                        },
                     ]}
                     content={
-                        processing ?
+                        processing ? (
                             <Text id="app.special.modals.prompt.create_invite_generate" />
-                          : <div className={styles.invite}>
-                              <Text id="app.special.modals.prompt.create_invite_created" />
-                              <code>{code}</code>
+                        ) : (
+                            <div className={styles.invite}>
+                                <Text id="app.special.modals.prompt.create_invite_created" />
+                                <code>{code}</code>
                             </div>
+                        )
                     }
                     disabled={processing}
                     error={error}
                 />
-            )
+            );
         }
         case "kick_member": {
-            const user = client.users.get(props.user);
-
             return (
                 <PromptModal
                     onClose={onClose}
                     question={<Text id={`app.context_menu.kick_member`} />}
                     actions={[
                         {
-                            text: <Text id="app.special.modals.actions.kick" />,
+                            children: (
+                                <Text id="app.special.modals.actions.kick" />
+                            ),
                             contrast: true,
                             error: true,
                             confirmation: true,
                             onClick: async () => {
                                 setProcessing(true);
-                                
+
                                 try {
-                                    await client.servers.members.kickMember(props.target._id, props.user);
+                                    client.members
+                                        .getKey({
+                                            server: props.target._id,
+                                            user: props.user._id,
+                                        })
+                                        ?.kick();
+
                                     onClose();
                                 } catch (err) {
                                     setError(takeError(err));
                                     setProcessing(false);
                                 }
-                            }
+                            },
+                        },
+                        {
+                            children: (
+                                <Text id="app.special.modals.actions.cancel" />
+                            ),
+                            onClick: onClose,
                         },
-                        { text: <Text id="app.special.modals.actions.cancel" />, onClick: onClose }
                     ]}
-                    content={<div className={styles.column}>
-                        <UserIcon target={user} size={64} />
-                        <Text
-                            id="app.special.modals.prompt.confirm_kick"
-                            fields={{ name: user?.username }} />
-                    </div>}
+                    content={
+                        <div className={styles.column}>
+                            <UserIcon target={props.user} size={64} />
+                            <Text
+                                id="app.special.modals.prompt.confirm_kick"
+                                fields={{ name: props.user?.username }}
+                            />
+                        </div>
+                    }
                     disabled={processing}
                     error={error}
                 />
-            )
+            );
         }
         case "ban_member": {
-            const [ reason, setReason ] = useState<string | undefined>(undefined);
-            const user = client.users.get(props.user);
+            const [reason, setReason] = useState<string | undefined>(undefined);
 
             return (
                 <PromptModal
@@ -232,37 +336,130 @@ export function SpecialPromptModal(props: SpecialProps) {
                     question={<Text id={`app.context_menu.ban_member`} />}
                     actions={[
                         {
-                            text: <Text id="app.special.modals.actions.ban" />,
+                            children: (
+                                <Text id="app.special.modals.actions.ban" />
+                            ),
                             contrast: true,
                             error: true,
                             confirmation: true,
                             onClick: async () => {
                                 setProcessing(true);
-                                
+
                                 try {
-                                    await client.servers.banUser(props.target._id, props.user, { reason });
+                                    await props.target.banUser(props.user._id, {
+                                        reason,
+                                    });
                                     onClose();
                                 } catch (err) {
                                     setError(takeError(err));
                                     setProcessing(false);
                                 }
-                            }
+                            },
+                        },
+                        {
+                            children: (
+                                <Text id="app.special.modals.actions.cancel" />
+                            ),
+                            onClick: onClose,
                         },
-                        { text: <Text id="app.special.modals.actions.cancel" />, onClick: onClose }
                     ]}
-                    content={<div className={styles.column}>
-                        <UserIcon target={user} size={64} />
-                        <Text
-                            id="app.special.modals.prompt.confirm_ban"
-                            fields={{ name: user?.username }} />
-                        <Overline><Text id="app.special.modals.prompt.confirm_ban_reason" /></Overline>
-                        <InputBox value={reason ?? ''} onChange={e => setReason(e.currentTarget.value)} />
-                    </div>}
+                    content={
+                        <div className={styles.column}>
+                            <UserIcon target={props.user} size={64} />
+                            <Text
+                                id="app.special.modals.prompt.confirm_ban"
+                                fields={{ name: props.user?.username }}
+                            />
+                            <Overline>
+                                <Text id="app.special.modals.prompt.confirm_ban_reason" />
+                            </Overline>
+                            <InputBox
+                                value={reason ?? ""}
+                                onChange={(e) =>
+                                    setReason(e.currentTarget.value)
+                                }
+                            />
+                        </div>
+                    }
+                    disabled={processing}
+                    error={error}
+                />
+            );
+        }
+        case "create_channel": {
+            const [name, setName] = useState("");
+            const [type, setType] = useState<"Text" | "Voice">("Text");
+            const history = useHistory();
+
+            return (
+                <PromptModal
+                    onClose={onClose}
+                    question={<Text id="app.context_menu.create_channel" />}
+                    actions={[
+                        {
+                            confirmation: true,
+                            contrast: true,
+                            children: (
+                                <Text id="app.special.modals.actions.create" />
+                            ),
+                            onClick: async () => {
+                                setProcessing(true);
+
+                                try {
+                                    const channel =
+                                        await props.target.createChannel({
+                                            type,
+                                            name,
+                                            nonce: ulid(),
+                                        });
+
+                                    history.push(
+                                        `/server/${props.target._id}/channel/${channel._id}`,
+                                    );
+                                    onClose();
+                                } catch (err) {
+                                    setError(takeError(err));
+                                    setProcessing(false);
+                                }
+                            },
+                        },
+                        {
+                            children: (
+                                <Text id="app.special.modals.actions.cancel" />
+                            ),
+                            onClick: onClose,
+                        },
+                    ]}
+                    content={
+                        <>
+                            <Overline block type="subtle">
+                                <Text id="app.main.servers.channel_type" />
+                            </Overline>
+                            <Radio
+                                checked={type === "Text"}
+                                onSelect={() => setType("Text")}>
+                                <Text id="app.main.servers.text_channel" />
+                            </Radio>
+                            <Radio
+                                checked={type === "Voice"}
+                                onSelect={() => setType("Voice")}>
+                                <Text id="app.main.servers.voice_channel" />
+                            </Radio>
+                            <Overline block type="subtle">
+                                <Text id="app.main.servers.channel_name" />
+                            </Overline>
+                            <InputBox
+                                value={name}
+                                onChange={(e) => setName(e.currentTarget.value)}
+                            />
+                        </>
+                    }
                     disabled={processing}
                     error={error}
                 />
-            )
+            );
         }
-        default: return null;
+        default:
+            return null;
     }
-}
+});

src/context/intermediate/modals/SignedOut.tsx

 import { Text } from "preact-i18n";
+
 import Modal from "../../../components/ui/Modal";
 
 interface Props {
@@ -15,8 +16,8 @@ export function SignedOutModal({ onClose }: Props) {
                 {
                     onClick: onClose,
                     confirmation: true,
-                    text: <Text id="app.special.modals.actions.ok" />
-                }
+                    children: <Text id="app.special.modals.actions.ok" />,
+                },
             ]}
         />
     );