src/components/ui/Details.tsx

+import styled, { css } from "styled-components";
+
+export default styled.details<{ sticky?: boolean; large?: boolean }>`
+    summary {
+        ${(props) =>
+            props.sticky &&
+            css`
+                top: -1px;
+                z-index: 10;
+                position: sticky;
+            `}
+
+        ${(props) =>
+            props.large &&
+            css`
+                /*padding: 5px 0;*/
+                background: var(--primary-background);
+                color: var(--secondary-foreground);
+
+                .padding {
+                    /*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/
+                    display: flex;
+                    align-items: center;
+                    padding: 5px 0;
+                    margin: 0.8em 0px 0.4em;
+                    cursor: pointer;
+                }
+            `}
+
+        outline: none;
+        cursor: pointer;
+        list-style: none;
+        user-select: none;
+        align-items: center;
+        transition: 0.2s opacity;
+
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+
+        &::marker,
+        &::-webkit-details-marker {
+            display: none;
+        }
+
+        .title {
+            flex-grow: 1;
+            margin-top: 1px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .padding {
+            display: flex;
+            align-items: center;
+
+            > svg {
+                flex-shrink: 0;
+                margin-inline-end: 4px;
+                transition: 0.2s ease transform;
+            }
+        }
+    }
+
+    &:not([open]) {
+        summary {
+            opacity: 0.7;
+        }
+
+        summary svg {
+            transform: rotateZ(-90deg);
+        }
+    }
+`;

src/components/ui/Header.tsx

+import styled, { css } from "styled-components";
+
+interface Props {
+    borders?: boolean;
+    background?: boolean;
+    placement: "primary" | "secondary";
+}
+
+export default styled.div<Props>`
+    gap: 6px;
+    height: 48px;
+    flex: 0 auto;
+    display: flex;
+    flex-shrink: 0;
+    padding: 0 16px;
+    font-weight: 600;
+    user-select: none;
+    align-items: center;
+
+    background-size: cover !important;
+    background-position: center !important;
+    background-color: var(--primary-header);
+
+    svg {
+        flex-shrink: 0;
+    }
+
+    .menu {
+        margin-inline-end: 8px;
+        color: var(--secondary-foreground);
+    }
+
+    /*@media only screen and (max-width: 768px) {
+        padding: 0 12px;
+    }*/
+
+    @media (pointer: coarse) {
+        height: 56px;
+    }
+
+    ${(props) =>
+        props.background &&
+        css`
+            height: 120px !important;
+            align-items: flex-end;
+
+            text-shadow: 0px 0px 1px black;
+        `}
+
+    ${(props) =>
+        props.placement === "secondary" &&
+        css`
+            background-color: var(--secondary-header);
+            padding: 14px;
+        `}
+
+    ${(props) =>
+        props.borders &&
+        css`
+            border-start-start-radius: 8px;
+        `}
+`;

src/components/ui/IconButton.tsx

+import styled, { css } from "styled-components";
+
+interface Props {
+    rotate?: string;
+    type?: "default" | "circle";
+}
+
+const normal = `var(--secondary-foreground)`;
+const hover = `var(--foreground)`;
+
+export default styled.div<Props>`
+    z-index: 1;
+    display: grid;
+    cursor: pointer;
+    place-items: center;
+    transition: 0.1s ease background-color;
+
+    fill: ${normal};
+    color: ${normal};
+    /*stroke: ${normal};*/
+
+    a {
+        color: ${normal};
+    }
+
+    svg {
+        transition: 0.2s ease transform;
+    }
+
+    &:hover {
+        fill: ${hover};
+        color: ${hover};
+        /*stroke: ${hover};*/
+
+        a {
+            color: ${hover};
+        }
+    }
+
+    ${(props) =>
+        props.type === "circle" &&
+        css`
+            padding: 4px;
+            border-radius: 50%;
+            background-color: var(--secondary-header);
+
+            &:hover {
+                background-color: var(--primary-header);
+            }
+        `}
+
+    ${(props) =>
+        props.rotate &&
+        css`
+            svg {
+                transform: rotateZ(${props.rotate});
+            }
+        `}
+`;

src/components/ui/InputBox.tsx

@@ -2,32 +2,40 @@ import styled, { css } from "styled-components";
 
 interface Props {
     readonly contrast?: boolean;
-};
+}
 
-export const InputBox = styled.input<Props>`
+export default styled.input<Props>`
     z-index: 1;
+    font-size: 1rem;
     padding: 8px 16px;
-    border-radius: 6px;
+    border-radius: var(--border-radius);
+
+    font-family: inherit;
     color: var(--foreground);
-    border: 2px solid transparent;
     background: var(--primary-background);
     transition: 0.2s ease background-color;
-    transition: border-color .2s ease-in-out;
+
+    border: none;
+    outline: 2px solid transparent;
+    transition: outline-color 0.2s ease-in-out;
+    transition: box-shadow 0.2s ease-in-out;
 
     &:hover {
         background: var(--secondary-background);
     }
 
     &:focus {
-        border: 2px solid var(--accent);
+        box-shadow: 0 0 0 1.5pt var(--accent);
     }
 
-    ${ props => props.contrast && css`
-        color: var(--secondary-foreground);
-        background: var(--secondary-background);
+    ${(props) =>
+        props.contrast &&
+        css`
+            color: var(--secondary-foreground);
+            background: var(--secondary-background);
 
-        &:hover {
-            background: var(--hover);
-        }
-    ` }
+            &:hover {
+                background: var(--hover);
+            }
+        `}
 `;

src/components/ui/LineDivider.tsx

+import styled from "styled-components";
+
+export default styled.div`
+    height: 0px;
+    opacity: 0.6;
+    flex-shrink: 0;
+    margin: 8px 10px;
+    border-top: 1px solid var(--tertiary-foreground);
+`;

src/components/ui/Masks.tsx

+// This file must be imported and used at least once for SVG masks.
+
+export default function Masks() {
+    return (
+        <svg width={0} height={0} style={{ position: "fixed" }}>
+            <defs>
+                <mask id="server">
+                    <rect x="0" y="0" width="32" height="32" fill="white" />
+                    <circle cx="27" cy="5" r="7" fill={"black"} />
+                </mask>
+                <mask id="user">
+                    <rect x="0" y="0" width="32" height="32" fill="white" />
+                    <circle cx="27" cy="27" r="7" fill={"black"} />
+                </mask>
+                <mask id="session">
+                    <rect x="0" y="0" width="32" height="32" fill="white" />
+                    <circle cx="26" cy="28" r="10" fill={"black"} />
+                </mask>
+                <mask id="overlap">
+                    <rect x="0" y="0" width="32" height="32" fill="white" />
+                    <circle cx="32" cy="16" r="18" fill={"black"} />
+                </mask>
+            </defs>
+        </svg>
+    );
+}

src/components/ui/Modal.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
+import styled, { css, keyframes } from "styled-components";
+
+import { createPortal, useCallback, useEffect, useState } from "preact/compat";
+
+import { internalSubscribe } from "../../lib/eventEmitter";
+
+import { Children } from "../../types/Preact";
+import Button, { ButtonProps } from "./Button";
+
+const open = keyframes`
+    0% {opacity: 0;}
+    70% {opacity: 0;}
+    100% {opacity: 1;}
+`;
+
+const close = keyframes`
+    0% {opacity: 1;}
+    70% {opacity: 0;}
+    100% {opacity: 0;}
+`;
+
+const zoomIn = keyframes`
+    0% {transform: scale(0.5);}
+    98% {transform: scale(1.01);}
+    100% {transform: scale(1);}
+`;
+
+const zoomOut = keyframes`
+    0% {transform: scale(1);}
+    100% {transform: scale(0.5);}
+`;
+
+const ModalBase = styled.div`
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    position: fixed;
+    max-height: 100%;
+    user-select: none;
+
+    animation-name: ${open};
+    animation-duration: 0.2s;
+
+    display: grid;
+    overflow-y: auto;
+    place-items: center;
+
+    color: var(--foreground);
+    background: rgba(0, 0, 0, 0.8);
+
+    &.closing {
+        animation-name: ${close};
+    }
+
+    &.closing > div {
+        animation-name: ${zoomOut};
+    }
+`;
+
+const ModalContainer = styled.div`
+    overflow: hidden;
+    max-width: calc(100vw - 20px);
+    border-radius: var(--border-radius);
+
+    animation-name: ${zoomIn};
+    animation-duration: 0.25s;
+    animation-timing-function: cubic-bezier(0.3, 0.3, 0.18, 1.1);
+`;
+
+const ModalContent = styled.div<
+    { [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
+>`
+    text-overflow: ellipsis;
+    border-radius: var(--border-radius);
+
+    h3 {
+        margin-top: 0;
+    }
+
+    form {
+        display: flex;
+        flex-direction: column;
+    }
+
+    ${(props) =>
+        !props.noBackground &&
+        css`
+            background: var(--secondary-header);
+        `}
+
+    ${(props) =>
+        props.padding &&
+        css`
+            padding: 1.5em;
+        `}
+
+    ${(props) =>
+        props.attachment &&
+        css`
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
+        `}
+
+    ${(props) =>
+        props.border &&
+        css`
+            border-radius: var(--border-radius);
+            border: 2px solid var(--secondary-background);
+        `}
+`;
+
+const ModalActions = styled.div`
+    gap: 8px;
+    display: flex;
+    flex-direction: row-reverse;
+
+    padding: 1em 1.5em;
+    border-radius: 0 0 8px 8px;
+    background: var(--secondary-background);
+`;
+
+export type Action = Omit<ButtonProps, "onClick"> & {
+    confirmation?: boolean;
+    onClick: () => void;
+};
+
+interface Props {
+    children?: Children;
+    title?: Children;
+
+    disallowClosing?: boolean;
+    noBackground?: boolean;
+    dontModal?: boolean;
+    padding?: boolean;
+
+    onClose?: () => void;
+    actions?: Action[];
+    disabled?: boolean;
+    border?: boolean;
+    visible: boolean;
+}
+
+export let isModalClosing = false;
+
+export default function Modal(props: Props) {
+    if (!props.visible) return null;
+
+    const content = (
+        <ModalContent
+            attachment={!!props.actions}
+            noBackground={props.noBackground}
+            border={props.border}
+            padding={props.padding ?? !props.dontModal}>
+            {props.title && <h3>{props.title}</h3>}
+            {props.children}
+        </ModalContent>
+    );
+
+    if (props.dontModal) {
+        return content;
+    }
+
+    const [animateClose, setAnimateClose] = useState(false);
+    isModalClosing = animateClose;
+    const onClose = useCallback(() => {
+        setAnimateClose(true);
+        setTimeout(() => props.onClose?.(), 2e2);
+    }, [setAnimateClose, props]);
+
+    useEffect(() => internalSubscribe("Modal", "close", onClose), [onClose]);
+
+    useEffect(() => {
+        if (props.disallowClosing) return;
+
+        function keyDown(e: KeyboardEvent) {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        }
+
+        document.body.addEventListener("keydown", keyDown);
+        return () => document.body.removeEventListener("keydown", keyDown);
+    }, [props.disallowClosing, onClose]);
+
+    const confirmationAction = props.actions?.find(
+        (action) => action.confirmation,
+    );
+
+    useEffect(() => {
+        if (!confirmationAction) return;
+
+        // ! TODO: this may be done better if we
+        // ! can focus the button although that
+        // ! doesn't seem to work...
+        function keyDown(e: KeyboardEvent) {
+            if (e.key === "Enter") {
+                confirmationAction!.onClick();
+            }
+        }
+
+        document.body.addEventListener("keydown", keyDown);
+        return () => document.body.removeEventListener("keydown", keyDown);
+    }, [confirmationAction]);
+
+    return createPortal(
+        <ModalBase
+            className={animateClose ? "closing" : undefined}
+            onClick={(!props.disallowClosing && props.onClose) || undefined}>
+            <ModalContainer onClick={(e) => (e.cancelBubble = true)}>
+                {content}
+                {props.actions && (
+                    <ModalActions>
+                        {props.actions.map((x, index) => (
+                            <Button
+                                key={index}
+                                {...x}
+                                disabled={props.disabled}
+                            />
+                        ))}
+                    </ModalActions>
+                )}
+            </ModalContainer>
+        </ModalBase>,
+        document.body,
+    );
+}

src/components/ui/Overline.tsx

+import styled, { css } from "styled-components";
+
+import { Text } from "preact-i18n";
+
+import { Children } from "../../types/Preact";
+
+type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
+    error?: string;
+    block?: boolean;
+    spaced?: boolean;
+    noMargin?: boolean;
+    children?: Children;
+    type?: "default" | "subtle" | "error";
+};
+
+const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
+    display: inline;
+
+    ${(props) =>
+        !props.noMargin &&
+        css`
+            margin: 0.4em 0;
+        `}
+
+    ${(props) =>
+        props.spaced &&
+        css`
+            margin-top: 0.8em;
+        `}
+
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--foreground);
+    text-transform: uppercase;
+
+    ${(props) =>
+        props.type === "subtle" &&
+        css`
+            font-size: 12px;
+            color: var(--secondary-foreground);
+        `}
+
+    ${(props) =>
+        props.type === "error" &&
+        css`
+            font-size: 12px;
+            font-weight: 400;
+            color: var(--error);
+        `}
+
+    ${(props) =>
+        props.block &&
+        css`
+            display: block;
+        `}
+`;
+
+export default function Overline(props: Props) {
+    return (
+        <OverlineBase {...props}>
+            {props.children}
+            {props.children && props.error && <> &middot; </>}
+            {props.error && (
+                <Overline type="error">
+                    <Text id={`error.${props.error}`}>{props.error}</Text>
+                </Overline>
+            )}
+        </OverlineBase>
+    );
+}

src/components/ui/Preloader.tsx

+import styled, { keyframes } from "styled-components";
+
+const skSpinner = keyframes`
+    0%, 80%, 100% { 
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    }
+    40% { 
+        -webkit-transform: scale(1.0);
+        transform: scale(1.0);
+    }
+`;
+
+const prRing = keyframes`
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+`;
+
+const PreloaderBase = styled.div`
+    width: 100%;
+    height: 100%;
+
+    display: grid;
+    place-items: center;
+
+    .spinner {
+        width: 58px;
+        display: flex;
+        text-align: center;
+        margin: 100px auto 0;
+        justify-content: space-between;
+    }
+
+    .spinner > div {
+        width: 14px;
+        height: 14px;
+        background-color: var(--tertiary-foreground);
+
+        border-radius: 100%;
+        display: inline-block;
+        animation: ${skSpinner} 1.4s infinite ease-in-out both;
+    }
+
+    .spinner div:nth-child(1) {
+        animation-delay: -0.32s;
+    }
+
+    .spinner div:nth-child(2) {
+        animation-delay: -0.16s;
+    }
+
+    .ring {
+        display: inline-block;
+        position: relative;
+        width: 48px;
+        height: 52px;
+    }
+
+    .ring div {
+        width: 32px;
+        margin: 8px;
+        height: 32px;
+        display: block;
+        position: absolute;
+        border-radius: 50%;
+        box-sizing: border-box;
+        border: 2px solid #fff;
+        animation: ${prRing} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        border-color: #fff transparent transparent transparent;
+    }
+
+    .ring div:nth-child(1) {
+        animation-delay: -0.45s;
+    }
+
+    .ring div:nth-child(2) {
+        animation-delay: -0.3s;
+    }
+
+    .ring div:nth-child(3) {
+        animation-delay: -0.15s;
+    }
+`;
+
+interface Props {
+    type: "spinner" | "ring";
+}
+
+export default function Preloader({ type }: Props) {
+    return (
+        <PreloaderBase>
+            <div class={type}>
+                <div />
+                <div />
+                <div />
+            </div>
+        </PreloaderBase>
+    );
+}

src/components/ui/Radio.tsx

+import { Circle } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
+
+import { Children } from "../../types/Preact";
+
+interface Props {
+    children: Children;
+    description?: Children;
+
+    checked: boolean;
+    disabled?: boolean;
+    onSelect: () => void;
+}
+
+interface BaseProps {
+    selected: boolean;
+}
+
+const RadioBase = styled.label<BaseProps>`
+    gap: 4px;
+    z-index: 1;
+    padding: 4px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+
+    font-size: 1rem;
+    font-weight: 600;
+    user-select: none;
+    transition: 0.2s ease all;
+    border-radius: var(--border-radius);
+
+    &:hover {
+        background: var(--hover);
+    }
+
+    > input {
+        display: none;
+    }
+
+    > div {
+        margin: 4px;
+        width: 24px;
+        height: 24px;
+        display: grid;
+        border-radius: 50%;
+        place-items: center;
+        background: var(--foreground);
+
+        svg {
+            color: var(--foreground);
+            /*stroke-width: 2;*/
+        }
+    }
+
+    ${(props) =>
+        props.selected &&
+        css`
+            color: white;
+            cursor: default;
+            background: var(--accent);
+
+            > div {
+                background: white;
+            }
+
+            > div svg {
+                color: var(--accent);
+            }
+
+            &:hover {
+                background: var(--accent);
+            }
+        `}
+`;
+
+const RadioDescription = styled.span<BaseProps>`
+    font-size: 0.8em;
+    font-weight: 400;
+    color: var(--secondary-foreground);
+
+    ${(props) =>
+        props.selected &&
+        css`
+            color: white;
+        `}
+`;
+
+export default function Radio(props: Props) {
+    return (
+        <RadioBase
+            selected={props.checked}
+            disabled={props.disabled}
+            onClick={() =>
+                !props.disabled && props.onSelect && props.onSelect()
+            }>
+            <div>
+                <Circle size={12} />
+            </div>
+            <input type="radio" checked={props.checked} />
+            <span>
+                <span>{props.children}</span>
+                {props.description && (
+                    <RadioDescription selected={props.checked}>
+                        {props.description}
+                    </RadioDescription>
+                )}
+            </span>
+        </RadioBase>
+    );
+}

src/components/ui/TextArea.module.scss

+.container {
+    font-size: .875rem;
+    line-height: 20px;
+    position: relative;
+}
+
+.textarea {
+    width: 100%;
+    white-space: pre-wrap;
+
+    textarea::placeholder {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.hide {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+.ghost {
+    width: 100%;
+    white-space: pre-wrap;
+    
+    top: 0;
+    position: absolute;
+    visibility: hidden;
+}

src/components/ui/TextArea.tsx

+import styled, { css } from "styled-components";
+
+export interface TextAreaProps {
+    code?: boolean;
+    padding?: string;
+    lineHeight?: string;
+    hideBorder?: boolean;
+}
+
+export const TEXT_AREA_BORDER_WIDTH = 2;
+export const DEFAULT_TEXT_AREA_PADDING = 16;
+export const DEFAULT_LINE_HEIGHT = 20;
+
+export default styled.textarea<TextAreaProps>`
+    width: 100%;
+    resize: none;
+    display: block;
+    color: var(--foreground);
+    background: var(--secondary-background);
+    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: var(--input-border-width) solid var(--accent);
+            `}
+    }
+
+    ${(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 { InfoCircle } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
+
+import { Children } from "../../types/Preact";
+
+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;
+    background: var(--primary-header);
+    border-radius: var(--border-radius);
+    border: 2px solid var(--secondary-header);
+
+    a {
+        cursor: pointer;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    svg {
+        flex-shrink: 0;
+        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: Props & { children: Children; hideSeparator?: boolean },
+) {
+    const { children, hideSeparator, ...tipProps } = props;
+    return (
+        <>
+            {!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 definition from "../../external/lang/en.json";
+
+export const dayjs = dayJS;
+
+dayjs.extend(calendar);
+dayjs.extend(format);
+dayjs.extend(update);
+
+export enum Language {
+    ENGLISH = "en",
+
+    ARABIC = "ar",
+    AZERBAIJANI = "az",
+    CZECH = "cs",
+    GERMAN = "de",
+    GREEK = "el",
+    SPANISH = "es",
+    FINNISH = "fi",
+    FRENCH = "fr",
+    HINDI = "hi",
+    CROATIAN = "hr",
+    HUNGARIAN = "hu",
+    INDONESIAN = "id",
+    ITALIAN = "it",
+    LITHUANIAN = "lt",
+    MACEDONIAN = "mk",
+    DUTCH = "nl",
+    POLISH = "pl",
+    PORTUGUESE_BRAZIL = "pt_BR",
+    ROMANIAN = "ro",
+    RUSSIAN = "ru",
+    SERBIAN = "sr",
+    SWEDISH = "sv",
+    TOKIPONA = "tokipona",
+    TURKISH = "tr",
+    UKRANIAN = "uk",
+    CHINESE_SIMPLIFIED = "zh_Hans",
+
+    OWO = "owo",
+    PIRATE = "pr",
+    BOTTOM = "bottom",
+    PIGLATIN = "piglatin",
+}
+
+export interface LanguageEntry {
+    display: string;
+    emoji: string;
+    i18n: string;
+    dayjs?: string;
+    rtl?: boolean;
+    cat?: "const" | "alt";
+}
+
+export const Languages: { [key in Language]: LanguageEntry } = {
+    en: {
+        display: "English (Traditional)",
+        emoji: "🇬🇧",
+        i18n: "en",
+        dayjs: "en-gb",
+    },
+
+    ar: { display: "عربي", emoji: "🇸🇦", i18n: "ar", rtl: true },
+    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" },
+    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" },
+    pl: { display: "Polski", emoji: "🇵🇱", i18n: "pl" },
+    pt_BR: {
+        display: "Português (do Brasil)",
+        emoji: "🇧🇷",
+        i18n: "pt_BR",
+        dayjs: "pt-br",
+    },
+    ro: { display: "Română", emoji: "🇷🇴", i18n: "ro" },
+    ru: { display: "Русский", emoji: "🇷🇺", i18n: "ru" },
+    sr: { display: "Српски", emoji: "🇷🇸", i18n: "sr" },
+    sv: { display: "Svenska", emoji: "🇸🇪", i18n: "sv" },
+    tr: { display: "Türkçe", emoji: "🇹🇷", i18n: "tr" },
+    uk: { display: "Українська", emoji: "🇺🇦", i18n: "uk" },
+    zh_Hans: {
+        display: "中文 (简体)",
+        emoji: "🇨🇳",
+        i18n: "zh_Hans",
+        dayjs: "zh",
+    },
+
+    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",
+        cat: "alt",
+    },
+};
+
+interface Props {
+    children: JSX.Element | JSX.Element[];
+    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<Dictionary>(
+        definition as Dictionary,
+    );
+
+    // 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;
+            }
+
+            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]);
+
+    return <IntlProvider definition={defns}>{children}</IntlProvider>;
+}
+
+export default connectState<Omit<Props, "locale">>(
+    Locale,
+    (state) => {
+        return {
+            locale: state.locale,
+        };
+    },
+    true,
+);

src/context/Settings.tsx

+// This code is more or less redundant, but settings has so little state
+// updates that I can't be asked to pass everything through props each
+// time when I can just use the Context API.
+//
+// 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 { 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";
+
+export const SettingsContext = createContext<Settings>({});
+export const SoundContext = createContext<(sound: Sounds) => void>(null!);
+
+interface Props {
+    children?: Children;
+    settings: Settings;
+}
+
+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={settings}>
+            <SoundContext.Provider value={play}>
+                {children}
+            </SoundContext.Provider>
+        </SettingsContext.Provider>
+    );
+}
+
+export default connectState<Omit<Props, "settings">>(
+    SettingsProvider,
+    (state) => {
+        return {
+            settings: state.settings,
+        };
+    },
+);

src/context/Theme.tsx

+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";
+
+export type Variables =
+    | "accent"
+    | "background"
+    | "foreground"
+    | "block"
+    | "message-box"
+    | "mention"
+    | "success"
+    | "warning"
+    | "error"
+    | "hover"
+    | "scrollbar-thumb"
+    | "scrollbar-track"
+    | "primary-background"
+    | "primary-header"
+    | "secondary-background"
+    | "secondary-foreground"
+    | "secondary-header"
+    | "tertiary-background"
+    | "tertiary-foreground"
+    | "status-online"
+    | "status-away"
+    | "status-busy"
+    | "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: Record<string, Theme> = {
+    light: {
+        light: true,
+        accent: "#FD6671",
+        background: "#F6F6F6",
+        foreground: "#101010",
+        block: "#414141",
+        "message-box": "#F1F1F1",
+        mention: "rgba(251, 255, 0, 0.40)",
+        success: "#65E572",
+        warning: "#FAA352",
+        error: "#ED4245",
+        hover: "rgba(0, 0, 0, 0.2)",
+        "scrollbar-thumb": "#CA525A",
+        "scrollbar-track": "transparent",
+        "primary-background": "#FFFFFF",
+        "primary-header": "#F1F1F1",
+        "secondary-background": "#F1F1F1",
+        "secondary-foreground": "#888888",
+        "secondary-header": "#F1F1F1",
+        "tertiary-background": "#4D4D4D",
+        "tertiary-foreground": "#646464",
+        "status-online": "#3ABF7E",
+        "status-away": "#F39F00",
+        "status-busy": "#F84848",
+        "status-streaming": "#977EFF",
+        "status-invisible": "#A5A5A5",
+    },
+    dark: {
+        light: false,
+        accent: "#FD6671",
+        background: "#191919",
+        foreground: "#F6F6F6",
+        block: "#2D2D2D",
+        "message-box": "#363636",
+        mention: "rgba(251, 255, 0, 0.06)",
+        success: "#65E572",
+        warning: "#FAA352",
+        error: "#ED4245",
+        hover: "rgba(0, 0, 0, 0.1)",
+        "scrollbar-thumb": "#CA525A",
+        "scrollbar-track": "transparent",
+        "primary-background": "#242424",
+        "primary-header": "#363636",
+        "secondary-background": "#1E1E1E",
+        "secondary-foreground": "#C8C8C8",
+        "secondary-header": "#2D2D2D",
+        "tertiary-background": "#4D4D4D",
+        "tertiary-foreground": "#848484",
+        "status-online": "#3ABF7E",
+        "status-away": "#F39F00",
+        "status-busy": "#F84848",
+        "status-streaming": "#977EFF",
+        "status-invisible": "#A5A5A5",
+    },
+};
+
+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]};`;
+        })}
+}
+`;
+
+// Load the default default them and apply extras later
+export const ThemeContext = createContext<Theme>(PRESETS["dark"]);
+
+interface Props {
+    children: Children;
+    options?: ThemeOptions;
+}
+
+function Theme({ children, options }: Props) {
+    const theme: Theme = {
+        ...PRESETS["dark"],
+        ...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={theme["background"]} />
+            </Helmet>
+            <GlobalTheme theme={theme} />
+            {theme.css && (
+                <style dangerouslySetInnerHTML={{ __html: theme.css }} />
+            )}
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+export default connectState<{ children: Children }>(Theme, (state) => {
+    return {
+        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 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 (
+        <Router>
+            <State>
+                <Theme>
+                    <Settings>
+                        <Locale>
+                            <Intermediate>
+                                <Client>
+                                    <Voice>{children}</Voice>
+                                </Client>
+                            </Intermediate>
+                        </Locale>
+                    </Settings>
+                </Theme>
+            </State>
+        </Router>
+    );
+}

src/context/intermediate/Intermediate.tsx

+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 { Children } from "../../types/Preact";
+import Modals from "./Modals";
+
+export type Screen =
+    | { 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" },
+    focusTaken: false,
+});
+
+export const IntermediateActionsContext = createContext<{
+    openScreen: (screen: Screen) => void;
+    writeClipboard: (text: string) => void;
+}>({
+    openScreen: null!,
+    writeClipboard: null!,
+});
+
+interface Props {
+    children: Children;
+}
+
+export default function Intermediate(props: Props) {
+    const [screen, openScreen] = useState<Screen>({ id: "none" });
+    const history = useHistory();
+
+    const value = {
+        screen,
+        focusTaken: screen.id !== "none",
+    };
+
+    const actions = useMemo(() => {
+        return {
+            openScreen: (screen: Screen) => openScreen(screen),
+            writeClipboard: (text: string) => {
+                if (navigator.clipboard) {
+                    navigator.clipboard.writeText(text);
+                } else {
+                    actions.openScreen({ id: "clipboard", text });
+                }
+            },
+        };
+    }, []);
+
+    useEffect(() => {
+        const openProfile = (user_id: string) =>
+            openScreen({ id: "profile", user_id });
+        const navigate = (path: string) => history.push(path);
+
+        const subs = [
+            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}>
+                {screen.id !== "onboarding" && props.children}
+                <Modals
+                    {...value}
+                    {...actions}
+                    key={
+                        screen.id
+                    } /** By specifying a key, we reset state whenever switching screen. */
+                />
+                <Prompt
+                    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" });
+                            setTimeout(() => history.push(history.location), 0);
+
+                            return false;
+                        }
+
+                        return true;
+                    }}
+                />
+            </IntermediateActionsContext.Provider>
+        </IntermediateContext.Provider>
+    );
+}
+
+export const useIntermediate = () => useContext(IntermediateActionsContext);