From 90671ee962c15f31361d94d4fcefc952760e6969 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Thu, 5 Feb 2026 20:30:08 -0800
Subject: [PATCH] add status search filter to page

---
 src/routes/list/+page.svelte | 55 ++++++++++++++++++++++++++----------
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/routes/list/+page.svelte b/src/routes/list/+page.svelte
index 843590c..e68396e 100644
--- a/src/routes/list/+page.svelte
+++ b/src/routes/list/+page.svelte
@@ -174,20 +174,45 @@
 {:else if status === "error"}
 	<p class="mt-3 text-sm text-red-600">Error: {error}</p>
 {:else if status === "ready"}
-	<div class="mt-4 flex flex-col gap-2">
-		<label class="text-sm text-muted-foreground" for="mal-user"
-			>MAL username</label
-		>
-		<input
-			id="mal-user"
-			class="rounded border px-3 py-2 text-sm"
-			placeholder="e.g. CaZzzer"
-			value={params.mal ?? ""}
-			oninput={(e) =>
-				(params.mal = (e.currentTarget as HTMLInputElement).value)}
-			autocomplete="off"
-			spellcheck={false}
-		/>
+	<form class="mt-4 flex flex-col gap-2">
+		<div class="flex gap-2">
+			<div class="flex flex-col gap-2">
+				<label class="text-sm text-muted-foreground" for="mal-user"
+					>MAL username</label
+				>
+				<input
+					id="mal-user"
+					class="rounded border px-3 py-2 text-sm"
+					placeholder="e.g. CaZzzer"
+					value={params.mal ?? ""}
+					oninput={(e) =>
+						(params.mal = (e.currentTarget as HTMLInputElement).value)}
+					autocomplete="off"
+					spellcheck={false}
+				/>
+			</div>
+
+			<div class="flex flex-col gap-2">
+				<label class="text-sm text-muted-foreground" for="mal-status"
+					>Status</label
+				>
+				<select
+					id="mal-status"
+					class="rounded border px-3 py-2 text-sm"
+					value={params.status}
+					onchange={(e) =>
+						(params.status = (e.currentTarget as HTMLSelectElement)
+							.value as typeof params.status)}
+				>
+					<option value="">All</option>
+					<option value="watching">Watching</option>
+					<option value="completed">Completed</option>
+					<option value="on_hold">On hold</option>
+					<option value="dropped">Dropped</option>
+					<option value="plan_to_watch">Plan to watch</option>
+				</select>
+			</div>
+		</div>
 
 		<div class="text-sm text-muted-foreground">
 			{#if !(params.mal ?? "").trim()}
@@ -219,7 +244,7 @@
 				</a>
 			</div>
 		{/if}
-	</div>
+	</form>
 
 	{#if (params.mal ?? "").trim() && !isLoadingMal && malEntries.length === 0}
 		<p class="mt-4 text-sm text-muted-foreground">