From b575e38726a9d0ce8df9ce0b19fe1f1a999e123e Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Tue, 28 Apr 2026 09:07:07 +0200
Subject: [PATCH] feat: add cover art to queue panel, remove redundant sidebar
 queue nav item

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html    | 6 ------
 src/player.js | 3 ++-
 styles.css    | 2 ++
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 31ffdb5..4bb0420 100644
--- a/index.html
+++ b/index.html
@@ -103,12 +103,6 @@
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 11.973c2.5-1.473 5.5-.973 7.5.527M9.5 14.473c1.5-.973 3.5-.973 5 .027M7 9c3-1.5 6.5-1 9 1"/></svg>Spotify Importer
           </div>
         </div>
-        <div class="nav-section">
-          <div class="nav-section-title">Player</div>
-          <div class="nav-item" onclick="toggleQueue()">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>Warteschlange
-          </div>
-        </div>
       </nav>
     </aside>
 
diff --git a/src/player.js b/src/player.js
index 314933b..e764891 100644
--- a/src/player.js
+++ b/src/player.js
@@ -292,7 +292,8 @@ export function renderQueue() {
   S.queue.forEach((s, i) => {
     const item = document.createElement('div');
     item.className = 'queue-item' + (i === S.qIdx ? ' active' : '');
-    item.innerHTML = `<div class="qi-idx">${i+1}</div><div class="qi-info"><div class="qi-title">${esc(s.title)}</div><div class="qi-artist">${esc(s.artist||'')}</div></div>`;
+    const cv = coverUrl(s.coverArt, 60);
+    item.innerHTML = `<div class="qi-idx">${i+1}</div><div class="qi-art">${cv ? `<img src="${cv}">` : '♪'}</div><div class="qi-info"><div class="qi-title">${esc(s.title)}</div><div class="qi-artist">${esc(s.artist||'')}</div></div>`;
     item.onclick = () => { S.qIdx = i; playCurrent(); };
     el.appendChild(item);
   });
diff --git a/styles.css b/styles.css
index 4b0ee8e..e36334f 100644
--- a/styles.css
+++ b/styles.css
@@ -295,6 +295,8 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 .queue-item.active{background:var(--accent-dim)}
 .queue-item.active .qi-title{color:var(--accent)}
 .qi-idx{font-size:10px;color:var(--text3);width:16px;text-align:center;flex-shrink:0;font-family:var(--mono)}
+.qi-art{width:34px;height:34px;border-radius:5px;overflow:hidden;background:var(--surface2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text3)}
+.qi-art img{width:100%;height:100%;object-fit:cover}
 .qi-info{flex:1;min-width:0}
 .qi-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .qi-artist{font-size:10px;color:var(--text2)}