Reimplement Discord's Switch to fix performance (#413)

src/components/PluginSettings/index.tsx

@@ -23,25 +23,25 @@ import { showNotice } from "@api/Notices";
 import { useSettings } from "@api/settings";
 import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { ErrorCard } from "@components/ErrorCard";
 import { Flex } from "@components/Flex";
 import { handleComponentFailed } from "@components/handleComponentFailed";
 import { Badge } from "@components/PluginSettings/components";
 import PluginModal from "@components/PluginSettings/PluginModal";
+import { Switch } from "@components/Switch";
 import { ChangeList } from "@utils/ChangeList";
 import Logger from "@utils/Logger";
 import { classes, LazyComponent, useAwaiter } from "@utils/misc";
 import { openModalLazy } from "@utils/modal";
 import { Plugin } from "@utils/types";
 import { findByCode, findByPropsLazy } from "@webpack";
-import { Alerts, Button, Forms, Margins, Parser, React, Select, Switch, Text, TextInput, Toasts, Tooltip } from "@webpack/common";
+import { Alerts, Button, Card, Forms, Margins, Parser, React, Select, Text, TextInput, Toasts, Tooltip } from "@webpack/common";
 
 import Plugins from "~plugins";
 
-const cl = classNameFactory("vc-plugins-");
-
 import { startDependenciesRecursive, startPlugin, stopPlugin } from "../../plugins";
 
+
+const cl = classNameFactory("vc-plugins-");
 const logger = new Logger("PluginSettings", "#a6d189");
 
 const InputStyles = findByPropsLazy("inputDefault", "inputWrapper");
@@ -60,23 +60,27 @@ function showErrorToast(message: string) {
     });
 }
 
