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/components/AlbumTrackList.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Play, Heart, ListPlus, X, ChevronDown, Check, RotateCcw } from 'lucide-react';
+import { Play, ChevronRight, Heart, ListPlus, X, ChevronDown, Check, RotateCcw, Square } from 'lucide-react';
 import { useTracklistColumns, type ColDef } from '../utils/useTracklistColumns';
 import { SubsonicSong } from '../api/subsonic';
 import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
@@ -11,6 +11,7 @@ import { useIsMobile } from '../hooks/useIsMobile';
 import StarRating from './StarRating';
 import { useSelectionStore } from '../store/selectionStore';
 import { useThemeStore } from '../store/themeStore';
+import { usePreviewStore } from '../store/previewStore';
 
 function formatDuration(seconds: number): string {
   const h = Math.floor(seconds / 3600);
@@ -117,6 +118,8 @@ const TrackRow = React.memo(function TrackRow({
   // Fine-grained: only re-renders when THIS row's selection boolean flips.
   const isSelected = useSelectionStore(s => s.selectedIds.has(song.id));
   const isActive = currentTrackId === song.id;
+  // Primitive selector: row only re-renders when *this song's* preview state flips.
+  const isPreviewing = usePreviewStore(s => s.previewingId === song.id);
 
   const renderCell = (colDef: ColDef) => {
     const key = colDef.key as ColKey;
@@ -125,26 +128,51 @@ const TrackRow = React.memo(function TrackRow({
         return (
           <div
             key="num"
-            className={`track-num${isActive ? ' track-num-active' : ''}${isActive && !isPlaying ? ' track-num-paused' : ''}`}
-            style={{ cursor: 'pointer' }}
-            onClick={e => { e.stopPropagation(); onPlaySong(song); }}
+            className={`track-num${isActive ? ' track-num-active' : ''}`}
           >
             <span
               className={`bulk-check${isSelected ? ' checked' : ''}${inSelectMode ? ' bulk-check-visible' : ''}`}
               onClick={e => { e.stopPropagation(); onToggleSelect(song.id, globalIdx, e.shiftKey); }}
             />
-            {isActive && isPlaying && (
+            {isActive && isPlaying ? (
               <span className="track-num-eq">
                 <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
               </span>
+            ) : (
+              <span className="track-num-number">{song.track ?? '—'}</span>
             )}
-            <span className="track-num-play"><Play size={13} fill="currentColor" /></span>
-            <span className="track-num-number">{song.track ?? '—'}</span>
           </div>
         );
       case 'title':
         return (
-          <div key="title" className="track-info">
+          <div key="title" className="track-info track-info-suggestion">
+            <button
+              type="button"
+              className="playlist-suggestion-play-btn"
+              onClick={e => { e.stopPropagation(); onPlaySong(song); }}
+              data-tooltip={t('common.play')}
+              aria-label={t('common.play')}
+            >
+              <Play size={10} fill="currentColor" strokeWidth={0} className="playlist-suggestion-play-icon" />
+            </button>
+            <button
+              type="button"
+              className={`playlist-suggestion-preview-btn${isPreviewing ? ' is-previewing' : ''}`}
+              onClick={e => {
+                e.stopPropagation();
+                usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'albums');
+              }}
+              data-tooltip={isPreviewing ? t('playlists.previewStop') : t('playlists.preview')}
+              aria-label={isPreviewing ? t('playlists.previewStop') : t('playlists.preview')}
+            >
+              <svg className="playlist-suggestion-preview-ring" viewBox="0 0 24 24" aria-hidden="true">
+                <circle cx="12" cy="12" r="10.5" className="playlist-suggestion-preview-ring-track" />
+                <circle cx="12" cy="12" r="10.5" className="playlist-suggestion-preview-ring-progress" />
+              </svg>
+              {isPreviewing
+                ? <Square size={9} fill="currentColor" strokeWidth={0} className="playlist-suggestion-preview-icon" />
+                : <ChevronRight size={14} className="playlist-suggestion-preview-icon playlist-suggestion-preview-icon-play" />}
+            </button>
             <span className="track-title">{song.title}</span>
           </div>
         );
@@ -216,7 +244,7 @@ const TrackRow = React.memo(function TrackRow({
 
   return (
     <div
-      className={`track-row track-row-va${isActive ? ' active' : ''}${isContextMenuSong ? ' context-active' : ''}${isSelected ? ' bulk-selected' : ''}`}
+      className={`track-row track-row-va track-row-with-actions${isActive ? ' active' : ''}${isContextMenuSong ? ' context-active' : ''}${isSelected ? ' bulk-selected' : ''}`}
       style={gridStyle}
       onClick={e => {
         if ((e.target as HTMLElement).closest('button, a, input')) return;
@@ -585,6 +613,7 @@ export default function AlbumTrackList({
     <div
         className="tracklist"
         ref={tracklistRef}
+        data-preview-loc="albums"
         onClick={e => {
           if (inSelectMode && e.target === e.currentTarget) useSelectionStore.getState().clearAll();
         }}

src/components/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { Play, ListPlus, Radio, Heart, Download, ChevronRight, User, Disc3, ListMusic, Plus, Info, Sparkles, Star, Trash2, HeartCrack, Share2, Orbit as OrbitIcon } from 'lucide-react';
+import { Play, ListPlus, Radio, Heart, Download, ChevronRight, ChevronsRight, User, Disc3, ListMusic, Plus, Info, Sparkles, Star, Trash2, HeartCrack, Share2, Orbit as OrbitIcon } from 'lucide-react';
 import { useOrbitStore } from '../store/orbitStore';
 import {
   suggestOrbitTrack,
@@ -1515,7 +1515,7 @@ export default function ContextMenu() {
                 newQueue.splice(currentIdx + 1, 0, song);
                 usePlayerStore.setState({ queue: newQueue });
               })}>
-                <ChevronRight size={14} /> {t('contextMenu.playNext')}
+                <ChevronsRight size={14} /> {t('contextMenu.playNext')}
               </div>
               <div className="context-menu-item" onClick={() => handleAction(() => enqueue([song]))}>
                 <ListPlus size={14} /> {t('contextMenu.addToQueue')}
@@ -1679,7 +1679,7 @@ export default function ContextMenu() {
                 newQueue.splice(currentIdx + 1, 0, song);
                 usePlayerStore.setState({ queue: newQueue });
               })}>
-                <ChevronRight size={14} /> {t('contextMenu.playNext')}
+                <ChevronsRight size={14} /> {t('contextMenu.playNext')}
               </div>
               <div className="context-menu-item" onClick={() => handleAction(() => enqueue([song]))}>
                 <ListPlus size={14} /> {t('contextMenu.addToQueue')}
@@ -1815,7 +1815,7 @@ export default function ContextMenu() {
                 const currentIdx = usePlayerStore.getState().queueIndex;
                 usePlayerStore.getState().enqueueAt(tracks, currentIdx + 1);
               })}>
-                <ChevronRight size={14} /> {t('contextMenu.playNext')}
+                <ChevronsRight size={14} /> {t('contextMenu.playNext')}
               </div>
               <div className="context-menu-item" onClick={() => handleAction(async () => {
                 const albumData = await getAlbum(album.id);