list page pt. 8 cleanup

src/routes/list/+page.svelte

@@ -27,12 +27,7 @@
 	let { data }: { data: PageData } = $props();
 
 	// Local username field that does NOT update the URL as you type.
-	let formMal = $state<string>("");
-
-	// Keep form input synced with navigation (back/forward) and initial load.
-	$effect(() => {
-		formMal = data.username || params.mal || "";
-	});
+	let formMal = $state<string>(params.mal);
 
 	// If SSR returned no songRows (because client DB wasn't available),
 	// re-run load on the client once the DB is ready by invalidating.
@@ -46,11 +41,6 @@
 		}
 	});
 
-	function onSearch() {
-		// Only update username param on explicit Search
-		params.mal = formMal;
-	}
-
 	function songArtistLabel(r: (typeof data.songRows)[number]) {
 		return r.artistName ?? r.groupName ?? null;
 	}
@@ -63,17 +53,16 @@
 <h1 class="text-2xl font-semibold">MAL List → Songs</h1>
 
 <p class="mt-2 text-sm text-muted-foreground">
-	Enter a MAL username in the URL as
-	<code class="rounded bg-muted px-1 py-0.5">/list?mal=USERNAME</code>. This
-	loads up to {LIST_QUERY_LIMIT} anime from MAL (for now) and then queries your local
-	client DB for related songs.
+	{#if !clientDb}
+		Loading DB...
+	{/if}
 </p>
 
 <form
 	class="mt-4 flex flex-col gap-2"
 	onsubmit={(e) => {
 		e.preventDefault();
-		onSearch();
+		params.mal = formMal;
 	}}
 >
 	<div class="flex flex-wrap gap-2">
@@ -85,8 +74,7 @@
 				id="mal-user"
 				class="rounded border px-3 py-2 text-sm"
 				placeholder="e.g. CaZzzer"
-				value={formMal}
-				oninput={(e) => (formMal = (e.currentTarget as HTMLInputElement).value)}
+				bind:value={formMal}
 				autocomplete="off"
 				spellcheck={false}
 			/>
@@ -122,9 +110,7 @@
 	</div>
 
 	<div class="text-sm text-muted-foreground">
-		{#if !data.username}
-			Waiting for username…
-		{:else}
+		{#if data.username}
 			MAL entries: {data.malResponse?.data.length ?? 0} (limited to {LIST_QUERY_LIMIT})
 			• Songs found: {data.songRows.length}
 		{/if}