From 0faf98ee80933c76f02d71837ae28c2b27d656e4 Mon Sep 17 00:00:00 2001 From: Yuri Tatishchev Date: Fri, 6 Feb 2026 10:28:32 -0800 Subject: [PATCH] songs remove complicated params that don't work --- src/routes/songs/+page.svelte | 129 ++++++---------------------------- src/routes/songs/+page.ts | 9 +-- src/routes/songs/schema.ts | 41 ++--------- 3 files changed, 30 insertions(+), 149 deletions(-) diff --git a/src/routes/songs/+page.svelte b/src/routes/songs/+page.svelte index d1956f8..70c4f84 100644 --- a/src/routes/songs/+page.svelte +++ b/src/routes/songs/+page.svelte @@ -9,26 +9,15 @@ import { trackFromSongRow } from "$lib/player/types"; import { SongCategoryMap, SongTypeReverseMap } from "$lib/utils/amq"; import type { PageData } from "./$types"; - import { type SvelteSearchForm, SvelteSearchParamsSchema } from "./schema"; + import { SearchParamsSchema } from "./schema"; - const params = useSearchParams(SvelteSearchParamsSchema, { + const params = useSearchParams(SearchParamsSchema, { pushHistory: false, showDefaults: false, }); let { data }: { data: PageData } = $props(); - // Local form values, bound to inputs, which will update params. - let form: SvelteSearchForm = $state({ - q: params.q, - artist: params.artist, - anime: params.anime, - type: params.type, - gpm: params.gpm ?? "", - gpx: params.gpx ?? "", - cat: params.cat ?? "", - }); - // If SSR returned no songRows (because client DB wasn't available), // re-run load on the client once the DB is ready by invalidating. onMount(() => { @@ -50,11 +39,6 @@ return SongTypeReverseMap[type] || `Type ${type}`; } - // Helper to map song category number back to string for UI display - function getSongCategoryLabel(category: number): string { - return SongCategoryMap[category] || `Category ${category}`; - } - const tracksFromResults = $derived.by(() => data.songRows .map((r) => @@ -70,27 +54,6 @@ ) .filter((t) => t !== null), ); - - function applyFilters() { - params.q = form.q; - params.artist = form.artist; - params.anime = form.anime; - params.type = form.type; - // Only set gpm/gpx if they are valid numbers - params.gpm = form.gpm !== "" ? String(form.gpm) : undefined; - params.gpx = form.gpx !== "" ? String(form.gpx) : undefined; - // Only set cat if it's a valid number - params.cat = form.cat !== "" ? String(form.cat) : undefined; - } - - // Handle checkbox changes for song types - function handleSongTypeChange(typeValue: string, isChecked: boolean) { - if (isChecked) { - form.type = [...form.type, typeValue]; - } else { - form.type = form.type.filter((t) => t !== typeValue); - } - }

Songs Search

@@ -101,14 +64,21 @@ {/if}

-
{ - e.preventDefault(); - applyFilters(); - }} -> +
+
+ + +
@@ -131,44 +101,12 @@ id="artist-name" class="rounded border px-3 py-2 text-sm" placeholder="e.g. Kana Hanazawa" - bind:value={form.artist} + bind:value={params.artist} autocomplete="off" spellcheck={false} />
-
- - -
- -
- -
- {#each [1, 2, 3] as typeNum} - - {/each} -
-
-
- -
- - -
- - -
-
@@ -266,7 +179,7 @@ {/each} -{:else if Object.values(form).some((val) => (Array.isArray(val) && val.length > 0) || (typeof val === "string" && val.trim() !== "") || typeof val === "number")} +{:else if Object.values(params).some((val) => (Array.isArray(val) && val.length > 0) || (typeof val === "string" && val.trim() !== "") || typeof val === "number")}

No songs found matching your criteria.

diff --git a/src/routes/songs/+page.ts b/src/routes/songs/+page.ts index e619eeb..ffcfb7e 100644 --- a/src/routes/songs/+page.ts +++ b/src/routes/songs/+page.ts @@ -1,27 +1,24 @@ import type { SongFilters } from "$lib/db/client-db"; import { db, ensureSeeded, getSongsWithFilters } from "$lib/db/client-db"; import type { PageLoad } from "./$types"; -import { LoadSearchParamsSchema } from "./schema"; +import { SearchParamsSchema } from "./schema"; export const load: PageLoad = async ({ url, fetch, depends }) => { depends("clientdb:songs"); - const parsed = LoadSearchParamsSchema.safeParse( + const parsed = SearchParamsSchema.safeParse( Object.fromEntries(url.searchParams.entries()), ); const filters: SongFilters = {}; if (parsed.success) { - if (parsed.data.q) filters.songName = parsed.data.q; + if (parsed.data.song) filters.songName = parsed.data.song; if (parsed.data.artist) filters.artistName = parsed.data.artist; if (parsed.data.anime) filters.animeName = parsed.data.anime; - if (parsed.data.type && parsed.data.type.length > 0) - filters.songTypes = parsed.data.type; if (parsed.data.gpm !== undefined) filters.globalPercentMin = parsed.data.gpm; if (parsed.data.gpx !== undefined) filters.globalPercentMax = parsed.data.gpx; - if (parsed.data.cat !== undefined) filters.category = parsed.data.cat; } // Client-only DB: on the server `db` is null, so return [] and let hydration re-run load in browser. diff --git a/src/routes/songs/schema.ts b/src/routes/songs/schema.ts index 1c014a7..637d0f6 100644 --- a/src/routes/songs/schema.ts +++ b/src/routes/songs/schema.ts @@ -1,38 +1,9 @@ import { z } from "zod"; -import { SongTypeMap } from "$lib/utils/amq"; -// Base schema for raw URL search parameters as strings -const BaseSearchParamsSchema = z.object({ - q: z.string().optional(), - artist: z.string().optional(), - anime: z.string().optional(), - gpm: z.string().optional(), - gpx: z.string().optional(), - cat: z.string().optional(), +export const SearchParamsSchema = z.object({ + song: z.string().optional().default(""), + artist: z.string().optional().default(""), + anime: z.string().optional().default(""), + gpm: z.int().optional().default(0), + gpx: z.int().optional().default(100), }); - -// Schema for +page.ts load function (parses comma-separated types into number array) -export const LoadSearchParamsSchema = BaseSearchParamsSchema.extend({ - type: z - .string() - .optional() - .transform((s) => { - if (!s) return undefined; - return s - .split(",") - .map((t) => SongTypeMap[t.trim().toUpperCase()]) - .filter((n) => n !== undefined); - }), -}).strict(); - -// Schema for +page.svelte useSearchParams (handles 'type' as an array of strings from URL) -export const SvelteSearchParamsSchema = BaseSearchParamsSchema.extend({ - type: z.array(z.string()).default([]), -}).strict(); - -// Define the type for the Svelte form, which will have default values -export type SvelteSearchForm = z.infer & { - gpm: string; // To allow empty string in form input - gpx: string; // To allow empty string in form input - cat: string; // To allow empty string in form input -};