perf: reduce CPU usage and unify next-track buffering settings

- Throttle audio:progress from 100ms to 500ms; WaveformSeek and
  FsSeekbar use imperative DOM updates instead of React re-renders
- Fix all usePlayerStore() calls without selectors across pages and
  components (useShallow / individual selectors throughout)
- Remove filter:blur and transform:scale from Hero, AlbumDetail and
  FullscreenPlayer backgrounds — eliminated expensive software
  compositing layers on WebKitGTK
- Replace translate3d with 2D translate in FS mesh and portrait
  animations; remove will-change:transform from mesh blobs
- Move Hot Cache section from Storage tab to Audio tab; group Preload
  and Hot Cache under a shared 'Next Track Buffering' section with a
  mutual-exclusivity note and auto-disable logic
- Add 'off' toggle to Preload (replaces Off button with toggle switch);
  enabling either method now automatically disables the other

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

src/components/ContextMenu.tsx

@@ -4,6 +4,7 @@ import LastfmIcon from './LastfmIcon';
 import StarRating from './StarRating';
 import { lastfmLoveTrack, lastfmUnloveTrack } from '../api/lastfm';
 import { usePlayerStore, Track, songToTrack } from '../store/playerStore';
+import { useShallow } from 'zustand/react/shallow';
 import { SubsonicAlbum, SubsonicArtist, star, unstar, getSimilarSongs2, getTopSongs, buildDownloadUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, updatePlaylist, SubsonicPlaylist, setRating } from '../api/subsonic';
 import { useNavigate } from 'react-router-dom';
 import { useAuthStore } from '../store/authStore';
@@ -175,7 +176,24 @@ function AlbumToPlaylistSubmenu({ albumId, onDone }: { albumId: string; onDone:
 
 export default function ContextMenu() {
   const { t } = useTranslation();
-  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack, lastfmLovedCache, setLastfmLovedForSong, starredOverrides, setStarredOverride, openSongInfo, userRatingOverrides, setUserRatingOverride } = usePlayerStore();
+  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack, lastfmLovedCache, setLastfmLovedForSong, starredOverrides, setStarredOverride, openSongInfo, userRatingOverrides, setUserRatingOverride } = usePlayerStore(
+    useShallow(s => ({
+      contextMenu: s.contextMenu,
+      closeContextMenu: s.closeContextMenu,
+      playTrack: s.playTrack,
+      enqueue: s.enqueue,
+      queue: s.queue,
+      currentTrack: s.currentTrack,
+      removeTrack: s.removeTrack,
+      lastfmLovedCache: s.lastfmLovedCache,
+      setLastfmLovedForSong: s.setLastfmLovedForSong,
+      starredOverrides: s.starredOverrides,
+      setStarredOverride: s.setStarredOverride,
+      openSongInfo: s.openSongInfo,
+      userRatingOverrides: s.userRatingOverrides,
+      setUserRatingOverride: s.setUserRatingOverride,
+    }))
+  );
   const auth = useAuthStore();
   const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);
   const navigate = useNavigate();

src/components/FullscreenPlayer.tsx

@@ -192,34 +192,50 @@ const FsPortrait = memo(function FsPortrait({ url }: { url: string }) {
   );
 });
 
-// ─── Full-width seekbar (isolated — re-renders every tick) ────────────────────
+// ─── Full-width seekbar — imperative DOM updates, zero React re-renders on tick ─
 const FsSeekbar = memo(function FsSeekbar({ duration }: { duration: number }) {
-  const progress    = usePlayerStore(s => s.progress);
-  const buffered    = usePlayerStore(s => s.buffered);
-  const currentTime = usePlayerStore(s => s.currentTime);
   const seek        = usePlayerStore(s => s.seek);
+  const timeRef     = useRef<HTMLSpanElement>(null);
+  const playedRef   = useRef<HTMLDivElement>(null);
+  const bufRef      = useRef<HTMLDivElement>(null);
+  const inputRef    = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const s = usePlayerStore.getState();
+    const pct = s.progress * 100;
+    if (timeRef.current)   timeRef.current.textContent  = formatTime(s.currentTime);
+    if (playedRef.current) playedRef.current.style.width = `${pct}%`;
+    if (bufRef.current)    bufRef.current.style.width    = `${Math.max(pct, s.buffered * 100)}%`;
+    if (inputRef.current)  inputRef.current.value        = String(s.progress);
+
+    return usePlayerStore.subscribe(state => {
+      const p = state.progress * 100;
+      if (timeRef.current)   timeRef.current.textContent  = formatTime(state.currentTime);
+      if (playedRef.current) playedRef.current.style.width = `${p}%`;
+      if (bufRef.current)    bufRef.current.style.width    = `${Math.max(p, state.buffered * 100)}%`;
+      if (inputRef.current)  inputRef.current.value        = String(state.progress);
+    });
+  }, []);
 
   const handleSeek = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => seek(parseFloat(e.target.value)),
     [seek]
   );
 
