feat!: playlists

src/routes/playlists/+page.svelte

@@ -1 +1,14 @@
-Playlists
+<script lang="ts">
+	import PlaylistListing from '$lib/components/groove/PlaylistListing.svelte';
+	import { getLibraryState } from '$lib/library.svelte';
+
+	const library = getLibraryState();
+</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 library.playlists as playlist}
+		<PlaylistListing id={playlist.id} name={playlist.name} tracks={playlist.tracks} />
+	{/each}
+</div>