feat(audio): rust track preview engine + inline play/preview buttons (#392)

* feat(audio): rust preview engine with secondary sink

Adds a parallel rodio Sink on the existing OutputStream for 30s
mid-track previews. Two new Tauri commands (audio_preview_play,
audio_preview_stop) plus three events (audio:preview-start /
-progress / -end). The main sink is paused with Sink::pause() and
auto-resumed on preview end iff it was playing beforehand.


* feat(playlists): migrate suggestion preview to rust audio engine

Replaces the HTML5 <audio> path with the new rust preview engine.
previewStore mirrors the engine's start/progress/end events so any
tracklist row can render preview UI from a single source of truth.

Spacebar redirects to stopPreview while a preview plays, hardware
mediakeys are silently dropped (Q5), and tray clicks cancel the
preview before forwarding the original action.


* feat(albums): inline play + preview buttons in tracklist rows

Track number stays static on hover instead of swapping to a play
icon — the dedicated Play and Preview buttons in the title cell
take over click-to-play and click-to-preview. Active+playing rows
keep the eq-bars (also on hover), active+paused rows fall back to
the static accent-coloured number.

Pilot for the wider rollout to other tracklists.

* feat(tracklists): roll out inline play + preview buttons

Mirrors the AlbumTrackList pilot across the remaining track-row
based lists: PlaylistDetail main tracks, Favorites, ArtistDetail
top tracks, RandomMix (both genre-mix and filtered-songs lists).

Track number stays static, the dedicated Play + Preview buttons
in the title cell take over click-to-play and click-to-preview.

* feat(settings): track preview toggle + configurable position and duration

Adds an opt-out switch and two sliders to Settings → Audio:
start position (0-90 % of track length, default 33 %) and preview
duration (5-60 s, default 30 s). The progress-ring animation
follows the duration via a CSS variable so the visual matches the
engine's auto-stop. Disabling the feature hides every inline
preview button via a single root-level data attribute, no per-row
conditional rendering required.

i18n keys added in all 8 locales.

* fix(audio): cancel preview when main playback (re)starts

audio_play, audio_play_radio, audio_resume and audio_stop did not
know about the parallel preview sink, so clicking Play on a track
that was currently being previewed left the preview running on top
of the freshly started main playback. New helper clears the resume
flag, bumps the preview generation, drops the sink and emits an
'interrupted' end event before any of those commands touches the
main sink.


* feat(settings): per-location track preview toggles

Splits the single trackPreviewsEnabled toggle into a master + 6 per-location
sub-toggles (suggestions, albums, playlists, favorites, artist, randomMix).
Master remains the kill switch; sub-toggles are only honoured when master
is on. Each tracklist container is marked with `data-preview-loc="<id>"` and
hidden via scoped CSS when the matching root attribute is "off".
startPreview now takes a location argument so the store can guard logic too.
i18n added in all 8 locales.


* fix(contextmenu): use ChevronsRight for Play Next to distinguish from preview

src/App.tsx

@@ -107,6 +107,7 @@ import { useEqStore } from './store/eqStore';
 import { useKeybindingsStore, matchInAppBinding, buildInAppBinding } from './store/keybindingsStore';
 import { useGlobalShortcutsStore } from './store/globalShortcutsStore';
 import { useZipDownloadStore } from './store/zipDownloadStore';
+import { usePreviewStore } from './store/previewStore';
 import ZipDownloadOverlay from './components/ZipDownloadOverlay';
 import PasteClipboardHandler from './components/PasteClipboardHandler';
 
@@ -563,6 +564,22 @@ function TauriEventBridge() {
     return () => { unlisten?.(); };
   }, []);
 
+  // Track-preview lifecycle: Rust audio engine emits start/progress/end. The
+  // store mirrors them so any tracklist row can render its preview UI.
+  useEffect(() => {
+    const unlistenFns: Array<() => void> = [];
+    listen<string>('audio:preview-start', e => {
+      usePreviewStore.getState()._onStart(e.payload);
+    }).then(u => unlistenFns.push(u));
+    listen<{ id: string; elapsed: number; duration: number }>('audio:preview-progress', e => {
+      usePreviewStore.getState()._onProgress(e.payload.id, e.payload.elapsed, e.payload.duration);
+    }).then(u => unlistenFns.push(u));
+    listen<{ id: string; reason: string }>('audio:preview-end', e => {
+      usePreviewStore.getState()._onEnd(e.payload.id);
+    }).then(u => unlistenFns.push(u));
+    return () => { unlistenFns.forEach(fn => fn()); };
+  }, []);
+
   // Audio output device changed (Bluetooth headphones, USB DAC, etc.)
   // The Rust device-watcher has already reopened the stream on the new device
   // and dropped the old Sink, so we just need to restart playback.
