refactor: use track instead of song

src/lib/components/groove/AppSidebar.svelte

@@ -27,14 +27,14 @@
 			<Sidebar.GroupLabel>Library</Sidebar.GroupLabel>
 			<Sidebar.Menu>
 				<Sidebar.MenuItem>
-					<Sidebar.MenuButton isActive={$page.url.pathname === '/songs'} class="transition-all">
+					<Sidebar.MenuButton isActive={$page.url.pathname === '/tracks'} class="transition-all">
 						{#snippet tooltipContent()}
-							Songs
+							Tracks
 						{/snippet}
 						{#snippet child({ props })}
-							<a href="/songs" {...props}>
+							<a href="/tracks" {...props}>
 								<Music2 />
-								<span>Songs</span>
+								<span>Tracks</span>
 							</a>
 						{/snippet}
 					</Sidebar.MenuButton>

src/lib/components/groove/Footer.svelte

@@ -149,7 +149,7 @@
 						<Separator class="my-1" />
 
 						<div class="flex h-full flex-col gap-1 overflow-y-auto pr-3">
-							{#each [] as _song, i}
+							{#each [] as _track, i}
 								<button
 									class="flex flex-row items-center gap-2 rounded-lg px-3 py-2 transition-all hover:bg-secondary"
 									onclick={() => skipToQueueIndex(i)}
@@ -165,12 +165,12 @@
 										<p
 											class="w-full self-start overflow-hidden text-ellipsis text-nowrap text-left text-sm text-foreground/80"
 										>
-											Song name
+											Track name
 										</p>
 										<p
 											class="w-full self-start overflow-hidden text-left text-xs text-muted-foreground"
 										>
-											Song artist
+											Track artist
 										</p>
 									</div>
 								</button>

src/lib/components/groove/TrackListing.svelte

@@ -4,19 +4,19 @@
 	import { getPlayerState } from '$lib/player.svelte';
 
 	// import { AudioLines } from 'lucide-svelte';
-	import type { Song } from '$lib/song';
 	import { AudioLines } from 'lucide-svelte';
-	import type { SubmitFunction } from '../../../routes/songs/[hash]/$types';
+	import type { SubmitFunction } from '../../../routes/tracks/[hash]/$types';
+	import type { Track } from '$lib/proto/library';
 
 	interface Props {
-		song: Song;
+		track: Track;
 	}
 
-	let { song }: Props = $props();
+	let { track }: Props = $props();
 
 	const player = getPlayerState();
 
-	const submitPlaySong: SubmitFunction = async () => {
+	const submitPlayTrack: SubmitFunction = async () => {
 		return async ({ update, result }) => {
 			await update({
 				invalidateAll: false
@@ -34,27 +34,27 @@
 <form
 	class="flex flex-col gap-3"
 	method="POST"
-	action="/songs/{song.hash}?/play"
+	action="/tracks/{track.hash}?/play"
-	use:enhance={submitPlaySong}
+	use:enhance={submitPlayTrack}
 >
 	<div class="relative">
 		<button type="submit" class="relative overflow-hidden rounded-lg">
 			<img
 				class="aspect-square w-auto transition-all duration-150 hover:scale-105 hover:saturate-150"
-				src={getCoverUrl(song.hash)}
+				src={getCoverUrl(track.hash)}
-				alt={song.name}
+				alt={track.name}
 			/>
 		</button>
 
 		<div
 			class="absolute bottom-6 left-2 size-4 animate-pulse"
-			class:hidden={player.currentlyPlaying?.hash !== song.hash}
+			class:hidden={player.currentlyPlaying?.hash !== track.hash}
 		>
 			<AudioLines class="text-primary" />
 		</div>
 	</div>
 	<div class="relative space-y-1 text-sm">
-		<h3 class="font-medium leading-none">{song.name}</h3>
+		<h3 class="font-medium leading-none">{track.name}</h3>
-		<p class="text-xs text-muted-foreground">{song.artistName}</p>
+		<p class="text-xs text-muted-foreground">{track.artistName}</p>
 	</div>
 </form>

src/lib/covers.ts

@@ -1,3 +1,3 @@
-export function getCoverUrl(songHash: string) {
+export function getCoverUrl(trackHash: string) {
-	return `http://localhost:39994/${songHash}.webp`;
+	return `http://localhost:39994/${trackHash}.webp`;
 }

src/lib/song.ts

@@ -1,6 +0,0 @@
-export type Song = {
-	hash: string;
-	name: string;
-	artistName: string;
-	artistId: bigint;
-};

src/routes/+layout.server.ts

@@ -2,5 +2,5 @@ import type { LayoutServerLoad } from './$types';
 
 export const load: LayoutServerLoad = async () => {
 	// const client = new PlayerClient(protoTransport);
-	// TODO: Get current song
+	// TODO: Get current track
 };

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

@@ -1,3 +1,4 @@
+import type { Track } from '$lib/proto/library';
 import { LibraryClient } from '$lib/proto/library.client';
 import { protoTransport } from '../../hooks.server';
 import type { PageServerLoad } from './$types';
@@ -15,6 +16,6 @@ export const load: PageServerLoad = async () => {
 	}));
 
 	return {
-		songs: tracks
+		tracks: tracks as Track[]
 	};
 };

src/routes/tracks/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import SongListing from '$lib/components/groove/SongListing.svelte';
+	import TrackListing from '$lib/components/groove/TrackListing.svelte';
 	import type { PageServerData } from './$types';
 
 	interface Props {
@@ -12,7 +12,7 @@
 <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.songs as song}
+	{#each data.tracks as track}
-		<SongListing {song} />
+		<TrackListing {track} />
 	{/each}
 </div>