perf(web-player): cut down the searches the explore page fires

Typing in the search box navigated on every pause, so single letters and
round-trips back to the same term each triggered a full YouTube search and a
new grid of covers. The debounce is longer, a term identical to the current
one no longer navigates, YouTube is only queried past a minimum length, and
the infinite scroll waits until the sentinel is closer before pulling a page.

web-player/src/lib/components/ui/InfiniteScroll.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import { INFINITE_SCROLL_ROOT_MARGIN } from '$lib/config';
 
 	interface Props {
 		onLoadMore: () => void;
@@ -8,7 +9,7 @@
 		rootMargin?: string;
 	}
 
-	let { onLoadMore, hasMore, loading, rootMargin = '600px' }: Props = $props();
+	let { onLoadMore, hasMore, loading, rootMargin = INFINITE_SCROLL_ROOT_MARGIN }: Props = $props();
 
 	let sentinel = $state<HTMLDivElement>();
 	let visible = $state(false);

web-player/src/lib/config.ts

@@ -1,3 +1,6 @@
 export const EXPLORE_PAGE_SIZE = 27;
+export const SEARCH_DEBOUNCE_MS = 450;
+export const SEARCH_MIN_LENGTH = 2;
+export const INFINITE_SCROLL_ROOT_MARGIN = '300px';
 export const HOME_LATEST_PAGE_SIZE = 12;
 export const YOUTUBE_FILLER_LIMIT = 27;

web-player/src/routes/(app)/explore/+page.server.ts

@@ -2,7 +2,11 @@ import type { PageServerLoad, Actions } from './$types';
 import { createApiClient, requireUser, unwrapOrError } from '$lib/server/api';
 import { fetchYoutubeFiller } from '$lib/server/youtube';
 import { addTrackAction, addYouTubeToPlaylistAction } from '$lib/server/playlistActions';
-import { EXPLORE_PAGE_SIZE as PAGE_SIZE, YOUTUBE_FILLER_LIMIT } from '$lib/config';
+import {
+	EXPLORE_PAGE_SIZE as PAGE_SIZE,
+	SEARCH_MIN_LENGTH,
+	YOUTUBE_FILLER_LIMIT
+} from '$lib/config';
 
 export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 	const query = url.searchParams.get('q')?.trim() ?? '';
@@ -15,7 +19,8 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 		params: { query: { name: query || undefined, pageNumber: page, pageSize: PAGE_SIZE } }
 	});
 
-	const searchPromise = query
+	const searchPromise =
+		query.length >= SEARCH_MIN_LENGTH
 			? api.GET('/youtube/search', { params: { query: { query } } })
 			: Promise.resolve(null);
 

web-player/src/routes/(app)/explore/+page.svelte

@@ -11,7 +11,7 @@
 	import Input from '$lib/components/ui/Input.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import InfiniteScroll from '$lib/components/ui/InfiniteScroll.svelte';
-	import { EXPLORE_PAGE_SIZE } from '$lib/config';
+	import { EXPLORE_PAGE_SIZE, SEARCH_DEBOUNCE_MS } from '$lib/config';
 	import { hueFor } from '$lib/theme/color';
 	import type { YouTubeSong } from '$lib/types';
 	import TrackTile from '$lib/components/TrackTile.svelte';
@@ -94,12 +94,14 @@
 		const value = (event.currentTarget as HTMLInputElement).value;
 		clearTimeout(searchTimeout);
 		searchTimeout = setTimeout(() => {
-			goto(buildHref(value.trim()), {
+			const term = value.trim();
+			if (term === data.query) return;
+			goto(buildHref(term), {
 				keepFocus: true,
 				replaceState: true,
 				noScroll: true
 			});
-		}, 350);
+		}, SEARCH_DEBOUNCE_MS);
 	}
 
 	function togglePlay(index: number) {