From 0d48cea7267d732b48d57414f4a1b395e1b58b00 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Fri, 6 Feb 2026 12:08:37 -0800
Subject: [PATCH] songs page add query limit option

---
 src/routes/songs/+page.svelte | 12 ++++++++++++
 src/routes/songs/+page.ts     |  6 +++++-
 src/routes/songs/schema.ts    |  1 +
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/routes/songs/+page.svelte b/src/routes/songs/+page.svelte
index 2647a6e..320561d 100644
--- a/src/routes/songs/+page.svelte
+++ b/src/routes/songs/+page.svelte
@@ -131,6 +131,18 @@
 				<NativeSelectOption value="3">INS</NativeSelectOption>
 			</NativeSelect>
 		</div>
+		<div class="flex flex-col gap-2">
+			<Label for="songs-limit">Limit</Label>
+			<Input
+				id="songs-limit"
+				type="number"
+				min="20"
+				max="200"
+				step="20"
+				class="w-1/2"
+				bind:value={params.songsLimit}
+			/>
+		</div>
 	</div>
 </form>
 
diff --git a/src/routes/songs/+page.ts b/src/routes/songs/+page.ts
index e75240a..fc6417f 100644
--- a/src/routes/songs/+page.ts
+++ b/src/routes/songs/+page.ts
@@ -32,7 +32,11 @@ export const load: PageLoad = async ({ url, fetch, depends }) => {
 
 	await ensureSeeded({ fetch });
 
-	const songRows = await getSongsWithFilters(db, filters);
+	const songRows = await getSongsWithFilters(
+		db,
+		filters,
+		parsed.data?.songsLimit,
+	);
 
 	return {
 		filters: parsed.success ? parsed.data : {}, // Return original parsed data for form state
diff --git a/src/routes/songs/schema.ts b/src/routes/songs/schema.ts
index 080a39f..f9230c8 100644
--- a/src/routes/songs/schema.ts
+++ b/src/routes/songs/schema.ts
@@ -1,6 +1,7 @@
 import { z } from "zod";
 
 export const SearchParamsSchema = z.object({
+	songsLimit: z.coerce.number().int().default(20),
 	song: z.string().optional().default(""),
 	artist: z.string().optional().default(""),
 	anime: z.string().optional().default(""),