fix(spotify): handle GraphQL embed structure, all artists, correct metadata

- _spTrackItem now unwraps GraphQL-style {data:{__typename,...}} wrappers
- _spAllArtists joins all featured artists (e.g. "Kløn, Renzyx")
- _spArtwork adds albumOfTrack path used by newer Spotify embed
- fetchSpotifyEmbed: added entity.content.items / entity.data fallback paths
- Track download now uses Spotify metadata directly (album, art, year,
  trackNum) when provided — avoids iTunes returning wrong album for
  multi-artist tracks
- Playlist trackList also tries entity.content.items and entity.tracks.items
- Frontend: redesigned preview card with green top accent, bigger art,
  playlist checkbox styled as pill with Spotify color on check, album
  button shows actual album name

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/views.js

@@ -977,47 +977,64 @@ function _renderSpotifyPreview(data) {
   let actionsHtml = '';
   if (data.type === 'track' && count > 0) {
     actionsHtml = `
-      <button class="btn-outline blue" style="font-size:13px;padding:9px 16px"
-        onclick="executeSpotifyDownload({type:'track',title:window._spotifyResolved.tracks[0].trackName,artist:window._spotifyResolved.tracks[0].artistName,artworkUrl:window._spotifyResolved.artworkUrl,tracks:window._spotifyResolved.tracks})">
-        ⬇ Track herunterladen
-      </button>
-      <button class="btn-outline" style="font-size:12px;padding:9px 14px;margin-left:6px"
-        onclick="openDlModal({artistName:window._spotifyResolved.tracks[0].artistName,trackName:window._spotifyResolved.tracks[0].collectionName||window._spotifyResolved.tracks[0].trackName,collectionName:window._spotifyResolved.tracks[0].collectionName||'',artworkUrl100:window._spotifyResolved.tracks[0].artworkUrl100||window._spotifyResolved.artworkUrl||'',isAlbum:true})">
-        💿 Album
-      </button>`;
+      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:2px">
+        <button class="btn-outline blue" style="font-size:13px;padding:9px 18px;font-weight:600"
+          onclick="executeSpotifyDownload({type:'track',title:window._spotifyResolved.tracks[0].trackName,artist:window._spotifyResolved.tracks[0].artistName,artworkUrl:window._spotifyResolved.artworkUrl,tracks:window._spotifyResolved.tracks})">
+          ⬇ Track laden
+        </button>
+        ${data.tracks[0]?.collectionName ? `<button class="btn-outline" style="font-size:12px;padding:9px 14px"
+          onclick="openDlModal({artistName:window._spotifyResolved.tracks[0].artistName,trackName:window._spotifyResolved.tracks[0].collectionName,collectionName:window._spotifyResolved.tracks[0].collectionName,artworkUrl100:window._spotifyResolved.tracks[0].artworkUrl100||window._spotifyResolved.artworkUrl||'',isAlbum:true})">
+          💿 ${esc(data.tracks[0].collectionName)}
+        </button>` : ''}
+      </div>`;
   } else if (data.type === 'album') {
     actionsHtml = `
-      <button class="btn-outline blue" style="font-size:13px;padding:9px 16px"
+      <button class="btn-outline blue" style="font-size:13px;padding:9px 18px;font-weight:600;margin-top:2px"
         onclick="executeSpotifyDownload({type:'playlist',title:window._spotifyResolved.name,artist:window._spotifyResolved.artist,artworkUrl:window._spotifyResolved.artworkUrl,tracks:window._spotifyResolved.tracks})">
         ⬇ Album laden (${count} Tracks)
       </button>`;
   } else if (data.type === 'playlist') {
     actionsHtml = `
-      <div style="margin-top:2px">
-        <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;margin-bottom:8px">
-          <input type="checkbox" id="${plCbId}" style="width:15px;height:15px;accent-color:#1DB954" onchange="document.getElementById('${plCbId}_wrap').style.display=this.checked?'':'none'">
+      <div style="margin-top:6px">
+        <label id="${plCbId}_label" style="display:inline-flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;margin-bottom:10px;background:var(--surface2);border:1px solid var(--border2);border-radius:20px;padding:6px 12px;transition:border-color .2s" onclick="void(0)">
+          <input type="checkbox" id="${plCbId}" style="width:14px;height:14px;accent-color:#1DB954;cursor:pointer" onchange="
+            document.getElementById('${plCbId}_wrap').style.display=this.checked?'':'none';
+            document.getElementById('${plCbId}_label').style.borderColor=this.checked?'#1DB954':'';
+            document.getElementById('${plCbId}_label').style.color=this.checked?'#1DB954':'';
+          ">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
           Als Navidrome-Playlist speichern
         </label>
         <div id="${plCbId}_wrap" style="display:none;margin-bottom:10px">
           <input type="text" id="${plNmId}" value="${esc(data.name)}" placeholder="Playlist-Name…"
             style="background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:8px 12px;font-size:13px;width:100%;box-sizing:border-box;color:var(--text);outline:none">
         </div>
-        <button class="btn-outline blue" style="font-size:13px;padding:9px 16px"
+        <button class="btn-outline blue" style="font-size:13px;padding:9px 18px;font-weight:600"
           onclick="spotifyDlAll('${plCbId}','${plNmId}')">
-          ⬇ Alle ${count} Tracks herunterladen
+          ⬇ Alle ${count} Tracks laden
         </button>
       </div>`;
   }
 
+  const artSize = data.type === 'playlist' ? '80px' : '110px';
+  const artRadius = data.type === 'playlist' ? '8px' : '10px';
+  const artHtml = art
+    ? `<img src="${art}" style="width:100%;height:100%;object-fit:cover" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">`
+    : '';
+
   inner.innerHTML = `
-    <div style="display:flex;gap:16px;align-items:flex-start;background:var(--surface);border-radius:14px;padding:16px;margin-bottom:4px;border:1px solid var(--border)">
-      <div style="width:90px;height:90px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--surface2)">
-        ${art ? `<img src="${art}" style="width:100%;height:100%;object-fit:cover" onerror="this.parentNode.innerHTML='<div style=\\'width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px\\'>🎵</div>'">` : '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px">🎵</div>'}
+    <div style="display:flex;gap:16px;align-items:flex-start;background:var(--surface);border-radius:14px;padding:18px 16px;margin-bottom:4px;border:1px solid var(--border);border-top:3px solid #1DB954">
+      <div style="width:${artSize};height:${artSize};border-radius:${artRadius};overflow:hidden;flex-shrink:0;background:var(--surface2);position:relative">
+        ${artHtml}
+        <div style="width:100%;height:100%;display:${art?'none':'flex'};align-items:center;justify-content:center;font-size:32px;position:absolute;top:0;left:0">🎵</div>
       </div>
       <div style="flex:1;min-width:0">
-        <div style="font-size:11px;font-weight:600;color:#1DB954;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px">${typeLabel}</div>
-        <div style="font-size:17px;font-weight:700;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(data.name)}</div>
-        <div style="font-size:13px;color:var(--text2);margin-bottom:12px">${esc(data.artist)}${count > 1 ? ` · ${count} Tracks` : ''}</div>
+        <div style="font-size:10px;font-weight:700;color:#1DB954;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px;display:flex;align-items:center;gap:5px">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="#1DB954"><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" stroke="#000" stroke-width="2" fill="none"/></svg>
+          ${typeLabel}
+        </div>
+        <div style="font-size:18px;font-weight:700;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2">${esc(data.name)}</div>
+        <div style="font-size:13px;color:var(--text2);margin-bottom:10px">${esc(data.artist)}${count > 1 ? `<span style="color:var(--text3)"> · ${count} Tracks</span>` : ''}</div>
         ${actionsHtml}
       </div>
     </div>`;