fix: artist link quotes in album detail; card art=play / info=navigate; artist play button via quickPlayArtist

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

src/components.js

@@ -4,7 +4,7 @@ import { coverUrl } from './api.js';
 // Circular imports — safe (only used inside event handlers after module init)
 import { playQueue, dlSongLocal, toggleStar, playPreview } from './player.js';
 import { showCtxMenu, openDlModal } from './ui.js';
-import { navigate, quickPlayAlbum } from './views.js';
+import { navigate, quickPlayAlbum, quickPlayArtist } from './views.js';
 
 // ─── GENERIC CARD ───
 export function makeCard(title, sub, imgUrl, fallback='💿') {
@@ -21,8 +21,8 @@ export function makeCard(title, sub, imgUrl, fallback='💿') {
 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.querySelector('.card-art').onclick = (e) => { e.stopPropagation(); quickPlayAlbum(a); };
-  c.onclick = () => navigate('album-detail', a);
+  c.querySelector('.card-info').onclick = () => navigate('album-detail', a);
   return c;
 }
 

src/views.js

@@ -126,7 +126,8 @@ export async function loadArtists() {
     g.innerHTML = '';
     all.forEach(a => {
       const c = makeCard(a.name, a.albumCount+' Alben', null, '🎤');
-      c.onclick = () => navigate('artist-detail', a);
+      c.querySelector('.card-art').onclick = (e) => { e.stopPropagation(); quickPlayArtist(a); };
+      c.querySelector('.card-info').onclick = () => navigate('artist-detail', a);
       g.appendChild(c);
       getArtistImage(a.id).then(imgUrl => {
         if(!imgUrl) return;
@@ -327,8 +328,8 @@ function _renderArtistAlbums(el, ndAlbums, iAlbums, artist) {
     partial.forEach(({ nd, itunes, have, total }) => {
       const art = itunes?.artworkUrl100?.replace('100x100','300x300') || coverUrl(nd.coverArt, 300);
       const c = makeCard(nd.name, `${have} / ${total} Tracks`, art, '💿');
-      c.querySelector('.play-btn').onclick = (e) => { e.stopPropagation(); quickPlayAlbum(nd); };
+      c.querySelector('.card-art').onclick = (e) => { e.stopPropagation(); quickPlayAlbum(nd); };
-      c.onclick = () => itunes ? navigate('itunes-album-detail', itunes) : navigate('album-detail', { ...nd, _fromArtist: artist });
+      c.querySelector('.card-info').onclick = () => itunes ? navigate('itunes-album-detail', itunes) : navigate('album-detail', { ...nd, _fromArtist: artist });
       const artEl = c.querySelector('.card-art');
       const badge = document.createElement('div');
       badge.className = 'album-partial-badge'; badge.textContent = `${have}/${total}`;
@@ -433,7 +434,7 @@ export async function loadAlbumDetail(album) {
   const albumArtistParts = (album.artist || '').split(/\s*(?:\/|•)\s*/).filter(Boolean);
   artistEl.innerHTML = albumArtistParts.map((name, i) => {
     const aid = i === 0 ? (album.artistId || '') : '';
-    return `<span class="song-link" onclick="s_goArtist(event,${JSON.stringify(name)},${JSON.stringify(aid)})">${esc(name)}</span>`;
+    return `<span class="song-link" onclick="event.stopPropagation();s_goArtist(event,'${esc(name)}','${esc(aid)}')">${esc(name)}</span>`;
   }).join('<span style="color:var(--text3)"> • </span>') || '';
   const cw = document.getElementById('album-cover-wrap');
   const cv = coverUrl(album.coverArt, 300);
@@ -467,8 +468,8 @@ export async function loadPlaylists() {
     lists.forEach(pl => {
       const cv = coverUrl(pl.coverArt, 200);
       const c = makeCard(pl.name, pl.songCount+' Titel', cv, '🎶');
-      c.querySelector('.play-btn').onclick = (e) => { e.stopPropagation(); quickPlayPlaylist(pl); };
+      c.querySelector('.card-art').onclick = (e) => { e.stopPropagation(); quickPlayPlaylist(pl); };
-      c.onclick = () => navigate('playlist-detail', pl);
+      c.querySelector('.card-info').onclick = () => navigate('playlist-detail', pl);
       g.appendChild(c);
     });
   } catch(e) { g.innerHTML = `<p style="color:var(--danger)">${e.message}</p>`; }
@@ -479,6 +480,19 @@ export async function quickPlayPlaylist(pl) {
   catch(e) { toast('Fehler: ' + e.message); }
 }
 
+export async function quickPlayArtist(a) {
+  try {
+    toast('Lade Songs…');
+    const r = await api('getArtist', `&id=${a.id}`);
+    const albums = r.artist?.album || [];
+    if (!albums.length) { toast('Keine Alben gefunden'); return; }
+    const results = await Promise.all(albums.map(al => api('getAlbum', `&id=${al.id}`)));
+    const songs = results.flatMap(ar => ar.album?.song || []);
+    if (songs.length) playQueue(songs, 0);
+    else toast('Keine Songs gefunden');
+  } catch(e) { toast('Fehler: ' + e.message); }
+}
+
 export async function loadPlaylistDetail(pl) {
   S._currentPlaylist = {...pl};
   document.getElementById('playlist-detail-name').textContent = pl.name;
@@ -560,13 +574,15 @@ export async function doLocalSearch(q) {
       const g = document.createElement('div'); g.className = 'scroll-row';
       artists.forEach(a => {
         const c = makeCard(a.name, a.albumCount+' Alben', null, '🎤');
-        c.onclick = () => navigate('artist-detail', a);
+        c.querySelector('.card-art').onclick = (e) => { e.stopPropagation(); quickPlayArtist(a); };
+        c.querySelector('.card-info').onclick = () => navigate('artist-detail', a);
         g.appendChild(c);
         getArtistImage(a.id).then(img => {
           if(!img) return;
           const artEl = c.querySelector('.card-art');
           if(!artEl) return;
           artEl.innerHTML = `<img src="${img}" loading="lazy" onerror="this.parentNode.innerHTML='<div class=\\'no-art\\'>🎤</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>`;
+          artEl.onclick = (e) => { e.stopPropagation(); quickPlayArtist(a); };
         });
       });
       s.appendChild(g); el.appendChild(s);