refactor: split views.js and ui.js into focused modules

Extract 3 new files from oversized source files:
- src/components.js (~86 lines): makeCard, makeAlbumCard, makeSongItem,
  makeGlobalTrackItem, mkSection — reusable DOM builders
- src/spotify.js (~187 lines): loadSpotifyImporter, resolveSpotifyLink,
  clearSpotifyPreview, spotifyDlAll, and private render/artwork helpers
- src/nowplaying.js (~255 lines): openNowPlaying, closeNowPlaying,
  syncNowPlaying, switchNpTab, full lyrics engine, renderNpQueue,
  npGoArtist/Album, openNpMenu/closeNpMenu

views.js: 1121 → 864 lines
ui.js:     706 → 462 lines

Update imports in main.js, player.js, views.js accordingly.
Build verified: 15 modules, no errors.

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

src/views.js

@@ -2,8 +2,11 @@ import { S } from './state.js';
 import { esc, formatDur, toast } from './utils.js';
 import { api, coverUrl, itunesSearch, itunesLookupAlbum, itunesLookupArtistSongs, itunesLookupArtistAlbums, itunesTopCharts, itunesTopSongs } from './api.js';
 // Circular imports — safe (only used inside function bodies)
-import { playQueue, dlSongLocal, toggleStar, playPreview } from './player.js';
-import { showCtxMenu, openEditPlModal, openPlModal, openDlModal, closeSidebar, switchNavMode, closeNowPlaying, closeNpMenu } from './ui.js';
+import { playQueue, dlSongLocal, playPreview } from './player.js';
+import { showCtxMenu, openEditPlModal, openDlModal, closeSidebar, switchNavMode } from './ui.js';
+import { closeNowPlaying, closeNpMenu } from './nowplaying.js';
+import { makeCard, makeAlbumCard, makeSongItem, makeGlobalTrackItem, mkSection } from './components.js';
+import { loadSpotifyImporter } from './spotify.js';
 
 // ─── NAVIGATION HISTORY ───
 export function _navSave() {
@@ -74,82 +77,6 @@ export function _navGoBack() {
   try { history.pushState({ nsIdx: S._navCursor }, '', ''); } catch {}
 }
 
-// ─── CARD MAKERS ───
-export function makeCard(title, sub, imgUrl, fallback='💿') {
-  const c = document.createElement('div');
-  c.className = 'card';
-  c.innerHTML = `<div class="card-art">
-    ${imgUrl ? `<img src="${imgUrl}" loading="lazy" onerror="this.parentNode.innerHTML='<div class=\\'no-art\\'>${fallback}</div>'">` : `<div class="no-art">${fallback}</div>`}
-    <div class="play-overlay"><button class="play-btn"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg></button></div>
-  </div>
-  <div class="card-info"><div class="card-title">${esc(title)}</div><div class="card-sub">${esc(sub||'')}</div></div>`;
-  return c;
-}
-
-export function makeAlbumCard(a) {
-  const cv = coverUrl(a.coverArt, 200);
-  const c = makeCard(a.name, a.artist||'', cv, '💿');
-  c.querySelector('.play-btn').onclick = (e) => { e.stopPropagation(); quickPlayAlbum(a); };
-  c.onclick = () => navigate('album-detail', a);
-  return c;
-}
-
-export function makeSongItem(s, idx, list) {
-  const el = document.createElement('div');
-  if(s.starred && !s._starred) s._starred = true;
-  el.className = 'song-item' + (S.queue[S.qIdx]?.id === s.id ? ' playing' : '');
-  const cv = coverUrl(s.coverArt, 60);
-  el.innerHTML = `<div class="song-num">${idx+1}</div>
-    <div class="song-thumb">${cv ? `<img src="${cv}" loading="lazy" onerror="this.parentNode.innerHTML='<div class=\\'no-art\\'>♪</div>'">` : '<div class="no-art">♪</div>'}</div>
-    <div class="song-info">
-      <div class="song-title">${esc(s.title)}</div>
-      <div class="song-artist">
-        ${s.artistId||s.artist ? `<span class="song-link" onclick="event.stopPropagation();s_goArtist(event,'${esc(s.artist||'')}','${s.artistId||''}')">${esc(s.artist||'')}</span>` : ''}
-        ${s.albumId||s.album  ? `<span style="color:var(--text3)"> · </span><span class="song-link" onclick="event.stopPropagation();s_goAlbum(event,'${s.albumId||''}','${esc(s.album||'')}','${esc(s.artist||'')}','${s.artistId||''}')">${esc(s.album||'')}</span>` : ''}
-      </div>
-    </div>
-    <div class="song-meta">
-      <span class="song-dur">${formatDur(s.duration)}</span>
-      <div class="song-actions">
-        <button class="icon-btn${s._starred?' starred':''}" title="Favorit"><svg width="12" height="12" viewBox="0 0 24 24" fill="${s._starred?'currentColor':'none'}" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
-        <button class="icon-btn" title="Download"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button>
-      </div>
-    </div>`;
-  const btns = el.querySelectorAll('.icon-btn');
-  btns[0].onclick = (e) => { e.stopPropagation(); toggleStar(s, btns[0]); };
-  btns[1].onclick = (e) => { e.stopPropagation(); dlSongLocal(s); };
-  el.onclick = () => playQueue(list, idx);
-  el.addEventListener('contextmenu', e => { e.preventDefault(); showCtxMenu(e, s, list, idx); });
-  return el;
-}
-
-export function makeGlobalTrackItem(t, idx, list) {
-  const el = document.createElement('div');
-  el.className = 'gtrack-item';
-  const art = t.artworkUrl60 || t.artworkUrl100 || '';
-  el.innerHTML = `
-    <div class="gtrack-art">${art ? `<img src="${art}" loading="lazy">` : '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:22px">🎵</div>'}</div>
-    <div class="gtrack-info">
-      <div class="gtrack-title">${esc(t.trackName||t.collectionName||'—')}${t.trackExplicitness==='explicit'?'<span class="explicit-badge">E</span>':''}</div>
-      <div class="gtrack-sub">${esc(t.artistName||'—')} · ${esc(t.collectionName||'')} ${t.releaseDate?'· '+new Date(t.releaseDate).getFullYear():''}</div>
-    </div>
-    <div class="gtrack-actions">
-      ${t.previewUrl ? `<button class="icon-btn blue" title="30s Preview" onclick="event.stopPropagation();playPreview(${JSON.stringify(t).replace(/"/g,'&quot;')})"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg></button>` : ''}
-      <button class="icon-btn green" title="Auf Server laden" onclick="event.stopPropagation();openDlModal(${JSON.stringify(t).replace(/"/g,'&quot;')})">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
-      </button>
-    </div>`;
-  el.onclick = () => { if(t.previewUrl) playPreview(t); };
-  return el;
-}
-
-function mkSection(title) {
-  const d = document.createElement('div');
-  d.className = 'search-section';
-  d.innerHTML = `<div class="search-section-title">${title}</div>`;
-  return d;
-}
-
 // ─── ARTIST IMAGE ───
 export async function getArtistImage(artistId) {
   if(S.artistImgCache[artistId] !== undefined) return S.artistImgCache[artistId];
@@ -894,189 +821,6 @@ async function loadItunesFallbackRecommendations(el, artist, title, html) {
   sec.appendChild(list); el.appendChild(sec);
 }
 
-// ─── SPOTIFY IMPORTER ───
-export function loadSpotifyImporter() {
-  if (!document.getElementById('spotify-link-input')?.value) {
-    const hint    = document.getElementById('spotify-importer-hint');
-    const preview = document.getElementById('spotify-preview');
-    if (hint)    hint.style.display    = '';
-    if (preview) preview.style.display = 'none';
-  }
-}
-
-export function clearSpotifyPreview() {
-  if (!document.getElementById('spotify-link-input')?.value) {
-    const hint    = document.getElementById('spotify-importer-hint');
-    const preview = document.getElementById('spotify-preview');
-    if (hint)    hint.style.display    = '';
-    if (preview) preview.style.display = 'none';
-  }
-}
-
-export async function resolveSpotifyLink() {
-  const url = document.getElementById('spotify-link-input')?.value.trim();
-  if (!url) return;
-  if (!S.cfg.backendUrl) { toast('⚠ Backend URL in Einstellungen konfigurieren'); return; }
-
-  const hint    = document.getElementById('spotify-importer-hint');
-  const preview = document.getElementById('spotify-preview');
-  const inner   = document.getElementById('spotify-preview-inner');
-  const section = document.getElementById('spotify-tracks-section');
-
-  if (hint)    hint.style.display    = 'none';
-  preview.style.display = '';
-  section.style.display = 'none';
-  inner.innerHTML = '<div class="spinner"></div>';
-
-  try {
-    const res = await fetch(`${S.cfg.backendUrl}/api/spotify/resolve`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ url }),
-    });
-    if (!res.ok) {
-      const err = await res.json().catch(() => ({}));
-      throw new Error(err.error || `HTTP ${res.status}`);
-    }
-    const data = await res.json();
-    window._spotifyResolved = data;
-    _renderSpotifyPreview(data);
-  } catch(e) {
-    inner.innerHTML = `<div style="color:var(--danger);padding:16px;background:var(--surface);border-radius:10px">${esc(e.message)}</div>`;
-  }
-}
-
-export function spotifyDlAll(cbId, nameId) {
-  const data = window._spotifyResolved;
-  if (!data) return;
-  // Import executeSpotifyDownload from ui.js at call time (avoid circular at module level)
-  window.executeSpotifyDownload({
-    type: 'playlist',
-    title: document.getElementById(nameId)?.value || data.name,
-    artist: data.artist,
-    artworkUrl: data.artworkUrl,
-    tracks: data.tracks,
-    createPlaylist: document.getElementById(cbId)?.checked || false,
-    playlistName: document.getElementById(nameId)?.value || data.name,
-  });
-}
-
-function _renderSpotifyPreview(data) {
-  const inner   = document.getElementById('spotify-preview-inner');
-  const section = document.getElementById('spotify-tracks-section');
-  const list    = document.getElementById('spotify-tracks-list');
-  const titleEl = document.getElementById('spotify-tracks-title');
-
-  const typeLabel = { track: 'Spotify Track', album: 'Spotify Album', playlist: 'Spotify Playlist' }[data.type] || 'Spotify';
-  const art = (data.artworkUrl || '').replace(/\/\d+x\d+bb/, '/300x300bb').replace('100x100', '300x300');
-  const count = data.tracks?.length || 0;
-  const uid = Date.now();
-  const plCbId = `sp-cb-${uid}`, plNmId = `sp-pln-${uid}`;
-
-  let actionsHtml = '';
-  if (data.type === 'track' && count > 0) {
-    actionsHtml = `
-      <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 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: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 18px;font-weight:600"
-          onclick="spotifyDlAll('${plCbId}','${plNmId}')">
-          ⬇ 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: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: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>`;
-
-  titleEl.textContent = `${count} Tracks`;
-  list.innerHTML = '';
-  (data.tracks || []).forEach((t, i) => list.appendChild(makeGlobalTrackItem(t, i, data.tracks)));
-  section.style.display = '';
-
-  // Lazy-load correct per-track artwork via iTunes in the background
-  if ((data.type === 'playlist' || data.type === 'album') && count > 0 && S.cfg.backendUrl) {
-    _loadSpotifyTrackArtwork(data.tracks, list);
-  }
-}
-
-async function _loadSpotifyTrackArtwork(tracks, listEl) {
-  try {
-    const payload = tracks.map((t, i) => ({ idx: i, trackName: t.trackName, artistName: t.artistName }));
-    const res = await fetch(`${S.cfg.backendUrl}/api/spotify/track-artwork`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ tracks: payload }),
-    });
-    if (!res.ok) return;
-    const { results } = await res.json();
-    const artEls = listEl.querySelectorAll('.gtrack-art');
-    for (const r of results) {
-      if (!r.artworkUrl || r.idx == null) continue;
-      const el = artEls[r.idx];
-      if (!el) continue;
-      const img = document.createElement('img');
-      img.src = r.artworkUrl;
-      img.loading = 'lazy';
-      el.innerHTML = '';
-      el.appendChild(img);
-      // Update resolved data so downloads use the correct artwork
-      if (window._spotifyResolved?.tracks?.[r.idx]) {
-        window._spotifyResolved.tracks[r.idx].artworkUrl100 = r.artworkUrl;
-      }
-    }
-  } catch { /* artwork loading is non-critical */ }
-}
-
 // ─── HELPERS ───
 export function expandArtistBio() {
   const el = document.getElementById('artist-bio-text');