From 2c435e96ec8a1a110ba5a65eac443ef427bab92d Mon Sep 17 00:00:00 2001
From: Natsuu <natsukawa247@outlook.com>
Date: Wed, 14 Jan 2026 04:27:50 +0000
Subject: feat: implement version search functionality in VersionsView

---
 ui/src/components/VersionsView.svelte | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

(limited to 'ui/src/components/VersionsView.svelte')

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
-- 
cgit v1.2.3-70-g09d2

