From a748ad20858277c2edb0fc41334b01e176d6f746 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Fri, 3 Oct 2025 00:18:39 +0200
Subject: [PATCH 1/3] fix FormSwitch

---
 packages/discord-types/src/components.d.ts    | 13 ------
 src/components/FormDivider.css                |  5 ++
 src/components/FormDivider.tsx                | 13 ++++++
 src/components/FormSwitch.css                 | 23 ++++++++++
 src/components/FormSwitch.tsx                 | 46 +++++++++++++++++++
 src/components/{settings => }/Switch.css      |  2 +-
 src/components/{settings => }/Switch.tsx      |  0
 src/components/settings/AddonCard.tsx         |  2 +-
 src/components/settings/index.ts              |  2 +-
 .../tabs/patchHelper/ReplacementInput.tsx     | 12 ++---
 .../plugins/components/BooleanSetting.tsx     |  2 +-
 .../settings/tabs/sync/CloudTab.tsx           | 21 ++++-----
 .../settings/tabs/updater/index.tsx           | 21 ++++-----
 .../settings/tabs/vencord/index.tsx           | 12 ++---
 .../components/EncryptionModal.tsx            | 10 ++--
 src/plugins/translate/TranslateModal.tsx      | 12 ++---
 src/webpack/common/components.ts              |  4 +-
 17 files changed, 137 insertions(+), 63 deletions(-)
 create mode 100644 src/components/FormDivider.css
 create mode 100644 src/components/FormDivider.tsx
 create mode 100644 src/components/FormSwitch.css
 create mode 100644 src/components/FormSwitch.tsx
 rename src/components/{settings => }/Switch.css (97%)
 rename src/components/{settings => }/Switch.tsx (100%)

diff --git a/packages/discord-types/src/components.d.ts b/packages/discord-types/src/components.d.ts
index f9e778d8d..178cbdb00 100644
--- a/packages/discord-types/src/components.d.ts
+++ b/packages/discord-types/src/components.d.ts
@@ -161,19 +161,6 @@ export type Button = ComponentType<ButtonProps> & {
     Link: any;
 };
 
-export type Switch = ComponentType<PropsWithChildren<{
-    value: boolean;
-    onChange(value: boolean): void;
-
-    disabled?: boolean;
-    hideBorder?: boolean;
-    className?: string;
-    style?: CSSProperties;
-
-    note?: ReactNode;
-    tooltipNote?: ReactNode;
-}>>;
-
 export type CheckboxAligns = {
     CENTER: "center";
     TOP: "top";
diff --git a/src/components/FormDivider.css b/src/components/FormDivider.css
new file mode 100644
index 000000000..66f988d5a
--- /dev/null
+++ b/src/components/FormDivider.css
@@ -0,0 +1,5 @@
+.vc-form-divider {
+    border-top: thin solid var(--border-subtle);
+    width: 100%;
+    height: 1px;
+}
\ No newline at end of file
diff --git a/src/components/FormDivider.tsx b/src/components/FormDivider.tsx
new file mode 100644
index 000000000..f7465829e
--- /dev/null
+++ b/src/components/FormDivider.tsx
@@ -0,0 +1,13 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./FormDivider.css";
+
+import { classes } from "@utils/misc";
+
+export function FormDivider({ className }: { className?: string; }) {
+    return <div className={classes("vc-form-divider", className)} />;
+}
diff --git a/src/components/FormSwitch.css b/src/components/FormSwitch.css
new file mode 100644
index 000000000..d2a90064f
--- /dev/null
+++ b/src/components/FormSwitch.css
@@ -0,0 +1,23 @@
+.vc-form-switch-wrapper {
+    margin-bottom: 20px;
+}
+
+.vc-form-switch {
+    display: flex;
+    width: 100%;
+
+    > :last-child {
+        margin-left: auto;
+    }
+}
+
+.vc-form-switch-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 8px;
+}
+
+.vc-form-switch-border {
+    margin-top: 20px;
+}
\ No newline at end of file
diff --git a/src/components/FormSwitch.tsx b/src/components/FormSwitch.tsx
new file mode 100644
index 000000000..12b0ab127
--- /dev/null
+++ b/src/components/FormSwitch.tsx
@@ -0,0 +1,46 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./FormSwitch.css";
+
+import { classes } from "@utils/misc";
+import { Text } from "@webpack/common";
+import type { PropsWithChildren, ReactNode } from "react";
+
+import { FormDivider } from "./FormDivider";
+import { Switch } from "./Switch";
+
+export interface FormSwitchProps {
+    title: ReactNode;
+    description?: ReactNode;
+    value: boolean;
+    onChange(value: boolean): void;
+
+    className?: string;
+    disabled?: boolean;
+    hideBorder?: boolean;
+}
+
+export function FormSwitch({ onChange, title, value, description, disabled, className, hideBorder }: FormSwitchProps) {
+    return (
+        <div className="vc-form-switch-wrapper">
+            <div className={classes("vc-form-switch", className)}>
+                <div className={"vc-form-switch-text"}>
+                    <Text variant="text-md/medium">{title}</Text>
+                    {description && <Text variant="text-sm/normal">{description}</Text>}
+                </div>
+
+                <Switch checked={value} onChange={onChange} disabled={disabled} />
+            </div>
+            {!hideBorder && <FormDivider className="vc-form-switch-border" />}
+        </div>
+    );
+}
+
+/** Compatibility with Discord's old FormSwitch */
+export function FormSwitchCompat(props: PropsWithChildren<any>) {
+    return <FormSwitch {...props} title={props.children ?? ""} description={props.note} />;
+}
diff --git a/src/components/settings/Switch.css b/src/components/Switch.css
similarity index 97%
rename from src/components/settings/Switch.css
rename to src/components/Switch.css
index e6dcf5626..685f6b228 100644
--- a/src/components/settings/Switch.css
+++ b/src/components/Switch.css
@@ -1,3 +1,3 @@
 .vc-switch-slider {
     transition: 100ms transform ease-in-out;
-}
+}
\ No newline at end of file
diff --git a/src/components/settings/Switch.tsx b/src/components/Switch.tsx
similarity index 100%
rename from src/components/settings/Switch.tsx
rename to src/components/Switch.tsx
diff --git a/src/components/settings/AddonCard.tsx b/src/components/settings/AddonCard.tsx
index 3701d7cf2..0dc69d6f8 100644
--- a/src/components/settings/AddonCard.tsx
+++ b/src/components/settings/AddonCard.tsx
@@ -20,7 +20,7 @@ import "./AddonCard.css";
 
 import { classNameFactory } from "@api/Styles";
 import { AddonBadge } from "@components/settings/PluginBadge";
