From d16a77907a2873d4e42f7805095054923c95d44f Mon Sep 17 00:00:00 2001
From: JakeBreath <tolozacdcmo@gmail.com>
Date: Fri, 18 Sep 2026 17:52:50 -0500
Subject: [PATCH] Keep the online detail's download state on its own post
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two stale-state bugs came from react-router reusing the detail component
between posts (parent/child links hit the same /detail/<id> route):

- the previously viewed post's download panel kept rendering, so a freshly
  opened post could claim 'Downloaded to the library J-xx'. The task view is
  now gated on the task's post_id as well, and DetailPage keys the detail
  views per item — component state (download panel, delete confirmation,
  optimizer modal) cannot survive a post change any more.
- 'Your last download for this post finished' appeared on every revisit. It
  now only shows when this visit actually saw the download running (derived
  state, set during render), which still reports a re-attached download
  finishing while staying quiet on later visits; the 'In library' button
  remains the persistent indicator.

Library detail gets the same per-item key, so its delete confirmation and
optimizer modal reset between items too.

tsc, oxlint and the build are clean (the derived-state pattern was chosen
over a ref read in render / setState-in-effect, both flagged by the linter).
---
 frontend/src/features/detail/DetailPage.tsx   |  7 +++--
 frontend/src/features/online/OnlineDetail.tsx | 28 +++++++++++++++----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/detail/DetailPage.tsx b/frontend/src/features/detail/DetailPage.tsx
index ba269ea..fc772b9 100644
--- a/frontend/src/features/detail/DetailPage.tsx
+++ b/frontend/src/features/detail/DetailPage.tsx
@@ -14,11 +14,14 @@ export default function DetailPage() {
   if (J_ID_RE.test(itemId)) {
     if (!hasBackend()) return <BackendNeeded />;
     const normalized = `J-${itemId.slice(2)}`;
-    return <LibraryDetail jId={normalized} />;
+    // Key per item: remount so local state (delete confirm, optimizer, task
+    // view) cannot leak from the previously viewed item.
+    return <LibraryDetail key={normalized} jId={normalized} />;
   }
 
   if (/^\d+$/.test(itemId)) {
-    return <OnlineDetail postId={Number(itemId)} />;
+    // Key per post: the download task view must not survive a post change.
+    return <OnlineDetail key={itemId} postId={Number(itemId)} />;
   }
 
   return (
diff --git a/frontend/src/features/online/OnlineDetail.tsx b/frontend/src/features/online/OnlineDetail.tsx
index 44c52dc..de164b5 100644
--- a/frontend/src/features/online/OnlineDetail.tsx
+++ b/frontend/src/features/online/OnlineDetail.tsx
@@ -121,6 +121,10 @@ export function OnlineDetail({ postId }: { postId: number }) {
   });
 
   const [downloadTaskId, setDownloadTaskId] = useState<string | null>(null);
+  // True once this visit has seen the download running. Only then is "your
+  // last download finished" worth showing; a revisit stays quiet (the "In
+  // library" button already says where the file is).
+  const [watchedDownload, setWatchedDownload] = useState(false);
 
   // Server-side tasks outlive this page; re-attach to the newest one for this
   // post so navigating away and back keeps the progress view.
@@ -186,6 +190,19 @@ export function OnlineDetail({ postId }: { postId: number }) {
   const downloadStatus = downloadTask?.status;
   const downloadActive =
     downloadStatus === "pending" || downloadStatus === "downloading";
+  // Never render another post's task — this covers the single frame before the
+  // remount (DetailPage keys this component per post). A null post_id (older or
+  // hand-made tasks) stays visible rather than hiding a real download.
+  const downloadTaskMatchesPost =
+    !downloadTask ||
+    downloadTask.post_id === null ||
+    downloadTask.post_id === post?.id;
+
+  // Derived state (safe to set during render): remember that this visit saw
+  // the download running.
+  if (downloadActive && !watchedDownload) {
+    setWatchedDownload(true);
+  }
 
   useEffect(() => {
     if (!downloadStatus) return;
@@ -340,7 +357,8 @@ export function OnlineDetail({ postId }: { postId: number }) {
             </a>
           </div>
 
-          {downloadTask &&
+          {downloadTaskMatchesPost &&
+          downloadTask &&
           (downloadTask.status === "pending" ||
             downloadTask.status === "downloading") ? (
             <div className="rounded-lg border border-ctp-surface0 bg-ctp-base p-3">
@@ -372,7 +390,7 @@ export function OnlineDetail({ postId }: { postId: number }) {
                 cancel
               </button>
             </div>
-          ) : downloadTask?.status === "complete" ? (
+          ) : downloadTaskMatchesPost && downloadTask?.status === "complete" ? (
             <p className="flex items-center gap-2 rounded-md border border-ctp-green/30 bg-ctp-green/10 px-3 py-2 text-sm text-ctp-green">
               <CheckCircle2 className="h-4 w-4 shrink-0" />
               Downloaded to the library
@@ -385,13 +403,13 @@ export function OnlineDetail({ postId }: { postId: number }) {
                 </Link>
               ) : null}
             </p>
-          ) : downloadTask?.status === "cancelled" ? (
+          ) : downloadTaskMatchesPost && downloadTask?.status === "cancelled" ? (
             <p className="text-xs text-ctp-overlay0">Download cancelled.</p>
-          ) : downloadTask?.status === "error" ? (
+          ) : downloadTaskMatchesPost && downloadTask?.status === "error" ? (
             <p className="rounded-md border border-ctp-red/30 bg-ctp-red/10 px-3 py-2 text-sm text-ctp-red">
               {downloadTask.error || "Download failed."}
             </p>
-          ) : remoteFinishedTask && !downloadMutation.isPending ? (
+          ) : remoteFinishedTask && watchedDownload && !downloadMutation.isPending ? (
             <p className="flex items-center gap-2 text-xs text-ctp-overlay0">
               <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-ctp-green" />
               Your last download for this post finished