feat(settings): new settings design (#261)

14 files changed, 369 insertions, 162 deletions

diff --git a/src/components/PatchHelper.tsx b/src/components/PatchHelper.tsx
index 82b804a..0314de8 100644
--- a/src/components/PatchHelper.tsx
+++ b/src/components/PatchHelper.tsx
@@ -18,7 +18,7 @@
 
 import { debounce } from "../utils/debounce";
 import { makeCodeblock } from "../utils/misc";
-import { Button, Clipboard, Forms, Margins, Parser, React, Switch, TextInput } from "../webpack/common";
+import { Button, Clipboard, Forms, Margins, Parser, React, Switch, Text, TextInput } from "../webpack/common";
 import { search } from "../webpack/webpack";
 import { CheckedTextInput } from "./CheckedTextInput";
 import ErrorBoundary from "./ErrorBoundary";
@@ -243,7 +243,8 @@ function PatchHelper() {
     }
 
     return (
-        <>
+        <Forms.FormSection>
+            <Text variant="heading-md/normal" tag="h2" className={Margins.marginBottom8}>Patch Helper</Text>
             <Forms.FormTitle>find</Forms.FormTitle>
             <TextInput
                 type="text"
@@ -288,7 +289,7 @@ function PatchHelper() {
                     <Button onClick={() => Clipboard.copy(code)}>Copy to Clipboard</Button>
                 </>
             )}
-        </>
+        </Forms.FormSection>
     );
 }
 
diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx
index 39fb911..f16d55c 100644
--- a/src/components/PluginSettings/index.tsx
+++ b/src/components/PluginSettings/index.tsx
@@ -243,9 +243,9 @@ export default ErrorBoundary.wrap(function Settings() {
     };
 
     return (
-        <Forms.FormSection tag="h1" title="Vencord">
+        <Forms.FormSection>
             <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
-                Plugins
+                Filters
             </Forms.FormTitle>
 
             <ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
@@ -268,6 +268,8 @@ export default ErrorBoundary.wrap(function Settings() {
                 </div>
             </div>
 
+            <Forms.FormTitle className={Margins.marginTop20}>Plugins</Forms.FormTitle>
+
             <div style={styles.PluginsGrid}>
                 {sortedPlugins?.length ? sortedPlugins
                     .filter(a => !a.required && !dependencyCheck(a.name, depMap).length && pluginFilter(a))
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
deleted file mode 100644
index f8e7495..0000000
--- a/src/components/Settings.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { useSettings } from "../api/settings";
-import IpcEvents from "../utils/IpcEvents";
-import { useAwaiter } from "../utils/misc";
-import { downloadSettingsBackup, uploadSettingsBackup } from "../utils/settingsSync";
-import { Button, Card, Forms, Margins, React, Switch } from "../webpack/common";
-import DonateButton from "./DonateButton";
-import ErrorBoundary from "./ErrorBoundary";
-import { Flex } from "./Flex";
-import { handleComponentFailed } from "./handleComponentFailed";
-
-export default ErrorBoundary.wrap(function Settings() {
-    const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
-    const settings = useSettings();
-
-    return (
-        <Forms.FormSection tag="h1" title="Vencord">
-            <Card style={{
-                padding: "1em",
-                display: "flex",
-                flexDirection: "row",
-                marginBottom: "1em"
-            }}>
-                <div>
-                    <Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
-                    <Forms.FormText>
-                        Please consider supporting the Development of Vencord by donating!
-                    </Forms.FormText>
-                    <DonateButton style={{ transform: "translateX(-1em)" }} />
-                </div>
-                <img
-                    role="presentation"
-                    src="https://cdn.discordapp.com/emojis/1026533090627174460.png"
-                    alt=""
-                    style={{ marginLeft: "auto", transform: "rotate(10deg)" }}
-                />
-            </Card>
-
-            <Forms.FormTitle tag="h5">
-                Settings
-            </Forms.FormTitle>
-
-            <Forms.FormText className={Margins.marginBottom8}>
-                Settings Directory: <code style={{ userSelect: "text", cursor: "text" }}>{settingsDir}</code>
-            </Forms.FormText>
-
-            {!IS_WEB && <Flex className={Margins.marginBottom20}>
-                <Button
-                    onClick={() => window.DiscordNative.app.relaunch()}
-                    size={Button.Sizes.SMALL}
-                    color={Button.Colors.GREEN}
-                >
-                    Reload
-                </Button>
-                <Button
-                    onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)}
-                    size={Button.Sizes.SMALL}
-                    disabled={settingsDirPending}
-                >
-                    Launch Directory
-                </Button>
-                <Button
-                    onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_MONACO_EDITOR)}
-                    size={Button.Sizes.SMALL}
-                    disabled={settingsDir === "Loading..."}
-                >
-                    Open QuickCSS File
-                </Button>
-            </Flex>}
-
-            {IS_WEB && <Button
-                onClick={() => require("./Monaco").launchMonacoEditor()}
-                size={Button.Sizes.SMALL}
-                disabled={settingsDir === "Loading..."}
-            >
-                Open QuickCSS File
-            </Button>}
-
-            <Forms.FormDivider />
-            <Switch
-                value={settings.useQuickCss}
-                onChange={(v: boolean) => settings.useQuickCss = v}
-                note="Loads styles from your QuickCss file"
-            >
-                Use QuickCss
-            </Switch>
-            {!IS_WEB && <Switch
-                value={settings.enableReactDevtools}
-                onChange={(v: boolean) => settings.enableReactDevtools = v}
-                note="Requires a full restart"
-            >
-                Enable React Developer Tools
-            </Switch>}
-            {!IS_WEB && <Switch
-                value={settings.notifyAboutUpdates}
-                onChange={(v: boolean) => settings.notifyAboutUpdates = v}
-                note="Shows a Toast on StartUp"
-            >
-                Get notified about new Updates
-            </Switch>}
-
-            <Forms.FormDivider />
-            <Forms.FormTitle tag="h5">Settings Sync</Forms.FormTitle>
-            <Flex>
-                <Button
-                    onClick={uploadSettingsBackup}
-                    size={Button.Sizes.SMALL}
-                >
-                    Import Settings
-                </Button>
-                <Button
-                    onClick={downloadSettingsBackup}
-                    size={Button.Sizes.SMALL}
-                >
-                    Export Settings
-                </Button>
-            </Flex>
-        </Forms.FormSection >
-    );
-}, {
-    message: "Failed to render the Settings. If this persists, try using the installer to reinstall!",
-    onError: handleComponentFailed,
-});
diff --git a/src/components/VencordSettings/BackupRestoreTab.tsx b/src/components/VencordSettings/BackupRestoreTab.tsx
new file mode 100644
index 0000000..ce0bdaa
--- /dev/null
+++ b/src/components/VencordSettings/BackupRestoreTab.tsx
@@ -0,0 +1,69 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { downloadSettingsBackup, uploadSettingsBackup } from "../../utils/settingsSync";
+import { Button, Card, Forms, Margins, Text } from "../../webpack/common";
+import ErrorBoundary from "../ErrorBoundary";
+import { Flex } from "../Flex";
+
+function BackupRestoreTab() {
+    return (
+        <Forms.FormSection title="Settings Sync">
+            <Card style={{
+                backgroundColor: "var(--info-warning-background)",
+                borderColor: "var(--info-warning-foreground)",
+                color: "var(--info-warning-text)",
+                padding: "1em",
+                marginBottom: "0.5em",
+            }}>
+                <Flex flexDirection="column">
+                    <strong>Warning</strong>
+                    <span>Importing a settings file will overwrite your current settings.</span>
+                </Flex>
+            </Card>
+            <Text variant="text-md/normal" className={Margins.marginBottom8}>
+                You can import and export your Vencord settings as a JSON file.
+                This allows you to easily transfer your settings to another device,
+                or recover your settings after reinstalling Vencord or Discord.
+            </Text>
+            <Text variant="text-md/normal" className={Margins.marginBottom8}>
+                Settings Export contains:
+                <ul>
+                    <li>&mdash; Custom QuickCSS</li>
+                    <li>&mdash; Plugin Settings</li>
+                </ul>
+            </Text>
+            <Flex>
+                <Button
+                    onClick={uploadSettingsBackup}
+                    size={Button.Sizes.SMALL}
+                >
+                    Import Settings
+                </Button>
+                <Button
+                    onClick={downloadSettingsBackup}
+                    size={Button.Sizes.SMALL}
+                >
+                    Export Settings
+                </Button>
+            </Flex>
+        </Forms.FormSection>
+    );
+}
+
+export default ErrorBoundary.wrap(BackupRestoreTab);
diff --git a/src/components/VencordSettings/PluginsTab.tsx b/src/components/VencordSettings/PluginsTab.tsx
new file mode 100644
index 0000000..0c89686
--- /dev/null
+++ b/src/components/VencordSettings/PluginsTab.tsx
@@ -0,0 +1,22 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import ErrorBoundary from "../ErrorBoundary";
+import PluginSettings from "../PluginSettings";
+
+export default ErrorBoundary.wrap(PluginSettings);
diff --git a/src/components/Updater.tsx b/src/components/VencordSettings/Updater.tsx
index 8abdf28..8f2b75b 100644
--- a/src/components/Updater.tsx
+++ b/src/components/VencordSettings/Updater.tsx
@@ -18,14 +18,14 @@
 
 import gitHash from "~git-hash";
 
-import { classes, useAwaiter } from "../utils/misc";
-import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "../utils/updater";
-import { Alerts, Button, Card, Forms, Margins, Parser, React, Toasts } from "../webpack/common";
-import ErrorBoundary from "./ErrorBoundary";
-import { ErrorCard } from "./ErrorCard";
-import { Flex } from "./Flex";
-import { handleComponentFailed } from "./handleComponentFailed";
-import { Link } from "./Link";
+import { classes, useAwaiter } from "../../utils/misc";
+import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "../../utils/updater";
+import { Alerts, Button, Card, Forms, Margins, Parser, React, Toasts } from "../../webpack/common";
+import ErrorBoundary from "../ErrorBoundary";
+import { ErrorCard } from "../ErrorCard";
+import { Flex } from "../Flex";
+import { handleComponentFailed } from "../handleComponentFailed";
+import { Link } from "../Link";
 
 function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>>, action: () => any) {
     return async () => {
@@ -192,7 +192,7 @@ function Updater() {
     };
 
     return (
-        <Forms.FormSection tag="h1" title="Vencord Updater">
+        <Forms.FormSection>
             <Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
 
             <Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : (
diff --git a/src/components/VencordSettings/VencordTab.tsx b/src/components/VencordSettings/VencordTab.tsx
new file mode 100644
index 0000000..94add5e
--- /dev/null
+++ b/src/components/VencordSettings/VencordTab.tsx
@@ -0,0 +1,134 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+
+import { useSettings } from "../../api/settings";
+import IpcEvents from "../../utils/IpcEvents";
+import { useAwaiter } from "../../utils/misc";
+import { Button, Card, Forms, React, Switch } from "../../webpack/common";
+import DonateButton from "../DonateButton";
+import ErrorBoundary from "../ErrorBoundary";
+
+const st = (style: string) => `vcSettings${style}`;
+
+function VencordSettings() {
+    const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
+    const settings = useSettings();
+
+    return (
+        <React.Fragment>
+            <DonateCard />
+            <Forms.FormSection title="Quick Actions">
+                <Card className={st("QuickActionCard")}>
+                    {IS_WEB ? (
+                        <Button
+                            onClick={() => require("./Monaco").launchMonacoEditor()}
+                            size={Button.Sizes.SMALL}
+                            disabled={settingsDir === "Loading..."}>
+                            Open QuickCSS File
+                        </Button>
+                    ) : (
+                        <React.Fragment>
+                            <Button
+                                onClick={() => window.DiscordNative.app.relaunch()}
+                                size={Button.Sizes.SMALL}>
+                                Restart Client
+                            </Button>
+                            <Button
+                                onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_MONACO_EDITOR)}
+                                size={Button.Sizes.SMALL}
+                                disabled={settingsDir === "Loading..."}>
+                                Open QuickCSS File
+                            </Button>
+                            <Button
+                                onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)}
+                                size={Button.Sizes.SMALL}
+                                disabled={settingsDirPending}>
+                                Open Settings Folder
+                            </Button>
+                            <Button
+                                onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_EXTERNAL, "https://github.com/Vendicated/Vencord")}
+                                size={Button.Sizes.SMALL}
+                                disabled={settingsDirPending}>
+                                Open in GitHub
+                            </Button>
+                        </React.Fragment>
+                    )}
+                </Card>
+            </Forms.FormSection>
+
+            <Forms.FormDivider />
+
+            <Forms.FormSection title="Settings">
+                <Switch
+                    value={settings.useQuickCss}
+                    onChange={(v: boolean) => settings.useQuickCss = v}
+                    note="Loads styles from your QuickCss file">
+                    Use QuickCss
+                </Switch>
+                {!IS_WEB && (
+                    <React.Fragment>
+                        <Switch
+                            value={settings.enableReactDevtools}
+                            onChange={(v: boolean) => settings.enableReactDevtools = v}
+                            note="Requires a full restart">
+                            Enable React Developer Tools
+                        </Switch>
+                        <Switch
+                            value={settings.notifyAboutUpdates}
+                            onChange={(v: boolean) => settings.notifyAboutUpdates = v}
+                            note="Shows a Toast on StartUp">
+                            Get notified about new Updates
+                        </Switch>
+                    </React.Fragment>
+                )}
+
+            </Forms.FormSection>
+        </React.Fragment>
+    );
+}
+
+
+
+function DonateCard() {
+    return (
+        <Card style={{
+            padding: "1em",
+            display: "flex",
+            flexDirection: "row",
+            marginBottom: "1em",
+            marginTop: "1em"
+        }}>
+            <div>
+                <Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
+                <Forms.FormText>
+                    Please consider supporting the Development of Vencord by donating!
+                </Forms.FormText>
+                <DonateButton style={{ transform: "translateX(-1em)" }} />
+            </div>
+            <img
+                role="presentation"
+                src="https://cdn.discordapp.com/emojis/1026533090627174460.png"
+                alt=""
+                style={{ marginLeft: "auto", transform: "rotate(10deg)" }}
+            />
+        </Card>
+    );
+}
+
+export default ErrorBoundary.wrap(VencordSettings);
diff --git a/src/components/VencordSettings/index.tsx b/src/components/VencordSettings/index.tsx
new file mode 100644
index 0000000..3701897
--- /dev/null
+++ b/src/components/VencordSettings/index.tsx
@@ -0,0 +1,84 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import cssText from "~fileContent/settingsStyles.css";
+
+import { lazyWebpack } from "../../utils/misc";
+import { filters } from "../../webpack";
+import { Forms, React, Router, Text } from "../../webpack/common";
+import ErrorBoundary from "../ErrorBoundary";
+import BackupRestoreTab from "./BackupRestoreTab";
+import PluginsTab from "./PluginsTab";
+import Updater from "./Updater";
+import VencordSettings from "./VencordTab";
+
+const style = document.createElement("style");
+style.textContent = cssText;
+document.head.appendChild(style);
+
+const st = (style: string) => `vcSettings${style}`;
+
+const TabBar = lazyWebpack(filters.byCode('[role="tab"][aria-disabled="false"]'));
+
+interface SettingsProps {
+    tab: string;
+}
+
+const SettingsTabs = {
+    VencordSettings: { name: "Vencord", component: () => <VencordSettings /> },
+    VencordPlugins: { name: "Plugins", component: () => <PluginsTab /> },
+    VencordThemes: { name: "Themes", component: () => <Text variant="text-md/medium">Coming soon to a Vencord near you!</Text> },
+    VencordUpdater: { name: "Updater", component: () => Updater ? <Updater /> : null },
+    VencordSettingsSync: { name: "Backup & Restore", component: () => <BackupRestoreTab /> },
+};
+
+
+function Settings(props: SettingsProps) {
+    const { tab = "VencordSettings" } = props;
+
+    const CurrentTab = SettingsTabs[tab]?.component ?? null;
+
+    return <Forms.FormSection>
+        <Text variant="heading-md/normal" tag="h2">Vencord Settings</Text>
+
+        <TabBar
+            type={TabBar.Types.TOP}
+            look={TabBar.Looks.BRAND}
+            className={st("TabBar")}
+            selectedItem={tab}
+            onItemSelect={Router.open}
+        >
+            {Object.entries(SettingsTabs).map(([key, { name }]) => {
+                return <TabBar.Item
+                    id={key}
+                    className={st("TabBarItem")}
+                    key={key}>
+                    {name}
+                </TabBar.Item>;
+            })}
+        </TabBar>
+        <Forms.FormDivider />
+        <CurrentTab />
+    </Forms.FormSection >;
+}
+
+export default function (props: SettingsProps) {
+    return <ErrorBoundary>
+        <Settings tab={props.tab} />
+    </ErrorBoundary>;
+}
diff --git a/src/components/VencordSettings/settingsStyles.css b/src/components/VencordSettings/settingsStyles.css
new file mode 100644
index 0000000..e90ef14
--- /dev/null
+++ b/src/components/VencordSettings/settingsStyles.css
@@ -0,0 +1,23 @@
+.vcSettingsTabBar {
+    margin-top: 20px;
+    margin-bottom: -2px;
+    border-bottom: 2px solid var(--background-modifier-accent);
+}
+
+.vcSettingsTabBarItem {
+    margin-right: 32px;
+    padding-bottom: 16px;
+    margin-bottom: -2px;
+}
+
+.vcSettingsQuickActionCard {
+    padding: 1em;
+    display: flex;
+    gap: 1em;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    flex-direction: row;
+    margin-bottom: 1em;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 80d2cd1..3ee53b0 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -18,5 +18,4 @@
 
 export { default as PatchHelper } from "./PatchHelper";
 export { default as PluginSettings } from "./PluginSettings";
-export { default as Settings } from "./Settings";
-export { default as Updater } from "./Updater";
+export { default as VencordSettings } from "./VencordSettings";
diff --git a/src/plugins/settings.tsx b/src/plugins/settings.tsx
index ec42956..2777572 100644
--- a/src/plugins/settings.tsx
+++ b/src/plugins/settings.tsx
@@ -19,8 +19,11 @@
 import gitHash from "~git-hash";
 
 import { Devs } from "../utils/constants";
+import { LazyComponent } from "../utils/misc";
 import definePlugin from "../utils/types";
 
+const SettingsComponent = LazyComponent(() => require("../components/VencordSettings").default);
+
 export default definePlugin({
     name: "Settings",
     description: "Adds Settings UI and debug info",
@@ -42,13 +45,15 @@ export default definePlugin({
         replacement: {
             match: /\{section:(.{1,2})\.ID\.HEADER,\s*label:(.{1,2})\..{1,2}\.Messages\.ACTIVITY_SETTINGS\}/,
             replace: (m, mod) => {
-                const updater = !IS_WEB ? '{section:"VencordUpdater",label:"Updater",element:Vencord.Components.Updater},' : "";
-                const patchHelper = IS_DEV ? '{section:"VencordPatchHelper",label:"PatchHelper",element:Vencord.Components.PatchHelper},' : "";
+                const updater = !IS_WEB ? '{section:"VencordUpdater",label:"Updater",element:Vencord.Plugins.plugins.Settings.tabs.updater},' : "";
+                const patchHelper = IS_DEV ? '{section:"VencordPatchHelper",label:"Patch Helper",element:Vencord.Components.PatchHelper},' : "";
                 return (
                     `{section:${mod}.ID.HEADER,label:"Vencord"},` +
-                    '{section:"VencordSetting",label:"Vencord",element:Vencord.Components.Settings},' +
-                    '{section:"VencordPlugins",label:"Plugins",element:Vencord.Components.PluginSettings},' +
+                    '{section:"VencordSettings",label:"Vencord",element:Vencord.Plugins.plugins.Settings.tabs.vencord},' +
+                    '{section:"VencordPlugins",label:"Plugins",element:Vencord.Plugins.plugins.Settings.tabs.plugins},' +
+                    '{section:"VencordThemes",label:"Themes",element:Vencord.Plugins.plugins.Settings.tabs.themes},' +
                     updater +
+                    '{section:"VencordSettingsSync",label:"Backup & Restore",element:Vencord.Plugins.plugins.Settings.tabs.sync},' +
                     patchHelper +
                     `{section:${mod}.ID.DIVIDER},${m}`
                 );
@@ -56,6 +61,14 @@ export default definePlugin({
         }
     }],
 
+    tabs: {
+        vencord: () => <SettingsComponent tab="VencordSettings" />,
+        plugins: () => <SettingsComponent tab="VencordPlugins" />,
+        themes: () => <SettingsComponent tab="VencordThemes" />,
+        updater: () => <SettingsComponent tab="VencordUpdater" />,
+        sync: () => <SettingsComponent tab="VencordSettingsSync" />
+    },
+
     get electronVersion() {
         return VencordNative.getVersions().electron || window.armcord?.electron || null;
     },
diff --git a/src/plugins/spotifyControls/SpotifyStore.ts b/src/plugins/spotifyControls/SpotifyStore.ts
index 0dad503..14f2331 100644
--- a/src/plugins/spotifyControls/SpotifyStore.ts
+++ b/src/plugins/spotifyControls/SpotifyStore.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import cssText from "~fileContent/styles.css";
+import cssText from "~fileContent/spotifyStyles.css";
 
 import IpcEvents from "../../utils/IpcEvents";
 import { lazyWebpack } from "../../utils/misc";
diff --git a/src/plugins/spotifyControls/styles.css b/src/plugins/spotifyControls/spotifyStyles.css
index 9c7b1c0..9c7b1c0 100644
--- a/src/plugins/spotifyControls/styles.css
+++ b/src/plugins/spotifyControls/spotifyStyles.css
diff --git a/src/webpack/common.tsx b/src/webpack/common.tsx
index 2f3768e..32f47e6 100644
--- a/src/webpack/common.tsx
+++ b/src/webpack/common.tsx
@@ -195,7 +195,7 @@ export type TextProps = React.PropsWithChildren & {
     className?: string;
 };
 
-export type TextVariant = "heading-sm/normal" | "heading-sm/medium" | "heading-sm/bold" | "heading-md/normal" | "heading-md/medium" | "heading-md/bold" | "heading-lg/normal" | "heading-lg/medium" | "heading-lg/bold" | "heading-xl/normal" | "heading-xl/medium" | "heading-xl/bold" | "heading-xxl/normal" | "heading-xxl/medium" | "heading-xxl/bold" | "eyebrow" | "heading-deprecated-14/normal" | "heading-deprecated-14/medium" | "heading-deprecated-14/bold" | "text-xxs/normal" | "text-xxs/medium" | "text-xxs/semibold" | "text-xxs/bold" | "text-xs/normal" | "text-xs/medium" | "text-xs/semibold" | "text-xs/bold" | "text-sm/normal" | "text-sm/medium" | "text-sm/semibold" | "text-sm/bold" | "text-md/normal" | "text-md/medium" | "text-md/semibold" | "text-md/bold" | "text-lg/normal" | "text-lg/medium" | "text-lg/semibold" | "text-lg/bold" | "display-md" | "display-lg" | "code";
+export type TextVariant = "heading-sm/normal" | "heading-sm/medium" | "heading-sm/bold" | "heading-md/normal" | "heading-md/medium" | "heading-md/bold" | "heading-lg/normal" | "heading-lg/medium" | "heading-lg/bold" | "heading-xl/normal" | "heading-xl/medium" | "heading-xl/bold" | "heading-xxl/normal" | "heading-xxl/medium" | "heading-xxl/bold" | "eyebrow" | "heading-deprecated-14/normal" | "heading-deprecated-14/medium" | "heading-deprecated-14/bold" | "text-xxs/normal" | "text-xxs/medium" | "text-xxs/semibold" | "text-xxs/bold" | "text-xs/normal" | "text-xs/medium" | "text-xs/semibold" | "text-xs/bold" | "text-sm/normal" | "text-sm/medium" | "text-sm/semibold" | "text-sm/bold" | "text-md/normal" | "text-md/medium" | "text-md/semibold" | "text-md/bold" | "text-lg/normal" | "text-lg/medium" | "text-lg/semibold" | "text-lg/bold" | "display-sm" | "display-md" | "display-lg" | "code";
 
 type RC<C> = React.ComponentType<React.PropsWithChildren<C & Record<string, any>>>;
 interface Menu {