From 064e73f958dba426971109419e09e688ebaf664a Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Sun, 28 Dec 2025 01:09:01 -0500
Subject: [PATCH] feat(plugins UI): add error handling for plugin
 enable/disable actions

Signed-off-by: Deluan <deluan@navidrome.org>
---
 ui/src/i18n/en.json          |  3 +-
 ui/src/plugin/PluginList.jsx | 13 ++++---
 ui/src/plugin/PluginShow.jsx | 67 +++++++++++++++++++++++-------------
 3 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/ui/src/i18n/en.json b/ui/src/i18n/en.json
index 4774787f7..a980771ba 100644
--- a/ui/src/i18n/en.json
+++ b/ui/src/i18n/en.json
@@ -361,7 +361,8 @@
       },
       "actions": {
         "enable": "Enable",
-        "disable": "Disable"
+        "disable": "Disable",
+        "disabledDueToError": "Fix the error before enabling"
       },
       "notifications": {
         "enabled": "Plugin enabled",
diff --git a/ui/src/plugin/PluginList.jsx b/ui/src/plugin/PluginList.jsx
index 614fda503..1449f8daa 100644
--- a/ui/src/plugin/PluginList.jsx
+++ b/ui/src/plugin/PluginList.jsx
@@ -78,19 +78,24 @@ const ToggleEnabledInput = ({ props }) => {
     [toggleEnabled],
   )
 
+  const hasError = !!record.lastError
+  const isDisabled = loading || hasError
+
   return (
     <Tooltip
       title={translate(
-        record.enabled
-          ? 'resources.plugin.actions.disable'
-          : 'resources.plugin.actions.enable',
+        hasError
+          ? 'resources.plugin.actions.disabledDueToError'
+          : record.enabled
+            ? 'resources.plugin.actions.disable'
+            : 'resources.plugin.actions.enable',
       )}
     >
       <span>
         <Switch
           checked={record.enabled}
           onClick={handleClick}
-          disabled={loading}
+          disabled={isDisabled}
           className={classes.enabledSwitch}
           size="small"
         />
diff --git a/ui/src/plugin/PluginShow.jsx b/ui/src/plugin/PluginShow.jsx
index c05d09ab6..9c318536e 100644
--- a/ui/src/plugin/PluginShow.jsx
+++ b/ui/src/plugin/PluginShow.jsx
@@ -215,30 +215,50 @@ const ErrorSection = ({ error, translate }) => {
 }
 
 // Status card with enable/disable toggle
-const StatusCard = ({ record, classes, translate, onToggle, loading }) => (
-  <Card className={classes.section}>
-    <CardContent>
-      <Typography variant="h6" className={classes.sectionTitle}>
-        {translate('resources.plugin.sections.status')}
-      </Typography>
-      <FormControlLabel
-        control={
-          <Switch
-            checked={record.enabled}
-            onChange={onToggle}
-            disabled={loading}
-            color="primary"
+const StatusCard = ({
+  record,
+  classes,
+  translate,
+  onToggle,
+  loading,
+  hasError,
+}) => {
+  const isDisabled = loading || hasError
+
+  return (
+    <Card className={classes.section}>
+      <CardContent>
+        <Typography variant="h6" className={classes.sectionTitle}>
+          {translate('resources.plugin.sections.status')}
+        </Typography>
+        <Tooltip
+          title={
+            hasError
+              ? translate('resources.plugin.actions.disabledDueToError')
+              : ''
+          }
+          disableHoverListener={!hasError}
+        >
+          <FormControlLabel
+            control={
+              <Switch
+                checked={record.enabled}
+                onChange={onToggle}
+                disabled={isDisabled}
+                color="primary"
+              />
+            }
+            label={translate(
+              record.enabled
+                ? 'resources.plugin.actions.disable'
+                : 'resources.plugin.actions.enable',
+            )}
           />
-        }
-        label={translate(
-          record.enabled
-            ? 'resources.plugin.actions.disable'
-            : 'resources.plugin.actions.enable',
-        )}
-      />
-    </CardContent>
-  </Card>
-)
+        </Tooltip>
+      </CardContent>
+    </Card>
+  )
+}
 
 // Plugin information card
 const InfoCard = ({ record, manifest, classes, translate, isSmall }) => (
@@ -570,6 +590,7 @@ const PluginShowLayout = () => {
           translate={translate}
           onToggle={handleToggleEnabled}
           loading={loading}
+          hasError={!!record.lastError}
         />
 
         <InfoCard