Merge branch 'master' into cleanup

2021-07-04 21:06:30 -04:00
parent a4051330a3 b19479f1b1
commit 3c2a85a3e4
50 changed files with 686 additions and 278 deletions
--- a/src/components/common/CollapsibleSection.tsx
+++ b/src/components/common/CollapsibleSection.tsx
@@ -0,0 +1,50 @@
+import Details from "../ui/Details";
+import { State, store } from "../../redux";
+import { Action } from "../../redux/reducers";
+import { Children } from "../../types/Preact";
+import { ChevronDown } from "@styled-icons/boxicons-regular";
+
+interface Props {
+    id: string;
+    defaultValue: boolean;
+
+    sticky?: boolean;
+    large?: boolean;
+
+    summary: Children;
+    children: Children;
+}
+
+export default function CollapsibleSection({ id, defaultValue, summary, children, ...detailsProps }: Props) {
+    const state: State = store.getState();
+
+    function setState(state: boolean) {
+        if (state === defaultValue) {
+            store.dispatch({
+                type: 'SECTION_TOGGLE_UNSET',
+                id
+            } as Action);
+        } else {
+            store.dispatch({
+                type: 'SECTION_TOGGLE_SET',
+                id,
+                state
+            } as Action);
+        }
+    }
+
+    return (
+        <Details
+            open={state.sectionToggle[id] ?? defaultValue}
+            onToggle={e => setState(e.currentTarget.open)}
+            {...detailsProps}>
+            <summary>
+                <div class="padding">
+                    <ChevronDown size={20} />
+                    { summary }
+                </div>
+            </summary>
+            { children }
+        </Details>
+    )
+}
--- a/src/components/common/Tooltip.tsx
+++ b/src/components/common/Tooltip.tsx
@@ -24,14 +24,16 @@ const PermissionTooltipBase = styled.div`
    display: flex;
    align-items: center;
    flex-direction: column;
+    
    span {
        font-weight: 700;
        text-transform: uppercase;
        color: var(--secondary-foreground);
        font-size: 11px;
    }
+
    code {
-        font-family: 'Fira Mono';
+        font-family: var(--monoscape-font);
    }
 `;

--- a/src/components/common/messaging/attachments/Attachment.module.scss
+++ b/src/components/common/messaging/attachments/Attachment.module.scss
@@ -2,6 +2,13 @@
    border-radius: 6px;
    margin: .125rem 0 .125rem;
    
