Changes

web-player/src/lib/components/MobileHeader.svelte

@@ -3,6 +3,7 @@
 	import Upload from '@lucide/svelte/icons/upload';
 	import Folder from '@lucide/svelte/icons/folder';
 	import LogOut from '@lucide/svelte/icons/log-out';
+	import MenuItem from './ui/MenuItem.svelte';
 
 	interface Props {
 		user: SessionUser;
@@ -34,9 +35,7 @@
 			{#if user.picture}
 				<img src={user.picture} alt="" class="h-9 w-9 rounded-full object-cover" />
 			{:else}
-				<span
+				<span class="grid h-9 w-9 place-items-center rounded-full bg-surface-2 text-sm uppercase">
-					class="grid h-9 w-9 place-items-center rounded-full bg-surface-2 text-sm font-semibold uppercase"
-				>
 					{user.name.charAt(0)}
 				</span>
 			{/if}
@@ -44,33 +43,23 @@
 
 		{#if menuOpen}
 			<div
-				class="animate-pop absolute top-full right-0 mt-2 w-56 overflow-hidden rounded-panel border border-line bg-elevated py-1.5 shadow-menu"
+				class="animate-pop absolute top-full right-0 mt-2 w-56 overflow-hidden rounded-panel border border-line bg-elevated p-1.5 shadow-menu"
 			>
-				<a
+				<MenuItem
+					icon={Folder}
+					label="Canciones subidas"
 					href="/library"
 					onclick={() => (menuOpen = false)}
-					class="flex w-full items-center gap-3 px-3 py-2.5 text-base font-semibold text-fg-2 transition hover:bg-hover"
+				/>
-				>
+				<MenuItem
-					<Folder class="h-[18px] w-[18px]" strokeWidth={2} />
+					icon={Upload}
-					Canciones subidas
+					label="Subir música"
-				</a>
-				<a
 					href="/upload"
 					onclick={() => (menuOpen = false)}
-					class="flex w-full items-center gap-3 px-3 py-2.5 text-base font-semibold text-fg-2 transition hover:bg-hover"
+				/>
-				>
+				<div class="-mx-1.5 my-1.5 border-t border-line"></div>
-					<Upload class="h-[18px] w-[18px]" strokeWidth={2} />
-					Subir música
-				</a>
-				<div class="my-1.5 border-t border-line"></div>
 				<form method="POST" action="/logout" data-sveltekit-reload>
-					<button
+					<MenuItem icon={LogOut} label="Salir" type="submit" />
-						type="submit"
-						class="flex w-full items-center gap-3 px-3 py-2.5 text-base font-semibold text-fg-2 transition hover:bg-hover"
-					>
-						<LogOut class="h-[18px] w-[18px]" strokeWidth={2} />
-						Salir
-					</button>
 				</form>
 			</div>
 		{/if}

web-player/src/lib/components/Sidebar.svelte

@@ -7,6 +7,7 @@
 	import Music from '@lucide/svelte/icons/music';
 	import Upload from '@lucide/svelte/icons/upload';
 	import LogOut from '@lucide/svelte/icons/log-out';
+	import MenuItem from './ui/MenuItem.svelte';
 
 	interface Props {
 		user: SessionUser;
@@ -108,16 +109,10 @@
 	<div class="relative mt-auto" bind:this={menuRef}>
 		{#if menuOpen}
 			<div
-				class="absolute bottom-full left-0 mb-2 w-full overflow-hidden rounded-panel border border-line bg-elevated py-1.5 shadow-menu"
+				class="animate-pop absolute bottom-full left-0 mb-2 w-full overflow-hidden rounded-panel border border-line bg-elevated p-1.5 shadow-menu"
 			>
 				<form method="POST" action="/logout" data-sveltekit-reload>
-					<button
+					<MenuItem icon={LogOut} label="Salir" type="submit" />
-						type="submit"
-						class="flex w-full items-center gap-3 px-3 py-2.5 text-base font-semibold text-fg-2 transition hover:bg-hover"
-					>
-						<LogOut class="h-4.5 w-4.5" strokeWidth={2} />
-						Salir
-					</button>
 				</form>
 			</div>
 		{/if}
@@ -135,7 +130,7 @@
 					{user.name.charAt(0)}
 				</span>
 			{/if}
-			<span class="truncate text-base leading-[1.35] font-semibold">{user.name}</span>
+			<span class="truncate leading-[1.35]">{user.name}</span>
 		</button>
 	</div>
 </aside>

web-player/src/lib/components/TrackContextMenu.svelte

@@ -58,7 +58,7 @@
 		onclick={onAddToQueue}
 		class="flex w-full items-center gap-3 rounded-control px-2 py-2.5 text-left text-sm text-fg-2 transition hover:bg-hover"
 	>
-		<ListPlus class="h-6 w-6 shrink-0" strokeWidth={2} />
+		<ListPlus class="h-5 w-5 shrink-0" strokeWidth={2} />
 		<span class="text-base">Reproducir a continuación</span>
 	</button>
 	{#if playlists.length > 0}
@@ -107,9 +107,9 @@
 										trackIds={[]}
 										hue={hueFor(playlist.id)}
 										size="small"
-										class="h-8 w-8 shrink-0 rounded-control"
+										class="h-9 w-9 shrink-0 rounded-control"
 									/>
-									<span class="truncate text-base text-fg-2">{playlist.name}</span>
+									<span class="truncate text-fg-2">{playlist.name}</span>
 								</button>
 							</form>
 						{/each}

web-player/src/lib/components/ui/MenuItem.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { LucideIcon } from '@lucide/svelte';
+
+	interface Props {
+		icon: LucideIcon;
+		label: string;
+		href?: string;
+		type?: 'button' | 'submit';
+		reload?: boolean;
+		onclick?: (event: MouseEvent) => void;
+		class?: string;
+	}
+
+	let {
+		icon: Icon,
+		label,
+		href,
+		type = 'button',
+		reload = false,
+		onclick,
+		class: klass = ''
+	}: Props = $props();
+
+	const classes = $derived(
+		`flex w-full items-center gap-3 rounded-control px-2 py-2.5 text-left text-base text-fg-2 transition hover:bg-hover ${klass}`
+	);
+</script>
+
+{#if href}
+	<a {href} data-sveltekit-reload={reload ? '' : undefined} {onclick} class={classes}>
+		<Icon class="h-6 w-6 shrink-0" strokeWidth={2} />
+		{label}
+	</a>
+{:else}
+	<button {type} {onclick} class={classes}>
+		<Icon class="h-6 w-6 shrink-0" strokeWidth={2} />
+		{label}
+	</button>
+{/if}

web-player/src/routes/(app)/upload/+page.svelte

@@ -126,7 +126,7 @@
 								{i + 1}
 							{/if}
 						</span>
-						<span class="text-base font-semibold text-fg">{step.label}</span>
+						<span class="text-fg">{step.label}</span>
 					</div>
 					<p class="mt-3 text-base text-muted">{step.hint}</p>
 				</Surface>
@@ -205,12 +205,12 @@
 					{/if}
 				</span>
 				{#if audioName === ''}
-					<p class="mt-5 text-base font-medium text-fg sm:text-lg">
+					<p class="mt-5 text-fg sm:text-lg">
 						Arrastra tu audio aquí o haz clic para elegir
 					</p>
 					<p class="mt-2 text-sm text-muted">MP3, FLAC, WAV…</p>
 				{:else}
-					<p class="mt-5 max-w-full truncate text-base font-medium text-fg sm:text-lg">
+					<p class="mt-5 max-w-full truncate text-fg sm:text-lg">
 						{audioName}
 					</p>
 					<p class="mt-2 text-sm text-muted">{formatSize(audioSize)} · Listo para subir</p>