Feat: Reworked ENTIRE Project for Readability

src/features/downloads/components/DownloadQueue.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { CircleNotch } from "phosphor-svelte";
+  import DownloadItem from "./DownloadItem.svelte";
+  import type { DownloadQueueItem } from "@types/index";
+
+  interface Props {
+    queue:      DownloadQueueItem[];
+    loading:    boolean;
+    isRunning:  boolean;
+    dequeueing: Set<number>;
+    onRemove:   (chapterId: number) => void;
+  }
+
+  const { queue, loading, isRunning, dequeueing, onRemove }: Props = $props();
+</script>
+
+{#if loading}
+  <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}
+  <div class="list">
+    {#each queue as item, i (item.chapter.id)}
+      <DownloadItem
+        {item}
+        isActive={i === 0 && isRunning}
+        isRemoving={dequeueing.has(item.chapter.id)}
+        {onRemove}
+      />
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .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>