feat!: playlists

src/lib/components/groove/AppSidebar.svelte

@@ -1,7 +1,17 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import * as Sidebar from '$lib/components/ui/sidebar';
-	import { Home, Library, ListMusic, Music2, Settings } from 'lucide-svelte';
+	import Home from 'virtual:icons/lucide/home';
+	import Library from 'virtual:icons/lucide/library';
+	import ListMusic from 'virtual:icons/lucide/list-music';
+	import Music2 from 'virtual:icons/lucide/music-2';
+	import Settings from 'virtual:icons/lucide/settings';
+	import CirclePlus from 'virtual:icons/lucide/circle-plus';
+	import { cn } from '$lib/utils';
+	import CreatePlaylistDialog from './CreatePlaylistDialog.svelte';
+	import { getLibraryState } from '$lib/library.svelte';
+
+	const library = getLibraryState();
 </script>
 
 <Sidebar.Root collapsible="icon">
@@ -64,6 +74,25 @@
 							</a>
 						{/snippet}
 					</Sidebar.MenuButton>
+					<Sidebar.MenuSub>
+						<Sidebar.MenuSubItem>
+							<Sidebar.MenuSubButton class="cursor-pointer">
+								{#snippet child({ props })}
+									<CreatePlaylistDialog class={cn(props.class ?? '', 'w-full')}>
+										<CirclePlus class="!text-inherit" />
+										<span>Create Playlist</span>
+									</CreatePlaylistDialog>
+								{/snippet}
+							</Sidebar.MenuSubButton>
+						</Sidebar.MenuSubItem>
+						{#each library.playlists as playlist}
+							<Sidebar.MenuSubItem>
+								<Sidebar.MenuSubButton class="cursor-pointer">
+									{playlist.name}
+								</Sidebar.MenuSubButton>
+							</Sidebar.MenuSubItem>
+						{/each}
+					</Sidebar.MenuSub>
 				</Sidebar.MenuItem>
 			</Sidebar.Menu>
 		</Sidebar.Group>