refactor: use track instead of song

src/routes/tracks/+page.server.ts

@@ -0,0 +1,21 @@
+import type { Track } from '$lib/proto/library';
+import { LibraryClient } from '$lib/proto/library.client';
+import { protoTransport } from '../../hooks.server';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	const client = new LibraryClient(protoTransport);
+
+	const response = await client.listTracks({});
+
+	const tracks = response.response.tracks.map((t) => ({
+		hash: t.hash,
+		name: t.name,
+		artistId: t.artistId,
+		artistName: t.artistName
+	}));
+
+	return {
+		tracks: tracks as Track[]
+	};
+};

src/routes/tracks/+page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import TrackListing from '$lib/components/groove/TrackListing.svelte';
+	import type { PageServerData } from './$types';
+
+	interface Props {
+		data: PageServerData;
+	}
+
+	let { data }: Props = $props();
+</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"
+>
+	{#each data.tracks as track}
+		<TrackListing {track} />
+	{/each}
+</div>

src/routes/tracks/[hash]/+page.server.ts

@@ -0,0 +1,22 @@
+import { PlayerClient } from '$lib/proto/player.client';
+import { fail } from '@sveltejs/kit';
+import { protoTransport } from '../../../hooks.server';
+import type { Actions } from './$types';
+import { serializable } from '$lib/proto';
+import type { PlayTrackResponse } from '$lib/proto/player';
+
+export const actions = {
+	play: async ({ params }) => {
+		const client = new PlayerClient(protoTransport);
+
+		const response = await client.playTrack({
+			hash: params.hash
+		});
+
+		if (response.response.track === undefined) {
+			return fail(500);
+		}
+
+		return serializable<PlayTrackResponse>(response.response);
+	}
+} satisfies Actions;