From 9b3e65c3d8ca8c0472117ba2a0e854d0112bf4d8 Mon Sep 17 00:00:00 2001
From: JohnBaumb <80135794+JohnBaumb@users.noreply.github.com>
Date: Thu, 23 Apr 2026 00:44:59 -0700
Subject: [PATCH] Two-line batch history layout with descriptive stats

---
 webui/static/pages-extra.js | 23 +++++++++++++++--------
 webui/static/style.css      | 28 +++++++++++++++++++++-------
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/webui/static/pages-extra.js b/webui/static/pages-extra.js
index 9ea3fc26..73a212b1 100644
--- a/webui/static/pages-extra.js
+++ b/webui/static/pages-extra.js
@@ -2832,15 +2832,17 @@ function _adlRenderBatchHistory() {
         const failed = h.tracks_failed || 0;
         const total = h.total_tracks || 0;
 
-        // Build stats: "found/total  Xnew  Xfailed"
+        // Build stats line: "X in library · X downloaded · X failed  (of N)"
         const statsParts = [];
         if (found > 0 || downloaded > 0) {
             const owned = found - downloaded;  // already in library before this sync
-            if (owned > 0) statsParts.push(`<span style="color:rgba(74,222,128,0.7)" title="Already in library">${owned}</span>`);
-            if (downloaded > 0) statsParts.push(`<span style="color:rgba(96,165,250,0.7)" title="Downloaded">${downloaded} new</span>`);
+            if (owned > 0) statsParts.push(`<span style="color:rgba(74,222,128,0.7)" title="Already in library">${owned} in library</span>`);
+            if (downloaded > 0) statsParts.push(`<span style="color:rgba(96,165,250,0.7)" title="Downloaded">${downloaded} downloaded</span>`);
         }
         if (failed > 0) statsParts.push(`<span style="color:#ef4444" title="Failed">${failed} failed</span>`);
-        if (statsParts.length === 0) statsParts.push(`0/${total}`);
+        const notFound = total - found - failed;
+        if (notFound > 0) statsParts.push(`<span title="Not found">${notFound} not found</span>`);
+        if (statsParts.length === 0) statsParts.push(`${total} tracks`);
 
         let dateText = '';
         if (h.completed_at) {
@@ -2877,11 +2879,16 @@ function _adlRenderBatchHistory() {
             : '';
 
         return `<div class="adl-batch-history-item">
-            ${histDot}
             ${thumb}
-            <div class="adl-batch-history-name">${name} ${sourceLabel}</div>
-            <div class="adl-batch-history-stats">${statsParts.join(' · ')}</div>
-            <div class="adl-batch-history-date">${dateText}</div>
+            <div class="adl-batch-history-content">
+                <div class="adl-batch-history-row1">
+                    ${histDot}
+                    <span class="adl-batch-history-name">${name}</span>
+                    ${sourceLabel}
+                    <span class="adl-batch-history-date">${dateText}</span>
+                </div>
+                <div class="adl-batch-history-row2">${statsParts.join(' · ')}</div>
+            </div>
         </div>`;
     }).join('');
 }
diff --git a/webui/static/style.css b/webui/static/style.css
index 89e9a948..4d7faf14 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -57115,37 +57115,51 @@ body.reduce-effects *::after {
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 6px 0;
+    padding: 7px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.02);
 }
 
 .adl-batch-history-thumb {
-    width: 24px;
-    height: 24px;
+    width: 28px;
+    height: 28px;
     border-radius: 3px;
     object-fit: cover;
     flex-shrink: 0;
 }
 
-.adl-batch-history-name {
+.adl-batch-history-content {
     flex: 1;
+    min-width: 0;
+}
+
+.adl-batch-history-row1 {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.adl-batch-history-name {
     font-size: 0.75rem;
-    color: rgba(255, 255, 255, 0.5);
+    color: rgba(255, 255, 255, 0.55);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    flex: 1;
+    min-width: 0;
 }
 
-.adl-batch-history-stats {
+.adl-batch-history-row2 {
     font-size: 0.68rem;
     color: rgba(255, 255, 255, 0.3);
-    flex-shrink: 0;
+    margin-top: 2px;
+    padding-left: 12px;
 }
 
 .adl-batch-history-date {
     font-size: 0.65rem;
     color: rgba(255, 255, 255, 0.2);
     flex-shrink: 0;
+    margin-left: auto;
 }
 
 /* ---- Responsive ---- */