songs page add query limit option

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>
 

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

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(""),