Dedicated Updater Page, Settings feedback

src/Vencord.ts

@@ -32,7 +32,7 @@ async function init() {
                     "View Update",
                     () => {
                         popNotice();
-                        Router.open("Vencord");
+                        Router.open("VencordUpdater");
                     }
                 );
             }, 10000);

src/components/Settings.tsx

@@ -1,20 +1,50 @@
-import { classes, humanFriendlyJoin, lazy, useAwaiter } from "../utils/misc";
+import { classes, humanFriendlyJoin, useAwaiter } from "../utils/misc";
 import Plugins from 'plugins';
 import { useSettings } from "../api/settings";
 import IpcEvents from "../utils/IpcEvents";
 
-import { Button, Switch, Forms, React, Margins } from "../webpack/common";
+import { Button, Switch, Forms, React, Margins, Toasts, Alerts, Parser } from "../webpack/common";
 import ErrorBoundary from "./ErrorBoundary";
 import { startPlugin } from "../plugins";
 import { stopPlugin } from '../plugins/index';
 import { Flex } from './Flex';
-import { isOutdated } from "../utils/updater";
+import { ChangeList } from '../utils/ChangeList';
-import { Updater } from "./Updater";
 
-export default ErrorBoundary.wrap(function Settings(props) {
+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() {
     const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
-    const [outdated, setOutdated] = React.useState(isOutdated);
     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()
+        }));
+    }, []);
 
     const depMap = React.useMemo(() => {
         const o = {} as Record<string, string[]>;
@@ -34,16 +64,7 @@ export default ErrorBoundary.wrap(function Settings(props) {
 
     return (
         <Forms.FormSection tag="h1" title="Vencord">
-            {outdated && (
+            <Forms.FormTitle tag="h5">
-                <>
-                    <Forms.FormTitle tag="h5">Updater</Forms.FormTitle>
-                    <Updater setIsOutdated={setOutdated} />
-                </>
-            )}
-
-            <Forms.FormDivider />
-
-            <Forms.FormTitle tag="h5" className={outdated ? `${Margins.marginTop20} ${Margins.marginBottom8}` : ""}>
                 Settings
             </Forms.FormTitle>
 
@@ -111,21 +132,19 @@ export default ErrorBoundary.wrap(function Settings(props) {
                                 p.dependencies?.forEach(d => {
                                     settings.plugins[d].enabled = true;
                                     if (!Plugins[d].started && !stopPlugin) {
-                                        // TODO show notification
                                         settings.plugins[p.name].enabled = false;
+                                        showErrorToast(`Failed to start dependency ${d}. Check the console for more info.`);
                                     }
                                 });
                                 if (!p.started && !startPlugin(p)) {
-                                    // TODO show notification
+                                    showErrorToast(`Failed to start plugin ${p.name}. Check the console for more info.`);
                                 }
                             } else {
                                 if (p.started && !stopPlugin(p)) {
-                                    // TODO show notification
+                                    showErrorToast(`Failed to stop plugin ${p.name}. Check the console for more info.`);
                                 }
                             }
-                            if (p.patches) {
+                            if (p.patches) changes.handleChange(p.name);
-                                // TODO show notification
-                            }
                         }}
                         note={p.description}
                         tooltipNote={

src/components/Updater.tsx

@@ -1,13 +1,11 @@
 import gitHash from "git-hash";
 import { changes, checkForUpdates, getRepo, rebuild, update, UpdateLogger } from "../utils/updater";
-import { React, Forms, Button, Margins, Alerts, Card, Parser } from '../webpack/common';
+import { React, Forms, Button, Margins, Alerts, Card, Parser, Toasts } from '../webpack/common';
 import { Flex } from "./Flex";
 import { useAwaiter } from '../utils/misc';
 import { Link } from "./Link";
+import ErrorBoundary from "./ErrorBoundary";
 
-interface Props {
-    setIsOutdated(b: boolean): void;
-}
 
 function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>>, action: () => any) {
     return async () => {
@@ -42,7 +40,7 @@ function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>
     };
 };
 
-export function Updater(p: Props) {
+export default ErrorBoundary.wrap(function Updater() {
     const [repo, err, repoPending] = useAwaiter(getRepo, "Loading...");
     const [isChecking, setIsChecking] = React.useState(false);
     const [isUpdating, setIsUpdating] = React.useState(false);
@@ -53,39 +51,48 @@ export function Updater(p: Props) {
             UpdateLogger.error("Failed to retrieve repo", err);
     }, [err]);
 
+    const isOutdated = updates.length > 0;
+
     return (
-        <>
+        <Forms.FormSection tag="h1" title="Vencord Updater">
-            <Forms.FormText>Repo: {repoPending ? repo : err ? "Failed to retrieve - check console" : (
+            <Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
+
+            <Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : (
                 <Link href={repo}>
                     {repo.split("/").slice(-2).join("/")}
                 </Link>
             )} ({gitHash})</Forms.FormText>
 
+            <Forms.FormDivider />
+
+            <Forms.FormTitle tag="h5">Updates</Forms.FormTitle>
+
             <Forms.FormText className={Margins.marginBottom8}>
-                There are {updates.length} Updates
+                {updates.length ? `There are ${updates.length} Updates` : "Up to Date!"}
             </Forms.FormText>
 
-            <Card style={{ padding: ".5em" }}>
+            {updates.length > 0 && (
-                {updates.map(({ hash, author, message }) => (
+                <Card style={{ padding: ".5em" }}>
-                    <div>
+                    {updates.map(({ hash, author, message }) => (
-                        <Link href={`${repo}/commit/${hash}`} disabled={repoPending}>
+                        <div>
-                            <code>{hash}</code>
+                            <Link href={`${repo}/commit/${hash}`} disabled={repoPending}>
-                        </Link>
+                                <code>{hash}</code>
-                        <span style={{
+                            </Link>
-                            marginLeft: "0.5em",
+                            <span style={{
-                            color: "var(--text-normal)"
+                                marginLeft: "0.5em",
-                        }}>{message} - {author}</span>
+                                color: "var(--text-normal)"
-                    </div>
+                            }}>{message} - {author}</span>
-                ))}
+                        </div>
-            </Card>
+                    ))}
+                </Card>
+            )}
 
             <Flex className={`${Margins.marginBottom8} ${Margins.marginTop8}`}>
-                <Button
+                {isOutdated && <Button
                     size={Button.Sizes.SMALL}
                     disabled={isUpdating || isChecking}
                     onClick={withDispatcher(setIsUpdating, async () => {
                         if (await update()) {
-                            p.setIsOutdated(false);
                             const needFullRestart = await rebuild();
                             await new Promise<void>(r => {
                                 Alerts.show({
@@ -106,23 +113,30 @@ export function Updater(p: Props) {
                         }
                     })}
                 >
-                    Update
+                    Update Now
-                </Button>
+                </Button>}
                 <Button
                     size={Button.Sizes.SMALL}
                     disabled={isUpdating || isChecking}
                     onClick={withDispatcher(setIsChecking, async () => {
-                        const res = await checkForUpdates();
+                        const outdated = await checkForUpdates();
-                        if (res) {
+                        if (outdated) {
                             setUpdates(changes);
                         } else {
-                            p.setIsOutdated(false);
+                            Toasts.show({
+                                message: "No updates found!",
+                                id: Toasts.genId(),
+                                type: Toasts.Type.MESSAGE,
+                                options: {
+                                    position: Toasts.Position.BOTTOM
+                                }
+                            });
                         }
                     })}
                 >
-                    Refresh
+                    Check for Updates
                 </Button>
             </Flex>
-        </>
+        </Forms.FormSection>
     );
-}
+});

src/components/index.ts

@@ -1 +1,2 @@
 export { default as Settings } from "./Settings";
+export { default as Updater } from "./Updater";

src/plugins/index.ts

@@ -23,37 +23,38 @@ export function startAllPlugins() {
 }
 
 export function startPlugin(p: Plugin) {
-    if (p.start) {
+    if (!p.start) return true;
-        logger.info("Starting plugin", p.name);
+
-        if (p.started) {
+    logger.info("Starting plugin", p.name);
-            logger.warn(`${p.name} already started`);
+    if (p.started) {
-            return false;
+        logger.warn(`${p.name} already started`);
-        }
+        return false;
-        try {
+    }
-            p.start();
+
-            p.started = true;
+    try {
-            return true;
+        p.start();
-        } catch (err: any) {
+        p.started = true;
-            logger.error(`Failed to start ${p.name}\n`, err);
+        return true;
-            return false;
+    } catch (err: any) {
-        }
+        logger.error(`Failed to start ${p.name}\n`, err);
+        return false;
     }
 }
 
 export function stopPlugin(p: Plugin) {
-    if (p.stop) {
+    if (!p.stop) return true;
-        logger.info("Stopping plugin", p.name);
+
-        if (!p.started) {
+    logger.info("Stopping plugin", p.name);
-            logger.warn(`${p.name} already stopped / never started`);
+    if (!p.started) {
-            return false;
+        logger.warn(`${p.name} already stopped / never started`);
-        }
+        return false;
-        try {
+    }
-            p.stop();
+    try {
-            p.started = false;
+        p.stop();
-            return true;
+        p.started = false;
-        } catch (err: any) {
+        return true;
-            logger.error(`Failed to stop ${p.name}\n`, err);
+    } catch (err: any) {
-            return false;
+        logger.error(`Failed to stop ${p.name}\n`, err);
-        }
+        return false;
     }
 }

src/plugins/settings.ts

@@ -27,7 +27,8 @@ export default definePlugin({
             match: /\{section:(.{1,2})\.ID\.HEADER,\s*label:(.{1,2})\..{1,2}\.Messages\.ACTIVITY_SETTINGS\}/,
             replace: (m, mod) =>
                 `{section:${mod}.ID.HEADER,label:"Vencord"},` +
-                `{section:"Vencord",label:"Vencord",element:Vencord.Components.Settings},` +
+                `{section:"VencordSetting",label:"Vencord",element:Vencord.Components.Settings},` +
+                `{section:"VencordUpdater",label:"Updater",element:Vencord.Components.Updater},` +
                 `{section:${mod}.ID.DIVIDER},${m}`
 
         }

src/utils/ChangeList.ts

@@ -0,0 +1,24 @@
+export class ChangeList<T>{
+    private set = new Set<T>;
+
+    public get changeCount() {
+        return this.set.size;
+    }
+
+    public get hasChanges() {
+        return this.changeCount > 0;
+    }
+
+    public handleChange(item: T) {
+        if (!this.set.delete(item))
+            this.set.add(item);
+    }
+
+    public getChanges() {
+        return this.set.values();
+    }
+
+    public map<R>(mapper: (v: T, idx: number, arr: T[]) => R): R[] {
+        return [...this.getChanges()].map(mapper);
+    }
+}