{body}
} +
+ {richBody ??
{image && {body}
} +
+
deleteNotification(data.timestamp), 200);
}}
richBody={
-
);
}
@@ -139,14 +151,9 @@ 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 471fbf01..ad5c9cbc 100644
--- a/src/api/Notifications/styles.css
+++ b/src/api/Notifications/styles.css
@@ -3,14 +3,18 @@
all: unset;
display: flex;
flex-direction: column;
- color: var(--text-default);
- background-color: var(--background-base-low);
+ color: var(--text-normal);
+ background-color: var(--background-secondary-alt);
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;
@@ -28,7 +32,6 @@
.vc-notification-content {
width: 100%;
- overflow: hidden;
}
.vc-notification-header {
@@ -78,11 +81,6 @@
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;
@@ -90,23 +88,19 @@
}
.vc-notification-log-container {
+ display: flex;
+ flex-direction: column;
padding: 1em;
- max-height: min(750px, 75vh);
- width: 100%;
+ overflow: hidden;
}
.vc-notification-log-wrapper {
- height: 120px;
- width: 100%;
- padding-bottom: 16px;
- box-sizing: border-box;
transition: 200ms ease;
transition-property: height, opacity;
+}
- /* stylelint-disable-next-line no-descending-specificity */
- .vc-notification-root {
- height: 104px;
- }
+.vc-notification-log-wrapper:not(:last-child) {
+ margin-bottom: 1em;
}
.vc-notification-log-removing {
@@ -115,18 +109,9 @@
margin-bottom: 1em;
}
-.vc-notification-log-body-wrapper {
+.vc-notification-log-body {
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 {
@@ -138,4 +123,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 5c8965bf..08d2f8ca 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-expect-error "Type instantiation is excessively deep and possibly infinite"
+ // @ts-ignore "Type instantiation is excessively deep and possibly infinite"
? UseSettings extends string ? `${Key}.${UseSettings}` : never
: Key
: never;
diff --git a/src/components/settings/PluginBadge.tsx b/src/components/Badge.tsx
similarity index 90%
rename from src/components/settings/PluginBadge.tsx
rename to src/components/Badge.tsx
index 5208fdea..61b36e97 100644
--- a/src/components/settings/PluginBadge.tsx
+++ b/src/components/Badge.tsx
@@ -16,9 +16,9 @@
* along with this program. If not, see ) {
return (
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 2eb7ab00..0f4eb07d 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -28,9 +28,6 @@ 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/settings/tabs/plugins/ContributorModal.tsx b/src/components/PluginSettings/ContributorModal.tsx
similarity index 97%
rename from src/components/settings/tabs/plugins/ContributorModal.tsx
rename to src/components/PluginSettings/ContributorModal.tsx
index 4794a084..fe0e987c 100644
--- a/src/components/settings/tabs/plugins/ContributorModal.tsx
+++ b/src/components/PluginSettings/ContributorModal.tsx
@@ -4,7 +4,7 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
-import "./ContributorModal.css";
+import "./contributorModal.css";
import { useSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
@@ -14,13 +14,13 @@ import { DevsById } from "@utils/constants";
import { fetchUserProfile } from "@utils/discord";
import { classes, pluralise } from "@utils/misc";
import { ModalContent, ModalRoot, openModal } from "@utils/modal";
-import { User } from "@vencord/discord-types";
import { Forms, showToast, useEffect, useMemo, UserProfileStore, useStateFromStores } from "@webpack/common";
+import { User } from "discord-types/general";
import Plugins from "~plugins";
+import { PluginCard } from ".";
import { GithubButton, WebsiteButton } from "./LinkIconButton";
-import { PluginCard } from "./PluginCard";
const cl = classNameFactory("vc-author-modal-");
diff --git a/src/components/settings/tabs/plugins/LinkIconButton.css b/src/components/PluginSettings/LinkIconButton.css
similarity index 77%
rename from src/components/settings/tabs/plugins/LinkIconButton.css
rename to src/components/PluginSettings/LinkIconButton.css
index 97db0780..1055d6c7 100644
--- a/src/components/settings/tabs/plugins/LinkIconButton.css
+++ b/src/components/PluginSettings/LinkIconButton.css
@@ -2,11 +2,11 @@
height: 32px;
width: 32px;
border-radius: 50%;
- border: 4px solid var(--background-base-lowest);
+ border: 4px solid var(--background-tertiary);
box-sizing: border-box
}
.vc-settings-modal-links {
display: flex;
gap: 0.2em;
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/tabs/plugins/LinkIconButton.tsx b/src/components/PluginSettings/LinkIconButton.tsx
similarity index 95%
rename from src/components/settings/tabs/plugins/LinkIconButton.tsx
rename to src/components/PluginSettings/LinkIconButton.tsx
index 9f9ecfeb..4dae0e1e 100644
--- a/src/components/settings/tabs/plugins/LinkIconButton.tsx
+++ b/src/components/PluginSettings/LinkIconButton.tsx
@@ -6,10 +6,11 @@
import "./LinkIconButton.css";
-import { GithubIcon, WebsiteIcon } from "@components/Icons";
import { getTheme, Theme } from "@utils/discord";
import { MaskedLink, Tooltip } from "@webpack/common";
+import { GithubIcon, WebsiteIcon } from "..";
+
export function GithubLinkIcon() {
const theme = getTheme() === Theme.Light ? "#000000" : "#FFFFFF";
return > = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
interface PluginModalProps extends ModalProps {
plugin: Plugin;
- onRestartNeeded(key: string): void;
+ onRestartNeeded(): void;
}
function makeDummyUser(user: { username: string; id?: string; avatar?: string; }) {
@@ -59,22 +68,39 @@ function makeDummyUser(user: { username: string; id?: string; avatar?: string; }
/** To stop discord making unwanted requests... */
bot: true,
});
-
FluxDispatcher.dispatch({
type: "USER_UPDATE",
user: newUser,
});
-
return newUser;
}
+const Components: Record | ISettingCustomElementProps>> = {
+ [OptionType.STRING]: SettingTextComponent,
+ [OptionType.NUMBER]: SettingNumericComponent,
+ [OptionType.BIGINT]: SettingNumericComponent,
+ [OptionType.BOOLEAN]: SettingBooleanComponent,
+ [OptionType.SELECT]: SettingSelectComponent,
+ [OptionType.SLIDER]: SettingSliderComponent,
+ [OptionType.COMPONENT]: SettingCustomComponent,
+ [OptionType.CUSTOM]: () => null,
+};
+
export default function PluginModal({ plugin, onRestartNeeded, onClose, transitionState }: PluginModalProps) {
+ const [authors, setAuthors] = React.useState[]>([]);
+
const pluginSettings = useSettings().plugins[plugin.name];
+
+ const [tempSettings, setTempSettings] = React.useState>({});
+
+ const [errors, setErrors] = React.useState>({});
+ const [saveError, setSaveError] = React.useState(null);
+
+ const canSubmit = () => Object.values(errors).every(e => !e);
+
const hasSettings = Boolean(pluginSettings && plugin.options && !isObjectEmpty(plugin.options));
- const [authors, setAuthors] = useState[]>([]);
-
- useEffect(() => {
+ React.useEffect(() => {
(async () => {
for (const user of plugin.authors.slice(0, 6)) {
const author = user.id
@@ -87,40 +113,63 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
})();
}, [plugin.authors]);
- function renderSettings() {
- if (!hasSettings || !plugin.options)
- return There are no settings for this plugin. ;
+ async function saveAndClose() {
+ if (!plugin.options) {
+ onClose();
+ return;
+ }
- const options = Object.entries(plugin.options).map(([key, setting]) => {
- if (setting.type === OptionType.CUSTOM || setting.hidden) return null;
-
- function onChange(newValue: any) {
- const option = plugin.options?.[key];
- if (!option || option.type === OptionType.CUSTOM) return;
-
- pluginSettings[key] = newValue;
-
- if (option.restartNeeded) onRestartNeeded(key);
+ if (plugin.beforeSave) {
+ const result = await Promise.resolve(plugin.beforeSave(tempSettings));
+ if (result !== true) {
+ setSaveError(result);
+ return;
}
+ }
- const Component = OptionComponentMap[setting.type];
- return (
- There are no settings for this plugin. ;
+ } else {
+ const options = Object.entries(plugin.options).map(([key, setting]) => {
+ if (setting.type === OptionType.CUSTOM || setting.hidden) return null;
+
+ function onChange(newValue: any) {
+ setTempSettings(s => ({ ...s, [key]: newValue }));
+ }
+
+ function onError(hasError: boolean) {
+ setErrors(e => ({ ...e, [key]: hasError }));
+ }
+
+ const Component = Components[setting.type];
+ return (
+ {options} ;
+ }
}
function renderMoreUsers(_label: string, count: number) {
@@ -143,16 +192,38 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
);
}
+ /*
+ function switchToPopout() {
+ onClose();
+
+ const PopoutKey = `DISCORD_VENCORD_PLUGIN_SETTINGS_MODAL_${plugin.name}`;
+ PopoutActions.open(
+ PopoutKey,
+ () => PopoutActions.close(PopoutKey)}
+ />
+ );
+ }
+ */
+
const pluginMeta = PluginMeta[plugin.name];
return (
-
-
- {plugin.name}
+
+
+ {plugin.name}
+
+ {/*
+
+ */}
-
-
+
{plugin.description}
@@ -169,14 +240,16 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
)}
-
-
+ {data.body}
+
+ {data.body}
}
/>
-
+ {log.map(n =>
);
}
@@ -154,15 +161,15 @@ function LogModal({ modalProps, close }: { modalProps: ModalProps; close(): void
const [log, pending] = useLogs();
return (
-
+
+
- {options}
-
- );
+ if (option.type === OptionType.CUSTOM) continue;
+ if (option?.restartNeeded) restartNeeded = true;
+ }
+ if (restartNeeded) onRestartNeeded();
+ onClose();
+ }
+
+ function renderSettings() {
+ if (!hasSettings || !plugin.options) {
+ return
+ Authors
+
(
-
{!!plugin.settingsAboutComponent && (
-
@@ -298,11 +386,9 @@ 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, key: string) => void) {
+export function openPluginModal(plugin: Plugin, onRestartNeeded?: (pluginName: string) => void) {
openModal(modalProps => (
onRestartNeeded?.(plugin.name, key)}
+ onRestartNeeded={() => onRestartNeeded?.(plugin.name)}
/>
));
}
diff --git a/src/components/PluginSettings/components/SettingBooleanComponent.tsx b/src/components/PluginSettings/components/SettingBooleanComponent.tsx
new file mode 100644
index 00000000..e5219e45
--- /dev/null
+++ b/src/components/PluginSettings/components/SettingBooleanComponent.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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/settings/tabs/plugins/components/ComponentSetting.tsx b/src/components/PluginSettings/components/SettingCustomComponent.tsx
similarity index 76%
rename from src/components/settings/tabs/plugins/components/ComponentSetting.tsx
rename to src/components/PluginSettings/components/SettingCustomComponent.tsx
index c43b7276..25e8c9c6 100644
--- a/src/components/settings/tabs/plugins/components/ComponentSetting.tsx
+++ b/src/components/PluginSettings/components/SettingCustomComponent.tsx
@@ -18,8 +18,8 @@
import { PluginOptionComponent } from "@utils/types";
-import { ComponentSettingProps } from "./Common";
+import { ISettingCustomElementProps } from ".";
-export function ComponentSetting({ option, onChange }: ComponentSettingProps) {
- return option.component({ setValue: onChange, option });
+export function SettingCustomComponent({ option, onChange, onError }: ISettingCustomElementProps) {
+ return option.component({ setValue: onChange, setError: onError, option });
}
diff --git a/src/components/settings/tabs/plugins/components/NumberSetting.tsx b/src/components/PluginSettings/components/SettingNumericComponent.tsx
similarity index 59%
rename from src/components/settings/tabs/plugins/components/NumberSetting.tsx
rename to src/components/PluginSettings/components/SettingNumericComponent.tsx
index 108ddc3e..b724717d 100644
--- a/src/components/settings/tabs/plugins/components/NumberSetting.tsx
+++ b/src/components/PluginSettings/components/SettingNumericComponent.tsx
@@ -16,49 +16,58 @@
* along with this program. If not, see ) {
+export function SettingNumericComponent({ option, pluginSettings, definedSettings, id, onChange, onError }: ISettingElementProps) {
function serialize(value: any) {
if (option.type === OptionType.BIGINT) return BigInt(value);
return Number(value);
}
- const [state, setState] = useState(`${pluginSettings[id] ?? option.default ?? 0}`);
- const [error, setError] = useState(null);
+ const [state, setState] = React.useState(`${pluginSettings[id] ?? option.default ?? 0}`);
+ const [error, setError] = React.useState(null);
- function handleChange(newValue: any) {
+ React.useEffect(() => {
+ onError(error !== null);
+ }, [error]);
+
+ function handleChange(newValue) {
const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
- setError(resolveError(isValid));
-
- if (isValid === true) {
- onChange(serialize(newValue));
- }
+ setError(null);
+ if (typeof isValid === "string") setError(isValid);
+ else if (!isValid) setError("Invalid input provided.");
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 && {error} }
+
);
}
diff --git a/src/components/settings/tabs/plugins/components/SelectSetting.tsx b/src/components/PluginSettings/components/SettingSelectComponent.tsx
similarity index 56%
rename from src/components/settings/tabs/plugins/components/SelectSetting.tsx
rename to src/components/PluginSettings/components/SettingSelectComponent.tsx
index 4c912c51..5f1cd027 100644
--- a/src/components/settings/tabs/plugins/components/SelectSetting.tsx
+++ b/src/components/PluginSettings/components/SettingSelectComponent.tsx
@@ -16,41 +16,50 @@
* along with this program. If not, see ) {
+export function SettingSelectComponent({ option, pluginSettings, definedSettings, onChange, onError, id }: ISettingElementProps) {
const def = pluginSettings[id] ?? option.options?.find(o => o.default)?.value;
- const [state, setState] = useState(def ?? null);
- const [error, setError] = useState(null);
+ const [state, setState] = React.useState(def ?? null);
+ const [error, setError] = React.useState(null);
- function handleChange(newValue: any) {
+ React.useEffect(() => {
+ onError(error !== null);
+ }, [error]);
+
+ function handleChange(newValue) {
const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
-
- setState(newValue);
- setError(resolveError(isValid));
-
- if (isValid === 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))}
+ {option.description}
+ {error && {error} }
+
);
}
diff --git a/src/components/settings/tabs/plugins/components/SliderSetting.tsx b/src/components/PluginSettings/components/SettingSliderComponent.tsx
similarity index 58%
rename from src/components/settings/tabs/plugins/components/SliderSetting.tsx
rename to src/components/PluginSettings/components/SettingSliderComponent.tsx
index 85a52da2..738f5f01 100644
--- a/src/components/settings/tabs/plugins/components/SliderSetting.tsx
+++ b/src/components/PluginSettings/components/SettingSliderComponent.tsx
@@ -16,29 +16,46 @@
* along with this program. If not, see ) {
+export function makeRange(start: number, end: number, step = 1) {
+ const ranges: number[] = [];
+ for (let value = start; value <= end; value += step) {
+ ranges.push(Math.round(value * 100) / 100);
+ }
+ return ranges;
+}
+
+export function SettingSliderComponent({ option, pluginSettings, definedSettings, id, onChange, onError }: ISettingElementProps) {
const def = pluginSettings[id] ?? option.default;
- const [error, setError] = useState(null);
+ const [error, setError] = React.useState(null);
+
+ React.useEffect(() => {
+ onError(error !== null);
+ }, [error]);
function handleChange(newValue: number): void {
const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
-
- setError(resolveError(isValid));
-
- if (isValid === true) {
+ if (typeof isValid === "string") setError(isValid);
+ else if (!isValid) setError("Invalid input provided.");
+ else {
+ setError(null);
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/settings/tabs/plugins/components/TextSetting.tsx b/src/components/PluginSettings/components/SettingTextComponent.tsx
similarity index 52%
rename from src/components/settings/tabs/plugins/components/TextSetting.tsx
rename to src/components/PluginSettings/components/SettingTextComponent.tsx
index 7eb4b9f9..36b8b13a 100644
--- a/src/components/settings/tabs/plugins/components/TextSetting.tsx
+++ b/src/components/PluginSettings/components/SettingTextComponent.tsx
@@ -16,37 +16,45 @@
* along with this program. If not, see ) {
- const [state, setState] = useState(pluginSettings[id] ?? option.default ?? null);
- const [error, setError] = useState(null);
+export function SettingTextComponent({ option, pluginSettings, definedSettings, id, onChange, onError }: ISettingElementProps) {
+ const [state, setState] = React.useState(pluginSettings[id] ?? option.default ?? null);
+ const [error, setError] = React.useState(null);
- function handleChange(newValue: string) {
+ React.useEffect(() => {
+ onError(error !== null);
+ }, [error]);
+
+ function handleChange(newValue) {
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);
- setError(resolveError(isValid));
-
- if (isValid === true) {
- onChange(newValue);
- }
+ onChange(newValue);
}
return (
-
+
+ {wordsToTitle(wordsFromCamel(id))}
+ {option.description}
+ {error && {error} }
+
);
}
diff --git a/src/components/PluginSettings/components/index.ts b/src/components/PluginSettings/components/index.ts
new file mode 100644
index 00000000..c38f209b
--- /dev/null
+++ b/src/components/PluginSettings/components/index.ts
@@ -0,0 +1,43 @@
+/*
+ * 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/settings/tabs/plugins/ContributorModal.css b/src/components/PluginSettings/contributorModal.css
similarity index 89%
rename from src/components/settings/tabs/plugins/ContributorModal.css
rename to src/components/PluginSettings/contributorModal.css
index ef3b2dde..3a698e2c 100644
--- a/src/components/settings/tabs/plugins/ContributorModal.css
+++ b/src/components/PluginSettings/contributorModal.css
@@ -11,7 +11,7 @@
.vc-author-modal-name {
text-transform: none;
flex-grow: 0;
- background: var(--background-base-lowest);
+ background: var(--background-tertiary);
border-radius: 0 9999px 9999px 0;
padding: 6px 0.8em 6px 0.5em;
font-size: 20px;
@@ -26,7 +26,7 @@
position: absolute;
height: 100%;
width: 32px;
- background: var(--background-base-lowest);
+ background: var(--background-tertiary);
z-index: -1;
left: -32px;
top: 0;
@@ -48,4 +48,4 @@
display: grid;
gap: 0.5em;
margin-top: 0.75em;
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/tabs/plugins/index.tsx b/src/components/PluginSettings/index.tsx
similarity index 56%
rename from src/components/settings/tabs/plugins/index.tsx
rename to src/components/PluginSettings/index.tsx
index 4db9699a..27eb10a3 100644
--- a/src/components/settings/tabs/plugins/index.tsx
+++ b/src/components/PluginSettings/index.tsx
@@ -19,53 +19,153 @@
import "./styles.css";
import * as DataStore from "@api/DataStore";
-import { useSettings } from "@api/Settings";
+import { showNotice } from "@api/Notices";
+import { Settings, useSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
-import { SettingsTab, wrapTab } from "@components/settings/tabs/BaseTab";
+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 { ChangeList } from "@utils/ChangeList";
+import { proxyLazy } from "@utils/lazy";
import { Logger } from "@utils/Logger";
import { Margins } from "@utils/margins";
-import { classes } from "@utils/misc";
-import { useAwaiter, useCleanupEffect } from "@utils/react";
+import { classes, isObjectEmpty } from "@utils/misc";
+import { useAwaiter } from "@utils/react";
+import { Plugin } from "@utils/types";
import { findByPropsLazy } from "@webpack";
-import { Alerts, Button, Card, Forms, lodash, Parser, React, Select, Text, TextInput, Tooltip, useMemo, useState } from "@webpack/common";
+import { Alerts, Button, Card, Forms, lodash, Parser, React, Select, Text, TextInput, Toasts, Tooltip, useMemo } from "@webpack/common";
import { JSX } from "react";
import Plugins, { ExcludedPlugins } from "~plugins";
-import { PluginCard } from "./PluginCard";
+// Avoid circular dependency
+const { startDependenciesRecursive, startPlugin, stopPlugin } = proxyLazy(() => require("../../plugins"));
-export const cl = classNameFactory("vc-plugins-");
-export const logger = new Logger("PluginSettings", "#a6d189");
+const cl = classNameFactory("vc-plugins-");
+const logger = new Logger("PluginSettings", "#a6d189");
-const InputStyles = findByPropsLazy("inputWrapper", "inputError", "error");
+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
+ }
+ });
+}
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 = React.useMemo(() => new ChangeList(), []);
- useCleanupEffect(() => {
- if (changes.hasChanges)
- Alerts.show({
- title: "Restart required",
- body: (
- <>
- ;
for (const plugin in Plugins) {
const deps = Plugins[plugin].dependencies;
@@ -143,12 +242,10 @@ 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] = useState({ value: "", status: SearchStatus.ALL });
+ const [searchValue, setSearchValue] = React.useState({ value: "", status: SearchStatus.ALL });
const search = searchValue.value.toLowerCase();
const onSearch = (query: string) => setSearchValue(prev => ({ ...prev, value: query }));
@@ -157,19 +254,9 @@ function PluginSettings() {
const pluginFilter = (plugin: typeof Plugins[keyof typeof Plugins]) => {
const { status } = searchValue;
const enabled = Vencord.Plugins.isPluginEnabled(plugin.name);
-
- 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 (enabled && status === SearchStatus.DISABLED) return false;
+ if (!enabled && status === SearchStatus.ENABLED) return false;
+ if (status === SearchStatus.NEW && !newPlugins?.includes(plugin.name)) return false;
if (!search.length) return true;
return (
@@ -219,7 +306,7 @@ function PluginSettings() {
changes.handleChange(`${name}.${key}`)}
+ onRestartNeeded={name => changes.handleChange(name)}
disabled={true}
plugin={p}
key={p.name}
@@ -230,7 +317,7 @@ function PluginSettings() {
} else {
plugins.push(
changes.handleChange(`${name}.${key}`)}
+ onRestartNeeded={name => changes.handleChange(name)}
disabled={false}
plugin={p}
isNew={newPlugins?.includes(p.name)}
@@ -262,6 +349,7 @@ function PluginSettings() {
select={onStatusChange}
isSelected={v => v === searchValue.status}
closeOnSelect={true}
+ className={InputStyles.inputDefault}
/>
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()
- });
+ React.useEffect(() => {
+ return () => void (changes.hasChanges && Alerts.show({
+ title: "Restart required",
+ body: (
+ <>
+ The following plugins require a restart:
+{changes.map((s, i) => (
+ <>
+ {i > 0 && ", "}
+ {Parser.parse("`" + s + "`")}
+
+ ))}
+
+ ),
+ confirmText: "Restart now",
+ cancelText: "Later!",
+ onConfirm: () => location.reload()
+ }));
}, []);
- const depMap = useMemo(() => {
+ const depMap = React.useMemo(() => {
const o = {} as Record
{name}
-
- {isNew && {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"}
+{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}
-
- ))}
-
- )}
-
-
- {error} }
-
- );
-}
diff --git a/src/components/settings/tabs/plugins/components/index.ts b/src/components/settings/tabs/plugins/components/index.ts
deleted file mode 100644
index 0f1dd40c..00000000
--- a/src/components/settings/tabs/plugins/components/index.ts
+++ /dev/null
@@ -1,41 +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
-
- {error &&
- {name && {wordsToTitle(wordsFromCamel(name))} }
- {description && {description} }
-
- {children}
-
- {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)}
- )}
-