From c041f99c7574baea1e172e1b401dea21d7a2f6c4 Mon Sep 17 00:00:00 2001
From: Youwes09 <yuvi.shen@outlook.com>
Date: Mon, 27 Apr 2026 14:40:47 -0500
Subject: [PATCH] Feat: Download Queue Patching & UI Revisions (#54)

---
 .../downloads/components/DownloadItem.svelte  | 299 ++----------------
 .../downloads/components/DownloadQueue.svelte | 133 +-------
 .../downloads/components/Downloads.svelte     | 198 ++++++------
 .../downloads/store/downloadState.svelte.ts   |  22 +-
 4 files changed, 140 insertions(+), 512 deletions(-)

diff --git a/src/features/downloads/components/DownloadItem.svelte b/src/features/downloads/components/DownloadItem.svelte
index 0b32c25..ccb2100 100644
--- a/src/features/downloads/components/DownloadItem.svelte
+++ b/src/features/downloads/components/DownloadItem.svelte
@@ -1,39 +1,22 @@
 <script lang="ts">
-  import { CircleNotch, ArrowLineUp, ArrowLineDown, ArrowClockwise, X } from "phosphor-svelte";
+  import { CircleNotch, ArrowClockwise, X } from "phosphor-svelte";
   import Thumbnail from "@shared/manga/Thumbnail.svelte";
-  import ContextMenu from "@shared/ui/ContextMenu.svelte";
-  import type { MenuEntry } from "@shared/ui/ContextMenu.svelte";
   import type { DownloadQueueItem } from "@types/index";
   import { pageProgress } from "../lib/downloadQueue";
 
   interface Props {
-    item:               DownloadQueueItem;
-    index:              number;
-    isActive:           boolean;
-    isFirst:            boolean;
-    isLast:             boolean;
-    isRemoving:         boolean;
-    isSelected:         boolean;
-    selectedCount:      number;
-    selectedErrorCount: number;
-    batchWorking:       boolean;
-    onRemove:           (chapterId: number) => void;
-    onRetry:            (chapterId: number) => void;
-    onReorder:          (chapterId: number, dir: "up" | "down") => void;
-    onReorderEdge:      (chapterId: number, edge: "top" | "bottom") => void;
-    onSelect:           (chapterId: number, e: MouseEvent | { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }) => void;
-    onBatchRemove:      () => void;
-    onBatchRetry:       () => void;
-    onBatchReorder:     (dir: "up" | "down") => void;
-    onBatchReorderEdge: (edge: "top" | "bottom") => void;
-    onClearSelect:      () => void;
+    item:       DownloadQueueItem;
+    isActive:   boolean;
+    isRemoving: boolean;
+    isSelected: boolean;
+    onRemove:   (chapterId: number) => void;
+    onRetry:    (chapterId: number) => void;
+    onSelect:   (chapterId: number, e: MouseEvent) => void;
   }
 
   const {
-    item, index, isActive, isFirst, isLast, isRemoving,
-    isSelected, selectedCount, selectedErrorCount, batchWorking,
-    onRemove, onRetry, onReorder, onReorderEdge, onSelect,
-    onBatchRemove, onBatchRetry, onBatchReorder, onBatchReorderEdge, onClearSelect,
+    item, isActive, isRemoving, isSelected,
+    onRemove, onRetry, onSelect,
   }: Props = $props();
 
   const manga   = $derived(item.chapter.manga);
@@ -41,144 +24,6 @@
   const prog    = $derived(pageProgress(item.progress, pages));
   const isError = $derived(item.state === "ERROR");
   const pct     = $derived(Math.round(item.progress * 100));
-
-  let menuX    = $state(0);
-  let menuY    = $state(0);
-  let menuOpen = $state(false);
-
-  function openMenu(e: MouseEvent) {
-    e.preventDefault();
-    menuX = e.clientX;
-    menuY = e.clientY;
-    menuOpen = true;
-  }
-
-  let longPressTimer: ReturnType<typeof setTimeout> | null = null;
-  let touchMoved = false;
-
-  function onTouchStart(e: TouchEvent) {
-    touchMoved = false;
-    const touch = e.touches[0];
-    longPressTimer = setTimeout(() => {
-      longPressTimer = null;
-      if (touchMoved) return;
-      if (selectedCount === 0) {
-        onSelect(item.chapter.id, { shiftKey: false, ctrlKey: false, metaKey: false });
-      } else {
-        menuX = touch.clientX;
-        menuY = touch.clientY;
-        menuOpen = true;
-      }
-    }, 500);
-  }
-
-  function onTouchMove() {
-    touchMoved = true;
-    cancelLongPress();
-  }
-
-  function cancelLongPress() {
-    if (longPressTimer !== null) {
-      clearTimeout(longPressTimer);
-      longPressTimer = null;
-    }
-  }
-
-  const menuItems = $derived.by<MenuEntry[]>(() => {
-    const inBatch = isSelected && selectedCount > 1;
-    const entries: MenuEntry[] = [];
-
-    if (inBatch) {
-      entries.push({
-        label: `Move to top (${selectedCount})`,
-        icon: ArrowLineUp,
-        onClick: () => onBatchReorderEdge("top"),
-        disabled: batchWorking,
-      });
-      entries.push({
-        label: `Move to bottom (${selectedCount})`,
-        icon: ArrowLineDown,
-        onClick: () => onBatchReorderEdge("bottom"),
-        disabled: batchWorking,
-      });
-      entries.push({ separator: true });
-      entries.push({
-        label: `Move up (${selectedCount})`,
-        icon: ArrowUp,
-        onClick: () => onBatchReorder("up"),
-        disabled: batchWorking,
-      });
-      entries.push({
-        label: `Move down (${selectedCount})`,
-        icon: ArrowDown,
-        onClick: () => onBatchReorder("down"),
-        disabled: batchWorking,
-      });
-      entries.push({ separator: true });
-      if (selectedErrorCount > 0) {
-        entries.push({
-          label: `Retry errors (${selectedErrorCount})`,
-          icon: ArrowClockwise,
-          onClick: onBatchRetry,
-          disabled: batchWorking,
-        });
-      }
-      entries.push({
-        label: `Remove selected (${selectedCount})`,
-        icon: X,
-        onClick: onBatchRemove,
-        danger: true,
-        disabled: batchWorking,
-      });
-      entries.push({ separator: true });
-      entries.push({ label: "Deselect all", onClick: onClearSelect });
-    } else {
-      if (isError) {
-        entries.push({
-          label: "Retry",
-          icon: ArrowClockwise,
-          onClick: () => onRetry(item.chapter.id),
-          disabled: isRemoving,
-        });
-        entries.push({ separator: true });
-      }
-      entries.push({
-        label: "Move to top",
-        icon: ArrowLineUp,
-        onClick: () => onReorderEdge(item.chapter.id, "top"),
-        disabled: isFirst || isActive,
-      });
-      entries.push({
-        label: "Move to bottom",
-        icon: ArrowLineDown,
-        onClick: () => onReorderEdge(item.chapter.id, "bottom"),
-        disabled: isLast || isActive,
-      });
-      entries.push({ separator: true });
-      entries.push({
-        label: "Move up",
-        icon: ArrowUp,
-        onClick: () => onReorder(item.chapter.id, "up"),
-        disabled: isFirst || isActive,
-      });
-      entries.push({
-        label: "Move down",
-        icon: ArrowDown,
-        onClick: () => onReorder(item.chapter.id, "down"),
-        disabled: isLast || isActive,
-      });
-      entries.push({ separator: true });
-      entries.push({
-        label: "Remove",
-        icon: X,
-        onClick: () => onRemove(item.chapter.id),
-        danger: true,
-        disabled: isRemoving || isActive,
-      });
-    }
-
-    return entries;
-  });
 </script>
 
 <div
@@ -188,10 +33,6 @@
   class:row-selected={isSelected}
   class:row-removing={isRemoving}
   onclick={(e) => { e.stopPropagation(); onSelect(item.chapter.id, e); }}
-  oncontextmenu={openMenu}
-  ontouchstart={onTouchStart}
-  ontouchend={cancelLongPress}
-  ontouchmove={onTouchMove}
 >
   {#if manga?.thumbnailUrl}
     <div class="thumb">
@@ -237,10 +78,6 @@
   </div>
 </div>
 
-{#if menuOpen}
-  <ContextMenu x={menuX} y={menuY} items={menuItems} onClose={() => (menuOpen = false)} />
-{/if}
-
 <style>
   .row {
     display: flex;
@@ -257,123 +94,33 @@
     -webkit-touch-callout: none;
   }
 
-  .row:hover:not(.row-active):not(.row-removing) {
-    border-color: var(--border-strong);
-    background: var(--bg-elevated);
-  }
-
+  .row:hover:not(.row-active):not(.row-removing) { border-color: var(--border-strong); background: var(--bg-elevated); }
   .row.row-active   { border-color: var(--accent-dim); }
   .row.row-error    { border-color: color-mix(in srgb, var(--color-error) 30%, transparent); }
   .row.row-selected { background: var(--bg-elevated); border-color: var(--border-strong); }
   .row.row-removing { opacity: 0.4; pointer-events: none; }
 
-  .thumb {
-    width: 36px;
-    height: 54px;
-    border-radius: var(--radius-sm);
-    overflow: hidden;
-    background: var(--bg-overlay);
-    flex-shrink: 0;
-    border: 1px solid var(--border-dim);
-  }
+  .thumb { width: 36px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-overlay); flex-shrink: 0; border: 1px solid var(--border-dim); }
   :global(.thumb-img) { width: 100%; height: 100%; object-fit: cover; }
 
-  .info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    overflow: hidden;
-    min-width: 0;
-  }
+  .info { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow: hidden; min-width: 0; }
 
-  .manga-title {
-    font-size: var(--text-sm);
-    font-weight: var(--weight-medium);
-    color: var(--text-secondary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+  .manga-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .chapter-name { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
-  .chapter-name {
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .progress-row {
-    display: flex;
-    align-items: center;
-    gap: var(--sp-2);
-  }
-
-  .progress-wrap {
-    flex: 1;
-    height: 2px;
-    background: var(--border-base);
-    border-radius: var(--radius-full);
-    overflow: hidden;
-  }
-
-  .progress-bar {
-    height: 100%;
-    background: var(--accent);
-    border-radius: var(--radius-full);
-    transition: width 0.4s ease;
-    opacity: 0.5;
-  }
+  .progress-row { display: flex; align-items: center; gap: var(--sp-2); }
+  .progress-wrap { flex: 1; height: 2px; background: var(--border-base); border-radius: var(--radius-full); overflow: hidden; }
+  .progress-bar { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.4s ease; opacity: 0.5; }
   .row-active .progress-bar { opacity: 1; }
   .progress-bar.progress-error { background: var(--color-error); opacity: 0.7; }
+  .pages-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; white-space: nowrap; }
 
-  .pages-label {
-    font-family: var(--font-ui);
-    font-size: var(--text-2xs);
-    color: var(--text-faint);
-    letter-spacing: var(--tracking-wide);
-    flex-shrink: 0;
-    white-space: nowrap;
-  }
-
-  .row-right {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: var(--sp-1);
-    flex-shrink: 0;
-  }
-
-  .state-label {
-    font-family: var(--font-ui);
-    font-size: var(--text-2xs);
-    color: var(--text-faint);
-    letter-spacing: var(--tracking-wider);
-    text-transform: uppercase;
-  }
+  .row-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); flex-shrink: 0; }
+  .state-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
   .state-label.state-error { color: var(--color-error); opacity: 0.8; }
 
-  .actions {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-
-  .action-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    border-radius: var(--radius-sm);
-    color: var(--text-faint);
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    transition: color var(--t-base), background var(--t-base);
-  }
+  .actions { display: flex; align-items: center; gap: 2px; }
+  .action-btn { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-sm); color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 0; transition: color var(--t-base), background var(--t-base); }
   .action-btn:hover:not(:disabled) { color: var(--text-secondary); background: var(--bg-overlay); }
   .action-btn:disabled { opacity: 0.25; cursor: default; }
   .action-btn.remove:hover:not(:disabled) { color: var(--color-error); background: var(--color-error-bg); }
diff --git a/src/features/downloads/components/DownloadQueue.svelte b/src/features/downloads/components/DownloadQueue.svelte
index efbe4af..f9f235c 100644
--- a/src/features/downloads/components/DownloadQueue.svelte
+++ b/src/features/downloads/components/DownloadQueue.svelte
@@ -4,33 +4,22 @@
   import type { DownloadQueueItem } from "@types/index";
 
   interface Props {
-    queue:              DownloadQueueItem[];
-    loading:            boolean;
-    isRunning:          boolean;
-    dequeueing:         Set<number>;
-    selected:           Set<number>;
-    batchWorking:       boolean;
-    onRemove:           (chapterId: number) => void;
-    onRetry:            (chapterId: number) => void;
-    onReorder:          (chapterId: number, dir: "up" | "down") => void;
-    onReorderEdge:      (chapterId: number, edge: "top" | "bottom") => void;
-    onSelect:           (chapterId: number, e: MouseEvent) => void;
-    onClearSelect:      () => void;
-    onBatchRemove:      () => void;
-    onBatchRetry:       () => void;
-    onBatchReorder:     (dir: "up" | "down") => void;
-    onBatchReorderEdge: (edge: "top" | "bottom") => void;
+    queue:      DownloadQueueItem[];
+    loading:    boolean;
+    isRunning:  boolean;
+    dequeueing: Set<number>;
+    selected:   Set<number>;
+    onRemove:      (chapterId: number) => void;
+    onRetry:       (chapterId: number) => void;
+    onReorder:     (chapterId: number, dir: "up" | "down") => void;
+    onReorderEdge: (chapterId: number, edge: "top" | "bottom") => void;
+    onSelect:      (chapterId: number, e: MouseEvent) => void;
   }
 
   const {
-    queue, loading, isRunning, dequeueing, selected, batchWorking,
-    onRemove, onRetry, onReorder, onReorderEdge, onSelect, onClearSelect,
-    onBatchRemove, onBatchRetry, onBatchReorder, onBatchReorderEdge,
+    queue, loading, isRunning, dequeueing, selected,
+    onRemove, onRetry, onReorder, onReorderEdge, onSelect,
   }: Props = $props();
-
-  const selectedErrorCount = $derived(
-    queue.filter((i) => selected.has(i.chapter.id) && i.state === "ERROR").length,
-  );
 </script>
 
 {#if loading}
@@ -41,117 +30,23 @@
   <div class="empty">Queue is empty.</div>
 {:else}
   <div class="list">
-    <div class="list-header">
-      <div class="info-wrap">
-        <button class="info-btn" tabindex="-1" aria-label="Selection help">
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
-            <circle cx="6" cy="6" r="5.25" stroke="currentColor" stroke-width="1.5"/>
-            <rect x="5.25" y="5" width="1.5" height="3.5" rx="0.75" fill="currentColor"/>
-            <circle cx="6" cy="3.25" r="0.85" fill="currentColor"/>
-          </svg>
-        </button>
-        <div class="info-popover" role="tooltip">
-          <span>Click to select</span>
-          <span>Shift+click to range select</span>
-          <span>Ctrl+click to toggle</span>
-        </div>
-      </div>
-    </div>
     {#each queue as item, i (item.chapter.id)}
       <DownloadItem
         {item}
-        index={i}
         isActive={i === 0 && isRunning}
-        isFirst={i === 0}
-        isLast={i === queue.length - 1}
         isRemoving={dequeueing.has(item.chapter.id)}
         isSelected={selected.has(item.chapter.id)}
-        selectedCount={selected.size}
-        {selectedErrorCount}
-        {batchWorking}
         {onRemove}
         {onRetry}
         {onReorder}
         {onReorderEdge}
         {onSelect}
-        {onClearSelect}
-        {onBatchRemove}
-        {onBatchRetry}
-        {onBatchReorder}
-        {onBatchReorderEdge}
       />
     {/each}
   </div>
 {/if}
 
 <style>
-  .list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--sp-2);
-  }
-
-  .list-header {
-    display: flex;
-    justify-content: flex-end;
-    padding: 0 var(--sp-1);
-  }
-
-  .info-wrap {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  .info-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 18px;
-    border: none;
-    background: none;
-    padding: 0;
-    cursor: default;
-    color: var(--text-faint);
-    border-radius: var(--radius-sm);
-    transition: color var(--t-base);
-  }
-  .info-btn:hover { color: var(--text-muted); }
-
-  .info-popover {
-    position: absolute;
-    right: 0;
-    top: calc(100% + 6px);
-    background: var(--bg-overlay);
-    border: 1px solid var(--border-dim);
-    border-radius: var(--radius-md);
-    padding: var(--sp-2) var(--sp-3);
-    display: none;
-    flex-direction: column;
-    gap: 4px;
-    white-space: nowrap;
-    z-index: 50;
-    pointer-events: none;
-  }
-
-  .info-popover span {
-    font-family: var(--font-ui);
-    font-size: var(--text-2xs);
-    color: var(--text-faint);
-    letter-spacing: var(--tracking-wide);
-  }
-
-  .info-wrap:hover .info-popover { display: flex; }
-
-  .empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 160px;
-    color: var(--text-faint);
-    font-family: var(--font-ui);
-    font-size: var(--text-xs);
-    letter-spacing: var(--tracking-wide);
-  }
+  .list { display: flex; flex-direction: column; gap: var(--sp-2); }
+  .empty { display: flex; align-items: center; justify-content: center; height: 160px; color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
 </style>
\ No newline at end of file
diff --git a/src/features/downloads/components/Downloads.svelte b/src/features/downloads/components/Downloads.svelte
index 4fad138..6159bd3 100644
--- a/src/features/downloads/components/Downloads.svelte
+++ b/src/features/downloads/components/Downloads.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Play, Pause, Trash, CircleNotch, ArrowClockwise, Bell, BellSlash, Repeat } from "phosphor-svelte";
+  import { ArrowLineUp, ArrowLineDown, X, CaretUp, CaretDown } from "phosphor-svelte";
   import DownloadQueue from "./DownloadQueue.svelte";
   import { downloadStore } from "../store/downloadState.svelte";
   import { formatEta } from "../lib/downloadQueue";
