diff options
Diffstat (limited to 'ui/src')
| -rw-r--r-- | ui/src/components/VersionsView.svelte | 20 |
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 |