merge: PR #9 — Replay Gain fix (trbn1) + conflict resolution

Merges songToTrack() helper and audio_update_replay_gain Tauri command
from @trbn1 without losing v1.22.0 DnD/queue-management work:

- All track construction sites use songToTrack() for correct replay gain
- psy-drag system (mouse-event DnD) preserved across all components
- enqueueAt() position-aware insertion preserved in QueuePanel
- updatePlaylist / smart-save / active-playlist tracking preserved

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

src/components/AlbumTrackList.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Play, Star } from 'lucide-react';
 import { SubsonicSong } from '../api/subsonic';
-import { Track, usePlayerStore } from '../store/playerStore';
+import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
 import { useDragDrop } from '../contexts/DragDropContext';
 
@@ -83,15 +83,7 @@ export default function AlbumTrackList({
     discs.get(disc)!.push(song);
   });
   const discNums = Array.from(discs.keys()).sort((a, b) => a - b);
-  const isMultiDisc = discNums.length > 1;
-
-  const makeTrack = (song: SubsonicSong): Track => ({
-    id: song.id, title: song.title, artist: song.artist, album: song.album,
-    albumId: song.albumId, artistId: song.artistId, duration: song.duration,
-    coverArt: song.coverArt, track: song.track, year: song.year,
-    bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
-    starred: song.starred, genre: song.genre,
-  });
+   const isMultiDisc = discNums.length > 1;
 
   return (
     <div className="tracklist">
@@ -123,7 +115,7 @@ export default function AlbumTrackList({
               onContextMenu={e => {
                 e.preventDefault();
                 setContextMenuSongId(song.id);
-                onContextMenu(e.clientX, e.clientY, makeTrack(song), 'album-song');
+                onContextMenu(e.clientX, e.clientY, songToTrack(song), 'album-song');
               }}
               role="row"
               onMouseDown={e => {
@@ -134,7 +126,7 @@ export default function AlbumTrackList({
                   if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
                     document.removeEventListener('mousemove', onMove);
                     document.removeEventListener('mouseup', onUp);
-                    psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track: makeTrack(song) }), label: song.title }, me.clientX, me.clientY);
+                    psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track: songToTrack(song) }), label: song.title }, me.clientX, me.clientY);
                   }
                 };
                 const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };

src/components/ContextMenu.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Play, ListPlus, Radio, Star, Download, ChevronRight, User, Disc3, Heart } from 'lucide-react';
 import { lastfmLoveTrack, lastfmUnloveTrack } from '../api/lastfm';
-import { usePlayerStore, Track } from '../store/playerStore';
+import { usePlayerStore, Track, songToTrack } from '../store/playerStore';
 import { SubsonicAlbum, SubsonicArtist, star, unstar, getSimilarSongs2, getTopSongs, buildDownloadUrl, getAlbum } from '../api/subsonic';
 import { useNavigate } from 'react-router-dom';
 import { useAuthStore } from '../store/authStore';
