feat: currently playing + volume + seek position + toggle pause

src/lib/components/groove/AppSidebar.svelte

@@ -9,6 +9,9 @@
 		<Sidebar.Menu>
 			<Sidebar.MenuItem>
 				<Sidebar.MenuButton isActive={$page.url.pathname === '/'} class="transition-all">
+					{#snippet tooltipContent()}
+						Home
+					{/snippet}
 					{#snippet child({ props })}
 						<a href="/" {...props}>
 							<Home />
@@ -25,6 +28,9 @@
 			<Sidebar.Menu>
 				<Sidebar.MenuItem>
 					<Sidebar.MenuButton isActive={$page.url.pathname === '/songs'} class="transition-all">
+						{#snippet tooltipContent()}
+							Songs
+						{/snippet}
 						{#snippet child({ props })}
 							<a href="/songs" {...props}>
 								<Music2 />
@@ -35,6 +41,9 @@
 				</Sidebar.MenuItem>
 				<Sidebar.MenuItem>
 					<Sidebar.MenuButton isActive={$page.url.pathname === '/albums'} class="transition-all">
+						{#snippet tooltipContent()}
+							Albums
+						{/snippet}
 						{#snippet child({ props })}
 							<a href="/albums" {...props}>
 								<Library />
@@ -45,6 +54,9 @@
 				</Sidebar.MenuItem>
 				<Sidebar.MenuItem>
 					<Sidebar.MenuButton isActive={$page.url.pathname === '/playlists'} class="transition-all">
+						{#snippet tooltipContent()}
+							Playlists
+						{/snippet}
 						{#snippet child({ props })}
 							<a href="/playlists" {...props}>
 								<ListMusic />
@@ -60,6 +72,9 @@
 		<Sidebar.Menu>
 			<Sidebar.MenuItem>
 				<Sidebar.MenuButton isActive={$page.url.pathname === '/settings'} class="transition-all">
+					{#snippet tooltipContent()}
+						Settings
+					{/snippet}
 					{#snippet child({ props })}
 						<a href="/settings" {...props}>
 							<Settings />