Vencord/src/components/Settings.tsx

174 lines
6.9 KiB
TypeScript
Raw Normal View History

import { classes, humanFriendlyJoin, useAwaiter } from "../utils/misc";
2022-08-31 02:07:16 +00:00
import Plugins from 'plugins';
import { useSettings } from "../api/settings";
import IpcEvents from "../utils/IpcEvents";
import { Button, Switch, Forms, React, Margins, Toasts, Alerts, Parser } from "../webpack/common";
2022-08-31 18:47:07 +00:00
import ErrorBoundary from "./ErrorBoundary";
import { startPlugin } from "../plugins";
import { stopPlugin } from '../plugins/index';
2022-09-27 14:57:46 +00:00
import { Flex } from './Flex';
import { ChangeList } from '../utils/ChangeList';
2022-08-31 02:07:16 +00:00
function showErrorToast(message: string) {
Toasts.show({
message,
type: Toasts.Type.FAILURE,
id: Toasts.genId(),
options: {
position: Toasts.Position.BOTTOM
}
});
}
export default ErrorBoundary.wrap(function Settings() {
2022-08-31 18:47:07 +00:00
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
2022-08-31 02:07:16 +00:00
const settings = useSettings();
const changes = React.useMemo(() => new ChangeList<string>, []);
React.useEffect(() => {
return () => void (changes.hasChanges && Alerts.show({
title: "Restart required",
body: (
<>
<p>The following plugins require a restart:</p>
<div>{changes.map((s, i) => (
<>
{i > 0 && ", "}
{Parser.parse('`' + s + '`')}
</>
))}</div>
</>
),
confirmText: "Restart now",
cancelText: "Later!",
onConfirm: () => location.reload()
}));
}, []);
2022-08-31 02:07:16 +00:00
2022-09-01 19:41:00 +00:00
const depMap = React.useMemo(() => {
const o = {} as Record<string, string[]>;
for (const plugin in Plugins) {
const deps = Plugins[plugin].dependencies;
if (deps) {
for (const dep of deps) {
o[dep] ??= [];
o[dep].push(plugin);
}
}
}
return o;
}, []);
const sortedPlugins = React.useMemo(() => Object.values(Plugins).sort((a, b) => a.name.localeCompare(b.name)), []);
2022-08-31 02:07:16 +00:00
return (
<Forms.FormSection tag="h1" title="Vencord">
<Forms.FormTitle tag="h5">
2022-09-30 22:42:50 +00:00
Settings
</Forms.FormTitle>
<Forms.FormText>
2022-10-01 23:05:15 +00:00
SettingsDir: <code style={{ userSelect: 'text', cursor: 'text' }}>{settingsDir}</code>
2022-09-30 22:42:50 +00:00
</Forms.FormText>
<Flex className={classes(Margins.marginBottom20)}>
2022-10-01 23:05:15 +00:00
<Button
onClick={() => location.reload()}
size={Button.Sizes.SMALL}
color={Button.Colors.GREEN}
>
Reload
</Button>
2022-09-27 14:57:46 +00:00
<Button
onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir)}
size={Button.Sizes.SMALL}
disabled={settingsDirPending}
>
Launch Directory
</Button>
<Button
onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir, "quickCss.css")}
size={Button.Sizes.SMALL}
disabled={settingsDir === "Loading..."}
>
Open QuickCSS File
</Button>
2022-08-31 02:07:16 +00:00
</Flex>
2022-10-01 23:05:15 +00:00
<Forms.FormDivider />
<Forms.FormTitle tag="h5">Settings</Forms.FormTitle>
<Switch
value={settings.useQuickCss}
2022-10-01 23:05:15 +00:00
onChange={(v: boolean) => settings.useQuickCss = v}
note="Enable QuickCSS"
>
Use QuickCss
</Switch>
2022-09-30 22:42:50 +00:00
<Switch
value={settings.notifyAboutUpdates}
2022-10-01 23:05:15 +00:00
onChange={(v: boolean) => settings.notifyAboutUpdates = v}
2022-09-30 22:42:50 +00:00
note="Shows a Toast on StartUp"
>
Get notified about new Updates
</Switch>
2022-08-31 18:47:07 +00:00
<Switch
2022-08-31 02:07:16 +00:00
value={settings.unsafeRequire}
2022-10-01 23:05:15 +00:00
onChange={(v: boolean) => settings.unsafeRequire = v}
2022-08-31 02:07:16 +00:00
note="Enables VencordNative.require. Useful for testing, very bad for security. Leave this off unless you need it."
>
Enable Unsafe Require
2022-08-31 18:47:07 +00:00
</Switch>
2022-09-30 22:42:50 +00:00
2022-08-31 02:07:16 +00:00
<Forms.FormDivider />
2022-09-30 22:42:50 +00:00
<Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
Plugins
</Forms.FormTitle>
{sortedPlugins.map(p => {
2022-09-01 19:41:00 +00:00
const enabledDependants = depMap[p.name]?.filter(d => settings.plugins[d].enabled);
const dependency = enabledDependants?.length;
return (
<Switch
disabled={p.required || dependency}
key={p.name}
value={settings.plugins[p.name].enabled || p.required || dependency}
onChange={v => {
settings.plugins[p.name].enabled = v;
if (v) {
p.dependencies?.forEach(d => {
settings.plugins[d].enabled = true;
if (!Plugins[d].started && !stopPlugin) {
settings.plugins[p.name].enabled = false;
showErrorToast(`Failed to start dependency ${d}. Check the console for more info.`);
2022-09-01 19:41:00 +00:00
}
});
if (!p.started && !startPlugin(p)) {
showErrorToast(`Failed to start plugin ${p.name}. Check the console for more info.`);
2022-09-01 19:41:00 +00:00
}
} else {
if (p.started && !stopPlugin(p)) {
showErrorToast(`Failed to stop plugin ${p.name}. Check the console for more info.`);
}
}
if (p.patches) changes.handleChange(p.name);
2022-09-01 19:41:00 +00:00
}}
note={p.description}
tooltipNote={
p.required ?
"This plugin is required. Thus you cannot disable it."
: dependency ?
`${humanFriendlyJoin(enabledDependants)} ${enabledDependants.length === 1 ? "depends" : "depend"} on this plugin. Thus you cannot disable it.`
: null
}
2022-09-01 19:41:00 +00:00
>
{p.name}
</Switch>
);
})
2022-08-31 02:07:16 +00:00
}
</Forms.FormSection >
);
2022-09-16 20:59:34 +00:00
});