From 9de545305a67db5d19fbfa1b2def31708b1e1c19 Mon Sep 17 00:00:00 2001
From: JohnBaumb <80135794+JohnBaumb@users.noreply.github.com>
Date: Thu, 23 Apr 2026 12:06:55 -0700
Subject: [PATCH] feat: playlist-type emoji icons as batch history thumbnails

Replace generic music note placeholder with discover-specific emojis
based on playlist name (Fresh Tape=note, Archives=books, Seasonal=leaf,
Popular=fire, Hidden Gems=gem, etc.) with source-based fallbacks
for mirrored/wishlist/album entries.
---
 webui/static/pages-extra.js | 20 +++++++++++++++++---
 webui/static/style.css      |  3 ++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/webui/static/pages-extra.js b/webui/static/pages-extra.js
index f59ceccc..6b5275f7 100644
--- a/webui/static/pages-extra.js
+++ b/webui/static/pages-extra.js
@@ -2875,10 +2875,24 @@ function _adlRenderBatchHistory() {
         const dotTip = dotSource ? `Source: ${dotSource}` : 'Unknown source';
         const histDot = `<span class="adl-batch-history-dot" style="background:rgba(${dotColor}, 0.6)" title="${dotTip}"></span>`;
 
-        // Thumbnail with placeholder fallback
+        // Thumbnail with playlist-type icon fallback
+        let placeholderIcon = '♫';
+        const pName = (h.playlist_name || '').toLowerCase();
+        if (pName.includes('fresh tape') || pName.includes('release radar')) placeholderIcon = '🎵';
+        else if (pName.includes('archives') || pName.includes('discovery weekly')) placeholderIcon = '📚';
+        else if (pName.includes('seasonal')) placeholderIcon = '🌿';
+        else if (pName.includes('popular picks')) placeholderIcon = '🔥';
+        else if (pName.includes('hidden gems')) placeholderIcon = '💎';
+        else if (pName.includes('discovery shuffle')) placeholderIcon = '🔀';
+        else if (pName.includes('familiar fav')) placeholderIcon = '❤️';
+        else if (pName.includes('jam')) placeholderIcon = '🎸';
+        else if (pName.includes('explor')) placeholderIcon = '🔭';
+        else if (dotSource === 'mirrored' || dotSource === 'youtube') placeholderIcon = '🔗';
+        else if (dotSource === 'wishlist') placeholderIcon = '⭐';
+        else if (dotSource === 'album') placeholderIcon = '💿';
         const thumb = h.thumb_url
-            ? `<img src="${_adlEsc(h.thumb_url)}" class="adl-batch-history-thumb" loading="lazy" onerror="this.classList.add('adl-batch-history-thumb-placeholder');this.removeAttribute('src')">`
-            : `<span class="adl-batch-history-thumb adl-batch-history-thumb-placeholder"></span>`;
+            ? `<img src="${_adlEsc(h.thumb_url)}" class="adl-batch-history-thumb" loading="lazy" data-icon="${placeholderIcon}" onerror="var s=document.createElement('span');s.className='adl-batch-history-thumb adl-batch-history-thumb-placeholder';s.textContent=this.dataset.icon;this.parentNode.replaceChild(s,this)">`
+            : `<span class="adl-batch-history-thumb adl-batch-history-thumb-placeholder">${placeholderIcon}</span>`;
 
         // Server push status indicator
         let pushBadge = '';
diff --git a/webui/static/style.css b/webui/static/style.css
index 017a1ec1..13eb0790 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -57206,9 +57206,10 @@ body.reduce-effects *::after {
     justify-content: center;
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.06);
+    font-size: 14px;
 }
 
-.adl-batch-history-thumb-placeholder::after {
+.adl-batch-history-thumb-placeholder:empty::after {
     content: '♫';
     font-size: 12px;
     color: rgba(255, 255, 255, 0.2);