mirrors/Equicord
1
1
Fork 0
mirror of https://github.com/Equicord/Equicord.git synced 2025-01-18 21:33:35 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Settings(mainTab): bleh

Browse source
This commit is contained in:
Cortex 2024-10-31 22:01:11 -06:00
parent 1865ab1748
commit 507b4c0f06
1 changed files with 309 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

550
src/components/VencordSettings/VencordTab.tsx
View file

@ -14,7 +14,7 @@
* *
* You should have received a copy of the GNU General Public License * You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import "./VencordTab.css"; import "./VencordTab.css";
@ -28,279 +28,347 @@ import { Margins } from "@utils/margins";
import { identity } from "@utils/misc"; import { identity } from "@utils/misc";
import { relaunch, showItemInFolder } from "@utils/native"; import { relaunch, showItemInFolder } from "@utils/native";
import { useAwaiter } from "@utils/react"; import { useAwaiter } from "@utils/react";
import { Button, Card, Forms, React, Select, showToast, Switch } from "@webpack/common"; import {
Button,
Card,
Forms,
React,
Select,
showToast,
Switch,
} from "@webpack/common";
import { Flex, FolderIcon, GithubIcon, Heart, LogIcon, PaintbrushIcon, RestartIcon } from ".."; import {
Flex,
FolderIcon,
GithubIcon,
Heart,
LogIcon,
PaintbrushIcon,
RestartIcon,
} from "..";
import { openNotificationSettingsModal } from "./NotificationSettings"; import { openNotificationSettingsModal } from "./NotificationSettings";
import { QuickAction, QuickActionCard } from "./quickActions"; import { QuickAction, QuickActionCard } from "./quickActions";
import { SettingsTab, wrapTab } from "./shared"; import { SettingsTab, wrapTab } from "./shared";
const cl = classNameFactory("vc-settings-"); const cl = classNameFactory("vc-settings-");
const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png"; const DEFAULT_DONATE_IMAGE =
"https://cdn.discordapp.com/emojis/1026533090627174460.png";
const SHIGGY_DONATE_IMAGE = "https://i.imgur.com/57ATLZu.png"; const SHIGGY_DONATE_IMAGE = "https://i.imgur.com/57ATLZu.png";
type KeysOfType<Object, Type> = { type KeysOfType<Object, Type> = {
[K in keyof Object]: Object[K] extends Type ? K : never; [K in keyof Object]: Object[K] extends Type ? K : never;
}[keyof Object]; }[keyof Object];
function EquicordSettings() { function EquicordSettings() {
const [settingsDir, , settingsDirPending] = useAwaiter(VencordNative.settings.getSettingsDir, { const [settingsDir, , settingsDirPending] = useAwaiter(
fallbackValue: "Loading..." VencordNative.settings.getSettingsDir,
}); {
const settings = useSettings(); fallbackValue: "Loading...",
},
);
const settings = useSettings();
const discordInvite = "bFp57wxCkv"; const discordInvite = "bFp57wxCkv";
const donateImage = React.useMemo(() => Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE, []); const donateImage = React.useMemo(
() => (Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE),
[],
);
const isWindows = navigator.platform.toLowerCase().startsWith("win"); const isWindows = navigator.platform.toLowerCase().startsWith("win");
const isMac = navigator.platform.toLowerCase().startsWith("mac"); const isMac = navigator.platform.toLowerCase().startsWith("mac");
const needsVibrancySettings = IS_DISCORD_DESKTOP && isMac; const needsVibrancySettings = IS_DISCORD_DESKTOP && isMac;
const Switches: Array<false | { const Switches: Array<
| false
| {
key: KeysOfType<typeof settings, boolean>; key: KeysOfType<typeof settings, boolean>;
title: string; title: string;
note: string; note: string;
warning: { enabled: boolean; message?: string; }; warning: { enabled: boolean; message?: string };
}> = }
[ > = [
{ {
key: "useQuickCss", key: "useQuickCss",
title: "Enable Custom CSS", title: "Enable Custom CSS",
note: "Loads your Custom CSS", note: "Loads your Custom CSS",
warning: { enabled: false } warning: { enabled: false },
}, },
!IS_WEB && { !IS_WEB && {
key: "enableReactDevtools", key: "enableReactDevtools",
title: "Enable React Developer Tools", title: "Enable React Developer Tools",
note: "Requires a full restart", note: "Requires a full restart",
warning: { enabled: false } warning: { enabled: false },
}, },
!IS_WEB && (!IS_DISCORD_DESKTOP || !isWindows ? { !IS_WEB &&
key: "frameless", (!IS_DISCORD_DESKTOP || !isWindows
title: "Disable the window frame", ? {
note: "Requires a full restart", key: "frameless",
warning: { enabled: false } title: "Disable the window frame",
} : { note: "Requires a full restart",
key: "winNativeTitleBar", warning: { enabled: false },
title: "Use Windows' native title bar instead of Discord's custom one", }
note: "Requires a full restart", : {
warning: { enabled: false } key: "winNativeTitleBar",
}), title:
!IS_WEB && { "Use Windows' native title bar instead of Discord's custom one",
key: "transparent", note: "Requires a full restart",
title: "Enable window transparency.", warning: { enabled: false },
note: "You need a theme that supports transparency or this will do nothing. Requires a full restart!", }),
warning: { enabled: true, message: "This will stop the window from being resizable." } !IS_WEB && {
}, key: "transparent",
!IS_WEB && isWindows && { title: "Enable window transparency.",
key: "winCtrlQ", note: "You need a theme that supports transparency or this will do nothing. Requires a full restart!",
title: "Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)", warning: {
note: "Requires a full restart", enabled: true,
warning: { enabled: false } message: "This will stop the window from being resizable.",
}, },
IS_DISCORD_DESKTOP && { },
key: "disableMinSize", !IS_WEB &&
title: "Disable minimum window size", isWindows && {
note: "Requires a full restart", key: "winCtrlQ",
warning: { enabled: false } title:
}, "Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)",
]; note: "Requires a full restart",
warning: { enabled: false },
},
IS_DISCORD_DESKTOP && {
key: "disableMinSize",
title: "Disable minimum window size",
note: "Requires a full restart",
warning: { enabled: false },
},
];
return ( return (
<SettingsTab title="Equicord Settings"> <SettingsTab title="Equicord Settings">
<DiscordInviteCard invite={discordInvite} image={donateImage} /> <DiscordInviteCard invite={discordInvite} image={donateImage} />
<Forms.FormSection title="Quick Actions"> <Forms.FormSection title="Quick Actions">
<QuickActionCard> <QuickActionCard>
<QuickAction <QuickAction
Icon={LogIcon} Icon={LogIcon}
text="Notification Log" text="Notification Log"
action={openNotificationLogModal} action={openNotificationLogModal}
/> />
<QuickAction <QuickAction
Icon={PaintbrushIcon} Icon={PaintbrushIcon}
text="Edit QuickCSS" text="Edit QuickCSS"
action={() => VencordNative.quickCss.openEditor()} action={() => VencordNative.quickCss.openEditor()}
/> />
{!IS_WEB && ( {!IS_WEB && (
<QuickAction <QuickAction
Icon={RestartIcon} Icon={RestartIcon}
text="Relaunch Discord" text="Relaunch Discord"
action={relaunch} action={relaunch}
/> />
)} )}
{!IS_WEB && ( {!IS_WEB && (
<QuickAction <QuickAction
Icon={FolderIcon} Icon={FolderIcon}
text="Open Settings Folder" text="Open Settings Folder"
action={() => showItemInFolder(settingsDir)} action={() => showItemInFolder(settingsDir)}
/> />
)} )}
<QuickAction <QuickAction
Icon={GithubIcon} Icon={GithubIcon}
text="View Source Code" text="View Source Code"
action={() => VencordNative.native.openExternal("https://github.com/" + gitRemote)} action={() =>
/> VencordNative.native.openExternal(
</QuickActionCard> "https://github.com/" + gitRemote,
</Forms.FormSection> )
}
/>
</QuickActionCard>
</Forms.FormSection>
<Forms.FormDivider /> <Forms.FormDivider />
<Forms.FormSection className={Margins.top16} title="Settings" tag="h5"> <Forms.FormSection className={Margins.top16} title="Settings" tag="h5">
<Forms.FormText className={Margins.bottom20} style={{ color: "var(--text-muted)" }}> <Forms.FormText
Hint: You can change the position of this settings section in the className={Margins.bottom20}
{" "}<Button style={{ color: "var(--text-muted)" }}
look={Button.Looks.BLANK} >
style={{ color: "var(--text-link)", display: "inline-block" }} Hint: You can change the position of this settings section in the{" "}
onClick={() => openPluginModal(Vencord.Plugins.plugins.Settings)} <Button
> look={Button.Looks.BLANK}
settings of the Settings plugin style={{ color: "var(--text-link)", display: "inline-block" }}
</Button>! onClick={() => openPluginModal(Vencord.Plugins.plugins.Settings)}
</Forms.FormText> >
settings of the Settings plugin
</Button>
!
</Forms.FormText>
{Switches.map(s => s && ( {Switches.map(
<Switch (s) =>
key={s.key} s && (
value={settings[s.key]} <Switch
onChange={v => settings[s.key] = v} key={s.key}
note={ value={settings[s.key]}
s.warning.enabled ? <> onChange={(v) => (settings[s.key] = v)}
{s.note} note={
<div className="form-switch-warning"> s.warning.enabled ? (
{s.warning.message} <>
</div> {s.note}
</> : s.note <div className="form-switch-warning">
} {s.warning.message}
> </div>
{s.title} </>
</Switch> ) : (
))} s.note
</Forms.FormSection> )
}
>
{s.title}
</Switch>
),
)}
</Forms.FormSection>
{needsVibrancySettings && (
<>
<Forms.FormTitle tag="h5">
Window vibrancy style (requires restart)
</Forms.FormTitle>
<Select
className={Margins.bottom20}
placeholder="Window vibrancy style"
options={[
// Sorted from most opaque to most transparent
{
label: "No vibrancy",
value: undefined,
},
{
label: "Under Page (window tinting)",
value: "under-page",
},
{
label: "Content",
value: "content",
},
{
label: "Window",
value: "window",
},
{
label: "Selection",
value: "selection",
},
{
label: "Titlebar",
value: "titlebar",
},
{
label: "Header",
value: "header",
},
{
label: "Sidebar",
value: "sidebar",
},
{
label: "Tooltip",
value: "tooltip",
},
{
label: "Menu",
value: "menu",
},
{
label: "Popover",
value: "popover",
},
{
label: "Fullscreen UI (transparent but slightly muted)",
value: "fullscreen-ui",
},
{
label: "HUD (Most transparent)",
value: "hud",
},
]}
select={(v) => (settings.macosVibrancyStyle = v)}
isSelected={(v) => settings.macosVibrancyStyle === v}
serialize={identity}
/>
</>
)}
{needsVibrancySettings && <> <Forms.FormSection
<Forms.FormTitle tag="h5">Window vibrancy style (requires restart)</Forms.FormTitle> className={Margins.top16}
<Select title="Equicord Notifications"
className={Margins.bottom20} tag="h5"
placeholder="Window vibrancy style" >
options={[ <Flex>
// Sorted from most opaque to most transparent <Button onClick={openNotificationSettingsModal}>
{ Notification Settings
label: "No vibrancy", value: undefined </Button>
}, <Button onClick={openNotificationLogModal}>
{ View Notification Log
label: "Under Page (window tinting)", </Button>
value: "under-page" </Flex>
}, </Forms.FormSection>
{ </SettingsTab>
label: "Content", );
value: "content"
},
{
label: "Window",
value: "window"
},
{
label: "Selection",
value: "selection"
},
{
label: "Titlebar",
value: "titlebar"
},
{
label: "Header",
value: "header"
},
{
label: "Sidebar",
value: "sidebar"
},
{
label: "Tooltip",
value: "tooltip"
},
{
label: "Menu",
value: "menu"
},
{
label: "Popover",
value: "popover"
},
{
label: "Fullscreen UI (transparent but slightly muted)",
value: "fullscreen-ui"
},
{
label: "HUD (Most transparent)",
value: "hud"
},
]}
select={v => settings.macosVibrancyStyle = v}
isSelected={v => settings.macosVibrancyStyle === v}
serialize={identity} />
</>}
<Forms.FormSection className={Margins.top16} title="Equicord Notifications" tag="h5">
<Flex>
<Button onClick={openNotificationSettingsModal}>
Notification Settings
</Button>
<Button onClick={openNotificationLogModal}>
View Notification Log
</Button>
</Flex>
</Forms.FormSection>
</SettingsTab>
);
} }
interface DiscordInviteProps { interface DiscordInviteProps {
invite: string; invite: string;
image: string; image: string;
} }
function DiscordInviteCard({ invite, image }: DiscordInviteProps) { function DiscordInviteCard({ invite, image }: DiscordInviteProps) {
return ( return (
<Card className={cl("card", "discordinvite")}> <Card className={cl("card", "discordinvite")}>
<div> <div>
<Forms.FormTitle tag="h5">Join the discord!</Forms.FormTitle> <Forms.FormTitle tag="h5">Join the discord!</Forms.FormTitle>
<Forms.FormText>Please consider joining the discord for any news on breaking changes, or new bigger updates!</Forms.FormText> <Forms.FormText>
<Forms.FormText>You can also donate to me if you'd like to support this project. <Heart /></Forms.FormText> Please consider joining the discord for any news on breaking changes,
or new bigger updates!
</Forms.FormText>
<Forms.FormText>
<Heart /> You can also donate to me if you'd like to support this
project.
</Forms.FormText>
<div className={cl("card-buttons")}> <div className={cl("card-buttons")}>
<Button <Button
className="vc-joindiscordbutton vc-settingbuttons" className="vc-joindiscordbutton vc-settingbuttons"
onClick={async e => { onClick={async (e) => {
e.preventDefault(); e.preventDefault();
openInviteModal(invite).catch(() => showToast("Invalid or expired invite")); openInviteModal(invite).catch(() =>
}} showToast("Invalid or expired invite"),
> );
Join }}
</Button> >
Join
</Button>
<Button <Button
className="vc-donatebutton vc-settingbuttons" className="vc-donatebutton vc-settingbuttons"
onClick={() => { VencordNative.native.openExternal("https://github.com/sponsors/verticalsync"); }} onClick={() => {
> VencordNative.native.openExternal(
Donate "https://github.com/sponsors/verticalsync",
</Button> );
</div> }}
</div> >
<img Donate
role="presentation" </Button>
src={image} </div>
alt="" </div>
height={128} <img
style={{ role="presentation"
marginLeft: "auto", src={image}
}} alt=""
/> height={128}
</Card> style={{
); marginLeft: "auto",
}}
/>
</Card>
);
} }
export default wrapTab(EquicordSettings, "Equicord Settings"); export default wrapTab(EquicordSettings, "Equicord Settings");