feat: artist hero — dominant color tint + artist photo as full background

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

src/views/detail.js

@@ -71,11 +71,12 @@ export async function loadArtistDetail(artist) {
   const albEl  = document.getElementById('artist-albums-section');
   hero.style.background = 'linear-gradient(135deg, var(--surface2), var(--surface))';
   hero.querySelector('.artist-hero-img')?.remove();
+  hero.querySelector('.artist-hero-tint')?.remove();
   const heroBgEl = document.getElementById('artist-hero-bg');
   if(heroBgEl) heroBgEl.style.backgroundImage = '';
   document.getElementById('artist-hero-pfp-wrap')?.querySelector('.artist-hero-pfp')?.remove();
   const pfpInitial = document.getElementById('artist-hero-pfp-initial');
-  if(pfpInitial) pfpInitial.textContent = artist.name?.[0]?.toUpperCase() || '?';
+  if(pfpInitial) { pfpInitial.textContent = artist.name?.[0]?.toUpperCase() || '?'; pfpInitial.style.display = ''; }
   const overlay = hero.querySelector('.artist-hero-overlay');
   [bioEl, simEl, tsEl, albEl].forEach(el => { if(el) el.innerHTML = ''; });
   if(albEl) albEl.innerHTML = '<div class="spinner"></div>';
@@ -114,10 +115,12 @@ export async function loadArtistDetail(artist) {
   const img = imgRes.status === 'fulfilled' ? imgRes.value : null;
   const _firstAlbums = albumRes.status === 'fulfilled' ? (albumRes.value?.artist?.album || []) : [];
   const _bgCover = _firstAlbums[0] ? coverUrl(_firstAlbums[0].coverArt, 512) : null;
-  if(_bgCover || img) {
+  // Option 1: artist photo as background (falls back to album art)
+  const bgSrc = img || _bgCover;
+  if(bgSrc) {
     hero.style.background = '';
     const bgEl = document.getElementById('artist-hero-bg');
-    if(bgEl) bgEl.style.backgroundImage = `url('${_bgCover || img}')`;
+    if(bgEl) bgEl.style.backgroundImage = `url('${bgSrc}')`;
   }
   if(img) {
     const pfpWrap = document.getElementById('artist-hero-pfp-wrap');
@@ -130,6 +133,15 @@ export async function loadArtistDetail(artist) {
       const initial = document.getElementById('artist-hero-pfp-initial');
       if(initial) initial.style.display = 'none';
     }
+    // Option 2: dominant color tint — async, non-blocking
+    _extractColor(img).then(rgb => {
+      if(!rgb) return;
+      const [r, g, b] = rgb;
+      const tint = document.createElement('div');
+      tint.className = 'artist-hero-tint';
+      tint.style.cssText = `position:absolute;inset:0;background:linear-gradient(to right,rgba(${r},${g},${b},.55) 0%,rgba(${r},${g},${b},.25) 55%,rgba(${r},${g},${b},.6) 100%);pointer-events:none`;
+      if(overlay) hero.insertBefore(tint, overlay);
+    });
   }
 
   // ── Bio ──
@@ -393,3 +405,27 @@ export function expandArtistBio() {
   const el = document.getElementById('artist-bio-text');
   if(el && window._artistBioFull) el.textContent = window._artistBioFull;
 }
+
+async function _extractColor(src) {
+  return new Promise(resolve => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      try {
+        const c = document.createElement('canvas');
+        c.width = c.height = 64;
+        const ctx = c.getContext('2d');
+        ctx.drawImage(img, 0, 0, 64, 64);
+        const d = ctx.getImageData(0, 0, 64, 64).data;
+        let r = 0, g = 0, b = 0, n = 0;
+        for(let i = 0; i < d.length; i += 4) {
+          const lum = d[i] * 0.299 + d[i+1] * 0.587 + d[i+2] * 0.114;
+          if(lum > 20 && lum < 235) { r += d[i]; g += d[i+1]; b += d[i+2]; n++; }
+        }
+        resolve(n ? [Math.round(r/n), Math.round(g/n), Math.round(b/n)] : null);
+      } catch { resolve(null); }
+    };
+    img.onerror = () => resolve(null);
+    img.src = src;
+  });
+}