From aff6de9b4595027835ef809e76b5c0fc17719b8a Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Fri, 6 Mar 2026 19:15:47 +0500
Subject: [PATCH] Fix SSR 500: remove nested form in browse filter panel; fix
 label associations

---
 ui/src/routes/books/[slug]/+page.svelte |  6 ++-
 ui/src/routes/browse/+page.svelte       | 56 +++++++++++++------------
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/ui/src/routes/books/[slug]/+page.svelte b/ui/src/routes/books/[slug]/+page.svelte
index 7db8b02..d16587f 100644
--- a/ui/src/routes/books/[slug]/+page.svelte
+++ b/ui/src/routes/books/[slug]/+page.svelte
@@ -311,8 +311,9 @@
 	{#if data.isAdmin && data.book.source_url}
 		<div class="mb-4 p-3 rounded bg-zinc-800/60 border border-zinc-700 flex flex-wrap items-end gap-3">
 			<div class="flex flex-col gap-1">
-				<label class="text-xs text-zinc-500">From chapter</label>
+				<label for="range-from" class="text-xs text-zinc-500">From chapter</label>
 				<input
+					id="range-from"
 					type="number"
 					min="1"
 					bind:value={rangeFrom}
@@ -321,8 +322,9 @@
 				/>
 			</div>
 			<div class="flex flex-col gap-1">
-				<label class="text-xs text-zinc-500">To chapter (optional)</label>
+				<label for="range-to" class="text-xs text-zinc-500">To chapter (optional)</label>
 				<input
+					id="range-to"
 					type="number"
 					min="1"
 					bind:value={rangeTo}
diff --git a/ui/src/routes/browse/+page.svelte b/ui/src/routes/browse/+page.svelte
index 14503fe..b062976 100644
--- a/ui/src/routes/browse/+page.svelte
+++ b/ui/src/routes/browse/+page.svelte
@@ -357,13 +357,38 @@
 
 <!-- Collapsible filter panel -->
 {#if filtersOpen}
+	<!-- Admin refresh (mobile only — outside filter form to avoid nested <form>) -->
+	{#if data.isAdmin}
+		<form
+			method="POST"
+			action="?/refresh"
+			use:enhance={() => {
+				refreshing = true;
+				return async ({ update }) => {
+					await update();
+					refreshing = false;
+				};
+			}}
+			class="sm:hidden mb-2"
+		>
+			<button
+				type="submit"
+				disabled={refreshing}
+				class="w-full px-3 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+			>
+				{refreshing ? 'Queuing…' : 'Refresh catalogue'}
+			</button>
+		</form>
+	{/if}
+
 	<form method="GET" action="/browse" class="mb-4 p-3 rounded-lg bg-zinc-800/60 border border-zinc-700 flex flex-col gap-3">
 		<input type="hidden" name="page" value="1" />
 
 		<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
 			<div class="flex flex-col gap-1">
-				<label class="text-xs text-zinc-500 uppercase tracking-wide">Sort</label>
+				<label for="filter-sort" class="text-xs text-zinc-500 uppercase tracking-wide">Sort</label>
 				<select
+					id="filter-sort"
 					name="sort"
 					value={data.sort}
 					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"
@@ -375,8 +400,9 @@
 			</div>
 
 			<div class="flex flex-col gap-1">
-				<label class="text-xs text-zinc-500 uppercase tracking-wide">Genre</label>
+				<label for="filter-genre" class="text-xs text-zinc-500 uppercase tracking-wide">Genre</label>
 				<select
+					id="filter-genre"
 					name="genre"
 					value={data.genre}
 					disabled={isRankView}
@@ -389,8 +415,9 @@
 			</div>
 
 			<div class="flex flex-col gap-1">
-				<label class="text-xs text-zinc-500 uppercase tracking-wide">Status</label>
+				<label for="filter-status" class="text-xs text-zinc-500 uppercase tracking-wide">Status</label>
 				<select
+					id="filter-status"
 					name="status"
 					value={data.status}
 					disabled={isRankView}
@@ -408,29 +435,6 @@
 		{/if}
 
 		<div class="flex gap-2 justify-end">
-			<!-- Admin refresh (mobile only — shown here since toolbar button is hidden on mobile) -->
-			{#if data.isAdmin}
-				<form
-					method="POST"
-					action="?/refresh"
-					use:enhance={() => {
-						refreshing = true;
-						return async ({ update }) => {
-							await update();
-							refreshing = false;
-						};
-					}}
-					class="sm:hidden mr-auto"
-				>
-					<button
-						type="submit"
-						disabled={refreshing}
-						class="px-3 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
-					>
-						{refreshing ? 'Queuing…' : 'Refresh'}
-					</button>
-				</form>
-			{/if}
 			<a href="/browse" class="px-4 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors">
 				Reset
 			</a>