feat: v1.22.0 — Queue Management, DnD Overhaul, Seek & Waveform Fixes

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

CHANGELOG.md

@@ -5,6 +5,35 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.22.0] - 2026-03-30
+
+### Added
+
+- **Queue — Active Playlist Tracking** *(Beta)* ⚠️: The queue now remembers which playlist was last loaded or saved. The playlist name appears as a subtitle below the queue title. The save button smart-saves: if an active playlist is set, it updates that playlist directly without opening a modal. If no playlist is active, the save modal opens as before.
+- **Queue — Themed Delete Confirmation** *(Beta)* ⚠️: Deleting a playlist now shows a styled in-app confirmation dialog matching the current theme, replacing the unstyled native browser `confirm()` dialog.
+- **Queue — Load Modal Live Filter** *(Beta)* ⚠️: The playlist load modal now has a live filter input at the top — typing narrows the playlist list in real time.
+- **Drag & Drop — Precise Insertion** *(Beta)* ⚠️: Songs and albums dragged into the queue can now be dropped at any position between existing items. A blue insertion line shows exactly where the track will land. Previously all drops appended to the end of the queue.
+- **Drag & Drop — Slim Ghost** *(Beta)* ⚠️: The drag ghost is now a compact single-line chip (cover thumbnail + title) instead of the full album card or track row. Consistent for both song and album drags.
+
+### Fixed
+
+- **Seek flash after debounce** *(contributed by [@nullobject](https://github.com/nullobject))*: After a seek the waveform briefly flashed back to the pre-seek position when the Rust `audio:progress` event arrived before the seek completed. A `seekTarget` guard now blocks stale progress ticks until the engine catches up.
+- **Waveform seekbar jitter** *(contributed by [@nullobject](https://github.com/nullobject))*: The seekbar width changed on every progress tick because player time updates caused the waveform canvas container to reflow. The canvas now has an explicit stable width so time label changes no longer affect its layout.
+- **Drag & Drop — text selection and grid auto-scroll during drag**: Dragging album cards or track rows caused the browser to begin a text selection and auto-scroll grid rows horizontally. All drag `onMouseDown` handlers now call `preventDefault()` and the DragDropContext uses `{ passive: false }` to suppress selection during mouse moves.
+- **Drag & Drop — forbidden cursor on KDE Plasma**: Replaced the HTML5 `dragstart`/`dragend` system with a pure mouse-event DnD pipeline (`DragDropContext`). The WebKitGTK forbidden-cursor artefact on KDE Plasma no longer appears during drags.
+
+### Changed
+
+- **Settings — Contributors**: [@nullobject](https://github.com/nullobject) added for seek & waveform fixes.
+
+### Theme Fixes
+
+- **Powerslave**: Connection indicators (Last.fm / Server name) dimmed to match sidebar tone. Back button in album details now white on dark overlay. Tech strip (codec/bitrate) in queue uses dark Nile-blue background instead of sandstone. Artist name in album hero changed to Nile-blue `#050E19`.
+- **North Park**: Back button in album details now visible (was dark brown on dark overlay).
+- **Dark Side of the Moon**: Album detail year/genre/info brightened from `#555555` to `#888888`. Connection indicators brightened for legibility on near-black sidebar.
+
+---
+
 ## [1.21.0] - 2026-03-29
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "psysonic",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "private": true,
   "scripts": {
     "dev": "vite",

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Psysonic",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "identifier": "dev.psysonic.player",
   "build": {
     "beforeDevCommand": "npm run dev",

src/App.tsx

@@ -29,6 +29,7 @@ import NowPlayingPage from './pages/NowPlaying';
 import FullscreenPlayer from './components/FullscreenPlayer';
 import ContextMenu from './components/ContextMenu';
 import DownloadFolderModal from './components/DownloadFolderModal';
+import { DragDropProvider } from './contexts/DragDropContext';
 import TooltipPortal from './components/TooltipPortal';
 import ConnectionIndicator from './components/ConnectionIndicator';
 import LastfmIndicator from './components/LastfmIndicator';
@@ -162,6 +163,33 @@ function AppShell() {
     };
   }, [isDraggingQueue, handleMouseMove, handleMouseUp]);
 
+  // ── Global DnD fix for Linux/WebKitGTK ──────────────────────────
+  // WebKitGTK (used by Tauri on Linux) requires the document itself to
+  // accept drags via preventDefault() on dragover/dragenter.  Without
+  // this, the webview shows a "forbidden" cursor for all in-app HTML5
+  // drag-and-drop because it never sees a valid drop target at the
+  // document level.  This is harmless on Windows/macOS where DnD already
+  // works correctly.
+  useEffect(() => {
+    const allow = (e: DragEvent) => {
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+    };
+    // Prevent the webview from navigating when something (e.g. a file
+    // from the OS file manager) is dropped on the document body.
+    const blockDrop = (e: DragEvent) => { e.preventDefault(); };
+
+    document.addEventListener('dragover', allow);
+    document.addEventListener('dragenter', allow);
+    document.addEventListener('drop', blockDrop);
+
+    return () => {
+      document.removeEventListener('dragover', allow);
+      document.removeEventListener('dragenter', allow);
+      document.removeEventListener('drop', blockDrop);
+    };
+  }, []);
+
   return (
     <div 
       className="app-shell"
@@ -445,7 +473,9 @@ export default function App() {
           path="/*"
           element={
             <RequireAuth>
+              <DragDropProvider>
                 <AppShell />
+              </DragDropProvider>
             </RequireAuth>
           }
         />

src/api/subsonic.ts

@@ -392,6 +392,11 @@ export async function createPlaylist(name: string, songIds?: string[]): Promise<
   await api('createPlaylist.view', params);
 }
 
+export async function updatePlaylist(id: string, songIds: string[]): Promise<void> {
+  // createPlaylist with playlistId replaces the existing playlist's songs (Subsonic API 1.14+)
+  await api('createPlaylist.view', { playlistId: id, songId: songIds });
+}
+
 export async function deletePlaylist(id: string): Promise<void> {
   await api('deletePlaylist.view', { id });
 }

src/components/AlbumCard.tsx

@@ -7,6 +7,7 @@ import { useOfflineStore } from '../store/offlineStore';
 import { useAuthStore } from '../store/authStore';
 import CachedImage from './CachedImage';
 import { playAlbum } from '../utils/playAlbum';
+import { useDragDrop } from '../contexts/DragDropContext';
 
 interface AlbumCardProps {
   album: SubsonicAlbum;
@@ -22,6 +23,7 @@ function AlbumCard({ album }: AlbumCardProps) {
     return meta.trackIds.every(tid => !!s.tracks[`${serverId}:${tid}`]);
   });
   const coverUrl = album.coverArt ? buildCoverArtUrl(album.coverArt, 300) : '';
+  const psyDrag = useDragDrop();
 
   return (
     <div
@@ -35,14 +37,20 @@ function AlbumCard({ album }: AlbumCardProps) {
         e.preventDefault();
         openContextMenu(e.clientX, e.clientY, album, 'album');
       }}
-      draggable
-      onDragStart={e => {
-        e.dataTransfer.effectAllowed = 'copy';
-        e.dataTransfer.setData('text/plain', JSON.stringify({
-          type: 'album',
-          id: album.id,
-          name: album.name,
-        }));
+      onMouseDown={e => {
+        if (e.button !== 0) return;
+        e.preventDefault();
+        const sx = e.clientX, sy = e.clientY;
+        const onMove = (me: MouseEvent) => {
+          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: 'album', id: album.id, name: album.name }), label: album.name, coverUrl: coverUrl || undefined }, me.clientX, me.clientY);
+          }
+        };
+        const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
       }}
     >
       <div className="album-card-cover">

src/components/AlbumTrackList.tsx

@@ -3,6 +3,7 @@ import { Play, Star } from 'lucide-react';
 import { SubsonicSong } from '../api/subsonic';
 import { Track, usePlayerStore } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
+import { useDragDrop } from '../contexts/DragDropContext';
 
 function formatDuration(seconds: number): string {
   const m = Math.floor(seconds / 60);
@@ -69,6 +70,7 @@ export default function AlbumTrackList({
   const [hoveredSongId, setHoveredSongId] = useState<string | null>(null);
   const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
   const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
+  const psyDrag = useDragDrop();
   useEffect(() => {
     if (!contextMenuOpen) setContextMenuSongId(null);
   }, [contextMenuOpen]);
@@ -124,10 +126,20 @@ export default function AlbumTrackList({
                 onContextMenu(e.clientX, e.clientY, makeTrack(song), 'album-song');
               }}
               role="row"
-              draggable
-              onDragStart={e => {
-                e.dataTransfer.effectAllowed = 'copy';
-                e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track: makeTrack(song) }));
+              onMouseDown={e => {
+                if (e.button !== 0) return;
+                e.preventDefault();
+                const sx = e.clientX, sy = e.clientY;
+                const onMove = (me: MouseEvent) => {
+                  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);
+                  }
+                };
+                const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                document.addEventListener('mousemove', onMove);
+                document.addEventListener('mouseup', onUp);
               }}
             >
               <div

src/components/QueuePanel.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useRef } from 'react';
 import { Track, usePlayerStore } from '../store/playerStore';
-import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic } from 'lucide-react';
-import { buildCoverArtUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
+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';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useAuthStore } from '../store/authStore';
 import { useLyricsStore } from '../store/lyricsStore';
+import { useDragDrop } from '../contexts/DragDropContext';
 import LyricsPane from './LyricsPane';
 
 function formatTime(seconds: number): string {
@@ -59,10 +60,12 @@ function SavePlaylistModal({ onClose, onSave }: { onClose: () => void, onSave: (
   );
 }
 
-function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (id: string) => void }) {
+function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (id: string, name: string) => void }) {
   const { t } = useTranslation();
   const [playlists, setPlaylists] = useState<SubsonicPlaylist[]>([]);
   const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState('');
+  const [confirmDelete, setConfirmDelete] = useState<{ id: string; name: string } | null>(null);
 
   const fetchPlaylists = () => {
     setLoading(true);
@@ -80,28 +83,44 @@ function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (
   }, []);
 
   const handleDelete = async (id: string, name: string) => {
-    if (confirm(t('queue.deleteConfirm', { name }))) {
-      await deletePlaylist(id);
+    setConfirmDelete({ id, name });
+  };
+
+  const confirmDeletePlaylist = async () => {
+    if (!confirmDelete) return;
+    await deletePlaylist(confirmDelete.id);
+    setConfirmDelete(null);
     fetchPlaylists();
-    }
   };
 
   return (
+    <>
     <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true">
       <div className="modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '400px' }}>
         <button className="modal-close" onClick={onClose}><X size={18} /></button>
         <h3 style={{ marginBottom: '1rem', fontFamily: 'var(--font-display)' }}>{t('queue.loadPlaylist')}</h3>
+        {!loading && playlists.length > 0 && (
+          <input
+            type="text"
+            className="live-search-field"
+            placeholder={t('queue.filterPlaylists')}
+            value={filter}
+            onChange={e => setFilter(e.target.value)}
+            autoFocus
+            style={{ width: '100%', marginBottom: '0.75rem', padding: '8px 14px' }}
+          />
+        )}
         {loading ? (
           <p style={{ color: 'var(--text-muted)' }}>{t('queue.loading')}</p>
         ) : playlists.length === 0 ? (
           <p style={{ color: 'var(--text-muted)' }}>{t('queue.noPlaylists')}</p>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxHeight: '300px', overflowY: 'auto' }}>
-            {playlists.map(p => (
+            {playlists.filter(p => p.name.toLowerCase().includes(filter.toLowerCase())).map(p => (
               <div key={p.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', background: 'var(--ctp-surface1)', borderRadius: 'var(--radius-md)' }}>
                 <span style={{ fontWeight: 500 }} className="truncate" data-tooltip={p.name}>{p.name}</span>
                 <div style={{ display: 'flex', gap: '4px', flexShrink: 0 }}>
-                  <button className="nav-btn" onClick={() => onLoad(p.id)} data-tooltip={t('queue.load')} style={{ width: '28px', height: '28px', background: 'transparent' }}><Play size={14} /></button>
+                  <button className="nav-btn" onClick={() => onLoad(p.id, p.name)} data-tooltip={t('queue.load')} style={{ width: '28px', height: '28px', background: 'transparent' }}><Play size={14} /></button>
                   <button className="nav-btn" onClick={() => handleDelete(p.id, p.name)} data-tooltip={t('queue.delete')} style={{ width: '28px', height: '28px', background: 'transparent', color: 'var(--ctp-red)' }}><Trash2 size={14} /></button>
                 </div>
               </div>
@@ -110,6 +129,25 @@ function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (
         )}
       </div>
     </div>
+
+    {confirmDelete && (
+      <div className="modal-overlay" onClick={() => setConfirmDelete(null)} role="dialog" aria-modal="true">
+        <div className="modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '360px' }}>
+          <button className="modal-close" onClick={() => setConfirmDelete(null)}><X size={18} /></button>
+          <h3 style={{ marginBottom: '0.5rem', fontFamily: 'var(--font-display)' }}>{t('queue.delete')}</h3>
+          <p style={{ color: 'var(--text-secondary)', marginBottom: '1.25rem', lineHeight: 1.5 }}>
+            {t('queue.deleteConfirm', { name: confirmDelete.name })}
+          </p>
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
+            <button className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>{t('queue.cancel')}</button>
+            <button className="btn btn-primary" style={{ background: 'var(--danger)', borderColor: 'var(--danger)' }} onClick={confirmDeletePlaylist}>
+              {t('queue.delete')}
+            </button>
+          </div>
+        </div>
+      </div>
+    )}
+    </>
   );
 }
 
@@ -132,6 +170,7 @@ export default function QueuePanel() {
   const reorderQueue = usePlayerStore(s => s.reorderQueue);
   const shuffleQueue = usePlayerStore(s => s.shuffleQueue);
   const enqueue = usePlayerStore(s => s.enqueue);
+  const enqueueAt = usePlayerStore(s => s.enqueueAt);
   const contextMenu = usePlayerStore(s => s.contextMenu);
 
   const crossfadeEnabled = useAuthStore(s => s.crossfadeEnabled);
@@ -171,13 +210,78 @@ export default function QueuePanel() {
   const dragOverIdxRef = useRef<number | null>(null);
 
   const queueListRef = useRef<HTMLDivElement>(null);
+  const asideRef = useRef<HTMLElement>(null);
 
+  const { isDragging: isPsyDragging } = useDragDrop();
+
+  useEffect(() => {
+    if (!isPsyDragging) {
+      externalDropTargetRef.current = null;
+      setExternalDropTarget(null);
+    }
+  }, [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);
+
+  // ── Mouse-event DnD: listen for psy-drop custom events ─────────
+  useEffect(() => {
+    const aside = asideRef.current;
+    if (!aside) return;
+
+    const onPsyDrop = async (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail?.data) return;
+
+      let parsedData: any = null;
+      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') {
+        enqueueAt([parsedData.track], insertIdx);
+      } else if (parsedData.type === 'album') {
+        const albumData = await getAlbum(parsedData.id);
+        const tracks: Track[] = albumData.songs.map((s: any) => ({
+          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);
+      }
+    };
+
+    aside.addEventListener('psy-drop', onPsyDrop);
+    return () => aside.removeEventListener('psy-drop', onPsyDrop);
+  }, [enqueueAt]);
+
+  const [activePlaylist, setActivePlaylist] = useState<{ id: string; name: string } | null>(null);
+  const [saveState, setSaveState] = useState<'idle' | 'saving' | 'saved'>('idle');
   const [saveModalOpen, setSaveModalOpen] = useState(false);
   const [loadModalOpen, setLoadModalOpen] = useState(false);
 
-  const handleSave = () => {
+  const handleSave = async () => {
     if (queue.length === 0) return;
+    if (activePlaylist) {
+      setSaveState('saving');
+      try {
+        await updatePlaylist(activePlaylist.id, queue.map(t => t.id));
+        setSaveState('saved');
+        setTimeout(() => setSaveState('idle'), 1500);
+      } catch (e) {
+        console.error('Failed to update playlist', e);
+        setSaveState('idle');
+      }
+    } else {
       setSaveModalOpen(true);
+    }
   };
 
   const handleLoad = () => {
@@ -186,6 +290,7 @@ export default function QueuePanel() {
 
   const handleClear = () => {
     clearQueue();
+    setActivePlaylist(null);
   };
 
   const onDragStart = (e: React.DragEvent, index: number) => {
@@ -207,11 +312,20 @@ export default function QueuePanel() {
     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;
@@ -223,12 +337,19 @@ export default function QueuePanel() {
   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 {
@@ -263,8 +384,13 @@ export default function QueuePanel() {
     // 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') {
-      enqueue([parsedData.track]);
+      enqueueAt([parsedData.track], insertIdx);
     } else if (parsedData.type === 'album') {
       const albumData = await getAlbum(parsedData.id);
       const tracks: Track[] = albumData.songs.map(s => ({
@@ -272,21 +398,61 @@ export default function QueuePanel() {
         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);
+      enqueueAt(tracks, insertIdx);
     }
   };
 
   return (
     <aside
-      className="queue-panel"
-      onDragEnter={e => { e.preventDefault(); e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy'; }}
+      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'; }}
+      onMouseMove={e => {
+        if (!isPsyDragging || !queueListRef.current) return;
+        const items = queueListRef.current.querySelectorAll<HTMLElement>('[data-queue-idx]');
+        let found = false;
+        for (let i = 0; i < items.length; i++) {
+          const rect = items[i].getBoundingClientRect();
+          if (e.clientY >= rect.top && e.clientY <= rect.bottom) {
+            const before = e.clientY < rect.top + rect.height / 2;
+            const idx = parseInt(items[i].dataset.queueIdx!);
+            const target = { idx, before };
+            externalDropTargetRef.current = target;
+            setExternalDropTarget(target);
+            found = true;
+            break;
+          }
+        }
+        if (!found) {
+          externalDropTargetRef.current = null;
+          setExternalDropTarget(null);
+        }
+      }}
+      onDragLeave={e => {
+        if (!isDraggingInternalRef.current) {
+          externalDragCounterRef.current--;
+          if (externalDragCounterRef.current === 0) {
+            setExternalDragOver(false);
+            externalDropTargetRef.current = null;
+            setExternalDropTarget(null);
+          }
+        }
+      }}
       onDrop={onDropQueue}
       style={{ 
         borderLeftWidth: isQueueVisible ? 1 : 0
       }}
     >
       <div className="queue-header">
+        <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0, flex: 1 }}>
         <div style={{ display: 'flex', alignItems: 'baseline', gap: '8px', minWidth: 0 }}>
           <h2 style={{ fontSize: '16px', fontWeight: 700, margin: 0, flexShrink: 0 }}>{t('queue.title')}</h2>
           {queue.length > 0 && (() => {
@@ -315,6 +481,13 @@ export default function QueuePanel() {
             );
           })()}
         </div>
+        {activePlaylist && (
+          <div className="truncate" style={{ fontSize: '11px', color: 'var(--text-muted)', marginTop: '2px', display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <ListMusic size={10} style={{ flexShrink: 0 }} />
+            <span className="truncate">{activePlaylist.name}</span>
+          </div>
+        )}
+        </div>
       </div>
 
       {currentTrack && (
@@ -362,8 +535,14 @@ export default function QueuePanel() {
         <button className="queue-round-btn" onClick={() => shuffleQueue()} disabled={queue.length < 2} data-tooltip={t('queue.shuffle')} aria-label={t('queue.shuffle')}>
           <Shuffle size={13} />
         </button>
-        <button className="queue-round-btn" onClick={handleSave} data-tooltip={t('queue.savePlaylist')} aria-label={t('queue.savePlaylist')}>
-          <Save size={13} />
+        <button
+          className={`queue-round-btn${saveState === 'saved' ? ' active' : ''}`}
+          onClick={handleSave}
+          disabled={saveState === 'saving'}
+          data-tooltip={activePlaylist ? `${t('queue.updatePlaylist')}: ${activePlaylist.name}` : t('queue.savePlaylist')}
+          aria-label={t('queue.savePlaylist')}
+        >
+          {saveState === 'saved' ? <Check size={13} /> : <Save size={13} />}
         </button>
         <button className="queue-round-btn" onClick={handleLoad} data-tooltip={t('queue.loadPlaylist')} aria-label={t('queue.loadPlaylist')}>
           <FolderOpen size={13} />
@@ -444,11 +623,19 @@ export default function QueuePanel() {
             if (isDragging) {
               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
+              if (externalDropTarget.before) {
+                dragStyle = { borderTop: '2px solid var(--accent)', paddingTop: '6px', marginTop: '-2px' };
+              } else {
+                dragStyle = { borderBottom: '2px solid var(--accent)', paddingBottom: '6px', marginBottom: '-2px' };
+              }
             }
 
             return (
@@ -512,6 +699,9 @@ export default function QueuePanel() {
           onSave={async (name) => {
             try {
               await createPlaylist(name, queue.map(t => t.id));
+              const playlists = await getPlaylists();
+              const created = playlists.find(p => p.name === name);
+              if (created) setActivePlaylist({ id: created.id, name: created.name });
               setSaveModalOpen(false);
             } catch (e) {
               console.error('Failed to save playlist', e);
@@ -523,7 +713,7 @@ export default function QueuePanel() {
       {loadModalOpen && (
         <LoadPlaylistModal
           onClose={() => setLoadModalOpen(false)}
-          onLoad={async (id) => { 
+          onLoad={async (id, name) => {
             try {
               const data = await getPlaylist(id);
               const tracks: Track[] = data.songs.map(s => ({
@@ -535,6 +725,7 @@ export default function QueuePanel() {
                 clearQueue();
                 playTrack(tracks[0], tracks);
               }
+              setActivePlaylist({ id, name });
               setLoadModalOpen(false);
             } catch (e) {
               console.error('Failed to load playlist', e);

src/contexts/DragDropContext.tsx

@@ -0,0 +1,233 @@
+/**
+ * Mouse-event-based Drag & Drop system.
+ *
+ * Replaces the HTML5 Drag & Drop API for cross-component drags (song → queue,
+ * album → queue) because WebKitGTK on Linux always shows a "forbidden" cursor
+ * during native HTML5 DnD and there is no way to fix it at the GTK level
+ * without breaking DnD entirely.
+ *
+ * This system uses mousedown / mousemove / mouseup which keeps cursor control
+ * in CSS and avoids the native DnD subsystem completely.
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+// ── Types ─────────────────────────────────────────────────────────
+export interface DragPayload {
+  /** Serialised JSON identical to what was previously in dataTransfer */
+  data: string;
+  /** Label shown on the ghost element */
+  label: string;
+  /** Optional cover URL for the ghost */
+  coverUrl?: string;
+}
+
+interface DragState {
+  payload: DragPayload | null;
+  position: { x: number; y: number };
+}
+
+interface DragDropContextValue {
+  /** Begin a drag.  Called from mousedown (after threshold). */
+  startDrag: (payload: DragPayload, x: number, y: number) => void;
+  /** Current drag payload (null when idle). */
+  payload: DragPayload | null;
+  /** Whether a drag is in progress. */
+  isDragging: boolean;
+}
+
+const Ctx = createContext<DragDropContextValue>({
+  startDrag: () => {},
+  payload: null,
+  isDragging: false,
+});
+
+export const useDragDrop = () => useContext(Ctx);
+
+// ── Ghost overlay ─────────────────────────────────────────────────
+function DragGhost({ state }: { state: DragState }) {
+  if (!state.payload) return null;
+  const { label, coverUrl } = state.payload;
+  return createPortal(
+    <div
+      style={{
+        position: 'fixed',
+        left: state.position.x + 12,
+        top: state.position.y - 20,
+        pointerEvents: 'none',
+        zIndex: 99999,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        background: 'var(--bg-card, #1e1e2e)',
+        border: '1px solid var(--border, rgba(255,255,255,0.1))',
+        borderRadius: 8,
+        padding: '6px 12px',
+        boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
+        color: 'var(--text-primary, #fff)',
+        fontSize: 13,
+        fontWeight: 500,
+        maxWidth: 280,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        opacity: 0.95,
+        userSelect: 'none',
+      }}
+    >
+      {coverUrl && (
+        <img
+          src={coverUrl}
+          alt=""
+          style={{
+            width: 28,
+            height: 28,
+            borderRadius: 4,
+            objectFit: 'cover',
+            flexShrink: 0,
+          }}
+        />
+      )}
+      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+        {label}
+      </span>
+    </div>,
+    document.body,
+  );
+}
+
+// ── Provider ──────────────────────────────────────────────────────
+export function DragDropProvider({ children }: { children: React.ReactNode }) {
+  const [state, setState] = useState<DragState>({
+    payload: null,
+    position: { x: 0, y: 0 },
+  });
+
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  const startDrag = useCallback(
+    (payload: DragPayload, x: number, y: number) => {
+      // Clear any text selection the browser may have started during the
+      // threshold detection phase (mousedown → mousemove before startDrag).
+      window.getSelection()?.removeAllRanges();
+      setState({ payload, position: { x, y } });
+    },
+    [],
+  );
+
+  // Global mousemove + mouseup listeners (only while dragging)
+  useEffect(() => {
+    if (!state.payload) return;
+
+    const onMove = (e: MouseEvent) => {
+      // preventDefault stops the browser from treating the mouse movement as
+      // a text-selection drag, which causes element highlighting and
+      // horizontal auto-scroll in grid containers.
+      e.preventDefault();
+      setState((prev) => ({ ...prev, position: { x: e.clientX, y: e.clientY } }));
+    };
+
+    const onUp = () => {
+      // Clear any residual selection (from the pre-threshold phase).
+      window.getSelection()?.removeAllRanges();
+
+      // Dispatch a custom event so drop targets can react.
+      // The payload is in `detail`.
+      const evt = new CustomEvent('psy-drop', {
+        bubbles: true,
+        detail: stateRef.current.payload,
+      });
+      // Find element under cursor
+      const el = document.elementFromPoint(
+        stateRef.current.position.x,
+        stateRef.current.position.y,
+      );
+      if (el) el.dispatchEvent(evt);
+
+      setState({ payload: null, position: { x: 0, y: 0 } });
+    };
+
+    document.addEventListener('mousemove', onMove, { passive: false });
+    document.addEventListener('mouseup', onUp);
+
+    // Add a class so CSS can show grab cursor and suppress selection
+    document.body.classList.add('psy-dragging');
+
+    return () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      document.body.classList.remove('psy-dragging');
+    };
+  }, [state.payload !== null]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const ctxValue: DragDropContextValue = {
+    startDrag,
+    payload: state.payload,
+    isDragging: state.payload !== null,
+  };
+
+  return (
+    <Ctx.Provider value={ctxValue}>
+      {children}
+      <DragGhost state={state} />
+    </Ctx.Provider>
+  );
+}
+
+// ── useDragSource hook ────────────────────────────────────────────
+const DRAG_THRESHOLD = 5; // px before drag starts
+
+/**
+ * Returns an onMouseDown handler for a draggable element.
+ * Usage:  <div {...useDragSource(payload)} />
+ */
+export function useDragSource(getPayload: () => DragPayload) {
+  const { startDrag } = useDragDrop();
+  const startPosRef = useRef<{ x: number; y: number } | null>(null);
+  const payloadRef = useRef(getPayload);
+  payloadRef.current = getPayload;
+
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      // Only left-click
+      if (e.button !== 0) return;
+
+      const startX = e.clientX;
+      const startY = e.clientY;
+      startPosRef.current = { x: startX, y: startY };
+
+      const onMove = (me: MouseEvent) => {
+        if (!startPosRef.current) return;
+        const dx = me.clientX - startX;
+        const dy = me.clientY - startY;
+        if (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD) {
+          startPosRef.current = null;
+          document.removeEventListener('mousemove', onMove);
+          document.removeEventListener('mouseup', onUp);
+          startDrag(payloadRef.current(), me.clientX, me.clientY);
+        }
+      };
+
+      const onUp = () => {
+        startPosRef.current = null;
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+      };
+
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    },
+    [startDrag],
+  );
+
+  return { onMouseDown };
+}

src/i18n.ts

@@ -359,7 +359,7 @@ const enTranslation = {
     aboutBuiltWith: 'Built with Tauri · React · TypeScript · Rust/rodio',
     aboutAiCredit: 'Developed with the support of Claude Code by Anthropic',
     aboutContributorsLabel: 'Contributors',
-    aboutContributors: 'jiezhuo — Chinese translation',
+    aboutContributors: 'jiezhuo — Chinese translation · nullobject — Seek & waveform fixes',
     changelog: 'Changelog',
     showChangelogOnUpdate: "Show 'What's New' on update",
     showChangelogOnUpdateDesc: "Automatically show what's new when a new version is launched for the first time.",
@@ -492,6 +492,8 @@ const enTranslation = {
   queue: {
     title: 'Queue',
     savePlaylist: 'Save Playlist',
+    updatePlaylist: 'Update Playlist',
+    filterPlaylists: 'Filter playlists…',
     playlistName: 'Playlist Name',
     cancel: 'Cancel',
     save: 'Save',
@@ -934,7 +936,7 @@ const deTranslation = {
     aboutBuiltWith: 'Gebaut mit Tauri · React · TypeScript · Rust/rodio',
     aboutAiCredit: 'Mit freundlicher Unterstützung von Claude Code by Anthropic',
     aboutContributorsLabel: 'Mitwirkende',
-    aboutContributors: 'jiezhuo — Chinesische Übersetzung',
+    aboutContributors: 'jiezhuo — Chinesische Übersetzung · nullobject — Seek & Waveform-Fixes',
     changelog: 'Changelog',
     showChangelogOnUpdate: "'Was ist neu' bei Update anzeigen",
     showChangelogOnUpdateDesc: 'Zeigt automatisch die Neuerungen an, wenn eine neue Version zum ersten Mal gestartet wird.',
@@ -1067,6 +1069,8 @@ const deTranslation = {
   queue: {
     title: 'Warteschlange',
     savePlaylist: 'Playlist speichern',
+    updatePlaylist: 'Playlist aktualisieren',
+    filterPlaylists: 'Playlists filtern…',
     playlistName: 'Name der Playlist',
     cancel: 'Abbrechen',
     save: 'Speichern',
@@ -1509,7 +1513,7 @@ const frTranslation = {
     aboutBuiltWith: 'Construit avec Tauri · React · TypeScript · Rust/rodio',
     aboutAiCredit: 'Développé avec le soutien de Claude Code par Anthropic',
     aboutContributorsLabel: 'Contributeurs',
-    aboutContributors: 'jiezhuo — traduction chinoise',
+    aboutContributors: 'jiezhuo — traduction chinoise · nullobject — correctifs seek & waveform',
     changelog: 'Journal des modifications',
     showChangelogOnUpdate: "Afficher 'Quoi de neuf' lors des mises à jour",
     showChangelogOnUpdateDesc: 'Affiche automatiquement les nouveautés au premier lancement d\'une nouvelle version.',
@@ -1642,6 +1646,8 @@ const frTranslation = {
   queue: {
     title: 'File d\'attente',
     savePlaylist: 'Enregistrer la liste',
+    updatePlaylist: 'Mettre à jour la liste',
+    filterPlaylists: 'Filtrer les listes…',
     playlistName: 'Nom de la liste',
     cancel: 'Annuler',
     save: 'Enregistrer',
@@ -2084,7 +2090,7 @@ const nlTranslation = {
     aboutBuiltWith: 'Gebouwd met Tauri · React · TypeScript · Rust/rodio',
     aboutAiCredit: 'Ontwikkeld met ondersteuning van Claude Code door Anthropic',
     aboutContributorsLabel: 'Bijdragers',
-    aboutContributors: 'jiezhuo — Chinese vertaling',
+    aboutContributors: 'jiezhuo — Chinese vertaling · nullobject — seek & waveform-fixes',
     changelog: 'Wijzigingslog',
     showChangelogOnUpdate: "'Wat is nieuw' tonen bij update",
     showChangelogOnUpdateDesc: 'Toont automatisch de nieuwigheden bij de eerste start van een nieuwe versie.',
@@ -2217,6 +2223,8 @@ const nlTranslation = {
   queue: {
     title: 'Wachtrij',
     savePlaylist: 'Afspeellijst opslaan',
+    updatePlaylist: 'Afspeellijst bijwerken',
+    filterPlaylists: 'Afspeellijsten filteren…',
     playlistName: 'Naam afspeellijst',
     cancel: 'Annuleren',
     save: 'Opslaan',
@@ -2659,7 +2667,7 @@ const zhTranslation = {
     aboutBuiltWith: '使用 Tauri · React · TypeScript · Rust/rodio 构建',
     aboutAiCredit: '在 Anthropic 的 Claude Code 支持下开发',
     aboutContributorsLabel: '贡献者',
-    aboutContributors: 'jiezhuo — 中文翻译',
+    aboutContributors: 'jiezhuo — 中文翻译 · nullobject — Seek & 波形修复',
     changelog: '更新日志',
     showChangelogOnUpdate: '更新时显示"新功能"',
     showChangelogOnUpdateDesc: '新版本首次启动时自动显示更新内容。',
@@ -2792,6 +2800,8 @@ const zhTranslation = {
   queue: {
     title: '队列',
     savePlaylist: '保存为播放列表',
+    updatePlaylist: '更新播放列表',
+    filterPlaylists: '筛选播放列表…',
     playlistName: '播放列表名称',
     cancel: '取消',
     save: '保存',

src/pages/Favorites.tsx

@@ -7,6 +7,7 @@ import { ListPlus, X } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { unstar } from '../api/subsonic';
+import { useDragDrop } from '../contexts/DragDropContext';
 
 export default function Favorites() {
   const { t } = useTranslation();
@@ -16,6 +17,7 @@ export default function Favorites() {
   const [loading, setLoading] = useState(true);
 
   const { playTrack, enqueue } = usePlayerStore();
+  const psyDrag = useDragDrop();
 
   function removeSong(id: string) {
     unstar(id, 'song').catch(() => {});
@@ -104,10 +106,21 @@ export default function Favorites() {
                       onDoubleClick={() => playTrack(song, songs)}
                       onContextMenu={e => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, track, 'song'); }}
                       role="row"
-                      draggable
-                      onDragStart={e => {
-                        e.dataTransfer.effectAllowed = 'copy';
-                        e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
+                      draggable={false}
+                      onMouseDown={e => {
+                        if (e.button !== 0) return;
+                        e.preventDefault();
+                        const sx = e.clientX, sy = e.clientY;
+                        const onMove = (me: MouseEvent) => {
+                          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 }), label: song.title }, me.clientX, me.clientY);
+                          }
+                        };
+                        const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                        document.addEventListener('mousemove', onMove);
+                        document.addEventListener('mouseup', onUp);
                       }}
                     >
                       <div className="track-num col-center" onClick={() => playTrack(song, songs)} style={{ cursor: 'pointer' }}>

src/pages/RandomMix.tsx

@@ -4,6 +4,7 @@ import { usePlayerStore } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
 import { Play, Star, RefreshCw, ChevronDown, ChevronUp } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { useDragDrop } from '../contexts/DragDropContext';
 
 const AUDIOBOOK_GENRES = [
   'hörbuch', 'hoerbuch', 'hörspiel', 'hoerspiel',
@@ -45,6 +46,7 @@ export default function RandomMix() {
   const openContextMenu = usePlayerStore(s => s.openContextMenu);
   const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
   const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
+  const psyDrag = useDragDrop();
   const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
   const { excludeAudiobooks, setExcludeAudiobooks, customGenreBlacklist, setCustomGenreBlacklist } = useAuthStore();
   const [addedGenre, setAddedGenre] = useState<string | null>(null);
@@ -343,11 +345,22 @@ export default function RandomMix() {
               </div>
               {genreMixSongs.map(song => (
                 <div key={song.id} className={`track-row${contextMenuSongId === song.id ? ' context-active' : ''}`} style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 80px' }}
-                  onDoubleClick={() => playTrack(song, genreMixSongs)} role="row" draggable
+                  onDoubleClick={() => playTrack(song, genreMixSongs)} role="row"
                   onContextMenu={e => { e.preventDefault(); setContextMenuSongId(song.id); openContextMenu(e.clientX, e.clientY, { 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 }, 'song'); }}
-                  onDragStart={e => {
-                    e.dataTransfer.effectAllowed = 'copy';
-                    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', 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, genre: song.genre } }));
+                  onMouseDown={e => {
+                    if (e.button !== 0) return;
+                    e.preventDefault();
+                    const sx = e.clientX, sy = e.clientY;
+                    const onMove = (me: MouseEvent) => {
+                      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: { 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, genre: song.genre } }), label: song.title }, me.clientX, me.clientY);
+                      }
+                    };
+                    const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                    document.addEventListener('mousemove', onMove);
+                    document.addEventListener('mouseup', onUp);
                   }}
                 >
                   <button className="btn btn-ghost" style={{ padding: 4 }} onClick={e => { e.stopPropagation(); playTrack(song, genreMixSongs); }}>
@@ -390,21 +403,27 @@ export default function RandomMix() {
               style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 60px 80px' }}
               onDoubleClick={() => playTrack(song, filteredSongs)}
               role="row"
-              draggable
               onContextMenu={e => {
                 e.preventDefault();
                 const 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 };
                 setContextMenuSongId(song.id);
                 openContextMenu(e.clientX, e.clientY, track, 'song');
               }}
-              onDragStart={e => {
-                e.dataTransfer.effectAllowed = 'copy';
-                const 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, genre: song.genre,
+              onMouseDown={e => {
+                if (e.button !== 0) return;
+                e.preventDefault();
+                const sx = e.clientX, sy = e.clientY;
+                const onMove = (me: MouseEvent) => {
+                  if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+                    document.removeEventListener('mousemove', onMove);
+                    document.removeEventListener('mouseup', onUp);
+                    const 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, genre: song.genre };
+                    psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track }), label: song.title }, me.clientX, me.clientY);
+                  }
                 };
-                e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
+                const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                document.addEventListener('mousemove', onMove);
+                document.addEventListener('mouseup', onUp);
               }}
             >
               <button

src/pages/SearchResults.tsx

@@ -6,6 +6,7 @@ import { usePlayerStore } from '../store/playerStore';
 import AlbumRow from '../components/AlbumRow';
 import ArtistRow from '../components/ArtistRow';
 import { useTranslation } from 'react-i18next';
+import { useDragDrop } from '../contexts/DragDropContext';
 
 function formatDuration(s: number) {
   return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
@@ -19,6 +20,7 @@ export default function SearchResults() {
   const [loading, setLoading] = useState(false);
   const playTrack = usePlayerStore(s => s.playTrack);
   const currentTrack = usePlayerStore(s => s.currentTrack);
+  const psyDrag = useDragDrop();
 
   useEffect(() => {
     if (!query.trim()) { setResults(null); return; }
@@ -92,16 +94,22 @@ export default function SearchResults() {
                     style={{ gridTemplateColumns: '36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(80px, 1.2fr) 100px 60px' }}
                     onDoubleClick={() => playSong(song, results.songs)}
                     role="row"
-                    draggable
-                    onDragStart={e => {
-                      e.dataTransfer.effectAllowed = 'copy';
-                      const 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, year: song.year, bitRate: song.bitRate,
-                        suffix: song.suffix, userRating: song.userRating, genre: song.genre,
+                    draggable={false}
+                    onMouseDown={e => {
+                      if (e.button !== 0) return;
+                      e.preventDefault();
+                      const sx = e.clientX, sy = e.clientY;
+                      const onMove = (me: MouseEvent) => {
+                        if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+                          document.removeEventListener('mousemove', onMove);
+                          document.removeEventListener('mouseup', onUp);
+                          const 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, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, genre: song.genre };
+                          psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track }), label: song.title }, me.clientX, me.clientY);
+                        }
                       };
-                      e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
+                      const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                      document.addEventListener('mousemove', onMove);
+                      document.addEventListener('mouseup', onUp);
                     }}
                   >
                     <button

src/store/playerStore.ts

@@ -77,6 +77,7 @@ interface PlayerState {
   setVolume: (v: number) => void;
   setProgress: (t: number, duration: number) => void;
   enqueue: (tracks: Track[]) => void;
+  enqueueAt: (tracks: Track[], insertIndex: number) => void;
   clearQueue: () => void;
 
   isQueueVisible: boolean;
@@ -690,6 +691,22 @@ export const usePlayerStore = create<PlayerState>()(
         });
       },
 
+      enqueueAt: (tracks, insertIndex) => {
+        set(state => {
+          const idx = Math.max(0, Math.min(insertIndex, state.queue.length));
+          const newQueue = [
+            ...state.queue.slice(0, idx),
+            ...tracks,
+            ...state.queue.slice(idx),
+          ];
+          const newQueueIndex = idx <= state.queueIndex
+            ? state.queueIndex + tracks.length
+            : state.queueIndex;
+          syncQueueToServer(newQueue, state.currentTrack, state.currentTime);
+          return { queue: newQueue, queueIndex: newQueueIndex };
+        });
+      },
+
       clearQueue: () => {
         invoke('audio_stop').catch(console.error);
         isAudioPaused = false;

src/styles/layout.css

@@ -759,6 +759,11 @@
   min-height: 0; /* allow 1fr row to shrink freely */
 }
 
+.queue-panel.queue-drop-active {
+  box-shadow: inset 0 0 0 2px var(--accent);
+  background: linear-gradient(var(--accent-dim), var(--accent-dim)), var(--bg-sidebar);
+}
+
 .queue-header {
   height: 64px;
   box-sizing: border-box;

src/styles/theme.css

@@ -3196,6 +3196,16 @@ body.is-dragging * {
   cursor: col-resize !important;
 }
 
+/* ─── Mouse-event DnD cursor (psy-dragging) ──────────────────────
+   Applied by DragDropProvider while a mouse-based drag is active.
+   Overrides cursor globally to "grabbing" and prevents text-
+   selection / stray pointer events on child elements. ─────────── */
+body.psy-dragging,
+body.psy-dragging * {
+  cursor: grabbing !important;
+  user-select: none !important;
+}
+
 /* ─── Utility Classes ─── */
 .glass {
   background: var(--bg-glass, rgba(30, 30, 46, 0.75));
@@ -11200,7 +11210,9 @@ input[type="range"]:hover::-webkit-slider-thumb {
 [data-theme='north-park'] .queue-action-btn         { color: rgba(255, 255, 255, 0.60); }
 [data-theme='north-park'] .queue-action-btn:hover:not(:disabled) { color: rgba(255, 255, 255, 0.92); }
 
-/* Hero album meta (year, genre etc.) — needs high contrast on dark overlay */
+/* Back button + hero text — needs high contrast on dark overlay at top of album header */
+[data-theme='north-park'] .album-detail-back { color: rgba(255, 255, 255, 0.85); }
+[data-theme='north-park'] .album-detail-back:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
 [data-theme='north-park'] .album-detail-info { color: rgba(255, 255, 255, 0.80); }
 
 /* Artist name in hero — soften the orange to a warm amber, less glaring */
@@ -11419,6 +11431,9 @@ input[type="range"]:hover::-webkit-slider-thumb {
 [data-theme='dark-side-of-the-moon'] .playlist-row:hover { background: rgba(155, 48, 255, 0.05); box-shadow: inset 3px 0 0 #9B30FF; }
 [data-theme='dark-side-of-the-moon'] .artist-ext-link:hover { background: rgba(155, 48, 255, 0.07); border-color: #9B30FF; }
 
+/* Album detail header — year/genre/info too dark on near-black bg, brighten */
+[data-theme='dark-side-of-the-moon'] .album-detail-info { color: #888888; }
+
 /* np-album-track */
 [data-theme='dark-side-of-the-moon'] .np-album-track.active .np-album-track-title,
 [data-theme='dark-side-of-the-moon'] .np-album-track.active .np-album-track-num { color: #9B30FF; }
@@ -11430,8 +11445,8 @@ input[type="range"]:hover::-webkit-slider-thumb {
 [data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar-thumb:hover { background: #9B30FF; }
 
 /* Connection indicators */
-[data-theme='dark-side-of-the-moon'] .connection-type,
-[data-theme='dark-side-of-the-moon'] .connection-server { color: #555555; }
+[data-theme='dark-side-of-the-moon'] .connection-type  { color: #999999; }
+[data-theme='dark-side-of-the-moon'] .connection-server { color: #777777; }
 
 /* ─── Powerslave (inspired) — Iron Maiden ─── */
 /* Blazing Egyptian sun — warm sandstone main, Nile-sky deep-blue sidebar,
@@ -11654,14 +11669,24 @@ input[type="range"]:hover::-webkit-slider-thumb {
 [data-theme='powerslave'] .artist-ext-link:hover { background: rgba(200, 128, 10, 0.08); border-color: #C8800A; }
 
 /* Connection indicators */
-[data-theme='powerslave'] .connection-type,
-[data-theme='powerslave'] .connection-server { color: rgba(140, 190, 230, 0.70); }
+[data-theme='powerslave'] .connection-type  { color: #050E19; }
+[data-theme='powerslave'] .connection-server { color: #050E19; }
+
+/* Back button needs light color — sits on dark overlay above sandstone content */
+[data-theme='powerslave'] .album-detail-back { color: rgba(255, 255, 255, 0.85); }
+[data-theme='powerslave'] .album-detail-back:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
+
+/* Tech strip — default ctp-surface1 (#DEC880) is too bright on dark blue queue panel */
+[data-theme='powerslave'] .queue-current-tech {
+  background: rgba(6, 16, 28, 0.88);
+  color: rgba(140, 190, 230, 0.72);
+}
 
 /* Album detail hero meta */
 [data-theme='powerslave'] .album-detail-info { color: rgba(255, 255, 255, 0.80); }
 [data-theme='powerslave'] .album-detail-artist,
-[data-theme='powerslave'] .album-detail-artist-link { color: #D49828; }
-[data-theme='powerslave'] .album-detail-artist-link:hover { color: #E8B040; }
+[data-theme='powerslave'] .album-detail-artist-link { color: #050E19; }
+[data-theme='powerslave'] .album-detail-artist-link:hover { color: #0A2035; }
 
 /* np-album-track */
 [data-theme='powerslave'] .np-album-track.active .np-album-track-title,

src/utils/dragGhost.ts

@@ -0,0 +1,76 @@
+/**
+ * Creates a slim, themed drag ghost and registers it via setDragImage.
+ * The element is cleaned up when the drag completes (dragend).
+ *
+ * On Linux (WebKitGTK), the GTK drag subsystem captures the drag image
+ * asynchronously — removing the element in the same tick or via
+ * setTimeout(…, 0) causes the image to be gone before GTK reads it,
+ * which makes GTK treat the entire drag as invalid (forbidden cursor).
+ * Using a dragend listener ensures the element persists for the full
+ * duration of the drag operation on all platforms.
+ *
+ * @param dataTransfer - the event's dataTransfer object
+ * @param label        - primary text (track/album title)
+ * @param opts.coverUrl - optional thumbnail URL (shown as 24×24 image)
+ */
+export function setDragGhost(
+  dataTransfer: DataTransfer,
+  label: string,
+  opts: { coverUrl?: string } = {},
+): void {
+  const el = document.createElement('div');
+
+  el.style.cssText = [
+    'position:fixed',
+    'left:-9999px',
+    'top:-9999px',
+    'display:flex',
+    'align-items:center',
+    'gap:8px',
+    `padding:0 14px 0 ${opts.coverUrl ? '6px' : '10px'}`,
+    'height:34px',
+    'max-width:240px',
+    'border-radius:17px',
+    'background:var(--bg-card,#fff)',
+    'border:1px solid var(--border,rgba(0,0,0,.12))',
+    'border-left:3px solid var(--accent,#888)',
+    'box-shadow:0 4px 20px rgba(0,0,0,.22)',
+    'font-family:var(--font-ui,sans-serif)',
+    'font-size:13px',
+    'font-weight:500',
+    'color:var(--text-primary,#222)',
+    'pointer-events:none',
+    'white-space:nowrap',
+    'overflow:hidden',
+    'z-index:99999',
+  ].join(';');
+
+  if (opts.coverUrl) {
+    const img = document.createElement('img');
+    img.src = opts.coverUrl;
+    img.style.cssText = 'width:24px;height:24px;border-radius:4px;object-fit:cover;flex-shrink:0;';
+    el.appendChild(img);
+  } else {
+    const dot = document.createElement('span');
+    dot.style.cssText = 'width:6px;height:6px;border-radius:50%;background:var(--accent,#888);flex-shrink:0;';
+    el.appendChild(dot);
+  }
+
+  const text = document.createElement('span');
+  text.textContent = label;
+  text.style.cssText = 'overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;';
+  el.appendChild(text);
+
+  document.body.appendChild(el);
+  dataTransfer.setDragImage(el, 20, 17);
+
+  // Clean up the ghost element when the drag ends, not immediately.
+  // This is critical for Linux/WebKitGTK where the drag image is
+  // captured asynchronously by GTK — removing it sooner causes
+  // the "forbidden" cursor and blocks the entire drop operation.
+  const cleanup = () => {
+    el.remove();
+    document.removeEventListener('dragend', cleanup);
+  };
+  document.addEventListener('dragend', cleanup, { once: true });
+}