feat(web+android): Folgen-Herz ins Künstler-Banner, Favoriten zeigen Künstler und Alben

Das Herz sitzt jetzt im Banner neben dem Pin-Zahnrad statt in der
Aktionsleiste: die Leiste ist "was ich jetzt tue" (abspielen, mischen,
Konzerte), Folgen ist ein Zustand und gehört an den Künstler. Auf beiden
Plattformen gleich. Beim Album bleibt das Herz in der Aktionsleiste, dort
gibt es kein Banner.

Dazu die Übersicht, wem man folgt: die Favoritenseite bekommt Abschnitte
Künstler / Alben / Songs. Ohne zusätzlichen Aufruf — getStarred2 liefert
Künstler und Alben im selben Paket wie die Songs, wir haben sie bisher
verworfen.

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

src/views/detail.js

@@ -105,6 +105,15 @@ export async function loadArtistDetail(artist) {
     pinBtn.style.cssText = `position:absolute;top:10px;right:10px;z-index:5;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.35);color:${_pin ? 'var(--accent)' : 'rgba(255,255,255,.72)'};font-size:14px;line-height:1;cursor:pointer;backdrop-filter:blur(4px)`;
     pinBtn.onclick = () => openArtistPin(artist.id, artist.name);
     hero.appendChild(pinBtn);
+
+    // Folgen gehoert an den Kuenstler, nicht in die Aktionsleiste: die Leiste ist "was ich jetzt
+    // tue" (abspielen, mischen), Folgen ist ein Zustand. Deshalb als Herz ins Banner, neben das
+    // Zahnrad. Verdrahtet wird es weiter unten, sobald `starred` aus getArtist da ist.
+    hero.querySelector('.artist-follow-btn')?.remove();
+    const folgeBtn = document.createElement('button');
+    folgeBtn.className = 'artist-follow-btn';
+    folgeBtn.style.cssText = 'position:absolute;top:10px;right:46px;z-index:5;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.35);color:rgba(255,255,255,.72);cursor:pointer;backdrop-filter:blur(4px)';
+    hero.appendChild(folgeBtn);
   }
 
   // Fire all requests immediately so they run in parallel.
