From 3559c69968b712d3a50522fa32a49c0a834a7853 Mon Sep 17 00:00:00 2001
From: NimBold <NimBold@users.noreply.github.com>
Date: Thu, 23 Jul 2026 06:23:04 +0330
Subject: [PATCH] fix(downloads): harden queue reordering and summary stats

---
 src/App.tsx                       |  36 +++-
 src/components/DownloadItem.tsx   |  46 +-----
 src/components/DownloadTable.tsx  | 262 +++++++++++++++++++++++++-----
 src/i18n/catalogs/en.ts           |   4 +-
 src/i18n/catalogs/fa.ts           |   4 +-
 src/i18n/catalogs/he.ts           |   4 +-
 src/i18n/catalogs/ru.ts           |   4 +-
 src/i18n/catalogs/uk.ts           |   4 +-
 src/i18n/catalogs/zh-CN.ts        |   4 +-
 src/index.css                     | 132 +++++++++++----
 src/utils/downloadSummary.test.ts |  21 +++
 src/utils/downloadSummary.ts      |  19 ++-
 src/utils/downloadTableColumns.ts |   2 +-
 13 files changed, 413 insertions(+), 129 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index dcc3367..778c19d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,7 @@ import { initMediaDomains, isActiveDownloadStatus, isTransferActiveStatus } from
 import { schedulerCompletionState } from './utils/schedulerCompletion';
 import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { Sidebar, SidebarFilter } from "./components/Sidebar";
-import { DownloadTable } from "./components/DownloadTable";
+import { DownloadTable, type DownloadTableStatusSummary } from "./components/DownloadTable";
 import { KeychainPermissionModal } from './components/KeychainPermissionModal';
 import { extractValidDownloadUrls } from './utils/url';
 import { readClipboardDownloadUrls } from './utils/clipboard';
@@ -28,6 +28,7 @@ import { PanelLeft } from 'lucide-react';
 import { isTrustedFirelinkReleaseUrl } from './utils/releaseUrls';
 import { changeAppLocale, localeDirection, resolveAppLocale, syncDocumentLocale } from './i18n';
 import { useTranslation } from 'react-i18next';
+import { formatDownloadBytes } from './utils/downloadProgress';
 
 const loadSettingsView = () => import('./components/SettingsView');
 const loadSchedulerView = () => import('./components/SchedulerView');
@@ -166,6 +167,7 @@ function App() {
   const { i18n, t } = useTranslation();
   const platform = usePlatformInfo();
   const [filter, setFilter] = useState<SidebarFilter>('all');
+  const [downloadTableSummary, setDownloadTableSummary] = useState<DownloadTableStatusSummary | null>(null);
   const [coreReady, setCoreReady] = useState(false);
   const [keychainConsentVersion, setKeychainConsentVersion] = useState('');
 
@@ -218,6 +220,16 @@ function App() {
     download.status === 'queued' || download.status === 'staged'
   ).length;
   const doneCount = downloads.filter(download => download.status === 'completed').length;
+  const handleDownloadTableSummaryChange = useCallback((summary: DownloadTableStatusSummary | null) => {
+    setDownloadTableSummary(summary);
+  }, []);
+  const formatStatusSummaryBytes = (value: number | null, isEstimated = false): string => {
+    if (value === null) return t($ => $.downloadTable.summary.unknown);
+    const formatted = formatDownloadBytes(value);
+    return isEstimated
+      ? t($ => $.downloadTable.summary.estimated, { value: formatted })
+      : formatted;
+  };
   const schedulerRunning = useSettingsStore(state => state.schedulerRunning);
   const schedulerActiveDownloadIds = useSettingsStore(state => state.schedulerActiveDownloadIds);
   const pendingPostActionTimer = useRef<number | null>(null);
@@ -1062,7 +1074,12 @@ function App() {
         )}
         <div className="flex-1 flex flex-col overflow-hidden relative">
           <Suspense fallback={<PageLoadingFallback />}>
-            {activeView === 'downloads' && <DownloadTable filter={filter} />}
+            {activeView === 'downloads' && (
+              <DownloadTable
+                filter={filter}
+                onSummaryChange={handleDownloadTableSummaryChange}
+              />
+            )}
             {activeView === 'settings' && <SettingsView />}
             {activeView === 'scheduler' && <SchedulerView />}
             {activeView === 'speedLimiter' && <SpeedLimiterView />}
@@ -1073,6 +1090,21 @@ function App() {
         {/* Status Bar */}
         <div className="app-statusbar px-[14px] flex items-center justify-between text-text-muted shrink-0">
           <span>{t($ => $.status.ready)}</span>
+          {activeView === 'downloads' && downloadTableSummary ? (
+            <div className="app-statusbar-summary" dir="ltr" aria-live="polite">
+              <span className="app-statusbar-summary-metric">
+                <span dir="auto">{t($ => $.downloadTable.summary.downloaded)}</span>
+                <strong dir="auto">{formatStatusSummaryBytes(downloadTableSummary.summary.downloadedBytes)}</strong>
+              </span>
+              <span className="app-statusbar-summary-metric">
+                <span dir="auto">{t($ => $.downloadTable.summary.remaining)}</span>
+                <strong dir="auto">{formatStatusSummaryBytes(
+                  downloadTableSummary.summary.remainingBytes,
+                  downloadTableSummary.summary.remainingIsEstimated
+                )}</strong>
+              </span>
+            </div>
+          ) : null}
           <div className="flex gap-3 tabular-nums">
             <span>{t($ => $.status.active, { count: activeDownloadCount })}</span>
             <span>{t($ => $.status.queued, { count: queuedCount })}</span>
diff --git a/src/components/DownloadItem.tsx b/src/components/DownloadItem.tsx
index fff8c1c..b586bca 100644
--- a/src/components/DownloadItem.tsx
+++ b/src/components/DownloadItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDownloadProgressStore } from '../store/downloadProgressStore';
-import { Play, Pause, MoreVertical, Clock, ArrowUp, ArrowDown, GripVertical } from 'lucide-react';
+import { Play, Pause, MoreVertical, Clock } from 'lucide-react';
 import type { DownloadItem as DownloadItemType } from '../bindings/DownloadItem';
 import { canPauseDownload, canStartDownload } from '../utils/downloadActions';
 import { useTranslation } from 'react-i18next';
