From 908f5679fd180a9f97ec858bb91c1038df13a792 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sat, 28 Mar 2026 19:44:36 +0500
Subject: [PATCH] fix(ui): defer catalogue filter navigation to explicit Apply
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed onchange→navigateWithFilters from all three selects — the
immediate navigation on every change was the root cause of both bugs:
1. Filters applied before the user finished selecting all options.
2. Svelte 5 bind:value updates state after onchange fires, so the
   navigateWithFilters call read stale values → wrong URL params → no results.

Renamed navigateWithFilters to applyFilters (no overrides arg needed).
Added an amber Apply button next to Reset; selects now only update local
state until the user presses Apply.
---
 ui/src/routes/catalogue/+page.svelte | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/ui/src/routes/catalogue/+page.svelte b/ui/src/routes/catalogue/+page.svelte
index 0416075..1dde24f 100644
--- a/ui/src/routes/catalogue/+page.svelte
+++ b/ui/src/routes/catalogue/+page.svelte
@@ -22,11 +22,11 @@
 		filterStatus = data.status;
 	});
 
-	function navigateWithFilters(overrides: { sort?: string; genre?: string; status?: string }) {
+	function applyFilters() {
 		const params = new URLSearchParams();
-		params.set('sort', overrides.sort ?? filterSort);
-		params.set('genre', overrides.genre ?? filterGenre);
-		params.set('status', overrides.status ?? filterStatus);
+		params.set('sort', filterSort);
+		params.set('genre', filterGenre);
+		params.set('status', filterStatus);
 		params.set('page', '1');
 		goto(`/catalogue?${params.toString()}`);
 	}
@@ -414,7 +414,6 @@
 					id="filter-sort"
 					name="sort"
 					bind:value={filterSort}
-					onchange={() => navigateWithFilters({ sort: filterSort })}
 					class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 w-full"
 				>
 					{#each sorts as s}
@@ -429,7 +428,6 @@
 					id="filter-genre"
 					name="genre"
 					bind:value={filterGenre}
-					onchange={() => navigateWithFilters({ genre: filterGenre })}
 					disabled={isRankView}
 					class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed w-full"
 				>
@@ -445,7 +443,6 @@
 					id="filter-status"
 					name="status"
 					bind:value={filterStatus}
-					onchange={() => navigateWithFilters({ status: filterStatus })}
 					disabled={isRankView}
 					class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed w-full"
 				>
@@ -464,6 +461,13 @@
 			<a href="/catalogue" class="px-4 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors">
 				Reset
 			</a>
+			<button
+				type="button"
+				onclick={applyFilters}
+				class="px-4 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors"
+			>
+				Apply
+			</button>
 		</div>
 	</form>
 {/if}