From 4ed52cd24484526f6c2845de74055b61ce4a64a7 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Mon, 15 Jun 2026 15:15:56 +0200
Subject: [PATCH] fix(playlists): correctly clear/reselect after deleting a
 playlist

The post-delete auto-select effect re-picked the just-deleted id from the still-stale
playlists cache, so its detail lingered. Select the next remaining playlist directly on
delete (or null), drop the deleted detail from the cache, and make the effect re-validate
the selection against the current list (clear when empty, reselect when the current id is
gone). Also fix the header title showing "Channel manager" on the Playlists page.
---
 frontend/src/components/Header.tsx    |  6 +++++-
 frontend/src/components/Playlists.tsx | 20 ++++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 7729f51..1d535f5 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -90,7 +90,11 @@ export default function Header({
         </div>
       ) : (
         <div className="flex-1 text-center text-sm font-semibold">
-          {page === "stats" ? t("header.usageStats") : t("header.channelManager")}
+          {page === "stats"
+            ? t("header.usageStats")
+            : page === "playlists"
+              ? t("header.account.playlists")
+              : t("header.channelManager")}
         </div>
       )}
 
diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/components/Playlists.tsx
index d9dd279..b547cf5 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/components/Playlists.tsx
@@ -110,9 +110,16 @@ export default function Playlists() {
   const listQuery = useQuery({ queryKey: ["playlists"], queryFn: () => api.playlists() });
   const playlists = listQuery.data ?? [];
 
-  // Default the selection to the first playlist once the list loads.
+  // Keep the selection valid: default to the first playlist, and if the selected one
+  // disappears (e.g. just deleted) drop to the next available, or clear when none remain.
   useEffect(() => {
-    if (selectedId == null && playlists.length) setSelectedId(playlists[0].id);
+    if (!playlists.length) {
+      if (selectedId != null) setSelectedId(null);
+      return;
+    }
+    if (selectedId == null || !playlists.some((p) => p.id === selectedId)) {
+      setSelectedId(playlists[0].id);
+    }
   }, [playlists, selectedId]);
 
   const detailQuery = useQuery({
@@ -182,8 +189,13 @@ export default function Playlists() {
       danger: true,
     });
     if (!ok) return;
-    await api.deletePlaylist(selectedId);
-    setSelectedId(null);
+    const deletedId = selectedId;
+    // Pick the next selection from what's left *now* (don't go via null, or the
+    // auto-select effect would re-pick the just-deleted id from the stale list).
+    const remaining = playlists.filter((p) => p.id !== deletedId);
+    setSelectedId(remaining[0]?.id ?? null);
+    await api.deletePlaylist(deletedId);
+    qc.removeQueries({ queryKey: ["playlist", deletedId] });
     qc.invalidateQueries({ queryKey: ["playlists"] });
   }