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>

2 files changed, 40 insertions, 1 deletions

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