From ec66e86a1821af1218cc1eba5de518563744a5df Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Fri, 6 Mar 2026 19:12:04 +0500
Subject: [PATCH] Persist browse view preference in localStorage; collapsible
 filter panel on discover page

---
 ui/src/routes/browse/+page.svelte | 392 +++++++++++++++++++-----------
 1 file changed, 251 insertions(+), 141 deletions(-)

diff --git a/ui/src/routes/browse/+page.svelte b/ui/src/routes/browse/+page.svelte
index 5f7ac67..14503fe 100644
--- a/ui/src/routes/browse/+page.svelte
+++ b/ui/src/routes/browse/+page.svelte
@@ -119,12 +119,27 @@
 	const isSearchView = $derived(!!data.searchQuery);
 
 
-	// View toggle: 'grid' | 'list'. Default to 'list' when sort=rank (more detail).
-	let view = $state<'grid' | 'list'>(data.sort === 'rank' ? 'list' : 'grid');
-	// Keep view in sync when sort changes via filter form.
+	// View toggle: 'grid' | 'list'. Persisted in localStorage.
+	// Rank view always uses list; otherwise restore saved preference (default: grid).
+	const VIEW_KEY = 'libnovel:browse:view';
+	function savedView(): 'grid' | 'list' {
+		if (data.sort === 'rank') return 'list';
+		if (typeof localStorage !== 'undefined') {
+			const v = localStorage.getItem(VIEW_KEY);
+			if (v === 'grid' || v === 'list') return v;
+		}
+		return 'grid';
+	}
+	let view = $state<'grid' | 'list'>(savedView());
+	// Keep view in sync when sort changes via filter form, and persist changes.
 	$effect(() => {
 		if (data.sort === 'rank' && view === 'grid') view = 'list';
 	});
+	$effect(() => {
+		if (typeof localStorage !== 'undefined' && data.sort !== 'rank') {
+			localStorage.setItem(VIEW_KEY, view);
+		}
+	});
 
 	// Admin: per-novel scrape state (grid view)
 	let scraping: Record<string, boolean> = $state({});
@@ -153,6 +168,32 @@
 	// Admin: refresh catalogue
 	let refreshing = $state(false);
 
