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/pages/RandomMix.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { getGenres, SubsonicSong, SubsonicGenre, star, unstar } from '../api/subsonic';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { usePreviewStore } from '../store/previewStore';
 import { useAuthStore } from '../store/authStore';
-import { Play, RefreshCw, ChevronDown, ChevronUp, Heart } from 'lucide-react';
+import { Play, RefreshCw, ChevronDown, ChevronRight, ChevronUp, Heart, Square } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useDragDrop } from '../contexts/DragDropContext';
 import { useIsMobile } from '../hooks/useIsMobile';
@@ -38,6 +39,7 @@ export default function RandomMix() {
   const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
   const currentTrack = usePlayerStore(s => s.currentTrack);
   const isPlaying = usePlayerStore(s => s.isPlaying);
+  const previewingId = usePreviewStore(s => s.previewingId);
   const starredOverrides = usePlayerStore(s => s.starredOverrides);
   const setStarredOverride = usePlayerStore(s => s.setStarredOverride);
   const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
@@ -408,7 +410,7 @@ export default function RandomMix() {
           {genreMixLoading && genreMixSongs.length === 0 ? (
             <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}><div className="spinner" /></div>
           ) : (
-            <div className="tracklist">
+            <div className="tracklist" data-preview-loc="randomMix">
               <div className="tracklist-header" style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 70px 65px' }}>
                 <div></div>
                 <div>{t('randomMix.trackTitle')}</div>
@@ -427,7 +429,7 @@ export default function RandomMix() {
                 return (
                   <div
                     key={song.id}
-                    className={`track-row${isCurrentTrack ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
+                    className={`track-row track-row-with-actions${isCurrentTrack ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
                     style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 70px 65px' }}
                     onClick={e => { if ((e.target as HTMLElement).closest('button, a, input')) return; if (orbitActive) { queueHint(); return; } playTrack(track, queueSongs); }}
                     onDoubleClick={orbitActive ? e => { if ((e.target as HTMLElement).closest('button, a, input')) return; addTrackToOrbit(song.id); } : undefined}
@@ -449,12 +451,40 @@ export default function RandomMix() {
                       document.addEventListener('mouseup', onUp);
                     }}
                   >
-                    <div className={`track-num${isCurrentTrack ? ' track-num-active' : ''}`} style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); if (orbitActive) { queueHint(); return; } playTrack(track, queueSongs); }}>
-                      {isCurrentTrack && 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-play"><Play size={13} fill="currentColor" /></span>
-                      <span className="track-num-number">{idx + 1}</span>
+                    <div className={`track-num${isCurrentTrack ? ' track-num-active' : ''}`}>
+                      {isCurrentTrack && 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">{idx + 1}</span>
+                      )}
+                    </div>
+                    <div className="track-info track-info-suggestion">
+                      <button
+                        type="button"
+                        className="playlist-suggestion-play-btn"
+                        onClick={e => { e.stopPropagation(); if (orbitActive) { queueHint(); return; } playTrack(track, queueSongs); }}
+                        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${previewingId === song.id ? ' is-previewing' : ''}`}
+                        onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'randomMix'); }}
+                        data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
+                        aria-label={previewingId === song.id ? 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>
+                        {previewingId === song.id
+                          ? <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>
-                    <div className="track-info"><span className="track-title">{song.title}</span></div>
                     <div className="track-artist-cell">
                       {artist ? (
                         <button
@@ -498,7 +528,7 @@ export default function RandomMix() {
           <div className="spinner" />
         </div>
       ) : (
-        <div className="tracklist">
+        <div className="tracklist" data-preview-loc="randomMix">
           <div className="tracklist-header" style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 120px 70px 65px' }}>
             <div></div>
             <div>{t('randomMix.trackTitle')}</div>
@@ -527,7 +557,7 @@ export default function RandomMix() {
             return (
               <div
                 key={song.id}
-                className={`track-row${isCurrentTrack ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
+                className={`track-row track-row-with-actions${isCurrentTrack ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
                 style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 120px 70px 65px' }}
                 onClick={e => { if ((e.target as HTMLElement).closest('button, a, input')) return; if (orbitActive) { queueHint(); return; } playTrack(track, queueSongs); }}
                 onDoubleClick={orbitActive ? e => { if ((e.target as HTMLElement).closest('button, a, input')) return; addTrackToOrbit(song.id); } : undefined}
@@ -553,13 +583,39 @@ export default function RandomMix() {
                   document.addEventListener('mouseup', onUp);
                 }}
               >
-                <div className={`track-num${isCurrentTrack ? ' track-num-active' : ''}`} style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); if (orbitActive) { queueHint(); return; } playTrack(track, queueSongs); }}>
-                  {isCurrentTrack && 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-play"><Play size={13} fill="currentColor" /></span>
-                  <span className="track-num-number">{idx + 1}</span>
+                <div className={`track-num${isCurrentTrack ? ' track-num-active' : ''}`}>
+                  {isCurrentTrack && 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">{idx + 1}</span>
+                  )}
                 </div>
 
-                <div className="track-info">
+                <div className="track-info track-info-suggestion">
+                  <button
+                    type="button"
+                    className="playlist-suggestion-play-btn"
+                    onClick={e => { e.stopPropagation(); if (orbitActive) { queueHint(); return; } playTrack(track, queueSongs); }}
+                    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${previewingId === song.id ? ' is-previewing' : ''}`}
+                    onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'randomMix'); }}
+                    data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
+                    aria-label={previewingId === song.id ? 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>
+                    {previewingId === song.id
+                      ? <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>