add status search filter to page

src/routes/list/+page.svelte

@@ -174,7 +174,9 @@
 {: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">
+	<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
 				>
@@ -188,6 +190,29 @@
 					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">