-  const pct = progress * 100;
-  const buf = Math.max(pct, buffered * 100);
-
   return (
     <div className="fs-seekbar-wrap">
       <div className="fs-seekbar-times">
-        <span>{formatTime(currentTime)}</span>
+        <span ref={timeRef} />
         <span>{formatTime(duration)}</span>
       </div>
       <div className="fs-seekbar">
         <div className="fs-seekbar-bg" />
-        <div className="fs-seekbar-buf" style={{ width: `${buf}%` }} />
-        <div className="fs-seekbar-played" style={{ width: `${pct}%` }} />
+        <div className="fs-seekbar-buf" ref={bufRef} />
+        <div className="fs-seekbar-played" ref={playedRef} />
         <input
+          ref={inputRef}
           type="range" min={0} max={1} step={0.001}
-          value={progress}
+          defaultValue={0}
           onChange={handleSeek}
           aria-label="seek"
         />

src/components/Hero.tsx

@@ -40,7 +40,6 @@ function HeroBg({ url }: { url: string }) {
           style={{
             backgroundImage: `url(${layer.url})`,
             opacity: layer.visible ? 1 : 0,
-            filter: layer.visible ? 'blur(0px)' : 'blur(18px)',
           }}
           aria-hidden="true"
         />

src/components/PlayerBar.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import {
   Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music,
   Square, Repeat, Repeat1, Maximize2, SlidersVertical, X, Heart, MicVocal, Cast
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
+import { useShallow } from 'zustand/react/shallow';
 import { useAuthStore } from '../store/authStore';
 import { buildCoverArtUrl, coverArtCacheKey, star, unstar, setRating } from '../api/subsonic';
 import CachedImage from './CachedImage';
@@ -25,6 +26,21 @@ function formatTime(seconds: number): string {
   return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
+// Renders the playback clock without ever causing PlayerBar to re-render.
+// Updates the DOM directly via an imperative store subscription.
+const PlaybackTime = memo(function PlaybackTime({ className }: { className?: string }) {
+  const spanRef = useRef<HTMLSpanElement>(null);
+  useEffect(() => {
+    if (spanRef.current) {
+      spanRef.current.textContent = formatTime(usePlayerStore.getState().currentTime);
+    }
+    return usePlayerStore.subscribe(state => {
+      if (spanRef.current) spanRef.current.textContent = formatTime(state.currentTime);
+    });
+  }, []);
+  return <span className={className} ref={spanRef} />;
+});
+
 export default function PlayerBar() {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -32,15 +48,37 @@ export default function PlayerBar() {
   const [showVolPct, setShowVolPct] = useState(false);
   const showLyrics   = useLyricsStore(s => s.showLyrics);
   const activeTab    = useLyricsStore(s => s.activeTab);
+  // currentTime is intentionally excluded — PlaybackTime handles it via direct DOM update.
   const {
-    currentTrack, currentRadio, isPlaying, currentTime, volume,
+    currentTrack, currentRadio, isPlaying, volume,
     togglePlay, next, previous, setVolume,
     stop, toggleRepeat, repeatMode, toggleFullscreen,
     lastfmLoved, toggleLastfmLove,
     isQueueVisible, toggleQueue,
     starredOverrides, setStarredOverride,
     userRatingOverrides, setUserRatingOverride,
-  } = usePlayerStore();
+  } = usePlayerStore(useShallow(s => ({
+    currentTrack: s.currentTrack,
+    currentRadio: s.currentRadio,
+    isPlaying: s.isPlaying,
+    volume: s.volume,
+    togglePlay: s.togglePlay,
+    next: s.next,
+    previous: s.previous,
+    setVolume: s.setVolume,
+    stop: s.stop,
+    toggleRepeat: s.toggleRepeat,
+    repeatMode: s.repeatMode,
+    toggleFullscreen: s.toggleFullscreen,
+    lastfmLoved: s.lastfmLoved,
+    toggleLastfmLove: s.toggleLastfmLove,
+    isQueueVisible: s.isQueueVisible,
+    toggleQueue: s.toggleQueue,
+    starredOverrides: s.starredOverrides,
+    setStarredOverride: s.setStarredOverride,
+    userRatingOverrides: s.userRatingOverrides,
+    setUserRatingOverride: s.setUserRatingOverride,
+  })));
   const { lastfmSessionKey } = useAuthStore();
 
   const isRadio = !!currentRadio;
@@ -241,7 +279,7 @@ export default function PlayerBar() {
               </>
             ) : (
               <>
-                <span className="player-time">{formatTime(currentTime)}</span>
+                <PlaybackTime className="player-time" />
                 <div className="player-waveform-wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                   <span className="radio-live-badge">{t('radio.live')}</span>
                 </div>
@@ -251,7 +289,7 @@ export default function PlayerBar() {
           </>
         ) : (
           <>
-            <span className="player-time">{formatTime(currentTime)}</span>
+            <PlaybackTime className="player-time" />
             <div className="player-waveform-wrap">
               <WaveformSeek trackId={currentTrack?.id} />
             </div>

src/components/SongInfoModal.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
+import { useShallow } from 'zustand/react/shallow';
 import { getSong, SubsonicSong } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
 
@@ -33,7 +34,9 @@ function Divider() {
 
 export default function SongInfoModal() {
   const { t } = useTranslation();
-  const { songInfoModal, closeSongInfo } = usePlayerStore();
+  const { songInfoModal, closeSongInfo } = usePlayerStore(
+    useShallow(s => ({ songInfoModal: s.songInfoModal, closeSongInfo: s.closeSongInfo }))
+  );
   const [song, setSong] = useState<SubsonicSong | null>(null);
   const [loading, setLoading] = useState(false);
 

src/components/WaveformSeek.tsx

@@ -784,6 +784,15 @@ export function SeekbarPreview({
 }
 
 // ── main component ────────────────────────────────────────────────────────────
+//
+// Architecture:
+//   Static styles  (waveform, bar, …): drawn directly in the Zustand subscription
+//     callback — no React re-renders, no rAF loop.  2 draws/s at the 500 ms
+//     Rust interval.  shadowBlur + 500 canvas bars on a software-rendered
+//     WebKitGTK context is too expensive for a continuous 60 fps loop.
+//   Animated styles (pulsewave, particletrail, …): rAF loop at 60 fps, reads
+//     refs that the subscription keeps up-to-date.
+//   Drag: draws synchronously in seekToFraction for 1:1 responsiveness.
 
 interface Props {
   trackId: string | undefined;
@@ -792,35 +801,48 @@ interface Props {
 export default function WaveformSeek({ trackId }: Props) {
   const canvasRef    = useRef<HTMLCanvasElement>(null);
   const heightsRef   = useRef<Float32Array | null>(null);
-  const progressRef  = useRef(0);
-  const bufferedRef  = useRef(0);
+  const progressRef  = useRef(usePlayerStore.getState().progress);
+  const bufferedRef  = useRef(usePlayerStore.getState().buffered);
   const isDragging   = useRef(false);
   const animStateRef = useRef<AnimState>(makeAnimState());
 
   const [hoverPct, setHoverPct] = useState<number | null>(null);
 
-  const progress     = usePlayerStore(s => s.progress);
-  const buffered     = usePlayerStore(s => s.buffered);
   const seek         = usePlayerStore(s => s.seek);
   const duration     = usePlayerStore(s => s.currentTrack?.duration ?? 0);
   const seekbarStyle = useAuthStore(s => s.seekbarStyle);
 
-  progressRef.current = progress;
-  bufferedRef.current = buffered;
+  // Ref so the subscription callback (closed over at mount) can read the
+  // current style without stale-closure issues.
+  const styleRef = useRef(seekbarStyle);
+  styleRef.current = seekbarStyle;
 
   useEffect(() => {
     heightsRef.current = trackId ? makeHeights(trackId) : null;
   }, [trackId]);
 
-  // Static styles: redraw on progress / buffered / track changes
+  // Imperative subscription — no React re-renders from progress changes.
+  // Static styles draw here; animated styles only update refs.
+  useEffect(() => {
+    return usePlayerStore.subscribe((state, prev) => {
+      if (state.progress === prev.progress && state.buffered === prev.buffered) return;
+      progressRef.current = state.progress;
+      bufferedRef.current = state.buffered;
+      if (!ANIMATED_STYLES.has(styleRef.current)) {
+        const canvas = canvasRef.current;
+        if (canvas) drawSeekbar(canvas, styleRef.current, heightsRef.current, state.progress, state.buffered);
+      }
+    });
+  }, []);
+
+  // Initial draw for static styles when style or track changes.
   useEffect(() => {
     if (ANIMATED_STYLES.has(seekbarStyle)) return;
-    if (canvasRef.current) {
-      drawSeekbar(canvasRef.current, seekbarStyle, heightsRef.current, progress, buffered);
-    }
-  }, [progress, buffered, trackId, seekbarStyle]);
+    const canvas = canvasRef.current;
+    if (canvas) drawSeekbar(canvas, seekbarStyle, heightsRef.current, progressRef.current, bufferedRef.current);
+  }, [seekbarStyle, trackId]);
 
-  // Animated styles: rAF loop
+  // rAF loop — animated styles only.
   useEffect(() => {
     if (!ANIMATED_STYLES.has(seekbarStyle)) return;
     const canvas = canvasRef.current;
@@ -829,21 +851,14 @@ export default function WaveformSeek({ trackId }: Props) {
     let rafId: number;
     const tick = () => {
       animStateRef.current.time += 0.016;
-      drawSeekbar(
-        canvas,
-        seekbarStyle,
-        heightsRef.current,
-        progressRef.current,
-        bufferedRef.current,
-        animStateRef.current,
-      );
+      drawSeekbar(canvas, seekbarStyle, heightsRef.current, progressRef.current, bufferedRef.current, animStateRef.current);
       rafId = requestAnimationFrame(tick);
     };
     rafId = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(rafId);
   }, [seekbarStyle]);
 
-  // Resize observer
+  // Resize observer.
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -859,12 +874,23 @@ export default function WaveformSeek({ trackId }: Props) {
   const seekRef = useRef(seek);
   seekRef.current = seek;
 
+  // Seek to a 0–1 fraction: draw immediately for 1:1 responsiveness, then
+  // let the store + Rust catch up asynchronously.
+  const seekToFraction = (fraction: number) => {
+    progressRef.current = fraction;
+    const canvas = canvasRef.current;
+    if (canvas && !ANIMATED_STYLES.has(styleRef.current)) {
+      drawSeekbar(canvas, styleRef.current, heightsRef.current, fraction, bufferedRef.current);
+    }
+    seekRef.current(fraction);
+  };
+
   useEffect(() => {
     const seekFromX = (clientX: number) => {
       const canvas = canvasRef.current;
       if (!canvas || !trackIdRef.current) return;
       const rect = canvas.getBoundingClientRect();
-      seekRef.current(Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)));
+      seekToFraction(Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)));
     };
     const onMove = (e: MouseEvent) => { if (isDragging.current) seekFromX(e.clientX); };
     const onUp   = () => { isDragging.current = false; };
@@ -892,7 +918,7 @@ export default function WaveformSeek({ trackId }: Props) {
         onMouseDown={e => {
           isDragging.current = true;
           const rect = e.currentTarget.getBoundingClientRect();
-          seekRef.current(Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)));
+          seekToFraction(Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)));
         }}
         onMouseMove={e => {
           if (!trackId) return;