@@ -10,6 +11,11 @@
   });
 
   let selectAnchor = $state<number | null>(null);
+  let moveBy = $state(1);
+
+  const selectedErrorCount = $derived(
+    downloadStore.queue.filter((i) => downloadStore.selected.has(i.chapter.id) && i.state === "ERROR").length,
+  );
 
   function handleSelect(chapterId: number, e: MouseEvent | { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }) {
     const ctrl = e.ctrlKey || e.metaKey;
@@ -39,6 +45,11 @@
       selectAnchor = null;
     }
   }
+
+  function clearSelection() {
+    downloadStore.clearSelection();
+    selectAnchor = null;
+  }
 </script>
 
 <div class="root">
@@ -103,148 +114,119 @@
     </div>
   </div>
 
-  <div class="content" onclick={handleClickOff}>
-    <div class="status-bar">
+  <div class="bar-wrap">
+    <div class="status-bar" onclick={handleClickOff} role="presentation">
       <div class="status-dot" class:active={downloadStore.isRunning}></div>
       <span class="status-text">
         {downloadStore.togglingPlay
           ? (downloadStore.isRunning ? "Pausing…" : "Starting…")
           : downloadStore.isRunning ? "Downloading" : "Paused"}
       </span>
-      <div class="status-right">
-        {#if downloadStore.isRunning && downloadStore.eta !== null}
-          <span class="status-eta">{formatEta(downloadStore.eta)} left</span>
-        {/if}
-        <span class="status-count">{downloadStore.queue.length} queued</span>
-      </div>
+      {#if downloadStore.selected.size > 0}
+        <div class="sel-controls">
+          <button class="sel-action-btn" disabled={downloadStore.batchWorking} onclick={(e) => { e.stopPropagation(); downloadStore.reorderSelectedToEdge("top"); }} title="Move to top">
+            <ArrowLineUp size={12} weight="bold" />
+          </button>
+          <div class="move-step" onclick={(e) => e.stopPropagation()} role="presentation">
+            <button class="sel-action-btn" disabled={downloadStore.batchWorking} onclick={(e) => { e.stopPropagation(); downloadStore.reorderSelected("up", moveBy); }} title="Move up">
+              <CaretUp size={12} weight="bold" />
+            </button>
+            <input
+              class="move-input"
+              type="number"
+              min="1"
+              bind:value={moveBy}
+              onclick={(e) => e.stopPropagation()}
+              onkeydown={(e) => e.stopPropagation()}
+            />
+            <button class="sel-action-btn" disabled={downloadStore.batchWorking} onclick={(e) => { e.stopPropagation(); downloadStore.reorderSelected("down", moveBy); }} title="Move down">
+              <CaretDown size={12} weight="bold" />
+            </button>
+          </div>
+          <button class="sel-action-btn" disabled={downloadStore.batchWorking} onclick={(e) => { e.stopPropagation(); downloadStore.reorderSelectedToEdge("bottom"); }} title="Move to bottom">
+            <ArrowLineDown size={12} weight="bold" />
+          </button>
+          {#if selectedErrorCount > 0}
+            <button class="sel-action-btn" disabled={downloadStore.batchWorking} onclick={(e) => { e.stopPropagation(); downloadStore.retrySelected(); }} title="Retry errors">
+              <ArrowClockwise size={12} weight="bold" />
+            </button>
+          {/if}
+          <button class="sel-action-btn sel-action-danger" disabled={downloadStore.batchWorking} onclick={(e) => { e.stopPropagation(); downloadStore.dequeueSelected(); }} title="Remove selected">
+            <X size={12} weight="bold" />
+          </button>
+        </div>
+        <div class="bar-sep"></div>
+        <span class="status-count">{downloadStore.selected.size} selected</span>
+      {:else}
+        <div class="status-right">
+          {#if downloadStore.isRunning && downloadStore.eta !== null}
+            <span class="status-eta">{formatEta(downloadStore.eta)} left</span>
+          {/if}
+          <span class="status-count">{downloadStore.queue.length} queued</span>
+        </div>
+      {/if}
     </div>
+  </div>
 
+  <div class="content" onclick={handleClickOff}>
     <DownloadQueue
       queue={downloadStore.queue}
       loading={downloadStore.loading}
       isRunning={downloadStore.isRunning}
       dequeueing={downloadStore.dequeueing}
       selected={downloadStore.selected}
-      batchWorking={downloadStore.batchWorking}
       onRemove={(id) => downloadStore.dequeue(id)}
       onRetry={(id) => downloadStore.retryOne(id)}
       onReorder={(id, dir) => downloadStore.reorder(id, dir)}
       onReorderEdge={(id, edge) => downloadStore.reorderToEdge(id, edge)}
       onSelect={handleSelect}
-      onClearSelect={() => { downloadStore.clearSelection(); selectAnchor = null; }}
-      onBatchRemove={() => downloadStore.dequeueSelected()}
-      onBatchRetry={() => downloadStore.retrySelected()}
-      onBatchReorder={(dir) => downloadStore.reorderSelected(dir)}
-      onBatchReorderEdge={(edge) => downloadStore.reorderSelectedToEdge(edge)}
     />
   </div>
 </div>
 
 <style>
-  .root {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    animation: fadeIn 0.14s ease both;
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--sp-4) var(--sp-6);
-    border-bottom: 1px solid var(--border-dim);
-    flex-shrink: 0;
-  }
-
-  .heading {
-    font-family: var(--font-ui);
-    font-size: var(--text-xs);
-    font-weight: var(--weight-normal);
-    color: var(--text-faint);
-    letter-spacing: var(--tracking-wider);
-    text-transform: uppercase;
-  }
+  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
 
+  .header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+  .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
   .header-actions { display: flex; gap: var(--sp-2); }
 
-  .content {
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--sp-5) var(--sp-6) var(--sp-6);
-    display: flex;
-    flex-direction: column;
-    gap: var(--sp-4);
-  }
+  .bar-wrap { padding: var(--sp-4) var(--sp-6); flex-shrink: 0; }
 
-  .icon-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: var(--radius-md);
-    border: 1px solid var(--border-dim);
-    color: var(--text-muted);
-    background: none;
-    cursor: pointer;
-    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
-  }
+  .status-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-surface, var(--bg-raised)); border: 1px solid var(--border-strong, var(--border-dim)); border-radius: var(--radius-md); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
+  .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; transition: background var(--t-base); }
+  .status-dot.active { background: var(--accent); animation: pulse 1.6s ease infinite; }
+  .status-text { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); flex: 1; letter-spacing: var(--tracking-wide); }
+  .status-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
+  .status-eta { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); opacity: 0.8; }
+  .status-count { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+
+  .sel-controls { display: flex; align-items: center; gap: var(--sp-2); }
+  .status-bar { cursor: default; }
+  .bar-sep { width: 1px; height: 12px; background: var(--border-dim); flex-shrink: 0; }
+  .sel-count { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: var(--tracking-wide); white-space: nowrap; }
+  .sel-text-btn { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm); transition: color var(--t-base); white-space: nowrap; }
+  .sel-text-btn:hover { color: var(--text-primary); }
+  .sel-action-btn { display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: var(--text-xs); padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: var(--bg-overlay); color: var(--text-muted); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); white-space: nowrap; }
+  .sel-action-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
+  .sel-action-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+  .sel-action-danger:hover:not(:disabled) { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 40%, transparent); background: color-mix(in srgb, var(--color-error) 8%, transparent); }
+
+  .content { flex: 1; overflow-y: auto; padding: 0 var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
+
+  .icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); color: var(--text-muted); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
   .icon-btn:hover:not(:disabled):not(.active) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); }
   .icon-btn.active:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-muted); }
   .icon-btn:disabled { opacity: 0.3; cursor: default; }
   .icon-btn.loading { border-color: var(--accent-dim); color: var(--accent-fg); background: var(--accent-muted); }
   .icon-btn.active  { border-color: var(--accent-dim); color: var(--accent-fg); background: var(--accent-muted); }
 
