fix(artist-info): id-gate fetchers, share ArtistCard, square hero (#739)

* fix(artist-info): id-gate fetcher tuples, reuse ArtistCard on ArtistDetail

The cache-mismatch bug PR #732 fixed in `NowPlayingInfo.tsx` had the same
shape inside `ArtistCard` on the NowPlaying page: `useNowPlayingFetchers`
returned `artistInfo` for the previously-current artist for one render
after `artistId` changed, and `CachedImage` persisted that mismatched
blob under the new `artistInfo:<new-id>:hero` key in IndexedDB —
sticky "previous artist" image on every subsequent track.

Apply the same `{ id, value }` tuple pattern from PR #732 inside the
hooks themselves so every consumer is safe by construction:

- `useNowPlayingFetchers`: gate `artistInfo`, `songMeta`, `albumData`,
  `discography` on id-match at the return. Late-arriving resolves for
  a stale id can no longer overwrite the displayed value.
- `useArtistDetailData`: same for `info`. Required because the
  `ArtistDetail` bio card now uses `CachedImage` via the shared
  `ArtistCard` (previously raw `<img>`, no persistence hazard).

Unify `ArtistDetail`'s inline "About the Artist" block onto the same
shared `ArtistCard` so there is one source of truth for hero / bio /
similar rendering. New optional props: `onNavigate?` (omitted on
`/artist/:id` since the user is already there), `coverFallback`
(coverArt fallback when artistInfo has no hero image),
`hideArtistName` (avoid duplicating the hero name), `hideSimilar`
(ArtistDetail has its own similar-artists section).

Tests cover the gating contract for both hooks (incl. stale-resolve
race) and the `ArtistCard` prop matrix.

* fix(artist-image): square queue info hero, drop artist-avatar glow

- Queue Info bar's artist hero was rendered in a 16:10 wrap with
  `object-fit: cover`, so portrait photos lost top/bottom equally
  while landscape ones lost the sides — perceived as cropped even
  on roughly square sources. Set the wrap to 1:1 so the crop is
  symmetric and matches the typical square framing of artist
  photography.

- `ArtistDetail` extracted the cover's accent colour on every image
  load and rendered a 36px / 8px-spread `boxShadow` ring around the
  avatar. Drop the glow, the state, the one-shot reset effect, the
  prop-passing through `ArtistDetailHero`, and the now-orphaned
  `extractCoverColors` import on this page. `extractCoverColors`
  itself stays in place (still used by `useFsDynamicAccent`).

* docs(changelog): artist-info image fix extension + UI tweaks (PR #739)

src/pages/ArtistDetail.tsx

@@ -24,11 +24,9 @@ import LastfmIcon from '../components/LastfmIcon';
 import { invalidateCoverArt } from '../utils/imageCache';
 import { showToast } from '../utils/ui/toast';
 import { copyEntityShareLink } from '../utils/share/copyEntityShareLink';
-import { extractCoverColors } from '../utils/ui/dynamicColors';
 import StarRating from '../components/StarRating';
 import { useArtistLayoutStore, type ArtistSectionId } from '../store/artistLayoutStore';
 
-import { sanitizeHtml } from '../utils/sanitizeHtml';
 import { useArtistDetailData } from '../hooks/useArtistDetailData';
 import { useArtistSimilarArtists } from '../hooks/useArtistSimilarArtists';
 import {
@@ -40,6 +38,7 @@ import {
 import ArtistDetailHero from '../components/artistDetail/ArtistDetailHero';
 import ArtistDetailTopTracks from '../components/artistDetail/ArtistDetailTopTracks';
 import ArtistDetailSimilarArtists from '../components/artistDetail/ArtistDetailSimilarArtists';
+import ArtistCard from '../components/nowPlaying/ArtistCard';
 import { usePerfProbeFlags } from '../utils/perf/perfFlags';
 import { VirtualCardGrid } from '../components/VirtualCardGrid';
 
@@ -59,12 +58,10 @@ export default function ArtistDetail() {
   const [openedLink, setOpenedLink] = useState<string | null>(null);
   const { similarArtists, similarLoading } = useArtistSimilarArtists(artist, info, artistInfoLoading);
   const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [bioExpanded, setBioExpanded] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [similarCollapsed, setSimilarCollapsed] = useState(true);
   const isMobile = useIsMobile();
   const [coverRevision, setCoverRevision] = useState(0);
-  const [avatarGlow, setAvatarGlow] = useState('');
   /** True after header CachedImage onError — avoid `display:none` on the img (breaks recovery). */
   const [headerCoverFailed, setHeaderCoverFailed] = useState(false);
   const imageInputRef = useRef<HTMLInputElement>(null);
@@ -94,10 +91,6 @@ export default function ArtistDetail() {
 
   const [artistEntityRating, setArtistEntityRating] = useState(0);
 
-  useEffect(() => {
-    setAvatarGlow('');
-  }, [id]);
-
   useEffect(() => {
     if (!id) return;
     if (artist && artist.id === id) setArtistEntityRating(artist.userRating ?? 0);
@@ -295,8 +288,6 @@ export default function ArtistDetail() {
         coverRevision={coverRevision}
         headerCoverFailed={headerCoverFailed}
         setHeaderCoverFailed={setHeaderCoverFailed}
-        avatarGlow={avatarGlow}
-        setAvatarGlow={setAvatarGlow}
         lightboxOpen={lightboxOpen}
         setLightboxOpen={setLightboxOpen}
       />
@@ -307,33 +298,15 @@ export default function ArtistDetail() {
       {renderableSectionIds.map(sectionId => {
         switch (sectionId) {
           case 'bio': return (
-            <div
-              key="bio"
-              className="np-info-card artist-bio-card"
-              style={{ marginTop: sectionMt('bio') }}
-            >
-              <div className="np-card-header">
-                <h3 className="np-card-title">{t('nowPlaying.aboutArtist')}</h3>
-              </div>
-              <div className="np-artist-bio-row">
-                {(info?.largeImageUrl || coverId) && (
-                  <img
-                    src={info?.largeImageUrl || artistCover80FallbackSrc}
-                    alt={artist.name}
-                    className="np-artist-thumb"
-                    onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
-                  />
-                )}
-                <div className="np-bio-wrap">
-                  <div
-                    className={`np-bio-text${bioExpanded ? ' expanded' : ''}`}
-                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(info!.biography!) }}
-                  />
-                  <button className="np-bio-toggle" onClick={() => setBioExpanded(v => !v)}>
-                    {bioExpanded ? t('nowPlaying.showLess') : t('nowPlaying.readMore')}
-                  </button>
-                </div>
-              </div>
+            <div key="bio" style={{ marginTop: sectionMt('bio') }}>
+              <ArtistCard
+                artistName={artist.name}
+                artistId={id}
+                artistInfo={info}
+                hideArtistName
+                hideSimilar
+                coverFallback={coverId ? { src: artistCover80FallbackSrc, cacheKey: coverArtCacheKey(coverId, 80) } : undefined}
+              />
             </div>
           );