+    height: auto;
+    
+    max-height: 640px;
+    max-width: min(480px, 100%);
+    
+    object-fit: contain;
+    
    &[data-spoiler="true"] {
        filter: blur(30px);
        pointer-events: none;
@@ -71,7 +78,7 @@
            }
    
            pre code {
-                font-family: "Fira Mono", sans-serif;
+                font-family: var(--monoscape-font), sans-serif;
            }

            &[data-loading="true"] {
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -15,60 +15,33 @@ interface Props {
 }

 const MAX_ATTACHMENT_WIDTH = 480;
-const MAX_ATTACHMENT_HEIGHT = 640;

 export default function Attachment({ attachment, hasContent }: Props) {
    const client = useContext(AppContext);
    const { openScreen } = useIntermediate();
    const { filename, metadata } = attachment;
    const [ spoiler, setSpoiler ] = useState(filename.startsWith("SPOILER_"));
-    const maxWidth = Math.min(useContext(MessageAreaWidthContext), MAX_ATTACHMENT_WIDTH);

    const url = client.generateFileURL(attachment, { width: MAX_ATTACHMENT_WIDTH * 1.5 }, true);
-    let width  = 0,
-        height = 0;
-    
-    if (metadata.type === 'Image' || metadata.type === 'Video') {
-        let limitingWidth = Math.min(
-            maxWidth,
-            metadata.width
-        );

-        let limitingHeight = Math.min(
-            MAX_ATTACHMENT_HEIGHT,
-            metadata.height
-        );
-
-        // Calculate smallest possible WxH.
-        width = Math.min(
-            limitingWidth,
-            limitingHeight * (metadata.width / metadata.height)
-        );
-
-        height = Math.min(
-            limitingHeight,
-            limitingWidth * (metadata.height / metadata.width)
-        );
-    }

    switch (metadata.type) {
        case "Image": {
            return (
                <div
-                    style={{ width }}
                    className={styles.container}
                    onClick={() => spoiler && setSpoiler(false)}
                >
                    {spoiler && (
                        <div className={styles.overflow}>
-                            <div style={{ width, height }}>
-                                <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
-                            </div>
+                            <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
                        </div>
                    )}
                    <img
                        src={url}
                        alt={filename}
+                        width={metadata.width}
+                        height={metadata.height}
                        data-spoiler={spoiler}
                        data-has-content={hasContent}
                        className={classNames(styles.attachment, styles.image)}
@@ -79,7 +52,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
                            ev.button === 1 &&
                            window.open(url, "_blank")
                        }
-                        style={{ width, height }}
                    />
                </div>
            );
@@ -102,13 +74,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
                    onClick={() => spoiler && setSpoiler(false)}>
                    {spoiler && (
                        <div className={styles.overflow}>
-                            <div style={{ width, height }}>
-                                <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
-                            </div>
+                            <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
                        </div>
                    )}
                    <div
-                        style={{ width }}
                        data-spoiler={spoiler}
                        data-has-content={hasContent}
                        className={classNames(styles.attachment, styles.video)}
@@ -117,7 +86,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
                        <video
                            src={url}
                            controls
-                            style={{ width, height }}
                            onMouseDown={ev =>
                                ev.button === 1 &&
                                window.open(url, "_blank")
--- a/src/components/common/messaging/bars/FilePreview.tsx
+++ b/src/components/common/messaging/bars/FilePreview.tsx
@@ -101,6 +101,7 @@ const PreviewBox = styled.div`

    .icon {
        height: 100px;
+        width: 100%;
        margin-bottom: 4px;
        object-fit: contain;
    }
--- a/src/components/markdown/Markdown.module.scss
+++ b/src/components/markdown/Markdown.module.scss
@@ -1,5 +1,3 @@
-@import "@fontsource/fira-mono/400.css";
-
 .markdown {
    :global(.emoji) {
        height: 1.25em;
@@ -89,7 +87,7 @@
        font-size: 90%;
        border-radius: 4px;
        background: var(--block);
-        font-family: "Fira Mono", monospace;
+        font-family: var(--monoscape-font), monospace;
    }

    input[type="checkbox"] {
@@ -136,7 +134,7 @@
    }

    :global(.code) {
-        font-family: "Fira Mono", monospace;
+        font-family: var(--monoscape-font), monospace;

        :global(.lang) {
            // height: 8px;
--- a/src/components/navigation/left/HomeSidebar.tsx
+++ b/src/components/navigation/left/HomeSidebar.tsx
@@ -1,4 +1,4 @@
-import { Localizer, Text } from "preact-i18n";
+import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
 import { Home, UserDetail, Wrench, Notepad } from "@styled-icons/boxicons-solid";

@@ -105,13 +105,9 @@ function HomeSidebar(props: Props) {
                        </ButtonItem>
                    </Link>
                )}
-                <Localizer>
-                    <Category
-                        text={<Text id="app.main.categories.conversations" />}
-                        /** @ts-ignore : ignored due to conflicting naming between the Category property name and the existing JSX attribute */
-                        action={() => openScreen({ id: "special_input", type: "create_group" })}
-                    />
-                </Localizer>
+                <Category
+                    text={<Text id="app.main.categories.conversations" />}
+                    action={() => openScreen({ id: "special_input", type: "create_group" })} />
                {channelsArr.length === 0 && <img src={placeholderSVG} />}
                {channelsArr.map(x => {
                    let user;
--- a/src/components/navigation/left/ServerSidebar.tsx
+++ b/src/components/navigation/left/ServerSidebar.tsx
@@ -14,6 +14,7 @@ import ServerHeader from "../../common/ServerHeader";
 import { useEffect } from "preact/hooks";
 import Category from "../../ui/Category";
 import ConditionalLink from "../../../lib/ConditionalLink";
+import CollapsibleSection from "../../common/CollapsibleSection";

 interface Props {
    unreads: Unreads;
@@ -69,6 +70,7 @@ function ServerSidebar(props: Props & WithDispatcher) {

    let uncategorised = new Set(server.channels);
    let elements = [];
+    
    function addChannel(id: string) {
        const entry = channels.find(x => x._id === id);
        if (!entry) return;
@@ -76,9 +78,8 @@ function ServerSidebar(props: Props & WithDispatcher) {
        const active = channel?._id === entry._id;

        return (
-            <ConditionalLink active={active} to={`/server/${server!._id}/channel/${entry._id}`}>
+            <ConditionalLink key={entry._id} active={active} to={`/server/${server!._id}/channel/${entry._id}`}>
                <ChannelButton
-                    key={entry._id}
                    channel={entry}
                    active={active}
                    alert={entry.unread}
@@ -90,16 +91,24 @@ function ServerSidebar(props: Props & WithDispatcher) {

    if (server.categories) {
        for (let category of server.categories) {
-            elements.push(<Category text={category.title} />);
-
+            let channels = [];
            for (let id of category.channels) {
                uncategorised.delete(id);
-                elements.push(addChannel(id));
+                channels.push(addChannel(id));
            }
+
+            elements.push(
+                <CollapsibleSection
+                    id={`category_${category.id}`}
+                    defaultValue
+                    summary={<Category text={category.title} />}>
+                    { channels }
+                </CollapsibleSection>
+            );
        }
    }

-    for (let id of uncategorised) {
+    for (let id of Array.from(uncategorised).reverse()) {
        elements.unshift(addChannel(id));
    }

--- a/src/components/navigation/right/MemberSidebar.tsx
+++ b/src/components/navigation/right/MemberSidebar.tsx
@@ -2,6 +2,7 @@ import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";

 import { User } from "revolt.js";
+import Details from "../../../components/ui/Details";
 import Category from "../../ui/Category";
 import { useParams } from "react-router";
 import { UserButton } from "../items/ButtonItem";
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -10,7 +10,7 @@ export default styled.button<Props>`
    padding: 8px;
    font-size: 16px;
    text-align: center;
-    font-family: 'Open Sans', sans-serif;
+    font-family: inherit;

    transition: 0.2s ease opacity;
    transition: 0.2s ease background-color;
--- a/src/components/ui/Category.tsx
+++ b/src/components/ui/Category.tsx
@@ -31,7 +31,7 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>`
    ` }
 `;

-type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
+type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as' | 'action'> & {
    text: Children;
    // TODO: rename from action to prevent type conflicts with the dom
    action?: () => void;
--- a/src/components/ui/Checkbox.tsx
+++ b/src/components/ui/Checkbox.tsx
@@ -3,9 +3,9 @@ import { Children } from "../../types/Preact";
 import styled, { css } from "styled-components";

 const CheckboxBase = styled.label`
+    margin-top: 20px;
    gap: 4px;
    z-index: 1;
-    padding: 4px;
    display: flex;
    border-radius: 4px;
    align-items: center;
@@ -16,25 +16,19 @@ const CheckboxBase = styled.label`

    transition: 0.2s ease all;

-    p {
-        margin: 0;
-    }
-
    input {
        display: none;
    }

    &:hover {
-        background: var(--secondary-background);
-
        .check {
            background: var(--background);
        }
    }

    &[disabled] {
-        opacity: 0.5;
-        cursor: unset;
+        opacity: .5;
+        cursor: not-allowed;

        &:hover {
            background: unset;
@@ -43,15 +37,15 @@ const CheckboxBase = styled.label`
 `;

 const CheckboxContent = styled.span`
-    flex-grow: 1;
    display: flex;
+    flex-grow: 1;
    font-size: 1rem;
    font-weight: 600;
    flex-direction: column;
 `;

 const CheckboxDescription = styled.span`
-    font-size: 0.8em;
+    font-size: .75rem;
    font-weight: 400;
    color: var(--secondary-foreground);
 `;
--- a/src/components/ui/ColourSwatches.tsx
+++ b/src/components/ui/ColourSwatches.tsx
@@ -1,5 +1,6 @@
 import { useRef } from "preact/hooks";
-import { Check, Pencil } from "@styled-icons/boxicons-regular";
+import { Check } from "@styled-icons/boxicons-regular";
+import { Palette } from "@styled-icons/boxicons-solid";
 import styled, { css } from "styled-components";

 interface Props {
@@ -98,7 +99,7 @@ export default function ColourSwatches({ value, onChange }: Props) {
                type="large"
                onClick={() => ref.current.click()}
            >
-                <Pencil size={32} />
+                <Palette size={32} />
            </Swatch>
            <input
                type="color"
--- a/src/components/ui/ComboBox.tsx
+++ b/src/components/ui/ComboBox.tsx
@@ -2,15 +2,19 @@ import styled from "styled-components";

 export default styled.select`
    padding: 8px;
-    border-radius: 2px;
+    border-radius: 6px;
+    font-family: inherit;
    color: var(--secondary-foreground);
    background: var(--secondary-background);
-
+    font-size: .875rem;
    border: none;
    outline: 2px solid transparent;
    transition: outline-color 0.2s ease-in-out;
+    transition: box-shadow .3s;
+    cursor: pointer;
+    width: 100%;

    &:focus {
-        outline-color: var(--accent);
+        box-shadow: 0 0 0 2pt var(--accent);
    }
 `;
--- a/src/components/ui/Details.tsx
+++ b/src/components/ui/Details.tsx
@@ -0,0 +1,68 @@
+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;
+        align-items: center;
+        transition: .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: .2s ease transform;
+            }
+        }
+    }
+
+    &:not([open]) {
+        summary {
+            opacity: .7;
+        }
+        
+        summary svg {
+            transform: rotateZ(-90deg);
+        }
+    }
+`;
--- a/src/components/ui/Header.tsx
+++ b/src/components/ui/Header.tsx
@@ -46,6 +46,6 @@ export default styled.div<Props>`
    ` }

    ${ props => props.borders && css`    
-        border-end-start-radius: 8px;
+        border-start-start-radius: 8px;
    ` }
 `;
--- a/src/components/ui/InputBox.tsx
+++ b/src/components/ui/InputBox.tsx
@@ -9,6 +9,7 @@ export default styled.input<Props>`
    padding: 8px 16px;
    border-radius: 6px;
    
+    font-family: inherit;
    color: var(--foreground);
    background: var(--primary-background);
    transition: 0.2s ease background-color;
--- a/src/components/ui/Overline.tsx
+++ b/src/components/ui/Overline.tsx
@@ -5,6 +5,7 @@ import { Text } from 'preact-i18n';
 type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
    error?: string;
    block?: boolean;
+    spaced?: boolean;
    children?: Children;
    type?: "default" | "subtle" | "error";
 }
@@ -12,7 +13,10 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
 const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
    display: inline;
    margin: 0.4em 0;
-    margin-top: 0.8em;
+
+    ${ props => props.spaced && css`
+        margin-top: 0.8em;
+    ` }

    font-size: 14px;
    font-weight: 600;
--- a/src/components/ui/TextArea.tsx
+++ b/src/components/ui/TextArea.tsx
@@ -39,8 +39,10 @@ export default styled.textarea<TextAreaProps>`
    }

    ${ props => props.code ? css`
-        font-family: 'Fira Mono', 'Courier New', Courier, monospace;
+        font-family: var(--monoscape-font-font), monospace;
    ` : css`
-        font-family: 'Open Sans', sans-serif;
+        font-family: inherit;
    ` }
+    
+    font-variant-ligatures: var(--ligatures);
 `;
--- a/src/components/ui/Tip.tsx
+++ b/src/components/ui/Tip.tsx
@@ -7,6 +7,13 @@ interface Props {
    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;
@@ -46,9 +53,13 @@ export const TipBase = styled.div<Props>`
 export default function Tip(props: Props & { children: Children }) {
    const { children, ...tipProps } = props;
    return (
-        <TipBase {...tipProps}>
-            <InfoCircle size={20} />
-            <span>{props.children}</span>
-        </TipBase>
+        <>
+            <Separator />
+            <TipBase {...tipProps}>
+                <InfoCircle size={20} />
+                <span>{props.children}</span>
+            </TipBase>
+        </>
+        
    );
 }
--- a/src/context/Locale.tsx
+++ b/src/context/Locale.tsx
@@ -43,7 +43,6 @@ export enum Language {
    PIRATE = "pr",
    BOTTOM = "bottom",
    PIGLATIN = "piglatin",
-    HARDCORE = "hardcore",
 }

 export interface LanguageEntry {
@@ -107,13 +106,6 @@ export const Languages: { [key in Language]: LanguageEntry } = {
        dayjs: "en-gb",
        alt: true
    },
-    hardcore: {
-        display: "Hardcore Mode",
-        emoji: "🔥",
-        i18n: "hardcore",
-        dayjs: "en-gb",
-        alt: true
-    },
 };

 interface Props {
@@ -126,8 +118,10 @@ function Locale({ children, locale }: Props) {
    const [defns, setDefinition] = useState<Record<string, unknown>>(definition);
    const lang = Languages[locale];

-    // TOOD: clean this up and use the built in Intl API
-    function transformLanguage(obj: { [key: string]: any }) {
+    // TODO: clean this up and use the built in Intl API
+    function transformLanguage(source: { [key: string]: any }) {
+        const obj = defaultsDeep(source, definition);
+
        const dayjs = obj.dayjs;
        const defaults = dayjs.defaults;

@@ -151,23 +145,16 @@ function Locale({ children, locale }: Props) {

    useEffect(() => {
        if (locale === "en") {
-            transformLanguage(definition);
-            setDefinition(definition);
+            const defn = transformLanguage(definition);
+            setDefinition(defn);
            dayjs.locale("en");
-            dayjs.updateLocale('en', { calendar: definition.dayjs });
-            return;
-        }
-
-        if (lang.i18n === "hardcore") {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            setDefinition({});
+            dayjs.updateLocale('en', { calendar: defn.dayjs });
            return;
        }

        import(`../../external/lang/${lang.i18n}.json`).then(
            async (lang_file) => {
-                const defn = lang_file.default;
-                transformLanguage(defn);
+                const defn = transformLanguage(lang_file.default);
                const target = lang.dayjs ?? lang.i18n;
                const dayjs_locale = await import(`../../node_modules/dayjs/esm/locale/${target}.js`);

@@ -176,7 +163,7 @@ function Locale({ children, locale }: Props) {
                }

                dayjs.locale(dayjs_locale.default);
-                setDefinition(defaultsDeep(defn, definition));
+                setDefinition(defn);
            }
        );
    }, [locale, lang]);
--- a/src/context/Theme.tsx
+++ b/src/context/Theme.tsx
@@ -33,18 +33,161 @@ export type Variables =
    | "status-invisible"
    | "sidebar-active";

+export type Fonts = 'Open Sans' | 'Inter' | 'Atkinson Hyperlegible' | 'Roboto' | 'Noto Sans' | 'Lato' | 'Bree Serif' | 'Montserrat' | 'Poppins' | 'Raleway' | 'Ubuntu' | 'Comic Neue';
+export type MonoscapeFonts = 'Fira Code' | 'Roboto Mono' | 'Source Code Pro' | 'Space Mono' | 'Ubuntu Mono';
+
 export type Theme = {
    [variable in Variables]: string;
 } & {
    light?: boolean;
+    font?: Fonts;
    css?: string;
+    monoscapeFont?: MonoscapeFonts;
 };

 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 MONOSCAPE_FONTS: Record<MonoscapeFonts, { 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 MONOSCAPE_FONT_KEYS = Object.keys(MONOSCAPE_FONTS).sort();
+
 // Generated from https://gitlab.insrt.uk/revolt/community/themes
 export const PRESETS: Record<string, Theme> = {
    light: {
@@ -124,15 +267,32 @@ interface Props {
    options?: ThemeOptions;
 }

-function Theme(props: Props) {
+function Theme({ children, options }: Props) {
    const theme: Theme = {
        ...PRESETS["dark"],
        ...PRESETS[props.options?.preset ?? ''],
        ...props.options?.custom
    };

+    const root = document.documentElement.style;
    useEffect(() => {
-        const resize = () => document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
+        const font = theme.font ?? 'Inter';
+        root.setProperty('--font', `"${font}"`);
+        FONTS[font].load();
+    }, [ theme.font ]);
+
+    useEffect(() => {
+        const font = theme.monoscapeFont ?? 'Fira Code';
+        root.setProperty('--monoscape-font', `"${font}"`);
+        MONOSCAPE_FONTS[font].load();
+    }, [ theme.monoscapeFont ]);
+
+    useEffect(() => {
+        root.setProperty('--ligatures', options?.ligatures ? 'normal' : 'none');
+    }, [ options?.ligatures ]);
+
+    useEffect(() => {
+        const resize = () => root.setProperty('--app-height', `${window.innerHeight}px`);
        resize();

        window.addEventListener('resize', resize);
@@ -155,7 +315,7 @@ function Theme(props: Props) {
            {theme.css && (
                <style dangerouslySetInnerHTML={{ __html: theme.css }} />
            )}
-            {props.children}
+            { children }
        </ThemeContext.Provider>
    );
 }
--- a/src/context/intermediate/modals/Prompt.module.scss
+++ b/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(--monoscape-font);
    }
 }

--- a/src/context/revoltjs/FileUploads.tsx
+++ b/src/context/revoltjs/FileUploads.tsx
@@ -8,7 +8,8 @@ import { useContext, useEffect, useState } from "preact/hooks";
 import Preloader from "../../components/ui/Preloader";
 import { determineFileSize } from "../../lib/fileSize";
 import IconButton from '../../components/ui/IconButton';
-import { Edit, Plus, X, XCircle } from "@styled-icons/boxicons-regular";
+import { Plus, X, XCircle } from "@styled-icons/boxicons-regular";
+import { Pencil } from "@styled-icons/boxicons-solid";
 import { useIntermediate } from "../intermediate/Intermediate";

 type Props = {
@@ -190,7 +191,7 @@ export function FileUploader(props: Props) {
                            <Preloader type="ring" />
                        </div> :
                        <div className={styles.edit}>
-                            <Edit size={30} />
+                            <Pencil size={30} />
                        </div> }
                </div>
                <div className={styles.modify}>
--- a/src/lib/TextAreaAutoSize.tsx
+++ b/src/lib/TextAreaAutoSize.tsx
@@ -23,6 +23,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
    const ref = useRef<HTMLTextAreaElement>();

    useEffect(() => {
+        if (isTouchscreenDevice) return;
        autoFocus && ref.current.focus();
    }, [value]);
    
--- a/src/pages/developer/Developer.tsx
+++ b/src/pages/developer/Developer.tsx
@@ -4,6 +4,7 @@ import Header from "../../components/ui/Header";
 import PaintCounter from "../../lib/PaintCounter";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 import { useUserPermission } from "../../context/revoltjs/hooks";
+import { Wrench } from "@styled-icons/boxicons-solid";

 export default function Developer() {
    // const voice = useContext(VoiceContext);
@@ -12,7 +13,10 @@ export default function Developer() {

    return (
        <div>
-            <Header placement="primary">Developer Tab</Header>
+            <Header placement="primary">
+                <Wrench size="24" />
+                Developer Tab
+            </Header>
            <div style={{ padding: "16px" }}>
                <PaintCounter always />
            </div>
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -14,57 +14,6 @@
    padding: 0 10px 10px 10px;
    user-select: none;
    overflow-y: scroll;
-    
-    summary {
-        position: sticky;
-        z-index: 10;
-        top: -1px;
-    }
-
-    .overline {
-        display: flex;
-        align-items: center;
-        background: var(--primary-background);
-        padding: 5px 0;
-        cursor: pointer;
-
-        .title {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-        
-        svg {
-            margin-inline-end: 4px;
-        }
-    }
-
-    details {
-        summary {
-            outline: none;
-            list-style: none;
-            transition: .2s opacity;
-
-            &::marker, &::-webkit-details-marker {
-                display: none;
-            }
-
-            svg {
-                flex-shrink: 0;
-                transition: .2s ease transform;
-            }
-        }
-
-        &:not([open]) {
-            summary {
-                opacity: .7;
-            }
-            
-            summary svg {
-                transform: rotateZ(-90deg);
-            }
-        }
-    }

    &[data-empty="true"] {
        img {
@@ -145,7 +94,6 @@
 .divider {
    width: 1px;
    height: 24px;
-    margin: 0 8px;
    background: var(--primary-background);
 }

--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -14,6 +14,8 @@ import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regu
 import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
 import { TextReact } from "../../lib/i18n";
 import { Children } from "../../types/Preact";
+import Details from "../../components/ui/Details";
+import CollapsibleSection from "../../components/common/CollapsibleSection";

 export default function Friends() {
    const { openScreen } = useIntermediate();
@@ -29,17 +31,17 @@ export default function Friends() {
        ) ],
        [ 'app.special.friends.sent', users.filter(x =>
            x.relationship === Users.Relationship.Outgoing
-        ) ],
+        ), 'outgoing' ],
        [ 'app.status.online', friends.filter(x =>
            x.online && x.status?.presence !== Users.Presence.Invisible
-        ) ],
+        ), 'online' ],
        [ 'app.status.offline', friends.filter(x =>
            !x.online || x.status?.presence === Users.Presence.Invisible
-        ) ],
-        [ 'app.special.friends.blocked', friends.filter(x =>
+        ), 'offline' ],
+        [ 'app.special.friends.blocked', users.filter(x =>
            x.relationship === Users.Relationship.Blocked
-        ) ]
-    ] as [ string, User[] ][];
+        ), 'blocked' ]
+    ] as [ string, User[], string ][];

    const incoming = lists[0][1];
    const userlist: Children[] = incoming.map(x => <b>{ x.username }</b>);
@@ -56,7 +58,7 @@ export default function Friends() {
                <div className={styles.actions}>
                    {/*<Tooltip content={"Create Category"} placement="bottom">
                        <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
-                            <ListPlus size={24} />
+                            <ListPlus size={28} />
                        </IconButton>
                    </Tooltip>
                    <div className={styles.divider} />*/}
@@ -107,22 +109,18 @@ export default function Friends() {
                </div> }

                {
-                    lists.map(([i18n, list], index) => {
+                    lists.map(([i18n, list, section_id], index) => {
                        if (index === 0) return;
                        if (list.length === 0) return;

                        return (
-                            <details open>
-                                <summary>
-                                    <Overline className={styles.overline} type="subtle">
-                                        <ChevronDown size={20} />
-                                        <div className={styles.title}>
-                                            <Text id={i18n} /> — { list.length }
-                                        </div>
-                                    </Overline>
-                                </summary>
+                            <CollapsibleSection
+                                id={`friends_${section_id}`}
+                                defaultValue={true}
+                                sticky large
+                                summary={<div class="title"><Text id={i18n} /> — { list.length }</div>}>
                                { list.map(x => <Friend key={x._id} user={x} />) }
-                            </details>
+                            </CollapsibleSection>
                        )
                    })
                }
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -93,7 +93,7 @@
            margin: 1rem 12px 0;
            font-size: 10px;
            color: var(--secondary-foreground);
-            font-family: "Fira Mono", monospace;
+            font-family: var(--monoscape-font), monospace;
            user-select: text;

            display: grid;
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@@ -10,22 +10,19 @@ import {
    Bell,
    Palette,
    Coffee,
-    Globe,
    IdCard,
-    LogOut,
-    Sync as SyncIcon,
-    Shield,
-    Vial,
-    User
-} from "@styled-icons/boxicons-regular";
-import { Brush, Megaphone } from "@styled-icons/boxicons-solid";
+    CheckShield,
+    Flask,
+    User,
+    Megaphone
+} from "@styled-icons/boxicons-solid";
+import { Sync as SyncIcon, Globe, LogOut } from "@styled-icons/boxicons-regular";
 import { Gitlab } from "@styled-icons/boxicons-logos";
 import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
 import LineDivider from "../../components/ui/LineDivider";
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
 import ButtonItem from "../../components/navigation/items/ButtonItem";
 import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient";
-
 import { Account } from "./panes/Account";
 import { Profile } from "./panes/Profile";
 import { Sessions } from "./panes/Sessions";
@@ -64,7 +61,7 @@ export default function Settings() {
                },
                {
                    id: 'sessions',
-                    icon: <Shield size={20} />,
+                    icon: <CheckShield size={20} />,
                    title: <Text id="app.settings.pages.sessions.title" />
                },
                {
@@ -91,7 +88,7 @@ export default function Settings() {
                {
                    divider: true,
                    id: 'experiments',
-                    icon: <Vial size={20} />,
+                    icon: <Flask size={20} />,
                    title: <Text id="app.settings.pages.experiments.title" />
                },
                {
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -5,7 +5,8 @@ import Button from "../../../components/ui/Button";
 import { Users } from "revolt.js/dist/api/objects";
 import { Link, useHistory } from "react-router-dom";
 import Overline from "../../../components/ui/Overline";
-import { At, Key, Envelope } from "@styled-icons/boxicons-regular";
+import { Envelope, Key } from "@styled-icons/boxicons-solid";
+import { At } from "@styled-icons/boxicons-regular";
 import { useContext, useEffect, useState } from "preact/hooks";
 import UserIcon from "../../../components/common/user/UserIcon";
 import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
@@ -47,9 +48,7 @@ export function Account() {
    return (
        <div className={styles.user}>
            <div className={styles.banner}>
-                <Link to="/settings/profile">
-                    <UserIcon target={user} size={72} />
-                </Link>
+                <UserIcon className={styles.avatar} target={user} size={72} onClick={() => switchPage("profile")}/>
                <div className={styles.username}>@{user.username}</div>
            </div>
            <div className={styles.details}>
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -2,15 +2,18 @@ import { Text } from "preact-i18n";
 import styles from "./Panes.module.scss";
 import { debounce } from "../../../lib/debounce";
 import Button from "../../../components/ui/Button";
+import Checkbox from "../../../components/ui/Checkbox";
+import ComboBox from "../../../components/ui/ComboBox";
 import InputBox from "../../../components/ui/InputBox";
 import { connectState } from "../../../redux/connector";
 import { WithDispatcher } from "../../../redux/reducers";
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import ColourSwatches from "../../../components/ui/ColourSwatches";
 import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
-import { Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
 import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import CollapsibleSection from "../../../components/common/CollapsibleSection";
+import { FONTS, FONT_KEYS, MONOSCAPE_FONTS, MONOSCAPE_FONT_KEYS, Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";

 // @ts-ignore
 import pSBC from 'shade-blend-color';
@@ -129,6 +132,25 @@ export function Component(props: Props & WithDispatcher) {
                </Radio>
            </div>*/}

+            <h3>
+                <Text id="app.settings.pages.appearance.font" />
+            </h3>
+            <ComboBox value={theme.font} onChange={e => setTheme({ custom: { font: e.currentTarget.value as any } })}>
+                {
+                    FONT_KEYS
+                        .map(key =>
+                            <option value={key}>{ FONTS[key as keyof typeof FONTS].name }</option>
+                        )
+                }
+            </ComboBox>
+            <p>
+                <Checkbox checked={props.settings.theme?.ligatures === true}
+                    onChange={() => setTheme({ ligatures: !props.settings.theme?.ligatures })}
+                    description={<Text id="app.settings.pages.appearance.ligatures_desc" />}>
+                    <Text id="app.settings.pages.appearance.ligatures" />
+                </Checkbox>
+            </p>
+
            <h3>
                <Text id="app.settings.pages.appearance.emoji_pack" />
            </h3>
@@ -171,11 +193,7 @@ export function Component(props: Props & WithDispatcher) {
                </div>
            </div>

-            <details>
-                <summary>
-                    <Text id="app.settings.pages.appearance.advanced" />
-                    <div className={styles.divider}></div>
-                </summary>
+            <CollapsibleSection id="settings_advanced_appearance" defaultValue={false} summary={<Text id="app.settings.pages.appearance.advanced" />}>
                <h3>
                    <Text id="app.settings.pages.appearance.overrides" />
                </h3>
@@ -263,6 +281,19 @@ export function Component(props: Props & WithDispatcher) {
                        </div>
                    ))}
                </div>
+
+                <h3>
+                    <Text id="app.settings.pages.appearance.mono_font" />
+                </h3>
+                <ComboBox value={theme.monoscapeFont} onChange={e => setTheme({ custom: { monoscapeFont: e.currentTarget.value as any } })}>
+                    {
+                        MONOSCAPE_FONT_KEYS
+                            .map(key =>
+                                <option value={key}>{ MONOSCAPE_FONTS[key as keyof typeof MONOSCAPE_FONTS].name }</option>
+                            )
+                    }
+                </ComboBox>
+
                <h3>
                    <Text id="app.settings.pages.appearance.custom_css" />
                </h3>
@@ -272,7 +303,7 @@ export function Component(props: Props & WithDispatcher) {
                    code
                    value={css}
                    onChange={ev => setCSS(ev.currentTarget.value)} />
-            </details>
+            </CollapsibleSection>
        </div>
    );
 }
--- a/src/pages/settings/panes/Notifications.tsx
+++ b/src/pages/settings/panes/Notifications.tsx
@@ -39,6 +39,7 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
            <Checkbox
                disabled={!("Notification" in window)}
                checked={options?.desktopEnabled ?? false}
+                description={<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />}
                onChange={async desktopEnabled => {
                    if (desktopEnabled) {
                        let permission = await Notification.requestPermission();
@@ -57,13 +58,11 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
                }}
            >
                <Text id="app.settings.pages.notifications.enable_desktop" />
-                <p>
-                    <Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
-                </p>
            </Checkbox>
            <Checkbox
                disabled={typeof pushEnabled === "undefined"}
                checked={pushEnabled ?? false}
+                description={<Text id="app.settings.pages.notifications.descriptions.enable_push" />}
                onChange={async pushEnabled => {
                    try {
                        const reg = await navigator.serviceWorker?.getRegistration();
@@ -99,9 +98,6 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
                }}
            >
                <Text id="app.settings.pages.notifications.enable_push" />
-                <p>
-                    <Text id="app.settings.pages.notifications.descriptions.enable_push" />
-                </p>
            </Checkbox>
            <h3>
                <Text id="app.settings.pages.notifications.sounds" />
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -8,16 +8,18 @@
        align-items: center;
        background: var(--secondary-header);

+        .avatar {
+            cursor: pointer;
+            transition: 0.2s ease filter;
+
+            &:hover {
+                filter: brightness(80%);
+            }
+        }
+
        .username {
            font-size: 24px;
-        }
-
-        a {
-            transition: 0.2s ease filter;
-        }
-
-        a:hover {
-            filter: brightness(80%);
+            font-weight: 600;
        }
    }

@@ -32,6 +34,10 @@
            display: flex;
            align-items: center;
            flex-direction: row;
+
+            > svg {
+                flex-shrink: 0;
+            }
        }

        .detail {
@@ -321,30 +327,16 @@
    }
 }

-.notifications {
-    label {
-        margin-top: 12px;
-    }
-
-    p {
-        margin-top: 0;
-        font-size: 0.9em;
-        color: var(--secondary-foreground);
-    }
-}
-
 .languages {
    .list {
        margin-bottom: 1em;
        
        .entry {
-            padding: 2px 8px;
            height: 50px;
-            border-radius: 4px;
        }

        .entry > span > span {
-            gap: 8px;
+            gap: 20px;
            display: flex;
            align-items: center;
            flex-direction: row;
--- a/src/pages/settings/panes/Sync.tsx
+++ b/src/pages/settings/panes/Sync.tsx
@@ -25,6 +25,7 @@ export function Component(props: Props & WithDispatcher) {
                    ([ key, title ]) =>
                        <Checkbox
                            checked={(props.options?.disabled ?? []).indexOf(key) === -1}
+                            description={<Text id={`app.settings.pages.sync.descriptions.${key}`} />}
                            onChange={enabled => {
                                props.dispatcher({
                                    type: enabled ? 'SYNC_ENABLE_KEY' : 'SYNC_DISABLE_KEY',
@@ -33,9 +34,6 @@ export function Component(props: Props & WithDispatcher) {
                            }}
                        >
                            <Text id={`app.settings.pages.${title}`} />
-                            <p>
-                                <Text id={`app.settings.pages.sync.descriptions.${key}`} />
-                            </p>
                        </Checkbox>
                )
            }
--- a/src/pages/settings/server/Members.tsx
+++ b/src/pages/settings/server/Members.tsx
@@ -1,7 +1,6 @@
 import styles from './Panes.module.scss';
 import { useEffect, useState } from "preact/hooks";
 import { Servers } from "revolt.js/dist/api/objects";
-import UserIcon from "../../../components/common/user/UserIcon";
 import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";

 interface Props {
@@ -23,7 +22,7 @@ export function Members({ server }: Props) {
    return (
        <div className={styles.members}>
            <div className={styles.subtitle}>
-                X Members
+                { members?.length ?? 0 } Members
            </div>
            { members && members.length > 0 && users?.map(x => x && 
                <div className={styles.member}>
--- a/src/pages/settings/server/Overview.tsx
+++ b/src/pages/settings/server/Overview.tsx
@@ -1,10 +1,13 @@
 import { Text } from "preact-i18n";
+import isEqual from "lodash.isequal";
 import styles from './Panes.module.scss';
 import Button from "../../../components/ui/Button";
-import { Servers } from "revolt.js/dist/api/objects";
 import InputBox from "../../../components/ui/InputBox";
+import ComboBox from "../../../components/ui/ComboBox";
+import { Servers, Server } from "revolt.js/dist/api/objects";
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { useContext, useEffect, useState } from "preact/hooks";
+import { getChannelName } from "../../../context/revoltjs/util";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { FileUploader } from "../../../context/revoltjs/FileUploads";

@@ -17,16 +20,18 @@ export function Overview({ server }: Props) {

    const [name, setName] = useState(server.name);
    const [description, setDescription] = useState(server.description ?? '');
+    const [systemMessages, setSystemMessages] = useState(server.system_messages);

    useEffect(() => setName(server.name), [ server.name ]);
    useEffect(() => setDescription(server.description ?? ''), [ server.description ]);
+    useEffect(() => setSystemMessages(server.system_messages), [ server.system_messages ]);

    const [ changed, setChanged ] = useState(false);
    function save() {
-        let changes: any = {};
+        let changes: Partial<Pick<Servers.Server, 'name' | 'description' | 'system_messages'>> = {};
        if (name !== server.name) changes.name = name;
-        if (description !== server.description)
-            changes.description = description;
+        if (description !== server.description) changes.description = description;
+        if (!isEqual(systemMessages, server.system_messages)) changes.system_messages = systemMessages;
        
        client.servers.edit(server._id, changes);
        setChanged(false);
@@ -76,11 +81,6 @@ export function Overview({ server }: Props) {
                    if (!changed) setChanged(true)
                }}
            />
-            <p>
-                <Button onClick={save} contrast disabled={!changed}>
-                    <Text id="app.special.modals.actions.save" />
-                </Button>
-            </p>

            <h3>
                <Text id="app.main.servers.custom_banner" />
@@ -95,6 +95,48 @@ export function Overview({ server }: Props) {
                previewURL={client.servers.getBannerURL(server._id, { width: 1000 }, true)}
                remove={() => client.servers.edit(server._id, { remove: 'Banner' })}
            />
+
+            <h3>
+                <Text id="app.settings.server_pages.overview.system_messages" />
+            </h3>
+            {[
+                [ 'User Joined', 'user_joined' ],
+                [ 'User Left', 'user_left' ],
+                [ 'User Kicked', 'user_kicked' ],
+                [ 'User Banned', 'user_banned' ]
+            ].map(([ i18n, key ]) =>
+                // ! FIXME: temporary code just so we can expose the options
+                <p style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                    <span style={{ flexShrink: '0', flex: `25%` }}>{i18n}</span>
+                    <ComboBox value={systemMessages?.[key as keyof typeof systemMessages] ?? 'disabled'}
+                        onChange={e => {
+                            if (!changed) setChanged(true)
+                            const v = e.currentTarget.value;
+                            if (v === 'disabled') {
+                                const { [key as keyof typeof systemMessages]: _, ...other } = systemMessages;
+                                setSystemMessages(other);
+                            } else {
+                                setSystemMessages({
+                                    ...systemMessages,
+                                    [key]: v
+                                });
+                            }
+                        }}>
+                        <option value='disabled'><Text id="general.disabled" /></option>
+                        { server.channels.map(id => {
+                            const channel = client.channels.get(id);
+                            if (!channel) return null;
+                            return <option value={id}>{ getChannelName(client, channel, true) }</option>;
+                        }) }
+                    </ComboBox>
+                </p>
+            )}
+
+            <p>
+                <Button onClick={save} contrast disabled={!changed}>
+                    <Text id="app.special.modals.actions.save" />
+                </Button>
+            </p>
        </div>
    );
 }
--- a/src/pages/settings/server/Roles.tsx
+++ b/src/pages/settings/server/Roles.tsx
@@ -49,7 +49,7 @@ export function Roles({ server }: Props) {
            <div className={styles.list}>
                <div className={styles.title}>
                    <h1><Text id="app.settings.server_pages.roles.title" /></h1>
-                    <Plus size={16} onClick={() =>
+                    <Plus size={22} onClick={() =>
                        openScreen({ id: 'special_input', type: 'create_role', server: server._id, callback: id => setRole(id) })} />
                </div>
                { [ 'default', ...Object.keys(roles) ]
--- a/src/redux/index.ts
+++ b/src/redux/index.ts
@@ -14,6 +14,7 @@ import { QueuedMessage } from "./reducers/queue";
 import { ExperimentOptions } from "./reducers/experiments";
 import { LastOpened } from "./reducers/last_opened";
 import { Notifications } from "./reducers/notifications";
+import { SectionToggle } from "./reducers/section_toggle";

 export type State = {
    config: Core.RevoltNodeConfiguration,
@@ -28,6 +29,7 @@ export type State = {
    experiments: ExperimentOptions;
    lastOpened: LastOpened;
    notifications: Notifications;
+    sectionToggle: SectionToggle;
 };

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -56,7 +58,8 @@ store.subscribe(() => {
        sync,
        experiments,
        lastOpened,
-        notifications
+        notifications,
+        sectionToggle
    } = store.getState() as State;

    localForage.setItem("state", {
@@ -70,6 +73,7 @@ store.subscribe(() => {
        sync,
        experiments,
        lastOpened,
-        notifications
+        notifications,
+        sectionToggle
    });
 });
--- a/src/redux/reducers/index.ts
+++ b/src/redux/reducers/index.ts
@@ -13,6 +13,7 @@ import { sync, SyncAction } from "./sync";
 import { experiments, ExperimentsAction } from "./experiments";
 import { lastOpened, LastOpenedAction } from "./last_opened";
 import { notifications, NotificationsAction } from "./notifications";
+import { sectionToggle, SectionToggleAction } from "./section_toggle";

 export default combineReducers({
    config,
@@ -26,7 +27,8 @@ export default combineReducers({
    sync,
    experiments,
    lastOpened,
-    notifications
+    notifications,
+    sectionToggle
 });

 export type Action =
@@ -42,6 +44,7 @@ export type Action =
    | ExperimentsAction
    | LastOpenedAction
    | NotificationsAction
+    | SectionToggleAction
    | { type: "__INIT"; state: State };

 export type WithDispatcher = { dispatcher: (action: Action) => void };
--- a/src/redux/reducers/section_toggle.ts
+++ b/src/redux/reducers/section_toggle.ts
@@ -0,0 +1,37 @@
+export interface SectionToggle {
+    [key: string]: boolean
+}
+
+export type SectionToggleAction =
+    | { type: undefined }
+    | {
+        type: "SECTION_TOGGLE_SET";
+        id: string;
+        state: boolean;
+      }
+    | {
+        type: "SECTION_TOGGLE_UNSET";
+        id: string;
+      }
+    | {
+          type: "RESET";
+      };
+
+export function sectionToggle(state = {} as SectionToggle, action: SectionToggleAction): SectionToggle {
+    switch (action.type) {
+        case "SECTION_TOGGLE_SET": {
+            return {
+                ...state,
+                [action.id]: action.state
+            }
+        }
+        case "SECTION_TOGGLE_UNSET": {
+            const { [action.id]: _, ...newState } = state;
+            return newState;
+        }
+        case "RESET":
+            return {};
+        default:
+            return state;
+    }
+}
--- a/src/redux/reducers/settings.ts
+++ b/src/redux/reducers/settings.ts
@@ -65,7 +65,7 @@ export function settings(
            return {
                ...state,
                theme: {
-                    ...filter(state.theme, ["custom", "preset"]),
+                    ...filter(state.theme, ["custom", "preset", "ligatures"]),
                    ...action.theme,
                },
            };
--- a/src/styles/_context-menu.scss
+++ b/src/styles/_context-menu.scss
@@ -51,7 +51,13 @@
        }

        .status {
-            font-size: .6rem;
+            max-width: 132px;
+            font-size: .625rem;
+            color: var(--secondary-foreground);
+
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
        }
    }

--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -1,6 +0,0 @@
-@import "@fontsource/open-sans/300.css";
-@import "@fontsource/open-sans/400.css";
-@import "@fontsource/open-sans/600.css";
-@import "@fontsource/open-sans/700.css";
-
-@import "@fontsource/open-sans/400-italic.css";
--- a/src/styles/_page.scss
+++ b/src/styles/_page.scss
@@ -18,7 +18,9 @@ html,
 body {
    margin: 0;
    height: 100%;
-    font-family: "Open Sans", sans-serif;
+    font-family: var(--font), sans-serif;
+    font-variant-ligatures: var(--ligatures);
+
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    caret-color: var(--accent);
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,4 +1,7 @@
 :root {
+    --ligatures: none;
+    --font: "Open Sans";
    --app-height: 100vh;
+    --codeblock-font: "Fira Code";
    --sidebar-active: var(--secondary-background);
 }
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,7 +1,6 @@
@import "variables";
@import "context-menu";
@import "elements";
-@import "fonts";
@import "page";

@import "react-overlapping-panels/dist";