fix FormSwitch

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";

src/components/FormDivider.css

@@ -0,0 +1,5 @@
+.vc-form-divider {
+    border-top: thin solid var(--border-subtle);
+    width: 100%;
+    height: 1px;
+}

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)} />;
+}

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;
+}

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} />;
+}

src/components/Switch.css

@@ -1,3 +1,3 @@
 .vc-switch-slider {
     transition: 100ms transform ease-in-out;
-}
+}

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";
 

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";

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>
+            />
         </>
     );
 }

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";
 

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.

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>
 

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>
+        />
     ));
 }
 

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>

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>
+        />
     );
 }
 

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:", {