Add likes, follows and playlist visibility; redesign web-player UI

Backend: - New Likes feature (toggle/get liked tracks) and endpoints - User follow/unfollow, listening stats, public user profile - Playlist visibility (public/private) support - Various auth and DTO/response adjustments to support the above Frontend (web-player): - New design system pass: theme tokens/mode (light/dark), glass menu, tabs bar, player dock/extras/queue components, mix tiles, artist link - New routes: Liked, public user profile (/u/[id]), likes API proxy - Search refactor: shared SearchBox component used by TopBar and MobileHeader (search now reachable on mobile), live results as you type instead of requiring Enter, dropped the "Buscando…" quick-result preview - Removed now-unused components (MobileNav, CoverBadge, MixBentoTile, PlayPauseOverlay, SuggestionsTable, userDirectory) - Design handoff reference docs added under web-player/design_handoff_musify_player and web-player/docs/design-system-refactor-plan.md
2026-09-14 23:42:45 +02:00
parent 389b3b9244
commit dc1ba89a6d
166 changed files with 14271 additions and 1982 deletions
@@ -35,7 +35,7 @@
 	</PageHeader>

 	{#if items.length > 0}
-		<MediaGrid class="mt-9">
+		<MediaGrid class="mt-7 sm:mt-8">
 			{#each items as album, i (album.id)}
 				<AlbumCard
 					id={album.id}
@@ -55,10 +55,7 @@
 			description="Crea el primero y añádele las canciones que hayas subido."
 		>
 			{#snippet actions()}
-				<Button onclick={() => (creating = true)}>
-					<Plus class="h-4 w-4" strokeWidth={2} />
-					Crear álbum
-				</Button>
+				<Button onclick={() => (creating = true)}>Crear álbum</Button>
 			{/snippet}
 		</EmptyState>
 	{/if}
@@ -42,7 +42,7 @@ export const load: PageServerLoad = async ({ params, locals, url, fetch, parent
 		(track) => track.source === 'Local' && !inAlbum.has(track.id)
 	);

-	const isOwner = user !== null && Number(album.ownerUserId) === Number(user.sub);
+	const isOwner = user !== null && String(album.ownerUserId) === user.sub;

 	return { album, tracks, library, isOwner, section: isOwner ? '/albums' : null };
 };
@@ -48,17 +48,17 @@
 	label={isOwner ? 'Volver a tus álbumes' : 'Volver al inicio'}
 />

-<div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
+<div class="mt-3 flex flex-col gap-5 sm:mt-4 sm:flex-row sm:items-end sm:gap-6">
 	<PlaylistArt
 		{trackIds}
 		{coverUrl}
 		size="large"
-		class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
+		class="h-36 w-36 shrink-0 rounded-[18px] shadow-[0_24px_56px_rgba(0,0,0,.55)] sm:h-41 sm:w-41"
 	/>
 	<div class="min-w-0 flex-1">
-		<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Álbum</p>
+		<p class="text-[10.5px] font-semibold tracking-[0.16em] text-fg-2 uppercase">Álbum</p>
 		<h1
-			class="mt-1.5 font-display text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+			class="mt-1.5 font-display text-[28px] font-semibold tracking-[-0.035em] break-words text-fg sm:text-[33px]"
 		>
 			{title}
 		</h1>
@@ -72,10 +72,10 @@
 <div class="mt-6 flex flex-wrap items-center gap-2.5 sm:mt-7">
 	<Button size="sm" onclick={onPlayAll} disabled={trackIds.length === 0}>
 		{#if playing}
-			<Pause class="h-4 w-4" fill="currentColor" strokeWidth={1.5} />
+			<Pause class="h-4 w-4" strokeWidth={1.5} />
 			Pausar
 		{:else}
-			<Play class="h-4 w-4" fill="currentColor" strokeWidth={1.5} />
+			<Play class="h-4 w-4" strokeWidth={1.5} />
 			Reproducir
 		{/if}
 	</Button>
@@ -31,18 +31,16 @@

 <TrackTable index action={isOwner} class="mt-6 sm:mt-8">
 	{#each tracks as track, i (track.id)}
-		<TrackRow>
-			<TrackIndexCell
-				index={i}
-				active={player.current.id === queueIdForTrack(track)}
-				playing={player.playing}
-				onToggle={() => playFrom(i)}
-			/>
+		{@const active = player.current.id === queueIdForTrack(track)}
+		<TrackRow {active}>
+			<TrackIndexCell index={i} {active} playing={player.playing} onToggle={() => playFrom(i)} />
 			<TrackTitleCell
 				trackId={track.id}
 				title={track.title}
 				artist={track.artist}
+				ownerUserId={track.ownerUserId}
 				explicit={track.isExplicit}
+				{active}
 				onClick={() => playFrom(i)}
 			/>
 			<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
@@ -28,12 +28,15 @@
 	<SectionHeading title="Tus canciones subidas" />
 	<TrackTable action>
 		{#each library as track, i (track.id)}
-			<TrackRow>
+			{@const active = player.current.id === track.id}
+			<TrackRow {active}>
 				<TrackTitleCell
 					trackId={track.id}
 					title={track.title}
 					artist={track.artist}
+					ownerUserId={track.ownerUserId}
 					explicit={track.isExplicit}
+					{active}
 					onClick={() => playFrom(i)}
 				>
 					{#snippet overlay()}
@@ -79,21 +79,21 @@
 <Page>
 	<BackLink href="/explore" label="Volver a explorar" />

-	<div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
+	<div class="mt-3 flex flex-col gap-5 sm:mt-4 sm:flex-row sm:items-end sm:gap-6">
 		<Cover
 			trackId={album.albumId}
 			src={album.thumbnailUrl}
 			size="large"
 			alt={album.title}
-			class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
+			class="h-36 w-36 shrink-0 rounded-[18px] shadow-[0_24px_56px_rgba(0,0,0,.55)] sm:h-41 sm:w-41"
 			oncontextmenu={(e) => (albumMenu = albumContextMenuStateFor(e, 'youtube', album.albumId))}
 		/>
 		<div class="min-w-0 flex-1">
-			<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">
+			<p class="text-[10.5px] font-semibold tracking-[0.16em] text-fg-2 uppercase">
 				{album.isSingle ? 'Single' : album.isEp ? 'EP' : 'Álbum'}
 			</p>
 			<h1
-				class="mt-1.5 font-display text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+				class="mt-1.5 font-display text-[28px] font-semibold tracking-[-0.035em] break-words text-fg sm:text-[33px]"
 			>
 				{album.title}
 			</h1>
@@ -113,10 +113,10 @@
 	<div class="mt-6 flex flex-wrap items-center gap-2.5 sm:mt-7">
 		<Button size="sm" onclick={playAll} disabled={queue.length === 0}>
 			{#if isCurrentQueue && player.playing}
-				<Pause class="h-4 w-4" fill="currentColor" strokeWidth={1.5} />
+				<Pause class="h-4 w-4" strokeWidth={1.5} />
 				Pausar
 			{:else}
-				<Play class="h-4 w-4" fill="currentColor" strokeWidth={1.5} />
+				<Play class="h-4 w-4" strokeWidth={1.5} />
 				Reproducir
 			{/if}
 		</Button>
@@ -132,19 +132,19 @@

 	<TrackTable index class="mt-6 sm:mt-8">
 		{#each tracks as track, i (track.videoId)}
-			<TrackRow oncontextmenu={(e) => (contextMenu = contextMenuStateFor(e, targetFor(i)))}>
-				<TrackIndexCell
-					index={i}
-					active={player.current.id === track.videoId}
-					playing={player.playing}
-					onToggle={() => playFrom(i)}
-				/>
+			{@const active = player.current.id === track.videoId}
+			<TrackRow
+				{active}
+				oncontextmenu={(e) => (contextMenu = contextMenuStateFor(e, targetFor(i)))}
+			>
+				<TrackIndexCell index={i} {active} playing={player.playing} onToggle={() => playFrom(i)} />
 				<TrackTitleCell
 					trackId={track.videoId}
 					title={track.title}
 					artist={album.artist}
 					coverSrc={album.thumbnailUrl}
 					explicit={track.isExplicit}
+					{active}
 					onClick={() => playFrom(i)}
 				/>
 				<TrackMeta>{fmtTime(Number(track.durationSeconds))}</TrackMeta>
@@ -1,6 +1,6 @@
 import type { PageServerLoad, Actions } from './$types';
 import { createApiClient, unwrapOrError } from '$lib/server/api';
-import { fetchYoutubeFiller } from '$lib/server/youtube';
+import { YOUTUBE_FILLER_QUERIES } from '$lib/server/youtube';
 import {
 	addAlbumToPlaylistAction,
 	addTrackAction,
@@ -10,9 +10,8 @@ import {
 import {
 	EXPLORE_ALBUMS_PAGE_SIZE,
 	EXPLORE_PAGE_SIZE as PAGE_SIZE,
-	YOUTUBE_FILLER_LIMIT
+	EXPLORE_USERS_LIMIT
 } from '$lib/config';
-import { searchUsers } from '$lib/server/userDirectory';

 export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 	const query = url.searchParams.get('q')?.trim() ?? '';
@@ -39,10 +38,17 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 			})
 		: Promise.resolve(null);

-	const [tracksRes, playlistsRes, albumsRes] = await Promise.all([
+	const usersPromise = query
+		? api.GET('/users', {
+				params: { query: { usernameSearch: query, pageNumber: 1, pageSize: EXPLORE_USERS_LIMIT } }
+			})
+		: Promise.resolve(null);
+
+	const [tracksRes, playlistsRes, albumsRes, usersRes] = await Promise.all([
 		tracksPromise,
 		playlistsPromise,
-		albumsPromise
+		albumsPromise,
+		usersPromise
 	]);

 	const tracks = unwrapOrError(tracksRes, 'No se pudieron cargar las canciones.');
@@ -54,10 +60,8 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 		tracks,
 		albums: albumItems.flatMap((item) => (item.album ? [item.album] : [])),
 		youtubeAlbums: albumItems.flatMap((item) => (item.youTubeAlbum ? [item.youTubeAlbum] : [])),
-		users: searchUsers(query),
-		youtubeFiller: query
-			? Promise.resolve(null)
-			: fetchYoutubeFiller(api, locals.accessToken, YOUTUBE_FILLER_LIMIT),
+		users: usersRes?.data?.items ?? [],
+		genres: YOUTUBE_FILLER_QUERIES,
 		playlists: playlistsRes?.data?.items ?? []
 	};
 };
@@ -1,8 +1,5 @@
 <script lang="ts">
-	import Search from '@lucide/svelte/icons/search';
 	import Music from '@lucide/svelte/icons/music';
-	import { untrack } from 'svelte';
-	import { goto } from '$app/navigation';
 	import { player } from '$lib/player/player.svelte';
 	import { fetchAlbumQueueItems } from '$lib/albums';
 	import { fmtTime } from '$lib/format';
@@ -10,17 +7,16 @@
 	import PageHeader from '$lib/components/ui/PageHeader.svelte';
 	import MediaGrid from '$lib/components/ui/MediaGrid.svelte';
 	import Alert from '$lib/components/ui/Alert.svelte';
-	import Input from '$lib/components/ui/Input.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import InfiniteScroll from '$lib/components/ui/InfiniteScroll.svelte';
 	import Cover from '$lib/components/ui/Cover.svelte';
-	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
+	import AlbumCard from '$lib/components/ui/AlbumCard.svelte';
 	import ArtistAvatar from '$lib/components/ui/ArtistAvatar.svelte';
 	import Rail from '$lib/components/ui/Rail.svelte';
 	import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
 	import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
-	import { EXPLORE_ALBUMS_LIMIT, EXPLORE_PAGE_SIZE, SEARCH_DEBOUNCE_MS } from '$lib/config';
+	import { EXPLORE_ALBUMS_LIMIT, EXPLORE_PAGE_SIZE } from '$lib/config';
 	import type { YouTubeSong } from '$lib/types';
 	import TrackContextMenu, {
 		contextMenuStateFor,
@@ -42,10 +38,24 @@
 		type TrackTarget
 	} from '$lib/tracks';

-	let { data, form } = $props();
+	const GENRE_INFO: Record<string, { label: string; tagline: string }> = {
+		pop: { label: 'Pop', tagline: 'Éxitos que suenan en todas partes' },
+		rock: { label: 'Rock', tagline: 'Guitarras, actitud y ruido' },
+		reggaeton: { label: 'Reggaetón', tagline: 'El ritmo que no para' },
+		'lo-fi': { label: 'Lo-fi', tagline: 'Para concentrarte o relajarte' },
+		indie: { label: 'Indie', tagline: 'Voces fuera del radar' },
+		salsa: { label: 'Salsa', tagline: 'Para mover el cuerpo' },
+		'k-pop': { label: 'K-pop', tagline: 'Coreografías pegajosas' },
+		electrónica: { label: 'Electrónica', tagline: 'Beats para perderte' },
+		jazz: { label: 'Jazz', tagline: 'Improvisación y elegancia' },
+		baladas: { label: 'Baladas', tagline: 'Para sentir con calma' },
+		trap: { label: 'Trap', tagline: 'Autotune y bajos pesados' },
+		cumbia: { label: 'Cumbia', tagline: 'El sabor de siempre' },
+		'hip hop': { label: 'Hip hop', tagline: 'Rimas con actitud' },
+		'música clásica': { label: 'Clásica', tagline: 'Siglos de composición' }
+	};

-	let searchValue = $state(untrack(() => data.query));
-	let searchTimeout: ReturnType<typeof setTimeout> | undefined;
+	let { data, form } = $props();

 	let ytItems = $state<YouTubeSong[]>([]);
 	let ytUnavailable = $state(false);
@@ -71,26 +81,26 @@
 		if (data.query) {
 			ytItems = appendUnique(
 				[],
-				data.tracks.items.flatMap((item) => (item.youTubeSong ? [item.youTubeSong as YouTubeSong] : [])),
+				data.tracks.items.flatMap((item) =>
+					item.youTubeSong ? [item.youTubeSong as YouTubeSong] : []
+				),
 				(i) => i.videoId
 			);
 			ytUnavailable = data.tracks.youtubeUnavailable;
-			return;
+		} else {
+			ytItems = [];
+			ytUnavailable = false;
 		}
-
-		ytItems = [];
-		ytUnavailable = false;
-
-		let cancelled = false;
-		data.youtubeFiller?.then((filler) => {
-			if (cancelled || !filler) return;
-			ytItems = appendUnique([], filler.items, (i) => i.videoId);
-		});
-		return () => {
-			cancelled = true;
-		};
 	});

+	const genreTiles = $derived(
+		data.genres.map((query, i) => ({
+			query,
+			hue: Math.round((i * 360) / data.genres.length),
+			...(GENRE_INFO[query] ?? { label: query, tagline: 'Explora este estilo' })
+		}))
+	);
+
 	const songRows = $derived([
 		...localItems.map((track) => ({
 			target: { kind: 'local' as const, track },
@@ -126,35 +136,10 @@
 		!!data.query && !ytUnavailable && items.length === 0 && !hasAlbums && !hasUsers
 	);

-	function localAlbumCaption(album: LocalAlbum) {
-		return [
-			album.releaseYear === null ? undefined : String(album.releaseYear),
-			`${Number(album.trackCount)} ${Number(album.trackCount) === 1 ? 'canción' : 'canciones'}`
-		]
-			.filter(Boolean)
-			.join(' · ');
-	}
-
-	function youtubeAlbumCaption(album: YouTubeAlbum) {
-		return [album.artist, album.releaseYear === null ? undefined : String(album.releaseYear)]
-			.filter(Boolean)
-			.join(' · ');
-	}
-
 	function buildHref(query: string) {
 		return query ? `/explore?q=${encodeURIComponent(query)}` : '/explore';
 	}

-	function onSearchInput(event: Event) {
-		const value = (event.currentTarget as HTMLInputElement).value;
-		clearTimeout(searchTimeout);
-		searchTimeout = setTimeout(() => {
-			const term = value.trim();
-			if (term === data.query) return;
-			goto(buildHref(term), { keepFocus: true, replaceState: true, noScroll: true });
-		}, SEARCH_DEBOUNCE_MS);
-	}
-
 	function togglePlay(index: number) {
 		player.playOrToggle(items.map(queueItemForTarget), index);
 	}
@@ -224,87 +209,99 @@
 </script>

 <svelte:head>
-	<title>Buscar</title>
-	<meta name="description" content="Busca canciones, álbumes y usuarios en Musify." />
+	<title>{data.query ? `Buscar «${data.query}»` : 'Descubrir'}</title>
+	<meta
+		name="description"
+		content="Busca canciones, álbumes y personas, o descubre por género en Musify."
+	/>
 </svelte:head>

 <Page>
-	<PageHeader title="Buscar" subtitle="Encuentra canciones, álbumes y personas." />
-
-	<div class="mt-6">
-		<Input
-			type="search"
-			icon={Search}
-			bind:value={searchValue}
-			oninput={onSearchInput}
-			placeholder="¿Qué quieres reproducir?"
+	{#if !data.query}
+		<PageHeader
+			title="Descubrir"
+			subtitle="Encuentra tu próxima canción favorita explorando por género."
 		/>
-	</div>
+	{:else if !nothingFound}
+		<PageHeader title="Resultados para «{data.query}»" />
+	{/if}

 	{#if form?.message}
 		<Alert class="mt-4">{form.message}</Alert>
 	{/if}

 	{#if nothingFound}
-		<EmptyState
-			icon={Music}
-			title="Sin resultados"
-			description="No hay resultados para «{data.query}»."
-		/>
+		<div class="mx-auto max-w-115 py-[8vh] text-center">
+			<h1 class="font-display text-xl font-semibold tracking-[-0.025em] text-fg">
+				Sin resultados para «{data.query}»
+			</h1>
+			<p class="mt-2.5 text-[13px] leading-[1.65] text-fg-2">
+				Revisa la ortografía o prueba con un término más corto. También puedes buscar por álbum o
+				por playlist.
+			</p>
+			<div class="mt-5.5 flex flex-wrap justify-center gap-2">
+				{#each genreTiles.slice(0, 4) as genre (genre.query)}
+					<a
+						href={buildHref(genre.query)}
+						class="rounded-full border border-white/8 px-3.5 py-2 text-xs text-fg-2 transition-colors hover:bg-white/5 hover:text-fg"
+					>
+						{genre.label}
+					</a>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if !data.query}
+		<!-- GÉNEROS -->
+		<div class="mt-7 grid grid-cols-[repeat(auto-fill,minmax(268px,1fr))] gap-3.5">
+			{#each genreTiles as genre, i (genre.query)}
+				<a
+					href={buildHref(genre.query)}
+					class="animate-enter group relative block h-28 overflow-hidden rounded-2xl p-4.25 transition-[filter] hover:brightness-125"
+					style="animation-delay:{Math.min(i, 10) *
+						40}ms; background:linear-gradient(140deg, oklch(0.24 0.07 {genre.hue}), rgba(9,9,12,.95))"
+				>
+					<div class="font-display text-[15.5px] font-semibold tracking-[-0.02em] text-fg">
+						{genre.label}
+					</div>
+					<div class="mt-1.5 text-[11.5px] text-fg-3">{genre.tagline}</div>
+				</a>
+			{/each}
+		</div>
 	{/if}

 	{#if hasAlbums}
-		<div class="mt-8">
+		<div class="mt-9">
+			<SectionHeading title="Álbumes" />
 			<MediaGrid as="ul" min="168px" minMobile="150px">
 				{#each albumEntries as entry, i (entry.kind === 'local' ? entry.album.id : entry.album.albumId)}
 					<li>
 						{#if entry.kind === 'local'}
-							<a
-								href="/albums/{entry.album.id}"
-								class="group/card animate-enter block min-w-0 rounded-art focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
-								style="animation-delay:{Math.min(i, 10) * 45}ms"
-								oncontextmenu={(e) => openAlbumMenu(e, 'local', entry.album.id)}
-							>
-								<div class="relative">
-									<PlaylistArt
-										trackIds={entry.album.coverTrackIds}
-										class="aspect-square w-full rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
-									/>
-								</div>
-								<div
-									class="mt-2.5 truncate text-fg transition-colors group-hover/card:text-accent-soft"
-								>
-									{entry.album.title}
-								</div>
-								<div class="mt-0.5 truncate text-sm text-fg-3">
-									{localAlbumCaption(entry.album)}
-								</div>
-							</a>
+							<AlbumCard
+								id={entry.album.id}
+								title={entry.album.title}
+								releaseYear={entry.album.releaseYear === null
+									? undefined
+									: Number(entry.album.releaseYear)}
+								trackCount={Number(entry.album.trackCount)}
+								trackIds={entry.album.coverTrackIds}
+								index={i}
+								onContextMenu={(e) => openAlbumMenu(e, 'local', entry.album.id)}
+							/>
 						{:else}
-							<a
+							<AlbumCard
+								id={entry.album.albumId}
 								href="/albums/external/youtube/{entry.album.albumId}"
-								class="group/card animate-enter block min-w-0 rounded-art focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
-								style="animation-delay:{Math.min(i, 10) * 45}ms"
-								oncontextmenu={(e) => openAlbumMenu(e, 'youtube', entry.album.albumId)}
-							>
-								<div class="relative">
-									<Cover
-										trackId={entry.album.albumId}
-										src={entry.album.thumbnailUrl}
-										size="large"
-										alt={entry.album.title}
-										class="aspect-square w-full rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
-									/>
-								</div>
-								<div
-									class="mt-2.5 truncate text-fg transition-colors group-hover/card:text-accent-soft"
-								>
-									{entry.album.title}
-								</div>
-								<div class="mt-0.5 truncate text-sm text-fg-3">
-									{youtubeAlbumCaption(entry.album)}
-								</div>
-							</a>
+								title={entry.album.title}
+								subtitle={entry.album.artist}
+								releaseYear={entry.album.releaseYear === null
+									? undefined
+									: Number(entry.album.releaseYear)}
+								coverSrc={entry.album.thumbnailUrl}
+								index={i}
+								onContextMenu={(e) => openAlbumMenu(e, 'youtube', entry.album.albumId)}
+							/>
 						{/if}
 					</li>
 				{/each}
@@ -313,71 +310,78 @@
 	{/if}

 	{#if hasUsers}
-		<div class="mt-8">
+		<div class="mt-9">
 			<SectionHeading title="Usuarios" />
 			<Rail>
 				{#each users as u, i (u.id)}
-					<div
+					<a
+						href="/u/{u.id}"
 						class="group/artist animate-enter shrink-0"
 						style="animation-delay:{Math.min(i, 10) * 45}ms"
 					>
-						<ArtistAvatar name={u.name} size={96} />
-						<div class="mt-1 w-24 truncate text-center text-xs text-fg-3">@{u.handle}</div>
-					</div>
+						<ArtistAvatar name={u.name} imageUrl={u.profilePictureUrl} size={96} />
+					</a>
 				{/each}
 			</Rail>
 		</div>
 	{/if}

-	<div class="mt-6">
-		{#if songRows.length > 0}
-			<ul class="flex flex-col gap-1">
-				{#each songRows as { target: item, seconds }, i (targetId(item))}
-					<li>
-						<button
-							type="button"
-							onclick={() => togglePlay(i)}
-							oncontextmenu={(e) => openContextMenu(e, item)}
-							aria-label="Reproducir {targetTitle(item)}"
-							class="group/row flex w-full min-w-0 items-center gap-3.5 rounded-control p-2 pr-4 text-left transition hover:bg-surface focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none"
-						>
-							<Cover
-								trackId={targetId(item)}
-								src={targetCoverSrc(item)}
-								size="small"
-								alt={targetTitle(item)}
-								class="h-11 w-11 shrink-0 rounded-control shadow-art ring-1 ring-line ring-inset"
+	{#if data.query}
+		<div class="mt-9">
+			{#if songRows.length > 0}
+				<SectionHeading title="Canciones" />
+				<ul class="flex flex-col gap-1">
+					{#each songRows as { target: item, seconds }, i (targetId(item))}
+						<li>
+							<button
+								type="button"
+								onclick={() => togglePlay(i)}
+								oncontextmenu={(e) => openContextMenu(e, item)}
+								aria-label="Reproducir {targetTitle(item)}"
+								class="group/row flex w-full min-w-0 items-center gap-3.5 rounded-control p-2 pr-4 text-left transition hover:bg-surface focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none"
 							>
-								{#if isTargetCurrent(item)}
-									<NowPlaying paused={!player.playing} />
-								{/if}
-							</Cover>
-							<div class="min-w-0 flex-1">
-								<div class="flex min-w-0 items-center gap-1.5">
-									{#if targetExplicit(item)}
-										<ExplicitBadge />
+								<Cover
+									trackId={targetId(item)}
+									src={targetCoverSrc(item)}
+									size="small"
+									alt={targetTitle(item)}
+									class="h-11 w-11 shrink-0 rounded-control shadow-art ring-1 ring-line ring-inset"
+								>
+									{#if isTargetCurrent(item)}
+										<NowPlaying paused={!player.playing} />
+									{/if}
+								</Cover>
+								<div class="min-w-0 flex-1">
+									<div class="flex min-w-0 items-center gap-1.5">
+										{#if targetExplicit(item)}
+											<ExplicitBadge />
+										{/if}
+										<span class="truncate text-[13px] font-medium text-fg">
+											{targetTitle(item)}
+										</span>
+									</div>
+									{#if targetArtist(item)}
+										<div class="truncate text-[11.5px] text-fg-3">
+											Canción · {targetArtist(item)}
+										</div>
 									{/if}
-									<span class="truncate text-fg transition-colors group-hover/row:text-accent-soft">
-										{targetTitle(item)}
-									</span>
 								</div>
-								{#if targetArtist(item)}
-									<div class="truncate text-sm text-fg-3">Canción · {targetArtist(item)}</div>
-								{/if}
-							</div>
-							<span class="shrink-0 text-sm text-muted tabular-nums">{fmtTime(seconds)}</span>
-						</button>
-					</li>
-				{/each}
-			</ul>
+								<span class="shrink-0 text-[11.5px] text-muted tabular-nums"
+									>{fmtTime(seconds)}</span
+								>
+							</button>
+						</li>
+					{/each}
+				</ul>

-			{#if hasMore}
-				<InfiniteScroll onLoadMore={loadMore} {hasMore} loading={loadingMore} />
+				{#if hasMore}
+					<InfiniteScroll onLoadMore={loadMore} {hasMore} loading={loadingMore} />
+				{/if}
+			{:else if !ytUnavailable && !nothingFound}
+				<EmptyState icon={Music} description="No hay canciones que coincidan con «{data.query}»." />
 			{/if}
-		{:else if data.query && !ytUnavailable}
-			<EmptyState icon={Music} description="No hay canciones que coincidan con «{data.query}»." />
-		{/if}
-	</div>
+		</div>
+	{/if}

 	{#if ytUnavailable}
 		<EmptyState
@@ -51,20 +51,28 @@
 			index
 			action
 			meta={[
+				{ label: 'Álbum', width: '160px' },
 				{ label: 'Subida', width: '100px' },
 				{ label: 'Escuchas', width: '100px' }
 			]}
-			class="mt-6 sm:mt-8"
+			class="mt-7 sm:mt-8"
 		>
 			{#each items as track, i (track.id)}
-				<TrackRow>
+				{@const active = player.current.id === track.id}
+				<TrackRow {active}>
 					<TrackIndexCell
 						index={i}
-						active={player.current.id === track.id}
+						{active}
 						playing={player.playing}
 						onToggle={() => togglePlay(i)}
 					/>
-					<TrackTitleCell trackId={track.id} title={track.title} onClick={() => togglePlay(i)} />
+					<TrackTitleCell
+						trackId={track.id}
+						title={track.title}
+						{active}
+						onClick={() => togglePlay(i)}
+					/>
+					<TrackMeta class="hidden sm:block">—</TrackMeta>
 					<TrackMeta class="hidden sm:block">{fmtDate(track.createdAt)}</TrackMeta>
 					<TrackMeta class="hidden sm:block">{Number(track.listensCount)}</TrackMeta>
 					<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
@@ -0,0 +1,7 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = ({ locals }) => {
+	if (!locals.user) redirect(302, '/explore');
+	return {};
+};
@@ -0,0 +1,136 @@
+<script lang="ts">
+	import Heart from '@lucide/svelte/icons/heart';
+	import Play from '@lucide/svelte/icons/play';
+	import Pause from '@lucide/svelte/icons/pause';
+	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 Page from '$lib/components/ui/Page.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import TrackTable from '$lib/components/ui/TrackTable.svelte';
+	import TrackRow from '$lib/components/ui/TrackRow.svelte';
+	import TrackMeta from '$lib/components/ui/TrackMeta.svelte';
+	import TrackIndexCell from '$lib/components/ui/TrackIndexCell.svelte';
+	import TrackTitleCell from '$lib/components/ui/TrackTitleCell.svelte';
+
+	const tracks = $derived(liked.list);
+	const queueItems = $derived<QueueItem[]>(
+		tracks.map((t) => ({
+			id: t.id,
+			title: t.title,
+			artist: t.artist,
+			source: t.source,
+			coverUrl: t.coverUrl,
+			explicit: t.explicit
+		}))
+	);
+	const isCurrentQueue = $derived(tracks.some((t) => t.id === player.current.id));
+
+	function playFrom(index: number) {
+		player.playOrToggle(queueItems, index);
+	}
+
+	function playAll() {
+		if (queueItems.length === 0) return;
+		if (isCurrentQueue) player.toggle();
+		else player.playQueue(queueItems, 0);
+	}
+</script>
+
+<svelte:head>
+	<title>Me gusta</title>
+	<meta name="description" content="Las canciones que te gustan en Musify." />
+</svelte:head>
+
+<Page>
+	<div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:gap-6">
+		<div
+			class="grid h-36 w-36 shrink-0 place-items-center rounded-[18px] shadow-[0_24px_56px_rgba(0,0,0,.55)] sm:h-41 sm:w-41"
+			style="background:linear-gradient(150deg, oklch(0.4 0.09 330), oklch(0.18 0.04 10))"
+		>
+			<Heart class="h-10 w-10 text-white/90" fill="currentColor" strokeWidth={0} />
+		</div>
+		<div class="min-w-0 flex-1">
+			<p class="text-[10.5px] font-semibold tracking-[0.16em] text-fg-2 uppercase">Colección</p>
+			<h1
+				class="mt-3 font-display text-[28px] font-semibold tracking-[-0.035em] text-fg sm:text-[33px]"
+			>
+				Me gusta
+			</h1>
+			<p class="mt-3.25 text-[12.5px] text-fg-2">
+				{tracks.length}
+				{tracks.length === 1 ? 'canción' : 'canciones'}
+			</p>
+		</div>
+	</div>
+
+	<div class="mt-6 flex flex-wrap items-center gap-2.5 sm:mt-7">
+		<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}
+		</Button>
+	</div>
+
+	{#if tracks.length > 0}
+		<TrackTable
+			index
+			action
+			meta={[
+				{ label: 'Álbum', width: '160px' },
+				{ label: 'Añadida', width: '140px' }
+			]}
+			class="mt-6 sm:mt-8"
+		>
+			{#each tracks as track, i (track.id)}
+				{@const active = player.current.id === track.id}
+				<TrackRow {active}>
+					<TrackIndexCell
+						index={i}
+						{active}
+						playing={player.playing}
+						onToggle={() => playFrom(i)}
+					/>
+					<TrackTitleCell
+						trackId={track.id}
+						title={track.title}
+						artist={track.artist}
+						ownerUserId={track.ownerUserId}
+						coverSrc={track.coverUrl}
+						explicit={track.explicit}
+						{active}
+						onClick={() => playFrom(i)}
+					/>
+					<TrackMeta class="hidden sm:block">—</TrackMeta>
+					<TrackMeta class="hidden sm:block">{fmtDate(track.likedAt)}</TrackMeta>
+					<TrackMeta>—</TrackMeta>
+					<IconButton
+						label="Quitar de Me gusta"
+						size="sm"
+						revealOnHover
+						onclick={() => liked.toggle(track)}
+					>
+						<X class="h-3.5 w-3.5" />
+					</IconButton>
+				</TrackRow>
+			{/each}
+		</TrackTable>
+	{:else}
+		<EmptyState
+			icon={Heart}
+			title="Todavía no tienes canciones con me gusta"
+			description="Toca el corazón en cualquier canción del reproductor para guardarla aquí."
+		>
+			{#snippet actions()}
+				<Button href="/explore" variant="secondary">Explorar música</Button>
+			{/snippet}
+		</EmptyState>
+	{/if}
+</Page>
@@ -67,12 +67,15 @@
 <Page>
 	<BackLink href="/" label="Volver al inicio" />

-	<div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
-		<MixArt {items} class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44" />
+	<div class="mt-3 flex flex-col gap-5 sm:mt-4 sm:flex-row sm:items-end sm:gap-6">
+		<MixArt
+			{items}
+			class="h-36 w-36 shrink-0 rounded-[18px] shadow-[0_24px_56px_rgba(0,0,0,.55)] sm:h-41 sm:w-41"
+		/>
 		<div class="min-w-0 flex-1">
-			<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Mezcla</p>
+			<p class="text-[10.5px] font-semibold tracking-[0.16em] text-fg-2 uppercase">Mezcla</p>
 			<h1
-				class="mt-1.5 font-display text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+				class="mt-1.5 font-display text-[28px] font-semibold tracking-[-0.035em] break-words text-fg sm:text-[33px]"
 			>
 				{mix.title}
 			</h1>
@@ -89,10 +92,10 @@
 	<div class="mt-6 flex flex-wrap items-center gap-2.5 sm:mt-7">
 		<Button size="sm" onclick={playAll} disabled={queue.length === 0}>
 			{#if isCurrentQueue && player.playing}
-				<Pause class="h-4 w-4" fill="currentColor" strokeWidth={1.5} />
+				<Pause class="h-4 w-4" strokeWidth={1.5} />
 				Pausar
 			{:else}
-				<Play class="h-4 w-4" fill="currentColor" strokeWidth={1.5} />
+				<Play class="h-4 w-4" strokeWidth={1.5} />
 				Reproducir
 			{/if}
 		</Button>
@@ -108,19 +111,16 @@

 	<TrackTable index class="mt-6 sm:mt-8">
 		{#each items as item, i (mixItemKey(item))}
-			<TrackRow oncontextmenu={(e) => (contextMenu = contextMenuStateFor(e, targets[i]))}>
-				<TrackIndexCell
-					index={i}
-					active={isTargetCurrent(targets[i])}
-					playing={player.playing}
-					onToggle={() => playFrom(i)}
-				/>
+			{@const active = isTargetCurrent(targets[i])}
+			<TrackRow {active} oncontextmenu={(e) => (contextMenu = contextMenuStateFor(e, targets[i]))}>
+				<TrackIndexCell index={i} {active} playing={player.playing} onToggle={() => playFrom(i)} />
 				<TrackTitleCell
 					trackId={targetId(targets[i])}
 					title={targetTitle(targets[i])}
 					artist={targetArtist(targets[i])}
 					coverSrc={targetCoverSrc(targets[i])}
 					explicit={item.isExplicit}
+					{active}
 					onClick={() => playFrom(i)}
 				/>
 				<TrackMeta>{fmtTime(Number(item.durationSeconds))}</TrackMeta>
@@ -19,7 +19,30 @@ export const load: PageServerLoad = async ({ locals, url, fetch }) => {

 	const data = unwrapOrError(result, 'No se pudieron cargar tus playlists.');

-	return { playlists: data };
+	const tracksByPlaylist = await Promise.all(
+		data.items.map((playlist) =>
+			api
+				.GET('/playlists/{playlistId}/tracks', {
+					params: { path: { playlistId: playlist.id }, query: { pageNumber: 1, pageSize: 500 } }
+				})
+				.then((res) => res.data?.items ?? [])
+		)
+	);
+
+	const items = data.items.map((playlist, i) => {
+		const tracks = tracksByPlaylist[i];
+		const trackCount = tracks.length;
+		const durationSeconds = tracks.reduce((sum, t) => sum + Number(t.duration || 0), 0);
+		return { ...playlist, trackCount, durationSeconds };
+	});
+
+	const totals = {
+		playlistCount: items.length,
+		trackCount: items.reduce((sum, p) => sum + p.trackCount, 0),
+		durationSeconds: items.reduce((sum, p) => sum + p.durationSeconds, 0)
+	};
+
+	return { playlists: { ...data, items }, totals };
 };

 export const actions: Actions = {
@@ -30,6 +53,7 @@ export const actions: Actions = {
 		const form = await request.formData();
 		const name = String(form.get('name') ?? '').trim();
 		const description = String(form.get('description') ?? '').trim();
+		const visibility = form.get('visibility') === 'public' ? 'Public' : 'Private';
 		const cover = form.get('cover');

 		if (name === '' || name.length > MAX_NAME) {
@@ -55,7 +79,7 @@ export const actions: Actions = {
 		}

 		const { data, error: err } = await api.POST('/playlists', {
-			body: { name, description, pictureIntentId }
+			body: { name, description, pictureIntentId, visibility }
 		});

 		if (err || !data)
@@ -1,43 +1,21 @@
 <script lang="ts">
-	import Plus from '@lucide/svelte/icons/plus';
 	import ListMusic from '@lucide/svelte/icons/list-music';
 	import Page from '$lib/components/ui/Page.svelte';
 	import PageHeader from '$lib/components/ui/PageHeader.svelte';
 	import MediaGrid from '$lib/components/ui/MediaGrid.svelte';
 	import PlaylistCard from '$lib/components/ui/PlaylistCard.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import PlaylistForm from '$lib/components/ui/PlaylistForm.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
+	import { createPlaylistModal } from '$lib/playlists.svelte';
+	import { fmtDurationLong } from '$lib/format';

-	const playlistNames = [
-		'Mi Playlist',
-		'Tus favoritos',
-		'Lo mejor de hoy',
-		'Para relajarse',
-		'Buena vibra',
-		'Modo estudio',
-		'Road Trip',
-		'Domingos',
-		'Late Night',
-		'Descubriendo música',
-		'Todo un poco',
-		'En bucle',
-		'Mi colección',
-		'Canciones para repetir',
-		'Hits del momento'
-	];
-	const namePlaceholder = playlistNames[Math.floor(Math.random() * playlistNames.length)];
-
-	let { data, form } = $props();
+	let { data } = $props();

 	const items = $derived(data.playlists.items);
-
-	let creating = $state(false);
-
-	function openCreate() {
-		creating = true;
-	}
+	const totals = $derived(data.totals);
+	const summary = $derived(
+		`${totals.playlistCount} ${totals.playlistCount === 1 ? 'playlist' : 'playlists'} · ${totals.trackCount} ${totals.trackCount === 1 ? 'canción' : 'canciones'} · ${fmtDurationLong(totals.durationSeconds)}`
+	);
 </script>

 <svelte:head>
@@ -46,24 +24,24 @@
 </svelte:head>

 <Page>
-	<PageHeader title="Mis listas" subtitle="Crea y organiza tus colecciones.">
+	<PageHeader
+		title="Mis listas"
+		subtitle={items.length > 0 ? summary : 'Crea y organiza tus colecciones.'}
+	>
 		{#snippet actions()}
 			{#if items.length > 0}
-				<Button onclick={openCreate}>
-					<Plus class="h-4 w-4" strokeWidth={2.5} />
-					Crear lista
-				</Button>
+				<Button onclick={() => createPlaylistModal.show()}>Crear lista</Button>
 			{/if}
 		{/snippet}
 	</PageHeader>

 	{#if items.length > 0}
-		<MediaGrid class="mt-9">
+		<MediaGrid min="210px" minMobile="180px" class="mt-7 sm:mt-8">
 			{#each items as playlist, i (playlist.id)}
 				<PlaylistCard
 					id={playlist.id}
 					name={playlist.name}
-					description={playlist.description}
+					trackCount={playlist.trackCount}
 					trackIds={playlist.coverTrackIds}
 					updatedAt={playlist.updatedAt}
 					index={i}
@@ -77,22 +55,8 @@
 			description="Crea la primera y añádele canciones de tu biblioteca."
 		>
 			{#snippet actions()}
-				<Button onclick={openCreate}>
-					<Plus class="h-4 w-4" strokeWidth={2} />
-					Crear lista
-				</Button>
+				<Button onclick={() => createPlaylistModal.show()}>Crear lista</Button>
 			{/snippet}
 		</EmptyState>
 	{/if}
 </Page>
-
-<Modal open={creating} onClose={() => (creating = false)} title="Nueva lista">
-	<PlaylistForm
-		action="?/create"
-		{namePlaceholder}
-		formMessage={form?.message}
-		submitLabel="Crear"
-		submittingLabel="Creando…"
-		onCancel={() => (creating = false)}
-	/>
-</Modal>
@@ -8,75 +8,28 @@ import {
 	unwrapOrFail
 } from '$lib/server/api';
 import { uploadPresignedImage } from '$lib/server/upload';
-import { fetchYoutubeFiller } from '$lib/server/youtube';
-import { shuffle } from '$lib/collections';
-import { addTrackAction, addYouTubeToPlaylistAction } from '$lib/server/playlistActions';
-import type { YouTubeSong } from '$lib/types';

 const MAX_NAME = 100;
-const SUGGESTIONS_LIMIT = 20;

 export const load: PageServerLoad = async ({ params, locals, url, fetch, parent }) => {
 	const { allowAnonymousListening } = await parent();
-	const user = optionalUser(locals, url, allowAnonymousListening);
+	optionalUser(locals, url, allowAnonymousListening);
 	const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });

-	const [playlistRes, tracksRes, libraryRes, playlistsRes] = await Promise.all([
+	const [playlistRes, tracksRes] = await Promise.all([
 		api.GET('/playlists/{id}', { params: { path: { id: params.id } } }),
 		api.GET('/playlists/{playlistId}/tracks', {
 			params: { path: { playlistId: params.id }, query: { pageNumber: 1, pageSize: 200 } }
-		}),
-		user
-			? api.GET('/tracks/users/{userId}', {
-					params: { path: { userId: user.sub }, query: { pageNumber: 1, pageSize: 50 } }
-				})
-			: Promise.resolve(null),
-		user
-			? api.GET('/playlists/users/{userId}', {
-					params: { path: { userId: user.sub }, query: { pageNumber: 1, pageSize: 50 } }
-				})
-			: Promise.resolve(null)
+		})
 	]);

 	const playlist = unwrapOrError(playlistRes, 'Playlist no encontrada.', 404);
-
 	const tracks = tracksRes.data?.items ?? [];
-	const inPlaylist = new Set(tracks.map((t) => t.id));
-	const library = (libraryRes?.data?.items ?? []).filter((t) => !inPlaylist.has(t.id));

-	const alreadyLinked = new Set(
-		tracks.flatMap((t) => (t.source === 'YouTube' && t.externalId ? [t.externalId] : []))
-	);
-	const seeds = [...new Set(tracks.map((t) => t.artist).filter((a): a is string => !!a))];
-	const seed = seeds.length > 0 ? shuffle(seeds)[0] : undefined;
-
-	const youtube = fetchYoutubeFiller(
-		api,
-		locals.accessToken,
-		SUGGESTIONS_LIMIT + alreadyLinked.size,
-		seed
-	)
-		.then((filler) => ({
-			query: filler.query,
-			items: (filler.items as YouTubeSong[])
-				.filter((song) => !alreadyLinked.has(song.videoId))
-				.slice(0, SUGGESTIONS_LIMIT)
-		}))
-		.catch(() => ({ query: '', items: [] as YouTubeSong[] }));
-
-	return {
-		playlist,
-		tracks,
-		library,
-		youtube,
-		playlists: playlistsRes?.data?.items ?? []
-	};
+	return { playlist, tracks };
 };

 export const actions: Actions = {
-	addTrack: addTrackAction,
-	addYouTubeToPlaylist: addYouTubeToPlaylistAction,
-
 	removeTrack: async ({ request, params, locals, fetch }) => {
 		const accessToken = requireAccessTokenAction(locals);
 		if (typeof accessToken !== 'string') return accessToken;
@@ -98,6 +51,7 @@ export const actions: Actions = {
 		const form = await request.formData();
 		const name = String(form.get('name') ?? '').trim();
 		const description = String(form.get('description') ?? '').trim();
+		const newVisibility = form.get('visibility') === 'public' ? 'Public' : 'Private';
 		const cover = form.get('cover');
 		if (name === '' || name.length > MAX_NAME) {
 			return fail(400, { message: 'El nombre es obligatorio (máx. 100 caracteres).' });
@@ -119,7 +73,7 @@ export const actions: Actions = {

 		const result = await api.PUT('/playlists/{playlistId}', {
 			params: { path: { playlistId: params.id } },
-			body: { newName: name, newDescription: description, newPictureIntentId }
+			body: { newName: name, newDescription: description, newPictureIntentId, newVisibility }
 		});
 		const failure = unwrapOrFail(result, 'No se pudo actualizar la playlist.');
 		if (failure) return failure;
@@ -1,30 +1,21 @@
 <script lang="ts">
+	import ListMusic from '@lucide/svelte/icons/list-music';
 	import { player, queueIdForTrack, toQueueItems } from '$lib/player/player.svelte';
 	import Page from '$lib/components/ui/Page.svelte';
 	import Modal from '$lib/components/ui/Modal.svelte';
 	import PlaylistForm from '$lib/components/ui/PlaylistForm.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
+	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import PlaylistHeader from './components/PlaylistHeader.svelte';
 	import PlaylistTrackTable from './components/PlaylistTrackTable.svelte';
-	import SuggestionsTable from './components/SuggestionsTable.svelte';
-	import type { YouTubeSong } from '$lib/types';

 	let { data, form } = $props();

 	const playlist = $derived(data.playlist);
 	const tracks = $derived(data.tracks);
-	const library = $derived(data.library);

 	let editing = $state(false);
 	let confirmingDelete = $state(false);
-	let youtubeSuggestions = $state<YouTubeSong[]>([]);
-
-	$effect(() => {
-		youtubeSuggestions = [];
-		data.youtube.then((result) => {
-			youtubeSuggestions = result.items;
-		});
-	});

 	const isCurrentQueue = $derived(tracks.some((t) => queueIdForTrack(t) === player.current.id));

@@ -47,6 +38,7 @@
 		description={playlist.description}
 		trackIds={tracks.map((t) => t.id)}
 		updatedAt={playlist.updatedAt}
+		visibility={playlist.visibility}
 		playing={isCurrentQueue && player.playing}
 		onPlayAll={playAll}
 		onEdit={() => (editing = true)}
@@ -55,10 +47,17 @@

 	{#if tracks.length > 0}
 		<PlaylistTrackTable {tracks} />
-	{/if}
-
-	{#if library.length > 0 || youtubeSuggestions.length > 0}
-		<SuggestionsTable {library} youtube={youtubeSuggestions} playlists={data.playlists} />
+	{:else}
+		<EmptyState
+			icon={ListMusic}
+			title="Esta playlist todavía está vacía"
+			description="Añade canciones desde tu biblioteca o explora música nueva para empezar."
+			class="mt-6 sm:mt-8"
+		>
+			{#snippet actions()}
+				<Button href="/explore" variant="secondary">Explorar música</Button>
+			{/snippet}
+		</EmptyState>
 	{/if}
 </Page>

@@ -67,6 +66,7 @@
 		action="?/rename"
 		initialName={playlist.name}
 		initialDescription={playlist.description ?? ''}
+		initialVisibility={playlist.visibility === 'Public' ? 'public' : 'private'}
 		coverFallbackUrl="/api/playlists/{playlist.id}/cover?size=medium&v={encodeURIComponent(
 			playlist.updatedAt
 		)}"
@@ -79,10 +79,10 @@
 </Modal>

 <Modal open={confirmingDelete} onClose={() => (confirmingDelete = false)} maxWidth="max-w-sm">
-	<h2 class="text-lg font-semibold tracking-tight text-fg">
+	<h2 class="font-display text-xl font-semibold tracking-[-0.02em] text-fg">
 		¿Eliminar «{playlist.name}»?
 	</h2>
-	<p class="mt-2 text-base text-fg-3">
+	<p class="mt-2.5 text-[13px] leading-[1.65] text-fg-2">
 		Esta acción no se puede deshacer, la playlist se eliminará de tu biblioteca y de todos los
 		dispositivos donde la tengas guardada.
 	</p>
@@ -4,7 +4,6 @@
 	import SquarePencil from '@lucide/svelte/icons/square-pen';
 	import Trash from '@lucide/svelte/icons/trash';
 	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
-	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import Button from '$lib/components/ui/Button.svelte';

 	interface Props {
@@ -13,39 +12,50 @@
 		description?: string | null;
 		trackIds: (string | number)[];
 		updatedAt: string;
+		visibility: 'Public' | 'Private';
 		playing: boolean;
 		onPlayAll: () => void;
 		onEdit: () => void;
 		onDelete: () => void;
 	}

-	let { id, name, description, trackIds, updatedAt, playing, onPlayAll, onEdit, onDelete }: Props =
-		$props();
+	let {
+		id,
+		name,
+		description,
+		trackIds,
+		updatedAt,
+		visibility,
+		playing,
+		onPlayAll,
+		onEdit,
+		onDelete
+	}: Props = $props();
 </script>

-<BackLink href="/playlists" label="Volver a tus listas" />
-
-<div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
+<div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:gap-6">
 	<PlaylistArt
 		playlistId={id}
 		{trackIds}
 		size="large"
 		version={updatedAt}
-		class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
+		class="h-36 w-36 shrink-0 rounded-[18px] shadow-[0_24px_56px_rgba(0,0,0,.55)] sm:h-41 sm:w-41"
 	/>
 	<div class="min-w-0 flex-1">
-		<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Lista</p>
+		<p class="text-[10.5px] font-semibold tracking-[0.16em] text-fg-2 uppercase">Lista</p>
 		<h1
-			class="mt-1.5 font-display text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+			class="mt-3 font-display text-[28px] font-semibold tracking-[-0.035em] break-words text-fg sm:text-[33px]"
 		>
 			{name}
 		</h1>
 		{#if description}
 			<p class="mt-3 max-w-2xl text-sm text-fg-2 sm:text-base">{description}</p>
 		{/if}
-		<p class="mt-3 text-sm text-muted">
+		<p class="mt-3.25 text-[12.5px] text-fg-2">
 			{trackIds.length}
-			{trackIds.length === 1 ? 'canción' : 'canciones'}
+			{trackIds.length === 1 ? 'canción' : 'canciones'} · {visibility === 'Public'
+				? 'Pública'
+				: 'Privada'}
 		</p>
 	</div>
 </div>
@@ -53,19 +63,15 @@
 <div class="mt-6 flex flex-wrap items-center gap-2.5 sm:mt-7">
 	<Button size="sm" onclick={onPlayAll} disabled={trackIds.length === 0}>
 		{#if playing}
-			<Pause class="h-4 w-4" fill="currentColor" strokeWidth={1.5} />
 			Pausar
 		{:else}
-			<Play class="h-4 w-4" fill="currentColor" strokeWidth={1.5} />
 			Reproducir
 		{/if}
 	</Button>
 	<Button size="sm" variant="secondary" onclick={onEdit}>
-		<SquarePencil class="h-4 w-4" strokeWidth={1.5} />
 		Editar
 	</Button>
 	<Button size="sm" variant="secondary" onclick={onDelete}>
-		<Trash class="h-4 w-4" strokeWidth={1.5} />
 		Eliminar
 	</Button>
 </div>
@@ -31,23 +31,29 @@
 	}
 </script>

-<TrackTable index action meta={[{ label: 'Añadida', width: '140px' }]} class="mt-6 sm:mt-8">
+<TrackTable
+	index
+	action
+	meta={[
+		{ label: 'Álbum', width: '160px' },
+		{ label: 'Añadida', width: '140px' }
+	]}
+	class="mt-6 sm:mt-8"
+>
 	{#each tracks as track, i (track.id)}
-		<TrackRow>
-			<TrackIndexCell
-				index={i}
-				active={player.current.id === queueIdForTrack(track)}
-				playing={player.playing}
-				onToggle={() => playFrom(i)}
-			/>
+		{@const active = player.current.id === queueIdForTrack(track)}
+		<TrackRow {active}>
+			<TrackIndexCell index={i} playing={player.playing} onToggle={() => playFrom(i)} {active} />
 			<TrackTitleCell
 				trackId={track.id}
 				title={track.title}
 				artist={track.artist}
+				ownerUserId={track.ownerUserId}
 				coverSrc={isPendingYouTubeTrack(track) && track.externalId
 					? youTubeThumbnailUrl(track.externalId)
 					: undefined}
 				explicit={track.isExplicit}
+				{active}
 				onClick={() => playFrom(i)}
 			>
 				{#snippet badge()}
@@ -58,6 +64,7 @@
 					{/if}
 				{/snippet}
 			</TrackTitleCell>
+			<TrackMeta class="hidden sm:block">—</TrackMeta>
 			<TrackMeta class="hidden sm:block">{fmtDate(track.createdAt)}</TrackMeta>
 			<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
 			<form
@@ -1,151 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import Plus from '@lucide/svelte/icons/plus';
-	import {
-		player,
-		queueIdForTrack,
-		type ApiTrackLike,
-		type QueueItem
-	} from '$lib/player/player.svelte';
-	import { fmtTime } from '$lib/format';
-	import type { YouTubeSong } from '$lib/types';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
-	import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
-	import TrackTable from '$lib/components/ui/TrackTable.svelte';
-	import TrackRow from '$lib/components/ui/TrackRow.svelte';
-	import TrackMeta from '$lib/components/ui/TrackMeta.svelte';
-	import TrackTitleCell from '$lib/components/ui/TrackTitleCell.svelte';
-	import TrackContextMenu, {
-		contextMenuStateFor,
-		type ContextMenuState
-	} from '$lib/components/TrackContextMenu.svelte';
-
-	type LibraryTrack = ApiTrackLike & { duration: number | string };
-	type Suggestion = { kind: 'local'; track: LibraryTrack } | { kind: 'youtube'; song: YouTubeSong };
-
-	interface Props {
-		library: LibraryTrack[];
-		youtube: YouTubeSong[];
-		playlists: { id: string; name: string }[];
-	}
-
-	let { library, youtube, playlists }: Props = $props();
-
-	let contextMenu = $state<ContextMenuState | null>(null);
-
-	function openContextMenu(event: MouseEvent, item: Suggestion) {
-		contextMenu = contextMenuStateFor(event, item);
-	}
-
-	function closeContextMenu() {
-		contextMenu = null;
-	}
-
-	function addToQueue() {
-		if (!contextMenu) return;
-		player.addToQueue(queueItemFor(contextMenu as Suggestion));
-		closeContextMenu();
-	}
-
-	const suggestions = $derived<Suggestion[]>([
-		...library.map((track) => ({ kind: 'local' as const, track })),
-		...youtube.map((song) => ({ kind: 'youtube' as const, song }))
-	]);
-
-	function idFor(item: Suggestion) {
-		return item.kind === 'youtube' ? item.song.videoId : queueIdForTrack(item.track);
-	}
-
-	function queueItemFor(item: Suggestion): QueueItem {
-		return item.kind === 'youtube'
-			? {
-					id: item.song.videoId,
-					title: item.song.title,
-					artist: item.song.artist,
-					source: 'youtube',
-					coverUrl: item.song.thumbnailUrl,
-					explicit: item.song.isExplicit
-				}
-			: {
-					id: queueIdForTrack(item.track),
-					title: item.track.title,
-					artist: item.track.artist ?? undefined,
-					source: 'local',
-					coverUrl: `/api/tracks/${item.track.id}/cover?size=small`
-				};
-	}
-
-	function playFrom(index: number) {
-		player.playOrToggle(suggestions.map(queueItemFor), index);
-	}
-</script>
-
-<div class="mt-10 sm:mt-12">
-	<SectionHeading title="Sugerencias" />
-	<TrackTable action>
-		{#each suggestions as item, i (idFor(item))}
-			<TrackRow oncontextmenu={(e) => openContextMenu(e, item)}>
-				<TrackTitleCell
-					trackId={item.kind === 'youtube' ? item.song.videoId : item.track.id}
-					title={item.kind === 'youtube' ? item.song.title : item.track.title}
-					artist={item.kind === 'youtube' ? item.song.artist : item.track.artist}
-					coverSrc={item.kind === 'youtube' ? item.song.thumbnailUrl : undefined}
-					explicit={item.kind === 'youtube' && item.song.isExplicit}
-					onClick={() => playFrom(i)}
-				>
-					{#snippet overlay()}
-						{#if player.current.id === idFor(item)}
-							<NowPlaying paused={!player.playing} />
-						{/if}
-					{/snippet}
-				</TrackTitleCell>
-				<TrackMeta>
-					{fmtTime(
-						item.kind === 'youtube' ? item.song.durationSeconds : Number(item.track.duration)
-					)}
-				</TrackMeta>
-				{#if item.kind === 'youtube'}
-					<form
-						method="POST"
-						action="?/addYouTubeToPlaylist"
-						use:enhance={() =>
-							async ({ update }) =>
-								update()}
-					>
-						<input type="hidden" name="videoId" value={item.song.videoId} />
-						<input type="hidden" name="title" value={item.song.title} />
-						<input type="hidden" name="artist" value={item.song.artist} />
-						<input type="hidden" name="durationSeconds" value={item.song.durationSeconds} />
-						<input type="hidden" name="thumbnailUrl" value={item.song.thumbnailUrl} />
-						<IconButton type="submit" label="Añadir a la playlist" size="sm">
-							<Plus class="h-4 w-4" />
-						</IconButton>
-					</form>
-				{:else}
-					<form
-						method="POST"
-						action="?/addTrack"
-						use:enhance={() =>
-							async ({ update }) =>
-								update()}
-					>
-						<input type="hidden" name="trackId" value={item.track.id} />
-						<IconButton type="submit" label="Añadir a la playlist" size="sm">
-							<Plus class="h-4 w-4" />
-						</IconButton>
-					</form>
-				{/if}
-			</TrackRow>
-		{/each}
-	</TrackTable>
-</div>
-
-{#if contextMenu}
-	<TrackContextMenu
-		menu={contextMenu}
-		{playlists}
-		onClose={closeContextMenu}
-		onAddToQueue={addToQueue}
-	/>
-{/if}
@@ -0,0 +1,75 @@
+import type { PageServerLoad, Actions } from './$types';
+import {
+	createApiClient,
+	optionalUser,
+	requireAccessTokenAction,
+	unwrapOrError
+} from '$lib/server/api';
+
+const PROFILE_PLAYLISTS_PAGE_SIZE = 50;
+
+export const load: PageServerLoad = async ({ params, locals, url, fetch, parent }) => {
+	const { allowAnonymousListening } = await parent();
+	const viewer = optionalUser(locals, url, allowAnonymousListening);
+	const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });
+
+	const [profileRes, playlistsRes] = await Promise.all([
+		api.GET('/users/{id}/profile', { params: { path: { id: params.id } } }),
+		api.GET('/playlists/users/{userId}', {
+			params: {
+				path: { userId: params.id },
+				query: { pageNumber: 1, pageSize: PROFILE_PLAYLISTS_PAGE_SIZE, onlyPublic: true }
+			}
+		})
+	]);
+
+	const profile = unwrapOrError(profileRes, 'Usuario no encontrado.', 404);
+	const playlistItems = playlistsRes.data?.items ?? [];
+
+	const tracksByPlaylist = await Promise.all(
+		playlistItems.map((playlist) =>
+			api
+				.GET('/playlists/{playlistId}/tracks', {
+					params: { path: { playlistId: playlist.id }, query: { pageNumber: 1, pageSize: 1 } }
+				})
+				.then((res) => Number(res.data?.totalItemCount ?? 0))
+		)
+	);
+
+	const playlists = playlistItems.map((playlist, i) => ({
+		...playlist,
+		trackCount: tracksByPlaylist[i]
+	}));
+
+	const isOwnProfile = viewer !== null && viewer.sub === params.id;
+
+	const isFollowing =
+		viewer && !isOwnProfile
+			? await api
+					.GET('/users/{id}/is-following', { params: { path: { id: params.id } } })
+					.then((res) => res.data ?? false)
+					.catch(() => false)
+			: false;
+
+	return { profile, playlists, isOwnProfile, isFollowing, isAnonymous: viewer === null };
+};
+
+export const actions: Actions = {
+	follow: async ({ params, locals, fetch }) => {
+		const accessToken = requireAccessTokenAction(locals);
+		if (typeof accessToken !== 'string') return accessToken;
+
+		const api = createApiClient({ fetch, accessToken });
+		await api.POST('/users/{id}/follow', { params: { path: { id: params.id } } });
+		return { following: true };
+	},
+
+	unfollow: async ({ params, locals, fetch }) => {
+		const accessToken = requireAccessTokenAction(locals);
+		if (typeof accessToken !== 'string') return accessToken;
+
+		const api = createApiClient({ fetch, accessToken });
+		await api.DELETE('/users/{id}/follow', { params: { path: { id: params.id } } });
+		return { following: false };
+	}
+};
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { enhance } from '$app/forms';
+	import ListMusic from '@lucide/svelte/icons/list-music';
+	import Page from '$lib/components/ui/Page.svelte';
+	import MediaGrid from '$lib/components/ui/MediaGrid.svelte';
+	import PlaylistCard from '$lib/components/ui/PlaylistCard.svelte';
+	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import ArtistAvatar from '$lib/components/ui/ArtistAvatar.svelte';
+
+	let { data, form } = $props();
+
+	const profile = $derived(data.profile);
+	const playlists = $derived(data.playlists);
+
+	let following = $state(untrack(() => data.isFollowing));
+	let submitting = $state(false);
+
+	$effect(() => {
+		if (form && 'following' in form && typeof form.following === 'boolean')
+			following = form.following;
+	});
+</script>
+
+<svelte:head>
+	<title>{profile.name}</title>
+	<meta name="description" content="Perfil de {profile.name} en Musify." />
+</svelte:head>
+
+<Page>
+	<div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:gap-6">
+		<ArtistAvatar name={profile.name} imageUrl={profile.profilePictureUrl} size={144} />
+		<div class="min-w-0 flex-1">
+			<p class="text-[10.5px] font-semibold tracking-[0.16em] text-fg-2 uppercase">Perfil</p>
+			<h1
+				class="mt-3 font-display text-[28px] font-semibold tracking-[-0.035em] break-words text-fg sm:text-[33px]"
+			>
+				{profile.name}
+			</h1>
+			<p class="mt-3.25 text-[12.5px] text-fg-2">
+				{profile.followersCount}
+				{profile.followersCount === 1 ? 'seguidor' : 'seguidores'} · {profile.followingCount} siguiendo
+			</p>
+		</div>
+	</div>
+
+	{#if !data.isOwnProfile && !data.isAnonymous}
+		<div class="mt-6 flex items-center gap-2.5 sm:mt-7">
+			<form
+				method="POST"
+				action={following ? '?/unfollow' : '?/follow'}
+				use:enhance={() => {
+					submitting = true;
+					return async ({ update }) => {
+						await update();
+						submitting = false;
+					};
+				}}
+			>
+				<Button
+					type="submit"
+					size="sm"
+					variant={following ? 'secondary' : 'primary'}
+					disabled={submitting}
+				>
+					{following ? 'Dejar de seguir' : 'Seguir'}
+				</Button>
+			</form>
+		</div>
+	{/if}
+
+	<div class="mt-9">
+		<h2 class="font-display text-lg font-semibold tracking-[-0.02em] text-fg">
+			Playlists públicas
+		</h2>
+
+		{#if playlists.length > 0}
+			<MediaGrid min="210px" minMobile="180px" class="mt-6">
+				{#each playlists as playlist, i (playlist.id)}
+					<PlaylistCard
+						id={playlist.id}
+						name={playlist.name}
+						trackCount={playlist.trackCount}
+						trackIds={playlist.coverTrackIds}
+						updatedAt={playlist.updatedAt}
+						index={i}
+					/>
+				{/each}
+			</MediaGrid>
+		{:else}
+			<EmptyState
+				icon={ListMusic}
+				title="Sin playlists públicas"
+				description="Este usuario todavía no ha compartido ninguna playlist pública."
+				class="mt-6"
+			/>
+		{/if}
+	</div>
+</Page>
@@ -30,9 +30,9 @@
 	let audioInput = $state<HTMLInputElement>();

 	const steps = [
-		{ key: 'upload', label: 'Subir', hint: 'Portada y audio al almacenamiento' },
-		{ key: 'process', label: 'Procesar', hint: 'Transcodificado para streaming' },
-		{ key: 'publish', label: 'Publicar', hint: 'Disponible en el catálogo' }
+		{ key: 'upload', label: 'Subir', hint: 'Portada y audio.' },
+		{ key: 'process', label: 'Procesar', hint: 'Transcodificado para streaming.' },
+		{ key: 'publish', label: 'Publicar', hint: 'Disponible en el catálogo.' }
 	];

 	const busy = $derived(status === 'uploading');
@@ -47,14 +47,8 @@
 		return ['idle', 'idle', 'idle'];
 	});

-	const dropClass = $derived(
-		dragging || audioName !== '' ? 'border-accent/60' : 'border-line hover:border-accent/60'
-	);
-
 	function stepClass(s: StepState) {
-		if (s === 'active') return 'border-accent/40 bg-accent/5';
-		if (s === 'done') return 'border-accent/40';
-		return '';
+		return s === 'idle' ? '' : 'bg-accent-tint';
 	}

 	function formatSize(bytes: number) {
@@ -112,37 +106,39 @@
 		subtitle="Añade una canción con su portada y título. Nosotros la procesamos para streaming."
 	/>

-	<ol class="mt-8 grid gap-3 sm:mt-10 sm:grid-cols-3 sm:gap-4">
+	<ol class="mt-7 grid gap-3 sm:mt-8 sm:grid-cols-3 sm:gap-4">
 		{#each steps as step, i (step.key)}
 			<li>
-				<Surface class={stepClass(stepStates[i])}>
+				<Surface padding="sm" class={stepClass(stepStates[i])}>
 					<div class="flex items-center gap-3">
 						<span
-							class="grid h-8 w-8 place-items-center rounded-full bg-accent-soft text-sm font-bold text-on-accent"
+							class="grid h-7 w-7 shrink-0 place-items-center rounded-full text-xs font-bold {stepStates[
+								i
+							] === 'idle'
+								? 'bg-white/[3.5%] text-fg-2'
+								: 'bg-accent-btn text-accent-soft'}"
 						>
 							{#if stepStates[i] === 'done'}
-								<Check class="h-4 w-4" strokeWidth={2.5} />
+								<Check class="h-3.5 w-3.5" strokeWidth={2.5} />
 							{:else}
 								{i + 1}
 							{/if}
 						</span>
-						<span class="text-fg">{step.label}</span>
+						<span class="text-sm font-medium text-fg">{step.label}</span>
 					</div>
-					<p class="mt-3 text-base text-muted">{step.hint}</p>
+					<p class="mt-2.5 text-xs text-muted">{step.hint}</p>
 				</Surface>
 			</li>
 		{/each}
 	</ol>

 	{#if status === 'done'}
-		<Surface padding="lg" class="mt-10 border-accent/30 bg-accent/10 text-center">
-			<span
-				class="mx-auto grid h-16 w-16 place-items-center rounded-full bg-accent-soft text-on-accent"
-			>
-				<Check class="h-8 w-8" strokeWidth={2.5} />
+		<Surface padding="lg" class="mt-10 bg-accent-tint text-center">
+			<span class="mx-auto grid h-14 w-14 place-items-center rounded-full bg-accent-soft text-ink">
+				<Check class="h-7 w-7" strokeWidth={2.5} />
 			</span>
-			<h2 class="mt-6 text-2xl font-semibold tracking-tight text-fg">¡Subida!</h2>
-			<p class="mt-3 text-fg-2">
+			<h2 class="mt-6 font-display text-2xl font-semibold tracking-[-0.02em] text-fg">¡Subida!</h2>
+			<p class="mt-3 text-sm text-fg-2">
 				«{publishedTitle}» se está procesando. Aparecerá lista para reproducir en tu biblioteca en
 				unos momentos.
 			</p>
@@ -184,7 +180,9 @@
 				}}
 				ondragleave={() => (dragging = false)}
 				ondrop={onDrop}
-				class="relative flex min-h-56 flex-col items-center justify-center rounded-panel border border-dashed bg-surface p-6 text-center transition sm:min-h-72 sm:p-10 {dropClass}"
+				class="relative flex min-h-48 flex-col items-center justify-center rounded-panel p-6 text-center transition sm:min-h-64 sm:p-10 {dragging
+					? 'bg-surface-2 ring-2 ring-accent/50'
+					: 'bg-surface'}"
 			>
 				<input
 					bind:this={audioInput}
@@ -192,33 +190,32 @@
 					name="audio"
 					accept="audio/*"
 					onchange={onAudioInput}
-					class="absolute inset-0 cursor-pointer opacity-0"
+					class="absolute inset-0 cursor-pointer opacity-0 focus:outline-none"
 					aria-label="Seleccionar archivo de audio"
 				/>
-				<span
-					class="grid h-16 w-16 place-items-center rounded-full bg-accent-soft text-on-accent sm:h-20 sm:w-20"
-				>
-					{#if audioName === ''}
-						<Headphones class="h-8 w-8 sm:h-9 sm:w-9" />
-					{:else}
-						<Music class="h-8 w-8 sm:h-9 sm:w-9" />
-					{/if}
-				</span>
 				{#if audioName === ''}
-					<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>
+					<Headphones class="h-9 w-9 text-muted sm:h-10 sm:w-10" strokeWidth={1.4} />
 				{:else}
-					<p class="mt-5 max-w-full truncate text-fg sm:text-lg">
+					<Music class="h-9 w-9 text-accent-soft sm:h-10 sm:w-10" strokeWidth={1.4} />
+				{/if}
+				{#if audioName === ''}
+					<p class="mt-4 text-sm font-medium text-fg">
+						Arrastra tu audio aquí o haz clic para elegir
+					</p>
+					<p class="mt-1.5 text-xs text-muted">MP3, FLAC, WAV…</p>
+				{:else}
+					<p class="mt-4 max-w-full truncate text-sm font-medium text-fg">
 						{audioName}
 					</p>
-					<p class="mt-2 text-sm text-muted">{formatSize(audioSize)} · Listo para subir</p>
+					<p class="mt-1.5 text-xs text-muted">{formatSize(audioSize)} · Listo para subir</p>
 				{/if}
 			</div>

 			<div class="grid items-start gap-6 sm:grid-cols-[auto_1fr] sm:gap-8">
 				<Field label="Portada">
 					<label
-						class="relative grid h-36 w-36 cursor-pointer place-items-center overflow-hidden rounded-control border border-line bg-surface transition hover:border-accent/50 sm:h-44 sm:w-44"
+						class="relative grid h-36 w-36 cursor-pointer place-items-center overflow-hidden rounded-control transition sm:h-44 sm:w-44"
+						style={coverPreview === '' ? 'background:var(--mf-cover-grad)' : undefined}
 					>
 						<input
 							type="file"
@@ -231,7 +228,7 @@
 						{#if coverPreview !== ''}
 							<img src={coverPreview} alt="Portada" class="h-full w-full object-cover" />
 						{:else}
-							<ImageIcon class="h-12 w-12 text-muted" />
+							<ImageIcon class="h-11 w-11 text-white/70" strokeWidth={1.3} />
 						{/if}
 					</label>
 				</Field>
@@ -263,12 +260,12 @@
 			</Checkbox>

 			{#if status === 'uploading'}
-				<Surface>
-					<div class="flex items-center justify-between text-base">
+				<Surface padding="sm">
+					<div class="flex items-center justify-between text-sm">
 						<span class="font-medium text-fg">Subiendo y creando la pista…</span>
-						<span class="text-muted">un momento</span>
+						<span class="text-xs text-muted">un momento</span>
 					</div>
-					<div class="mt-4 h-2.5 overflow-hidden rounded-full bg-surface-2">
+					<div class="mt-3 h-2 overflow-hidden rounded-full bg-surface-2">
 						<div class="h-full w-full animate-pulse rounded-full bg-accent-soft"></div>
 					</div>
 				</Surface>
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import Button from '$lib/components/ui/Button.svelte';
+</script>
+
+<div class="animate-enter mx-auto my-[14vh] max-w-105 text-center">
+	<h1 class="mb-2.5 font-display text-xl font-semibold tracking-[-0.02em] text-fg">
+		{page.status === 404 ? 'Página no encontrada' : 'No se pudo cargar tu música'}
+	</h1>
+	<p class="mb-6.5 text-[13px] leading-[1.65] text-fg-2">
+		{page.status === 404
+			? 'Comprueba el enlace o vuelve al inicio.'
+			: 'La conexión se interrumpió. Lo que tengas descargado seguirá disponible sin conexión.'}
+	</p>
+	<Button href="/" variant="secondary">Volver</Button>
+</div>
@@ -1,8 +1,44 @@
 import { redirect } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
 import { getAllowAnonymousListening } from '$lib/server/playbackConfig';
+import { createApiClient } from '$lib/server/api';
+import { authConfig } from '$lib/server/config';
+import { LIKED_TRACKS_PAGE_SIZE } from '$lib/config';

 const PUBLIC_PATHS = new Set(['/login']);
+const SIDEBAR_PLAYLISTS_LIMIT = 8;
+
+async function fetchSidebarPlaylists(
+	fetchFn: typeof fetch,
+	accessToken: string | null,
+	userId: string
+) {
+	try {
+		const api = createApiClient({ fetch: fetchFn, accessToken: accessToken ?? undefined });
+		const { data } = await api.GET('/playlists/users/{userId}', {
+			params: {
+				path: { userId },
+				query: { pageNumber: 1, pageSize: SIDEBAR_PLAYLISTS_LIMIT }
+			}
+		});
+		return data?.items ?? [];
+	} catch {
+		// The sidebar shell must render even when the API is unreachable.
+		return [];
+	}
+}
+
+async function fetchLikedTracks(fetchFn: typeof fetch, accessToken: string | null) {
+	try {
+		const api = createApiClient({ fetch: fetchFn, accessToken: accessToken ?? undefined });
+		const { data } = await api.GET('/likes', {
+			params: { query: { pageNumber: 1, pageSize: LIKED_TRACKS_PAGE_SIZE } }
+		});
+		return data?.items ?? [];
+	} catch {
+		return [];
+	}
+}

 export const load: LayoutServerLoad = async ({ locals, url, fetch }) => {
 	const allowAnonymousListening = await getAllowAnonymousListening(fetch);
@@ -10,5 +46,31 @@ export const load: LayoutServerLoad = async ({ locals, url, fetch }) => {
 	if (!locals.user && !allowAnonymousListening && !PUBLIC_PATHS.has(url.pathname)) {
 		redirect(302, `/login?returnTo=${encodeURIComponent(url.pathname + url.search)}`);
 	}
-	return { user: locals.user, allowAnonymousListening };
+
+	const accountUrl = authConfig.issuer
+		? `${authConfig.issuer.replace(/\/+$/, '')}/ui/console`
+		: null;
+
+	if (!locals.user) {
+		return {
+			user: locals.user,
+			allowAnonymousListening,
+			sidebarPlaylists: [],
+			likedTracks: [],
+			accountUrl
+		};
+	}
+
+	const [sidebarPlaylists, likedTracks] = await Promise.all([
+		fetchSidebarPlaylists(fetch, locals.accessToken, locals.user.sub),
+		fetchLikedTracks(fetch, locals.accessToken)
+	]);
+
+	return {
+		user: locals.user,
+		allowAnonymousListening,
+		sidebarPlaylists,
+		likedTracks,
+		accountUrl
+	};
 };
@@ -1,16 +1,23 @@
 <script lang="ts">
-	import '@fontsource-variable/manrope/index.css';
-	import '@fontsource-variable/bricolage-grotesque/opsz.css';
+	import '@fontsource-variable/sora/index.css';
+	import '@fontsource-variable/plus-jakarta-sans/index.css';
 	import '$lib/theme/theme.css';
 	import './layout.css';
 	import favicon from '$lib/assets/favicon.svg';
-	import PlayerBar from '$lib/components/player/PlayerBar.svelte';
+	import PlayerDock from '$lib/components/player/PlayerDock.svelte';
+	import Queue from '$lib/components/player/Queue.svelte';
 	import Sidebar from '$lib/components/Sidebar.svelte';
 	import TopBar from '$lib/components/TopBar.svelte';
 	import MobileHeader from '$lib/components/MobileHeader.svelte';
-	import MobileNav from '$lib/components/MobileNav.svelte';
+	import Modal from '$lib/components/ui/Modal.svelte';
+	import PlaylistForm from '$lib/components/ui/PlaylistForm.svelte';
 	import { player } from '$lib/player/player.svelte';
-	import { ACCENT_LIGHTNESS, ACCENT_CHROMA, ACCENT_HUE } from '$lib/theme/color';
+	import { queuePanel } from '$lib/player/queuePanel.svelte';
+	import { liked } from '$lib/player/liked.svelte';
+	import { createPlaylistModal } from '$lib/playlists.svelte';
+	import { ACCENT_HUE } from '$lib/theme/color';
+	import { buildThemeTokens, applyThemeTokens } from '$lib/theme/tokens';
+	import { themeMode } from '$lib/theme/mode.svelte';
 	import { trackNavigation } from '$lib/navigation.svelte';
 	import { page } from '$app/state';

@@ -18,9 +25,19 @@

 	trackNavigation();

+	$effect(() => {
+		if (data.likedTracks?.length) liked.hydrate(data.likedTracks);
+	});
+
 	const isAuthPage = $derived(page.url.pathname === '/login');
 	const hasTrack = $derived(player.currentId !== null);

+	let hadTrack = false;
+	$effect(() => {
+		if (hasTrack && !hadTrack) queuePanel.show();
+		hadTrack = hasTrack;
+	});
+
 	function isTypingTarget(target: EventTarget | null): boolean {
 		if (!(target instanceof HTMLElement)) return false;
 		if (target.isContentEditable) return true;
@@ -33,37 +50,30 @@
 		player.toggle();
 	}

-	function parseAccent(value: string): { c: number; h: number } | null {
-		const m = /oklch\(\s*[\d.]+%?\s+([\d.]+)\s+([\d.]+)/.exec(value);
-		return m ? { c: parseFloat(m[1]), h: parseFloat(m[2]) } : null;
+	function parseHue(value: string): number | null {
+		const m = /oklch\(\s*[\d.]+%?\s+[\d.]+\s+([\d.]+)/.exec(value);
+		return m ? parseFloat(m[1]) : null;
 	}

-	let displayed = { c: ACCENT_CHROMA, h: ACCENT_HUE };
+	let displayedHue = ACCENT_HUE;
 	let rafId = 0;

 	$effect(() => {
-		const target = parseAccent(player.accent);
-		if (!target) {
-			document.documentElement.style.setProperty('--mf-accent', player.accent);
-			return;
-		}
+		const targetHue = parseHue(player.accent) ?? ACCENT_HUE;
+		const mode = themeMode.current;
 		cancelAnimationFrame(rafId);
-		const from = { ...displayed };
-		let dh = target.h - from.h;
+		const fromHue = displayedHue;
+		let dh = targetHue - fromHue;
 		if (dh > 180) dh -= 360;
 		else if (dh < -180) dh += 360;
 		const start = performance.now();
-		const duration = 350;
+		const duration = 600;
 		const tick = (now: number) => {
 			const t = Math.min(1, (now - start) / duration);
-			const e = 1 - Math.pow(1 - t, 3);
-			const c = from.c + (target.c - from.c) * e;
-			const h = (((from.h + dh * e) % 360) + 360) % 360;
-			displayed = { c, h };
-			document.documentElement.style.setProperty(
-				'--mf-accent',
-				`oklch(${ACCENT_LIGHTNESS}% ${c.toFixed(3)} ${h.toFixed(1)})`
-			);
+			const eased = 1 - Math.pow(1 - t, 3);
+			const hue = (((fromHue + dh * eased) % 360) + 360) % 360;
+			displayedHue = hue;
+			applyThemeTokens(buildThemeTokens(hue, mode));
 			if (t < 1) rafId = requestAnimationFrame(tick);
 		};
 		rafId = requestAnimationFrame(tick);
@@ -80,25 +90,53 @@
 		{@render children()}
 	</div>
 {:else}
-	<div class="flex min-h-screen bg-bg text-fg antialiased">
-		<Sidebar user={data.user} />
-		<div class="flex min-w-0 flex-1 flex-col">
-			<MobileHeader user={data.user} />
-			<TopBar user={data.user} />
-			<main
-				class="flex-1 transition-[padding]"
-				style="padding-bottom:calc(var(--mf-nav-h) + var(--mf-safe-b) + {hasTrack
-					? 'var(--mf-player-h)'
-					: '0px'})"
-			>
-				{#key page.url.pathname}
-					<div class="animate-fade">{@render children()}</div>
-				{/key}
-			</main>
-			{#if hasTrack}
-				<PlayerBar />
-			{/if}
-			<MobileNav user={data.user} />
+	<div class="relative flex min-h-screen text-fg antialiased">
+		<div
+			class="pointer-events-none fixed inset-0 -z-10 bg-bg"
+			style="background-image:var(--mf-ambient)"
+		></div>
+		<div
+			class="pointer-events-none fixed inset-0 -z-10"
+			style="background:radial-gradient(130% 85% at 50% 118%, color-mix(in oklch, var(--mf-scrim) 80%, transparent), transparent 62%)"
+		></div>
+
+		<Sidebar user={data.user} playlists={data.sidebarPlaylists ?? []} />
+
+		<div class="flex min-w-0 flex-1">
+			<div class="flex min-w-0 flex-1 flex-col">
+				<MobileHeader user={data.user} accountUrl={data.accountUrl} />
+				<TopBar user={data.user} accountUrl={data.accountUrl} />
+				<main
+					class="flex-1 transition-[padding]"
+					style="padding-bottom:calc(var(--mf-nav-h) + var(--mf-safe-b) + {hasTrack
+						? 'var(--mf-player-h)'
+						: '0px'})"
+				>
+					{#key page.url.pathname}
+						<div class="animate-fade">{@render children()}</div>
+					{/key}
+				</main>
+			</div>
+
+			<Queue />
 		</div>
+
+		<PlayerDock user={data.user} />
+
+		<Modal
+			open={createPlaylistModal.open}
+			onClose={() => createPlaylistModal.close()}
+			title="Crear playlist"
+		>
+			<PlaylistForm
+				action="/playlists?/create"
+				formMessage={page.form?.message}
+				submitLabel="Crear"
+				submittingLabel="Creando…"
+				helperText="Podrás añadir canciones más tarde."
+				onCancel={() => createPlaylistModal.close()}
+				onSuccess={() => createPlaylistModal.close()}
+			/>
+		</Modal>
 	</div>
 {/if}
@@ -1,21 +1,14 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad, Actions } from './$types';
 import { createApiClient, requireUser } from '$lib/server/api';
-import { fetchYoutubeAlbumFiller, fetchYoutubeFiller } from '$lib/server/youtube';
+import { fetchYoutubeFiller } from '$lib/server/youtube';
+import { addTrackAction, addYouTubeToPlaylistAction } from '$lib/server/playlistActions';
 import {
-	addAlbumToPlaylistAction,
-	addTrackAction,
-	addYouTubeToPlaylistAction
-} from '$lib/server/playlistActions';
-import {
-	HOME_ALBUM_FILLER_LIMIT,
-	HOME_ALBUMS_LIMIT,
 	HOME_LATEST_PAGE_SIZE,
-	HOME_MIXES_BENTO,
+	HOME_MIXES_LIMIT,
 	HOME_POPULAR_FILLER_LIMIT,
 	HOME_SHELF_LIMIT,
-	HOME_TOP_MUSIC_FILLER_LIMIT,
-	YOUTUBE_FILLER_LIMIT
+	HOME_SPOTLIGHT_TRACKS_LIMIT
 } from '$lib/config';
 import { pickGreeting } from '$lib/server/greeting';

@@ -34,18 +27,18 @@ export const load: PageServerLoad = async ({ locals, url, fetch }) => {
 			query: { pageNumber: 1, pageSize: HOME_SHELF_LIMIT + 1 }
 		}
 	});
-	const albumsPromise = api.GET('/albums/recent', {
-		params: { query: { limit: HOME_ALBUMS_LIMIT } }
-	});
 	const mixesPromise = api.GET('/mixes');
 	const recentlyPlayedPromise = api.GET('/users/{id}/listening-history', {
 		params: { path: { id: user.sub } }
 	});
+	const listeningStatsPromise = api
+		.GET('/users/{id}/listening-stats', { params: { path: { id: user.sub } } })
+		.then((res) => res.data ?? { tracksThisWeek: 0, secondsThisWeek: 0, streakDays: 0 })
+		.catch(() => ({ tracksThisWeek: 0, secondsThisWeek: 0, streakDays: 0 }));

-	const [latest, playlists, albums, mixes, recentlyPlayed] = await Promise.all([
+	const [latest, playlists, mixes, recentlyPlayed] = await Promise.all([
 		latestPromise,
 		playlistsPromise,
-		albumsPromise,
 		mixesPromise,
 		recentlyPlayedPromise
 	]);
@@ -54,30 +47,32 @@ export const load: PageServerLoad = async ({ locals, url, fetch }) => {
 		item.track ? [item.track] : []
 	);

+	const spotlightPlaylist = playlistItems[0] ?? null;
+	const spotlightTracksPromise = spotlightPlaylist
+		? api
+				.GET('/playlists/{playlistId}/tracks', {
+					params: {
+						path: { playlistId: spotlightPlaylist.id },
+						query: { pageNumber: 1, pageSize: HOME_SPOTLIGHT_TRACKS_LIMIT }
+					}
+				})
+				.then((res) => ({
+					items: res.data?.items ?? [],
+					totalCount: Number(res.data?.totalItemCount ?? 0)
+				}))
+				.catch(() => ({ items: [], totalCount: 0 }))
+		: Promise.resolve({ items: [], totalCount: 0 });
+
 	return {
-		greeting: pickGreeting(new Date().getHours()),
+		greeting: pickGreeting(new Date()),
 		recentlyPlayed: recentlyPlayed.data ?? [],
-		albums: albums.data ?? [],
-		mixes: (mixes.data ?? []).slice(0, HOME_MIXES_BENTO),
+		mixes: (mixes.data ?? []).slice(0, HOME_MIXES_LIMIT),
 		playlists: playlistItems.slice(0, HOME_SHELF_LIMIT),
 		playlistsHasMore: playlistItems.length > HOME_SHELF_LIMIT,
 		newReleases: latestItems,
-		topMusicFiller: fetchYoutubeFiller(
-			api,
-			locals.accessToken,
-			HOME_TOP_MUSIC_FILLER_LIMIT,
-			undefined,
-			user.sub,
-			3
-		),
-		youtubeFiller: fetchYoutubeFiller(
-			api,
-			locals.accessToken,
-			YOUTUBE_FILLER_LIMIT,
-			undefined,
-			user.sub,
-			0
-		),
+		spotlightPlaylist,
+		spotlightTracks: spotlightTracksPromise,
+		listeningStats: listeningStatsPromise,
 		popularFiller: fetchYoutubeFiller(
 			api,
 			locals.accessToken,
@@ -85,20 +80,11 @@ export const load: PageServerLoad = async ({ locals, url, fetch }) => {
 			undefined,
 			user.sub,
 			1
-		),
-		albumFiller: fetchYoutubeAlbumFiller(
-			api,
-			locals.accessToken,
-			HOME_ALBUM_FILLER_LIMIT,
-			undefined,
-			user.sub,
-			2
 		)
 	};
 };

 export const actions: Actions = {
 	addTrack: addTrackAction,
-	addYouTubeToPlaylist: addYouTubeToPlaylistAction,
-	addAlbumToPlaylist: addAlbumToPlaylistAction
+	addYouTubeToPlaylist: addYouTubeToPlaylistAction
 };
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import ArrowRight from '@lucide/svelte/icons/arrow-right';
-	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
-	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import MoreHorizontal from '@lucide/svelte/icons/more-horizontal';
-	import Play from '@lucide/svelte/icons/play';
-	import Pause from '@lucide/svelte/icons/pause';
-	import { player, toQueueItems, type QueueItem } from '$lib/player/player.svelte';
+	import History from '@lucide/svelte/icons/history';
+	import Shuffle from '@lucide/svelte/icons/shuffle';
+	import ListMusic from '@lucide/svelte/icons/list-music';
+	import { player } from '$lib/player/player.svelte';
+	import { mergeRecentlyPlayed } from '$lib/recentlyPlayed';
+	import { shuffle as shuffleList } from '$lib/collections';
+	import { fmtTime, fmtDurationLong } from '$lib/format';
 	import {
 		isTargetCurrent,
 		queueItemForTarget,
@@ -15,64 +15,33 @@
 		targetExplicit,
 		targetForQueueItem,
 		targetId,
+		targetOwnerUserId,
 		targetTitle,
 		type TrackTarget
 	} from '$lib/tracks';
-	import { fmtTime } from '$lib/format';
 	import Cover from '$lib/components/ui/Cover.svelte';
+	import ArtistLink from '$lib/components/ui/ArtistLink.svelte';
 	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
-	import MixBentoTile from '$lib/components/ui/MixBentoTile.svelte';
-	import Rail from '$lib/components/ui/Rail.svelte';
-	import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
+	import MixTile from '$lib/components/ui/MixTile.svelte';
+	import EqBars from '$lib/components/ui/EqBars.svelte';
 	import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
+	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
 	import TrackContextMenu, {
 		contextMenuStateFor,
 		type ContextMenuState
 	} from '$lib/components/TrackContextMenu.svelte';
-	import AlbumContextMenu, {
-		albumContextMenuStateFor,
-		type AlbumMenuState
-	} from '$lib/components/AlbumContextMenu.svelte';
-	import { fetchAlbumQueueItems } from '$lib/albums';
-	import type { YouTubeAlbumResult, YouTubeSong } from '$lib/types';
+	import type { YouTubeSong } from '$lib/types';
 	import { appendUnique } from '$lib/collections';
-	import { HOME_LATEST_PAGE_SIZE, HOME_POPULAR_MAX } from '$lib/config';
+	import { HOME_CONTINUE_LIMIT, HOME_POPULAR_MAX } from '$lib/config';

 	let { data } = $props();

 	let contextMenu = $state<ContextMenuState | null>(null);
-	let albumMenu = $state<AlbumMenuState | null>(null);
-	let topMusicFillerItems = $state<YouTubeSong[]>([]);
-	let youtubeFillerItems = $state<YouTubeSong[]>([]);
 	let popularFillerItems = $state<YouTubeSong[]>([]);
-	let albumFillerItems = $state<YouTubeAlbumResult[]>([]);
-	let topMusicRail: ReturnType<typeof Rail> | undefined = $state();
-	let recommendedRail: ReturnType<typeof Rail> | undefined = $state();
-
-	$effect(() => {
-		topMusicFillerItems = [];
-		let cancelled = false;
-		data.topMusicFiller.then((filler) => {
-			if (cancelled) return;
-			topMusicFillerItems = appendUnique([], filler.items, (song) => song.videoId);
-		});
-		return () => {
-			cancelled = true;
-		};
-	});
-
-	$effect(() => {
-		youtubeFillerItems = [];
-		let cancelled = false;
-		data.youtubeFiller.then((filler) => {
-			if (cancelled) return;
-			youtubeFillerItems = appendUnique([], filler.items, (song) => song.videoId);
-		});
-		return () => {
-			cancelled = true;
-		};
-	});
+	let spotlightItems = $state<TrackTarget[]>([]);
+	let spotlightTotal = $state(0);

 	$effect(() => {
 		popularFillerItems = [];
@@ -87,96 +56,76 @@
 	});

 	$effect(() => {
-		albumFillerItems = [];
+		spotlightItems = [];
+		spotlightTotal = 0;
 		let cancelled = false;
-		data.albumFiller.then((filler) => {
+		data.spotlightTracks.then(({ items, totalCount }) => {
 			if (cancelled) return;
-			albumFillerItems = appendUnique([], filler.items, (album) => album.albumId);
+			spotlightItems = items.map((track) => ({ kind: 'local' as const, track }));
+			spotlightTotal = totalCount;
 		});
 		return () => {
 			cancelled = true;
 		};
 	});

-	const albums = $derived(data.albums);
 	const mixes = $derived(data.mixes);
 	const playlists = $derived(data.playlists);
-
-	const newTargets = $derived<TrackTarget[]>(
-		data.newReleases.map((track) => ({ kind: 'local' as const, track }))
+	const spotlight = $derived(data.spotlightPlaylist);
+	const spotlightDurationSeconds = $derived(
+		spotlightItems.some((item) => targetDurationSeconds(item) !== undefined)
+			? spotlightItems.reduce((sum, item) => sum + (targetDurationSeconds(item) ?? 0), 0)
+			: undefined
 	);
-	const topMusicTargets = $derived<TrackTarget[]>([
-		...newTargets,
-		...topMusicFillerItems.map((song) => ({ kind: 'youtube' as const, song }))
-	]);
-	const recTargets = $derived<TrackTarget[]>(
-		youtubeFillerItems.map((song) => ({ kind: 'youtube' as const, song }))
+	const spotlightTrackCount = $derived(spotlightTotal || spotlightItems.length);
+	const spotlightVisibilityLabel = $derived(
+		spotlight?.visibility === 'Public' ? 'Pública' : 'Privada'
+	);
+	const spotlightMeta = $derived(
+		spotlightTrackCount === 0
+			? spotlightVisibilityLabel
+			: [
+					`${spotlightTrackCount} ${spotlightTrackCount === 1 ? 'canción' : 'canciones'}`,
+					spotlightDurationSeconds !== undefined
+						? fmtDurationLong(spotlightDurationSeconds)
+						: '0 min',
+					spotlightVisibilityLabel
+				].join(' · ')
 	);

-	type RecommendedAlbum =
-		| { kind: 'recent'; album: (typeof albums)[number] }
-		| { kind: 'discover'; album: YouTubeAlbumResult };
-
-	const recentlyPlayed = $derived.by(() => {
-		const seen = new Set<string>();
-		const merged: QueueItem[] = [];
-		for (const t of player.recentlyPlayed) {
-			const id = String(t.id);
-			if (seen.has(id)) continue;
-			seen.add(id);
-			merged.push({
-				id,
-				title: t.title,
-				artist: t.artist,
-				source: t.source,
-				coverUrl: t.coverUrl,
-				explicit: t.explicit
-			});
-		}
-		for (const item of toQueueItems(data.recentlyPlayed)) {
-			const id = String(item.id);
-			if (seen.has(id)) continue;
-			seen.add(id);
-			merged.push({
-				id,
-				title: item.title,
-				artist: item.artist,
-				source: item.source ?? 'local',
-				coverUrl: item.coverUrl,
-				explicit: item.explicit
-			});
-		}
-		return merged.slice(0, HOME_LATEST_PAGE_SIZE);
-	});
+	const continueItems = $derived(mergeRecentlyPlayed(data.recentlyPlayed, HOME_CONTINUE_LIMIT));
+	const recentPool = $derived(mergeRecentlyPlayed(data.recentlyPlayed, 24));

 	const popularTargets = $derived<TrackTarget[]>(
 		[
-			...recentlyPlayed.map(targetForQueueItem),
+			...recentPool.map(targetForQueueItem),
 			...popularFillerItems.map((song) => ({ kind: 'youtube' as const, song }))
 		].slice(0, HOME_POPULAR_MAX)
 	);

-	const recommendedAlbums = $derived<RecommendedAlbum[]>([
-		...albums.map((album) => ({ kind: 'recent' as const, album })),
-		...albumFillerItems.map((album) => ({ kind: 'discover' as const, album }))
-	]);
-
-	const heroTrack = $derived(recentlyPlayed[0] ?? null);
-	const heroPlaying = $derived(
-		heroTrack !== null && player.current.id === heroTrack.id && player.playing
+	const spotlightQueue = $derived(spotlightItems.map(queueItemForTarget));
+	const spotlightIsCurrent = $derived(
+		spotlightQueue.length > 0 && spotlightQueue.some((item) => item.id === player.current.id)
 	);
+	const heroPlaying = $derived(spotlightIsCurrent && player.playing);

-	function playRecent(index: number) {
-		player.playOrToggle(recentlyPlayed, index);
-	}
-	function playTopMusic(index: number) {
-		player.playOrToggle(topMusicTargets.map(queueItemForTarget), index);
+	function playContinue(index: number) {
+		player.playOrToggle(continueItems, index);
 	}
 	function playPopular(index: number) {
 		player.playOrToggle(popularTargets.map(queueItemForTarget), index);
 	}
-	function playRecommended(index: number) {
-		player.playOrToggle(recTargets.map(queueItemForTarget), index);
+	function playSpotlightTrack(index: number) {
+		player.playOrToggle(spotlightQueue, index);
+	}
+	function playSpotlight() {
+		if (spotlightQueue.length === 0) return;
+		if (spotlightIsCurrent) player.toggle();
+		else player.playQueue(spotlightQueue, 0);
+	}
+	function shuffleSpotlight() {
+		if (spotlightQueue.length === 0) return;
+		player.playQueue(shuffleList(spotlightQueue), 0);
 	}

 	function openContextMenu(event: MouseEvent, target: TrackTarget) {
@@ -187,39 +136,6 @@
 		player.addToQueue(queueItemForTarget(contextMenu));
 		contextMenu = null;
 	}
-
-	function openAlbumMenu(event: MouseEvent, kind: 'local' | 'youtube', albumId: string) {
-		albumMenu = albumContextMenuStateFor(event, kind, albumId);
-	}
-
-	async function albumPlayNext() {
-		if (!albumMenu) return;
-		const { kind, albumId } = albumMenu;
-		albumMenu = null;
-		player.playNext(await fetchAlbumQueueItems(kind, albumId));
-	}
-
-	async function albumAddToQueue() {
-		if (!albumMenu) return;
-		const { kind, albumId } = albumMenu;
-		albumMenu = null;
-		player.appendToQueue(await fetchAlbumQueueItems(kind, albumId));
-	}
-
-	function albumCaption(album: (typeof albums)[number]) {
-		return [
-			album.releaseYear ? String(album.releaseYear) : undefined,
-			`${Number(album.trackCount)} ${Number(album.trackCount) === 1 ? 'canción' : 'canciones'}`
-		]
-			.filter(Boolean)
-			.join(' · ');
-	}
-
-	function youtubeAlbumCaption(album: YouTubeAlbumResult) {
-		return [album.artist, album.releaseYear ? String(album.releaseYear) : undefined]
-			.filter(Boolean)
-			.join(' · ');
-	}
 </script>

 <svelte:head>
@@ -227,399 +143,353 @@
 	<meta name="description" content="Tu música, sin límites." />
 </svelte:head>

-{#snippet railArrows(rail: ReturnType<typeof Rail> | undefined)}
-	<div class="flex shrink-0 gap-2">
-		<button
-			type="button"
-			onclick={() => rail?.scrollByPage(-1)}
-			aria-label="Anterior"
-			class="grid h-8 w-8 place-items-center rounded-full border border-line text-fg-2 transition hover:border-accent-soft/50 hover:text-accent-soft"
-		>
-			<ChevronLeft class="h-4 w-4" />
-		</button>
-		<button
-			type="button"
-			onclick={() => rail?.scrollByPage(1)}
-			aria-label="Siguiente"
-			class="grid h-8 w-8 place-items-center rounded-full border border-line text-fg-2 transition hover:border-accent-soft/50 hover:text-accent-soft"
-		>
-			<ChevronRight class="h-4 w-4" />
-		</button>
-	</div>
-{/snippet}
-
-<section class="relative overflow-hidden page-x pt-8 pb-8 sm:pt-10 sm:pb-10">
-	<div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
+<section class="page-x pt-3 sm:pt-4">
+	<div
+		class="relative overflow-hidden rounded-[24px] bg-[image:var(--mf-hero-bg)] px-6 py-8 transition-[background] duration-[600ms] sm:px-9 sm:py-8.5"
+	>
 		<div
-			class="absolute inset-x-0 top-[-19rem] h-[34rem] sm:h-[42rem]"
-			style="background:radial-gradient(58% 100% at 50% 0%, color-mix(in oklch, var(--color-accent), transparent 5%), color-mix(in oklch, var(--color-accent), transparent 48%) 42%, transparent 78%); animation:breathe 14s ease-in-out infinite"
-		></div>
-		<div class="absolute inset-x-0 bottom-0 h-16 bg-linear-to-b from-transparent to-bg"></div>
-	</div>
-
-	<div class="relative flex flex-col gap-10 lg:flex-row lg:items-end lg:justify-between lg:gap-8">
-		<div class="animate-enter flex max-w-2xl flex-col gap-4">
-			<p class="text-xs font-semibold tracking-[0.28em] text-fg-2 uppercase sm:text-sm">
-				{data.greeting}
-			</p>
-			<h1
-				class="font-display text-[clamp(3rem,7.5vw,5.5rem)] leading-[0.98] font-medium tracking-tight text-fg"
-			>
-				Tu música,<br /><span class="text-accent-soft">sin límites.</span>
-			</h1>
-			<p class="max-w-md text-base text-fg-2 sm:text-lg">
-				Sube lo tuyo, descubre lo nuevo y escúchalo todo en un solo sitio.
-			</p>
-		</div>
-
-		{#if heroTrack}
-			<button
-				type="button"
-				onclick={() => playRecent(0)}
-				aria-label="{heroPlaying ? 'Pausar' : 'Reproducir'} {heroTrack.title}"
-				class="group/hero animate-enter relative flex w-full max-w-sm shrink-0 items-center gap-4 overflow-hidden rounded-panel border border-line-strong bg-surface/70 p-4 text-left backdrop-blur-xl transition duration-300 hover:border-accent-soft/50 hover:bg-surface-hover hover:shadow-glow sm:p-5"
-				style="animation-delay:140ms"
-			>
-				<Cover
-					trackId={heroTrack.id}
-					src={heroTrack.coverUrl}
-					size="medium"
-					alt={heroTrack.title}
-					class="h-16 w-16 shrink-0 rounded-art shadow-art sm:h-20 sm:w-20"
+			class="relative flex flex-col items-start gap-7 lg:flex-row lg:flex-wrap lg:items-end lg:justify-between"
+		>
+			<div class="animate-enter max-w-135 min-w-65">
+				<h1
+					class="font-display text-[28px] leading-[1.1] font-semibold tracking-[-0.035em] text-pretty text-fg sm:text-[36px]"
 				>
-					{#if player.current.id === heroTrack.id}
-						<NowPlaying paused={!player.playing} />
-					{/if}
-				</Cover>
-				<div class="min-w-0 flex-1">
-					<p class="text-[0.65rem] font-semibold tracking-[0.2em] text-fg-2 uppercase">
-						Seguir escuchando
-					</p>
-					<p class="mt-1 truncate font-display text-lg text-fg">{heroTrack.title}</p>
-					{#if heroTrack.artist}
-						<p class="truncate text-sm text-fg-2">{heroTrack.artist}</p>
+					{data.greeting}
+				</h1>
+				<p class="mt-3.5 max-w-108 text-[13.5px] leading-[1.65] text-fg-2">
+					Sube lo tuyo, descubre lo nuevo y escúchalo todo en un solo sitio.
+				</p>
+				<div class="mt-6.5 flex flex-wrap items-center gap-2.5">
+					{#if spotlight}
+						<Button
+							variant="accent"
+							class="!bg-cta-strong !font-bold !text-ink hover:!brightness-95"
+							onclick={playSpotlight}
+						>
+							{heroPlaying ? 'Pausar' : 'Reanudar'}
+							{spotlight.name}
+						</Button>
 					{/if}
+					<Button href="/explore" variant="secondary" class="!font-normal">Explorar música</Button>
 				</div>
-				<span
-					class="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-accent-soft text-on-accent shadow-art transition duration-300 group-hover/hero:scale-105"
-				>
-					{#if heroPlaying}
-						<Pause class="h-4.5 w-4.5" fill="currentColor" />
-					{:else}
-						<Play class="h-4.5 w-4.5 translate-x-0.5" fill="currentColor" />
-					{/if}
-				</span>
-			</button>
-		{/if}
+			</div>
+
+			{#await data.listeningStats then stats}
+				<div class="flex gap-6.5">
+					<div>
+						<div class="font-display text-[25px] font-semibold tracking-[-0.03em] text-fg">
+							{stats.tracksThisWeek}
+						</div>
+						<div class="mt-1 text-[11.5px] text-fg-3">Canciones nuevas escuchadas esta semana</div>
+					</div>
+					<div>
+						<div class="font-display text-[25px] font-semibold tracking-[-0.03em] text-fg">
+							{fmtDurationLong(Number(stats.secondsThisWeek))}
+						</div>
+						<div class="mt-1 text-[11.5px] text-fg-3">Tiempo de escucha esta semana</div>
+					</div>
+					<div>
+						<div class="font-display text-[25px] font-semibold tracking-[-0.03em] text-fg">
+							{stats.streakDays}
+						</div>
+						<div class="mt-1 text-[11.5px] text-fg-3">Días consecutivos escuchando</div>
+					</div>
+				</div>
+			{/await}
+		</div>
 	</div>
 </section>

-<div class="flex flex-col gap-12 page-x pb-8 sm:pb-10">
-	{#if topMusicTargets.length > 0}
-		<section>
-			<SectionHeading title="Top música">
-				{#snippet actions()}
-					{@render railArrows(topMusicRail)}
-				{/snippet}
-			</SectionHeading>
-			<Rail bind:this={topMusicRail}>
-				{#each topMusicTargets as target, i (targetId(target))}
-					<button
-						type="button"
-						onclick={() => playTopMusic(i)}
-						oncontextmenu={(e) => openContextMenu(e, target)}
-						aria-label="Reproducir {targetTitle(target)}"
-						class="group/card animate-enter block w-36 shrink-0 rounded-art text-left focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
-						style="animation-delay:{Math.min(i, 10) * 45}ms"
+<div class="flex flex-col gap-11.5 page-x pt-10 pb-8 sm:pb-10">
+	<!-- CONTINUAR ESCUCHANDO -->
+	<section>
+		<SectionHeading title="Continuar escuchando" />
+		{#if continueItems.length > 0}
+			<div class="grid grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-5">
+				{#each continueItems as item, i (item.id)}
+					{@const isCurrent = player.current.id === item.id}
+					<div
+						role="button"
+						tabindex="0"
+						onclick={() => playContinue(i)}
+						onkeydown={(e) => {
+							if (e.key !== 'Enter' && e.key !== ' ') return;
+							e.preventDefault();
+							playContinue(i);
+						}}
+						oncontextmenu={(e) => openContextMenu(e, targetForQueueItem(item))}
+						class="group/cont animate-enter flex items-center gap-3.25 rounded-[13px] p-2.25 pr-3.5 text-left transition-colors {isCurrent
+							? 'bg-accent-tint'
+							: 'hover:bg-white/[3%]'}"
+						style="animation-delay:{Math.min(i, 10) * 40}ms"
 					>
-						<div class="relative h-36 w-36">
-							<Cover
-								trackId={targetId(target)}
-								src={targetCoverSrc(target)}
-								size="large"
-								alt={targetTitle(target)}
-								class="h-full w-full rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
+						<Cover
+							trackId={item.id}
+							src={item.coverUrl}
+							size="small"
+							alt={item.title}
+							class="h-13 w-13 shrink-0 rounded-[10px]"
+						/>
+						<div class="min-w-0 flex-1">
+							<div
+								class="truncate text-sm leading-[1.3] font-medium {isCurrent
+									? 'text-accent-soft'
+									: 'text-fg'}"
 							>
-								{#if isTargetCurrent(target)}
-									<NowPlaying paused={!player.playing} />
-								{/if}
-							</Cover>
+								{item.title}
+							</div>
+							<ArtistLink
+								name={item.artist || '—'}
+								ownerUserId={item.ownerUserId}
+								class="mt-0.75 text-[12.5px] text-fg-3"
+							/>
 						</div>
-						<div class="mt-3 flex min-w-0 items-center gap-1.5">
-							{#if targetExplicit(target)}
-								<ExplicitBadge />
-							{/if}
-							<span class="truncate text-fg transition-colors group-hover/card:text-accent-soft">
-								{targetTitle(target)}
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<EmptyState
+				icon={History}
+				title="Aún no has escuchado nada"
+				description="Reproduce alguna canción y tu actividad reciente aparecerá aquí."
+			>
+				{#snippet actions()}
+					<Button href="/explore" variant="secondary">Explorar música</Button>
+				{/snippet}
+			</EmptyState>
+		{/if}
+	</section>
+
+	<!-- PLAYLIST DESTACADA -->
+	{#if spotlight}
+		<section>
+			<div
+				class="grid grid-cols-1 overflow-hidden rounded-panel-lg bg-[image:var(--mf-spotlight-bg)] transition-[background] duration-[600ms] lg:grid-cols-2"
+			>
+				<div class="flex flex-col justify-center gap-5 p-8 sm:p-9">
+					<div class="flex items-center gap-5">
+						<PlaylistArt
+							playlistId={spotlight.id}
+							trackIds={spotlight.coverTrackIds}
+							version={spotlight.updatedAt}
+							size="large"
+							class="h-28 w-28 shrink-0 rounded-[16px] shadow-[0_16px_40px_rgba(0,0,0,.5)]"
+						/>
+						<div class="min-w-0">
+							<p class="text-[11px] font-semibold tracking-[0.16em] text-fg-2 uppercase">
+								Playlist destacada
+							</p>
+							<h3
+								class="mt-2.5 truncate font-display text-[28px] font-semibold tracking-[-0.03em] text-fg"
+							>
+								{spotlight.name}
+							</h3>
+							<p class="mt-2 text-[13px] text-fg-2">{spotlightMeta}</p>
+						</div>
+					</div>
+					<p class="max-w-110 text-sm leading-[1.7] text-fg-2">
+						{spotlight.description || 'Tu colección, siempre a mano.'}
+					</p>
+					<div class="mt-1 flex gap-2.5">
+						<Button variant="accent" onclick={playSpotlight}>Reproducir</Button>
+						<Button variant="secondary" class="!font-normal" onclick={shuffleSpotlight}>
+							Aleatorio
+						</Button>
+					</div>
+				</div>
+				<div
+					class="flex flex-col gap-0.5 p-5.5 sm:p-6"
+					style="background-image:linear-gradient(to right, color-mix(in oklch, var(--mf-scrim) 26%, transparent), transparent)"
+				>
+					{#each spotlightItems as target, i (targetId(target))}
+						{@const durationSeconds = targetDurationSeconds(target)}
+						<div
+							role="button"
+							tabindex="0"
+							onclick={() => playSpotlightTrack(i)}
+							onkeydown={(e) => {
+								if (e.key !== 'Enter' && e.key !== ' ') return;
+								e.preventDefault();
+								playSpotlightTrack(i);
+							}}
+							class="flex items-center gap-3 rounded-[10px] p-2 text-left transition-colors hover:bg-white/[3%] {isTargetCurrent(
+								target
+							)
+								? 'bg-accent-tint'
+								: ''}"
+						>
+							<span class="w-5 shrink-0 text-center text-[11.5px] text-muted tabular-nums"
+								>{i + 1}</span
+							>
+							<div class="min-w-0 flex-1">
+								<div
+									class="truncate text-[12.5px] font-medium {isTargetCurrent(target)
+										? 'text-accent-soft'
+										: 'text-fg'}"
+								>
+									{targetTitle(target)}
+								</div>
+								<ArtistLink
+									name={targetArtist(target)}
+									ownerUserId={targetOwnerUserId(target)}
+									class="mt-0.5 text-[11px] text-fg-3"
+								/>
+							</div>
+							<span class="shrink-0 text-[11.5px] text-muted tabular-nums">
+								{durationSeconds !== undefined ? fmtTime(durationSeconds) : '—'}
 							</span>
 						</div>
-						{#if targetArtist(target)}
-							<div class="mt-0.5 truncate text-sm text-fg-2">{targetArtist(target)}</div>
-						{/if}
-					</button>
-				{/each}
-			</Rail>
+					{:else}
+						<p class="p-2 text-sm text-fg-3">Esta playlist todavía no tiene canciones.</p>
+					{/each}
+				</div>
+			</div>
 		</section>
 	{/if}

-	<div class="grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-8">
-		<section class="min-w-0">
-			<SectionHeading title="Popular" />
-			<div class="flex flex-col gap-1.5">
+	<!-- MIXES -->
+	<section>
+		<SectionHeading title="Mixes" subtitle="Generados a partir de lo que más repites" />
+		{#if mixes.length > 0}
+			<div class="grid grid-cols-[repeat(auto-fill,minmax(164px,1fr))] gap-5">
+				{#each mixes as mix, i (mix.id)}
+					<MixTile {mix} index={i} />
+				{/each}
+			</div>
+		{:else}
+			<EmptyState
+				icon={Shuffle}
+				title="Aún no tienes mezclas"
+				description="Se generan automáticamente a partir de lo que escuchas."
+			/>
+		{/if}
+	</section>
+
+	<!-- POPULARES ESTA SEMANA -->
+	<section>
+		<SectionHeading
+			title="Populares esta semana"
+			subtitle="Lo más escuchado entre quienes comparten tu gusto"
+		/>
+		{#if popularTargets.length > 0}
+			<div class="grid grid-cols-1 gap-x-8.5 gap-y-1.5 lg:grid-cols-2">
 				{#each popularTargets as target, i (targetId(target))}
 					{@const isCurrent = isTargetCurrent(target)}
 					<div
-						class="group/row flex min-w-0 items-center gap-3 rounded-control p-2 transition duration-200 {isCurrent
-							? 'bg-surface-hover'
-							: 'hover:bg-hover'}"
+						role="button"
+						tabindex="0"
+						onclick={() => playPopular(i)}
+						onkeydown={(e) => {
+							if (e.key !== 'Enter' && e.key !== ' ') return;
+							e.preventDefault();
+							playPopular(i);
+						}}
+						oncontextmenu={(e) => openContextMenu(e, target)}
+						class="flex items-center gap-3.5 rounded-[11px] p-2 text-left transition-colors {isCurrent
+							? 'bg-accent-tint'
+							: 'hover:bg-white/[3%]'}"
 					>
-						<button
-							type="button"
-							onclick={() => playPopular(i)}
-							aria-label="{isCurrent && player.playing ? 'Pausar' : 'Reproducir'} {targetTitle(
-								target
-							)}"
-							class="relative shrink-0"
-						>
-							<Cover
-								trackId={targetId(target)}
-								src={targetCoverSrc(target)}
-								size="small"
-								alt={targetTitle(target)}
-								class="h-11 w-11 rounded-control shadow-art transition duration-200"
-							>
-								{#if isCurrent}
-									<NowPlaying paused={!player.playing} />
-								{/if}
-							</Cover>
-							{#if !isCurrent}
-								<span
-									class="absolute inset-0 grid place-items-center rounded-control bg-scrim/0 opacity-0 transition duration-200 group-hover/row:bg-scrim/50 group-hover/row:opacity-100"
-								>
-									<Play class="h-3.5 w-3.5 translate-x-0.5 text-on-art" fill="currentColor" />
-								</span>
+						<span class="flex h-3.5 w-4.5 shrink-0 items-end justify-center">
+							{#if isCurrent}
+								<EqBars size={13} paused={!player.playing} />
+							{:else}
+								<span class="text-xs text-muted tabular-nums">{i + 1}</span>
 							{/if}
-						</button>
-						<button type="button" onclick={() => playPopular(i)} class="min-w-0 flex-1 text-left">
+						</span>
+						<Cover
+							trackId={targetId(target)}
+							src={targetCoverSrc(target)}
+							size="small"
+							alt={targetTitle(target)}
+							class="h-9.5 w-9.5 shrink-0 rounded-[8px]"
+						/>
+						<div class="min-w-0 flex-1">
 							<div class="flex min-w-0 items-center gap-1.5">
 								{#if targetExplicit(target)}
 									<ExplicitBadge />
 								{/if}
 								<span
-									class="truncate text-sm text-fg transition-colors group-hover/row:text-accent-soft"
+									class="truncate text-[12.5px] font-medium {isCurrent
+										? 'text-accent-soft'
+										: 'text-fg'}"
 								>
 									{targetTitle(target)}
 								</span>
 							</div>
-							{#if targetArtist(target)}
-								<div class="truncate text-xs text-fg-2">{targetArtist(target)}</div>
-							{/if}
-						</button>
-						<button
-							type="button"
-							onclick={(e) => openContextMenu(e, target)}
-							aria-label="Más opciones"
-							class="shrink-0 rounded-full p-1.5 text-fg-2 opacity-0 transition group-hover/row:opacity-100 hover:text-fg"
-						>
-							<MoreHorizontal class="h-4 w-4" />
-						</button>
+							<ArtistLink
+								name={targetArtist(target)}
+								ownerUserId={targetOwnerUserId(target)}
+								class="mt-0.5 text-[11.5px] text-fg-3"
+							/>
+						</div>
 					</div>
 				{/each}
 			</div>
-		</section>
-
-		<section class="min-w-0">
-			<SectionHeading title="Álbumes recomendados">
+		{:else}
+			<EmptyState
+				icon={History}
+				title="Aún no has escuchado nada"
+				description="Reproduce alguna canción y tu actividad reciente aparecerá aquí."
+			>
 				{#snippet actions()}
-					{@render railArrows(recommendedRail)}
+					<Button href="/explore" variant="secondary">Explorar música</Button>
 				{/snippet}
-			</SectionHeading>
-			<Rail bind:this={recommendedRail}>
-				{#each recommendedAlbums as entry, i (entry.kind === 'recent' ? entry.album.id : entry.album.albumId)}
-					{#if entry.kind === 'recent'}
-						{@const album = entry.album}
-						<a
-							href={album.source === 'YouTube'
-								? `/albums/external/youtube/${album.externalId}`
-								: `/albums/${album.id}`}
-							class="group/card animate-enter block w-36 shrink-0 text-center"
-							style="animation-delay:{Math.min(i, 10) * 45}ms"
-							oncontextmenu={(e) =>
-								openAlbumMenu(e, album.source === 'YouTube' ? 'youtube' : 'local', album.id)}
-						>
-							{#if album.source === 'YouTube' && album.thumbnailUrl}
-								<Cover
-									trackId={album.id}
-									src={album.thumbnailUrl}
-									size="large"
-									alt={album.title}
-									class="mx-auto h-36 w-36 rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
-								/>
-							{:else}
-								<PlaylistArt
-									trackIds={album.coverTrackIds}
-									class="mx-auto h-36 w-36 rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
-								/>
-							{/if}
-							<div
-								class="mt-3.5 truncate text-fg transition-colors group-hover/card:text-accent-soft"
-							>
-								{album.title}
-							</div>
-							<div class="mt-0.5 truncate text-sm text-fg-2">{albumCaption(album)}</div>
-						</a>
-					{:else}
-						{@const album = entry.album}
-						<a
-							href="/albums/external/youtube/{album.albumId}"
-							class="group/card animate-enter block w-36 shrink-0 text-center"
-							style="animation-delay:{Math.min(i, 10) * 45}ms"
-							oncontextmenu={(e) => openAlbumMenu(e, 'youtube', album.albumId)}
-						>
-							<Cover
-								trackId={album.albumId}
-								src={album.thumbnailUrl}
-								size="large"
-								alt={album.title}
-								class="mx-auto h-36 w-36 rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
-							/>
-							<div
-								class="mt-3.5 truncate text-fg transition-colors group-hover/card:text-accent-soft"
-							>
-								{album.title}
-							</div>
-							<div class="mt-0.5 truncate text-sm text-fg-2">{youtubeAlbumCaption(album)}</div>
-						</a>
-					{/if}
-				{/each}
-			</Rail>
-		</section>
-	</div>
+			</EmptyState>
+		{/if}
+	</section>

-	{#if mixes.length > 0}
-		<section>
-			<SectionHeading title="Mezclas" />
-			<div class="grid grid-cols-2 gap-3 sm:auto-rows-25 sm:grid-cols-4 sm:gap-4">
-				{#each mixes as mix, i (mix.id)}
-					<MixBentoTile
-						{mix}
-						index={i}
-						featured={i === 0}
-						banner={i === 4}
-						class={i === 0
-							? 'col-span-2 min-h-42 sm:row-span-2 sm:min-h-0'
-							: i === 1
-								? 'col-span-2 min-h-30 sm:min-h-0'
-								: i === 4
-									? 'col-span-2 min-h-24 sm:col-span-4 sm:min-h-0'
-									: 'min-h-30 sm:min-h-0'}
-					/>
-				{/each}
-			</div>
-		</section>
-	{/if}
-
-	{#if playlists.length > 0}
-		<section>
-			<SectionHeading title="Listas de reproducción" />
-			<Rail>
+	<!-- TUS PLAYLISTS -->
+	<section>
+		<SectionHeading title="Tus playlists" subtitle="Creadas y guardadas por ti">
+			{#snippet actions()}
+				{#if data.playlistsHasMore}
+					<a
+						href="/playlists"
+						class="shrink-0 text-[11.5px] font-semibold tracking-[0.07em] text-fg-3 uppercase transition-colors hover:text-fg"
+					>
+						Ver todas
+					</a>
+				{/if}
+			{/snippet}
+		</SectionHeading>
+		{#if playlists.length > 0}
+			<div class="grid grid-cols-[repeat(auto-fill,minmax(258px,1fr))] gap-3.5">
 				{#each playlists as playlist, i (playlist.id)}
 					<a
 						href="/playlists/{playlist.id}"
-						class="group/card animate-enter block w-40 shrink-0 pr-2 pb-2"
-						style="animation-delay:{Math.min(i, 10) * 45}ms"
+						class="group/card animate-enter flex items-center gap-3.5 rounded-[15px] p-3 transition-colors hover:bg-white/[3%]"
+						style="animation-delay:{Math.min(i, 10) * 40}ms"
 					>
-						<div class="relative h-40 w-40">
-							<div
-								class="absolute inset-0 translate-x-2 translate-y-2 rounded-art bg-surface-2 ring-1 ring-line"
-							></div>
-							<div
-								class="absolute inset-0 translate-x-1 translate-y-1 rounded-art bg-surface-hover ring-1 ring-line"
-							></div>
-							<PlaylistArt
-								playlistId={playlist.id}
-								trackIds={playlist.coverTrackIds}
-								version={playlist.updatedAt}
-								class="absolute inset-0 h-full w-full rounded-art shadow-art-lg ring-1 ring-line-strong"
-							/>
+						<PlaylistArt
+							playlistId={playlist.id}
+							trackIds={playlist.coverTrackIds}
+							version={playlist.updatedAt}
+							size="medium"
+							class="h-15.5 w-15.5 shrink-0 rounded-[11px] shadow-[0_10px_24px_rgba(0,0,0,.42)]"
+						/>
+						<div class="min-w-0 flex-1">
+							<div class="truncate text-[13.5px] font-semibold tracking-[-0.01em] text-fg">
+								{playlist.name}
+							</div>
+							{#if playlist.description}
+								<div class="mt-1 truncate text-[11.5px] text-fg-3">{playlist.description}</div>
+							{/if}
 						</div>
-						<div
-							class="mt-3.5 truncate text-fg transition-colors group-hover/card:text-accent-soft"
-						>
-							{playlist.name}
-						</div>
-						{#if playlist.description}
-							<div class="mt-0.5 truncate text-sm text-fg-2">{playlist.description}</div>
-						{/if}
 					</a>
 				{/each}
-				<a
-					href="/playlists"
-					class="group/more grid h-40 w-40 shrink-0 place-items-center rounded-art border border-dashed border-line text-fg-2 transition duration-300 hover:border-accent-soft/50 hover:text-accent-soft"
-				>
-					<div class="flex flex-col items-center gap-2">
-						<span
-							class="grid h-9 w-9 place-items-center rounded-full bg-surface-2 transition-transform duration-300 group-hover/more:translate-x-0.5"
-						>
-							<ArrowRight class="h-4 w-4" />
-						</span>
-						<span class="text-sm">Ver todas</span>
-					</div>
-				</a>
-			</Rail>
-		</section>
-	{/if}
-
-	{#if recTargets.length > 0}
-		<section>
-			<SectionHeading title="Quizá te guste" />
-			<ul class="grid grid-cols-1 gap-1 lg:grid-cols-2 lg:gap-x-8">
-				{#each recTargets as target, i (targetId(target))}
-					<li>
-						<button
-							type="button"
-							onclick={() => playRecommended(i)}
-							oncontextmenu={(e) => openContextMenu(e, target)}
-							aria-label="Reproducir {targetTitle(target)}"
-							class="group/row flex w-full min-w-0 items-center gap-3.5 rounded-control p-2 pr-4 text-left transition hover:bg-hover focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none"
-						>
-							<Cover
-								trackId={targetId(target)}
-								src={targetCoverSrc(target)}
-								size="small"
-								alt={targetTitle(target)}
-								class="h-11 w-11 shrink-0 rounded-control shadow-art ring-1 ring-line ring-inset"
-							>
-								{#if isTargetCurrent(target)}
-									<NowPlaying paused={!player.playing} />
-								{/if}
-							</Cover>
-							<div class="min-w-0 flex-1">
-								<div class="flex min-w-0 items-center gap-1.5">
-									{#if targetExplicit(target)}
-										<ExplicitBadge />
-									{/if}
-									<span
-										class="truncate text-sm text-fg transition-colors group-hover/row:text-accent-soft"
-									>
-										{targetTitle(target)}
-									</span>
-								</div>
-								{#if targetArtist(target)}
-									<div class="truncate text-xs text-fg-2">{targetArtist(target)}</div>
-								{/if}
-							</div>
-							{#if targetDurationSeconds(target)}
-								<span class="shrink-0 text-sm text-fg-2 tabular-nums">
-									{fmtTime(targetDurationSeconds(target) ?? 0)}
-								</span>
-							{/if}
-						</button>
-					</li>
-				{/each}
-			</ul>
-		</section>
-	{/if}
+			</div>
+		{:else}
+			<EmptyState
+				icon={ListMusic}
+				title="Todavía no tienes listas"
+				description="Crea tu primera lista y añádele canciones de tu biblioteca."
+			>
+				{#snippet actions()}
+					<Button href="/playlists">Crear lista</Button>
+				{/snippet}
+			</EmptyState>
+		{/if}
+	</section>
 </div>

 {#if contextMenu}
@@ -630,13 +500,3 @@
 		onAddToQueue={addToQueue}
 	/>
 {/if}
-
-{#if albumMenu}
-	<AlbumContextMenu
-		menu={albumMenu}
-		{playlists}
-		onClose={() => (albumMenu = null)}
-		onPlayNext={albumPlayNext}
-		onAddToQueue={albumAddToQueue}
-	/>
-{/if}
@@ -0,0 +1,16 @@
+import type { RequestHandler } from './$types';
+import { json } from '@sveltejs/kit';
+import { createApiClient } from '$lib/server/api';
+
+export const POST: RequestHandler = async ({ request, locals, fetch }) => {
+	if (!locals.accessToken) return json({ message: 'Inicia sesión.' }, { status: 401 });
+
+	const body = await request.json();
+	const api = createApiClient({ fetch, accessToken: locals.accessToken });
+	const result = await api.POST('/likes/toggle', { body });
+
+	if (result.error || result.data === undefined)
+		return json({ message: 'No se pudo actualizar Me gusta.' }, { status: 502 });
+
+	return json({ liked: result.data });
+};
@@ -1,27 +1,36 @@
@import 'tailwindcss';

@theme {
-	--font-sans: 'Manrope Variable', ui-sans-serif, system-ui, sans-serif;
-	--font-display: 'Bricolage Grotesque Variable', ui-sans-serif, system-ui, sans-serif;
+	--font-sans: 'Plus Jakarta Sans Variable', ui-sans-serif, system-ui, sans-serif;
+	--font-display: 'Sora Variable', ui-sans-serif, system-ui, sans-serif;

 	--color-bg: var(--mf-bg);
 	--color-elevated: var(--mf-elevated);
 	--color-surface: var(--mf-surface);
 	--color-surface-2: var(--mf-surface-2);
 	--color-surface-hover: var(--mf-surface-hover);
-	--color-hover: rgba(255, 255, 255, 0.05);
+	--color-hover: rgba(255, 255, 255, 0.045);
 	--color-line: var(--mf-border);
 	--color-line-strong: var(--mf-border-strong);
+	--color-hairline: var(--mf-hairline);
 	--color-track: var(--mf-track);
 	--color-fg: var(--mf-text);
 	--color-fg-2: var(--mf-text-2);
 	--color-fg-3: var(--mf-text-3);
 	--color-muted: var(--mf-text-4);
 	--color-accent: var(--mf-accent);
-	--color-accent-soft: var(--mf-accent-soft);
+	--color-accent-soft: var(--mf-accent-title);
+	--color-accent-muted: var(--mf-accent-muted);
+	--color-accent-tint: var(--mf-accent-soft-bg);
+	--color-accent-line: var(--mf-accent-line);
+	--color-accent-hair: var(--mf-accent-hair);
+	--color-accent-btn: var(--mf-accent-btn-bg);
+	--color-accent-btn-hover: var(--mf-accent-btn-bg-hover);
 	--color-accent-glow: var(--mf-accent-glow);
 	--color-accent-dim: var(--mf-accent-dim);
 	--color-on-accent: var(--mf-on-art);
+	--color-ink: var(--mf-ink);
+	--color-cta-strong: var(--mf-cta-strong-bg);
 	--color-scrim: var(--mf-scrim);
 	--color-on-art: var(--mf-on-art);
 	--color-danger: oklch(63.7% 0.15 25.331);
@@ -29,13 +38,15 @@

 	--radius-control: 0.625rem;
 	--radius-panel: 1.125rem;
-	--radius-art: 0.85rem;
+	--radius-panel-lg: 1.375rem;
+	--radius-art: 0.8125rem;
 	--radius-art-lg: 1.125rem;
 	--radius-art-round: 1.75rem;

-	--shadow-art: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
+	--shadow-art: 0 14px 32px rgba(0, 0, 0, 0.45);
 	--shadow-art-lg: 0 24px 50px -16px rgba(0, 0, 0, 0.75);
 	--shadow-menu: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
+	--shadow-player: 0 20px 56px rgba(0, 0, 0, 0.6);
 	--shadow-glow: 0 0 0 1px var(--mf-border-strong), 0 20px 45px -20px var(--mf-accent-glow);
 }

@@ -165,6 +176,14 @@ button:disabled {
 	animation: fade-in 0.4s ease both;
 }

+.glass-panel {
+	background-color: var(--mf-panel-bg);
+	background-image: var(--mf-modal-glow);
+	backdrop-filter: blur(22px);
+	-webkit-backdrop-filter: blur(22px);
+	transition: background 0.6s;
+}
+
@media (prefers-reduced-motion: reduce) {
 	*,
 	*::before,
@@ -12,14 +12,15 @@
 </svelte:head>

 <div class="relative grid min-h-screen place-items-center overflow-hidden bg-bg px-6 text-fg">
-	<div
-		class="pointer-events-none absolute inset-0"
-		style="background:radial-gradient(ellipse 46rem 28rem at 50% 36%, color-mix(in oklch, var(--color-accent), transparent 82%), transparent 70%)"
-	></div>
+	<div class="pointer-events-none absolute inset-0" style="background:var(--mf-ambient)"></div>

 	<div class="relative flex w-full max-w-4xl flex-col items-center gap-12 text-center">
-		<div class="font-display text-[clamp(1.5rem,3vw,2.5rem)] font-semibold tracking-tight">
-			Musify
+		<div class="flex items-center gap-3">
+			<span class="h-8 w-8 rounded-xl bg-[image:var(--mf-logo-grad)] shadow-[var(--mf-logo-glow)]"
+			></span>
+			<span class="font-display text-[clamp(1.5rem,3vw,2.5rem)] font-semibold tracking-tight">
+				Musify
+			</span>
 		</div>

 		<div class="animate-enter flex flex-col items-center gap-5">
@@ -39,7 +40,7 @@
 			<Button
 				href={`/auth/login?mode=register&${returnParam}`}
 				reload
-				variant="subtle"
+				variant="secondary"
 				size="lg"
 				class="w-full"
 			>