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>

backend/novasonic-server.js

@@ -412,39 +412,59 @@ async function fetchSpotifyEmbed(type, id) {
   const m = html.match(/<script id="__NEXT_DATA__" type="application\/json">(.+?)<\/script>/s);
   if (!m) throw new Error('Spotify-Seite nicht parsebar — Struktur geändert?');
   const nd = JSON.parse(m[1]);
-  const entity = nd?.props?.pageProps?.state?.data?.entity
-               || nd?.props?.pageProps?.data?.entity
-               || nd?.props?.pageProps?.entity;
+  let entity = nd?.props?.pageProps?.state?.data?.entity
+             || nd?.props?.pageProps?.data?.entity
+             || nd?.props?.pageProps?.entity
+             || nd?.props?.pageProps?.state?.data;
   if (!entity) throw new Error('Keine Metadaten in Spotify-Embed gefunden');
+  // Unwrap GraphQL-style data wrapper: {data: {__typename, name, ...}}
+  if (entity.data && !entity.name && !entity.trackList) entity = entity.data;
   return entity;
 }
 
 function _spArtwork(entity) {
-  const sources = entity?.album?.coverArt?.sources || entity?.coverArt?.sources || [];
+  // Handle albumOfTrack (newer GraphQL embed format) + legacy album/coverArt paths
+  const sources = entity?.albumOfTrack?.coverArt?.sources
+               || entity?.album?.coverArt?.sources
+               || entity?.coverArt?.sources
+               || [];
   if (sources.length) return sources.sort((a, b) => (b.width || 0) - (a.width || 0))[0].url;
-  return entity?.album?.images?.[0]?.url || entity?.images?.[0]?.url || '';
+  return entity?.albumOfTrack?.images?.[0]?.url
+      || entity?.album?.images?.[0]?.url
+      || entity?.images?.[0]?.url
+      || '';
 }
 
-function _spArtistName(artistsArr) {
-  const a = artistsArr?.[0];
-  return a?.profile?.name || a?.name || '';
+function _spAllArtists(artistsRaw) {
+  if (!artistsRaw) return '';
+  // Handle both array format and GraphQL {items:[...]} format
+  const arr = Array.isArray(artistsRaw) ? artistsRaw : (artistsRaw.items || []);
+  return arr.map(a => a?.profile?.name || a?.name || '').filter(Boolean).join(', ');
+}
+
+function _spArtistName(artistsRaw) {
+  return _spAllArtists(artistsRaw);
 }
 
 function _spTrackItem(t, defaultAlbum, defaultArt, defaultAlbumArtist) {
-  const track = t?.track || t;
-  const artist = _spArtistName(track?.artists) || defaultAlbumArtist || '';
-  const art    = _spArtwork(track) || defaultArt || '';
-  const album  = track?.album?.name || defaultAlbum || '';
-  const date   = track?.album?.date?.isoString || track?.album?.release_date || '';
+  // Unwrap optional {track: ...} wrapper (playlist item format)
+  let raw = t?.track || t;
+  // Handle GraphQL-style {data: {__typename, name, artists, ...}}
+  const d = raw?.data || raw;
+  const artist = _spAllArtists(d?.artists) || defaultAlbumArtist || '';
+  const art    = _spArtwork(d) || defaultArt || '';
+  const albumObj = d?.albumOfTrack || d?.album || {};
+  const album  = albumObj?.name || defaultAlbum || '';
+  const date   = albumObj?.date?.isoString || albumObj?.release_date || '';
   return {
-    trackName:           track?.name || '',
-    artistName:          artist,
-    collectionName:      album,
-    artworkUrl100:       art,
-    releaseDate:         date,
-    trackNumber:         track?.trackNumber || track?.track_number,
-    trackExplicitness:   track?.contentRating?.label === 'EXPLICIT' || track?.explicit ? 'explicit' : 'notExplicit',
-    previewUrl:          track?.previewUrl || track?.preview_url || null,
+    trackName:         d?.name || '',
+    artistName:        artist,
+    collectionName:    album,
+    artworkUrl100:     art,
+    releaseDate:       date,
+    trackNumber:       d?.trackNumber || d?.track_number,
+    trackExplicitness: d?.contentRating?.label === 'EXPLICIT' || d?.explicit ? 'explicit' : 'notExplicit',
+    previewUrl:        d?.previewUrl || d?.preview_url || null,
   };
 }
 
@@ -485,7 +505,7 @@ app.post('/api/spotify/resolve', async (req, res) => {
     }
 
     if (type === 'playlist') {
-      const trackList = entity.trackList || [];
+      const trackList = entity.trackList || entity.content?.items || entity.tracks?.items || [];
       const owner = entity.ownerV2?.data?.name || entity.owner?.displayName || entity.owner?.display_name || '';
       return res.json({
         type: 'playlist',
@@ -520,14 +540,22 @@ app.post('/api/download', async (req, res) => {
     updateJob(jobId, { status: 'running', progress: 5, message: 'Gestartet…' });
     try {
       if (type === 'track') {
-        let meta = { album, year: undefined, trackNum: undefined, totalTracks: undefined, discNum: undefined, discTotal: undefined, genre: undefined };
-        if (!album) {
+        // Prefer Spotify metadata from tracks[0] when available (more accurate than iTunes lookup)
+        const sp = req.body.tracks?.[0] || {};
+        const spAlbum = sp.collectionName || album || '';
+        const spArt   = sp.artworkUrl100 || artworkUrl || '';
+        const spYear  = sp.releaseDate ? new Date(sp.releaseDate).getFullYear() : undefined;
+        let meta = { album: spAlbum, year: spYear, trackNum: sp.trackNumber || undefined,
+          artworkUrl: spArt, explicit: sp.trackExplicitness === 'explicit' || !!explicit };
+        if (!meta.album) {
           log(jobId, '📋 Suche Album-Metadaten von iTunes…');
           const extra = await lookupItunesTrackMeta(artist, title);
           if (extra.album) log(jobId, `📋 Album: "${extra.album}" (${extra.year || '?'})`);
-          meta = { ...extra, artworkUrl: artworkUrl || extra.artworkUrl || '' };
+          meta = { ...meta, ...extra, artworkUrl: spArt || extra.artworkUrl || '' };
+        } else {
+          log(jobId, `📋 Album aus Spotify: "${meta.album}"`);
         }
-        const result = await downloadTrack({ jobId, artist, title, artworkUrl: artworkUrl || meta.artworkUrl || '', explicit: !!explicit, ...meta });
+        const result = await downloadTrack({ jobId, artist, title, ...meta });
         if (result?.skipped) {
           updateJob(jobId, { status: 'done', progress: 100, message: 'Bereits vorhanden – übersprungen', skipped: true });
         } else {