-import { Switch } from "@components/settings/Switch";
+import { Switch } from "@components/Switch";
 import { Text, useRef } from "@webpack/common";
 import type { MouseEventHandler, ReactNode } from "react";
 
diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts
index c793ef38c..a7b9cdef4 100644
--- a/src/components/settings/index.ts
+++ b/src/components/settings/index.ts
@@ -9,5 +9,5 @@ export * from "./DonateButton";
 export * from "./PluginBadge";
 export * from "./QuickAction";
 export * from "./SpecialCard";
-export * from "./Switch";
+export * from "../Switch";
 export * from "./tabs";
diff --git a/src/components/settings/tabs/patchHelper/ReplacementInput.tsx b/src/components/settings/tabs/patchHelper/ReplacementInput.tsx
index c028c4774..99b3bbc68 100644
--- a/src/components/settings/tabs/patchHelper/ReplacementInput.tsx
+++ b/src/components/settings/tabs/patchHelper/ReplacementInput.tsx
@@ -4,8 +4,9 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { FormSwitch } from "@components/FormSwitch";
 import { Margins } from "@utils/margins";
-import { Forms, Parser, Switch, TextInput, useEffect, useState } from "@webpack/common";
+import { Forms, Parser, TextInput, useEffect, useState } from "@webpack/common";
 
 const RegexGuide = {
     "\\i": "Special regex escape sequence that matches identifiers (varnames, classnames, etc.)",
@@ -69,15 +70,14 @@ export function ReplacementInput({ replacement, setReplacement, replacementError
                 </div>
             )}
 
-            <Switch
+            <FormSwitch
                 className={Margins.top16}
                 value={isFunc}
                 onChange={setIsFunc}
-                note="'replacement' will be evaled if this is toggled"
+                title={"Treat as Function"}
+                description="'replacement' will be evaled if this is toggled"
                 hideBorder
-            >
-                Treat as Function
-            </Switch>
+            />
         </>
     );
 }
diff --git a/src/components/settings/tabs/plugins/components/BooleanSetting.tsx b/src/components/settings/tabs/plugins/components/BooleanSetting.tsx
index c5408cb9b..44265c724 100644
--- a/src/components/settings/tabs/plugins/components/BooleanSetting.tsx
+++ b/src/components/settings/tabs/plugins/components/BooleanSetting.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Switch } from "@components/settings/Switch";
+import { Switch } from "@components/Switch";
 import { PluginOptionBoolean } from "@utils/types";
 import { React, useState } from "@webpack/common";
 
