From b363c151a54a1c4ee017c31f24c282b533cd9c09 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sat, 28 Mar 2026 19:01:58 +0500
Subject: [PATCH] fix(ui): fix catalogue filters in Svelte 5; improve build
 badge visibility

- Catalogue filter selects: replace value= initializer with bind:value +
  onchange goto() so filters navigate immediately on change (no Apply button)
- Add selected= on each <option> for correct DOM initialisation in Svelte 5
- Build badge: give distinct bg-zinc-800 pill, visible zinc-300/400/500 text
  instead of zinc-700/zinc-800 which blended into the footer background
---
 ui/src/routes/+layout.svelte         |  8 ++---
 ui/src/routes/catalogue/+page.svelte | 46 ++++++++++++++++++++--------
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index ff8e248..c9a45c6 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -434,16 +434,16 @@
 			<span>&copy; {new Date().getFullYear()} libnovel</span>
 		</div>
 		<!-- Build version / commit SHA -->
-		<div class="text-zinc-700 tabular-nums font-mono">
+		<div class="text-xs tabular-nums font-mono px-2 py-0.5 rounded bg-zinc-800 border border-zinc-700">
 			{#if env.PUBLIC_BUILD_VERSION && env.PUBLIC_BUILD_VERSION !== 'dev'}
-				<span title="Build version">{env.PUBLIC_BUILD_VERSION}</span>
+				<span class="text-zinc-300" title="Build version">{env.PUBLIC_BUILD_VERSION}</span>
 				{#if env.PUBLIC_BUILD_COMMIT && env.PUBLIC_BUILD_COMMIT !== 'unknown'}
-					<span class="text-zinc-800 select-all" title="Commit SHA"
+					<span class="text-zinc-500 select-all" title="Commit SHA"
 						>+{env.PUBLIC_BUILD_COMMIT.slice(0, 7)}</span
 					>
 				{/if}
 			{:else}
-				<span class="text-zinc-800">dev</span>
+				<span class="text-zinc-400">dev</span>
 			{/if}
 		</div>
 		</div>
diff --git a/ui/src/routes/catalogue/+page.svelte b/ui/src/routes/catalogue/+page.svelte
index afa69af..0416075 100644
--- a/ui/src/routes/catalogue/+page.svelte
+++ b/ui/src/routes/catalogue/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
 	import { navigating } from '$app/state';
 	import { untrack } from 'svelte';
 	import type { PageData, ActionData } from './$types';
@@ -7,6 +8,29 @@
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
+	// ── Local filter state (mirrors URL params) ──────────────────────────────
+	// These are separate from data.* so we can bind them to selects and keep
+	// the DOM in sync. They sync back from data whenever a navigation completes.
+	let filterSort = $state(untrack(() => data.sort));
+	let filterGenre = $state(untrack(() => data.genre));
+	let filterStatus = $state(untrack(() => data.status));
+
+	// Keep local state in sync whenever SvelteKit re-runs the load (URL changed).
+	$effect(() => {
+		filterSort = data.sort;
+		filterGenre = data.genre;
+		filterStatus = data.status;
+	});
+
+	function navigateWithFilters(overrides: { sort?: string; genre?: string; status?: string }) {
+		const params = new URLSearchParams();
+		params.set('sort', overrides.sort ?? filterSort);
+		params.set('genre', overrides.genre ?? filterGenre);
+		params.set('status', overrides.status ?? filterStatus);
+		params.set('page', '1');
+		goto(`/catalogue?${params.toString()}`);
+	}
+
 	// Track which novel card is currently being navigated to
 	let loadingSlug = $state<string | null>(null);
 
@@ -389,11 +413,12 @@
 				<select
 					id="filter-sort"
 					name="sort"
-					value={data.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}
-						<option value={s.value}>{s.label}</option>
+						<option value={s.value} selected={s.value === filterSort}>{s.label}</option>
 					{/each}
 				</select>
 			</div>
@@ -403,12 +428,13 @@
 				<select
 					id="filter-genre"
 					name="genre"
-					value={data.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"
 				>
 					{#each genres as g}
-						<option value={g.value}>{g.label}</option>
+						<option value={g.value} selected={g.value === filterGenre}>{g.label}</option>
 					{/each}
 				</select>
 			</div>
@@ -418,12 +444,13 @@
 				<select
 					id="filter-status"
 					name="status"
-					value={data.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"
 				>
 					{#each statuses as st}
-						<option value={st.value}>{st.label}</option>
+						<option value={st.value} selected={st.value === filterStatus}>{st.label}</option>
 					{/each}
 				</select>
 			</div>
@@ -437,13 +464,6 @@
 			<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="submit"
-				onclick={() => (filtersOpen = false)}
-				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}