diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/VencordSettings/VencordTab.tsx | 149 |
1 files changed, 104 insertions, 45 deletions
diff --git a/src/components/VencordSettings/VencordTab.tsx b/src/components/VencordSettings/VencordTab.tsx index 9f55d57..6ea1ca9 100644 --- a/src/components/VencordSettings/VencordTab.tsx +++ b/src/components/VencordSettings/VencordTab.tsx @@ -22,22 +22,63 @@ import { classNameFactory } from "@api/Styles"; import DonateButton from "@components/DonateButton"; import ErrorBoundary from "@components/ErrorBoundary"; import IpcEvents from "@utils/IpcEvents"; -import { useAwaiter } from "@utils/misc"; -import { Button, Card, Forms, Margins, React, Switch } from "@webpack/common"; +import { Margins } from "@utils/margins"; +import { identity, useAwaiter } from "@utils/misc"; +import { Button, Card, Forms, React, Select, Slider, Switch } from "@webpack/common"; const cl = classNameFactory("vc-settings-"); const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png"; const SHIGGY_DONATE_IMAGE = "https://media.discordapp.net/stickers/1039992459209490513.png"; +type KeysOfType<Object, Type> = { + [K in keyof Object]: Object[K] extends Type ? K : never; +}[keyof Object]; + function VencordSettings() { const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), { fallbackValue: "Loading..." }); const settings = useSettings(); + const notifSettings = settings.notifications; const donateImage = React.useMemo(() => Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE, []); + const isWindows = navigator.platform.toLowerCase().startsWith("win"); + + const Switches: Array<false | { + key: KeysOfType<typeof settings, boolean>; + title: string; + note: string; + }> = + [ + { + key: "useQuickCss", + title: "Enable Custom CSS", + note: "Loads your Custom CSS" + }, + !IS_WEB && { + key: "enableReactDevtools", + title: "Enable React Developer Tools", + note: "Requires a full restart" + }, + !IS_WEB && !isWindows && { + key: "frameless", + title: "Disable the window frame", + note: "Requires a full restart" + }, + !IS_WEB && { + key: "transparent", + title: "Enable window transparency", + note: "Requires a full restart" + }, + !IS_WEB && isWindows && { + key: "winCtrlQ", + title: "Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)", + note: "Requires a full restart" + } + ]; + return ( <React.Fragment> <DonateCard image={donateImage} /> @@ -82,52 +123,70 @@ function VencordSettings() { <Forms.FormDivider /> - <Forms.FormSection className={Margins.marginTop16} title="Settings"> - <Forms.FormText className={Margins.marginBottom20}> + <Forms.FormSection className={Margins.top16} title="Settings" tag="h5"> + <Forms.FormText className={Margins.bottom20}> Hint: You can change the position of this settings section in the settings of the "Settings" plugin! </Forms.FormText> - <Switch - value={settings.useQuickCss} - onChange={(v: boolean) => settings.useQuickCss = v} - note="Loads styles from your QuickCSS file"> - Use QuickCSS - </Switch> - {!IS_WEB && ( - <React.Fragment> - <Switch - value={settings.enableReactDevtools} - onChange={(v: boolean) => settings.enableReactDevtools = v} - note="Requires a full restart" - > - Enable React Developer Tools - </Switch> - <Switch - value={settings.frameless} - onChange={(v: boolean) => settings.frameless = v} - note="Requires a full restart" - > - Disable the window frame - </Switch> - <Switch - value={settings.transparent} - onChange={(v: boolean) => settings.transparent = v} - note="Requires a full restart" - > - Enable window transparency - </Switch> - {navigator.platform.toLowerCase().startsWith("win") && ( - <Switch - value={settings.winCtrlQ} - onChange={(v: boolean) => settings.winCtrlQ = v} - note="Requires a full restart" - > - Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4) - </Switch> - )} - </React.Fragment> - )} - + {Switches.map(s => s && ( + <Switch + key={s.key} + value={settings[s.key]} + onChange={v => settings[s.key] = v} + note={s.note} + > + {s.title} + </Switch> + ))} </Forms.FormSection> + + + <Forms.FormTitle tag="h5">Notification Style</Forms.FormTitle> + <Forms.FormText className={Margins.bottom8}> + Some plugins may show you notifications. These come in two styles: + <ul> + <li><strong>Vencord Notifications</strong>: These are in-app notifications</li> + <li><strong>Desktop Notifications</strong>: Native Desktop notifications (like when you get a ping)</li> + </ul> + </Forms.FormText> + <Select + placeholder="Notification Style" + options={[ + { label: "Only use Desktop notifications when Discord is not focused", value: "not-focused", default: true }, + { label: "Always use Desktop notifications", value: "always" }, + { label: "Always use Vencord notifications", value: "never" }, + ]satisfies Array<{ value: typeof settings["notifications"]["useNative"]; } & Record<string, any>>} + closeOnSelect={true} + select={v => notifSettings.useNative = v} + isSelected={v => v === notifSettings.useNative} + serialize={identity} + /> + + <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Position</Forms.FormTitle> + <Select + isDisabled={notifSettings.useNative === "always"} + placeholder="Notification Position" + options={[ + { label: "Bottom Right", value: "bottom-right", default: true }, + { label: "Top Right", value: "top-right" }, + ]satisfies Array<{ value: typeof settings["notifications"]["position"]; } & Record<string, any>>} + select={v => notifSettings.position = v} + isSelected={v => v === notifSettings.position} + serialize={identity} + /> + + <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Timeout</Forms.FormTitle> + <Forms.FormText className={Margins.bottom16}>Set to 0s to never automatically time out</Forms.FormText> + <Slider + disabled={notifSettings.useNative === "always"} + markers={[0, 1000, 2500, 5000, 10_000, 20_000]} + minValue={0} + maxValue={20_000} + initialValue={notifSettings.timeout} + onValueChange={v => notifSettings.timeout = v} + onValueRender={v => (v / 1000).toFixed(2) + "s"} + onMarkerRender={v => (v / 1000) + "s"} + stickToMarkers={false} + /> </React.Fragment> ); } |