From 4a756c4be3ae64f5269eeb69eaf6a29ceecaebf4 Mon Sep 17 00:00:00 2001
From: Michal Pemcak <m.pemcak@gmail.com>
Date: Fri, 7 Aug 2026 12:06:36 +0200
Subject: [PATCH] Show finished queue items as done instead of uploading.

Map qBittorrent-style uploading state to a done badge in the Web UI; keep backend state for *arr compatibility.
---
 ui/scripts.js | 27 +++++++++++++++++++++------
 ui/styles.css | 12 +++++++++---
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/ui/scripts.js b/ui/scripts.js
index 88c9002..95f3632 100644
--- a/ui/scripts.js
+++ b/ui/scripts.js
@@ -149,6 +149,19 @@ async function fetchQueue() {
   return apiFetch('/api/queue');
 }
 
+/** Map internal qBittorrent-shaped states to labels the UI should show. */
+function displayState(e) {
+  const s = e.state || '';
+  // Fake qBt uses "uploading" for finished (seeding) — show "done" in the UI.
+  if (s === 'uploading' || ((e.progress || 0) >= 1 && s !== 'error' && s !== 'downloading')) {
+    return { key: 'done', label: 'done' };
+  }
+  if (s === 'queuedDL') return { key: 'queued', label: 'queued' };
+  if (s === 'downloading') return { key: 'downloading', label: 'downloading' };
+  if (s === 'error') return { key: 'error', label: 'error' };
+  return { key: s || 'unknown', label: s || 'unknown' };
+}
+
 function renderQueue() {
   fetchQueue().then(entries => {
     if (!entries || entries.length === 0) {
@@ -159,22 +172,24 @@ function renderQueue() {
       const pct = Math.round((e.progress || 0) * 100);
       const downloaded = formatSize(e.progress * e.size);
       const total = formatSize(e.size);
+      const st = displayState(e);
       let fillClass = '';
-      if (e.state === 'uploading') fillClass = 'done';
-      else if (e.state === 'error') fillClass = 'error';
-      else if (e.state === 'queuedDL') fillClass = 'queued';
+      if (st.key === 'done') fillClass = 'done';
+      else if (st.key === 'error') fillClass = 'error';
+      else if (st.key === 'queued') fillClass = 'queued';
+      const speed = st.key === 'done' ? '' : (e.speed || '');
       return `
         <div class="queue-item">
           <div class="queue-name">
-            <span class="badge ${e.state}">${e.state}</span>
+            <span class="badge ${st.key}">${st.label}</span>
             <span>${escapeHtml(e.name)}</span>
-            <button class="cancel-btn" data-hash="${e.hash}">[x]</button>
+            <button class="cancel-btn" data-hash="${e.hash}" title="${st.key === 'done' ? 'dismiss' : 'cancel'}">[x]</button>
           </div>
           <div class="queue-stats">
             <span>${downloaded} / ${total}</span>
             <span>${pct}%</span>
           </div>
-          <div class="queue-speed">${e.speed || ''}</div>
+          <div class="queue-speed">${speed}</div>
           <div class="progress-bar">
             <div class="progress-fill ${fillClass}" style="width:${pct}%"></div>
           </div>
diff --git a/ui/styles.css b/ui/styles.css
index 00aaefc..46017f3 100644
--- a/ui/styles.css
+++ b/ui/styles.css
@@ -356,14 +356,20 @@ body {
   color: var(--fg);
 }
 
-.badge.downloading,
-.badge.uploading {
+.badge.downloading {
   background: var(--fg);
   color: var(--bg);
   border-color: var(--fg);
 }
 
-.badge.queuedDL {
+/* finished (backend may still say "uploading") */
+.badge.done {
+  background: var(--fg);
+  color: var(--bg);
+  border-color: var(--fg);
+}
+
+.badge.queued {
   border-style: dashed;
   color: var(--muted);
   border-color: var(--muted);