From 4ac73d8fa3ac1c82b6bfa91506b42d07fb519f01 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Thu, 24 Sep 2026 19:25:15 +0200
Subject: [PATCH] Update sidebar to the new page

---
 .../src/lib/components/shell/Sidebar.svelte   | 50 +++++++------
 .../src/lib/components/shell/TabsBar.svelte   |  4 +-
 .../src/lib/components/shell/navLinks.ts      | 71 +++++++++++++------
 3 files changed, 81 insertions(+), 44 deletions(-)

diff --git a/web-player/src/lib/components/shell/Sidebar.svelte b/web-player/src/lib/components/shell/Sidebar.svelte
index ab5e7df..04cd505 100644
--- a/web-player/src/lib/components/shell/Sidebar.svelte
+++ b/web-player/src/lib/components/shell/Sidebar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { appNavLinks, isNavActive } from './navLinks';
+	import { appNavSections, isNavActive } from './navLinks';
 	import { playlistCover } from '$lib/utils/hrefs';
 	import { liked } from '$lib/state/liked.svelte';
 	import { createPlaylistModal } from '$lib/state/panels.svelte';
@@ -29,7 +29,9 @@
 
 	const visiblePlaylists = $derived(playlists.slice(0, SIDEBAR_PLAYLISTS_LIMIT));
 
-	const navLinks = $derived(appNavLinks(user, { playlists: playlistCount, liked: liked.count }));
+	const navSections = $derived(
+		appNavSections(user, { playlists: playlistCount, liked: liked.count })
+	);
 </script>
 
 <aside
@@ -39,24 +41,32 @@
 		<Logo size="sm" />
 	</a>
 
