refactor: split components and modal and whatnot

src/components/ThemeSettings/ThemesTab.tsx

@@ -16,25 +16,28 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./themesStyles.css";
+
 import { Settings, useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { Flex } from "@components/Flex";
 import { Link } from "@components/Link";
+import { AddonCard } from "@components/VencordSettings/AddonCard";
+import { SettingsTab, wrapTab } from "@components/VencordSettings/shared";
 import { Margins } from "@utils/margins";
-import { classes, identity } from "@utils/misc";
+import { classes } from "@utils/misc";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
+import { openModal } from "@utils/modal";
 import { showItemInFolder } from "@utils/native";
-import { LazyComponent, useAwaiter } from "@utils/react";
+import { useAwaiter } from "@utils/react";
 import type { ThemeHeader } from "@utils/themes";
 import { getThemeInfo, stripBOM, type UserThemeHeader } from "@utils/themes/bd";
 import { usercssParse } from "@utils/themes/usercss";
-import { find, findByCodeLazy, findByPropsLazy, findLazy } from "@webpack";
+import { findByCodeLazy, findByPropsLazy, findLazy } from "@webpack";
-import { Button, Card, ComponentTypes, FluxDispatcher, Forms, Popout, React, Select, showToast, Slider, Switch, TabBar, Text, TextArea, TextInput, useEffect, useRef, useState } from "@webpack/common";
+import { Button, Card, FluxDispatcher, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common";
-import type { ComponentType, ReactNode, Ref, SyntheticEvent } from "react";
+import type { ComponentType, Ref, SyntheticEvent } from "react";
 import type { UserstyleHeader } from "usercss-meta";
 
-import { AddonCard } from "./AddonCard";
+import { UserCSSSettingsModal } from "./UserCSSModal";
-import { SettingsTab, wrapTab } from "./shared";
 
 type FileInput = ComponentType<{
     ref: Ref<HTMLInputElement>;
@@ -43,22 +46,13 @@ type FileInput = ComponentType<{
     filters?: { name?: string; extensions: string[]; }[];
 }>;
 
-interface ColorPickerProps {
-    value: number | null;
-    showEyeDropper?: boolean;
-    onChange(value: number | null): void;
-    onClose?(): void;
-}
 
-const ColorPickerModal = LazyComponent<ColorPickerProps>(() => find(m => m?.type?.toString?.().includes(".showEyeDropper")));
 
 const InviteActions = findByPropsLazy("resolveInvite");
 const TrashIcon = findByCodeLazy("M5 6.99902V18.999C5 20.101 5.897 20.999");
 const CogWheel = findByCodeLazy("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069");
 const FileInput: FileInput = findByCodeLazy("activateUploadDialogue=");
-const EditPencil = findByCodeLazy("M19.2929 9.8299L19.9409 9.18278C21.353 7.77064", '["color","height","width"]');
+
-// TinyColor is completely unmangled and it's duplicated in two modules! Fun!
-const TinyColor: tinycolor.Constructor = findByCodeLazy("this._gradientType=");
 const TextAreaProps = findLazy(m => typeof m.textarea === "string");
 
 const cl = classNameFactory("vc-settings-theme-");
@@ -112,194 +106,6 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
     );
 }
 
-function ColorPicker(props: ColorPickerProps) {
-    const [color, setColor] = useState(props.value);
-
-    const correctedColor = color ? `#${color.toString(16).padStart(6, "0")}` : "#000000";
-
-    return (
-        <Popout
-            renderPopout={() => (
-                <ColorPickerModal value={props.value} onChange={value => { setColor(value); props.onChange(value); }} showEyeDropper={props.showEyeDropper} />
-            )}
-        >
-            {popoutProps => (
-                <div {...popoutProps} className={cl("usercss-swatch")} style={{
-                    backgroundColor: correctedColor,
-                    borderColor: correctedColor
-                }}>
-                    <EditPencil
-                        className={cl("usercss-swatch-pencil")}
-                        color={TinyColor(correctedColor).isLight() ? "var(--primary-530)" : "var(--white-500)"}
-                    />
-                </div>
-            )}
-        </Popout>
-    );
-}
-
-interface UserCSSSettingsModalProps {
-    modalProps: ModalProps;
-    theme: UserstyleHeader;
-}
-
-function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModalProps) {
-    // @ts-expect-error UseSettings<> can't determine this is a valid key
-    const themeSettings = useSettings(["userCssVars"], false).userCssVars[theme.id];
-
-    const controls: ReactNode[] = [];
-
-    function updateSetting(key: string, value: string, setValue: (value: string) => void) {
-        themeSettings[key] = value;
-        setValue(value);
-    }
-
-    for (const [name, varInfo] of Object.entries(theme.vars)) {
-        switch (varInfo.type) {
-            case "text": {
-                const [value, setValue] = useState(themeSettings[name]);
-
-                controls.push(
-                    <Forms.FormSection>
-                        <Forms.FormTitle tag="h5">{varInfo.label}</Forms.FormTitle>
-                        <TextInput
-                            key={name}
-                            value={value}
-                            onChange={v => updateSetting(name, v, setValue)}
-                        />
-                    </Forms.FormSection>
-                );
-                break;
-            }
-
-            case "checkbox": {
-                const [value, setValue] = useState(themeSettings[name]);
-
-                controls.push(
-                    <Forms.FormSection>
-                        <Switch
-                            key={name}
-                            value={value === "1"}
-                            onChange={value => updateSetting(name, value ? "1" : "0", setValue)}
-                            hideBorder
-                            style={{ marginBottom: "0.5em" }}
-                        >
-                            {varInfo.label}
-                        </Switch>
-                    </Forms.FormSection>
-                );
-                break;
-            }
-
-            case "color": {
-                const [value, setValue] = useState(themeSettings[name]);
-
-                const normalizedValue = TinyColor(value).toHex();
-
-                controls.push(
-                    <Forms.FormSection>
-                        <Forms.FormTitle tag="h5">{varInfo.label}</Forms.FormTitle>
-                        <ColorPicker
-                            key={name}
-                            value={parseInt(normalizedValue, 16)}
-                            onChange={v => updateSetting(name, "#" + (v?.toString(16).padStart(6, "0") ?? "000000"), setValue)}
-                        />
-                    </Forms.FormSection>
-                );
-                break;
-            }
-
-            case "number": {
-                const [value, setValue] = useState(themeSettings[name]);
-
-                controls.push(
-                    <Forms.FormSection>
-                        <Forms.FormTitle tag="h5">{varInfo.label}</Forms.FormTitle>
-                        <TextInput
-                            type="number"
-                            pattern="-?[0-9]+"
-                            key={name}
-                            value={value}
-                            onChange={v => updateSetting(name, v, setValue)}
-                        />
-                    </Forms.FormSection>
-                );
-                break;
-            }
-
-            case "select": {
-                const [value, setValue] = useState(themeSettings[name]);
-
-                const options = varInfo.options.map(option => ({
-                    disabled: false,
-
-                    key: option.name,
-                    value: option.value,
-                    default: varInfo.default === option.name,
-                    label: option.label
-                } as ComponentTypes.SelectOption));
-
-                controls.push(
-                    <Forms.FormSection>
-                        <Forms.FormTitle tag="h5">{varInfo.label}</Forms.FormTitle>
-                        <Select
-                            placeholder={varInfo.label}
-                            key={name}
-                            options={options}
-                            closeOnSelect={true}
-
-                            select={v => updateSetting(name, v, setValue)}
-                            isSelected={v => v === value}
-                            serialize={identity}
-                        />
-                    </Forms.FormSection>
-                );
-                break;
-            }
-
-            case "range": {
-                const [value, setValue] = useState(themeSettings[name]);
-
-                const markers: number[] = [];
-
-                // defaults taken from https://github.com/openstyles/stylus/wiki/Writing-UserCSS#default-value
-                for (let i = (varInfo.min ?? 0); i <= (varInfo.max ?? 10); i += (varInfo.step ?? 1)) {
-                    markers.push(i);
-                }
-
-                controls.push(
-                    <Forms.FormSection>
-                        <Forms.FormTitle tag="h5">{varInfo.label} ({varInfo.units})</Forms.FormTitle>
-                        <Slider
-                            initialValue={parseInt(value, 10)}
-                            defaultValue={varInfo.default}
-                            onValueChange={v => updateSetting(name, v.toString(), setValue)}
-                            minValue={varInfo.min}
-                            maxValue={varInfo.max}
-
-                            markers={markers}
-                            stickToMarkers={true}
-                        />
-                    </Forms.FormSection>
-                );
-                break;
-            }
-        }
-    }
-
-    return (
-        <ModalRoot {...modalProps}>
-            <ModalHeader separator={false}>
-                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Settings for {theme.name}</Text>
-                <ModalCloseButton onClick={modalProps.onClose} />
-            </ModalHeader>
-            <ModalContent>
-                <Flex flexDirection="column" style={{ gap: 12, marginBottom: 16 }}>{controls}</Flex>
-            </ModalContent>
-        </ModalRoot>
-    );
-}
-
 interface BDThemeCardProps {
     theme: UserThemeHeader;
     enabled: boolean;

src/components/ThemeSettings/UserCSSModal.tsx

@@ -0,0 +1,137 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { useSettings } from "@api/Settings";
+import { Flex } from "@components/Flex";
+import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
+import { Text, useState } from "@webpack/common";
+import type { ReactNode } from "react";
+import { UserstyleHeader } from "usercss-meta";
+
+import { SettingBooleanComponent, SettingColorComponent, SettingNumberComponent, SettingRangeComponent, SettingSelectComponent, SettingTextComponent } from "./components";
+
+interface UserCSSSettingsModalProps {
+    modalProps: ModalProps;
+    theme: UserstyleHeader;
+}
+
+export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModalProps) {
+    // @ts-expect-error UseSettings<> can't determine this is a valid key
+    const themeSettings = useSettings(["userCssVars"], false).userCssVars[theme.id];
+
+    const controls: ReactNode[] = [];
+
+    function updateSetting(key: string, value: string, setValue: (value: string) => void) {
+        themeSettings[key] = value;
+        setValue(value);
+    }
+
+    for (const [name, varInfo] of Object.entries(theme.vars)) {
+        switch (varInfo.type) {
+            case "text": {
+                const [value, setValue] = useState(themeSettings[name]);
+
+                controls.push(
+                    <SettingTextComponent
+                        label={varInfo.label}
+                        name={name}
+                        value={value}
+                        onChange={v => updateSetting(name, v, setValue)}
+                    />
+                );
+                break;
+            }
+
+            case "checkbox": {
+                const [value, setValue] = useState(themeSettings[name]);
+
+                controls.push(
+                    <SettingBooleanComponent
+                        label={varInfo.label}
+                        name={name}
+                        value={value}
+                        onChange={v => updateSetting(name, v, setValue)}
+                    />
+                );
+                break;
+            }
+
+            case "color": {
+                const [value, setValue] = useState(themeSettings[name]);
+
+                controls.push(
+                    <SettingColorComponent
+                        label={varInfo.label}
+                        name={name}
+                        value={value}
+                        onChange={v => updateSetting(name, v, setValue)}
+                    />
+                );
+                break;
+            }
+
+            case "number": {
+                const [value, setValue] = useState(themeSettings[name]);
+
+                controls.push(
+                    <SettingNumberComponent
+                        label={varInfo.label}
+                        name={name}
+                        value={value}
+                        onChange={v => updateSetting(name, v, setValue)}
+                    />
+                );
+                break;
+            }
+
+            case "select": {
+                const [value, setValue] = useState(themeSettings[name]);
+
+                controls.push(
+                    <SettingSelectComponent
+                        label={varInfo.label}
+                        name={name}
+                        options={varInfo.options}
+                        value={value}
+                        default={varInfo.default}
+                        onChange={v => updateSetting(name, v, setValue)}
+                    />
+                );
+                break;
+            }
+
+            case "range": {
+                const [value, setValue] = useState(themeSettings[name]);
+
+                controls.push(
+                    <SettingRangeComponent
+                        label={varInfo.label}
+                        name={name}
+                        value={value}
+                        default={varInfo.default}
+                        min={varInfo.min}
+                        max={varInfo.max}
+                        step={varInfo.step}
+                        onChange={v => updateSetting(name, v, setValue)}
+                    />
+                );
+                break;
+            }
+        }
+    }
+
+    return (
+        <ModalRoot {...modalProps}>
+            <ModalHeader separator={false}>
+                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Settings for {theme.name}</Text>
+                <ModalCloseButton onClick={modalProps.onClose} />
+            </ModalHeader>
+            <ModalContent>
+                <Flex flexDirection="column" style={{ gap: 12, marginBottom: 16 }}>{controls}</Flex>
+            </ModalContent>
+        </ModalRoot>
+    );
+}