-  .status-bar {
-    display: flex;
-    align-items: center;
-    gap: var(--sp-3);
-    padding: var(--sp-3);
-    background: var(--bg-raised);
-    border: 1px solid var(--border-dim);
-    border-radius: var(--radius-md);
-  }
-
-  .status-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--text-faint);
-    flex-shrink: 0;
-    transition: background var(--t-base);
-  }
-  .status-dot.active { background: var(--accent); animation: pulse 1.6s ease infinite; }
-
-  .status-text {
-    font-family: var(--font-ui);
-    font-size: var(--text-xs);
-    color: var(--text-muted);
-    flex: 1;
-    letter-spacing: var(--tracking-wide);
-  }
-
-  .status-right {
-    display: flex;
-    align-items: center;
-    gap: var(--sp-3);
-  }
-
-  .status-eta {
-    font-family: var(--font-ui);
-    font-size: var(--text-xs);
-    color: var(--accent-fg);
-    letter-spacing: var(--tracking-wide);
-    opacity: 0.8;
-  }
-
-  .status-count {
-    font-family: var(--font-ui);
-    font-size: var(--text-xs);
-    color: var(--text-faint);
-    letter-spacing: var(--tracking-wide);
-  }
+  .move-step { display: flex; align-items: center; border: 1px solid var(--border-dim); border-radius: var(--radius-sm); overflow: hidden; }
+  .move-step .sel-action-btn { border: none; border-radius: 0; background: none; padding: 3px 6px; }
+  .move-step .sel-action-btn:hover:not(:disabled) { background: var(--bg-overlay); border-color: transparent; }
+  .move-input { width: 28px; background: none; border: none; border-left: 1px solid var(--border-dim); border-right: 1px solid var(--border-dim); color: var(--text-muted); font-family: var(--font-ui); font-size: var(--text-xs); text-align: center; padding: 2px 0; outline: none; -moz-appearance: textfield; }
+  .move-input::-webkit-outer-spin-button, .move-input::-webkit-inner-spin-button { -webkit-appearance: none; }
+  .move-input:focus { color: var(--text-primary); }
 
   @keyframes pulse  { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }
   @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
