From 612d35c96f98deb8224ed590f61652de08141746 Mon Sep 17 00:00:00 2001
From: Justin Chung <20733699+justin13888@users.noreply.github.com>
Date: Sun, 18 Feb 2024 07:49:42 -0800
Subject: [PATCH] Add categories to Vesktop settings to reduce visual clutter
 (#379)

Co-authored-by: Vendicated <vendicated@riseup.net>
---
 src/renderer/components/Settings.tsx          | 205 ------------------
 src/renderer/components/index.ts              |   1 -
 .../components/settings/AutoStartToggle.tsx   |  26 +++
 .../settings/DiscordBranchPicker.tsx          |  26 +++
 .../settings/NotificationBadgeToggle.tsx      |  26 +++
 src/renderer/components/settings/Settings.tsx | 170 +++++++++++++++
 .../settings/VencordLocationPicker.tsx        |  62 ++++++
 .../settings/WindowsTransparencyControls.tsx  |  49 +++++
 .../components/{ => settings}/settings.css    |   8 +
 src/renderer/index.ts                         |   2 +-
 10 files changed, 368 insertions(+), 207 deletions(-)
 delete mode 100644 src/renderer/components/Settings.tsx
 create mode 100644 src/renderer/components/settings/AutoStartToggle.tsx
 create mode 100644 src/renderer/components/settings/DiscordBranchPicker.tsx
 create mode 100644 src/renderer/components/settings/NotificationBadgeToggle.tsx
 create mode 100644 src/renderer/components/settings/Settings.tsx
 create mode 100644 src/renderer/components/settings/VencordLocationPicker.tsx
 create mode 100644 src/renderer/components/settings/WindowsTransparencyControls.tsx
 rename src/renderer/components/{ => settings}/settings.css (53%)

diff --git a/src/renderer/components/Settings.tsx b/src/renderer/components/Settings.tsx
deleted file mode 100644
index eb0387f..0000000
--- a/src/renderer/components/Settings.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-/*
- * SPDX-License-Identifier: GPL-3.0
- * Vesktop, a desktop app aiming to give you a snappier Discord Experience
- * Copyright (c) 2023 Vendicated and Vencord contributors
- */
-
-import "./settings.css";
-
-import { Margins } from "@vencord/types/utils";
-import { Button, Forms, Select, Switch, Text, Toasts, useState } from "@vencord/types/webpack/common";
-import { setBadge } from "renderer/appBadge";
-import { useSettings } from "renderer/settings";
-import { isMac } from "renderer/utils";
-import { isTruthy } from "shared/utils/guards";
-
-export default function SettingsUi() {
-    const Settings = useSettings();
-    const supportsWindowsTransparency = VesktopNative.app.supportsWindowsTransparency();
-
-    const { autostart } = VesktopNative;
-    const [autoStartEnabled, setAutoStartEnabled] = useState(autostart.isEnabled());
-
-    const allSwitches: Array<false | [keyof typeof Settings, string, string, boolean?, (() => boolean)?]> = [
-        [
-            "customTitleBar",
-            "Discord Titlebar",
-            "Use Discord's custom title bar instead of the native system one. Requires a full restart."
-        ],
-        !isMac && ["tray", "Tray Icon", "Add a tray icon for Vesktop", true],
-        !isMac && [
-            "minimizeToTray",
-            "Minimize to tray",
-            "Hitting X will make Vesktop minimize to the tray instead of closing",
-            true,
-            () => Settings.tray ?? true
-        ],
-        ["arRPC", "Rich Presence", "Enables Rich Presence via arRPC", false],
-        [
-            "disableMinSize",
-            "Disable minimum window size",
-            "Allows you to make the window as small as your heart desires"
-        ],
-        ["staticTitle", "Static Title", 'Makes the window title "Vesktop" instead of changing to the current page'],
-        [
-            "enableMenu",
-            "Enable Menu Bar",
-            "Enables the application menu bar. Press ALT to toggle visibility. Incompatible with 'Discord Titlebar'"
-        ],
-        ["disableSmoothScroll", "Disable smooth scrolling", "Disables smooth scrolling in Vesktop", false],
-        ["hardwareAcceleration", "Hardware Acceleration", "Enable hardware acceleration", true],
-        ["splashTheming", "Splash theming", "Adapt the splash window colors to your custom theme", false],
-        [
-            "openLinksWithElectron",
-            "Open Links in app (experimental)",
-            "Opens links in a new Vesktop window instead of your web browser"
-        ],
-        ["checkUpdates", "Check for updates", "Automatically check for Vesktop updates", true]
-    ];
-
-    const switches = allSwitches.filter(isTruthy);
-
-    return (
-        <Forms.FormSection>
-            <Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">
-                Vesktop Settings
-            </Text>
-
-            <Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>Discord Branch</Forms.FormTitle>
-            <Select
-                placeholder="Stable"
-                options={[
-                    { label: "Stable", value: "stable", default: true },
-                    { label: "Canary", value: "canary" },
-                    { label: "PTB", value: "ptb" }
-                ]}
-                closeOnSelect={true}
-                select={v => (Settings.discordBranch = v)}
-                isSelected={v => v === Settings.discordBranch}
-                serialize={s => s}
-            />
-
-            <Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
-
-            <Switch
-                value={autoStartEnabled}
-                onChange={async v => {
-                    await autostart[v ? "enable" : "disable"]();
-                    setAutoStartEnabled(v);
-                }}
-                note="Automatically start Vesktop on computer start-up"
-            >
-                Start With System
-            </Switch>
-
-            <Switch
-                value={Settings.appBadge ?? true}
-                onChange={v => {
-                    Settings.appBadge = v;
-                    if (v) setBadge();
-                    else VesktopNative.app.setBadgeCount(0);
-                }}
-                note="Show mention badge on the app icon"
-            >
-                Notification Badge
-            </Switch>
-
-            {switches.map(([key, text, note, def, predicate]) => (
-                <Switch
-                    value={(Settings[key as any] ?? def ?? false) && predicate?.() !== false}
-                    disabled={predicate && !predicate()}
-                    onChange={v => (Settings[key as any] = v)}
-                    note={note}
-                    key={key}
-                >
-                    {text}
-                </Switch>
-            ))}
-
-            {supportsWindowsTransparency && (
-                <>
-                    <Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>
-                        Transparency Options
-                    </Forms.FormTitle>
-                    <Forms.FormText className={Margins.bottom8}>
-                        Requires a full restart. You will need a theme that supports transparency for this to work.
-                    </Forms.FormText>
-
-                    <Select
-                        placeholder="None"
-                        options={[
-                            {
-                                label: "None",
-                                value: "none",
-                                default: true
-                            },
-                            {
-                                label: "Mica (incorporates system theme + desktop wallpaper to paint the background)",
-                                value: "mica"
-                            },
-                            { label: "Tabbed (variant of Mica with stronger background tinting)", value: "tabbed" },
-                            {
-                                label: "Acrylic (blurs the window behind Vesktop for a translucent background)",
-                                value: "acrylic"
-                            }
-                        ]}
-                        closeOnSelect={true}
-                        select={v => (Settings.transparencyOption = v)}
-                        isSelected={v => v === Settings.transparencyOption}
-                        serialize={s => s}
-                    />
-
-                    <Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
-                </>
-            )}
-
-            <Forms.FormTitle>Vencord Location</Forms.FormTitle>
-            <Forms.FormText>
-                Vencord files are loaded from{" "}
-                {Settings.vencordDir ? (
-                    <a
-                        href="about:blank"
-                        onClick={e => {
-                            e.preventDefault();
-                            VesktopNative.fileManager.showItemInFolder(Settings.vencordDir!);
-                        }}
-                    >
-                        {Settings.vencordDir}
-                    </a>
-                ) : (
-                    "the default location"
-                )}
-            </Forms.FormText>
-            <div className="vcd-location-btns">
-                <Button
-                    size={Button.Sizes.SMALL}
-                    onClick={async () => {
-                        const choice = await VesktopNative.fileManager.selectVencordDir();
-                        switch (choice) {
-                            case "cancelled":
-                                return;
-                            case "invalid":
-                                Toasts.show({
-                                    message:
-                                        "You did not choose a valid Vencord install. Make sure you're selecting the dist dir!",
-                                    id: Toasts.genId(),
-                                    type: Toasts.Type.FAILURE
-                                });
-                                return;
-                        }
-                        Settings.vencordDir = choice;
-                    }}
-                >
-                    Change
-                </Button>
-                <Button
-                    size={Button.Sizes.SMALL}
-                    color={Button.Colors.RED}
-                    onClick={() => (Settings.vencordDir = void 0)}
-                >
-                    Reset
-                </Button>
-            </div>
-        </Forms.FormSection>
-    );
-}
diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts
index a6ab091..97ca03e 100644
--- a/src/renderer/components/index.ts
+++ b/src/renderer/components/index.ts
@@ -5,4 +5,3 @@
  */
 
 export * as ScreenShare from "./ScreenSharePicker";
-export { default as Settings } from "./Settings";
diff --git a/src/renderer/components/settings/AutoStartToggle.tsx b/src/renderer/components/settings/AutoStartToggle.tsx
new file mode 100644
index 0000000..e0350d6
--- /dev/null
+++ b/src/renderer/components/settings/AutoStartToggle.tsx
@@ -0,0 +1,26 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { Switch, useState } from "@vencord/types/webpack/common";
+
+import { SettingsComponent } from "./Settings";
+
+export const AutoStartToggle: SettingsComponent = () => {
+    const [autoStartEnabled, setAutoStartEnabled] = useState(VesktopNative.autostart.isEnabled());
+
+    return (
+        <Switch
+            value={autoStartEnabled}
+            onChange={async v => {
+                await VesktopNative.autostart[v ? "enable" : "disable"]();
+                setAutoStartEnabled(v);
+            }}
+            note="Automatically start Vesktop on computer start-up"
+        >
+            Start With System
+        </Switch>
+    );
+};
diff --git a/src/renderer/components/settings/DiscordBranchPicker.tsx b/src/renderer/components/settings/DiscordBranchPicker.tsx
new file mode 100644
index 0000000..c0b840d
--- /dev/null
+++ b/src/renderer/components/settings/DiscordBranchPicker.tsx
@@ -0,0 +1,26 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { Select } from "@vencord/types/webpack/common";
+
+import { SettingsComponent } from "./Settings";
+
+export const DiscordBranchPicker: SettingsComponent = ({ settings }) => {
+    return (
+        <Select
+            placeholder="Stable"
+            options={[
+                { label: "Stable", value: "stable", default: true },
+                { label: "Canary", value: "canary" },
+                { label: "PTB", value: "ptb" }
+            ]}
+            closeOnSelect={true}
+            select={v => (settings.discordBranch = v)}
+            isSelected={v => v === settings.discordBranch}
+            serialize={s => s}
+        />
+    );
+};
diff --git a/src/renderer/components/settings/NotificationBadgeToggle.tsx b/src/renderer/components/settings/NotificationBadgeToggle.tsx
new file mode 100644
index 0000000..1cf1d19
--- /dev/null
+++ b/src/renderer/components/settings/NotificationBadgeToggle.tsx
@@ -0,0 +1,26 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { Switch } from "@vencord/types/webpack/common";
+import { setBadge } from "renderer/appBadge";
+
+import { SettingsComponent } from "./Settings";
+
+export const NotificationBadgeToggle: SettingsComponent = ({ settings }) => {
+    return (
+        <Switch
+            value={settings.appBadge ?? true}
+            onChange={v => {
+                settings.appBadge = v;
+                if (v) setBadge();
+                else VesktopNative.app.setBadgeCount(0);
+            }}
+            note="Show mention badge on the app icon"
+        >
+            Notification Badge
+        </Switch>
+    );
+};
diff --git a/src/renderer/components/settings/Settings.tsx b/src/renderer/components/settings/Settings.tsx
new file mode 100644
index 0000000..cc6b3c2
--- /dev/null
+++ b/src/renderer/components/settings/Settings.tsx
@@ -0,0 +1,170 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import "./settings.css";
+
+import { Forms, Switch, Text } from "@vencord/types/webpack/common";
+import { ComponentType } from "react";
+import { Settings, useSettings } from "renderer/settings";
+import { isMac, isWindows } from "renderer/utils";
+
+import { AutoStartToggle } from "./AutoStartToggle";
+import { DiscordBranchPicker } from "./DiscordBranchPicker";
+import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
+import { VencordLocationPicker } from "./VencordLocationPicker";
+import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
+
+interface BooleanSetting {
+    key: keyof typeof Settings.store;
+    title: string;
+    description: string;
+    defaultValue: boolean;
+    disabled?(): boolean;
+    invisible?(): boolean;
+}
+
+export type SettingsComponent = ComponentType<{ settings: typeof Settings.store }>;
+
+const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>> = {
+    "Discord Branch": [DiscordBranchPicker],
+    "System Startup & Performance": [
+        AutoStartToggle,
+        {
+            key: "hardwareAcceleration",
+            title: "Hardware Acceleration",
+            description: "Enable hardware acceleration",
+            defaultValue: true
+        }
+    ],
+    "User Interface": [
+        {
+            key: "customTitleBar",
+            title: "Discord Titlebar",
+            description: "Use Discord's custom title bar instead of the native system one. Requires a full restart.",
+            defaultValue: isWindows
+        },
+        {
+            key: "staticTitle",
+            title: "Static Title",
+            description: 'Makes the window title "Vesktop" instead of changing to the current page',
+            defaultValue: false
+        },
+        {
+            key: "enableMenu",
+            title: "Enable Menu Bar",
+            description: "Enables the application menu bar. Press ALT to toggle visibility.",
+            defaultValue: false,
+            disabled: () => Settings.store.customTitleBar ?? isWindows
+        },
+        {
+            key: "splashTheming",
+            title: "Splash theming",
+            description: "Adapt the splash window colors to your custom theme",
+            defaultValue: false
+        },
+        WindowsTransparencyControls
+    ],
+    Behaviour: [
+        {
+            key: "tray",
+            title: "Tray Icon",
+            description: "Add a tray icon for Vesktop",
+            defaultValue: true,
+            invisible: () => isMac
+        },
+        {
+            key: "minimizeToTray",
+            title: "Minimize to tray",
+            description: "Hitting X will make Vesktop minimize to the tray instead of closing",
+            defaultValue: true,
+            invisible: () => isMac,
+            disabled: () => Settings.store.tray === false
+        },
+        {
+            key: "disableMinSize",
+            title: "Disable minimum window size",
+            description: "Allows you to make the window as small as your heart desires",
+            defaultValue: false
+        },
+        {
+            key: "disableSmoothScroll",
+            title: "Disable smooth scrolling",
+            description: "Disables smooth scrolling",
+            defaultValue: false
+        }
+    ],
+    "Notifications & Updates": [
+        NotificationBadgeToggle,
+        {
+            key: "checkUpdates",
+            title: "Check for updates",
+            description: "Automatically check for Vesktop updates",
+            defaultValue: true
+        }
+    ],
+    Miscelleanous: [
+        {
+            key: "arRPC",
+            title: "Rich Presence",
+            description: "Enables Rich Presence via arRPC",
+            defaultValue: false
+        },
+
+        {
+            key: "openLinksWithElectron",
+            title: "Open Links in app (experimental)",
+            description: "Opens links in a new Vesktop window instead of your web browser",
+            defaultValue: false
+        }
+    ],
+    "Vencord Location": [VencordLocationPicker]
+};
+
+function SettingsSections() {
+    const Settings = useSettings();
+
+    const sections = Object.entries(SettingsOptions).map(([title, settings]) => (
+        <Forms.FormSection
+            title={title}
+            key={title}
+            className="vcd-settings-section"
+            titleClassName="vcd-settings-title"
+        >
+            {settings.map(Setting => {
+                if (typeof Setting === "function") return <Setting settings={Settings} />;
+
+                const { defaultValue, title, description, key, disabled, invisible } = Setting;
+                if (invisible?.()) return null;
+
+                return (
+                    <Switch
+                        value={Settings[key as any] ?? defaultValue}
+                        onChange={v => (Settings[key as any] = v)}
+                        note={description}
+                        disabled={disabled?.()}
+                        key={key}
+                    >
+                        {title}
+                    </Switch>
+                );
+            })}
+        </Forms.FormSection>
+    ));
+
+    return <>{sections}</>;
+}
+
+export default function SettingsUi() {
+    return (
+        <Forms.FormSection>
+            <Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">
+                Vesktop Settings
+            </Text>
+
+            <SettingsSections />
+        </Forms.FormSection>
+    );
+}
diff --git a/src/renderer/components/settings/VencordLocationPicker.tsx b/src/renderer/components/settings/VencordLocationPicker.tsx
new file mode 100644
index 0000000..3759ae2
--- /dev/null
+++ b/src/renderer/components/settings/VencordLocationPicker.tsx
@@ -0,0 +1,62 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { Button, Forms, Toasts } from "@vencord/types/webpack/common";
+
+import { SettingsComponent } from "./Settings";
+
+export const VencordLocationPicker: SettingsComponent = ({ settings }) => {
+    return (
+        <>
+            <Forms.FormText>
+                Vencord files are loaded from{" "}
+                {settings.vencordDir ? (
+                    <a
+                        href="about:blank"
+                        onClick={e => {
+                            e.preventDefault();
+                            VesktopNative.fileManager.showItemInFolder(settings.vencordDir!);
+                        }}
+                    >
+                        {settings.vencordDir}
+                    </a>
+                ) : (
+                    "the default location"
+                )}
+            </Forms.FormText>
+            <div className="vcd-location-btns">
+                <Button
+                    size={Button.Sizes.SMALL}
+                    onClick={async () => {
+                        const choice = await VesktopNative.fileManager.selectVencordDir();
+                        switch (choice) {
+                            case "cancelled":
+                                return;
+                            case "invalid":
+                                Toasts.show({
+                                    message:
+                                        "You did not choose a valid Vencord install. Make sure you're selecting the dist dir!",
+                                    id: Toasts.genId(),
+                                    type: Toasts.Type.FAILURE
+                                });
+                                return;
+                        }
+                        settings.vencordDir = choice;
+                    }}
+                >
+                    Change
+                </Button>
+                <Button
+                    size={Button.Sizes.SMALL}
+                    color={Button.Colors.RED}
+                    onClick={() => (settings.vencordDir = void 0)}
+                >
+                    Reset
+                </Button>
+            </div>
+        </>
+    );
+};
diff --git a/src/renderer/components/settings/WindowsTransparencyControls.tsx b/src/renderer/components/settings/WindowsTransparencyControls.tsx
new file mode 100644
index 0000000..0ef9a8a
--- /dev/null
+++ b/src/renderer/components/settings/WindowsTransparencyControls.tsx
@@ -0,0 +1,49 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { Margins } from "@vencord/types/utils";
+import { Forms, Select } from "@vencord/types/webpack/common";
+
+import { SettingsComponent } from "./Settings";
+
+export const WindowsTransparencyControls: SettingsComponent = ({ settings }) => {
+    if (!VesktopNative.app.supportsWindowsTransparency()) return null;
+
+    return (
+        <>
+            <Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>Transparency Options</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom8}>
+                Requires a full restart. You will need a theme that supports transparency for this to work.
+            </Forms.FormText>
+
+            <Select
+                placeholder="None"
+                options={[
+                    {
+                        label: "None",
+                        value: "none",
+                        default: true
+                    },
+                    {
+                        label: "Mica (incorporates system theme + desktop wallpaper to paint the background)",
+                        value: "mica"
+                    },
+                    { label: "Tabbed (variant of Mica with stronger background tinting)", value: "tabbed" },
+                    {
+                        label: "Acrylic (blurs the window behind Vesktop for a translucent background)",
+                        value: "acrylic"
+                    }
+                ]}
+                closeOnSelect={true}
+                select={v => (settings.transparencyOption = v)}
+                isSelected={v => v === settings.transparencyOption}
+                serialize={s => s}
+            />
+
+            <Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
+        </>
+    );
+};
diff --git a/src/renderer/components/settings.css b/src/renderer/components/settings/settings.css
similarity index 53%
rename from src/renderer/components/settings.css
rename to src/renderer/components/settings/settings.css
index d82cec9..d55ff50 100644
--- a/src/renderer/components/settings.css
+++ b/src/renderer/components/settings/settings.css
@@ -4,3 +4,11 @@
     gap: 0.5em;
     margin-top: 0.5em;
 }
+
+.vcd-settings-section {
+    margin-top: 1.5rem;
+}
+
+.vcd-settings-title {
+    margin-bottom: 0.5rem;
+}
\ No newline at end of file
diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index ebe6bc6..1ccc2e4 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -15,7 +15,7 @@ export * as Components from "./components";
 import { findByPropsLazy } from "@vencord/types/webpack";
 import { FluxDispatcher } from "@vencord/types/webpack/common";
 
-import SettingsUi from "./components/Settings";
+import SettingsUi from "./components/settings/Settings";
 import { Settings } from "./settings";
 export { Settings };