@@ -64,15 +64,11 @@ export default function ContextMenu() {
   const startRadio = async (artistId: string, artistName: string) => {
     try {
       const similar = await getSimilarSongs2(artistId);
-      if (similar.length > 0) {
-        const top = await getTopSongs(artistName);
-        const radioTracks = [...top, ...similar].map(s => ({
-          id: s.id, title: s.title, artist: s.artist, album: s.album,
-          albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-          year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
-        }));
-        playTrack(radioTracks[0], radioTracks);
-      }
+       if (similar.length > 0) {
+         const top = await getTopSongs(artistName);
+         const radioTracks = [...top, ...similar].map(songToTrack);
+         playTrack(radioTracks[0], radioTracks);
+       }
     } catch (e) {
       console.error('Failed to start radio', e);
     }
@@ -129,16 +125,12 @@ export default function ContextMenu() {
               <div className="context-menu-item" onClick={() => handleAction(() => enqueue([song]))}>
                 <ListPlus size={14} /> {t('contextMenu.addToQueue')}
               </div>
-              {type === 'album-song' && (
-                <div className="context-menu-item" onClick={() => handleAction(async () => {
-                  const albumData = await getAlbum(song.albumId);
-                  const tracks = albumData.songs.map(s => ({
-                    id: s.id, title: s.title, artist: s.artist, album: s.album,
-                    albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-                    year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
-                  }));
-                  enqueue(tracks);
-                })}>
+             {type === 'album-song' && (
+                 <div className="context-menu-item" onClick={() => handleAction(async () => {
+                   const albumData = await getAlbum(song.albumId);
+                   const tracks = albumData.songs.map(songToTrack);
+                   enqueue(tracks);
+                 })}>
                   <ListPlus size={14} /> {t('contextMenu.enqueueAlbum')}
                 </div>
               )}

src/components/Hero.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { Play, ListPlus } from 'lucide-react';
 import { getRandomAlbums, SubsonicAlbum, buildCoverArtUrl, coverArtCacheKey, getAlbum } from '../api/subsonic';
 import CachedImage, { useCachedUrl } from './CachedImage';
-import { usePlayerStore } from '../store/playerStore';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
 import { playAlbum } from '../utils/playAlbum';
 
@@ -151,18 +151,14 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
             </button>
             <button
               className="btn btn-surface"
-              onClick={async (e) => {
-                e.stopPropagation();
-                try {
-                  const albumData = await getAlbum(album.id);
-                  const tracks = albumData.songs.map(s => ({
-                    id: s.id, title: s.title, artist: s.artist, album: s.album,
-                    albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-                    year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
-                  }));
-                  usePlayerStore.getState().enqueue(tracks);
-                } catch (_) { }
-              }}
+            onClick={async (e) => {
+                 e.stopPropagation();
+                 try {
+                   const albumData = await getAlbum(album.id);
+                   const tracks = albumData.songs.map(songToTrack);
+                   usePlayerStore.getState().enqueue(tracks);
+                 } catch (_) { }
+               }}
               style={{ padding: '0 1.5rem', fontWeight: 600, fontSize: '0.95rem' }}
               data-tooltip={t('hero.enqueueTooltip')}
             >

src/components/LiveSearch.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Search, Disc3, Users, Music } from 'lucide-react';
 import { search, SearchResults, buildCoverArtUrl } from '../api/subsonic';
-import { usePlayerStore } from '../store/playerStore';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
 
 function debounce(fn: (q: string) => void, ms: number): (q: string) => void {
@@ -57,10 +57,10 @@ export default function LiveSearch() {
   const flatItems = results ? [
     ...(results.artists.map(a => ({ id: a.id, action: () => { navigate(`/artist/${a.id}`); setOpen(false); setQuery(''); } }))),
     ...(results.albums.map(a => ({ id: a.id, action: () => { navigate(`/album/${a.id}`); setOpen(false); setQuery(''); } }))),
-    ...(results.songs.map(s => ({ id: s.id, action: () => {
-      playTrack({ id: s.id, title: s.title, artist: s.artist, album: s.album, albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre });
-      setOpen(false); setQuery('');
-    }}))),
+   ...(results.songs.map(s => ({ id: s.id, action: () => {
+       playTrack(songToTrack(s));
+       setOpen(false); setQuery('');
+     }}))),
   ] : [];
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -175,10 +175,10 @@ export default function LiveSearch() {
                     const i = idx++;
                     return (
                       <button key={s.id} className={`search-result-item${activeIndex === i ? ' active' : ''}`}
-                        onClick={() => {
-                          playTrack({ id: s.id, title: s.title, artist: s.artist, album: s.album, albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre });
-                          setOpen(false); setQuery('');
-                        }}
+                     onClick={() => {
+                           playTrack(songToTrack(s));
+                           setOpen(false); setQuery('');
+                         }}
                         role="option" aria-selected={activeIndex === i}>
                         <div className="search-result-icon"><Music size={14} /></div>
                         <div>

src/components/QueuePanel.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import { Track, usePlayerStore } from '../store/playerStore';
+import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
 import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check } from 'lucide-react';
 import { buildCoverArtUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, updatePlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
 import { useEffect } from 'react';
@@ -151,10 +151,6 @@ function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (
   );
 }
 
-// Module-level fallback for fromIdx — survives the dragend-before-drop race on
-// macOS WKWebView AND the dataTransfer.getData('') bug on Windows WebView2.
-let _dragFromIdx: number | null = null;
-
 export default function QueuePanel() {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -201,18 +197,13 @@ export default function QueuePanel() {
     return () => document.removeEventListener('mousedown', handle);
   }, [showCrossfadePopover]);
 
-  const [draggedIdx, setDraggedIdx] = useState<number | null>(null);
-  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
-  const isDraggingInternalRef = useRef(false);
-  // Refs mirror state so drop handler always reads fresh values even when
-  // macOS WKWebView fires dragend before drop (spec violation).
-  const draggedIdxRef = useRef<number | null>(null);
-  const dragOverIdxRef = useRef<number | null>(null);
+  // Tracks which queue index is being psy-dragged for opacity visual feedback
+  const psyDragFromIdxRef = useRef<number | null>(null);
 
   const queueListRef = useRef<HTMLDivElement>(null);
   const asideRef = useRef<HTMLElement>(null);
 
-  const { isDragging: isPsyDragging } = useDragDrop();
+  const { isDragging: isPsyDragging, startDrag } = useDragDrop();
 
   useEffect(() => {
     if (!isPsyDragging) {
@@ -221,8 +212,6 @@ export default function QueuePanel() {
     }
   }, [isPsyDragging]);
 
-  const [externalDragOver, setExternalDragOver] = useState(false);
-  const externalDragCounterRef = useRef(0);
   const [externalDropTarget, setExternalDropTarget] = useState<{ idx: number; before: boolean } | null>(null);
   const externalDropTargetRef = useRef<{ idx: number; before: boolean } | null>(null);
 
@@ -239,13 +228,18 @@ export default function QueuePanel() {
       try { parsedData = JSON.parse(detail.data); } catch { return; }
 
       const dropTarget = externalDropTargetRef.current;
-      const insertIdx = dropTarget
-        ? (dropTarget.before ? dropTarget.idx : dropTarget.idx + 1)
-        : usePlayerStore.getState().queue.length;
       externalDropTargetRef.current = null;
       setExternalDropTarget(null);
 
-      if (parsedData.type === 'song') {
+      const insertIdx = dropTarget
+        ? (dropTarget.before ? dropTarget.idx : dropTarget.idx + 1)
+        : usePlayerStore.getState().queue.length;
+
+      if (parsedData.type === 'queue_reorder') {
+        const fromIdx: number = parsedData.index;
+        psyDragFromIdxRef.current = null;
+        if (fromIdx !== insertIdx) reorderQueue(fromIdx, insertIdx);
+      } else if (parsedData.type === 'song') {
         enqueueAt([parsedData.track], insertIdx);
       } else if (parsedData.type === 'album') {
         const albumData = await getAlbum(parsedData.id);
@@ -293,128 +287,11 @@ export default function QueuePanel() {
     setActivePlaylist(null);
   };
 
-  const onDragStart = (e: React.DragEvent, index: number) => {
-    isDraggingInternalRef.current = true;
-    draggedIdxRef.current = index;
-    _dragFromIdx = index;
-    setDraggedIdx(index);
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'queue_reorder', index }));
-  };
-
-  const onDragEnterItem = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy';
-  };
-
-  const onDragOverItem = (e: React.DragEvent, index: number) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy';
-    dragOverIdxRef.current = index;
-    setDragOverIdx(index);
-    if (!isDraggingInternalRef.current) {
-      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      const before = e.clientY < rect.top + rect.height / 2;
-      const target = { idx: index, before };
-      externalDropTargetRef.current = target;
-      setExternalDropTarget(target);
-    }
-  };
-
-  const onDragEnd = () => {
-    setDraggedIdx(null);
-    setDragOverIdx(null);
-    setExternalDropTarget(null);
-    externalDropTargetRef.current = null;
-    isDraggingInternalRef.current = false;
-    draggedIdxRef.current = null;
-    dragOverIdxRef.current = null;
-    // _dragFromIdx intentionally NOT cleared here — drop fires after dragend on
-    // macOS WKWebView, so we need the value to survive into onDropQueue.
-    // It is cleared in onDropQueue after use instead.
-  };
-
-  const onDropQueue = async (e: React.DragEvent) => {
-    e.preventDefault();
-
-    // Snapshot drop target before clearing visual state
-    const droppedTarget = externalDropTargetRef.current;
-
-    // Clear visual state immediately
-    isDraggingInternalRef.current = false;
-    draggedIdxRef.current = null;
-    dragOverIdxRef.current = null;
-    setDraggedIdx(null);
-    setDragOverIdx(null);
-    externalDragCounterRef.current = 0;
-    setExternalDragOver(false);
-    externalDropTargetRef.current = null;
-    setExternalDropTarget(null);
-
-    let parsedData: any = null;
-    try {
-      const raw = e.dataTransfer.getData('text/plain');
-      if (raw) parsedData = JSON.parse(raw);
-    } catch { /* ignore */ }
-
-    if (parsedData?.type === 'queue_reorder' || _dragFromIdx !== null) {
-      // fromIdx: prefer dataTransfer value; fall back to module-level var for
-      // Windows WebView2 where getData() can return '' in the drop handler.
-      const fromIdx: number = parsedData?.index ?? _dragFromIdx!;
-      _dragFromIdx = null;
-
-      // toIdx: calculate from drop coordinates — avoids all ref timing issues.
-      // Works even when dragend fires before drop (macOS WKWebView / Windows WebView2).
-      let toIdx = queue.length;
-      if (queueListRef.current) {
-        const items = queueListRef.current.querySelectorAll<HTMLElement>('[data-queue-idx]');
-        for (let i = 0; i < items.length; i++) {
-          const rect = items[i].getBoundingClientRect();
-          if (e.clientY < rect.top + rect.height / 2) {
-            toIdx = parseInt(items[i].dataset.queueIdx!);
-            break;
-          }
-        }
-      }
-
-      if (fromIdx !== toIdx) reorderQueue(fromIdx, toIdx);
-      return;
-    }
-
-    // External drop (song / album dragged from elsewhere in the app)
-    _dragFromIdx = null;
-    if (!parsedData) return;
-
-    const insertIdx = droppedTarget
-      ? (droppedTarget.before ? droppedTarget.idx : droppedTarget.idx + 1)
-      : usePlayerStore.getState().queue.length;
-
-    if (parsedData.type === 'song') {
-      enqueueAt([parsedData.track], insertIdx);
-    } else if (parsedData.type === 'album') {
-      const albumData = await getAlbum(parsedData.id);
-      const tracks: Track[] = albumData.songs.map(s => ({
-        id: s.id, title: s.title, artist: s.artist, album: s.album,
-        albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-        year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
-      }));
-      enqueueAt(tracks, insertIdx);
-    }
-  };
 
   return (
     <aside
       ref={asideRef}
-      className={`queue-panel${(externalDragOver || isPsyDragging) ? ' queue-drop-active' : ''}`}
-      onDragEnter={e => {
-        e.preventDefault();
-        e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy';
-        if (!isDraggingInternalRef.current) {
-          externalDragCounterRef.current++;
-          setExternalDragOver(true);
-        }
-      }}
-      onDragOver={e => { e.preventDefault(); e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy'; }}
+      className={`queue-panel${isPsyDragging ? ' queue-drop-active' : ''}`}
       onMouseMove={e => {
         if (!isPsyDragging || !queueListRef.current) return;
         const items = queueListRef.current.querySelectorAll<HTMLElement>('[data-queue-idx]');
@@ -436,18 +313,7 @@ export default function QueuePanel() {
           setExternalDropTarget(null);
         }
       }}
-      onDragLeave={e => {
-        if (!isDraggingInternalRef.current) {
-          externalDragCounterRef.current--;
-          if (externalDragCounterRef.current === 0) {
-            setExternalDragOver(false);
-            externalDropTargetRef.current = null;
-            setExternalDropTarget(null);
-          }
-        }
-      }}
-      onDrop={onDropQueue}
-      style={{ 
+      style={{
         borderLeftWidth: isQueueVisible ? 1 : 0
       }}
     >
@@ -615,22 +481,11 @@ export default function QueuePanel() {
         ) : (
           queue.map((track, idx) => {
             const isPlaying = idx === queueIndex;
-            const isDragging = draggedIdx === idx;
-            const isDragOver = dragOverIdx === idx;
-            
-            // Highlight above or below depending on index direction
+
             let dragStyle: React.CSSProperties = {};
-            if (isDragging) {
+            if (isPsyDragging && psyDragFromIdxRef.current === idx) {
               dragStyle = { opacity: 0.4, background: 'var(--bg-hover)' };
-            } else if (isDragOver && draggedIdx !== null) {
-              // Internal reorder indicator
-              if (draggedIdx > idx) {
-                dragStyle = { borderTop: '2px solid var(--accent)', paddingTop: '6px', marginTop: '-2px' };
-              } else {
-                dragStyle = { borderBottom: '2px solid var(--accent)', paddingBottom: '6px', marginBottom: '-2px' };
-              }
-            } else if (externalDropTarget?.idx === idx && draggedIdx === null) {
-              // External drop insertion indicator
+            } else if (isPsyDragging && externalDropTarget?.idx === idx) {
               if (externalDropTarget.before) {
                 dragStyle = { borderTop: '2px solid var(--accent)', paddingTop: '6px', marginTop: '-2px' };
               } else {
@@ -648,11 +503,26 @@ export default function QueuePanel() {
                   e.preventDefault();
                   usePlayerStore.getState().openContextMenu(e.clientX, e.clientY, track, 'queue-item', idx);
                 }}
-                draggable
-                onDragStart={(e) => onDragStart(e, idx)}
-                onDragEnter={(e) => onDragEnterItem(e)}
-                onDragOver={(e) => onDragOverItem(e, idx)}
-                onDragEnd={onDragEnd}
+                onMouseDown={(e) => {
+                  if (e.button !== 0) return;
+                  e.preventDefault();
+                  const startX = e.clientX;
+                  const startY = e.clientY;
+                  const onMove = (me: MouseEvent) => {
+                    if (Math.abs(me.clientX - startX) > 5 || Math.abs(me.clientY - startY) > 5) {
+                      document.removeEventListener('mousemove', onMove);
+                      document.removeEventListener('mouseup', onUp);
+                      psyDragFromIdxRef.current = idx;
+                      startDrag({ data: JSON.stringify({ type: 'queue_reorder', index: idx }), label: track.title }, me.clientX, me.clientY);
+                    }
+                  };
+                  const onUp = () => {
+                    document.removeEventListener('mousemove', onMove);
+                    document.removeEventListener('mouseup', onUp);
+                  };
+                  document.addEventListener('mousemove', onMove);
+                  document.addEventListener('mouseup', onUp);
+                }}
                 style={dragStyle}
               >
                 <div className="queue-item-info">
@@ -716,11 +586,7 @@ export default function QueuePanel() {
           onLoad={async (id, name) => {
             try {
               const data = await getPlaylist(id);
-              const tracks: Track[] = data.songs.map(s => ({
-                id: s.id, title: s.title, artist: s.artist, album: s.album,
-                albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-                year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
-              }));
+              const tracks: Track[] = data.songs.map(songToTrack);
               if (tracks.length > 0) {
                 clearQueue();
                 playTrack(tracks[0], tracks);