chore(refactor): clean up component folder structure

src/components/settings/appearance/EmojiSelector.tsx

@@ -2,10 +2,10 @@ import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import mutantSVG from "./mutant_emoji.svg";
-import notoSVG from "./noto_emoji.svg";
-import openmojiSVG from "./openmoji_emoji.svg";
-import twemojiSVG from "./twemoji_emoji.svg";
+import mutantSVG from "./assets/mutant_emoji.svg";
+import notoSVG from "./assets/noto_emoji.svg";
+import openmojiSVG from "./assets/openmoji_emoji.svg";
+import twemojiSVG from "./assets/twemoji_emoji.svg";
 
 import { EmojiPack } from "../../common/Emoji";
 

src/components/settings/appearance/Shims.tsx

@@ -0,0 +1,290 @@
+import { Brush } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { Link } from "react-router-dom";
+// @ts-expect-error shade-blend-color does not have typings.
+import pSBC from "shade-blend-color";
+
+import { Text } from "preact-i18n";
+
+import {
+    CategoryButton,
+    Checkbox,
+    ColourSwatches,
+    ComboBox,
+    Radio,
+} from "@revoltchat/ui";
+
+import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
+
+import { useApplicationState } from "../../../mobx/State";
+
+import {
+    Fonts,
+    FONTS,
+    FONT_KEYS,
+    MonospaceFonts,
+    MONOSPACE_FONTS,
+    MONOSPACE_FONT_KEYS,
+} from "../../../context/Theme";
+
+import { EmojiSelector } from "./EmojiSelector";
+import { ThemeBaseSelector } from "./ThemeBaseSelector";
+
+/**
+ * Component providing a way to switch the base theme being used.
+ */
+export const ShimThemeBaseSelector = observer(() => {
+    const theme = useApplicationState().settings.theme;
+    return (
+        <ThemeBaseSelector
+            value={theme.isModified() ? undefined : theme.getBase()}
+            setValue={(base) => {
+                theme.setBase(base);
+                theme.reset();
+            }}
+        />
+    );
+});
+
+/**
+ * Component providing a link to the theme shop.
+ * Only appears if experiment is enabled.
+ */
+export const ShimThemeShop = () => {
+    return (
+        <Link to="/discover/themes" replace>
+            <CategoryButton
+                icon={<Brush size={24} />}
+                action="chevron"
+                description={
+                    <Text id="app.settings.pages.appearance.discover.description" />
+                }>
+                <Text id="app.settings.pages.appearance.discover.title" />
+            </CategoryButton>
+        </Link>
+    );
+};
+
+/**
+ * Component providing a way to change current accent colour.
+ */
+export const ShimThemeAccent = observer(() => {
+    const theme = useApplicationState().settings.theme;
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.appearance.accent_selector" />
+            </h3>
+            <ColourSwatches
+                value={theme.getVariable("accent")}
+                onChange={(colour) => {
+                    theme.setVariable("accent", colour as string);
+                    theme.setVariable("scrollbar-thumb", pSBC(-0.2, colour));
+                }}
+            />
+        </>
+    );
+});
+
+/**
+ * Component providing a way to edit custom CSS.
+ */
+export const ShimThemeCustomCSS = observer(() => {
+    const theme = useApplicationState().settings.theme;
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.appearance.custom_css" />
+            </h3>
+            <TextAreaAutoSize
+                maxRows={20}
+                minHeight={480}
+                code
+                value={theme.getCSS() ?? ""}
+                onChange={(ev) => theme.setCSS(ev.currentTarget.value)}
+            />
+        </>
+    );
+});
+
+/**
+ * Component providing a way to switch between compact and normal message view.
+ */
+export const ShimDisplayCompact = () => {
+    // TODO: WIP feature
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.appearance.message_display" />
+            </h3>
+            <div /* className={styles.display} */>
+                <Radio
+                    title={
+                        <Text id="app.settings.pages.appearance.display.default" />
+                    }
+                    description={
+                        <Text id="app.settings.pages.appearance.display.default_description" />
+                    }
+                    value={true}
+                />
+                <Radio
+                    title={
+                        <Text id="app.settings.pages.appearance.display.compact" />
+                    }
+                    description={
+                        <Text id="app.settings.pages.appearance.display.compact_description" />
+                    }
+                    value={false}
+                    disabled
+                />
+            </div>
+        </>
+    );
+};
+
+/**
+ * Component providing a way to change primary text font.
+ */
+export const ShimDisplayFont = observer(() => {
+    const theme = useApplicationState().settings.theme;
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.appearance.font" />
+            </h3>
+            <ComboBox
+                value={theme.getFont()}
+                onChange={(e) => theme.setFont(e.currentTarget.value as Fonts)}>
+                {FONT_KEYS.map((key) => (
+                    <option value={key} key={key}>
+                        {FONTS[key as keyof typeof FONTS].name}
+                    </option>
+                ))}
+            </ComboBox>
+        </>
+    );
+});
+
+/**
+ * Component providing a way to change secondary, monospace text font.
+ */
+export const ShimDisplayMonospaceFont = observer(() => {
+    const theme = useApplicationState().settings.theme;
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.appearance.mono_font" />
+            </h3>
+            <ComboBox
+                value={theme.getMonospaceFont()}
+                onChange={(e) =>
+                    theme.setMonospaceFont(
+                        e.currentTarget.value as MonospaceFonts,
+                    )
+                }>
+                {MONOSPACE_FONT_KEYS.map((key) => (
+                    <option value={key} key={key}>
+                        {
+                            MONOSPACE_FONTS[key as keyof typeof MONOSPACE_FONTS]
+                                .name
+                        }
+                    </option>
+                ))}
+            </ComboBox>
+        </>
+    );
+});
+
+/**
+ * Component providing a way to toggle font ligatures.
+ */
+export const ShimDisplayLigatures = observer(() => {
+    const settings = useApplicationState().settings;
+    if (settings.theme.getFont() !== "Inter") return null;
+
+    return (
+        <>
+            <Checkbox
+                value={settings.get("appearance:ligatures") ?? false}
+                onChange={(v) => settings.set("appearance:ligatures", v)}
+                title={<Text id="app.settings.pages.appearance.ligatures" />}
+                description={
+                    <Text id="app.settings.pages.appearance.ligatures_desc" />
+                }
+            />
+        </>
+    );
+});
+
+/**
+ * Component providing a way to toggle showing the send button on desktop.
+ */
+export const ShimShowSendButton = observer(() => {
+    const settings = useApplicationState().settings;
+
+    return (
+        <Checkbox
+            value={settings.get("appearance:show_send_button") ?? false}
+            onChange={(v) => settings.set("appearance:show_send_button", v)}
+            title={
+                <Text id="app.settings.pages.appearance.appearance_options.show_send" />
+            }
+            description={
+                <Text id="app.settings.pages.appearance.appearance_options.show_send_desc" />
+            }
+        />
+    );
+});
+
+/**
+ * Component providing a way to toggle seasonal themes.
+ */
+export const ShimDisplaySeasonal = observer(() => {
+    const settings = useApplicationState().settings;
+
+    return (
+        <Checkbox
+            value={settings.get("appearance:seasonal") ?? true}
+            onChange={(v) => settings.set("appearance:seasonal", v)}
+            title={
+                <Text id="app.settings.pages.appearance.theme_options.seasonal" />
+            }
+            description={
+                <Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
+            }
+        />
+    );
+});
+
+/**
+ * Component providing a way to toggle transparency effects.
+ */
+export const ShimDisplayTransparency = observer(() => {
+    const settings = useApplicationState().settings;
+
+    return (
+        <Checkbox
+            value={settings.get("appearance:transparency") ?? true}
+            onChange={(v) => settings.set("appearance:transparency", v)}
+            title={
+                <Text id="app.settings.pages.appearance.theme_options.transparency" />
+            }
+            description={
+                <Text id="app.settings.pages.appearance.theme_options.transparency_desc" />
+            }
+        />
+    );
+});
+
+/**
+ * Component providing a way to change emoji pack.
+ */
+export const ShimDisplayEmoji = observer(() => {
+    const settings = useApplicationState().settings;
+    return (
+        <EmojiSelector
+            value={settings.get("appearance:emoji")}
+            setValue={(v) => settings.set("appearance:emoji", v)}
+        />
+    );
+});

src/components/settings/appearance/ThemeBaseSelector.tsx

@@ -2,8 +2,8 @@ import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import darkSVG from "./dark.svg";
-import lightSVG from "./light.svg";
+import darkSVG from "./assets/dark.svg";
+import lightSVG from "./assets/light.svg";
 
 const List = styled.div`
     gap: 8px;