-interface ReloadRequiredCardProps extends React.HTMLProps<HTMLDivElement> {
+function ReloadRequiredCard({ required }: { required: boolean; }) {
-    plugins: string[];
-}
-
-function ReloadRequiredCard({ plugins, ...props }: ReloadRequiredCardProps) {
-    if (plugins.length === 0) return null;
-
-    const pluginPrefix = plugins.length === 1 ? "The plugin" : "The following plugins require a reload to apply changes:";
-    const pluginSuffix = plugins.length === 1 ? " requires a reload to apply changes." : ".";
-
     return (
-        <ErrorCard {...props} className={cl("reload-card")}>
+        <Card className={cl("info-card", { "restart-card": required })}>
-            <span className={cl("dep-text")}>
+            {required ? (
-                {pluginPrefix} <code>{plugins.join(", ")}</code>{pluginSuffix}
+                <>
-            </span>
+                    <Forms.FormTitle tag="h5">Restart required!</Forms.FormTitle>
-            <Button look={Button.Looks.INVERTED} onClick={() => location.reload()}>Reload</Button>
+                    <Forms.FormText className={cl("dep-text")}>
-        </ErrorCard>
+                        Restart now to apply new plugins and their settings
+                    </Forms.FormText>
+                    <Button color={Button.Colors.YELLOW} onClick={() => location.reload()}>
+                        Restart
+                    </Button>
+                </>
+            ) : (
+                <>
+                    <Forms.FormTitle tag="h5">Plugin Management</Forms.FormTitle>
+                    <Forms.FormText>Press the cog wheel or info icon to get more info on a plugin</Forms.FormText>
+                    <Forms.FormText>Plugins with a cog wheel have settings you can modify!</Forms.FormText>
+                </>
+            )}
+        </Card>
     );
 }
 
@@ -147,26 +151,24 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
     }
 
     return (
-        <Flex className={cl("card")} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        <Flex className={cl("card", { "card-disabled": disabled })} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-            <Switch
+            <div className={cl("card-header")}>
-                onChange={toggleEnabled}
+                <Text variant="text-md/bold" className={cl("name")}>
-                disabled={disabled}
+                    {plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
-                value={isEnabled()}
+                </Text>
-                note={<Text className={cl("note")} variant="text-sm/normal">{plugin.description}</Text>}
+                <button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>
-                hideBorder={true}
+                    {plugin.options
-            >
+                        ? <CogWheel />
-                <Flex className={cl("flex")}>
+                        : <InfoIcon width="24" height="24" />}
-                    <Text variant="text-md/bold" className={cl("name")}>
+                </button>
-                        {plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
+                <Switch
-                    </Text>
+                    checked={isEnabled()}
-                    <button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>
+                    onChange={toggleEnabled}
-                        {plugin.options
+                    disabled={disabled}
-                            ? <CogWheel />
+                />
-                            : <InfoIcon width="24" height="24" />}
+            </div>
-                    </button>
+            <Text className={cl("note")} variant="text-sm/normal">{plugin.description}</Text>
-                </Flex>
+        </Flex >
-            </Switch>
-        </Flex>
     );
 }
 
@@ -298,12 +300,12 @@ export default ErrorBoundary.wrap(function PluginSettings() {
 
     return (
         <Forms.FormSection>
+            <ReloadRequiredCard required={changes.hasChanges} />
+
             <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
                 Filters
             </Forms.FormTitle>
 
-            <ReloadRequiredCard plugins={[...changes.getChanges()]} className={Margins.marginBottom20} />
-
             <div className={cl("filter-controls")}>
                 <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} className={Margins.marginBottom20} />
                 <div className={InputStyles.inputWrapper}>

src/components/PluginSettings/styles.css

@@ -29,18 +29,32 @@
     border-radius: 8px;
     display: block;
     height: 100%;
-    padding: 10px;
+    padding: 12px;
     width: 100%;
     transition: 0.1s ease-out;
     transition-property: box-shadow, transform, background, opacity;
 }
 
+.vc-plugins-card-disabled {
+    opacity: 0.6;
+}
+
 .vc-plugins-card:hover {
     background-color: var(--background-tertiary);
     transform: translateY(-1px);
     box-shadow: var(--elevation-high);
 }
 
+.vc-plugins-card-header {
+    margin-top: auto;
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    height: 1.5rem;
+    align-items: center;
+    gap: 8px;
+}
+
 .vc-plugins-info-button {
     height: 24px;
     width: 24px;
@@ -92,23 +106,30 @@
     cursor: "default";
 }
 
-.vc-plugins-flex {
-    margin-top: auto;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    gap: 8px;
-}
-
 .vc-plugins-dep-name {
     margin: 0 auto;
 }
 
-.vc-plugins-reload-card {
+.vc-plugins-info-card {
     padding: 1em;
-    display: grid;
+    height: 8em;
-    grid-template-columns: 1fr auto;
+    display: flex;
-    gap: 1em;
+    flex-direction: column;
+}
+
+.vc-plugins-info-card div {
+    line-height: 32px;
+}
+
+.vc-plugins-restart-card {
+    padding: 1em;
+    background: var(--info-warning-background);
+    border: 1px solid var(--info-warning-foreground);
+    color: var(--info-warning-text);
+}
+
+.vc-plugins-restart-card button {
+    margin-top: 0.5em;
 }
 
 .vc-plugins-info-button svg:not(:hover):not(:focus) {

src/components/Switch.css

@@ -0,0 +1,3 @@
+.vc-switch-slider {
+    transition: 100ms transform ease-in-out;
+}

src/components/Switch.tsx

@@ -0,0 +1,76 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 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 "./Switch.css";
+
+import { findByPropsLazy } from "@webpack";
+
+interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}
+
+const SWITCH_ON = "var(--status-green-600)";
+const SWITCH_OFF = "var(--primary-dark-400)";
+const SwitchClasses = findByPropsLazy("slider", "input", "container");
+
+export function Switch({ checked, onChange, disabled }: SwitchProps) {
+    return (
+        <div>
+            <div className={`${SwitchClasses.container} default-colors`} style={{
+                backgroundColor: checked ? SWITCH_ON : SWITCH_OFF,
+                opacity: disabled ? 0.3 : 1
+            }}>
+                <svg
+                    className={SwitchClasses.slider + " vc-switch-slider"}
+                    viewBox="0 0 28 20"
+                    preserveAspectRatio="xMinYMid meet"
+                    aria-hidden="true"
+                    style={{
+                        transform: checked ? "translateX(12px)" : "translateX(-3px)",
+                    }}
+                >
+                    <rect fill="white" x="4" y="0" height="20" width="20" rx="10" />
+                    <svg viewBox="0 0 20 20" fill="none">
+                        {checked ? (
+                            <>
+                                <path fill={SWITCH_ON} d="M7.89561 14.8538L6.30462 13.2629L14.3099 5.25755L15.9009 6.84854L7.89561 14.8538Z" />
+                                <path fill={SWITCH_ON} d="M4.08643 11.0903L5.67742 9.49929L9.4485 13.2704L7.85751 14.8614L4.08643 11.0903Z" />
+                            </>
+                        ) : (
+                            <>
+                                <path fill={SWITCH_OFF} d="M5.13231 6.72963L6.7233 5.13864L14.855 13.2704L13.264 14.8614L5.13231 6.72963Z" />
+                                <path fill={SWITCH_OFF} d="M13.2704 5.13864L14.8614 6.72963L6.72963 14.8614L5.13864 13.2704L13.2704 5.13864Z" />
+                            </>
+                        )}
+
+                    </svg>
+                </svg>
+                <input
+                    disabled={disabled}
+                    type="checkbox"
+                    className={SwitchClasses.input}
+                    tabIndex={0}
+                    checked={checked}
+                    onChange={e => onChange(e.currentTarget.checked)}
+                />
+            </div>
+        </div>
+    );
+}

src/preload.ts

@@ -49,9 +49,11 @@ if (location.protocol !== "data:") {
         const css = readFileSync(rendererCss, "utf-8");
         insertCss(css);
         if (IS_DEV) {
-            watch(rendererCss, debounce(() => {
+            // persistent means keep process running if watcher is the only thing still running
+            // which we obviously don't want
+            watch(rendererCss, { persistent: false }, () => {
                 document.getElementById("vencord-css-core")!.textContent = readFileSync(rendererCss, "utf-8");
-            }, 30));
+            });
         }
     } catch (err) {
         if ((err as NodeJS.ErrnoException)?.code !== "ENOENT")