diff --git a/src/components/settings/tabs/sync/CloudTab.tsx b/src/components/settings/tabs/sync/CloudTab.tsx
index 1d1fd9789..0afa575df 100644
--- a/src/components/settings/tabs/sync/CloudTab.tsx
+++ b/src/components/settings/tabs/sync/CloudTab.tsx
@@ -19,13 +19,14 @@
 import { showNotification } from "@api/Notifications";
 import { Settings, useSettings } from "@api/Settings";
 import { CheckedTextInput } from "@components/CheckedTextInput";
+import { FormSwitch } from "@components/FormSwitch";
 import { Grid } from "@components/Grid";
 import { Link } from "@components/Link";
 import { SettingsTab, wrapTab } from "@components/settings/tabs/BaseTab";
 import { authorizeCloud, checkCloudUrlCsp, cloudLogger, deauthorizeCloud, getCloudAuth, getCloudUrl } from "@utils/cloud";
 import { Margins } from "@utils/margins";
 import { deleteCloudSettings, getCloudSettings, putCloudSettings } from "@utils/settingsSync";
-import { Alerts, Button, Forms, Switch, Tooltip } from "@webpack/common";
+import { Alerts, Button, Forms, Tooltip } from "@webpack/common";
 
 function validateUrl(url: string) {
     try {
@@ -74,14 +75,13 @@ function SettingsSyncSection() {
                 Synchronize your settings to the cloud. This allows easy synchronization across multiple devices with
                 minimal effort.
             </Forms.FormText>
-            <Switch
+            <FormSwitch
                 key="cloud-sync"
-                disabled={!cloud.authenticated}
+                title="Settings Sync"
                 value={cloud.settingsSync}
                 onChange={v => { cloud.settingsSync = v; }}
-            >
-                Settings Sync
-            </Switch>
+                disabled={!cloud.authenticated}
+            />
             <div className="vc-cloud-settings-sync-grid">
                 <Button
                     size={Button.Sizes.SMALL}
@@ -129,8 +129,10 @@ function CloudTab() {
                     the <Link href="https://github.com/Vencord/Backend">source code</Link> is AGPL 3.0 licensed so you
                     can host it yourself.
                 </Forms.FormText>
-                <Switch
+                <FormSwitch
                     key="backend"
+                    title="Enable Cloud Integrations"
+                    description="This will request authorization if you have not yet set up cloud integrations."
                     value={settings.cloud.authenticated}
                     onChange={v => {
                         if (v)
@@ -138,10 +140,7 @@ function CloudTab() {
                         else
                             settings.cloud.authenticated = v;
                     }}
-                    note="This will request authorization if you have not yet set up cloud integrations."
-                >
-                    Enable Cloud Integrations
-                </Switch>
+                />
                 <Forms.FormTitle tag="h5">Backend URL</Forms.FormTitle>
                 <Forms.FormText className={Margins.bottom8}>
                     Which backend to use when using cloud integrations.
diff --git a/src/components/settings/tabs/updater/index.tsx b/src/components/settings/tabs/updater/index.tsx
index 81238617f..6c50fe238 100644
--- a/src/components/settings/tabs/updater/index.tsx
+++ b/src/components/settings/tabs/updater/index.tsx
@@ -17,13 +17,14 @@
 */
 
 import { useSettings } from "@api/Settings";
+import { FormSwitch } from "@components/FormSwitch";
 import { Link } from "@components/Link";
 import { handleSettingsTabError, SettingsTab, wrapTab } from "@components/settings/tabs/BaseTab";
 import { Margins } from "@utils/margins";
 import { ModalCloseButton, ModalContent, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
 import { getRepo, isNewer, UpdateLogger } from "@utils/updater";
-import { Forms, React, Switch } from "@webpack/common";
+import { Forms, React } from "@webpack/common";
 
 import gitHash from "~git-hash";
 
@@ -46,21 +47,19 @@ function Updater() {
         <SettingsTab title="Vencord Updater">
             <Forms.FormTitle tag="h5">Updater Settings</Forms.FormTitle>
 
-            <Switch
+            <FormSwitch
+                title="Automatically update"
+                description="Automatically update Vencord without confirmation prompt"
                 value={settings.autoUpdate}
                 onChange={(v: boolean) => settings.autoUpdate = v}
-                note="Automatically update Vencord without confirmation prompt"
-            >
-                Automatically update
-            </Switch>
-            <Switch
+            />
+            <FormSwitch
+                title="Get notified when an automatic update completes"
+                description="Show a notification when Vencord automatically updates"
                 value={settings.autoUpdateNotification}
                 onChange={(v: boolean) => settings.autoUpdateNotification = v}
-                note="Show a notification when Vencord automatically updates"
                 disabled={!settings.autoUpdate}
-            >
-                Get notified when an automatic update completes
-            </Switch>
+            />
 
             <Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
 
diff --git a/src/components/settings/tabs/vencord/index.tsx b/src/components/settings/tabs/vencord/index.tsx
index 19b8fe4fe..4ca4f6a60 100644
--- a/src/components/settings/tabs/vencord/index.tsx
+++ b/src/components/settings/tabs/vencord/index.tsx
@@ -18,6 +18,7 @@
 
 import { openNotificationLogModal } from "@api/Notifications/notificationLog";
 import { useSettings } from "@api/Settings";
+import { FormSwitch } from "@components/FormSwitch";
 import { FolderIcon, GithubIcon, LogIcon, PaintbrushIcon, RestartIcon } from "@components/index";
 import { QuickAction, QuickActionCard } from "@components/settings/QuickAction";
 import { SpecialCard } from "@components/settings/SpecialCard";
@@ -29,7 +30,7 @@ import { IS_MAC, IS_WINDOWS } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import { isPluginDev } from "@utils/misc";
 import { relaunch } from "@utils/native";
-import { Forms, React, Switch, useMemo, UserStore } from "@webpack/common";
+import { Forms, React, useMemo, UserStore } from "@webpack/common";
 
 import { DonateButtonComponent, isDonor } from "./DonateButton";
 import { VibrancySettings } from "./MacVibrancySettings";
@@ -91,14 +92,13 @@ function Switches() {
     }>;
 
     return Switches.map(s => s && (
-        <Switch
+        <FormSwitch
             key={s.key}
+            title={s.title}
+            description={s.note}
             value={settings[s.key]}
             onChange={v => settings[s.key] = v}
-            note={s.note}
-        >
-            {s.title}
-        </Switch>
+        />
     ));
 }
 
diff --git a/src/plugins/invisibleChat.desktop/components/EncryptionModal.tsx b/src/plugins/invisibleChat.desktop/components/EncryptionModal.tsx
index f893680d4..ecc0c1366 100644
--- a/src/plugins/invisibleChat.desktop/components/EncryptionModal.tsx
+++ b/src/plugins/invisibleChat.desktop/components/EncryptionModal.tsx
@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { FormSwitch } from "@components/FormSwitch";
 import { insertTextIntoChatInputBox } from "@utils/discord";
 import {
     ModalContent,
@@ -25,7 +26,7 @@ import {
     ModalRoot,
     openModal,
 } from "@utils/modal";
-import { Button, Forms, React, Switch, TextInput } from "@webpack/common";
+import { Button, Forms, React, TextInput } from "@webpack/common";
 
 import { encrypt } from "../index";
 
@@ -65,14 +66,13 @@ function EncModal(props: ModalProps) {
                         setPassword(e);
                     }}
                 />
-                <Switch
+                <FormSwitch
+                    title="Don't use a Cover"
                     value={noCover}
                     onChange={(e: boolean) => {
                         setNoCover(e);
                     }}
-                >
-                    Don't use a Cover
-                </Switch>
+                />
             </ModalContent>
 
             <ModalFooter>
diff --git a/src/plugins/translate/TranslateModal.tsx b/src/plugins/translate/TranslateModal.tsx
index 786f81054..98306538e 100644
--- a/src/plugins/translate/TranslateModal.tsx
+++ b/src/plugins/translate/TranslateModal.tsx
@@ -16,9 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { FormSwitch } from "@components/FormSwitch";
 import { Margins } from "@utils/margins";
 import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
-import { Forms, SearchableSelect, Switch, useMemo } from "@webpack/common";
+import { Forms, SearchableSelect, useMemo } from "@webpack/common";
 
 import { settings } from "./settings";
 import { cl, getLanguages } from "./utils";
@@ -60,14 +61,13 @@ function AutoTranslateToggle() {
     const value = settings.use(["autoTranslate"]).autoTranslate;
 
     return (
-        <Switch
+        <FormSwitch
+            title="Auto Translate"
+            description={settings.def.autoTranslate.description}
             value={value}
             onChange={v => settings.store.autoTranslate = v}
-            note={settings.def.autoTranslate.description}
             hideBorder
-        >
-            Auto Translate
-        </Switch>
+        />
     );
 }
 
diff --git a/src/webpack/common/components.ts b/src/webpack/common/components.ts
index b975f303c..38fb5eb3e 100644
--- a/src/webpack/common/components.ts
+++ b/src/webpack/common/components.ts
@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { FormSwitchCompat } from "@components/FormSwitch";
 import { LazyComponent } from "@utils/lazyReact";
 import * as t from "@vencord/discord-types";
 import { filters, mapMangledModuleLazy, waitFor } from "@webpack";
@@ -37,7 +38,8 @@ export const Forms = {
 
 export const Card = waitForComponent<t.Card>("Card", filters.componentByCode(".editable),", ".outline:"));
 export const Button = waitForComponent<t.Button>("Button", filters.componentByCode("#{intl::A11Y_LOADING_STARTED}))),!1"));
-export const Switch = waitForComponent<t.Switch>("Switch", filters.componentByCode(".labelRow,ref:", ".disabledText"));
+/** @deprecated Use FormSwitch from Vencord */
+export const Switch = FormSwitchCompat;
 export const Checkbox = waitForComponent<t.Checkbox>("Checkbox", filters.componentByCode(".checkboxWrapperDisabled:"));
 
 const Tooltips = mapMangledModuleLazy(".tooltipTop,bottom:", {

From 1d1e5f3756538101d453e51284a6198b52d3ec5e Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Fri, 3 Oct 2025 00:52:01 +0200
Subject: [PATCH 2/3] bump to v1.13.1

---
 package.json                     | 2 +-
 src/components/FormSwitch.css    | 6 ++++++
 src/components/FormSwitch.tsx    | 2 +-
 src/webpack/common/components.ts | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 4f05e969d..673e29b29 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.13.0",
+    "version": "1.13.1",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {
diff --git a/src/components/FormSwitch.css b/src/components/FormSwitch.css
index d2a90064f..38cbea8d7 100644
--- a/src/components/FormSwitch.css
+++ b/src/components/FormSwitch.css
@@ -11,6 +11,12 @@
     }
 }
 
+.vc-form-switch-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+}
+
 .vc-form-switch-text {
     display: flex;
     flex-direction: column;
diff --git a/src/components/FormSwitch.tsx b/src/components/FormSwitch.tsx
index 12b0ab127..3f207c2b3 100644
--- a/src/components/FormSwitch.tsx
+++ b/src/components/FormSwitch.tsx
@@ -27,7 +27,7 @@ export interface FormSwitchProps {
 export function FormSwitch({ onChange, title, value, description, disabled, className, hideBorder }: FormSwitchProps) {
     return (
         <div className="vc-form-switch-wrapper">
-            <div className={classes("vc-form-switch", className)}>
+            <div className={classes("vc-form-switch", className, disabled && "vc-form-switch-disabled")}>
                 <div className={"vc-form-switch-text"}>
                     <Text variant="text-md/medium">{title}</Text>
                     {description && <Text variant="text-sm/normal">{description}</Text>}
diff --git a/src/webpack/common/components.ts b/src/webpack/common/components.ts
index 38fb5eb3e..c4e0ac8e9 100644
--- a/src/webpack/common/components.ts
+++ b/src/webpack/common/components.ts
@@ -39,7 +39,7 @@ export const Forms = {
 export const Card = waitForComponent<t.Card>("Card", filters.componentByCode(".editable),", ".outline:"));
 export const Button = waitForComponent<t.Button>("Button", filters.componentByCode("#{intl::A11Y_LOADING_STARTED}))),!1"));
 /** @deprecated Use FormSwitch from Vencord */
-export const Switch = FormSwitchCompat;
+export const Switch = FormSwitchCompat as never;
 export const Checkbox = waitForComponent<t.Checkbox>("Checkbox", filters.componentByCode(".checkboxWrapperDisabled:"));
 
 const Tooltips = mapMangledModuleLazy(".tooltipTop,bottom:", {

From 163e716dcac9c5678067ef5613ad0c2849153508 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Fri, 3 Oct 2025 00:53:02 +0200
Subject: [PATCH 3/3] fix lint

---
 src/components/settings/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts
index a7b9cdef4..647721219 100644
--- a/src/components/settings/index.ts
+++ b/src/components/settings/index.ts
@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+export * from "../Switch";
 export * from "./AddonCard";
 export * from "./DonateButton";
 export * from "./PluginBadge";
 export * from "./QuickAction";
 export * from "./SpecialCard";
-export * from "../Switch";
 export * from "./tabs";