feat(tracks): search + lazy load images

package.json

@@ -36,6 +36,7 @@
 		"@protobuf-ts/grpcweb-transport": "^2.9.4",
 		"@protobuf-ts/plugin": "^2.9.4",
 		"dayjs": "^1.11.13",
+		"fzf": "^0.5.2",
 		"mode-watcher": "^0.5.0"
 	}
 }

src/lib/components/groove/Queue.svelte

@@ -68,9 +68,8 @@
 	method="POST"
 	use:enhance={submitPlayerAction}
 >
-	{#each player.queue as track, i (track.hash)}
+	{#each player.queue as track, i}
 		<button
-			animate:flip={{ duration: 100 }}
 			type="submit"
 			class="flex flex-row items-center gap-2 rounded-lg px-3 py-2 transition-all hover:bg-secondary"
 			formaction="/player?/skip-to-queue-index&index={i}"

src/lib/components/groove/TrackListing.svelte

@@ -6,12 +6,15 @@
 	import type { SubmitFunction } from '../../../routes/tracks/[hash]/$types';
 	import type { Track } from '$lib/proto/library';
 	import * as ContextMenu from '$lib/components/ui/context-menu';
+	import type { Action } from 'svelte/action';
 
 	interface Props {
 		track: Track;
+		hideCover?: boolean;
+		action: Action;
 	}
 
-	let { track }: Props = $props();
+	let { track, action, hideCover = false }: Props = $props();
 
 	let isOpen = $state(false);
 
@@ -58,15 +61,22 @@
 	method="POST"
 	action="/tracks/{track.hash}?/play"
 	use:enhance={submitPlayTrack}
+	use:action
+	data-track-hash={track.hash}
 >
 	<ContextMenu.Root bind:open={isOpen}>
 		<ContextMenu.Trigger>
-			<div class="relative">
-				<button type="submit" class="relative overflow-hidden rounded-lg">
+			<div class="relative aspect-square w-full">
+				<button
+					type="submit"
+					class="relative aspect-square h-full w-full overflow-hidden rounded-lg"
+				>
 					<img
-						class="aspect-square w-auto transition-all duration-150 hover:scale-105 hover:saturate-150"
-						src={getCoverUrl(track.hash)}
+						class="aspect-square h-full w-full transform-gpu transition-all duration-150 hover:scale-105 hover:saturate-150"
+						src={hideCover ? undefined : getCoverUrl(track.hash)}
 						alt={track.name}
+						width="640"
+						height="640"
 					/>
 				</button>
 

src/lib/search.svelte.ts

@@ -0,0 +1,25 @@
+import { Fzf } from 'fzf';
+import type { Track } from './proto/library';
+import { getContext, setContext } from 'svelte';
+
+class SearchState {
+	input = $state('');
+
+	filterTracks(tracks: Track[]) {
+		const fzf = new Fzf(tracks, {
+			selector: (t) => `${t.name} ${t.artistName}`,
+			sort: true,
+		});
+		return fzf.find(this.input);
+	}
+}
+
+const SEARCH_KEY = Symbol('SEARCH');
+
+export function setSearchState() {
+	return setContext(SEARCH_KEY, new SearchState());
+}
+
+export function getSearchState() {
+	return getContext<ReturnType<typeof setSearchState>>(SEARCH_KEY);
+}

src/routes/+layout.svelte

@@ -7,11 +7,17 @@
 	import { ScrollArea } from '$lib/components/ui/scroll-area';
 	import { getPlayerState, setPlayerState } from '$lib/player.svelte';
 	import { onMount } from 'svelte';
+	import { Separator } from '$lib/components/ui/separator';
+	import { Input } from '$lib/components/ui/input';
+	import { Search } from 'lucide-svelte';
+	import { setSearchState, getSearchState } from '$lib/search.svelte';
 
 	let { children } = $props();
 
 	setPlayerState();
+	setSearchState();
 	const player = getPlayerState();
+	const search = getSearchState();
 
 	onMount(() => {
 		return () => player.abort();
@@ -24,8 +30,17 @@
 	<AppSidebar />
 
 	<div class="flex max-h-screen flex-auto grow flex-col overflow-hidden">
-		<main class="grow overflow-hidden">
+		<header class="flex shrink-0 items-center gap-2 border-b p-2">
 			<Sidebar.Trigger />
+			<Separator orientation="vertical" class="mr-2 h-4" />
+			<div class="relative w-fit">
+				<Input class="pl-8" bind:value={search.input} />
+				<Search
+					class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50"
+				/>
+			</div>
+		</header>
+		<main class="grow overflow-hidden">
 			<ScrollArea class="flex h-full flex-col overflow-auto">
 				<div class="m-4 flex flex-col">
 					<!-- <Sidebar.Trigger /> -->

src/routes/tracks/+page.svelte

@@ -1,18 +1,61 @@
 <script lang="ts">
 	import TrackListing from '$lib/components/groove/TrackListing.svelte';
 	import type { PageServerData } from './$types';
+	import { getSearchState } from '$lib/search.svelte';
+	import type { Action } from 'svelte/action';
+	import { SvelteSet as Set } from 'svelte/reactivity';
 
 	interface Props {
 		data: PageServerData;
 	}
 
+	const search = getSearchState();
+
 	let { data }: Props = $props();
+
+	let container: HTMLDivElement;
+	let visibleTracks = $state<Set<string>>(new Set());
+
+	const options: IntersectionObserverInit = {
+		// @ts-ignore
+		root: container,
+		rootMargin: "400px 0px 400px 0px",
+		threshold: 0.0,
+	};
+
+	const callback: IntersectionObserverCallback = (entries, _observer) => {
+		entries.forEach(entry => {
+			const hash = entry.target.getAttribute('data-track-hash')!;
+			if (entry.isIntersecting) {
+				if (!visibleTracks.has(hash)) {
+					visibleTracks.add(hash);
+				}
+			}
+			else if (visibleTracks.has(hash)) {
+				visibleTracks.delete(hash);
+			}
+		});
+	};
+
+	const observer = new IntersectionObserver(callback, options);
+
+	const observe: Action = (node) => {
+		observer.observe(node);
+	}
+
+	$effect(() => {
+		const firstFewTracks = search.filterTracks(data.tracks).slice(0,40);
+		firstFewTracks.forEach(e => {
+			visibleTracks.add(e.item.hash);
+		});
+	});
 </script>
 
 <div
 	class="grid grid-cols-2 gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8"
+	bind:this={container}
 >
-	{#each data.tracks as track}
-		<TrackListing {track} />
+	{#each search.input.length > 0 ? (search.filterTracks(data.tracks).map(r => r.item) ?? []) : data.tracks as track (track.hash)}
+		<TrackListing {track} action={observe} hideCover={!visibleTracks.has(track.hash)}/>
 	{/each}
 </div>