src/components/ThemeSettings/components/SettingBooleanComponent.tsx

@@ -0,0 +1,30 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Forms, Switch } from "@webpack/common";
+
+interface Props {
+    label: string;
+    name: string;
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export function SettingBooleanComponent({ label, name, value, onChange }: Props) {
+    return (
+        <Forms.FormSection>
+            <Switch
+                key={name}
+                value={value === "1"}
+                onChange={v => onChange(v ? "1" : "0")}
+                hideBorder
+                style={{ marginBottom: "0.5em" }}
+            >
+                {label}
+            </Switch>
+        </Forms.FormSection>
+    );
+}

src/components/ThemeSettings/components/SettingColorComponent.tsx

@@ -0,0 +1,73 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { classNameFactory } from "@api/Styles";
+import { LazyComponent } from "@utils/react";
+import { find, findByCodeLazy } from "@webpack";
+import { Forms, Popout, useState } from "@webpack/common";
+
+interface ColorPickerProps {
+    value: number | null;
+    showEyeDropper?: boolean;
+    onChange(value: number | null): void;
+    onClose?(): void;
+}
+const ColorPickerModal = LazyComponent<ColorPickerProps>(() => find(m => m?.type?.toString?.().includes(".showEyeDropper")));
+
+// TinyColor is completely unmangled and it's duplicated in two modules! Fun!
+const TinyColor: tinycolor.Constructor = findByCodeLazy("this._gradientType=");
+
+const cl = classNameFactory("vc-usercss-settings-color-");
+
+const EditPencil = findByCodeLazy("M19.2929 9.8299L19.9409 9.18278C21.353 7.77064", '["color","height","width"]');
+
+function ColorPicker(props: ColorPickerProps) {
+    const [color, setColor] = useState(props.value);
+
+    const correctedColor = color ? `#${color.toString(16).padStart(6, "0")}` : "#000000";
+
+    return (
+        <Popout
+            renderPopout={() => (
+                <ColorPickerModal value={props.value} onChange={value => { setColor(value); props.onChange(value); }} showEyeDropper={props.showEyeDropper} />
+            )}
+        >
+            {popoutProps => (
+                <div {...popoutProps} className={cl("swatch")} style={{
+                    backgroundColor: correctedColor,
+                    borderColor: correctedColor
+                }}>
+                    <EditPencil
+                        className={cl("swatch-pencil")}
+                        color={TinyColor(correctedColor).isLight() ? "var(--primary-530)" : "var(--white-500)"}
+                    />
+                </div>
+            )}
+        </Popout>
+    );
+}
+
+interface Props {
+    label: string;
+    name: string;
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export function SettingColorComponent({ label, name, value, onChange }: Props) {
+    const normalizedValue = TinyColor(value).toHex();
+
+    return (
+        <Forms.FormSection>
+            <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
+            <ColorPicker
+                key={name}
+                value={parseInt(normalizedValue, 16)}
+                onChange={v => onChange("#" + (v?.toString(16).padStart(6, "0") ?? "000000"))}
+            />
+        </Forms.FormSection>
+    );
+}

src/components/ThemeSettings/components/SettingNumberComponent.tsx

@@ -0,0 +1,29 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Forms, TextInput } from "@webpack/common";
+
+interface Props {
+    label: string;
+    name: string;
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export function SettingNumberComponent({ label, name, value, onChange }: Props) {
+    return (
+        <Forms.FormSection>
+            <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
+            <TextInput
+                type="number"
+                pattern="-?[0-9]+"
+                key={name}
+                value={value}
+                onChange={onChange}
+            />
+        </Forms.FormSection>
+    );
+}

src/components/ThemeSettings/components/SettingRangeComponent.tsx

@@ -0,0 +1,43 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Forms, Slider } from "@webpack/common";
+
+interface Props {
+    label: string;
+    name: string;
+    value: string;
+    default: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange: (value: string) => void;
+}
+
+export function SettingRangeComponent({ label, name, value, default: def, min, max, step, onChange }: Props) {
+    const markers: number[] = [];
+
+    // defaults taken from https://github.com/openstyles/stylus/wiki/Writing-UserCSS#default-value
+    for (let i = (min ?? 0); i <= (max ?? 10); i += (step ?? 1)) {
+        markers.push(i);
+    }
+
+    return (
+        <Forms.FormSection>
+            <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
+            <Slider
+                initialValue={parseInt(value, 10)}
+                defaultValue={def}
+                onValueChange={v => onChange(v.toString())}
+                minValue={min}
+                maxValue={max}
+
+                markers={markers}
+                stickToMarkers={true}
+            />
+        </Forms.FormSection>
+    );
+}

src/components/ThemeSettings/components/SettingSelectComponent.tsx

@@ -0,0 +1,48 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { identity } from "@utils/misc";
+import { ComponentTypes, Forms, Select } from "@webpack/common";
+
+interface Props {
+    label: string;
+    name: string;
+    options: {
+        name: string;
+        label: string;
+        value: string;
+    }[];
+    value: string;
+    default: string;
+    onChange: (value: string) => void;
+}
+
+export function SettingSelectComponent({ label, name, options, value, default: def, onChange }: Props) {
+    const opts = options.map(option => ({
+        disabled: false,
+
+        key: option.name,
+        value: option.value,
+        default: def === option.name,
+        label: option.label
+    } as ComponentTypes.SelectOption));
+
+    return (
+        <Forms.FormSection>
+            <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
+            <Select
+                placeholder={label}
+                key={name}
+                options={opts}
+                closeOnSelect={true}
+
+                select={onChange}
+                isSelected={v => v === value}
+                serialize={identity}
+            />
+        </Forms.FormSection>
+    );
+}

src/components/ThemeSettings/components/SettingTextComponent.tsx

@@ -0,0 +1,27 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Forms, TextInput } from "@webpack/common";
+
+interface Props {
+    label: string;
+    name: string;
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export function SettingTextComponent({ label, name, value, onChange }: Props) {
+    return (
+        <Forms.FormSection>
+            <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
+            <TextInput
+                key={name}
+                value={value}
+                onChange={onChange}
+            />
+        </Forms.FormSection>
+    );
+}

src/components/ThemeSettings/components/colorStyles.css

@@ -0,0 +1,20 @@
+.vc-usercss-settings-color-swatch {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 69px;
+    height: 50px;
+    box-sizing: border-box;
+    position: relative;
+    border: 1px solid;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.vc-usercss-settings-color-swatch-pencil {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 14px;
+    height: 14px;
+}

src/components/ThemeSettings/components/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export * from "./SettingBooleanComponent";
+export * from "./SettingColorComponent";
+export * from "./SettingNumberComponent";
+export * from "./SettingRangeComponent";
+export * from "./SettingSelectComponent";
+export * from "./SettingTextComponent";

src/components/ThemeSettings/themesStyles.css

@@ -27,24 +27,3 @@
 .vc-settings-theme-author::before {
     content: "by ";
 }
-
-.vc-settings-theme-usercss-swatch {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 69px;
-    height: 50px;
-    box-sizing: border-box;
-    position: relative;
-    border: 1px solid;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.vc-settings-theme-usercss-swatch-pencil {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    width: 14px;
-    height: 14px;
-}

src/components/VencordSettings/shared.tsx

@@ -17,7 +17,6 @@
 */
 
 import "./settingsStyles.css";
-import "./themesStyles.css";
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { handleComponentFailed } from "@components/handleComponentFailed";

src/plugins/_core/settings.tsx

@@ -100,7 +100,7 @@ export default definePlugin({
             {
                 section: "VencordThemes",
                 label: "Themes",
-                element: require("@components/VencordSettings/ThemesTab").default,
+                element: require("@components/ThemeSettings/ThemesTab").default,
                 className: "vc-themes"
             },
             !IS_UPDATER_DISABLED && {