From 02837b9a4b94a2e0a925561924ccc43b597e2bab Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Thu, 9 Jul 2026 15:34:28 +0200
Subject: [PATCH] fix(plex): optimistic toggle + 'importing' indicator for
 watch-sync
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The watch-sync switch only flipped once the (multi-second) import request returned, so a click read as
'nothing happened' and invited repeat clicks. Reflect the toggle's target optimistically while the
mutation is in flight and show an 'Importing your Plex watch history…' spinner line, so it's obvious
the switch responded and is working.
---
 frontend/src/components/SettingsPanel.tsx  | 42 +++++++++++++---------
 frontend/src/i18n/locales/de/settings.json |  3 +-
 frontend/src/i18n/locales/en/settings.json |  3 +-
 frontend/src/i18n/locales/hu/settings.json |  3 +-
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index 5556a0a..986da46 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -461,6 +461,10 @@ function PlexWatchSync() {
     },
   });
 
+  const busy = toggle.isPending || reimport.isPending;
+  // Reflect the toggle's target immediately (optimistic) so the switch responds on click rather than
+  // only flipping once the multi-second import returns — otherwise it reads as "nothing happened".
+  const shown = toggle.isPending ? Boolean(toggle.variables) : enabled;
   const last = link.data?.last_watch_sync_at
     ? new Date(link.data.last_watch_sync_at).toLocaleString(i18n.language)
     : null;
@@ -470,25 +474,31 @@ function PlexWatchSync() {
       <p className="text-xs text-muted leading-relaxed mb-2">{t("settings.plexSync.intro")}</p>
       <SettingRow label={t("settings.plexSync.toggle")} hint={t("settings.plexSync.toggleHint")}>
         <Switch
-          checked={enabled}
-          disabled={toggle.isPending || reimport.isPending}
-          onChange={(v) => !toggle.isPending && toggle.mutate(v)}
+          checked={shown}
+          disabled={busy}
+          onChange={(v) => !busy && toggle.mutate(v)}
         />
       </SettingRow>
-      {enabled && (
-        <div className="mt-2 flex items-center justify-between gap-3">
-          <p className="text-xs text-muted">
-            {last ? t("settings.plexSync.lastSync", { when: last }) : t("settings.plexSync.never")}
-          </p>
-          <button
-            onClick={() => reimport.mutate()}
-            disabled={reimport.isPending}
-            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm border border-border hover:bg-card/60 disabled:opacity-50 transition shrink-0"
-          >
-            <RefreshCw className={`w-4 h-4 ${reimport.isPending ? "animate-spin" : ""}`} />
-            {t("settings.plexSync.importNow")}
-          </button>
+      {busy ? (
+        <div className="mt-2 flex items-center gap-2 text-xs text-muted">
+          <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+          {t("settings.plexSync.importing")}
         </div>
+      ) : (
+        enabled && (
+          <div className="mt-2 flex items-center justify-between gap-3">
+            <p className="text-xs text-muted">
+              {last ? t("settings.plexSync.lastSync", { when: last }) : t("settings.plexSync.never")}
+            </p>
+            <button
+              onClick={() => reimport.mutate()}
+              className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm border border-border hover:bg-card/60 transition shrink-0"
+            >
+              <RefreshCw className="w-4 h-4" />
+              {t("settings.plexSync.importNow")}
+            </button>
+          </div>
+        )
       )}
     </Section>
   );
diff --git a/frontend/src/i18n/locales/de/settings.json b/frontend/src/i18n/locales/de/settings.json
index 51dfb58..c441032 100644
--- a/frontend/src/i18n/locales/de/settings.json
+++ b/frontend/src/i18n/locales/de/settings.json
@@ -13,7 +13,8 @@
     "importNow": "Jetzt aus Plex importieren",
     "imported": "Aus Plex importiert: {{watched}} gesehen, {{in_progress}} laufend.",
     "lastSync": "Letzter Import: {{when}}",
-    "never": "Noch nicht importiert"
+    "never": "Noch nicht importiert",
+    "importing": "Plex-Wiedergabeverlauf wird importiert…"
   },
   "save": {
     "unsaved": "Nicht gespeicherte Änderungen",
diff --git a/frontend/src/i18n/locales/en/settings.json b/frontend/src/i18n/locales/en/settings.json
index 8d79214..cd9e2d2 100644
--- a/frontend/src/i18n/locales/en/settings.json
+++ b/frontend/src/i18n/locales/en/settings.json
@@ -13,7 +13,8 @@
     "importNow": "Import from Plex now",
     "imported": "Imported from Plex: {{watched}} watched, {{in_progress}} in progress.",
     "lastSync": "Last import: {{when}}",
-    "never": "Not imported yet"
+    "never": "Not imported yet",
+    "importing": "Importing your Plex watch history…"
   },
   "save": {
     "unsaved": "Unsaved changes",
diff --git a/frontend/src/i18n/locales/hu/settings.json b/frontend/src/i18n/locales/hu/settings.json
index 6d987cc..c8dea12 100644
--- a/frontend/src/i18n/locales/hu/settings.json
+++ b/frontend/src/i18n/locales/hu/settings.json
@@ -13,7 +13,8 @@
     "importNow": "Importálás a Plexből most",
     "imported": "Importálva a Plexből: {{watched}} megnézve, {{in_progress}} folyamatban.",
     "lastSync": "Utolsó import: {{when}}",
-    "never": "Még nincs importálva"
+    "never": "Még nincs importálva",
+    "importing": "Plex-előzmény importálása…"
   },
   "save": {
     "unsaved": "Nem mentett változások",