diff --git a/package.json b/package.json index 4575a0e48..5c7ac944c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "equicord", "private": "true", - "version": "1.13.0", + "version": "1.13.1", "description": "The other cutest Discord client mod", "homepage": "https://github.com/Equicord/Equicord#readme", "bugs": { diff --git a/packages/discord-types/src/components.d.ts b/packages/discord-types/src/components.d.ts index a20156e07..d8cc74b55 100644 --- a/packages/discord-types/src/components.d.ts +++ b/packages/discord-types/src/components.d.ts @@ -162,19 +162,6 @@ export type Button = ComponentType & { Link: any; }; -export type Switch = ComponentType>; - 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
; +} diff --git a/src/components/FormSwitch.css b/src/components/FormSwitch.css new file mode 100644 index 000000000..38cbea8d7 --- /dev/null +++ b/src/components/FormSwitch.css @@ -0,0 +1,29 @@ +.vc-form-switch-wrapper { + margin-bottom: 20px; +} + +.vc-form-switch { + display: flex; + width: 100%; + + > :last-child { + margin-left: auto; + } +} + +.vc-form-switch-disabled { + opacity: 0.5; + pointer-events: none; + cursor: not-allowed; +} + +.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..3f207c2b3 --- /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 ( +
+
+
+ {title} + {description && {description}} +
+ + +
+ {!hideBorder && } +
+ ); +} + +/** Compatibility with Discord's old FormSwitch */ +export function FormSwitchCompat(props: PropsWithChildren) { + return ; +} 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 63be7c8af..1d39cd80d 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..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"; 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
)} - - Treat as Function - + /> ); } 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 . */ -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 f30ff4ebe..f51d43fac 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, 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, useState } from "@webpack/common"; +import { Alerts, Button, Forms, Tooltip, useState } from "@webpack/common"; function validateUrl(url: string) { try { @@ -72,14 +73,13 @@ function SettingsSyncSection() { Synchronize your settings to the cloud. This allows easy synchronization across multiple devices with minimal effort. - { cloud.settingsSync = v; }} - > - Settings Sync - + disabled={!cloud.authenticated} + />