@@ -884,10 +901,24 @@ function TauriEventBridge() {
       if (!action) return;
       e.preventDefault();
 
+      // While a track preview is running, Spacebar pauses the preview rather
+      // than the main player (which is already paused under it). Skip / prev
+      // also cancel the preview so the main player resumes cleanly.
+      const previewing = usePreviewStore.getState().previewingId !== null;
+
       switch (action) {
-        case 'play-pause':        togglePlay(); break;
-        case 'next':              next(); break;
-        case 'prev':              previous(); break;
+        case 'play-pause':
+          if (previewing) usePreviewStore.getState().stopPreview();
+          else togglePlay();
+          break;
+        case 'next':
+          if (previewing) usePreviewStore.getState().stopPreview();
+          next();
+          break;
+        case 'prev':
+          if (previewing) usePreviewStore.getState().stopPreview();
+          previous();
+          break;
         case 'volume-up':         setVolume(Math.min(1, usePlayerStore.getState().volume + 0.05)); break;
         case 'volume-down':       setVolume(Math.max(0, usePlayerStore.getState().volume - 0.05)); break;
         case 'seek-forward': {
@@ -928,16 +959,36 @@ function TauriEventBridge() {
     const unlisten: Array<() => void> = [];
 
     const setup = async () => {
+      // Hardware mediakeys are silently dropped while a preview is playing —
+      // matches the cucadmuh-flow expectation that headphone buttons don't
+      // accidentally interrupt or switch the previewed track.
+      const ifNoPreview = (fn: () => void) => () => {
+        if (usePreviewStore.getState().previewingId === null) fn();
+      };
       const handlers: Array<[string, () => void]> = [
-        ['media:play-pause',  () => togglePlay()],
-        ['media:play',        () => { const s = usePlayerStore.getState(); if (!s.isPlaying) s.resume(); }],
-        ['media:pause',       () => { const s = usePlayerStore.getState(); if (s.isPlaying) s.pause(); }],
-        ['media:next',        () => next()],
-        ['media:prev',        () => previous()],
-        ['tray:play-pause',   () => togglePlay()],
-        ['tray:next',         () => next()],
-        ['tray:previous',     () => previous()],
-        ['media:stop',        () => usePlayerStore.getState().stop()],
+        ['media:play-pause',  ifNoPreview(() => togglePlay())],
+        ['media:play',        ifNoPreview(() => { const s = usePlayerStore.getState(); if (!s.isPlaying) s.resume(); })],
+        ['media:pause',       ifNoPreview(() => { const s = usePlayerStore.getState(); if (s.isPlaying) s.pause(); })],
+        ['media:next',        ifNoPreview(() => next())],
+        ['media:prev',        ifNoPreview(() => previous())],
+        // Tray clicks are user-driven UI, so they fall through to the keyboard
+        // semantics: cancel the preview, then act.
+        ['tray:play-pause',   () => {
+          if (usePreviewStore.getState().previewingId !== null) {
+            usePreviewStore.getState().stopPreview();
+          } else {
+            togglePlay();
+          }
+        }],
+        ['tray:next',         () => {
+          if (usePreviewStore.getState().previewingId !== null) usePreviewStore.getState().stopPreview();
+          next();
+        }],
+        ['tray:previous',     () => {
+          if (usePreviewStore.getState().previewingId !== null) usePreviewStore.getState().stopPreview();
+          previous();
+        }],
+        ['media:stop',        ifNoPreview(() => usePlayerStore.getState().stop())],
         ['media:volume-up',   () => { const s = usePlayerStore.getState(); s.setVolume(Math.min(1, s.volume + 0.05)); }],
         ['media:volume-down', () => { const s = usePlayerStore.getState(); s.setVolume(Math.max(0, s.volume - 0.05)); }],
       ];
@@ -1101,6 +1152,34 @@ export default function App() {
     document.documentElement.setAttribute('data-font', font);
   }, [font]);
 
+  // Hide all inline track-preview buttons when the user opts out — single
+  // CSS hook (`html[data-track-previews="off"]`) instead of conditional
+  // rendering in every tracklist. Per-location toggles use additional
+  // attributes `data-track-previews-{location}` consumed by scoped selectors.
+  const trackPreviewsEnabled = useAuthStore(s => s.trackPreviewsEnabled);
+  const trackPreviewLocations = useAuthStore(s => s.trackPreviewLocations);
+  const trackPreviewDurationSec = useAuthStore(s => s.trackPreviewDurationSec);
+  useEffect(() => {
+    document.documentElement.setAttribute(
+      'data-track-previews',
+      trackPreviewsEnabled ? 'on' : 'off',
+    );
+  }, [trackPreviewsEnabled]);
+  useEffect(() => {
+    const root = document.documentElement;
+    (Object.keys(trackPreviewLocations) as Array<keyof typeof trackPreviewLocations>).forEach(loc => {
+      root.setAttribute(`data-track-previews-${loc.toLowerCase()}`, trackPreviewLocations[loc] ? 'on' : 'off');
+    });
+  }, [trackPreviewLocations]);
+  // Drive the SVG progress-ring keyframe duration from the same setting that
+  // governs the engine's auto-stop timer so both finish in lockstep.
+  useEffect(() => {
+    document.documentElement.style.setProperty(
+      '--preview-duration',
+      `${trackPreviewDurationSec}s`,
+    );
+  }, [trackPreviewDurationSec]);
+
   // Main window only: push playback state to mini window + handle control events.
   useEffect(() => {
     if (isMiniWindow) return;