fix(artist pin): apply pins in search + fix similar artists (web + android)

Two gaps the pin left, on both platforms:

1. Search still showed the wrong same-name artist's photo. The library search
   now prefers the pin's Deezer picture for a pinned artist (web: search.js
   artist cards; android: LibrarySearchContent via SearchViewModel overrides).

2. Similar Artists were "weird" — they come from Last.fm keyed to the (merged/
   wrong) Navidrome artist. When pinned, use Deezer "related" of the pinned
   artist instead (new deezerRelatedArtists / ItunesClient.lookupRelatedArtists).

Also: web Similar Artists now render with profile pictures (avatar chips), like
the Android app, instead of plain text chips.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/api.js

@@ -412,6 +412,15 @@ export async function deezerLookupArtistSongs(artistId, limit=15) {
   } catch { return []; }
 }
 
+// Related Deezer artists (real pictures + fan counts). Used for the "Ähnliche Künstler" row when a
+// pin is active — Last.fm's similar list is keyed to the (possibly merged/wrong) Navidrome artist.
+export async function deezerRelatedArtists(artistId, limit=12) {
+  try {
+    const r = await fetch(`${_deezerBase()}/artist/${artistId}/related?limit=${limit}`);
+    return ((await r.json()).data || []).map(_dzArtist);
+  } catch { return []; }
+}
+
 // Deezer's /artist/{id}/albums list OMITS the artist object, so _dzAlbum yields artistName:''.
 // We already know whose page this is → backfill artistName so downstream download/detail cards
 // don't fall back to the literal "Unknown Artist" (which poisoned the yt-dlp search).

src/views/detail.js

@@ -1,6 +1,6 @@
 import { S } from '../state.js';
 import { esc, toast, fmtCount } from '../utils.js';
-import { api, coverUrl, deezerSearch, deezerLookupAlbum, deezerLookupArtistSongs, deezerLookupArtistAlbums, deezerArtistImage, fetchRomajiIndex, dispArtistById, dispAlbumName, cacheArtistSortNames, ensureArtistSortMap, getArtistOverride } from '../api.js';
+import { api, coverUrl, deezerSearch, deezerLookupAlbum, deezerLookupArtistSongs, deezerLookupArtistAlbums, deezerArtistImage, deezerRelatedArtists, fetchRomajiIndex, dispArtistById, dispAlbumName, cacheArtistSortNames, ensureArtistSortMap, getArtistOverride } from '../api.js';
 import { openArtistPin } from '../ui/artistPin.js';
 import { makeCard, makeAlbumCard, makeGlobalTrackItem, makeSongItem } from '../ui/components.js';
 import { playQueue, dlSongLocal, toggleStar, parseArtists } from '../player/player.js';
@@ -230,13 +230,34 @@ export async function loadArtistDetail(artist) {
     }
   }
 
-  // ── Similar artists ──
-  const similar = info?.similarArtist || [];
-  if(similar.length && simEl) {
-    simEl.innerHTML = `<div class="section-title" style="margin-bottom:10px">Ähnliche Künstler</div>
-      <div class="similar-chips">${similar.map(a =>
-        `<span class="similar-chip" onclick="navigate('artist-detail',{id:'${esc(a.id||a.name)}',name:'${esc(a.name)}'})">
-          ${esc(a.name)}</span>`).join('')}</div>`;
+  // ── Similar artists (with profile pictures) ──
+  // When pinned, use Deezer "related" for the pinned artist — Last.fm's list is keyed to the
+  // (possibly merged/wrong) Navidrome artist, so it goes "weird". Deezer related carry real photos.
+  if (simEl) {
+    let simList;
+    if (_pin?.deezerArtistId) {
+      const rel = await deezerRelatedArtists(_pin.deezerArtistId, 12);
+      simList = rel.map(r => ({
+        name: r.artistName, img: r.artworkUrl100 || '',
+        nav: { id: null, name: r.artistName, deezerArtistId: r.artistId, deezerFanCount: r.fanCount ?? null },
+      }));
+    } else {
+      simList = (info?.similarArtist || []).map(a => ({
+        name: a.name, img: coverUrl(a.coverArt || a.id, 160) || '',
+        nav: { id: a.id || a.name, name: a.name },
+      }));
+    }
+    if (simList.length) {
+      const _navAttr = n => esc(JSON.stringify(n)).replace(/"/g, '&quot;');
+      simEl.innerHTML = `<div class="section-title" style="margin-bottom:10px">Ähnliche Künstler</div>
+        <div class="scroll-row">${simList.map(a => `
+          <div class="artist-card" style="cursor:pointer;width:88px" onclick='navigate("artist-detail", ${_navAttr(a.nav)})'>
+            <div class="card-art" style="width:88px;height:88px;border-radius:50%;overflow:hidden">
+              ${a.img ? `<img src="${esc(a.img)}" loading="lazy" style="width:100%;height:100%;object-fit:cover" onerror="this.parentNode.innerHTML='<div class=\\'no-art\\'>🎤</div>'">` : `<div class="no-art">🎤</div>`}
+            </div>
+            <div class="card-title" style="text-align:center;font-size:12px;margin-top:6px">${esc(a.name)}</div>
+          </div>`).join('')}</div>`;
+    }
   }
 
   // ── Top Songs ──

src/views/search.js

@@ -1,6 +1,6 @@
 import { S } from '../state.js';
 import { esc, toast, fmtCount } from '../utils.js';
-import { api, deezerSearch, deezerLastError, deezerLookupAlbum, fetchRomajiIndex, dispArtistById } from '../api.js';
+import { api, deezerSearch, deezerLastError, deezerLookupAlbum, fetchRomajiIndex, dispArtistById, getArtistOverride } from '../api.js';
 import { makeCard, makeAlbumCard, makeGlobalTrackItem, makeSongItem, mkSection } from '../ui/components.js';
 import { playPreview } from '../player/player.js';
 import { openDlModal } from '../ui/ui.js';
@@ -64,12 +64,16 @@ export async function doLocalSearch(q, el) {
         c.classList.add('artist-card');
         c.onclick = () => navigate('artist-detail', a);
         g.appendChild(c);
-        getArtistImage(a.id).then(img => {
+        const _setArt = 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>'">`;
-        });
+        };
+        // A pin's Deezer picture wins (fixes same-name artists whose Navidrome image is the wrong person).
+        const _pin = getArtistOverride(a.id);
+        if (_pin?.image) _setArt(_pin.image);
+        else getArtistImage(a.id).then(_setArt);
       });
       s.appendChild(g); el.appendChild(s);
     }