-	<nav class="flex flex-col gap-1">
-		{#each navLinks as link (link.href)}
-			{@const active = isNavActive(link.href)}
-			<a
-				href={link.href}
-				aria-current={active ? 'page' : undefined}
-				class="flex items-center gap-3 rounded-control px-3 py-2 text-sm transition-colors {active
-					? 'bg-surface-2 text-fg'
-					: 'text-fg-2 hover:bg-hover hover:text-fg'}"
-			>
-				<link.icon class="size-icon-md shrink-0" />
-				<span class="flex-1 truncate">{link.label}</span>
-				{#if link.count}
-					<span class="text-xs text-fg-2 tabular-nums">{link.count}</span>
-				{/if}
-			</a>
-		{/each}
-	</nav>
+	{#each navSections as section, index (index)}
+		{#if index > 0}
+			<div class="mx-3 mt-6 mb-3.5 h-px bg-line"></div>
+		{/if}
+		{#if section.title}
+			<span class="px-3 pb-2 text-eyebrow text-fg-2">{section.title}</span>
+		{/if}
+		<nav class="flex flex-col gap-2">
+			{#each section.links as link (link.href)}
+				{@const active = isNavActive(link)}
+				<a
+					href={link.href}
+					aria-current={active ? 'page' : undefined}
+					class="flex items-center gap-3 rounded-control px-3 py-2 text-sm transition-colors {active
+						? 'bg-surface-2 text-fg'
+						: 'text-fg-2 hover:bg-hover hover:text-fg'}"
+				>
+					<link.icon class="size-icon-md shrink-0" />
+					<span class="flex-1 truncate">{link.label}</span>
+					{#if link.count}
+						<span class="text-xs text-fg-2 tabular-nums">{link.count}</span>
+					{/if}
+				</a>
+			{/each}
+		</nav>
+	{/each}
 
 	{#if user}
 		<div class="mx-3 mt-6 mb-3.5 h-px bg-line"></div>
diff --git a/web-player/src/lib/components/shell/TabsBar.svelte b/web-player/src/lib/components/shell/TabsBar.svelte
index 1c80d2a..929b120 100644
--- a/web-player/src/lib/components/shell/TabsBar.svelte
+++ b/web-player/src/lib/components/shell/TabsBar.svelte
@@ -9,7 +9,7 @@
 
 	let { user, class: klass = '' }: Props = $props();
 
-	const links = $derived(appNavLinks(user).filter((link) => link.primary));
+	const links = $derived(appNavLinks(user).filter((link) => link.inMobileTabs));
 </script>
 
 <nav
@@ -17,7 +17,7 @@
 	style="padding-bottom:calc(0.4375rem + var(--mf-safe-b))"
 >
 	{#each links as link (link.href)}
-		{@const active = isNavActive(link.href)}
+		{@const active = isNavActive(link)}
 		<a
 			href={link.href}
 			aria-current={active ? 'page' : undefined}
diff --git a/web-player/src/lib/components/shell/navLinks.ts b/web-player/src/lib/components/shell/navLinks.ts
index 98bdf20..1e7ba2f 100644
--- a/web-player/src/lib/components/shell/navLinks.ts
+++ b/web-player/src/lib/components/shell/navLinks.ts
@@ -1,12 +1,6 @@
 import { page } from '$app/state';
 import type { LucideIcon } from '@lucide/svelte';
-import Home from '@lucide/svelte/icons/house';
-import Compass from '@lucide/svelte/icons/compass';
-import ListMusic from '@lucide/svelte/icons/list-music';
-import Heart from '@lucide/svelte/icons/heart';
-import Disc from '@lucide/svelte/icons/disc-2';
-import Folder from '@lucide/svelte/icons/folder';
-import Upload from '@lucide/svelte/icons/upload';
+import { House, Compass, ListMusic, Heart, Music } from '@lucide/svelte';
 import type { SessionUser } from '$lib/types';
 
 export interface AppNavLink {
@@ -14,7 +8,13 @@ export interface AppNavLink {
 	label: string;
 	icon: LucideIcon;
 	count?: number;
-	primary: boolean;
+	inMobileTabs: boolean;
+	activeFor?: string[];
+}
+
+export interface AppNavSection {
+	title?: string;
+	links: AppNavLink[];
 }
 
 export interface AppNavCounts {
@@ -22,27 +22,54 @@ export interface AppNavCounts {
 	liked?: number;
 }
 
-export function isNavActive(href: string): boolean {
+export function isNavActive(link: AppNavLink): boolean {
+	return [link.href, ...(link.activeFor ?? [])].some(isPathActive);
+}
+
+function isPathActive(href: string): boolean {
 	const section: string | null | undefined = page.data.section;
 	if (section !== undefined) return section === href;
 	return href === '/' ? page.url.pathname === '/' : page.url.pathname.startsWith(href);
 }
 
-export function appNavLinks(user: SessionUser | null, counts: AppNavCounts = {}): AppNavLink[] {
-	if (!user) return [{ href: '/explore', label: 'Descubrir', icon: Compass, primary: true }];
+export function appNavSections(
+	user: SessionUser | null,
+	counts: AppNavCounts = {}
+): AppNavSection[] {
+	if (!user)
+		return [
+			{ links: [{ href: '/explore', label: 'Descubrir', icon: Compass, inMobileTabs: true }] }
+		];
 	return [
-		{ href: '/', label: 'Inicio', icon: Home, primary: true },
-		{ href: '/explore', label: 'Descubrir', icon: Compass, primary: true },
 		{
-			href: '/playlists',
-			label: 'Playlists',
-			icon: ListMusic,
-			count: counts.playlists,
-			primary: true
+			links: [
+				{ href: '/', label: 'Inicio', icon: House, inMobileTabs: true },
+				{ href: '/explore', label: 'Descubrir', icon: Compass, inMobileTabs: true },
+				{
+					href: '/playlists',
+					label: 'Playlists',
+					icon: ListMusic,
+					count: counts.playlists,
+					inMobileTabs: true
+				},
+				{ href: '/liked', label: 'Me gusta', icon: Heart, count: counts.liked, inMobileTabs: true }
+			]
 		},
-		{ href: '/liked', label: 'Me gusta', icon: Heart, count: counts.liked, primary: true },
-		{ href: '/albums', label: 'Mis álbumes', icon: Disc, primary: false },
-		{ href: '/library', label: 'Canciones subidas', icon: Folder, primary: false },
-		{ href: '/upload', label: 'Subir música', icon: Upload, primary: false }
+		{
+			title: 'Estudio',
+			links: [
+				{
+					href: '/library',
+					label: 'Gestionar música',
+					icon: Music,
+					inMobileTabs: false,
+					activeFor: ['/albums', '/upload']
+				}
+			]
+		}
 	];
 }
+
+export function appNavLinks(user: SessionUser | null, counts: AppNavCounts = {}): AppNavLink[] {
+	return appNavSections(user, counts).flatMap((section) => section.links);
+}