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

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>