feat: v1.30.0 — Discord RPC, offline bulk download, artist images, lazy loading, crossfade fix

- Discord Rich Presence (opt-in) — requested by @Bewenben (#49)
- Bulk offline download for playlists and artist discographies — requested by @Apollosport (#54)
- Offline Library filter tabs: All / Albums / Playlists / Discographies with artist grouping
- Artist images on Artists overview (opt-in, off by default) — reported by @Apollosport (#53)
- Image lazy loading via IntersectionObserver (300px margin) across all pages
- Fix: crossfade no longer triggers on manual track skip — reported by @netherguy4 (#35)
- Fix: playlist offline cache now stored as single entry (not per-album)
- Fix: image cache AbortController no longer blocks IDB writes
- Update toast: experimental auto-update hint + GH download link always visible (Win/Mac)
- Queue tech strip: genre removed
- Facebook theme: contrast, opaque badge/back button, queue tab labels
- "Save discography offline" label (was "Download discography")
- Fix: clearing empty playlists via updatePlaylist.view (Axios empty array workaround)
- starredOverrides propagated to AlbumDetail, Favorites, RandomMix

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

src/components/CachedImage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { getCachedUrl } from '../utils/imageCache';
 
 interface CachedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -16,16 +16,33 @@ export function useCachedUrl(fetchUrl: string, cacheKey: string, fallbackToFetch
   const [resolved, setResolved] = useState('');
   useEffect(() => {
     if (!fetchUrl) { setResolved(''); return; }
-    let cancelled = false;
+    const controller = new AbortController();
     setResolved('');
-    getCachedUrl(fetchUrl, cacheKey).then(url => { if (!cancelled) setResolved(url); });
-    return () => { cancelled = true; };
+    getCachedUrl(fetchUrl, cacheKey, controller.signal).then(url => {
+      if (!controller.signal.aborted) setResolved(url);
+    });
+    return () => { controller.abort(); };
   }, [fetchUrl, cacheKey]);
   return fallbackToFetch ? (resolved || fetchUrl) : resolved;
 }
 
 export default function CachedImage({ src, cacheKey, style, onLoad, ...props }: CachedImageProps) {
-  const resolvedSrc = useCachedUrl(src, cacheKey);
+  const [inView, setInView] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    const el = imgRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => { if (entry.isIntersecting) { setInView(true); observer.disconnect(); } },
+      { rootMargin: '300px' }, // start fetching 300px before entering viewport
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  // Pass empty string when not yet in view so useCachedUrl skips the fetch entirely.
+  const resolvedSrc = useCachedUrl(inView ? src : '', cacheKey);
   const [loaded, setLoaded] = useState(false);
 
   // Reset only when the logical image changes (cacheKey), not on fetchUrl→blobUrl
@@ -36,7 +53,8 @@ export default function CachedImage({ src, cacheKey, style, onLoad, ...props }:
 
   return (
     <img
-      src={resolvedSrc}
+      ref={imgRef}
+      src={resolvedSrc || undefined}
       style={{ ...style, opacity: loaded ? 1 : 0, transition: 'opacity 0.15s ease' }}
       onLoad={e => { setLoaded(true); onLoad?.(e); }}
       {...props}