- {richBody ??
+ {richBody ?? {body}
} -{body}
} {image &&
+
deleteNotification(data.timestamp), 200);
}}
richBody={
-
);
}
@@ -151,9 +139,14 @@ export function NotificationLog({ log, pending }: { log: PersistentNotificationD
);
return (
- null}
+ renderRow={item =>
+
Notification Log
-
+
diff --git a/src/api/Notifications/styles.css b/src/api/Notifications/styles.css
index ad5c9cbc..471fbf01 100644
--- a/src/api/Notifications/styles.css
+++ b/src/api/Notifications/styles.css
@@ -3,18 +3,14 @@
all: unset;
display: flex;
flex-direction: column;
- color: var(--text-normal);
- background-color: var(--background-secondary-alt);
+ color: var(--text-default);
+ background-color: var(--background-base-low);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
width: 100%;
}
-.visual-refresh .vc-notification-root {
- background-color: var(--bg-overlay-floating, var(--background-base-low));
-}
-
.vc-notification-root:not(.vc-notification-log-wrapper > .vc-notification-root) {
position: absolute;
z-index: 2147483647;
@@ -32,6 +28,7 @@
.vc-notification-content {
width: 100%;
+ overflow: hidden;
}
.vc-notification-header {
@@ -81,6 +78,11 @@
width: 100%;
}
+.vc-notification-log-modal {
+ max-width: 962px;
+ width: clamp(var(--modal-width-large, 800px), 962px, 85vw);
+}
+
.vc-notification-log-empty {
height: 218px;
background: url("/assets/b36de980b174d7b798c89f35c116e5c6.svg") center no-repeat;
@@ -88,19 +90,23 @@
}
.vc-notification-log-container {
- display: flex;
- flex-direction: column;
padding: 1em;
- overflow: hidden;
+ max-height: min(750px, 75vh);
+ width: 100%;
}
.vc-notification-log-wrapper {
+ height: 120px;
+ width: 100%;
+ padding-bottom: 16px;
+ box-sizing: border-box;
transition: 200ms ease;
transition-property: height, opacity;
-}
-.vc-notification-log-wrapper:not(:last-child) {
- margin-bottom: 1em;
+ /* stylelint-disable-next-line no-descending-specificity */
+ .vc-notification-root {
+ height: 104px;
+ }
}
.vc-notification-log-removing {
@@ -109,9 +115,18 @@
margin-bottom: 1em;
}
-.vc-notification-log-body {
+.vc-notification-log-body-wrapper {
display: flex;
flex-direction: column;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.vc-notification-log-body {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ line-height: 1.2em;
}
.vc-notification-log-timestamp {
@@ -123,4 +138,4 @@
.vc-notification-log-danger-btn {
color: var(--white-500);
background-color: var(--button-danger-background);
-}
+}
\ No newline at end of file
diff --git a/src/api/Settings.ts b/src/api/Settings.ts
index 08d2f8ca..5c8965bf 100644
--- a/src/api/Settings.ts
+++ b/src/api/Settings.ts
@@ -268,7 +268,7 @@ type ResolveUseSettings = {
[Key in keyof T]:
Key extends string
? T[Key] extends Record
- // @ts-ignore "Type instantiation is excessively deep and possibly infinite"
+ // @ts-expect-error "Type instantiation is excessively deep and possibly infinite"
? UseSettings extends string ? `${Key}.${UseSettings}` : never
: Key
: never;
diff --git a/src/components/CheckedTextInput.tsx b/src/components/CheckedTextInput.tsx
index cf4aa119..8d37a560 100644
--- a/src/components/CheckedTextInput.tsx
+++ b/src/components/CheckedTextInput.tsx
@@ -18,7 +18,6 @@
import { React, TextInput } from "@webpack/common";
-// TODO: Refactor settings to use this as well
interface TextInputProps {
/**
* WARNING: Changing this between renders will have no effect!
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 0ca20440..7058b5fd 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -75,10 +75,15 @@ const ErrorBoundary = LazyComponent(() => {
logger.error(`${this.props.message || "A component threw an Error"}\n`, error, errorInfo.componentStack);
}
+ get isNoop() {
+ if (IS_DEV) return false;
+ return this.props.noop;
+ }
+
render() {
if (this.state.error === NO_ERROR) return this.props.children;
- if (this.props.noop) return null;
+ if (this.isNoop) return null;
if (this.props.fallback)
return (
diff --git a/src/components/ErrorCard.css b/src/components/ErrorCard.css
index 5146aa03..2eea2f06 100644
--- a/src/components/ErrorCard.css
+++ b/src/components/ErrorCard.css
@@ -3,5 +3,9 @@
background-color: #e7828430;
border: 1px solid #e78284;
border-radius: 5px;
- color: var(--text-normal, white);
+ color: var(--text-default, white);
+
+ & a:hover {
+ text-decoration: underline;
+ }
}
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index 4c5b0ca0..9862c1b4 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -27,7 +27,6 @@ interface BaseIconProps extends IconProps {
}
type IconProps = JSX.IntrinsicElements["svg"];
-type ImageProps = JSX.IntrinsicElements["img"];
function Icon({ height = 24, width = 24, className, children, viewBox, ...svgProps }: PropsWithChildren) {
return (
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 0f4eb07d..2eb7ab00 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -28,6 +28,9 @@ export function Link(props: React.PropsWithChildren) {
props.style.pointerEvents = "none";
props["aria-disabled"] = true;
}
+
+ props.rel ??= "noreferrer";
+
return (
{props.children}
diff --git a/src/components/PluginSettings/components/SettingBooleanComponent.tsx b/src/components/PluginSettings/components/SettingBooleanComponent.tsx
deleted file mode 100644
index e5219e45..00000000
--- a/src/components/PluginSettings/components/SettingBooleanComponent.tsx
+++ /dev/null
@@ -1,63 +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 ) {
- const def = pluginSettings[id] ?? option.default;
-
- const [state, setState] = React.useState(def ?? false);
- const [error, setError] = React.useState(null);
-
- React.useEffect(() => {
- onError(error !== null);
- }, [error]);
-
- function handleChange(newValue: boolean): void {
- const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
- if (typeof isValid === "string") setError(isValid);
- else if (!isValid) setError("Invalid input provided.");
- else {
- setError(null);
- setState(newValue);
- onChange(newValue);
- }
- }
-
- return (
-
-
- {wordsToTitle(wordsFromCamel(id))}
-
- {error && {error} }
-
- );
-}
-
diff --git a/src/components/PluginSettings/components/index.ts b/src/components/PluginSettings/components/index.ts
deleted file mode 100644
index c38f209b..00000000
--- a/src/components/PluginSettings/components/index.ts
+++ /dev/null
@@ -1,43 +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 {
- option: T;
- onChange(newValue: any): void;
- pluginSettings: {
- [setting: string]: any;
- enabled: boolean;
- };
- id: string;
- onError(hasError: boolean): void;
- definedSettings?: DefinedSettings;
-}
-
-export type ISettingElementProps = ISettingElementPropsBase;
-export type ISettingCustomElementProps> = ISettingElementPropsBase;
-
-export * from "../../Badge";
-export * from "./SettingBooleanComponent";
-export * from "./SettingCustomComponent";
-export * from "./SettingNumericComponent";
-export * from "./SettingSelectComponent";
-export * from "./SettingSliderComponent";
-export * from "./SettingTextComponent";
-
diff --git a/src/components/VencordSettings/PatchHelperTab.tsx b/src/components/VencordSettings/PatchHelperTab.tsx
deleted file mode 100644
index 55822069..00000000
--- a/src/components/VencordSettings/PatchHelperTab.tsx
+++ /dev/null
@@ -1,393 +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 Regex doesn't match! ;
-
- const fullMatch = matchResult[0] ? makeCodeblock(matchResult[0], "js") : "";
- const groups = matchResult.length > 1
- ? makeCodeblock(matchResult.slice(1).map((g, i) => `Group ${i + 1}: ${g}`).join("\n"), "yml")
- : "";
-
- return (
- <>
- Module {id}
-
- {!!matchResult?.[0]?.length && (
- <>
- Match
- {renderMatch()}
- )
- }
-
- {!!diff?.length && (
- <>
- Diff
- {renderDiff()}
-
- )}
-
- {!!diff?.length && (
-
- )}
-
- {compileResult &&
-
- {compileResult[1]}
-
- }
-
- );
-}
-
-function ReplacementInput({ replacement, setReplacement, replacementError }) {
- const [isFunc, setIsFunc] = React.useState(false);
- const [error, setError] = React.useState();
-
- function onChange(v: string) {
- setError(void 0);
-
- if (isFunc) {
- try {
- const func = (0, eval)(v);
- if (typeof func === "function")
- setReplacement(() => func);
- else
- setError("Replacement must be a function");
- } catch (e) {
- setReplacement(v);
- setError((e as Error).message);
- }
- } else {
- setReplacement(v);
- }
- }
-
- React.useEffect(
- () => void (isFunc ? onChange(replacement) : setError(void 0)),
- [isFunc]
- );
-
- return (
- <>
- {/* FormTitle adds a class if className is not set, so we set it to an empty string to prevent that */}
- replacement
-
- Treat as Function
-
-
- );
-}
-
-interface FullPatchInputProps {
- setFind(v: string): void;
- setParsedFind(v: string | RegExp): void;
- setMatch(v: string): void;
- setReplacement(v: string | ReplaceFn): void;
-}
-
-function FullPatchInput({ setFind, setParsedFind, setMatch, setReplacement }: FullPatchInputProps) {
- const [fullPatch, setFullPatch] = React.useState("");
- const [fullPatchError, setFullPatchError] = React.useState("");
-
- function update() {
- if (fullPatch === "") {
- setFullPatchError("");
-
- setFind("");
- setParsedFind("");
- setMatch("");
- setReplacement("");
- return;
- }
-
- try {
- const parsed = (0, eval)(`([${fullPatch}][0])`) as Patch;
-
- if (!parsed.find) throw new Error("No 'find' field");
- if (!parsed.replacement) throw new Error("No 'replacement' field");
-
- if (parsed.replacement instanceof Array) {
- if (parsed.replacement.length === 0) throw new Error("Invalid replacement");
-
- parsed.replacement = {
- match: parsed.replacement[0].match,
- replace: parsed.replacement[0].replace
- };
- }
-
- if (!parsed.replacement.match) throw new Error("No 'replacement.match' field");
- if (!parsed.replacement.replace) throw new Error("No 'replacement.replace' field");
-
- setFind(parsed.find instanceof RegExp ? parsed.find.toString() : parsed.find);
- setParsedFind(parsed.find);
- setMatch(parsed.replacement.match instanceof RegExp ? parsed.replacement.match.source : parsed.replacement.match);
- setReplacement(parsed.replacement.replace);
- setFullPatchError("");
- } catch (e) {
- setFullPatchError((e as Error).message);
- }
- }
-
- return <>
- Paste your full JSON patch here to fill out the fields
-
- {fullPatchError !== "" && {fullPatchError} }
- ;
-}
-
-function PatchHelper() {
- const [find, setFind] = React.useState("");
- const [parsedFind, setParsedFind] = React.useState("");
- const [match, setMatch] = React.useState("");
- const [replacement, setReplacement] = React.useState("");
-
- const [replacementError, setReplacementError] = React.useState();
-
- const [module, setModule] = React.useState<[number, Function]>();
- const [findError, setFindError] = React.useState();
- const [matchError, setMatchError] = React.useState();
-
- const code = React.useMemo(() => {
- return `
-{
- find: ${parsedFind instanceof RegExp ? parsedFind.toString() : JSON.stringify(parsedFind)},
- replacement: {
- match: /${match.replace(/(?
- full patch
- find
- match
- Code
- ;
- onChange: (e: SyntheticEvent) => void;
- multiple?: boolean;
- filters?: { name?: string; extensions: string[]; }[];
-}>;
-
-const FileInput: FileInput = findLazy(m => m.prototype?.activateUploadDialogue && m.prototype.setRef);
-
-const cl = classNameFactory("vc-settings-theme-");
-
-function Validator({ link }: { link: string; }) {
- const [res, err, pending] = useAwaiter(() => fetch(link).then(res => {
- if (res.status > 300) throw `${res.status} ${res.statusText}`;
- const contentType = res.headers.get("Content-Type");
- if (!contentType?.startsWith("text/css") && !contentType?.startsWith("text/plain"))
- throw "Not a CSS file. Remember to use the raw link!";
-
- return "Okay!";
- }));
-
- const text = pending
- ? "Checking..."
- : err
- ? `Error: ${err instanceof Error ? err.message : String(err)}`
- : "Valid!";
-
- return {text} ;
-}
-
-function Validators({ themeLinks }: { themeLinks: string[]; }) {
- if (!themeLinks.length) return null;
-
- return (
- <>
- Validator
- This section will tell you whether your themes can successfully be loaded
-
-
- )
- }
- footer={
-
- {data.body}
+
+
+
}
/>
- {data.body}
- {log.map(n =>
+ {Parser.parse(fullMatch)}
- {Parser.parse(groups)}
-
- );
- }
-
- function renderDiff() {
- return diff?.map((p, idx) => {
- const color = p.added ? "lime" : p.removed ? "red" : "grey";
- return {p.value}
;
- });
- }
-
- return (
- <>
-
- Cheat Sheet
- {Object.entries({
- "\\i": "Special regex escape sequence that matches identifiers (varnames, classnames, etc.)",
- "$$": "Insert a $",
- "$&": "Insert the entire match",
- "$`\u200b": "Insert the substring before the match",
- "$'": "Insert the substring after the match",
- "$n": "Insert the nth capturing group ($1, $2...)",
- "$self": "Insert the plugin instance",
- }).map(([placeholder, desc]) => (
-
- {Parser.parse("`" + placeholder + "`")}: {desc}
-
- ))}
-
- )}
-
-
- {themeLinks.map(rawLink => {
- const { label, link } = (() => {
- const match = /^@(light|dark) (.*)/.exec(rawLink);
- if (!match) return { label: rawLink, link: rawLink };
-
- const [, mode, link] = match;
- return { label: `[${mode} mode only] ${link}`, link };
- })();
-
- return
-
- {label}
-
- ;
- })}
-
-
- );
-}
-
-interface ThemeCardProps {
- theme: UserThemeHeader;
- enabled: boolean;
- onChange: (enabled: boolean) => void;
- onDelete: () => void;
-}
-
-function ThemeCard({ theme, enabled, onChange, onDelete }: ThemeCardProps) {
- return (
-
-
- BetterDiscord Themes
-
- GitHub
-
-
- {userThemes?.map(theme => (
- onLocalThemeChange(theme.fileName, enabled)}
- onDelete={async () => {
- onLocalThemeChange(theme.fileName, false);
- await VencordNative.themes.deleteTheme(theme.fileName);
- refreshLocalThemes();
- }}
- theme={theme}
- />
- ))}
-
- {Parser.parse(line)}
)}
-
-
- ))}
- {updateError.stderr || updateError.stdout || "An unknown error occurred"}
-
{name}
- {isNew && {Parser.parse(fullMatch)}
+ {Parser.parse(groups)}
+
+ );
+}
+
+function Diff({ diff }: { diff: Change[] | null; }) {
+ if (!diff?.length)
+ return null;
+
+ const diffLines = diff.map((p, idx) => {
+ const color = p.added
+ ? "lime"
+ : p.removed
+ ? "red"
+ : "grey";
+
+ return (
+
+ {p.value}
+
+ );
+ });
+
+ return (
+ <>
+
+ Cheat Sheet
+
+ {Object.entries(RegexGuide).map(([placeholder, desc]) => (
+
+ {Parser.parse("`" + placeholder + "`")}: {desc}
+
+ ))}
+
+ )}
+
+
+ {options}
+
+ );
}
function renderMoreUsers(_label: string, count: number) {
@@ -192,38 +143,16 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
);
}
- /*
- function switchToPopout() {
- onClose();
-
- const PopoutKey = `DISCORD_VENCORD_PLUGIN_SETTINGS_MODAL_${plugin.name}`;
- PopoutActions.open(
- PopoutKey,
- () =>
+ Authors
+
(
+
{!!plugin.settingsAboutComponent && (
-
@@ -386,9 +298,11 @@ export default function PluginSettings() {
function makeDependencyList(deps: string[]) {
return (
-
+
-
-
+
)}
-
- Settings
+
+
+ Settings
{renderSettings()}
- {hasSettings &&
-
-
-
-
- {({ onMouseEnter, onMouseLeave }) => (
-
- )}
-
-
- {saveError && Error while saving: {saveError} }
-
- }
);
}
-export function openPluginModal(plugin: Plugin, onRestartNeeded?: (pluginName: string) => void) {
+export function openPluginModal(plugin: Plugin, onRestartNeeded?: (pluginName: string, key: string) => void) {
openModal(modalProps => (
onRestartNeeded?.(plugin.name)}
+ onRestartNeeded={(key: string) => onRestartNeeded?.(plugin.name, key)}
/>
));
}
diff --git a/src/components/settings/tabs/plugins/components/BooleanSetting.tsx b/src/components/settings/tabs/plugins/components/BooleanSetting.tsx
new file mode 100644
index 00000000..c5408cb9
--- /dev/null
+++ b/src/components/settings/tabs/plugins/components/BooleanSetting.tsx
@@ -0,0 +1,48 @@
+/*
+ * 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 ) {
+ const def = pluginSettings[id] ?? option.default;
+
+ const [state, setState] = useState(def ?? false);
+ const [error, setError] = useState(null);
+
+ function handleChange(newValue: boolean): void {
+ const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
+
+ setState(newValue);
+ setError(resolveError(isValid));
+
+ if (isValid === true) {
+ onChange(newValue);
+ }
+ }
+
+ return (
+
+
+ );
+}
+
diff --git a/src/components/settings/tabs/plugins/components/Common.tsx b/src/components/settings/tabs/plugins/components/Common.tsx
new file mode 100644
index 00000000..61c3da52
--- /dev/null
+++ b/src/components/settings/tabs/plugins/components/Common.tsx
@@ -0,0 +1,56 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { classNameFactory } from "@api/Styles";
+import { classes } from "@utils/misc";
+import { wordsFromCamel, wordsToTitle } from "@utils/text";
+import { DefinedSettings, PluginOptionBase } from "@utils/types";
+import { Text } from "@webpack/common";
+import { PropsWithChildren } from "react";
+
+export const cl = classNameFactory("vc-plugins-setting-");
+
+interface SettingBaseProps {
+ option: T;
+ onChange(newValue: any): void;
+ pluginSettings: {
+ [setting: string]: any;
+ enabled: boolean;
+ };
+ id: string;
+ definedSettings?: DefinedSettings;
+}
+
+export type SettingProps = SettingBaseProps;
+export type ComponentSettingProps> = SettingBaseProps;
+
+export function resolveError(isValidResult: boolean | string) {
+ if (typeof isValidResult === "string") return isValidResult;
+
+ return isValidResult ? null : "Invalid input provided";
+}
+
+interface SettingsSectionProps extends PropsWithChildren {
+ name: string;
+ description: string;
+ error?: string | null;
+ inlineSetting?: boolean;
+}
+
+export function SettingsSection({ name, description, error, inlineSetting, children }: SettingsSectionProps) {
+ return (
+ ) {
- return option.component({ setValue: onChange, setError: onError, option });
+export function ComponentSetting({ option, onChange }: ComponentSettingProps) {
+ return option.component({ setValue: onChange, option });
}
diff --git a/src/components/PluginSettings/components/SettingNumericComponent.tsx b/src/components/settings/tabs/plugins/components/NumberSetting.tsx
similarity index 59%
rename from src/components/PluginSettings/components/SettingNumericComponent.tsx
rename to src/components/settings/tabs/plugins/components/NumberSetting.tsx
index b724717d..108ddc3e 100644
--- a/src/components/PluginSettings/components/SettingNumericComponent.tsx
+++ b/src/components/settings/tabs/plugins/components/NumberSetting.tsx
@@ -16,58 +16,49 @@
* along with this program. If not, see ) {
+export function NumberSetting({ option, pluginSettings, definedSettings, id, onChange }: SettingProps) {
function serialize(value: any) {
if (option.type === OptionType.BIGINT) return BigInt(value);
return Number(value);
}
- const [state, setState] = React.useState(`${pluginSettings[id] ?? option.default ?? 0}`);
- const [error, setError] = React.useState(null);
+ const [state, setState] = useState(`${pluginSettings[id] ?? option.default ?? 0}`);
+ const [error, setError] = useState(null);
- React.useEffect(() => {
- onError(error !== null);
- }, [error]);
-
- function handleChange(newValue) {
+ function handleChange(newValue: any) {
const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
- setError(null);
- if (typeof isValid === "string") setError(isValid);
- else if (!isValid) setError("Invalid input provided.");
+ setError(resolveError(isValid));
+
+ if (isValid === true) {
+ onChange(serialize(newValue));
+ }
if (option.type === OptionType.NUMBER && BigInt(newValue) >= MAX_SAFE_NUMBER) {
setState(`${Number.MAX_SAFE_INTEGER}`);
- onChange(serialize(newValue));
} else {
setState(newValue);
- onChange(serialize(newValue));
}
}
return (
-
- {wordsToTitle(wordsFromCamel(id))}
- {option.description}
+
{error} }
-
+
);
}
diff --git a/src/components/PluginSettings/components/SettingSelectComponent.tsx b/src/components/settings/tabs/plugins/components/SelectSetting.tsx
similarity index 56%
rename from src/components/PluginSettings/components/SettingSelectComponent.tsx
rename to src/components/settings/tabs/plugins/components/SelectSetting.tsx
index 5f1cd027..4c912c51 100644
--- a/src/components/PluginSettings/components/SettingSelectComponent.tsx
+++ b/src/components/settings/tabs/plugins/components/SelectSetting.tsx
@@ -16,50 +16,41 @@
* along with this program. If not, see ) {
+export function SelectSetting({ option, pluginSettings, definedSettings, onChange, id }: SettingProps) {
const def = pluginSettings[id] ?? option.options?.find(o => o.default)?.value;
- const [state, setState] = React.useState(def ?? null);
- const [error, setError] = React.useState(null);
+ const [state, setState] = useState(def ?? null);
+ const [error, setError] = useState(null);
- React.useEffect(() => {
- onError(error !== null);
- }, [error]);
-
- function handleChange(newValue) {
+ function handleChange(newValue: any) {
const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
- if (typeof isValid === "string") setError(isValid);
- else if (!isValid) setError("Invalid input provided.");
- else {
- setError(null);
- setState(newValue);
+
+ setState(newValue);
+ setError(resolveError(isValid));
+
+ if (isValid === true) {
onChange(newValue);
}
}
return (
-
- {wordsToTitle(wordsFromCamel(id))}
- {option.description}
+
+
);
}
diff --git a/src/components/PluginSettings/components/SettingSliderComponent.tsx b/src/components/settings/tabs/plugins/components/SliderSetting.tsx
similarity index 58%
rename from src/components/PluginSettings/components/SettingSliderComponent.tsx
rename to src/components/settings/tabs/plugins/components/SliderSetting.tsx
index 738f5f01..85a52da2 100644
--- a/src/components/PluginSettings/components/SettingSliderComponent.tsx
+++ b/src/components/settings/tabs/plugins/components/SliderSetting.tsx
@@ -16,46 +16,29 @@
* along with this program. If not, see ) {
+export function SliderSetting({ option, pluginSettings, definedSettings, id, onChange }: SettingProps) {
const def = pluginSettings[id] ?? option.default;
- const [error, setError] = React.useState(null);
-
- React.useEffect(() => {
- onError(error !== null);
- }, [error]);
+ const [error, setError] = useState(null);
function handleChange(newValue: number): void {
const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
- if (typeof isValid === "string") setError(isValid);
- else if (!isValid) setError("Invalid input provided.");
- else {
- setError(null);
+
+ setError(resolveError(isValid));
+
+ if (isValid === true) {
onChange(newValue);
}
}
return (
-
- {wordsToTitle(wordsFromCamel(id))}
- {option.description}
+
String(v.toFixed(2))}
stickToMarkers={option.stickToMarkers ?? true}
+ disabled={option.disabled?.call(definedSettings) ?? false}
{...option.componentProps}
/>
-
+
);
}
diff --git a/src/components/PluginSettings/components/SettingTextComponent.tsx b/src/components/settings/tabs/plugins/components/TextSetting.tsx
similarity index 52%
rename from src/components/PluginSettings/components/SettingTextComponent.tsx
rename to src/components/settings/tabs/plugins/components/TextSetting.tsx
index 36b8b13a..7eb4b9f9 100644
--- a/src/components/PluginSettings/components/SettingTextComponent.tsx
+++ b/src/components/settings/tabs/plugins/components/TextSetting.tsx
@@ -16,45 +16,37 @@
* along with this program. If not, see ) {
- const [state, setState] = React.useState(pluginSettings[id] ?? option.default ?? null);
- const [error, setError] = React.useState(null);
+export function TextSetting({ option, pluginSettings, definedSettings, id, onChange }: SettingProps) {
+ const [state, setState] = useState(pluginSettings[id] ?? option.default ?? null);
+ const [error, setError] = useState(null);
- React.useEffect(() => {
- onError(error !== null);
- }, [error]);
-
- function handleChange(newValue) {
+ function handleChange(newValue: string) {
const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
- if (typeof isValid === "string") setError(isValid);
- else if (!isValid) setError("Invalid input provided.");
- else setError(null);
setState(newValue);
- onChange(newValue);
+ setError(resolveError(isValid));
+
+ if (isValid === true) {
+ onChange(newValue);
+ }
}
return (
-
- {wordsToTitle(wordsFromCamel(id))}
- {option.description}
+
{error} }
-
+
);
}
diff --git a/src/components/settings/tabs/plugins/components/index.ts b/src/components/settings/tabs/plugins/components/index.ts
new file mode 100644
index 00000000..0f1dd40c
--- /dev/null
+++ b/src/components/settings/tabs/plugins/components/index.ts
@@ -0,0 +1,41 @@
+/*
+ * 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 | ComponentSettingProps>> = {
+ [OptionType.STRING]: TextSetting,
+ [OptionType.NUMBER]: NumberSetting,
+ [OptionType.BIGINT]: NumberSetting,
+ [OptionType.BOOLEAN]: BooleanSetting,
+ [OptionType.SELECT]: SelectSetting,
+ [OptionType.SLIDER]: SliderSetting,
+ [OptionType.COMPONENT]: ComponentSetting,
+ [OptionType.CUSTOM]: () => null,
+};
diff --git a/src/components/settings/tabs/plugins/components/styles.css b/src/components/settings/tabs/plugins/components/styles.css
new file mode 100644
index 00000000..9d72554e
--- /dev/null
+++ b/src/components/settings/tabs/plugins/components/styles.css
@@ -0,0 +1,35 @@
+.vc-plugins-setting-section {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5em;
+}
+
+.vc-plugins-setting-content {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5em;
+}
+
+.vc-plugins-setting-inline {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.vc-plugins-setting-label {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25em;
+}
+
+.vc-plugins-setting-title {
+ color: var(--header-primary);
+}
+
+.vc-plugins-setting-description {
+ color: var(--header-secondary);
+}
+
+.vc-plugins-setting-error {
+ color: var(--text-danger);
+}
diff --git a/src/components/PluginSettings/index.tsx b/src/components/settings/tabs/plugins/index.tsx
similarity index 56%
rename from src/components/PluginSettings/index.tsx
rename to src/components/settings/tabs/plugins/index.tsx
index 27eb10a3..4db9699a 100644
--- a/src/components/PluginSettings/index.tsx
+++ b/src/components/settings/tabs/plugins/index.tsx
@@ -19,153 +19,53 @@
import "./styles.css";
import * as DataStore from "@api/DataStore";
-import { showNotice } from "@api/Notices";
-import { Settings, useSettings } from "@api/Settings";
+import { useSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
-import { CogWheel, InfoIcon } from "@components/Icons";
-import { openPluginModal } from "@components/PluginSettings/PluginModal";
-import { AddonCard } from "@components/VencordSettings/AddonCard";
-import { SettingsTab } from "@components/VencordSettings/shared";
+import { SettingsTab, wrapTab } from "@components/settings/tabs/BaseTab";
import { ChangeList } from "@utils/ChangeList";
-import { proxyLazy } from "@utils/lazy";
import { Logger } from "@utils/Logger";
import { Margins } from "@utils/margins";
-import { classes, isObjectEmpty } from "@utils/misc";
-import { useAwaiter } from "@utils/react";
-import { Plugin } from "@utils/types";
+import { classes } from "@utils/misc";
+import { useAwaiter, useCleanupEffect } from "@utils/react";
import { findByPropsLazy } from "@webpack";
-import { Alerts, Button, Card, Forms, lodash, Parser, React, Select, Text, TextInput, Toasts, Tooltip, useMemo } from "@webpack/common";
+import { Alerts, Button, Card, Forms, lodash, Parser, React, Select, Text, TextInput, Tooltip, useMemo, useState } from "@webpack/common";
import { JSX } from "react";
import Plugins, { ExcludedPlugins } from "~plugins";
-// Avoid circular dependency
-const { startDependenciesRecursive, startPlugin, stopPlugin } = proxyLazy(() => require("../../plugins"));
+import { PluginCard } from "./PluginCard";
-const cl = classNameFactory("vc-plugins-");
-const logger = new Logger("PluginSettings", "#a6d189");
+export const cl = classNameFactory("vc-plugins-");
+export const logger = new Logger("PluginSettings", "#a6d189");
-const InputStyles = findByPropsLazy("inputWrapper", "inputDefault", "error");
-const ButtonClasses = findByPropsLazy("button", "disabled", "enabled");
-
-
-function showErrorToast(message: string) {
- Toasts.show({
- message,
- type: Toasts.Type.FAILURE,
- id: Toasts.genId(),
- options: {
- position: Toasts.Position.BOTTOM
- }
- });
-}
+const InputStyles = findByPropsLazy("inputWrapper", "inputError", "error");
function ReloadRequiredCard({ required }: { required: boolean; }) {
return (
-
- {required ? (
- <>
- Restart required!
-
- Restart now to apply new plugins and their settings
-
-
-
- ) : (
- <>
- Plugin Management
- Press the cog wheel or info icon to get more info on a plugin
- Plugins with a cog wheel have settings you can modify!
-
- )}
+
+ {required
+ ? (
+ <>
+ Restart required!
+
+ Restart now to apply new plugins and their settings
+
+
+
+ )
+ : (
+ <>
+ Plugin Management
+ Press the cog wheel or info icon to get more info on a plugin
+ Plugins with a cog wheel have settings you can modify!
+
+ )}
);
}
-interface PluginCardProps extends React.HTMLProps {
- plugin: Plugin;
- disabled: boolean;
- onRestartNeeded(name: string): void;
- isNew?: boolean;
-}
-
-export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave, isNew }: PluginCardProps) {
- const settings = Settings.plugins[plugin.name];
-
- const isEnabled = () => Vencord.Plugins.isPluginEnabled(plugin.name);
-
- function toggleEnabled() {
- const wasEnabled = isEnabled();
-
- // If we're enabling a plugin, make sure all deps are enabled recursively.
- if (!wasEnabled) {
- const { restartNeeded, failures } = startDependenciesRecursive(plugin);
- if (failures.length) {
- logger.error(`Failed to start dependencies for ${plugin.name}: ${failures.join(", ")}`);
- showNotice("Failed to start dependencies: " + failures.join(", "), "Close", () => null);
- return;
- } else if (restartNeeded) {
- // If any dependencies have patches, don't start the plugin yet.
- settings.enabled = true;
- onRestartNeeded(plugin.name);
- return;
- }
- }
-
- // if the plugin has patches, dont use stopPlugin/startPlugin. Wait for restart to apply changes.
- if (plugin.patches?.length) {
- settings.enabled = !wasEnabled;
- onRestartNeeded(plugin.name);
- return;
- }
-
- // If the plugin is enabled, but hasn't been started, then we can just toggle it off.
- if (wasEnabled && !plugin.started) {
- settings.enabled = !wasEnabled;
- return;
- }
-
- const result = wasEnabled ? stopPlugin(plugin) : startPlugin(plugin);
-
- if (!result) {
- settings.enabled = false;
-
- const msg = `Error while ${wasEnabled ? "stopping" : "starting"} plugin ${plugin.name}`;
- logger.error(msg);
- showErrorToast(msg);
- return;
- }
-
- settings.enabled = !wasEnabled;
- }
-
- return (
- openPluginModal(plugin, onRestartNeeded)}
- className={classes(ButtonClasses.button, cl("info-button"))}
- >
- {plugin.options && !isObjectEmpty(plugin.options)
- ? (), []);
+ const changes = useMemo(() => new ChangeList(), []);
- React.useEffect(() => {
- return () => void (changes.hasChanges && Alerts.show({
- title: "Restart required",
- body: (
- <>
- ;
for (const plugin in Plugins) {
const deps = Plugins[plugin].dependencies;
@@ -242,10 +143,12 @@ export default function PluginSettings() {
return o;
}, []);
- const sortedPlugins = useMemo(() => Object.values(Plugins)
- .sort((a, b) => a.name.localeCompare(b.name)), []);
+ const sortedPlugins = useMemo(() =>
+ Object.values(Plugins).sort((a, b) => a.name.localeCompare(b.name)),
+ []
+ );
- const [searchValue, setSearchValue] = React.useState({ value: "", status: SearchStatus.ALL });
+ const [searchValue, setSearchValue] = useState({ value: "", status: SearchStatus.ALL });
const search = searchValue.value.toLowerCase();
const onSearch = (query: string) => setSearchValue(prev => ({ ...prev, value: query }));
@@ -254,9 +157,19 @@ export default function PluginSettings() {
const pluginFilter = (plugin: typeof Plugins[keyof typeof Plugins]) => {
const { status } = searchValue;
const enabled = Vencord.Plugins.isPluginEnabled(plugin.name);
- if (enabled && status === SearchStatus.DISABLED) return false;
- if (!enabled && status === SearchStatus.ENABLED) return false;
- if (status === SearchStatus.NEW && !newPlugins?.includes(plugin.name)) return false;
+
+ switch (status) {
+ case SearchStatus.DISABLED:
+ if (enabled) return false;
+ break;
+ case SearchStatus.ENABLED:
+ if (!enabled) return false;
+ break;
+ case SearchStatus.NEW:
+ if (!newPlugins?.includes(plugin.name)) return false;
+ break;
+ }
+
if (!search.length) return true;
return (
@@ -306,7 +219,7 @@ export default function PluginSettings() {
changes.handleChange(name)}
+ onRestartNeeded={(name, key) => changes.handleChange(`${name}.${key}`)}
disabled={true}
plugin={p}
key={p.name}
@@ -317,7 +230,7 @@ export default function PluginSettings() {
} else {
plugins.push(
changes.handleChange(name)}
+ onRestartNeeded={(name, key) => changes.handleChange(`${name}.${key}`)}
disabled={false}
plugin={p}
isNew={newPlugins?.includes(p.name)}
@@ -349,7 +262,6 @@ export default function PluginSettings() {
select={onStatusChange}
isSelected={v => v === searchValue.status}
closeOnSelect={true}
- className={InputStyles.inputDefault}
/>
+ {error} }
+
+ );
+}
diff --git a/src/components/PluginSettings/components/SettingCustomComponent.tsx b/src/components/settings/tabs/plugins/components/ComponentSetting.tsx
similarity index 76%
rename from src/components/PluginSettings/components/SettingCustomComponent.tsx
rename to src/components/settings/tabs/plugins/components/ComponentSetting.tsx
index 25e8c9c6..c43b7276 100644
--- a/src/components/PluginSettings/components/SettingCustomComponent.tsx
+++ b/src/components/settings/tabs/plugins/components/ComponentSetting.tsx
@@ -18,8 +18,8 @@
import { PluginOptionComponent } from "@utils/types";
-import { ISettingCustomElementProps } from ".";
+import { ComponentSettingProps } from "./Common";
-export function SettingCustomComponent({ option, onChange, onError }: ISettingCustomElementProps
+
+ {error &&
+ {name && {wordsToTitle(wordsFromCamel(name))} }
+ {description && {description} }
+
+ {children}
+ The following plugins require a restart:
-{changes.map((s, i) => (
- <>
- {i > 0 && ", "}
- {Parser.parse("`" + s + "`")}
-
- ))}
-
- ),
- confirmText: "Restart now",
- cancelText: "Later!",
- onConfirm: () => location.reload()
- }));
+ useCleanupEffect(() => {
+ if (changes.hasChanges)
+ Alerts.show({
+ title: "Restart required",
+ body: (
+ <>
+ The following plugins require a restart:
+{changes.map((s, i) => (
+ <>
+ {i > 0 && ", "}
+ {Parser.parse("`" + s.split(".")[0] + "`")}
+
+ ))}
+
+ ),
+ confirmText: "Restart now",
+ cancelText: "Later!",
+ onConfirm: () => location.reload()
+ });
}, []);
- const depMap = React.useMemo(() => {
+ const depMap = useMemo(() => {
const o = {} as Record
+ {errors.map((url, i) => (
+
+
+ {hasImgurHtmlDomain && (
+ <>
+
+ {i !== 0 &&
+ ))}
+
+ {url}
+
+
+ https://i.imgur.com/...
+
+
+ BetterDiscord Themes
+
+ GitHub
+
+
+ {userThemes?.map(theme => (
+ onLocalThemeChange(theme.fileName, enabled)}
+ onDelete={async () => {
+ onLocalThemeChange(theme.fileName, false);
+ await VencordNative.themes.deleteTheme(theme.fileName);
+ refreshLocalThemes();
+ }}
+ theme={theme}
+ />
+ ))}
+
+
+
+ ))}
+
+
+
+
+ {message} - {author}
+
+ {updateError.stderr || updateError.stdout || "An unknown error occurred"}
+{Parser.parse(line)}
+ )}
+