Feat: Extension of Download Features, Batch Select, Error/Retry (#38)

src/features/downloads/components/DownloadItem.svelte

@@ -1,51 +1,224 @@
 <script lang="ts">
-  import { CircleNotch, X } from "phosphor-svelte";
+  import { CircleNotch, ArrowUp, ArrowDown, 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;
-    isActive:   boolean;
-    isRemoving: boolean;
-    onRemove:   (chapterId: number) => void;
+    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;
+    onSelect:           (chapterId: number, e: MouseEvent | { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }) => void;
+    onBatchRemove:  () => void;
+    onBatchRetry:   () => void;
+    onBatchReorder: (dir: "up" | "down") => void;
+    onClearSelect:  () => void;
   }
 
-  const { item, isActive, isRemoving, onRemove }: Props = $props();
+  const {
+    item, index, isActive, isFirst, isLast, isRemoving,
+    isSelected, selectedCount, selectedErrorCount, batchWorking,
+    onRemove, onRetry, onReorder, onSelect,
+    onBatchRemove, onBatchRetry, onBatchReorder, onClearSelect,
+  }: Props = $props();
 
-  const manga  = $derived(item.chapter.manga);
-  const pages  = $derived(item.chapter.pageCount ?? 0);
-  const prog   = $derived(pageProgress(item.progress, pages));
+  const manga   = $derived(item.chapter.manga);
+  const pages   = $derived(item.chapter.pageCount ?? 0);
+  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 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 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 class="row" class:row-active={isActive} class:row-removing={isRemoving}>
+<div
+  class="row"
+  class:row-active={isActive}
+  class:row-error={isError}
+  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">
       <Thumbnail src={manga.thumbnailUrl} alt={manga.title} class="thumb-img" />
     </div>
   {/if}
+
   <div class="info">
     {#if manga?.title}<span class="manga-title">{manga.title}</span>{/if}
     <span class="chapter-name">{item.chapter.name}</span>
     {#if pages > 0}
-      <span class="pages-label">{isActive ? `${prog.done} / ${prog.total} pages` : `${prog.total} pages`}</span>
-    {/if}
-    {#if isActive}
-      <div class="progress-wrap">
-        <div class="progress-bar" style="width:{Math.round(item.progress * 100)}%"></div>
+      <div class="progress-row">
+        <div class="progress-wrap">
+          <div class="progress-bar" class:progress-error={isError} style="width:{pct}%"></div>
+        </div>
+        <span class="pages-label">
+          {#if isActive}
+            {prog.done}/{prog.total}
+          {:else if isError}
+            failed · {item.tries} {item.tries === 1 ? "try" : "tries"}
+          {:else}
+            {prog.total}p
+          {/if}
+        </span>
       </div>
     {/if}
   </div>
+
   <div class="row-right">
-    <span class="state-label">{item.state}</span>
-    {#if !isActive}
-      <button class="remove-btn" onclick={() => onRemove(item.chapter.id)} disabled={isRemoving} title="Remove from queue">
-        {#if isRemoving}<CircleNotch size={11} weight="light" class="anim-spin" />{:else}<X size={12} weight="light" />{/if}
-      </button>
-    {/if}
+    <span class="state-label" class:state-error={isError}>{item.state}</span>
+    <div class="actions">
+      {#if isError}
+        <button class="action-btn retry" onclick={(e) => { e.stopPropagation(); onRetry(item.chapter.id); }} disabled={isRemoving} title="Retry">
+          {#if isRemoving}<CircleNotch size={11} weight="light" class="anim-spin" />{:else}<ArrowClockwise size={11} weight="bold" />{/if}
+        </button>
+      {/if}
+      {#if !isActive}
+        <button class="action-btn" onclick={(e) => { e.stopPropagation(); onReorder(item.chapter.id, "up"); }} disabled={isFirst} title="Move up">
+          <ArrowUp size={11} weight="light" />
+        </button>
+        <button class="action-btn" onclick={(e) => { e.stopPropagation(); onReorder(item.chapter.id, "down"); }} disabled={isLast} title="Move down">
+          <ArrowDown size={11} weight="light" />
+        </button>
+        <button class="action-btn remove" onclick={(e) => { e.stopPropagation(); onRemove(item.chapter.id); }} disabled={isRemoving} title="Remove">
+          {#if isRemoving}<CircleNotch size={11} weight="light" class="anim-spin" />{:else}<X size={12} weight="light" />{/if}
+        </button>
+      {/if}
+    </div>
   </div>
 </div>
 
+{#if menuOpen}
+  <ContextMenu x={menuX} y={menuY} items={menuItems} onClose={() => (menuOpen = false)} />
+{/if}
+
 <style>
   .row {
     display: flex;
@@ -55,9 +228,16 @@
     background: var(--bg-raised);
     border: 1px solid var(--border-dim);
     border-radius: var(--radius-md);
-    transition: border-color var(--t-fast), opacity var(--t-base);
+    transition: border-color var(--t-fast), opacity var(--t-base), background var(--t-fast);
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
   }
-  .row.row-active  { border-color: var(--accent-dim); }
+
+  .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 {
@@ -75,10 +255,11 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 3px;
+    gap: 4px;
     overflow: hidden;
     min-width: 0;
   }
+
   .manga-title {
     font-size: var(--text-sm);
     font-weight: var(--weight-medium);
@@ -87,6 +268,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
   .chapter-name {
     font-size: var(--text-xs);
     color: var(--text-muted);
@@ -94,25 +276,38 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .pages-label {
-    font-family: var(--font-ui);
-    font-size: var(--text-2xs);
-    color: var(--text-faint);
-    letter-spacing: var(--tracking-wide);
+
+  .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;
-    margin-top: 4px;
   }
+
   .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;
   }
 
   .row-right {
@@ -122,6 +317,7 @@
     gap: var(--sp-1);
     flex-shrink: 0;
   }
+
   .state-label {
     font-family: var(--font-ui);
     font-size: var(--text-2xs);
@@ -129,8 +325,15 @@
     letter-spacing: var(--tracking-wider);
     text-transform: uppercase;
   }
+  .state-label.state-error { color: var(--color-error); opacity: 0.8; }
 
-  .remove-btn {
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .action-btn {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -138,8 +341,14 @@
     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);
   }
-  .remove-btn:hover:not(:disabled) { color: var(--color-error); background: var(--color-error-bg); }
-  .remove-btn:disabled { opacity: 0.5; cursor: default; }
-</style>
+  .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); }
+  .action-btn.retry:hover:not(:disabled)  { color: var(--accent-fg); background: var(--accent-muted); }
+</style>

src/features/downloads/components/DownloadQueue.svelte

@@ -4,18 +4,37 @@
   import type { DownloadQueueItem } from "@types/index";
 
   interface Props {
-    queue:      DownloadQueueItem[];
-    loading:    boolean;
-    isRunning:  boolean;
-    dequeueing: Set<number>;
-    onRemove:   (chapterId: number) => void;
+    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;
+    onSelect:     (chapterId: number, e: MouseEvent) => void;
+    onClearSelect: () => void;
+    onBatchRemove: () => void;
+    onBatchRetry:  () => void;
+    onBatchReorder: (dir: "up" | "down") => void;
   }
 
-  const { queue, loading, isRunning, dequeueing, onRemove }: Props = $props();
+  const {
+    queue, loading, isRunning, dequeueing, selected, batchWorking,
+    onRemove, onRetry, onReorder, onSelect, onClearSelect,
+    onBatchRemove, onBatchRetry, onBatchReorder,
+  }: Props = $props();
+
+  const selectedErrorCount = $derived(
+    queue.filter((i) => selected.has(i.chapter.id) && i.state === "ERROR").length,
+  );
 </script>
 
 {#if loading}
-  <div class="empty"><CircleNotch size={16} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
+  <div class="empty">
+    <CircleNotch size={16} weight="light" class="anim-spin" style="color:var(--text-faint)" />
+  </div>
 {:else if queue.length === 0}
   <div class="empty">Queue is empty.</div>
 {:else}
@@ -23,9 +42,23 @@
     {#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}
+        {onSelect}
+        {onClearSelect}
+        {onBatchRemove}
+        {onBatchRetry}
+        {onBatchReorder}
       />
     {/each}
   </div>
@@ -48,4 +81,4 @@
     font-size: var(--text-xs);
     letter-spacing: var(--tracking-wide);
   }
-</style>
+</style>

src/features/downloads/components/Downloads.svelte

@@ -1,38 +1,90 @@
 <script lang="ts">
-  import { Play, Pause, Trash, CircleNotch } from "phosphor-svelte";
+  import { Play, Pause, Trash, CircleNotch, ArrowClockwise } from "phosphor-svelte";
   import DownloadQueue from "./DownloadQueue.svelte";
   import { downloadStore } from "../store/downloadState.svelte";
+  import { formatEta } from "../lib/downloadQueue";
 
   $effect(() => {
     downloadStore.poll();
     const interval = setInterval(() => downloadStore.poll(), 2000);
     return () => clearInterval(interval);
   });
+
+  let selectAnchor = $state<number | null>(null);
+
+  function handleSelect(chapterId: number, e: MouseEvent | { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }) {
+    const ctrl = e.ctrlKey || e.metaKey;
+
+    if (e.shiftKey && selectAnchor !== null) {
+      downloadStore.selectRange(selectAnchor, chapterId);
+    } else if (ctrl) {
+      downloadStore.toggleSelect(chapterId);
+      selectAnchor = chapterId;
+    } else {
+      if (downloadStore.selected.size > 1) {
+        downloadStore.toggleSelect(chapterId);
+        selectAnchor = chapterId;
+      } else if (downloadStore.selected.size === 1 && downloadStore.selected.has(chapterId)) {
+        downloadStore.clearSelection();
+        selectAnchor = null;
+      } else {
+        downloadStore.selectOnly(chapterId);
+        selectAnchor = chapterId;
+      }
+    }
+  }
+
+  function handleClickOff() {
+    if (downloadStore.selected.size > 0) {
+      downloadStore.clearSelection();
+      selectAnchor = null;
+    }
+  }
 </script>
 
 <div class="root">
   <div class="header">
     <h1 class="heading">Downloads</h1>
     <div class="header-actions">
-      <button class="icon-btn" class:loading={downloadStore.togglingPlay}
+      {#if downloadStore.hasErrored}
+        <button
+          class="icon-btn"
+          onclick={() => downloadStore.retryAllErrored()}
+          disabled={downloadStore.batchWorking}
+          title="Retry all errored"
+        >
+          {#if downloadStore.batchWorking}
+            <CircleNotch size={14} weight="light" class="anim-spin" />
+          {:else}
+            <ArrowClockwise size={14} weight="bold" />
+          {/if}
+        </button>
+      {/if}
+      <button
+        class="icon-btn"
+        class:loading={downloadStore.togglingPlay}
         onclick={() => downloadStore.togglePlay()}
         disabled={downloadStore.togglingPlay || (downloadStore.queue.length === 0 && !downloadStore.isRunning)}
-        title={downloadStore.isRunning ? "Pause" : "Resume"}>
+        title={downloadStore.isRunning ? "Pause" : "Resume"}
+      >
         {#if downloadStore.togglingPlay}<CircleNotch size={14} weight="light" class="anim-spin" />
         {:else if downloadStore.isRunning}<Pause size={14} weight="fill" />
         {:else}<Play size={14} weight="fill" />{/if}
       </button>
-      <button class="icon-btn" class:loading={downloadStore.clearing}
+      <button
+        class="icon-btn"
+        class:loading={downloadStore.clearing}
         onclick={() => downloadStore.clear()}
         disabled={downloadStore.clearing || downloadStore.queue.length === 0}
-        title="Clear queue">
+        title="Clear queue"
+      >
         {#if downloadStore.clearing}<CircleNotch size={14} weight="light" class="anim-spin" />
         {:else}<Trash size={14} weight="regular" />{/if}
       </button>
     </div>
   </div>
 
-  <div class="content">
+  <div class="content" onclick={handleClickOff}>
     <div class="status-bar">
       <div class="status-dot" class:active={downloadStore.isRunning}></div>
       <span class="status-text">
@@ -40,7 +92,12 @@
           ? (downloadStore.isRunning ? "Pausing…" : "Starting…")
           : downloadStore.isRunning ? "Downloading" : "Paused"}
       </span>
-      <span class="status-count">{downloadStore.queue.length} queued</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>
     </div>
 
     <DownloadQueue
@@ -48,7 +105,16 @@
       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)}
+      onSelect={handleSelect}
+      onClearSelect={() => { downloadStore.clearSelection(); selectAnchor = null; }}
+      onBatchRemove={() => downloadStore.dequeueSelected()}
+      onBatchRetry={() => downloadStore.retrySelected()}
+      onBatchReorder={(dir) => downloadStore.reorderSelected(dir)}
     />
   </div>
 </div>
@@ -70,6 +136,7 @@
     border-bottom: 1px solid var(--border-dim);
     flex-shrink: 0;
   }
+
   .heading {
     font-family: var(--font-ui);
     font-size: var(--text-xs);
@@ -78,6 +145,7 @@
     letter-spacing: var(--tracking-wider);
     text-transform: uppercase;
   }
+
   .header-actions { display: flex; gap: var(--sp-2); }
 
   .content {
@@ -98,6 +166,8 @@
     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) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); }
@@ -113,6 +183,7 @@
     border: 1px solid var(--border-dim);
     border-radius: var(--radius-md);
   }
+
   .status-dot {
     width: 6px;
     height: 6px;
@@ -130,6 +201,21 @@
     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);
@@ -139,4 +225,4 @@
 
   @keyframes pulse  { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }
   @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
-</style>
+</style>