Merge pull request #17 from HsiangNianian/feat/display-download-rate-and-progress-with-concurrency

2 files changed, 48 insertions, 18 deletions

diff --git a/ui/src/components/SettingsView.svelte b/ui/src/components/SettingsView.svelte
index 9f260c1..dcb947f 100644
--- a/ui/src/components/SettingsView.svelte
+++ b/ui/src/components/SettingsView.svelte
@@ -117,6 +117,30 @@
       </div>
     </div>
 
+    <!-- Download Settings -->
+    <div class="bg-zinc-800/50 p-6 rounded-lg border border-zinc-700">
+      <h3
+        class="block text-sm font-bold text-zinc-400 mb-4 uppercase tracking-wide"
+        >Download Settings</h3>
+      <div>
+        <label for="download-threads" class="block text-xs text-zinc-500 mb-1"
+          >Concurrent Download Threads</label
+        >
+        <input
+          id="download-threads"
+          bind:value={settingsState.settings.download_threads}
+          type="number"
+          min="1"
+          max="128"
+          step="1"
+          class="bg-zinc-950 text-white w-full p-3 rounded border border-zinc-700 focus:border-indigo-500 outline-none"
+        />
+        <p class="text-xs text-zinc-500 mt-2">
+          Number of files to download simultaneously. Higher values can speed up downloads but may consume more bandwidth and system resources. Recommended: 16-64 (max: 128 for advanced users)
+        </p>
+      </div>
+    </div>
+
     <div class="pt-4">
       <button
         onclick={() => settingsState.saveSettings()}
diff --git a/ui/src/components/StatusToast.svelte b/ui/src/components/StatusToast.svelte
index b1feffc..0d68778 100644
--- a/ui/src/components/StatusToast.svelte
+++ b/ui/src/components/StatusToast.svelte
@@ -3,28 +3,34 @@
 </script>
 
 {#if uiState.status !== "Ready"}
-  <div
-    class="absolute top-12 right-12 bg-zinc-800/90 backdrop-blur border border-zinc-600 p-4 rounded-lg shadow-2xl max-w-sm animate-in fade-in slide-in-from-top-4 duration-300 z-50 group"
-  >
-    <div class="flex justify-between items-start mb-1">
-      <div class="text-xs text-zinc-400 uppercase font-bold">Status</div>
-      <button
-        onclick={() => uiState.setStatus("Ready")}
-        class="text-zinc-500 hover:text-white transition -mt-1 -mr-1 p-1"
-      >
-        ✕
-      </button>
+  {#key uiState.status}
+    <div
+      class="absolute top-12 right-12 bg-zinc-800/90 backdrop-blur border border-zinc-600 p-4 rounded-lg shadow-2xl max-w-sm animate-in fade-in slide-in-from-top-4 duration-300 z-50 group"
+    >
+      <div class="flex justify-between items-start mb-1">
+        <div class="text-xs text-zinc-400 uppercase font-bold">Status</div>
+        <button
+          onclick={() => uiState.setStatus("Ready")}
+          class="text-zinc-500 hover:text-white transition -mt-1 -mr-1 p-1"
+        >
+          ✕
+        </button>
+      </div>
+      <div class="font-mono text-sm whitespace-pre-wrap mb-2">{uiState.status}</div>
+      <div class="w-full bg-zinc-700/50 h-1 rounded-full overflow-hidden">
+        <div
+          class="h-full bg-indigo-500 origin-left w-full progress-bar"
+        ></div>
+      </div>
     </div>
-    <div class="font-mono text-sm whitespace-pre-wrap mb-2">{uiState.status}</div>
-    <div class="w-full bg-zinc-700/50 h-1 rounded-full overflow-hidden">
-      <div
-        class="h-full bg-indigo-500 animate-[progress_5s_linear_forwards] origin-left w-full"
-      ></div>
-    </div>
-  </div>
+  {/key}
 {/if}
 
 <style>
+  .progress-bar {
+    animation: progress 5s linear forwards;
+  }
+  
   @keyframes progress {
     from {
       transform: scaleX(1);