diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/PatchHelper.tsx | 7 | ||||
| -rw-r--r-- | src/components/PluginSettings/index.tsx | 6 | ||||
| -rw-r--r-- | src/components/Settings.tsx | 140 | ||||
| -rw-r--r-- | src/components/VencordSettings/BackupRestoreTab.tsx | 69 | ||||
| -rw-r--r-- | src/components/VencordSettings/PluginsTab.tsx | 22 | ||||
| -rw-r--r-- | src/components/VencordSettings/Updater.tsx (renamed from src/components/Updater.tsx) | 18 | ||||
| -rw-r--r-- | src/components/VencordSettings/VencordTab.tsx | 134 | ||||
| -rw-r--r-- | src/components/VencordSettings/index.tsx | 84 | ||||
| -rw-r--r-- | src/components/VencordSettings/settingsStyles.css | 23 | ||||
| -rw-r--r-- | src/components/index.ts | 3 |
10 files changed, 350 insertions, 156 deletions
diff --git a/src/components/PatchHelper.tsx b/src/components/PatchHelper.tsx index 82b804a..0314de8 100644 --- a/src/components/PatchHelper.tsx +++ b/src/components/PatchHelper.tsx @@ -18,7 +18,7 @@ import { debounce } from "../utils/debounce"; import { makeCodeblock } from "../utils/misc"; -import { Button, Clipboard, Forms, Margins, Parser, React, Switch, TextInput } from "../webpack/common"; +import { Button, Clipboard, Forms, Margins, Parser, React, Switch, Text, TextInput } from "../webpack/common"; import { search } from "../webpack/webpack"; import { CheckedTextInput } from "./CheckedTextInput"; import ErrorBoundary from "./ErrorBoundary"; @@ -243,7 +243,8 @@ function PatchHelper() { } return ( - <> + <Forms.FormSection> + <Text variant="heading-md/normal" tag="h2" className={Margins.marginBottom8}>Patch Helper</Text> <Forms.FormTitle>find</Forms.FormTitle> <TextInput type="text" @@ -288,7 +289,7 @@ function PatchHelper() { <Button onClick={() => Clipboard.copy(code)}>Copy to Clipboard</Button> </> )} - </> + </Forms.FormSection> ); } diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx index 39fb911..f16d55c 100644 --- a/src/components/PluginSettings/index.tsx +++ b/src/components/PluginSettings/index.tsx @@ -243,9 +243,9 @@ export default ErrorBoundary.wrap(function Settings() { }; return ( - <Forms.FormSection tag="h1" title="Vencord"> + <Forms.FormSection> <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}> - Plugins + Filters </Forms.FormTitle> <ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} /> @@ -268,6 +268,8 @@ export default ErrorBoundary.wrap(function Settings() { </div> </div> + <Forms.FormTitle className={Margins.marginTop20}>Plugins</Forms.FormTitle> + <div style={styles.PluginsGrid}> {sortedPlugins?.length ? sortedPlugins .filter(a => !a.required && !dependencyCheck(a.name, depMap).length && pluginFilter(a)) diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx deleted file mode 100644 index f8e7495..0000000 --- a/src/components/Settings.tsx +++ /dev/null @@ -1,140 +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 <https://www.gnu.org/licenses/>. -*/ - -import { useSettings } from "../api/settings"; -import IpcEvents from "../utils/IpcEvents"; -import { useAwaiter } from "../utils/misc"; -import { downloadSettingsBackup, uploadSettingsBackup } from "../utils/settingsSync"; -import { Button, Card, Forms, Margins, React, Switch } from "../webpack/common"; -import DonateButton from "./DonateButton"; -import ErrorBoundary from "./ErrorBoundary"; -import { Flex } from "./Flex"; -import { handleComponentFailed } from "./handleComponentFailed"; - -export default ErrorBoundary.wrap(function Settings() { - const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading..."); - const settings = useSettings(); - - return ( - <Forms.FormSection tag="h1" title="Vencord"> - <Card style={{ - padding: "1em", - display: "flex", - flexDirection: "row", - marginBottom: "1em" - }}> - <div> - <Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle> - <Forms.FormText> - Please consider supporting the Development of Vencord by donating! - </Forms.FormText> - <DonateButton style={{ transform: "translateX(-1em)" }} /> - </div> - <img - role="presentation" - src="https://cdn.discordapp.com/emojis/1026533090627174460.png" - alt="" - style={{ marginLeft: "auto", transform: "rotate(10deg)" }} - /> - </Card> - - <Forms.FormTitle tag="h5"> - Settings - </Forms.FormTitle> - - <Forms.FormText className={Margins.marginBottom8}> - Settings Directory: <code style={{ userSelect: "text", cursor: "text" }}>{settingsDir}</code> - </Forms.FormText> - - {!IS_WEB && <Flex className={Margins.marginBottom20}> - <Button - onClick={() => window.DiscordNative.app.relaunch()} - size={Button.Sizes.SMALL} - color={Button.Colors.GREEN} - > - Reload - </Button> - <Button - onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)} - size={Button.Sizes.SMALL} - disabled={settingsDirPending} - > - Launch Directory - </Button> - <Button - onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_MONACO_EDITOR)} - size={Button.Sizes.SMALL} - disabled={settingsDir === "Loading..."} - > - Open QuickCSS File - </Button> - </Flex>} - - {IS_WEB && <Button - onClick={() => require("./Monaco").launchMonacoEditor()} - size={Button.Sizes.SMALL} - disabled={settingsDir === "Loading..."} - > - Open QuickCSS File - </Button>} - - <Forms.FormDivider /> - <Switch - value={settings.useQuickCss} - onChange={(v: boolean) => settings.useQuickCss = v} - note="Loads styles from your QuickCss file" - > - Use QuickCss - </Switch> - {!IS_WEB && <Switch - value={settings.enableReactDevtools} - onChange={(v: boolean) => settings.enableReactDevtools = v} - note="Requires a full restart" - > - Enable React Developer Tools - </Switch>} - {!IS_WEB && <Switch - value={settings.notifyAboutUpdates} - onChange={(v: boolean) => settings.notifyAboutUpdates = v} - note="Shows a Toast on StartUp" - > - Get notified about new Updates - </Switch>} - - <Forms.FormDivider /> - <Forms.FormTitle tag="h5">Settings Sync</Forms.FormTitle> - <Flex> - <Button - onClick={uploadSettingsBackup} - size={Button.Sizes.SMALL} - > - Import Settings - </Button> - <Button - onClick={downloadSettingsBackup} - size={Button.Sizes.SMALL} - > - Export Settings - </Button> - </Flex> - </Forms.FormSection > - ); -}, { - message: "Failed to render the Settings. If this persists, try using the installer to reinstall!", - onError: handleComponentFailed, -}); diff --git a/src/components/VencordSettings/BackupRestoreTab.tsx b/src/components/VencordSettings/BackupRestoreTab.tsx new file mode 100644 index 0000000..ce0bdaa --- /dev/null +++ b/src/components/VencordSettings/BackupRestoreTab.tsx @@ -0,0 +1,69 @@ +/* + * 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 <https://www.gnu.org/licenses/>. +*/ + +import { downloadSettingsBackup, uploadSettingsBackup } from "../../utils/settingsSync"; +import { Button, Card, Forms, Margins, Text } from "../../webpack/common"; +import ErrorBoundary from "../ErrorBoundary"; +import { Flex } from "../Flex"; + +function BackupRestoreTab() { + return ( + <Forms.FormSection title="Settings Sync"> + <Card style={{ + backgroundColor: "var(--info-warning-background)", + borderColor: "var(--info-warning-foreground)", + color: "var(--info-warning-text)", + padding: "1em", + marginBottom: "0.5em", + }}> + <Flex flexDirection="column"> + <strong>Warning</strong> + <span>Importing a settings file will overwrite your current settings.</span> + </Flex> + </Card> + <Text variant="text-md/normal" className={Margins.marginBottom8}> + You can import and export your Vencord settings as a JSON file. + This allows you to easily transfer your settings to another device, + or recover your settings after reinstalling Vencord or Discord. + </Text> + <Text variant="text-md/normal" className={Margins.marginBottom8}> + Settings Export contains: + <ul> + <li>— Custom QuickCSS</li> + <li>— Plugin Settings</li> + </ul> + </Text> + <Flex> + <Button + onClick={uploadSettingsBackup} + size={Button.Sizes.SMALL} + > + Import Settings + </Button> + <Button + onClick={downloadSettingsBackup} + size={Button.Sizes.SMALL} + > + Export Settings + </Button> + </Flex> + </Forms.FormSection> + ); +} + +export default ErrorBoundary.wrap(BackupRestoreTab); diff --git a/src/components/VencordSettings/PluginsTab.tsx b/src/components/VencordSettings/PluginsTab.tsx new file mode 100644 index 0000000..0c89686 --- /dev/null +++ b/src/components/VencordSettings/PluginsTab.tsx @@ -0,0 +1,22 @@ +/* + * 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 <https://www.gnu.org/licenses/>. +*/ + +import ErrorBoundary from "../ErrorBoundary"; +import PluginSettings from "../PluginSettings"; + +export default ErrorBoundary.wrap(PluginSettings); diff --git a/src/components/Updater.tsx b/src/components/VencordSettings/Updater.tsx index 8abdf28..8f2b75b 100644 --- a/src/components/Updater.tsx +++ b/src/components/VencordSettings/Updater.tsx @@ -18,14 +18,14 @@ import gitHash from "~git-hash"; -import { classes, useAwaiter } from "../utils/misc"; -import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "../utils/updater"; -import { Alerts, Button, Card, Forms, Margins, Parser, React, Toasts } from "../webpack/common"; -import ErrorBoundary from "./ErrorBoundary"; -import { ErrorCard } from "./ErrorCard"; -import { Flex } from "./Flex"; -import { handleComponentFailed } from "./handleComponentFailed"; -import { Link } from "./Link"; +import { classes, useAwaiter } from "../../utils/misc"; +import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "../../utils/updater"; +import { Alerts, Button, Card, Forms, Margins, Parser, React, Toasts } from "../../webpack/common"; +import ErrorBoundary from "../ErrorBoundary"; +import { ErrorCard } from "../ErrorCard"; +import { Flex } from "../Flex"; +import { handleComponentFailed } from "../handleComponentFailed"; +import { Link } from "../Link"; function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>>, action: () => any) { return async () => { @@ -192,7 +192,7 @@ function Updater() { }; return ( - <Forms.FormSection tag="h1" title="Vencord Updater"> + <Forms.FormSection> <Forms.FormTitle tag="h5">Repo</Forms.FormTitle> <Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : ( diff --git a/src/components/VencordSettings/VencordTab.tsx b/src/components/VencordSettings/VencordTab.tsx new file mode 100644 index 0000000..94add5e --- /dev/null +++ b/src/components/VencordSettings/VencordTab.tsx @@ -0,0 +1,134 @@ +/* + * 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 <https://www.gnu.org/licenses/>. +*/ + + +import { useSettings } from "../../api/settings"; +import IpcEvents from "../../utils/IpcEvents"; +import { useAwaiter } from "../../utils/misc"; +import { Button, Card, Forms, React, Switch } from "../../webpack/common"; +import DonateButton from "../DonateButton"; +import ErrorBoundary from "../ErrorBoundary"; + +const st = (style: string) => `vcSettings${style}`; + +function VencordSettings() { + const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading..."); + const settings = useSettings(); + + return ( + <React.Fragment> + <DonateCard /> + <Forms.FormSection title="Quick Actions"> + <Card className={st("QuickActionCard")}> + {IS_WEB ? ( + <Button + onClick={() => require("./Monaco").launchMonacoEditor()} + size={Button.Sizes.SMALL} + disabled={settingsDir === "Loading..."}> + Open QuickCSS File + </Button> + ) : ( + <React.Fragment> + <Button + onClick={() => window.DiscordNative.app.relaunch()} + size={Button.Sizes.SMALL}> + Restart Client + </Button> + <Button + onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_MONACO_EDITOR)} + size={Button.Sizes.SMALL} + disabled={settingsDir === "Loading..."}> + Open QuickCSS File + </Button> + <Button + onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)} + size={Button.Sizes.SMALL} + disabled={settingsDirPending}> + Open Settings Folder + </Button> + <Button + onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_EXTERNAL, "https://github.com/Vendicated/Vencord")} + size={Button.Sizes.SMALL} + disabled={settingsDirPending}> + Open in GitHub + </Button> + </React.Fragment> + )} + </Card> + </Forms.FormSection> + + <Forms.FormDivider /> + + <Forms.FormSection title="Settings"> + <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.notifyAboutUpdates} + onChange={(v: boolean) => settings.notifyAboutUpdates = v} + note="Shows a Toast on StartUp"> + Get notified about new Updates + </Switch> + </React.Fragment> + )} + + </Forms.FormSection> + </React.Fragment> + ); +} + + + +function DonateCard() { + return ( + <Card style={{ + padding: "1em", + display: "flex", + flexDirection: "row", + marginBottom: "1em", + marginTop: "1em" + }}> + <div> + <Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle> + <Forms.FormText> + Please consider supporting the Development of Vencord by donating! + </Forms.FormText> + <DonateButton style={{ transform: "translateX(-1em)" }} /> + </div> + <img + role="presentation" + src="https://cdn.discordapp.com/emojis/1026533090627174460.png" + alt="" + style={{ marginLeft: "auto", transform: "rotate(10deg)" }} + /> + </Card> + ); +} + +export default ErrorBoundary.wrap(VencordSettings); diff --git a/src/components/VencordSettings/index.tsx b/src/components/VencordSettings/index.tsx new file mode 100644 index 0000000..3701897 --- /dev/null +++ b/src/components/VencordSettings/index.tsx @@ -0,0 +1,84 @@ +/* + * 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 <https://www.gnu.org/licenses/>. +*/ + +import cssText from "~fileContent/settingsStyles.css"; + +import { lazyWebpack } from "../../utils/misc"; +import { filters } from "../../webpack"; +import { Forms, React, Router, Text } from "../../webpack/common"; +import ErrorBoundary from "../ErrorBoundary"; +import BackupRestoreTab from "./BackupRestoreTab"; +import PluginsTab from "./PluginsTab"; +import Updater from "./Updater"; +import VencordSettings from "./VencordTab"; + +const style = document.createElement("style"); +style.textContent = cssText; +document.head.appendChild(style); + +const st = (style: string) => `vcSettings${style}`; + +const TabBar = lazyWebpack(filters.byCode('[role="tab"][aria-disabled="false"]')); + +interface SettingsProps { + tab: string; +} + +const SettingsTabs = { + VencordSettings: { name: "Vencord", component: () => <VencordSettings /> }, + VencordPlugins: { name: "Plugins", component: () => <PluginsTab /> }, + VencordThemes: { name: "Themes", component: () => <Text variant="text-md/medium">Coming soon to a Vencord near you!</Text> }, + VencordUpdater: { name: "Updater", component: () => Updater ? <Updater /> : null }, + VencordSettingsSync: { name: "Backup & Restore", component: () => <BackupRestoreTab /> }, +}; + + +function Settings(props: SettingsProps) { + const { tab = "VencordSettings" } = props; + + const CurrentTab = SettingsTabs[tab]?.component ?? null; + + return <Forms.FormSection> + <Text variant="heading-md/normal" tag="h2">Vencord Settings</Text> + + <TabBar + type={TabBar.Types.TOP} + look={TabBar.Looks.BRAND} + className={st("TabBar")} + selectedItem={tab} + onItemSelect={Router.open} + > + {Object.entries(SettingsTabs).map(([key, { name }]) => { + return <TabBar.Item + id={key} + className={st("TabBarItem")} + key={key}> + {name} + </TabBar.Item>; + })} + </TabBar> + <Forms.FormDivider /> + <CurrentTab /> + </Forms.FormSection >; +} + +export default function (props: SettingsProps) { + return <ErrorBoundary> + <Settings tab={props.tab} /> + </ErrorBoundary>; +} diff --git a/src/components/VencordSettings/settingsStyles.css b/src/components/VencordSettings/settingsStyles.css new file mode 100644 index 0000000..e90ef14 --- /dev/null +++ b/src/components/VencordSettings/settingsStyles.css @@ -0,0 +1,23 @@ +.vcSettingsTabBar { + margin-top: 20px; + margin-bottom: -2px; + border-bottom: 2px solid var(--background-modifier-accent); +} + +.vcSettingsTabBarItem { + margin-right: 32px; + padding-bottom: 16px; + margin-bottom: -2px; +} + +.vcSettingsQuickActionCard { + padding: 1em; + display: flex; + gap: 1em; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + flex-grow: 1; + flex-direction: row; + margin-bottom: 1em; +} diff --git a/src/components/index.ts b/src/components/index.ts index 80d2cd1..3ee53b0 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -18,5 +18,4 @@ export { default as PatchHelper } from "./PatchHelper"; export { default as PluginSettings } from "./PluginSettings"; -export { default as Settings } from "./Settings"; -export { default as Updater } from "./Updater"; +export { default as VencordSettings } from "./VencordSettings"; |