UserPlugins: Add clickable badges to external user pluginsfeat/userpluginbadge

This patch adds a button to each user plugin (this is determined by the
plugin directory). Additionally user plugins can specify an
`externalLink` in their plugin definition to have their badge be
clickable and link to an external website.

Co-Authored-By: exhq <91651232+exhq@users.noreply.github.com>

4 files changed, 62 insertions, 7 deletions

diff --git a/scripts/build/common.mjs b/scripts/build/common.mjs
index 11aaa81..35af0f4 100644
--- a/scripts/build/common.mjs
+++ b/scripts/build/common.mjs
@@ -60,19 +60,23 @@ export const globPlugins = {
         });
 
         build.onLoad({ filter, namespace: "import-plugins" }, async () => {
-            const pluginDirs = ["plugins", "userplugins"];
+            const pluginDirs = [
+                { dir: "plugins", official: true },
+                { dir: "userplugins", official: false },
+            ];
             let code = "";
             let plugins = "\n";
             let i = 0;
-            for (const dir of pluginDirs) {
-                if (!existsSync(`./src/${dir}`)) continue;
-                const files = await readdir(`./src/${dir}`);
-                for (const file of files) {
+            for (const pluginDirectory of pluginDirs) {
+                const pluginPath = `./src/${pluginDirectory.dir}`;
+                if (!existsSync(pluginPath)) continue;
+                for (const file of await readdir(pluginPath)) {
                     if (file === "index.ts") {
                         continue;
                     }
                     const mod = `p${i}`;
-                    code += `import ${mod} from "./${dir}/${file.replace(/.tsx?$/, "")}";\n`;
+                    code += `import ${mod} from "./${pluginDirectory.dir}/${file.replace(/.tsx?$/, "")}";\n`;
+                    code += `${mod}['isUserPlugin'] = ${!pluginDirectory.official};`;
                     plugins += `[${mod}.name]:${mod},\n`;
                     i++;
                 }
diff --git a/src/components/PluginSettings/components/UserPluginBadge.tsx b/src/components/PluginSettings/components/UserPluginBadge.tsx
new file mode 100644
index 0000000..f0e0789
--- /dev/null
+++ b/src/components/PluginSettings/components/UserPluginBadge.tsx
@@ -0,0 +1,36 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Linnea Gräf
+ *
+ * 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 { PluginDef } from "../../../utils/types";
+import { Badge } from ".";
+
+export interface Props {
+    plugin: PluginDef;
+}
+export default function UserPluginBadge({ plugin }: Props) {
+    const badge = <Badge color={"rgb(88 101 242)"} text={"User"} />;
+    return plugin.externalLink
+        ? (
+            <a href={plugin.externalLink} target={"_blank"}>
+                {badge}
+            </a>
+        )
+        : badge;
+}
+
+
diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx
index ad1cd32..f075d26 100644
--- a/src/components/PluginSettings/index.tsx
+++ b/src/components/PluginSettings/index.tsx
@@ -34,6 +34,7 @@ import { ErrorCard } from "../ErrorCard";
 import { Flex } from "../Flex";
 import { handleComponentFailed } from "../handleComponentFailed";
 import { Badge } from "./components";
+import UserPluginBadge from "./components/UserPluginBadge";
 import PluginModal from "./PluginModal";
 import * as styles from "./styles";
 
@@ -165,7 +166,9 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
                 hideBorder={true}
             >
                 <Flex style={{ marginTop: "auto", width: "100%", height: "100%", alignItems: "center", gap: "8px" }}>
-                    <Text variant="text-md/bold" style={{ display: "flex", width: "100%", alignItems: "center", flexGrow: "1", gap: "8px" }}>{plugin.name}{(isNew) && <Badge text="New" color="#ED4245" />}</Text>
+                    <Text variant="text-md/bold" style={{ display: "flex", width: "100%", alignItems: "center", flexGrow: "1", gap: "8px" }}>
+                        {plugin.name}{isNew && <Badge text="New" color="#ed4245" />}{plugin.isUserPlugin && <UserPluginBadge plugin={plugin} />}
+                    </Text>
                     <button role="switch" onClick={() => openModal()} style={styles.SettingsIcon} className="button-12Fmur">
                         {plugin.options
                             ? <CogWheel
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 30c603f..a0ab9b0 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -91,6 +91,18 @@ export interface PluginDef {
      * plugin's settings page
      */
     settingsAboutComponent?: React.ComponentType;
+    /**
+     * If this plugin is an external / user plugin, this link will point to
+     * the external webpage responsible for this plugin. Local plugins should
+     * not have this set, however, not every UserPlugin will have this set to
+     * a link.
+     */
+    externalLink?: string;
+    /**
+     * Signifies whether this plugin is a UserPlugin or not.
+     * This value is set using a build time script in globPlugins.
+     */
+    isUserPlugin?: boolean;
 }
 
 export enum OptionType {