Update packages

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

@@ -412,11 +412,11 @@
 			{#each genreTiles as genre, i (genre.query)}
 				<a
 					href={buildHref(genre.query)}
-					class="animate-enter group relative flex h-28 flex-col gap-1 overflow-hidden rounded-2xl p-4.25 transition-[filter] hover:brightness-125"
+					class="animate-enter group relative flex h-28 flex-col gap-1 overflow-hidden rounded-2xl p-4.25 transition-[filter] hover:brightness-110"
 					style="animation-delay:{Math.min(i, 10) *
 						40}ms; background:linear-gradient(140deg, oklch(var(--mf-tile-l) var(--mf-tile-c) {genre.hue}), oklch(var(--mf-tile-shade-l) var(--mf-tile-shade-c) {genre.hue}))"
 				>
-					<div class="font-display text-base font-medium tracking-tight text-on-art">
+					<div class="text-on-art">
 						{genre.label}
 					</div>
 					<div class="text-xs text-on-art-2">{genre.tagline}</div>

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

@@ -5,7 +5,7 @@
 	import X from '@lucide/svelte/icons/x';
 	import { player, type QueueItem } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';
-	import { fmtDate } from '$lib/format';
+	import { fmtDate, fmtTime } from '$lib/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import CollectionHeader from '$lib/components/ui/CollectionHeader.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
@@ -48,7 +48,7 @@
 	<CollectionHeader
 		eyebrow="Colección"
 		title="Me gusta"
-		meta="{tracks.length} {tracks.length === 1 ? 'canción' : 'canciones'}"
+		meta="{tracks.length} {tracks.length === 1 ? 'Canción' : 'Canciones'}"
 		align="center"
 	>
 		{#snippet cover()}
@@ -60,13 +60,7 @@
 		{/snippet}
 		{#snippet actions()}
 			<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
-				{#if isCurrentQueue && player.playing}
-					<Pause class="h-4 w-4" strokeWidth={1.5} />
-					Pausar
-				{:else}
-					<Play class="h-4 w-4" strokeWidth={1.5} />
-					Reproducir
-				{/if}
+				{isCurrentQueue && player.playing ? 'Pausar' : 'Reproducir'}
 			</Button>
 		{/snippet}
 	</CollectionHeader>
@@ -103,7 +97,7 @@
 					<TrackMeta class="hidden sm:block">—</TrackMeta>
 					<TrackMeta class="hidden sm:block">{fmtDate(track.likedAt)}</TrackMeta>
 					<TrackMeta class="hidden sm:block">{Number(track.listensCount ?? 0)}</TrackMeta>
-					<TrackMeta>—</TrackMeta>
+					<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
 					<IconButton
 						label="Quitar de Me gusta"
 						size="sm"

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

@@ -30,7 +30,7 @@
 	>
 		{#snippet actions()}
 			{#if items.length > 0}
-				<Button onclick={() => createPlaylistModal.show()}>Crear lista</Button>
+				<Button onclick={() => createPlaylistModal.show()}>Crear nueva lista</Button>
 			{/if}
 		{/snippet}
 	</PageHeader>
@@ -55,7 +55,7 @@
 			description="Crea la primera y añádele canciones de tu biblioteca."
 		>
 			{#snippet actions()}
-				<Button onclick={() => createPlaylistModal.show()}>Crear lista</Button>
+				<Button onclick={() => createPlaylistModal.show()}>Crear nueva lista</Button>
 			{/snippet}
 		</EmptyState>
 	{/if}

web-player/src/routes/(app)/u/[id]/+page.svelte

@@ -9,6 +9,7 @@
 	import Button from '$lib/components/ui/Button.svelte';
 	import ArtistAvatar from '$lib/components/ui/ArtistAvatar.svelte';
 	import CollectionHeader from '$lib/components/ui/CollectionHeader.svelte';
+	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 
 	let { data, form } = $props();
 
@@ -69,9 +70,7 @@
 	</CollectionHeader>
 
 	<div class="mt-9">
-		<h2 class="font-display text-lg font-semibold tracking-[-0.02em] text-fg">
-			Playlists públicas
-		</h2>
+		<SectionHeading title="Playlists públicas" subtitle="Creadas y compartidas por este usuario" />
 
 		{#if playlists.length > 0}
 			<MediaGrid min="210px" minMobile="180px" class="mt-6">

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

@@ -112,7 +112,7 @@
 				<Surface padding="sm" class={stepClass(stepStates[i])}>
 					<div class="flex items-center gap-3">
 						<span
-							class="grid h-7 w-7 shrink-0 place-items-center rounded-full text-xs font-bold {stepStates[
+							class="grid h-7 w-7 shrink-0 place-items-center rounded-full text-sm {stepStates[
 								i
 							] === 'idle'
 								? 'bg-surface-2 text-fg-2'
@@ -228,7 +228,7 @@
 						{#if coverPreview !== ''}
 							<img src={coverPreview} alt="Portada" class="h-full w-full object-cover" />
 						{:else}
-							<ImageIcon class="h-11 w-11 text-on-art/70" strokeWidth={1.3} />
+							<ImageIcon class="h-16 w-16 text-on-art/60" strokeWidth={1} />
 						{/if}
 					</label>
 				</Field>