feat: implement version search functionality in VersionsView

1 files changed, 19 insertions, 1 deletions

diff --git a/ui/src/components/VersionsView.svelte b/ui/src/components/VersionsView.svelte
index 8c0ddfe..1f72d32 100644
--- a/ui/src/components/VersionsView.svelte
+++ b/ui/src/components/VersionsView.svelte
@@ -1,14 +1,32 @@
 <script lang="ts">
   import { gameState } from "../stores/game.svelte";
+
+  let searchQuery = $state("");
+
+  let filteredVersions = $derived(
+    gameState.versions.filter((v) =>
+      v.id.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+  );
 </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}
+      <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