+	// ── Collapsible filters panel ────────────────────────────────────────────
+	let filtersOpen = $state(false);
+
+	// Human-readable summary of active filters shown on the toggle button
+	const filterSummary = $derived(() => {
+		const parts: string[] = [];
+		const sortLabel = sorts.find((s) => s.value === data.sort)?.label ?? data.sort;
+		parts.push(sortLabel);
+		if (data.genre && data.genre !== 'all') {
+			const genreLabel = genres.find((g) => g.value === data.genre)?.label ?? data.genre;
+			parts.push(genreLabel);
+		}
+		if (data.status && data.status !== 'all') {
+			const statusLabel = statuses.find((s) => s.value === data.status)?.label ?? data.status;
+			parts.push(statusLabel);
+		}
+		return parts.join(' · ');
+	});
+
+	// Whether any non-default filter is active (used to show a dot indicator)
+	const hasActiveFilters = $derived(
+		(data.genre && data.genre !== 'all') ||
+		(data.status && data.status !== 'all') ||
+		(data.sort && data.sort !== 'popular')
+	);
+
 	// ── Scroll-to-top button ─────────────────────────────────────────────────
 	let showScrollTop = $state(false);
 	$effect(() => {
@@ -168,81 +209,25 @@
 	<title>Discover — libnovel</title>
 </svelte:head>
 
-<!-- Header row -->
-<div class="mb-6 flex items-start justify-between gap-4 flex-wrap">
-	<div>
-		<h1 class="text-2xl font-bold text-zinc-100">Discover</h1>
-		<p class="text-zinc-400 text-sm mt-1">
-			{#if isSearchView}
-				{novels.length} result{novels.length !== 1 ? 's' : ''} for "<span class="text-zinc-200">{data.searchQuery}</span>"
-				{#if data.searchLocalCount > 0 || data.searchRemoteCount > 0}
-					<span class="text-zinc-500 text-xs ml-1">({data.searchLocalCount} local, {data.searchRemoteCount} from novelfire)</span>
-				{/if}
-			{:else if isRankView}
-				{#if novels.length > 0}
-					{novels.length} novels ranked from last catalogue scrape
-				{:else}
-					No ranking data — run a full catalogue scrape to populate
-				{/if}
-			{:else}
-				Browse novels from novelfire.net
+<!-- Header -->
+<div class="mb-4">
+	<h1 class="text-2xl font-bold text-zinc-100">Discover</h1>
+	<p class="text-zinc-400 text-sm mt-1">
+		{#if isSearchView}
+			{novels.length} result{novels.length !== 1 ? 's' : ''} for "<span class="text-zinc-200">{data.searchQuery}</span>"
+			{#if data.searchLocalCount > 0 || data.searchRemoteCount > 0}
+				<span class="text-zinc-500 text-xs ml-1">({data.searchLocalCount} local, {data.searchRemoteCount} from novelfire)</span>
 			{/if}
-		</p>	</div>
-
-	<div class="flex items-center gap-3 flex-wrap">
-		<!-- View toggle -->
-		<div class="flex items-center bg-zinc-800 border border-zinc-700 rounded overflow-hidden">
-			<button
-				onclick={() => (view = 'grid')}
-				title="Grid view"
-				class="px-2.5 py-1.5 transition-colors {view === 'grid'
-					? 'bg-zinc-600 text-zinc-100'
-					: 'text-zinc-400 hover:text-zinc-200'}"
-			>
-				<!-- grid icon -->
-				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-						d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
-				</svg>
-			</button>
-			<button
-				onclick={() => (view = 'list')}
-				title="List view"
-				class="px-2.5 py-1.5 transition-colors {view === 'list'
-					? 'bg-zinc-600 text-zinc-100'
-					: 'text-zinc-400 hover:text-zinc-200'}"
-			>
-				<!-- list icon -->
-				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-						d="M4 6h16M4 10h16M4 14h16M4 18h16" />
-				</svg>
-			</button>
-		</div>
-
-		<!-- Admin: refresh catalogue -->
-		{#if data.isAdmin}
-			<form
-				method="POST"
-				action="?/refresh"
-				use:enhance={() => {
-					refreshing = true;
-					return async ({ update }) => {
-						await update();
-						refreshing = false;
-					};
-				}}
-			>
-				<button
-					type="submit"
-					disabled={refreshing}
-					class="px-4 py-1.5 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 catalogue'}
-				</button>
-			</form>
+		{:else if isRankView}
+			{#if novels.length > 0}
+				{novels.length} novels ranked from last catalogue scrape
+			{:else}
+				No ranking data — run a full catalogue scrape to populate
+			{/if}
+		{:else}
+			Browse novels from novelfire.net
 		{/if}
-	</div>
+	</p>
 </div>
 
 <!-- Admin flash messages -->
@@ -262,78 +247,203 @@
 	{/if}
 {/if}
 
-<!-- Search -->
-<form method="GET" action="/browse" class="flex gap-2 mb-4">
-	<input
-		type="search"
-		name="q"
-		value={data.searchQuery}
-		placeholder="Search novels by title or author…"
-		class="flex-1 bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400 placeholder-zinc-500"
-	/>
-	<button
-		type="submit"
-		class="px-4 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors whitespace-nowrap"
-	>
-		Search
-	</button>
-	{#if data.searchQuery}
-		<a
-			href="/browse"
-			class="px-3 py-1.5 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors whitespace-nowrap"
+<!-- Toolbar: search + filter toggle + view toggle + admin refresh -->
+<div class="flex gap-2 mb-3">
+	<!-- Search (grows to fill available space) -->
+	<form method="GET" action="/browse" class="flex flex-1 gap-2 min-w-0">
+		<input
+			type="search"
+			name="q"
+			value={data.searchQuery}
+			placeholder="Search…"
+			class="flex-1 min-w-0 bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 placeholder-zinc-500"
+		/>
+		<button
+			type="submit"
+			class="px-3 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors whitespace-nowrap"
 		>
-			Clear
-		</a>
-	{/if}
-</form>
-
-<!-- Filters -->
-<form method="GET" action="/browse" class="flex flex-wrap gap-3 mb-6">
-	<input type="hidden" name="page" value="1" />
-
-	<select
-		name="genre"
-		value={data.genre}
-		disabled={isRankView}
-		class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed"
-	>
-		{#each genres as g}
-			<option value={g.value}>{g.label}</option>
-		{/each}
-	</select>
-
-	<select
-		name="sort"
-		value={data.sort}
-		class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400"
-	>
-		{#each sorts as s}
-			<option value={s.value}>{s.label}</option>
-		{/each}
-	</select>
-
-	<select
-		name="status"
-		value={data.status}
-		disabled={isRankView}
-		class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed"
-	>
-		{#each statuses as st}
-			<option value={st.value}>{st.label}</option>
-		{/each}
-	</select>
+			Search
+		</button>
+		{#if data.searchQuery}
+			<a
+				href="/browse"
+				class="px-3 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors whitespace-nowrap"
+			>
+				Clear
+			</a>
+		{/if}
+	</form>
 
+	<!-- Filters toggle button -->
 	<button
-		type="submit"
-		class="px-4 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors"
+		type="button"
+		onclick={() => (filtersOpen = !filtersOpen)}
+		aria-expanded={filtersOpen}
+		class="relative flex items-center gap-1.5 px-3 py-2 rounded border text-sm font-medium transition-colors whitespace-nowrap
+			{filtersOpen
+				? 'bg-zinc-700 border-zinc-500 text-zinc-100'
+				: 'bg-zinc-800 border-zinc-700 text-zinc-300 hover:border-zinc-500 hover:text-zinc-100'}"
 	>
-		Filter
+		<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+				d="M3 4h18M7 8h10M11 12h2M9 16h6" />
+		</svg>
+		<span class="hidden sm:inline">Filters</span>
+		<!-- Active indicator dot -->
+		{#if hasActiveFilters}
+			<span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-amber-400"></span>
+		{/if}
 	</button>
 
-	{#if isRankView}
-		<span class="self-center text-xs text-zinc-500 italic">Genre &amp; status filters apply to Browse only</span>
+	<!-- View toggle -->
+	<div class="flex items-center bg-zinc-800 border border-zinc-700 rounded overflow-hidden shrink-0">
+		<button
+			onclick={() => (view = 'grid')}
+			title="Grid view"
+			class="px-2.5 py-2 transition-colors {view === 'grid'
+				? 'bg-zinc-600 text-zinc-100'
+				: 'text-zinc-400 hover:text-zinc-200'}"
+		>
+			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+					d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+			</svg>
+		</button>
+		<button
+			onclick={() => (view = 'list')}
+			title="List view"
+			class="px-2.5 py-2 transition-colors {view === 'list'
+				? 'bg-zinc-600 text-zinc-100'
+				: 'text-zinc-400 hover:text-zinc-200'}"
+		>
+			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+					d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Admin: refresh catalogue -->
+	{#if data.isAdmin}
+		<form
+			method="POST"
+			action="?/refresh"
+			use:enhance={() => {
+				refreshing = true;
+				return async ({ update }) => {
+					await update();
+					refreshing = false;
+				};
+			}}
+		>
+			<button
+				type="submit"
+				disabled={refreshing}
+				class="hidden sm:block 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}
-</form>
+</div>
+
+<!-- Active filter summary (shown when panel is closed and filters are active) -->
+{#if !filtersOpen && hasActiveFilters}
+	<p class="text-xs text-zinc-500 mb-3">
+		<span class="text-zinc-400">{filterSummary()}</span>
+		<a href="/browse" class="ml-2 text-zinc-600 hover:text-zinc-400 underline underline-offset-2">clear</a>
+	</p>
+{/if}
+
+<!-- Collapsible filter panel -->
+{#if filtersOpen}
+	<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>
+				<select
+					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"
+				>
+					{#each sorts as s}
+						<option value={s.value}>{s.label}</option>
+					{/each}
+				</select>
+			</div>
+
+			<div class="flex flex-col gap-1">
+				<label class="text-xs text-zinc-500 uppercase tracking-wide">Genre</label>
+				<select
+					name="genre"
+					value={data.genre}
+					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>
+					{/each}
+				</select>
+			</div>
+
+			<div class="flex flex-col gap-1">
+				<label class="text-xs text-zinc-500 uppercase tracking-wide">Status</label>
+				<select
+					name="status"
+					value={data.status}
+					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>
+					{/each}
+				</select>
+			</div>
+		</div>
+
+		{#if isRankView}
+			<p class="text-xs text-zinc-500 italic">Genre &amp; status filters apply to Browse only</p>
+		{/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>
+			<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}
 
 <!-- Content -->
 {#if novels.length === 0}