@@ -24,7 +24,6 @@ interface DownloadItemProps {
   download: DownloadItemType;
   index: number;
   queueIndex: number;
-  queueLength: number;
   columnOrder: DownloadTableColumnKey[];
   columnAlignments: Record<DownloadTableColumnKey, DownloadColumnAlignment>;
   tableGridTemplate: string;
@@ -37,7 +36,7 @@ interface DownloadItemProps {
   isQueueReorderable: boolean;
   isQueueDragSource: boolean;
   onMoveInQueue: (id: string, direction: 'up' | 'down') => void;
-  onQueueDragStart: (id: string, event: React.PointerEvent<HTMLButtonElement>) => void;
+  onQueueDragStart: (id: string, event: React.PointerEvent<HTMLDivElement>) => void;
   onClick: (e: React.MouseEvent, item: DownloadItemType) => void;
 }
 
@@ -45,7 +44,6 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
   download,
   index,
   queueIndex,
-  queueLength,
   columnOrder,
   columnAlignments,
   tableGridTemplate,
@@ -202,21 +200,6 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
         style={columnStyle('File Name')}
       >
         <div className="download-cell-content">
-          {isQueueReorderable ? (
-            <button
-              type="button"
-              className="download-queue-drag-handle app-icon-button"
-              aria-label={t($ => $.downloadTable.queueDragHandle, { fileName: download.fileName })}
-              title={t($ => $.downloadTable.queueDragHandle, { fileName: download.fileName })}
-              onPointerDown={event => {
-                event.stopPropagation();
-                onQueueDragStart(download.id, event);
-              }}
-              onClick={event => event.stopPropagation()}
-            >
-              <GripVertical size={13} aria-hidden="true" />
-            </button>
-          ) : null}
           <span className="shrink-0 text-text-muted">
             {getCategoryIcon(download.category)}
           </span>
@@ -354,26 +337,6 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
       onClick={(e) => e.stopPropagation()}
       onDoubleClick={(e) => e.stopPropagation()}
     >
-      {isQueueReorderable && queueIndex !== -1 && (
-        <>
-          <button
-            onClick={() => onMoveInQueue(download.id, 'up')}
-            disabled={queueIndex === 0}
-            className="app-icon-button h-7 w-7 disabled:opacity-40"
-            title={t($ => $.downloads.actions.moveUp)}
-          >
-            <ArrowUp size={14} />
-          </button>
-          <button
-            onClick={() => onMoveInQueue(download.id, 'down')}
-            disabled={queueIndex === queueLength - 1}
-            className="app-icon-button h-7 w-7 disabled:opacity-40"
-            title={t($ => $.downloads.actions.moveDown)}
-          >
-            <ArrowDown size={14} />
-          </button>
-        </>
-      )}
       {canPauseDownload(download.status) && (
         <button onClick={() => handlePause(download.id)} className="app-icon-button h-7 w-7" title={t($ => $.downloads.actions.pause)}>
           <Pause size={14} fill="currentColor" />
@@ -401,7 +364,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
     <div
       ref={rowRef}
       data-download-id={download.id}
-      className={`download-row group cursor-default relative ${isActionVisible ? 'has-visible-actions' : ''} ${index % 2 !== 0 ? 'striped' : ''} ${isSelected ? 'is-selected' : ''} ${isQueueDragSource ? 'is-queue-drag-source' : ''}`}
+      className={`download-row group cursor-default relative ${isActionVisible ? 'has-visible-actions' : ''} ${index % 2 !== 0 ? 'striped' : ''} ${isSelected ? 'is-selected' : ''} ${isQueueReorderable ? 'is-queue-reorderable' : ''} ${isQueueDragSource ? 'is-queue-drag-source' : ''}`}
       style={{ gridTemplateColumns: tableGridTemplate, minWidth: tableMinWidth }}
       tabIndex={0}
       onMouseEnter={() => {
@@ -424,6 +387,9 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
           setIsRowFocused(false);
         }
       }}
+      onPointerDown={event => {
+        if (isQueueReorderable) onQueueDragStart(download.id, event);
+      }}
       onClick={(e) => onClick(e, download)}
       onKeyDown={event => {
         if (
diff --git a/src/components/DownloadTable.tsx b/src/components/DownloadTable.tsx
index 4bb783e..fcc8d17 100644
--- a/src/components/DownloadTable.tsx
+++ b/src/components/DownloadTable.tsx
@@ -7,7 +7,7 @@ import { SidebarFilter } from './Sidebar';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 import {
   Play, Pause, Plus, FileText, Image as ImageIcon, Music, Film, Box, Archive, FileQuestion,
-  ArrowDownCircle, Command, ChevronRight, ChevronUp, ChevronDown, MoreHorizontal,
+  ArrowDownCircle, ArrowUp, ArrowDown, Command, ChevronRight, ChevronUp, ChevronDown, MoreHorizontal,
   AlignLeft, AlignCenter, AlignRight, GripVertical
 } from 'lucide-react';
 import { DownloadItem as DownloadItemComponent } from './DownloadItem';
@@ -22,8 +22,7 @@ import {
   canStartDownload
 } from '../utils/downloadActions';
 import { isActiveDownloadStatus, isTransferActiveStatus } from '../utils/downloads';
-import { formatDownloadBytes } from '../utils/downloadProgress';
-import { summarizeDownloads } from '../utils/downloadSummary';
+import { summarizeDownloads, type DownloadSummary } from '../utils/downloadSummary';
 import { readClipboardDownloadUrls } from '../utils/clipboard';
 import { useTranslation } from 'react-i18next';
 import {
@@ -50,11 +49,17 @@ import {
   type DownloadTableColumnKey
 } from '../utils/downloadTableColumns';
 import {
+  moveSelectedBlockToIndex,
   targetIndexForBoundary
 } from '../utils/queueOrdering';
 
+export interface DownloadTableStatusSummary {
+  summary: DownloadSummary;
+}
+
 interface DownloadTableProps {
   filter: SidebarFilter;
+  onSummaryChange?: (summary: DownloadTableStatusSummary | null) => void;
 }
 
 const persistColumnWidths = (widths: number[]): void => {
@@ -108,13 +113,14 @@ interface QueueDragState {
   sourceId: string;
   queueId: string;
   ids: string[];
+  startX: number;
   startY: number;
   active: boolean;
   targetIndex: number;
   markerTop: number;
 }
 
-export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
+export const DownloadTable: React.FC<DownloadTableProps> = ({ filter, onSummaryChange }) => {
   const { t } = useTranslation();
   const {
     downloads,
@@ -177,9 +183,17 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
   const sortedDownloadsRef = useRef<DownloadItem[]>([]);
   const queueListElementRef = useRef<HTMLDivElement | null>(null);
   const queueReorderableDownloadsRef = useRef<DownloadItem[]>([]);
+  const queueDragItemsRef = useRef<DownloadItem[]>([]);
+  const queueDragBaseItemsRef = useRef<DownloadItem[]>([]);
   const queueDragStateRef = useRef<QueueDragState | null>(null);
   const queueDragCleanupRef = useRef<(() => void) | null>(null);
+  const queueDragCaptureTargetRef = useRef<HTMLElement | null>(null);
+  const queueDragCapturePointerIdRef = useRef<number | null>(null);
+  const queueDragPreviewOrderRef = useRef<string[] | null>(null);
+  const queueReorderPendingCountRef = useRef(0);
+  const suppressQueueClickRef = useRef(false);
   const [queueDragState, setQueueDragState] = useState<QueueDragState | null>(null);
+  const [queueDragPreviewOrder, setQueueDragPreviewOrder] = useState<string[] | null>(null);
   selectedIdsRef.current = selectedIds;
   lastSelectedIdRef.current = lastSelectedId;
   const [columnWidths, setColumnWidths] = useState(() => {
@@ -580,6 +594,13 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
     columnDragCleanupRef.current = null;
     queueDragCleanupRef.current = null;
     queueDragStateRef.current = null;
+    const queueCaptureTarget = queueDragCaptureTargetRef.current;
+    const queueCapturePointerId = queueDragCapturePointerIdRef.current;
+    queueDragCaptureTargetRef.current = null;
+    queueDragCapturePointerIdRef.current = null;
+    if (queueCaptureTarget && queueCapturePointerId !== null && queueCaptureTarget.hasPointerCapture(queueCapturePointerId)) {
+      queueCaptureTarget.releasePointerCapture(queueCapturePointerId);
+    }
     const captureTarget = columnDragCaptureTargetRef.current;
     const capturePointerId = columnDragCapturePointerIdRef.current;
     columnDragTargetRef.current = null;
@@ -712,17 +733,62 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
     };
   };
 
+  const clearQueueDragPreview = () => {
+    queueDragPreviewOrderRef.current = null;
+    queueDragBaseItemsRef.current = [];
+    queueDragItemsRef.current = queueReorderableDownloadsRef.current;
+    setQueueDragPreviewOrder(null);
+  };
+
+  const releaseQueuePointerCapture = () => {
+    const captureTarget = queueDragCaptureTargetRef.current;
+    const capturePointerId = queueDragCapturePointerIdRef.current;
+    queueDragCaptureTargetRef.current = null;
+    queueDragCapturePointerIdRef.current = null;
+    if (captureTarget && capturePointerId !== null && captureTarget.hasPointerCapture(capturePointerId)) {
+      captureTarget.releasePointerCapture(capturePointerId);
+    }
+  };
+
+  const trackQueueReorderOperation = (operation: Promise<void>): Promise<void> => {
+    queueReorderPendingCountRef.current += 1;
+    return operation.finally(() => {
+      queueReorderPendingCountRef.current = Math.max(0, queueReorderPendingCountRef.current - 1);
+    });
+  };
+
   const finishQueueDrag = (cancelled = false) => {
     const current = queueDragStateRef.current;
     if (!current) return;
     queueDragCleanupRef.current?.();
     queueDragCleanupRef.current = null;
+    releaseQueuePointerCapture();
     queueDragStateRef.current = null;
     setQueueDragState(null);
+    if (current.active) {
+      suppressQueueClickRef.current = true;
+      window.setTimeout(() => {
+        suppressQueueClickRef.current = false;
+      }, 0);
+    }
 
     if (!cancelled && current.active) {
-      void moveManyInQueueToPosition(current.ids, current.queueId, current.targetIndex)
-        .catch(error => showInteractionError(t($ => $.downloadTable.queueReorderFailed), error));
+      const committedPreviewOrder = queueDragPreviewOrderRef.current;
+      const reorderOperation = trackQueueReorderOperation(
+        moveManyInQueueToPosition(current.ids, current.queueId, current.targetIndex)
+      );
+      void reorderOperation
+        .catch(error => showInteractionError(t($ => $.downloadTable.queueReorderFailed), error))
+        .finally(() => {
+          // Keep the optimistic order visible until the store has accepted or
+          // rolled back the atomic backend move. A second drag must own its
+          // own preview and cannot be cleared by this completion callback.
+          if (queueDragPreviewOrderRef.current === committedPreviewOrder) {
+            clearQueueDragPreview();
+          }
+        });
+    } else {
+      clearQueueDragPreview();
     }
 
     window.requestAnimationFrame(() => {
@@ -732,9 +798,21 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
 
   const handleQueueDragStart = (
     id: string,
-    event: React.PointerEvent<HTMLButtonElement>
+    event: React.PointerEvent<HTMLDivElement>
   ) => {
-    if (!queueReorderingEnabled || event.button !== 0) return;
+    if (
+      !queueReorderingEnabled ||
+      event.button !== 0 ||
+      queueDragStateRef.current ||
+      queueDragPreviewOrderRef.current ||
+      queueReorderPendingCountRef.current > 0
+    ) return;
+    if (
+      event.target instanceof Element &&
+      event.target.closest('button, a, input, textarea, select, [role="menu"], .download-row-actions')
+    ) {
+      return;
+    }
     const currentDownloads = useDownloadStore.getState().downloads;
     const source = currentDownloads.find(download => download.id === id);
     if (!source) return;
@@ -758,33 +836,57 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
     }
 
     queueDragCleanupRef.current?.();
+    clearQueueDragPreview();
     const queueId = source.queueId || MAIN_QUEUE_ID;
     const selectedIdSet = new Set(ids);
-    const initialItems = queueReorderableDownloadsRef.current
+    const initialItems = queueDragItemsRef.current
       .filter(download => (download.queueId || MAIN_QUEUE_ID) === queueId);
+    queueDragBaseItemsRef.current = initialItems;
     const initialPosition = queueDropPosition(event.clientY, initialItems, selectedIdSet);
     const initialState: QueueDragState = {
       pointerId: event.pointerId,
       sourceId: id,
       queueId,
       ids,
+      startX: event.clientX,
       startY: event.clientY,
       active: false,
       ...initialPosition
     };
     queueDragStateRef.current = initialState;
     setQueueDragState(initialState);
+    queueDragCaptureTargetRef.current = event.currentTarget;
+    queueDragCapturePointerIdRef.current = event.pointerId;
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      // The pointer may have been cancelled between pointerdown and capture.
+      // Window-level listeners remain the best-effort cleanup fallback.
+    }
 
     const pointerMove = (pointerEvent: PointerEvent) => {
       if (pointerEvent.pointerId !== event.pointerId) return;
       const drag = queueDragStateRef.current;
       if (!drag) return;
-      const distance = Math.abs(pointerEvent.clientY - drag.startY);
+      const distance = Math.hypot(
+        pointerEvent.clientX - drag.startX,
+        pointerEvent.clientY - drag.startY
+      );
       if (!drag.active && distance < 5) return;
 
-      const items = queueReorderableDownloadsRef.current
+      const items = queueDragItemsRef.current
         .filter(download => (download.queueId || MAIN_QUEUE_ID) === drag.queueId);
+      const baseItems = queueDragBaseItemsRef.current;
       const nextPosition = queueDropPosition(pointerEvent.clientY, items, new Set(drag.ids));
+      const previewItems = moveSelectedBlockToIndex(
+        baseItems,
+        new Set(drag.ids),
+        nextPosition.targetIndex
+      );
+      queueDragItemsRef.current = previewItems;
+      queueDragPreviewOrderRef.current = previewItems.map(item => item.id);
+      setQueueDragPreviewOrder(queueDragPreviewOrderRef.current);
+      suppressQueueClickRef.current = true;
       const nextState = { ...drag, ...nextPosition, active: true };
       queueDragStateRef.current = nextState;
       setQueueDragState(nextState);
@@ -796,18 +898,21 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
     const pointerCancel = (pointerEvent: PointerEvent) => {
       if (pointerEvent.pointerId === event.pointerId) finishQueueDrag(true);
     };
+    const lostPointerCapture = () => finishQueueDrag(true);
     const cancel = () => finishQueueDrag(true);
     window.addEventListener('pointermove', pointerMove);
     window.addEventListener('pointerup', pointerUp);
     window.addEventListener('pointercancel', pointerCancel);
     window.addEventListener('blur', cancel);
     document.addEventListener('visibilitychange', cancel);
+    event.currentTarget.addEventListener('lostpointercapture', lostPointerCapture);
     queueDragCleanupRef.current = () => {
       window.removeEventListener('pointermove', pointerMove);
       window.removeEventListener('pointerup', pointerUp);
       window.removeEventListener('pointercancel', pointerCancel);
       window.removeEventListener('blur', cancel);
       document.removeEventListener('visibilitychange', cancel);
+      event.currentTarget.removeEventListener('lostpointercapture', lostPointerCapture);
     };
   };
 
@@ -917,6 +1022,22 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
   );
   queueReorderableDownloadsRef.current = queueReorderableDownloads;
 
+  const renderedDownloads = useMemo(() => {
+    if (!queueDragPreviewOrder || !queueReorderingEnabled) return sortedDownloads;
+
+    const previewRank = new Map(queueDragPreviewOrder.map((id, index) => [id, index]));
+    const previewItems = [...queueReorderableDownloads].sort((left, right) =>
+      (previewRank.get(left.id) ?? Number.MAX_SAFE_INTEGER) -
+      (previewRank.get(right.id) ?? Number.MAX_SAFE_INTEGER)
+    );
+    let previewIndex = 0;
+    return sortedDownloads.map(download => queueReorderableIds.has(download.id)
+      ? previewItems[previewIndex++] ?? download
+      : download
+    );
+  }, [queueDragPreviewOrder, queueReorderableDownloads, queueReorderableIds, queueReorderingEnabled, sortedDownloads]);
+  queueDragItemsRef.current = renderedDownloads.filter(download => queueReorderableIds.has(download.id));
+
   useEffect(() => {
     const current = queueDragStateRef.current;
     if (!current) return;
@@ -942,16 +1063,25 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
     () => summarizeDownloads(summaryDownloads, progressMap),
     [summaryDownloads, progressMap]
   );
-  const summaryScopeLabel = selectedDownloads.length > 0
-    ? t($ => $.downloadTable.summary.selected, { count: downloadSummary.itemCount })
-    : t($ => $.downloadTable.summary.items, { count: downloadSummary.itemCount });
-  const formatSummaryBytes = (value: number | null, isEstimated = false): string => {
-    if (value === null) return t($ => $.downloadTable.summary.unknown);
-    const formatted = formatDownloadBytes(value);
-    return isEstimated
-      ? t($ => $.downloadTable.summary.estimated, { value: formatted })
-      : formatted;
-  };
+  const selectedQueueItems = useMemo(
+    () => queueReorderableDownloads.filter(download => selectedIds.has(download.id)),
+    [queueReorderableDownloads, selectedIds]
+  );
+  const selectedQueueIndices = selectedQueueItems
+    .map(item => queueReorderableDownloads.findIndex(candidate => candidate.id === item.id));
+  const canMoveSelectedUp = selectedQueueIndices.length > 0 && Math.min(...selectedQueueIndices) > 0;
+  const canMoveSelectedDown = selectedQueueIndices.length > 0 &&
+    Math.max(...selectedQueueIndices) < queueReorderableDownloads.length - 1;
+  const queueReorderPending = queueDragState !== null ||
+    queueDragPreviewOrder !== null;
+
+  useEffect(() => {
+    onSummaryChange?.({
+      summary: downloadSummary,
+    });
+  }, [downloadSummary, onSummaryChange]);
+
+  useEffect(() => () => onSummaryChange?.(null), [onSummaryChange]);
 
   // Each row used to derive this by filtering and sorting the complete store
   // independently. That made a 1000-entry playlist perform O(n^2 log n) work
@@ -983,8 +1113,13 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
         positions.set(download.id, { index, length: queueItems.length });
       });
     }
+    if (queueDragPreviewOrder && queueReorderingEnabled) {
+      queueDragPreviewOrder.forEach((id, index) => {
+        positions.set(id, { index, length: queueDragPreviewOrder.length });
+      });
+    }
     return positions;
-  }, [downloads]);
+  }, [downloads, queueDragPreviewOrder, queueReorderingEnabled]);
   sortedDownloadsRef.current = sortedDownloads;
 
   useEffect(() => {
@@ -1000,6 +1135,10 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
     setQueueSortConfig(null);
   }, [filter, isQueueFilter]);
   const handleItemClick = useCallback((e: React.MouseEvent, item: DownloadItem) => {
+    if (suppressQueueClickRef.current) {
+      suppressQueueClickRef.current = false;
+      return;
+    }
     if (e.detail === 2) {
       handleDownloadDoubleClick(item);
       return;
@@ -1049,10 +1188,22 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
   }, [clampMenuPosition]);
 
   const handleMoveInQueue = useCallback((id: string, direction: 'up' | 'down') => {
+    if (
+      queueDragStateRef.current ||
+      queueDragPreviewOrderRef.current
+    ) return;
     const ids = selectedIdsRef.current.has(id)
       ? Array.from(selectedIdsRef.current)
       : id;
-    void moveInQueue(ids, direction);
+    void trackQueueReorderOperation(moveInQueue(ids, direction));
+  }, [moveInQueue]);
+
+  const moveSelectedQueueItems = useCallback((ids: string[], direction: 'up' | 'down') => {
+    if (
+      queueDragStateRef.current ||
+      queueDragPreviewOrderRef.current
+    ) return;
+    void trackQueueReorderOperation(moveInQueue(ids, direction));
   }, [moveInQueue]);
 
   const handleSort = (column: DownloadSortColumn) => {
@@ -1275,25 +1426,55 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
           {getFilterTitle()}
           <span className="downloads-count">{sortedDownloads.length}</span>
           {queueReorderingEnabled && queueReorderableDownloads.length > 0 ? (
-            <span className="downloads-queue-reorder-hint">
-              {t($ => $.downloadTable.queueReorderHint)}
+            <span className="downloads-queue-reorder-hint" title={t($ => $.downloadTable.queueReorderShortcut, { key: isMac ? 'Option' : 'Alt' })}>
+              <span>{t($ => $.downloadTable.queueReorderHint)}</span>
+              <span
+                className="downloads-queue-reorder-shortcut"
+                aria-label={t($ => $.downloadTable.queueReorderShortcut, { key: isMac ? 'Option' : 'Alt' })}
+              >
+                <kbd>{isMac ? 'Option' : 'Alt'}</kbd>
+                <span aria-hidden="true">+</span>
+                <kbd>↑</kbd>
+                <span aria-hidden="true">/</span>
+                <kbd>↓</kbd>
+              </span>
             </span>
           ) : null}
         </div>
-        <div className="downloads-summary">
-          <span className="downloads-summary-scope">{summaryScopeLabel}</span>
-          <span className="downloads-summary-metric">
-            <span className="downloads-summary-label">{t($ => $.downloadTable.summary.downloaded)}</span>
-            <span className="downloads-summary-value">{formatSummaryBytes(downloadSummary.downloadedBytes)}</span>
-          </span>
-          <span className="downloads-summary-metric">
-            <span className="downloads-summary-label">{t($ => $.downloadTable.summary.remaining)}</span>
-            <span className="downloads-summary-value">{formatSummaryBytes(downloadSummary.remainingBytes, downloadSummary.remainingIsEstimated)}</span>
-          </span>
-          <span className="downloads-summary-metric">
-            <span className="downloads-summary-label">{t($ => $.downloadTable.summary.active)}</span>
-            <span className="downloads-summary-value">{downloadSummary.activeCount}</span>
-          </span>
+        <div className="downloads-header-actions">
+          {selectedDownloads.length > 0 ? (
+            <span className="downloads-selection-status">
+              {t($ => $.downloadTable.summary.selected, { count: selectedDownloads.length })}
+            </span>
+          ) : null}
+          {queueReorderingEnabled && queueReorderableDownloads.length > 0 ? (
+            <div
+              className="downloads-queue-priority-controls"
+              role="group"
+              aria-label={t($ => $.downloadTable.queuePriorityControls)}
+            >
+              <button
+                type="button"
+                className="app-icon-button h-7 w-7"
+                disabled={queueReorderPending || !canMoveSelectedUp}
+                aria-label={t($ => $.downloads.actions.moveUp)}
+                title={t($ => $.downloads.actions.moveUp)}
+                onClick={() => moveSelectedQueueItems(selectedQueueItems.map(item => item.id), 'up')}
+              >
+                <ArrowUp size={14} aria-hidden="true" />
+              </button>
+              <button
+                type="button"
+                className="app-icon-button h-7 w-7"
+                disabled={queueReorderPending || !canMoveSelectedDown}
+                aria-label={t($ => $.downloads.actions.moveDown)}
+                title={t($ => $.downloads.actions.moveDown)}
+                onClick={() => moveSelectedQueueItems(selectedQueueItems.map(item => item.id), 'down')}
+              >
+                <ArrowDown size={14} aria-hidden="true" />
+              </button>
+            </div>
+          ) : null}
         </div>
       </div>
 
@@ -1435,13 +1616,12 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
                 </div>
               ) : (
                 <>
-                  {sortedDownloads.map((d, index) => (
+                  {renderedDownloads.map((d, index) => (
                     <DownloadItemComponent
                       key={d.id}
                       download={d}
                       index={index}
                       queueIndex={queuePositionsByDownloadId.get(d.id)?.index ?? -1}
-                      queueLength={queuePositionsByDownloadId.get(d.id)?.length ?? 0}
                       columnOrder={orderedColumns}
                       columnAlignments={columnAlignments}
                       tableGridTemplate={tableGridTemplate}
diff --git a/src/i18n/catalogs/en.ts b/src/i18n/catalogs/en.ts
index 5fa090a..e3dd74e 100644
--- a/src/i18n/catalogs/en.ts
+++ b/src/i18n/catalogs/en.ts
@@ -380,7 +380,9 @@ const common = {
     clickToAdd: 'Click',
     addButtonOr: 'button or',
     toAddDownloads: 'to add downloads',
-    queueReorderHint: 'Drag the handle to reorder. Alt+Arrow Up/Down also moves the focused row.',
+    queueReorderHint: 'Drag rows to reorder',
+    queueReorderShortcut: '{{key}} + Arrow Up/Down moves the focused row',
+    queuePriorityControls: 'Move selected downloads in the queue',
     queueDragHandle: 'Drag {{fileName}} to reorder',
     queueReorderFailed: 'Could not reorder downloads',
     nonResumableOne: '1 download does not support resuming. If you pause it, you will have to start over again later. Are you sure you want to pause?',
diff --git a/src/i18n/catalogs/fa.ts b/src/i18n/catalogs/fa.ts
index 0a8d01e..f15f42c 100644
--- a/src/i18n/catalogs/fa.ts
+++ b/src/i18n/catalogs/fa.ts
@@ -380,7 +380,9 @@ const fa = {
     clickToAdd: 'برای افزودن دانلودها، روی',
     addButtonOr: 'یا',
     toAddDownloads: 'کلیک کنید',
-    queueReorderHint: 'دسته را بکشید تا جابه‌جا شود. با Alt+فلش بالا/پایین نیز ردیف انتخاب‌شده جابه‌جا می‌شود.',
+    queueReorderHint: 'ردیف‌ها را بکشید تا مرتب شوند',
+    queueReorderShortcut: '{{key}} + فلش بالا/پایین ردیف انتخاب‌شده را جابه‌جا می‌کند',
+    queuePriorityControls: 'جابه‌جایی دانلودهای انتخاب‌شده در صف',
     queueDragHandle: 'کشیدن {{fileName}} برای جابه‌جایی',
     queueReorderFailed: 'جابه‌جایی دانلودها ناموفق بود',
     nonResumableOne: '۱ دانلود از ادامه‌دادن پشتیبانی نمی‌کند. اگر آن را متوقف کنید، بعداً باید از ابتدا شروع کنید. آیا از توقف آن مطمئن هستید؟',
diff --git a/src/i18n/catalogs/he.ts b/src/i18n/catalogs/he.ts
index 2532efc..84671c3 100644
--- a/src/i18n/catalogs/he.ts
+++ b/src/i18n/catalogs/he.ts
@@ -380,7 +380,9 @@ const he = {
     clickToAdd: 'לחץ על לחצן',
     addButtonOr: 'או',
     toAddDownloads: 'כדי להוסיף הורדות',
-    queueReorderHint: 'גררו את הידית כדי לשנות את הסדר. Alt+חץ למעלה/למטה מזיז גם את השורה הממוקדת.',
+    queueReorderHint: 'גררו שורות כדי לשנות את הסדר',
+    queueReorderShortcut: '{{key}} + חץ למעלה/למטה מזיז את השורה הממוקדת',
+    queuePriorityControls: 'הזזת ההורדות שנבחרו בתור',
     queueDragHandle: 'גררו את {{fileName}} כדי לשנות את הסדר',
     queueReorderFailed: 'לא ניתן לשנות את סדר ההורדות',
     nonResumableOne: 'הורדה אחת אינה תומכת בחידוש. אם תשהה אותה, תצטרך להתחיל מהתחלה מאוחר יותר. האם ברצונך להשהות?',
diff --git a/src/i18n/catalogs/ru.ts b/src/i18n/catalogs/ru.ts
index be61a04..1a2ca24 100644
--- a/src/i18n/catalogs/ru.ts
+++ b/src/i18n/catalogs/ru.ts
@@ -380,7 +380,9 @@ const ru = {
     clickToAdd: 'Нажмите кнопку',
     addButtonOr: 'или',
     toAddDownloads: 'чтобы добавить загрузки',
-    queueReorderHint: 'Перетащите маркер для изменения порядка. Alt+стрелка вверх/вниз перемещает выбранную строку.',
+    queueReorderHint: 'Перетаскивайте строки, чтобы изменить порядок',
+    queueReorderShortcut: '{{key}} + стрелка вверх/вниз перемещает сфокусированную строку',
+    queuePriorityControls: 'Переместить выбранные загрузки в очереди',
     queueDragHandle: 'Перетащите {{fileName}} для изменения порядка',
     queueReorderFailed: 'Не удалось изменить порядок загрузок',
     nonResumableOne: '1 загрузка не поддерживает возобновление. Если вы приостановите её, позже придётся начинать скачивание заново. Вы действительно хотите приостановить?',
diff --git a/src/i18n/catalogs/uk.ts b/src/i18n/catalogs/uk.ts
index d8c13e2..d5517c5 100644
--- a/src/i18n/catalogs/uk.ts
+++ b/src/i18n/catalogs/uk.ts
@@ -380,7 +380,9 @@ const uk = {
     clickToAdd: 'Натисніть',
     addButtonOr: 'або',
     toAddDownloads: 'щоб додати завантаження',
-    queueReorderHint: 'Перетягніть маркер, щоб змінити порядок. Alt+стрілка вгору/вниз переміщує сфокусований рядок.',
+    queueReorderHint: 'Перетягуйте рядки, щоб змінити порядок',
+    queueReorderShortcut: '{{key}} + стрілка вгору/вниз переміщує сфокусований рядок',
+    queuePriorityControls: 'Перемістити вибрані завантаження в черзі',
     queueDragHandle: 'Перетягніть {{fileName}}, щоб змінити порядок',
     queueReorderFailed: 'Не вдалося змінити порядок завантажень',
     nonResumableOne: '1 завантаження не підтримує відновлення. Якщо ви призупините його, вам доведеться почати спочатку пізніше. Ви впевнені, що хочете призупинити?',
diff --git a/src/i18n/catalogs/zh-CN.ts b/src/i18n/catalogs/zh-CN.ts
index 903e2f7..30f017e 100644
--- a/src/i18n/catalogs/zh-CN.ts
+++ b/src/i18n/catalogs/zh-CN.ts
@@ -380,7 +380,9 @@ const zhCN = {
     clickToAdd: '点击',
     addButtonOr: '按钮或',
     toAddDownloads: '来添加下载',
-    queueReorderHint: '拖动手柄调整顺序。Alt+上/下箭头也可移动当前行。',
+    queueReorderHint: '拖动行以调整顺序',
+    queueReorderShortcut: '{{key}} + 上/下箭头可移动当前行',
+    queuePriorityControls: '移动队列中选中的下载',
     queueDragHandle: '拖动 {{fileName}} 调整顺序',
     queueReorderFailed: '无法调整下载顺序',
     nonResumableOne: '1 个下载不支持断点续传。如果您暂停它，稍后您将不得不重新开始。确定要暂停吗？',
diff --git a/src/index.css b/src/index.css
index a11af02..7d77581 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1158,6 +1158,7 @@ html[data-list-density="relaxed"] {
   }
 
   .app-statusbar {
+    position: relative;
     height: 26px;
     font-size: 10px;
     background: hsl(var(--statusbar-bg));
@@ -1165,6 +1166,39 @@ html[data-list-density="relaxed"] {
     box-shadow: none;
   }
 
+  .app-statusbar-summary {
+    position: absolute;
+    left: 50%;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    max-width: min(52%, 560px);
+    overflow: hidden;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    font-size: 10px;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  .app-statusbar-summary-metric {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .app-statusbar-summary-metric > span {
+    color: hsl(var(--text-muted));
+  }
+
+  .app-statusbar-summary-metric > strong {
+    overflow: hidden;
+    color: hsl(var(--text-secondary));
+    font-variant-numeric: tabular-nums;
+    text-overflow: ellipsis;
+  }
+
   .sidebar-nav-item {
     height: 31px;
     border-radius: 8px;
@@ -1866,38 +1900,39 @@ html[data-list-density="relaxed"] {
     background: hsl(var(--item-hover));
   }
 
-  .downloads-summary {
+  .downloads-header-actions {
     min-width: 0;
-    flex: 1 1 360px;
     display: flex;
     align-items: center;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-    gap: 4px 12px;
-    color: hsl(var(--text-secondary));
-    font-size: 11px;
-    line-height: 1.25;
+    gap: 10px;
+    margin-inline-start: auto;
   }
 
-  .downloads-summary-scope {
+  .downloads-selection-status {
     color: hsl(var(--text-primary));
+    font-size: 11px;
     font-weight: 650;
-  }
-
-  .downloads-summary-metric {
-    display: inline-flex;
-    align-items: baseline;
-    gap: 4px;
     white-space: nowrap;
   }
 
-  .downloads-summary-label {
-    color: hsl(var(--text-muted));
+  .downloads-queue-priority-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 1px;
+    padding: 1px;
+    border: 1px solid hsl(var(--border-color));
+    border-radius: 7px;
+    background: hsl(var(--statusbar-bg) / 0.7);
   }
 
-  .downloads-summary-value {
+  .downloads-queue-priority-controls .app-icon-button {
     color: hsl(var(--text-secondary));
-    font-variant-numeric: tabular-nums;
+  }
+
+  .downloads-queue-priority-controls .app-icon-button:hover:not(:disabled),
+  .downloads-queue-priority-controls .app-icon-button:focus-visible {
+    color: hsl(var(--accent-color));
+    background: hsl(var(--accent-color) / 0.14);
   }
 
   .downloads-table {
@@ -1961,12 +1996,52 @@ html[data-list-density="relaxed"] {
 }
 
 .downloads-queue-reorder-hint {
-  max-width: 340px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  max-width: 420px;
+  overflow: hidden;
   color: hsl(var(--text-muted));
   font-size: 10px;
   font-weight: 500;
-  line-height: 1.25;
+  line-height: 1;
   letter-spacing: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.downloads-queue-reorder-hint > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.downloads-queue-reorder-shortcut {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 3px;
+  direction: ltr;
+  color: hsl(var(--text-muted));
+}
+
+.downloads-queue-reorder-shortcut kbd {
+  min-width: 16px;
+  height: 17px;
+  padding: 0 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid hsl(var(--border-color));
+  border-bottom-color: hsl(var(--border-color) / 0.72);
+  border-radius: 4px;
+  background: hsl(var(--item-hover));
+  color: hsl(var(--text-secondary));
+  font-family: inherit;
+  font-size: 9px;
+  font-weight: 650;
+  line-height: 1;
 }
 
 .download-table-scroll {
@@ -2215,23 +2290,12 @@ html[data-list-density="relaxed"] .download-ghost-row {
   opacity: 0.48;
 }
 
-.download-queue-drag-handle {
-  flex: 0 0 auto;
-  width: 20px;
-  height: 22px;
-  margin-inline-start: -4px;
-  color: hsl(var(--text-muted));
+.download-row.is-queue-reorderable {
   cursor: grab;
   touch-action: none;
 }
 
-.download-queue-drag-handle:hover,
-.download-queue-drag-handle:focus-visible {
-  color: hsl(var(--text-primary));
-  background: hsl(var(--item-hover));
-}
-
-.download-queue-drag-handle:active {
+.download-row.is-queue-reorderable:active {
   cursor: grabbing;
 }
 
diff --git a/src/utils/downloadSummary.test.ts b/src/utils/downloadSummary.test.ts
index 22a2b37..06a90fe 100644
--- a/src/utils/downloadSummary.test.ts
+++ b/src/utils/downloadSummary.test.ts
@@ -37,6 +37,27 @@ describe('download summaries', () => {
     });
   });
 
+  it('treats completed downloads as having no remaining bytes despite stale progress', () => {
+    expect(summarizeDownloads([
+      item('done', {
+        status: 'completed',
+        totalBytes: 40 * 1024 ** 2,
+        downloadedBytes: 40 * 1024 ** 2,
+      }),
+    ], {
+      done: progress('done', {
+        downloaded_bytes: 40 * 1024 ** 2 - 555 * 1024,
+        total_bytes: 555 * 1024,
+      }),
+    })).toEqual({
+      itemCount: 1,
+      activeCount: 0,
+      downloadedBytes: 40 * 1024 ** 2,
+      remainingBytes: 0,
+      remainingIsEstimated: false,
+    });
+  });
+
   it('does not present partial byte totals as complete aggregates', () => {
     expect(summarizeDownloads([
       item('known', { totalBytes: 100, downloadedBytes: 20 }),
diff --git a/src/utils/downloadSummary.ts b/src/utils/downloadSummary.ts
index 76cf76d..d487f9d 100644
--- a/src/utils/downloadSummary.ts
+++ b/src/utils/downloadSummary.ts
@@ -42,11 +42,13 @@ const effectiveByteState = (
   const totalBytes = usesStoredMediaTotal
     ? usableBytes(download.totalBytes)
     : usableBytes(progress?.total_bytes) ?? usableBytes(download.totalBytes);
-  const downloadedBytes =
-    usableBytes(progress?.downloaded_bytes) ??
-    usableBytes(download.downloadedBytes) ??
-    (download.status === 'completed' ? totalBytes : undefined) ??
-    (canInferNoDownloadedBytes(download) ? 0 : undefined);
+  const downloadedBytes = download.status === 'completed'
+    ? usableBytes(download.downloadedBytes) ??
+      usableBytes(progress?.downloaded_bytes) ??
+      totalBytes
+    : usableBytes(progress?.downloaded_bytes) ??
+      usableBytes(download.downloadedBytes) ??
+      (canInferNoDownloadedBytes(download) ? 0 : undefined);
   const totalIsEstimate = usesStoredMediaTotal
     ? storedTotalIsEstimate
     : (progress?.total_is_estimate ?? storedTotalIsEstimate) === true;
@@ -89,6 +91,13 @@ export const summarizeDownloads = (
       }
     }
 
+    if (download.status === 'completed') {
+      // A completed row is terminal even when a delayed progress event still
+      // carries an old partial denominator. Never expose that stale value as
+      // remaining work in the aggregate status bar.
+      continue;
+    }
+
     if (
       state.totalBytes === undefined ||
       state.downloadedBytes === undefined ||
diff --git a/src/utils/downloadTableColumns.ts b/src/utils/downloadTableColumns.ts
index 9c282dd..599facd 100644
--- a/src/utils/downloadTableColumns.ts
+++ b/src/utils/downloadTableColumns.ts
@@ -15,7 +15,7 @@ export const DEFAULT_COLUMN_ORDER = [
 export const DEFAULT_COLUMN_WIDTHS = [340, 100, 220, 100, 80, 170] as const;
 export const COLUMN_MINIMUMS = [160, 58, 92, 58, 48, 144] as const;
 // Width of the fixed action rail shown while hovering a row.
-export const DOWNLOAD_ACTIONS_COLUMN_WIDTH = 120;
+export const DOWNLOAD_ACTIONS_COLUMN_WIDTH = 84;
 // Keep the fixed rail clear of the viewport edge and horizontal scrollbar.
 export const DOWNLOAD_ACTIONS_VIEWPORT_INSET = 8;