diff --git a/src/features/downloads/store/downloadState.svelte.ts b/src/features/downloads/store/downloadState.svelte.ts
index a46e69d..f16aded 100644
--- a/src/features/downloads/store/downloadState.svelte.ts
+++ b/src/features/downloads/store/downloadState.svelte.ts
@@ -284,25 +284,29 @@ class DownloadStore {
     if (this.batchWorking || this.selected.size === 0) return;
     this.batchWorking = true;
 
-    const pinned   = this.queue.filter((i) => this.selected.has(i.chapter.id));
-    const rest     = this.queue.filter((i) => !this.selected.has(i.chapter.id));
-    const newQueue = edge === "top" ? [...pinned, ...rest] : [...rest, ...pinned];
+    const first    = this.isRunning ? 1 : 0;
+    const active   = this.queue.slice(0, first);
+    const moveable = this.queue.slice(first);
+    const pinned   = moveable.filter((i) => this.selected.has(i.chapter.id));
+    const rest     = moveable.filter((i) => !this.selected.has(i.chapter.id));
+    const newQueue = edge === "top"
+      ? [...active, ...pinned, ...rest]
+      : [...active, ...rest, ...pinned];
     if (this.status) this.status = { ...this.status, queue: newQueue };
 
-    const first = this.isRunning ? 1 : 0;
-    const last  = this.queue.length - 1;
+    const last = this.queue.length - 1;
 
     try {
       if (edge === "top") {
-        for (const item of [...pinned].reverse()) {
+        for (let i = 0; i < pinned.length; i++) {
           await gql<{ reorderChapterDownload: { downloadStatus: DownloadStatus } }>(
-            REORDER_DOWNLOAD, { chapterId: item.chapter.id, to: first },
+            REORDER_DOWNLOAD, { chapterId: pinned[i].chapter.id, to: first + i },
           );
         }
       } else {
-        for (const item of pinned) {
+        for (let i = 0; i < pinned.length; i++) {
           await gql<{ reorderChapterDownload: { downloadStatus: DownloadStatus } }>(
-            REORDER_DOWNLOAD, { chapterId: item.chapter.id, to: last },
+            REORDER_DOWNLOAD, { chapterId: pinned[i].chapter.id, to: last - (pinned.length - 1 - i) },
           );
         }
       }