@@ -126,6 +135,24 @@ export async function loadArtistDetail(artist) {
   const [albumRes] = await Promise.allSettled([albumP]);
 
   const _ndArtist = albumRes.status === 'fulfilled' ? albumRes.value?.artist : null;
+  if (hasND && artist.id) {
+    const folgeBtn = hero?.querySelector('.artist-follow-btn');
+    _verdrahteMerken(
+      folgeBtn, artist.id, _ndArtist?.starred, '', '',
+      `Du folgst ${artist.name}`, `${artist.name} folgen`,
+    );
+    // Ohne Pinnung laeuft die Deezer-Zuordnung ueber den Namen — bei gleichnamigen Kuenstlern
+    // kaemen dauerhaft die Neuheiten des Falschen.
+    if (folgeBtn && !_pin && !_ndArtist?.starred) {
+      folgeBtn.addEventListener('click', () => {
+        setTimeout(() => {
+          if (folgeBtn.classList.contains('is-starred')) {
+            toast('Tipp: Über ⚙ daneben den richtigen Deezer-Künstler festpinnen');
+          }
+        }, 900);
+      }, { once: true });
+    }
+  }
   if (_ndArtist) cacheArtistSortNames([_ndArtist]);
   const _firstAlbums = _ndArtist?.album || [];
   const _bgCover = _firstAlbums[0] ? coverUrl(_firstAlbums[0].coverArt, 512) : null;
@@ -336,29 +363,6 @@ export async function loadArtistDetail(artist) {
     evBtn.onclick = () => openEventsModal(events, artist.name);
     actionBar.appendChild(evBtn);
 
-    // Folgen = Navidromes Stern auf dem Künstler. Kein eigener Speicher, sofort auf allen Geräten
-    // und in Navidromes eigener Oberfläche sichtbar.
-    if (hasND && artist.id) {
-      const folgeBtn = document.createElement('button');
-      folgeBtn.className = 'artist-action-btn';
-      actionBar.appendChild(folgeBtn);
-      _verdrahteMerken(
-        folgeBtn, artist.id, _ndArtist?.starred,
-        'Folge ich', 'Folgen',
-        `❤ Du folgst ${artist.name}`, `Folgst ${artist.name} nicht mehr`,
-      );
-      // Ohne Pinnung läuft die Deezer-Zuordnung über den Namen — bei gleichnamigen Künstlern
-      // bekäme man dann dauerhaft die Neuheiten des Falschen gemeldet.
-      if (!_pin && !_ndArtist?.starred) {
-        folgeBtn.addEventListener('click', () => {
-          setTimeout(() => {
-            if (folgeBtn.classList.contains('is-starred')) {
-              toast('Tipp: Über ⚙ im Kopfbereich den richtigen Deezer-Künstler festpinnen');
-            }
-          }, 900);
-        }, { once: true });
-      }
-    }
   }
 
   if(albEl) _renderArtistAlbums(albEl, ndAlbums, iAlbums, artist);
@@ -521,10 +525,10 @@ function _verdrahteMerken(btn, id, markiert, textAn, textAus, meldungAn, meldung
   if (!btn || !id) return;
   let an = !!markiert;
   const malen = () => {
-    const label = btn.querySelector('span');
-    btn.innerHTML = _HERZ(an) + `<span>${an ? textAn : textAus}</span>`;
+    const txt = an ? textAn : textAus;
+    btn.innerHTML = _HERZ(an) + (txt ? `<span>${txt}</span>` : '');
     btn.classList.toggle('is-starred', an);
-    void label;
+    if (!txt) btn.title = an ? meldungAn : meldungAus;
   };
   malen();
   btn.onclick = async () => {

src/views/playlists.js

@@ -1,12 +1,13 @@
 import { S } from '../state.js';
 import { esc, toast } from '../utils.js';
-import { api, apiCached, apiIsCached, coverUrl, romajiLookup } from '../api.js';
-import { makeCard, makeSongItem } from '../ui/components.js';
+import { api, apiCached, apiIsCached, coverUrl, romajiLookup, dispArtistById, getArtistOverride } from '../api.js';
+import { makeCard, makeAlbumCard, makeSongItem, mkSection } from '../ui/components.js';
 import { playQueue } from '../player/player.js';
 import { openEditPlModal } from '../ui/ui.js';
 // Circular — safe (called inside event handlers)
 import { navigate } from './navigation.js';
 import { quickPlayPlaylist } from './detail.js';
+import { getArtistImage } from './home.js';
 
 // Besitzer einer Playlist, sofern es nicht die eigene ist. Navidrome liefert `owner` und `public`
 // in getPlaylists/getPlaylist mit; interessant ist die Angabe nur bei geteilten (oeffentlichen)
@@ -230,6 +231,10 @@ export async function loadStarred(sort = _starredSort) {
   if (searchEl) searchEl.value = '';
   try {
     const r = await api('getStarred2');
+    // getStarred2 liefert Kuenstler und Alben im SELBEN Paket wie die Songs — hier ist also die
+    // Uebersicht "wem folge ich" zu haben, ohne einen zusaetzlichen Aufruf.
+    _renderStarredArtists(r.starred2?.artist || []);
+    _renderStarredAlbums(r.starred2?.album || []);
     let songs = (r.starred2?.song || []).map(s => ({...s, _starred: true}));
     if      (sort === 'newest') songs.sort((a, b) => new Date(b.starred||0) - new Date(a.starred||0));
     else if (sort === 'oldest') songs.sort((a, b) => new Date(a.starred||0) - new Date(b.starred||0));
@@ -238,10 +243,49 @@ export async function loadStarred(sort = _starredSort) {
     else if (sort === 'plays')  songs.sort((a, b) => (b.playCount||0) - (a.playCount||0));
     el.innerHTML = '';
     if(!songs.length) { el.innerHTML = '<div class="empty-state"><div class="icon">⭐</div><p>Noch keine Favoriten</p></div>'; return; }
+    const titel = document.getElementById('starred-songs-title');
+    if (titel) titel.style.display = songs.length ? '' : 'none';
     songs.forEach((s,i) => el.appendChild(makeSongItem(s, i, songs, { noArtistLink: true })));
   } catch(e) { el.innerHTML = `<p style="color:var(--danger)">${e.message}</p>`; }
 }
 
+// Kuenstler, denen man folgt. Die Sortierchips oben gelten fuer die Songliste; hier waere eine
+// eigene Sortierung nur Ballast, also alphabetisch.
+function _renderStarredArtists(artists) {
+  const wrap = document.getElementById('starred-artists-section');
+  if (!wrap) return;
+  wrap.innerHTML = '';
+  if (!artists.length) return;
+  const s = mkSection(`Künstler, denen du folgst (${artists.length})`);
+  const row = document.createElement('div'); row.className = 'scroll-row';
+  [...artists].sort((a,b) => (a.name||'').localeCompare(b.name||'')).forEach(a => {
+    const c = makeCard(dispArtistById(a.id, a.name), `${a.albumCount || 0} Alben`, null, '🎤');
+    c.classList.add('artist-card');
+    c.onclick = () => navigate('artist-detail', { id: a.id, name: a.name });
+    row.appendChild(c);
+    const pin = getArtistOverride(a.id);
+    const setzen = img => {
+      if (!img) return;
+      const art = c.querySelector('.card-art');
+      if (art) art.innerHTML = `<img src="${img}" loading="lazy" onerror="this.parentNode.innerHTML='<div class=\'no-art\'>🎤</div>'">`;
+    };
+    if (pin?.image) setzen(pin.image); else getArtistImage(a.id).then(setzen);
+  });
+  s.appendChild(row); wrap.appendChild(s);
+}
+
+function _renderStarredAlbums(albums) {
+  const wrap = document.getElementById('starred-albums-section');
+  if (!wrap) return;
+  wrap.innerHTML = '';
+  if (!albums.length) return;
+  const s = mkSection(`Gemerkte Alben (${albums.length})`);
+  const row = document.createElement('div'); row.className = 'scroll-row';
+  [...albums].sort((a,b) => new Date(b.starred||0) - new Date(a.starred||0))
+    .forEach(a => row.appendChild(makeAlbumCard(a)));
+  s.appendChild(row); wrap.appendChild(s);
+}
+
 export function filterStarred(val) {
   const q = val.trim().toLowerCase();
   document.querySelectorAll('#starred-songs .song-item').forEach(item => {