Merge pull request #20 from HsiangNianian/dev

3 files changed, 70 insertions, 19 deletions

diff --git a/ui/src/components/SettingsView.svelte b/ui/src/components/SettingsView.svelte
index 9f260c1..801970b 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 concurrent download threads (1-128). Higher values increase download speed but use more bandwidth and system resources. Default: 32
+        </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);
diff --git a/ui/src/components/VersionsView.svelte b/ui/src/components/VersionsView.svelte
index 8c0ddfe..98261b8 100644
--- a/ui/src/components/VersionsView.svelte
+++ b/ui/src/components/VersionsView.svelte
@@ -1,14 +1,35 @@
 <script lang="ts">
   import { gameState } from "../stores/game.svelte";
+
+  let searchQuery = $state("");
+  let normalizedQuery = $derived(
+    searchQuery.trim().toLowerCase().replace(/。/g, ".")
+  );
+
+  let filteredVersions = $derived(
+    gameState.versions.filter((v) =>
+      v.id.toLowerCase().includes(normalizedQuery)
+    )
+  );
 </script>
 
 <div class="p-8 h-full overflow-y-auto bg-zinc-900">
   <h2 class="text-3xl font-bold mb-6">Versions</h2>
+
+  <input
+    type="text"
+    placeholder="Search versions..."
+    class="w-full p-3 mb-4 bg-zinc-800 border border-zinc-700 rounded text-white focus:outline-none focus:border-green-500 transition-colors"
+    bind:value={searchQuery}
+  />
+
   <div class="grid gap-2">
     {#if gameState.versions.length === 0}
       <div class="text-zinc-500">Loading versions...</div>
+    {:else if filteredVersions.length === 0 && normalizedQuery.length > 0}
+      <div class="text-zinc-500">No versions found matching "{searchQuery}"</div>
     {:else}
-      {#each gameState.versions as version}
+      {#each filteredVersions as version}
         <button
           class="flex items-center justify-between p-4 bg-zinc-800 rounded hover:bg-zinc-700 transition text-left border border-zinc-700 {gameState.selectedVersion ===
           version.id