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>

1 files changed, 4 insertions, 1 deletions

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