feat(ui): add bulk reordering in queue with auto-animate

src/components/DownloadItem.tsx

@@ -15,7 +15,7 @@ interface DownloadItemProps {
   handlePause: (id: string, skipConfirm?: boolean) => void;
   handleResume: (item: DownloadItemType) => void;
   getCategoryIcon: (category: string) => React.ReactNode;
-  isSelected: boolean;
+  selectedIds: Set<string>;
   onClick: (e: React.MouseEvent, item: DownloadItemType) => void;
 }
 
@@ -27,7 +27,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
   handlePause,
   handleResume,
   getCategoryIcon,
-  isSelected,
+  selectedIds,
   onClick,
 }) => {
   const download = useDownloadStore(state => state.downloads.find(d => d.id === downloadId));
@@ -83,7 +83,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
 
   return (
     <div
-      className={`download-row group cursor-default relative ${index % 2 !== 0 ? 'striped' : ''} ${isSelected ? 'is-selected' : ''}`}
+      className={`download-row group cursor-default relative ${index % 2 !== 0 ? 'striped' : ''} ${selectedIds.has(downloadId) ? 'is-selected' : ''}`}
       style={{ gridTemplateColumns: tableGridTemplate }}
       onClick={(e) => onClick(e, download)}
       onContextMenu={(e) => {
@@ -200,7 +200,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
           {(download.status === 'queued' || download.status === 'staged') && queueIndex !== -1 && (
             <>
               <button 
-                onClick={() => moveInQueue(download.id, 'up')}
+                onClick={() => moveInQueue(selectedIds.has(download.id) ? Array.from(selectedIds) : download.id, 'up')}
                 disabled={queueIndex === 0}
                 className="app-icon-button h-7 w-7 disabled:opacity-40" 
                 title="Move Up"
@@ -208,7 +208,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
                 <ArrowUp size={14} />
               </button>
               <button 
-                onClick={() => moveInQueue(download.id, 'down')}
+                onClick={() => moveInQueue(selectedIds.has(download.id) ? Array.from(selectedIds) : download.id, 'down')}
                 disabled={queueIndex === queueItems.length - 1}
                 className="app-icon-button h-7 w-7 disabled:opacity-40" 
                 title="Move Down"

src/components/DownloadTable.tsx

@@ -3,6 +3,7 @@ import { useDownloadStore, DownloadItem } from '../store/useDownloadStore';
 import { useToast } from '../contexts/ToastContext';
 import { useSettingsStore } from '../store/useSettingsStore';
 import { SidebarFilter } from './Sidebar';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { Play, Pause, Plus, FileText, Image as ImageIcon, Music, Film, Box, Archive, FileQuestion, PanelLeft, ArrowDownCircle, Command, ChevronRight, ChevronUp, ChevronDown } from 'lucide-react';
 import { DownloadItem as DownloadItemComponent } from './DownloadItem';
 import { invokeCommand as invoke } from '../ipc';
@@ -33,6 +34,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
   const isMac = navigator.userAgent.includes('Mac');
 
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; id: string } | null>(null);
+  const [animationParent] = useAutoAnimate<HTMLDivElement>();
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [lastSelectedId, setLastSelectedId] = useState<string | null>(null);
   const [sortConfig, setSortConfig] = useState<{ column: string; direction: 'asc' | 'desc' } | null>({ column: 'Date Added', direction: 'desc' });
@@ -477,7 +479,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
                 </div>
               </div>
             ) : (
-              <div className="download-table-list">
+              <div className="download-table-list" ref={animationParent}>
                 {sortedDownloads.map((d, index) => (
                   <DownloadItemComponent
                     key={d.id}
@@ -488,7 +490,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
                     handlePause={handlePause}
                     handleResume={handleResume}
                     getCategoryIcon={getCategoryIcon}
-                    isSelected={selectedIds.has(d.id)}
+                    selectedIds={selectedIds}
                     onClick={handleItemClick}
                   />
                 ))}