Changes

web-player/src/app.d.ts

@@ -6,6 +6,10 @@ declare global {
 			user: SessionUser | null;
 			accessToken: string | null;
 		}
+
+		interface PageData {
+			section?: string | null;
+		}
 	}
 }
 

web-player/src/lib/api/schema.d.ts

@@ -582,6 +582,8 @@ export interface components {
             /** Format: date-time */
             updatedAt: string;
             coverTrackIds: string[];
+            youTubeAlbumId: null | string;
+            thumbnailUrl: null | string;
         };
         CreateAlbumRequest: {
             title: string;

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

@@ -26,7 +26,6 @@
 	import { enhance } from '$app/forms';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
 		menu: AlbumMenuState;
@@ -94,7 +93,6 @@
 									<PlaylistArt
 										playlistId={playlist.id}
 										trackIds={[]}
-										hue={hueFor(playlist.id)}
 										size="small"
 										class="h-9 w-9 shrink-0 rounded-control"
 									/>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import { isSectionActive } from '$lib/navigation.svelte';
 	import Home from '@lucide/svelte/icons/house';
 	import Search from '@lucide/svelte/icons/search';
 	import Music from '@lucide/svelte/icons/music';
@@ -13,7 +14,7 @@
 	];
 
 	function isActive(href: string) {
-		return href === '/' ? page.url.pathname === '/' : page.url.pathname.startsWith(href);
+		return isSectionActive(href, page.url.pathname, page.data.section);
 	}
 </script>
 

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import { isSectionActive } from '$lib/navigation.svelte';
 	import type { SessionUser } from '$lib/types';
 	import Home from '@lucide/svelte/icons/house';
 	import Search from '@lucide/svelte/icons/search';
@@ -42,7 +43,7 @@
 	];
 
 	function isActive(href: string) {
-		return href === '/' ? page.url.pathname === '/' : page.url.pathname.startsWith(href);
+		return isSectionActive(href, page.url.pathname, page.data.section);
 	}
 
 	$effect(() => {

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

@@ -22,7 +22,6 @@
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
 		menu: ContextMenuState;
@@ -105,7 +104,6 @@
 									<PlaylistArt
 										playlistId={playlist.id}
 										trackIds={[]}
-										hue={hueFor(playlist.id)}
 										size="small"
 										class="h-9 w-9 shrink-0 rounded-control"
 									/>

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

@@ -35,7 +35,7 @@
 			type="button"
 			onclick={seek}
 			aria-label="Barra de progreso"
-			class="group relative h-1.5 flex-1 cursor-pointer rounded-full bg-track transition-[height] hover:h-2"
+			class="group relative h-1.5 flex-1 cursor-pointer rounded-full bg-track"
 		>
 			<div
 				class="absolute inset-y-0 left-0 rounded-full bg-accent/60 group-hover:brightness-110"

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

@@ -9,15 +9,13 @@
 		<Cover
 			trackId={player.current.id}
 			src={player.current.coverUrl}
-			hue={player.current.hue}
 			size="small"
 			alt={player.current.title}
 			class="h-11 w-11 shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)] md:h-13 md:w-13"
 		/>
 	{:else}
 		<div
-			class="h-11 w-11 shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)] md:h-13 md:w-13"
-			style="background:{player.artGradient}"
+			class="h-11 w-11 shrink-0 rounded-lg bg-surface shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)] md:h-13 md:w-13"
 		></div>
 	{/if}
 	<div class="min-w-0">

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

@@ -2,7 +2,6 @@
 	import MediaCard from './MediaCard.svelte';
 	import PlaylistArt from './PlaylistArt.svelte';
 	import Cover from './Cover.svelte';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
 		id: string;
@@ -55,16 +54,9 @@
 >
 	{#snippet art(artClass)}
 		{#if coverSrc}
-			<Cover
-				trackId={id}
-				src={coverSrc}
-				hue={hueFor(id)}
-				size="large"
-				alt={title}
-				class={artClass}
-			/>
+			<Cover trackId={id} src={coverSrc} size="large" alt={title} class={artClass} />
 		{:else}
-			<PlaylistArt {trackIds} hue={hueFor(id)} class={artClass} />
+			<PlaylistArt {trackIds} class={artClass} />
 		{/if}
 	{/snippet}
 </MediaCard>

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

@@ -1,13 +1,10 @@
 <script lang="ts">
-	import { gradientForHue, hueFor } from '$lib/theme/color';
-
 	interface Props {
-		id: string;
 		name: string;
 		size?: number;
 	}
 
-	let { id, name, size = 108 }: Props = $props();
+	let { name, size = 108 }: Props = $props();
 
 	const initials = $derived(
 		name
@@ -21,8 +18,8 @@
 
 <div class="flex flex-col items-center gap-2.5 text-center" style="width:{size}px">
 	<div
-		class="relative grid shrink-0 place-items-center overflow-hidden rounded-full shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/artist:shadow-art-lg"
-		style="width:{size}px;height:{size}px;background:{gradientForHue(hueFor(id))}"
+		class="relative grid shrink-0 place-items-center overflow-hidden rounded-full bg-surface shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/artist:shadow-art-lg"
+		style="width:{size}px;height:{size}px"
 	>
 		<div
 			class="pointer-events-none absolute inset-0"

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+	import { previousPage } from '$lib/navigation.svelte';
+
+	interface Props {
+		href: string;
+		label: string;
+	}
+
+	let { href, label }: Props = $props();
+
+	const previous = $derived(previousPage());
+	const target = $derived(previous ?? { url: href, label });
+
+	function onclick(event: MouseEvent) {
+		if (!previous) return;
+		if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+			return;
+		event.preventDefault();
+		history.back();
+	}
+</script>
+
+<a
+	href={target.url}
+	{onclick}
+	class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
+>
+	<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
+		<ArrowLeft class="h-4 w-4" />
+	</span>
+	{target.label}
+</a>

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

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { gradientForHue } from '$lib/theme/color';
 	import { thumbnailSrc } from '$lib/thumbnails';
 
 	interface Props {
 		trackId: string | number;
-		hue: number;
 		size?: 'small' | 'medium' | 'large';
 		src?: string | null;
 		alt?: string;
@@ -16,7 +14,6 @@
 
 	let {
 		trackId,
-		hue,
 		size = 'medium',
 		src,
 		alt = '',
@@ -26,7 +23,6 @@
 	}: Props = $props();
 
 	let failed = $state(false);
-	let loaded = $state(false);
 
 	const imageSrc = $derived(
 		src ? (thumbnailSrc(src, size) ?? src) : `/api/tracks/${trackId}/cover?size=${size}`
@@ -35,16 +31,10 @@
 	$effect(() => {
 		imageSrc;
 		failed = false;
-		loaded = false;
 	});
 </script>
 
-<div
-	class="relative overflow-hidden {klass}"
-	style={loaded && !failed ? undefined : `background:${gradientForHue(hue)}`}
-	role="presentation"
-	{oncontextmenu}
->
+<div class="relative overflow-hidden bg-surface {klass}" role="presentation" {oncontextmenu}>
 	{#if !failed}
 		<img
 			src={imageSrc}
@@ -52,7 +42,6 @@
 			loading="lazy"
 			decoding="async"
 			fetchpriority="low"
-			onload={() => (loaded = true)}
 			onerror={() => (failed = true)}
 			class="h-full w-full object-cover"
 		/>

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

@@ -1,15 +1,13 @@
 <script lang="ts">
 	import Cover from './Cover.svelte';
-	import { gradientForHue, hueFor } from '$lib/theme/color';
 	import { mixItemKey, type MixItem } from '$lib/mixes';
 
 	interface Props {
 		items: MixItem[];
-		hue: number;
 		class?: string;
 	}
 
-	let { items, hue, class: klass = '' }: Props = $props();
+	let { items, class: klass = '' }: Props = $props();
 
 	const tiles = $derived(items.slice(0, 4));
 </script>
@@ -20,7 +18,6 @@
 			<Cover
 				trackId={item.trackId ?? item.videoId ?? ''}
 				src={item.thumbnailUrl}
-				hue={hueFor(mixItemKey(item))}
 				size="small"
 				class="h-full w-full"
 			/>
@@ -30,10 +27,9 @@
 	<Cover
 		trackId={tiles[0].trackId ?? tiles[0].videoId ?? ''}
 		src={tiles[0].thumbnailUrl}
-		hue={hueFor(mixItemKey(tiles[0]))}
 		size="medium"
 		class={klass}
 	/>
 {:else}
-	<div class={klass} style="background:{gradientForHue(hue)}"></div>
+	<div class="bg-surface {klass}"></div>
 {/if}

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Cover from './Cover.svelte';
-	import { gradientForHue, hueFor } from '$lib/theme/color';
-	import { mixItemKey, type Mix } from '$lib/mixes';
+	import type { Mix } from '$lib/mixes';
 
 	interface Props {
 		mix: Mix;
@@ -25,40 +24,40 @@
 
 <a
 	href="/mixes/{mix.id}"
-	class="group/tile animate-enter relative block overflow-hidden rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset hover:shadow-art-lg focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none {klass}"
-	style="animation-delay:{Math.min(index, 10) * 45}ms;background:{gradientForHue(hueFor(mix.id))}"
+	class="group/tile animate-enter relative block overflow-hidden rounded-art ring-1 ring-line transition duration-300 ease-out [clip-path:inset(0_round_var(--radius-art))] ring-inset focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none {klass}"
+	style="animation-delay:{Math.min(index, 10) * 45}ms"
 >
-{#if tiles.length > 0}
+	{#if tiles.length > 0}
+		<div class="absolute inset-0 flex transition duration-300 ease-out">
+			{#each tiles as item, i (i)}
+				<Cover
+					trackId={item.trackId ?? item.videoId ?? ''}
+					src={item.thumbnailUrl}
+					size="medium"
+					class="aspect-square h-full shrink-0"
+				/>
+			{/each}
+		</div>
+	{/if}
 	<div
-		class="absolute inset-0 flex transition duration-300 ease-out group-hover/tile:scale-[1.01]"
-	>
-		{#each tiles as item, i (i)}
-			<Cover
-				trackId={item.trackId ?? item.videoId ?? ''}
-				src={item.thumbnailUrl}
-				hue={hueFor(mixItemKey(item))}
-				size="medium"
-				class="aspect-square h-full shrink-0"
-			/>
-		{/each}
-	</div>
-{/if}
-<div
-	class="pointer-events-none absolute inset-0 bg-black/10 transition-colors duration-300 group-hover/tile:bg-black/20"
-></div>
+		class="pointer-events-none absolute inset-0 bg-linear-to-t from-scrim/85 via-scrim/65 to-scrim/40 {banner
+			? 'sm:bg-linear-to-r'
+			: ''}"
+	></div>
 	<div
-		class="group relative flex h-full flex-col justify-end p-3 sm:p-4 {banner
+		class="pointer-events-none absolute inset-0 bg-scrim/25 opacity-0 transition-opacity duration-300 group-hover/tile:opacity-100"
+	></div>
+	<div
+		class="relative flex h-full flex-col justify-end p-3 sm:p-4 {banner
 			? 'sm:flex-row sm:items-center sm:justify-between sm:gap-4'
 			: ''}"
 	>
 		<div class="min-w-0">
-			<div
-				class="truncate text-white {featured ? 'text-xl sm:text-2xl' : 'text-base'} group-hover:text-accent-soft transition-colors"
-			>
+			<div class="truncate text-on-art {featured ? 'text-xl sm:text-2xl' : 'text-base'}">
 				{mix.title}
 			</div>
 			{#if mix.subtitle}
-				<div class="mt-0.5 truncate text-xs text-muted sm:text-sm">{mix.subtitle}</div>
+				<div class="mt-0.5 truncate text-xs text-on-art/75 sm:text-sm">{mix.subtitle}</div>
 			{/if}
 		</div>
 	</div>

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

@@ -1,17 +1,15 @@
 <script lang="ts">
 	import Cover from './Cover.svelte';
-	import { gradientForHue, hueFor } from '$lib/theme/color';
 
 	interface Props {
 		playlistId?: string;
 		trackIds: (string | number)[];
-		hue: number;
 		size?: 'small' | 'medium' | 'large';
 		version?: string;
 		class?: string;
 	}
 
-	let { playlistId, trackIds, hue, size = 'medium', version, class: klass = '' }: Props = $props();
+	let { playlistId, trackIds, size = 'medium', version, class: klass = '' }: Props = $props();
 
 	let coverFailed = $state(false);
 
@@ -20,7 +18,7 @@
 </script>
 
 {#if playlistId && !coverFailed}
-	<div class="relative overflow-hidden {klass}" style="background:{gradientForHue(hue)}">
+	<div class="relative overflow-hidden bg-surface {klass}">
 		<img
 			src="/api/playlists/{playlistId}/cover?size={size}{version
 				? `&v=${encodeURIComponent(version)}`
@@ -34,11 +32,11 @@
 {:else if mosaic}
 	<div class="grid grid-cols-2 grid-rows-2 overflow-hidden {klass}">
 		{#each trackIds.slice(0, 4) as id (id)}
-			<Cover trackId={id} hue={hueFor(id)} size="small" class="h-full w-full" />
+			<Cover trackId={id} size="small" class="h-full w-full" />
 		{/each}
 	</div>
 {:else if single !== null}
-	<Cover trackId={single} hue={hueFor(single)} size="medium" class={klass} />
+	<Cover trackId={single} size="medium" class={klass} />
 {:else}
-	<div class={klass} style="background:{gradientForHue(hue)}"></div>
+	<div class="bg-surface {klass}"></div>
 {/if}

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import MediaCard from './MediaCard.svelte';
 	import PlaylistArt from './PlaylistArt.svelte';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
 		id: string;
@@ -17,6 +16,6 @@
 
 <MediaCard href="/playlists/{id}" title={name} subtitle={description} {index}>
 	{#snippet art(artClass)}
-		<PlaylistArt playlistId={id} {trackIds} hue={hueFor(id)} version={updatedAt} class={artClass} />
+		<PlaylistArt playlistId={id} {trackIds} version={updatedAt} class={artClass} />
 	{/snippet}
 </MediaCard>

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

@@ -18,9 +18,7 @@
 		{@render actions()}
 	</div>
 {:else}
-	<h2
-		class="mb-3 font-display font-medium text-fg sm:mb-4 sm:text-xl {klass}"
-	>
+	<h2 class="mb-3 font-display font-medium text-fg sm:mb-4 sm:text-xl {klass}">
 		{title}
 	</h2>
 {/if}

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

@@ -9,7 +9,6 @@
 		artist?: string | null;
 		coverSrc?: string | null;
 		coverSize?: string;
-		hue: number;
 		explicit?: boolean;
 		titleClass?: string;
 		onClick: () => void;
@@ -23,7 +22,6 @@
 		artist,
 		coverSrc,
 		coverSize = 'h-[42px] w-[42px]',
-		hue,
 		explicit = false,
 		titleClass = '',
 		onClick,
@@ -36,7 +34,6 @@
 	<Cover
 		{trackId}
 		src={coverSrc}
-		{hue}
 		size="small"
 		alt={title}
 		class="{coverSize} shrink-0 rounded-control"

web-player/src/lib/config.ts

@@ -7,6 +7,7 @@ export const ALBUM_TRACKS_PAGE_SIZE = 200;
 export const ALBUM_EARLIEST_YEAR = 1877;
 export const LIBRARY_PICKER_PAGE_SIZE = 50;
 export const EXPLORE_ALBUMS_PAGE_SIZE = 10;
+export const EXPLORE_ALBUMS_LIMIT = 18;
 export const HOME_LATEST_PAGE_SIZE = 10;
 export const HOME_ALBUMS_LIMIT = 12;
 export const HOME_MIXES_BENTO = 5;

web-player/src/lib/navigation.svelte.ts

@@ -0,0 +1,57 @@
+import { afterNavigate } from '$app/navigation';
+
+const HISTORY_INDEX = 'sveltekit:history';
+
+const LABELS: [RegExp, string][] = [
+	[/^\/$/, 'Volver al inicio'],
+	[/^\/explore\/?$/, 'Volver a explorar'],
+	[/^\/playlists\/[^/]+/, 'Volver a la lista'],
+	[/^\/playlists\/?$/, 'Volver a tus listas'],
+	[/^\/albums\/youtube\/[^/]+/, 'Volver al álbum'],
+	[/^\/albums\/[^/]+/, 'Volver al álbum'],
+	[/^\/albums\/?$/, 'Volver a tus álbumes'],
+	[/^\/library\/?$/, 'Volver a tus canciones'],
+	[/^\/upload\/?$/, 'Volver a subir música'],
+	[/^\/mixes\/[^/]+/, 'Volver a la mezcla']
+];
+
+export interface PageRef {
+	url: string;
+	label: string;
+}
+
+const visited = new Map<number, PageRef>();
+let index = $state(-1);
+
+function labelFor(pathname: string): string | null {
+	for (const [pattern, label] of LABELS) {
+		if (pattern.test(pathname)) return label;
+	}
+	return null;
+}
+
+function historyIndex(): number | null {
+	const value = history.state?.[HISTORY_INDEX];
+	return typeof value === 'number' ? value : null;
+}
+
+export function trackNavigation() {
+	afterNavigate((nav) => {
+		const at = historyIndex();
+		if (at === null) return;
+		const url = nav.to?.url;
+		const label = url ? labelFor(url.pathname) : null;
+		if (url && label) visited.set(at, { url: url.pathname + url.search, label });
+		else visited.delete(at);
+		index = at;
+	});
+}
+
+export function previousPage(): PageRef | null {
+	return visited.get(index - 1) ?? null;
+}
+
+export function isSectionActive(href: string, pathname: string, section?: string | null): boolean {
+	if (section !== undefined) return section === href;
+	return href === '/' ? pathname === '/' : pathname.startsWith(href);
+}

web-player/src/lib/player/player.svelte.ts

@@ -1,5 +1,5 @@
 import { browser } from '$app/environment';
-import { HUES, accentForHue, gradientForHue, hueFor } from '$lib/theme/color';
+import { DEFAULT_ACCENT } from '$lib/theme/color';
 import { extractAccent, type Accent } from '$lib/theme/palette';
 import { thumbnailSrc } from '$lib/thumbnails';
 
@@ -10,7 +10,6 @@ export interface PlayerTrack {
 	title: string;
 	artist: string;
 	duration: number;
-	hue: number;
 	source: TrackSourceKind;
 	coverUrl?: string;
 	explicit?: boolean;
@@ -91,7 +90,6 @@ const EMPTY: PlayerTrack = {
 	title: '',
 	artist: '',
 	duration: 0,
-	hue: HUES[0],
 	source: 'local'
 };
 
@@ -101,7 +99,6 @@ function toTrack(item: QueueItem): PlayerTrack {
 		title: item.title,
 		artist: item.artist ?? '',
 		duration: 0,
-		hue: hueFor(item.id),
 		explicit: item.explicit,
 		source: item.source ?? 'local',
 		coverUrl: item.coverUrl
@@ -120,7 +117,6 @@ class PlayerState {
 	playlists = $state<Playlist[]>([]);
 
 	accentColor = $state<string | null>(null);
-	gradientColor = $state<string | null>(null);
 
 	#audio: HTMLAudioElement | null = null;
 	#loadToken = 0;
@@ -129,8 +125,7 @@ class PlayerState {
 	#rafId: number | null = null;
 
 	current = $derived(this.tracks.find((t) => t.id === this.currentId) ?? EMPTY);
-	accent = $derived(this.accentColor ?? accentForHue(this.current.hue));
-	artGradient = $derived(this.gradientColor ?? gradientForHue(this.current.hue));
+	accent = $derived(this.accentColor ?? DEFAULT_ACCENT);
 	progressPercent = $derived(
 		this.current.duration > 0 ? Math.min(100, (this.progress / this.current.duration) * 100) : 0
 	);
@@ -250,7 +245,6 @@ class PlayerState {
 		const cached = this.#accentCache.get(key);
 		if (cached) {
 			this.accentColor = cached.accent;
-			this.gradientColor = cached.gradient;
 			return;
 		}
 		const result = await extractAccent(
@@ -260,10 +254,8 @@ class PlayerState {
 		if (result) {
 			this.#accentCache.set(key, result);
 			this.accentColor = result.accent;
-			this.gradientColor = result.gradient;
 		} else {
 			this.accentColor = null;
-			this.gradientColor = null;
 		}
 	}
 
@@ -335,14 +327,6 @@ class PlayerState {
 			.filter((t): t is PlayerTrack => Boolean(t));
 	}
 
-	mosaicFor(ids: (string | number)[]): string[] {
-		const gradients = this.playlistTracks(ids)
-			.slice(0, 4)
-			.map((t) => gradientForHue(t.hue));
-		while (gradients.length < 4) gradients.push('var(--mf-surface)');
-		return gradients;
-	}
-
 	playQueue(list: QueueItem[], startIndex = 0) {
 		if (list.length === 0) return;
 		this.tracks = list.map(toTrack);

web-player/src/lib/theme/color.ts

@@ -1,20 +1,5 @@
-export const HUES = [145, 330, 40, 152, 300, 200, 10, 120, 280];
-
 export const ACCENT_LIGHTNESS = 60;
 export const ACCENT_CHROMA = 0.17;
 export const ACCENT_HUE = 145;
 
-export function hueFor(id: string | number): number {
-	const text = String(id);
-	let hash = 0;
-	for (let i = 0; i < text.length; i++) hash = (hash * 31 + text.charCodeAt(i)) >>> 0;
-	return HUES[hash % HUES.length];
-}
-
-export function accentForHue(hue: number): string {
-	return `oklch(${ACCENT_LIGHTNESS}% ${ACCENT_CHROMA} ${hue})`;
-}
-
-export function gradientForHue(hue: number): string {
-	return `linear-gradient(135deg, oklch(70% 0.15 ${hue}), oklch(36% 0.13 ${hue + 28}))`;
-}
+export const DEFAULT_ACCENT = `oklch(${ACCENT_LIGHTNESS}% ${ACCENT_CHROMA} ${ACCENT_HUE})`;

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

@@ -18,7 +18,7 @@
 </script>
 
 <svelte:head>
-	<title>Álbumes · Musify</title>
+	<title>Álbumes</title>
 	<meta name="description" content="Los álbumes que has publicado con tu música subida." />
 </svelte:head>
 

web-player/src/routes/(app)/albums/[id]/+page.server.ts

@@ -38,7 +38,9 @@ export const load: PageServerLoad = async ({ params, locals, url, fetch }) => {
 		(track) => track.source === 'Local' && !inAlbum.has(track.id)
 	);
 
-	return { album, tracks, library, isOwner: Number(album.ownerUserId) === Number(user.sub) };
+	const isOwner = Number(album.ownerUserId) === Number(user.sub);
+
+	return { album, tracks, library, isOwner, section: isOwner ? '/albums' : null };
 };
 
 export const actions: Actions = {

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

@@ -31,13 +31,12 @@
 </script>
 
 <svelte:head>
-	<title>{album.title} · Musify</title>
-	<meta name="description" content="Álbum {album.title} en Musify." />
+	<title>{album.title}</title>
+	<meta name="description" content="Álbum {album.title}." />
 </svelte:head>
 
 <Page>
 	<AlbumHeader
-		id={album.id}
 		title={album.title}
 		description={album.description ?? undefined}
 		releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}

web-player/src/routes/(app)/albums/[id]/components/AlbumHeader.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import Play from '@lucide/svelte/icons/play';
 	import Pause from '@lucide/svelte/icons/pause';
 	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';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
-		id: string;
 		title: string;
 		description?: string;
 		releaseYear?: number;
@@ -22,7 +20,6 @@
 	}
 
 	let {
-		id,
 		title,
 		description,
 		releaseYear,
@@ -44,20 +41,14 @@
 	);
 </script>
 
-<a
-	href="/albums"
-	class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
->
-	<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
-		<ArrowLeft class="h-4 w-4" />
-	</span>
-	Volver a tus álbumes
-</a>
+<BackLink
+	href={isOwner ? '/albums' : '/'}
+	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">
 	<PlaylistArt
 		{trackIds}
-		hue={hueFor(id)}
 		size="large"
 		class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
 	/>

web-player/src/routes/(app)/albums/[id]/components/AlbumTrackTable.svelte

@@ -7,7 +7,6 @@
 		toQueueItems,
 		type ApiTrackLike
 	} from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime } from '$lib/format';
 	import IconButton from '$lib/components/ui/IconButton.svelte';
 	import TrackTable from '$lib/components/ui/TrackTable.svelte';
@@ -43,7 +42,6 @@
 				trackId={track.id}
 				title={track.title}
 				artist={track.artist}
-				hue={hueFor(track.id)}
 				explicit={track.isExplicit}
 				onClick={() => playFrom(i)}
 			/>

web-player/src/routes/(app)/albums/[id]/components/LibraryPicker.svelte

@@ -2,7 +2,6 @@
 	import { enhance } from '$app/forms';
 	import Plus from '@lucide/svelte/icons/plus';
 	import { player, toQueueItems, type ApiTrackLike } from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime } from '$lib/format';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 	import IconButton from '$lib/components/ui/IconButton.svelte';
@@ -34,7 +33,6 @@
 					trackId={track.id}
 					title={track.title}
 					artist={track.artist}
-					hue={hueFor(track.id)}
 					explicit={track.isExplicit}
 					onClick={() => playFrom(i)}
 				>

web-player/src/routes/(app)/albums/youtube/[albumId]/+page.server.ts

@@ -18,7 +18,7 @@ export const load: PageServerLoad = async ({ params, locals, url, fetch }) => {
 
 	const album = unwrapOrError(albumRes, 'No se pudo cargar el álbum de YouTube Music.', 404);
 
-	return { album, playlists: playlistsRes.data?.items ?? [] };
+	return { album, playlists: playlistsRes.data?.items ?? [], section: null };
 };
 
 export const actions: Actions = {

web-player/src/routes/(app)/albums/youtube/[albumId]/+page.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import Play from '@lucide/svelte/icons/play';
 	import Pause from '@lucide/svelte/icons/pause';
 	import { player, type QueueItem } from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime } from '$lib/format';
 	import Page from '$lib/components/ui/Page.svelte';
+	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import Cover from '$lib/components/ui/Cover.svelte';
 	import Alert from '$lib/components/ui/Alert.svelte';
@@ -73,26 +72,17 @@
 </script>
 
 <svelte:head>
-	<title>{album.title} · Musify</title>
-	<meta name="description" content="Álbum {album.title} de {album.artist} en YouTube Music." />
+	<title>{album.title}</title>
+	<meta name="description" content="Álbum {album.title} de {album.artist}," />
 </svelte:head>
 
 <Page>
-	<a
-		href="/explore"
-		class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
-	>
-		<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
-			<ArrowLeft class="h-4 w-4" />
-		</span>
-		Volver a explorar
-	</a>
+	<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">
 		<Cover
 			trackId={album.albumId}
 			src={album.thumbnailUrl}
-			hue={hueFor(album.albumId)}
 			size="large"
 			alt={album.title}
 			class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
@@ -100,7 +90,7 @@
 		/>
 		<div class="min-w-0 flex-1">
 			<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">
-				{album.isSingle ? 'Single' : album.isEp ? 'EP' : 'Álbum'} · YouTube Music
+				{album.isSingle ? 'Single' : album.isEp ? 'EP' : 'Álbum'}
 			</p>
 			<h1
 				class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
@@ -154,7 +144,6 @@
 					title={track.title}
 					artist={album.artist}
 					coverSrc={album.thumbnailUrl}
-					hue={hueFor(track.videoId)}
 					explicit={track.isExplicit}
 					onClick={() => playFrom(i)}
 				/>

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

@@ -19,8 +19,7 @@
 	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_PAGE_SIZE, SEARCH_DEBOUNCE_MS } from '$lib/config';
-	import { hueFor } from '$lib/theme/color';
+	import { EXPLORE_ALBUMS_LIMIT, EXPLORE_PAGE_SIZE, SEARCH_DEBOUNCE_MS } from '$lib/config';
 	import type { YouTubeSong } from '$lib/types';
 	import TrackContextMenu, {
 		contextMenuStateFor,
@@ -113,10 +112,12 @@
 	type YouTubeAlbum = (typeof data.youtubeAlbums)[number];
 	type AlbumEntry = { kind: 'local'; album: LocalAlbum } | { kind: 'youtube'; album: YouTubeAlbum };
 
-	const albumEntries = $derived<AlbumEntry[]>([
-		...albums.map((album) => ({ kind: 'local' as const, album })),
-		...youtubeAlbums.map((album) => ({ kind: 'youtube' as const, album }))
-	]);
+	const albumEntries = $derived<AlbumEntry[]>(
+		[
+			...albums.map((album) => ({ kind: 'local' as const, album })),
+			...youtubeAlbums.map((album) => ({ kind: 'youtube' as const, album }))
+		].slice(0, EXPLORE_ALBUMS_LIMIT)
+	);
 
 	const hasAlbums = $derived(albumEntries.length > 0);
 	const hasUsers = $derived(users.length > 0);
@@ -215,7 +216,7 @@
 </script>
 
 <svelte:head>
-	<title>Buscar · Musify</title>
+	<title>Buscar</title>
 	<meta name="description" content="Busca canciones, álbumes y usuarios en Musify." />
 </svelte:head>
 
@@ -261,7 +262,6 @@
 								<div class="relative">
 									<PlaylistArt
 										trackIds={entry.album.coverTrackIds}
-										hue={hueFor(entry.album.id)}
 										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>
@@ -285,7 +285,6 @@
 									<Cover
 										trackId={entry.album.albumId}
 										src={entry.album.thumbnailUrl}
-										hue={hueFor(entry.album.albumId)}
 										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"
@@ -316,7 +315,7 @@
 						class="group/artist animate-enter shrink-0"
 						style="animation-delay:{Math.min(i, 10) * 45}ms"
 					>
-						<ArtistAvatar id={u.id} name={u.name} size={96} />
+						<ArtistAvatar name={u.name} size={96} />
 						<div class="mt-1 w-24 truncate text-center text-xs text-fg-3">@{u.handle}</div>
 					</div>
 				{/each}
@@ -339,7 +338,6 @@
 							<Cover
 								trackId={targetId(item)}
 								src={targetCoverSrc(item)}
-								hue={hueFor(targetId(item))}
 								size="small"
 								alt={targetTitle(item)}
 								class="h-11 w-11 shrink-0 rounded-control shadow-art ring-1 ring-line ring-inset"

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

@@ -4,7 +4,6 @@
 	import X from '@lucide/svelte/icons/x';
 	import Music from '@lucide/svelte/icons/music';
 	import { player, toQueueItems } from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime, fmtDate } from '$lib/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import PageHeader from '$lib/components/ui/PageHeader.svelte';
@@ -28,7 +27,7 @@
 </script>
 
 <svelte:head>
-	<title>Tus canciones subidas · Musify</title>
+	<title>Tus canciones subidas</title>
 	<meta name="description" content="Todas tus canciones subidas a Musify." />
 </svelte:head>
 
@@ -65,12 +64,7 @@
 						playing={player.playing}
 						onToggle={() => togglePlay(i)}
 					/>
-					<TrackTitleCell
-						trackId={track.id}
-						title={track.title}
-						hue={hueFor(track.id)}
-						onClick={() => togglePlay(i)}
-					/>
+					<TrackTitleCell trackId={track.id} title={track.title} onClick={() => togglePlay(i)} />
 					<TrackMeta class="hidden sm:block">{fmtDate(track.createdAt)}</TrackMeta>
 					<TrackMeta class="hidden sm:block">{Number(track.listensCount)}</TrackMeta>
 					<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>

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

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import Play from '@lucide/svelte/icons/play';
 	import Pause from '@lucide/svelte/icons/pause';
 	import Shuffle from '@lucide/svelte/icons/shuffle';
 	import { player } from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime } from '$lib/format';
 	import { shuffle } from '$lib/collections';
 	import Page from '$lib/components/ui/Page.svelte';
+	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import Alert from '$lib/components/ui/Alert.svelte';
 	import MixArt from '$lib/components/ui/MixArt.svelte';
@@ -61,27 +60,15 @@
 </script>
 
 <svelte:head>
-	<title>{mix.title} · Musify</title>
+	<title>{mix.title}</title>
 	<meta name="description" content="Mezcla {mix.title}, hecha para ti." />
 </svelte:head>
 
 <Page>
-	<a
-		href="/"
-		class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
-	>
-		<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
-			<ArrowLeft class="h-4 w-4" />
-		</span>
-		Volver al inicio
-	</a>
+	<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}
-			hue={hueFor(mix.id)}
-			class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
-		/>
+		<MixArt {items} class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44" />
 		<div class="min-w-0 flex-1">
 			<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Mezcla</p>
 			<h1
@@ -133,7 +120,6 @@
 					title={targetTitle(targets[i])}
 					artist={targetArtist(targets[i])}
 					coverSrc={targetCoverSrc(targets[i])}
-					hue={hueFor(mixItemKey(item))}
 					explicit={item.isExplicit}
 					onClick={() => playFrom(i)}
 				/>

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

@@ -41,7 +41,7 @@
 </script>
 
 <svelte:head>
-	<title>Mis listas · Musify</title>
+	<title>Mis listas</title>
 	<meta name="description" content="Mis listas en Musify." />
 </svelte:head>
 

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

@@ -36,7 +36,7 @@
 </script>
 
 <svelte:head>
-	<title>{playlist.name} · Musify</title>
+	<title>{playlist.name}</title>
 	<meta name="description" content="Playlist {playlist.name} en Musify." />
 </svelte:head>
 

web-player/src/routes/(app)/playlists/[id]/components/PlaylistHeader.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import Play from '@lucide/svelte/icons/play';
 	import Pause from '@lucide/svelte/icons/pause';
 	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';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
 		id: string;
@@ -24,21 +23,12 @@
 		$props();
 </script>
 
-<a
-	href="/playlists"
-	class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
->
-	<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
-		<ArrowLeft class="h-4 w-4" />
-	</span>
-	Volver a tus listas
-</a>
+<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">
 	<PlaylistArt
 		playlistId={id}
 		{trackIds}
-		hue={hueFor(id)}
 		size="large"
 		version={updatedAt}
 		class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"

web-player/src/routes/(app)/playlists/[id]/components/PlaylistTrackTable.svelte

@@ -9,7 +9,6 @@
 		youTubeThumbnailUrl,
 		type ApiTrackLike
 	} from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime, fmtDate } from '$lib/format';
 	import Badge from '$lib/components/ui/Badge.svelte';
 	import IconButton from '$lib/components/ui/IconButton.svelte';
@@ -48,7 +47,6 @@
 				coverSrc={isPendingYouTubeTrack(track) && track.externalId
 					? youTubeThumbnailUrl(track.externalId)
 					: undefined}
-				hue={hueFor(track.id)}
 				explicit={track.isExplicit}
 				onClick={() => playFrom(i)}
 			>

web-player/src/routes/(app)/playlists/[id]/components/SuggestionsTable.svelte

@@ -7,7 +7,6 @@
 		type ApiTrackLike,
 		type QueueItem
 	} from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime } from '$lib/format';
 	import type { YouTubeSong } from '$lib/types';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
@@ -92,7 +91,6 @@
 					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}
-					hue={hueFor(idFor(item))}
 					explicit={item.kind === 'youtube' && item.song.isExplicit}
 					onClick={() => playFrom(i)}
 				>

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

@@ -102,7 +102,7 @@
 </script>
 
 <svelte:head>
-	<title>Subir música · Musify</title>
+	<title>Subir música</title>
 	<meta name="description" content="Sube tus canciones a Musify: portada, audio y título." />
 </svelte:head>
 

web-player/src/routes/+layout.svelte

@@ -10,13 +10,28 @@
 	import MobileNav from '$lib/components/MobileNav.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import { ACCENT_LIGHTNESS, ACCENT_CHROMA, ACCENT_HUE } from '$lib/theme/color';
+	import { trackNavigation } from '$lib/navigation.svelte';
 	import { page } from '$app/state';
 
 	let { children, data } = $props();
 
+	trackNavigation();
+
 	const isAuthPage = $derived(page.url.pathname === '/login');
 	const hasTrack = $derived(player.currentId !== null);
 
+	function isTypingTarget(target: EventTarget | null): boolean {
+		if (!(target instanceof HTMLElement)) return false;
+		if (target.isContentEditable) return true;
+		return ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'].includes(target.tagName);
+	}
+
+	function onWindowKeydown(event: KeyboardEvent) {
+		if (event.code !== 'Space' || isTypingTarget(event.target)) return;
+		event.preventDefault();
+		player.toggle();
+	}
+
 	$effect(() => {
 		document.documentElement.classList.toggle('home', page.url.pathname === '/');
 	});
@@ -59,6 +74,8 @@
 	});
 </script>
 
+<svelte:window onkeydown={onWindowKeydown} />
+
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
 
 {#if isAuthPage || !data.user}

web-player/src/routes/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Music from '@lucide/svelte/icons/music';
 	import ArrowRight from '@lucide/svelte/icons/arrow-right';
 	import { player, toQueueItems, type QueueItem } from '$lib/player/player.svelte';
 	import {
@@ -13,14 +12,12 @@
 		targetTitle,
 		type TrackTarget
 	} from '$lib/tracks';
-	import { hueFor } from '$lib/theme/color';
 	import Cover from '$lib/components/ui/Cover.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 CoverBadge from '$lib/components/ui/CoverBadge.svelte';
 	import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 	import TrackContextMenu, {
@@ -30,6 +27,8 @@
 	import type { YouTubeSong } from '$lib/types';
 	import { appendUnique } from '$lib/collections';
 	import { HOME_LATEST_PAGE_SIZE } from '$lib/config';
+	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import Music from '@lucide/svelte/icons/music';
 
 	let { data } = $props();
 
@@ -138,189 +137,204 @@
 	</div>
 </section>
 
-{#if recentlyPlayed.length > 0}
-	<section class="page-x pt-6 sm:pt-8">
-		<div
-			class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"
-		>
-			{#each recentlyPlayed as track, i (track.id)}
-				<button
-					type="button"
-					onclick={() => playRecent(i)}
-					oncontextmenu={(e) => openContextMenu(e, targetForQueueItem(track))}
-					aria-label="{player.current.id === track.id && player.playing
-						? 'Pausar'
-						: 'Reproducir'} {track.title}"
-					class="group/row flex min-w-0 items-center gap-3 rounded-control bg-surface p-2.5 text-left transition duration-200"
-				>
-					<Cover
-						trackId={track.id}
-						src={track.coverUrl}
-						hue={hueFor(track.id)}
-						size="small"
-						alt={track.title}
-						class="h-14 w-14 shrink-0 rounded-control shadow-art transition duration-200"
-					>
-						{#if player.current.id === track.id}
-							<NowPlaying paused={!player.playing} />
-						{/if}
-					</Cover>
-					<div class="min-w-0">
-						<div class="flex min-w-0 items-center gap-1.5">
-							{#if track.explicit}
-								<ExplicitBadge />
-							{/if}
-							<span class="truncate text-fg transition-colors group-hover/row:text-accent-soft">
-								{track.title}
-							</span>
-						</div>
-						{#if track.artist}
-							<div class="truncate text-sm text-muted">{track.artist}</div>
-						{/if}
-					</div>
-				</button>
-			{/each}
-		</div>
-	</section>
-{/if}
-
-{#if albums.length > 0}
-	<section class="page-x pt-10">
-		<SectionHeading title="Álbumes recién escuchados">
-			{#snippet actions()}
-				<a href="/albums" class="text-sm text-fg-3 transition hover:text-accent-soft">Ver todos</a>
-			{/snippet}
-		</SectionHeading>
-		<Rail>
-			{#each albums as album, i (album.id)}
-				<a
-					href="/albums/{album.id}"
-					class="group/card animate-enter block w-[168px] shrink-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"
-				>
-					<div class="relative">
-						<PlaylistArt
-							trackIds={album.coverTrackIds}
-							hue={hueFor(album.id)}
-							class="h-[168px] w-[168px] rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
-						/>
-						<CoverBadge label="Álbum" />
-					</div>
-					<div class="mt-2.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-3">{albumCaption(album)}</div>
-				</a>
-			{/each}
-		</Rail>
-	</section>
-{/if}
-
-{#if mixes.length > 0}
-	<section class="page-x pt-10">
-		<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 class="page-x pt-10">
-		<Rail>
-			{#each playlists as playlist, i (playlist.id)}
-				<a
-					href="/playlists/{playlist.id}"
-					class="group/card animate-enter block w-36 shrink-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"
-				>
-					<PlaylistArt
-						playlistId={playlist.id}
-						trackIds={playlist.coverTrackIds}
-						hue={hueFor(playlist.id)}
-						version={playlist.updatedAt}
-						class="h-36 w-36 rounded-art"
-					/>
-					<div class="mt-2.5 truncate text-fg transition-colors group-hover/card:text-accent-soft">
-						{playlist.name}
-					</div>
-					<div class="mt-0.5 truncate text-sm text-muted">{playlist.description}</div>
-				</a>
-			{/each}
-			<a
-				href="/playlists"
-				class="grid h-36 w-36 shrink-0 place-items-center text-fg-3 transition-colors hover:text-accent-soft"
+<div class="flex flex-col gap-10 page-x py-4 sm:py-6">
+	{#if recentlyPlayed.length > 0}
+		<section>
+			<SectionHeading title="Recientemente reproducidas" />
+			<div
+				class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"
 			>
-				<div class="flex flex-col items-center gap-2">
-					<span class="grid h-8 w-8 place-items-center">
-						<ArrowRight class="h-4 w-4" />
-					</span>
-					Ver todas
-				</div>
-			</a>
-		</Rail>
-	</section>
-{/if}
-
-{#if newTargets.length > 0}
-	<section class="page-x pt-10">
-		<SectionHeading title="Canciones nuevas" />
-		<Rail>
-			{#each newTargets as target, i (targetId(target))}
-				<button
-					type="button"
-					onclick={() => playNew(i)}
-					oncontextmenu={(e) => openContextMenu(e, target)}
-					aria-label="Reproducir {targetTitle(target)}"
-					class="group/card animate-enter block w-[148px] 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="relative h-[198px] w-[148px]">
+				{#each recentlyPlayed as track, i (track.id)}
+					<button
+						type="button"
+						onclick={() => playRecent(i)}
+						oncontextmenu={(e) => openContextMenu(e, targetForQueueItem(track))}
+						aria-label="{player.current.id === track.id && player.playing
+							? 'Pausar'
+							: 'Reproducir'} {track.title}"
+						class="group/row flex min-w-0 items-center gap-3 rounded-control bg-surface p-2.5 text-left transition duration-200"
+					>
 						<Cover
-							trackId={targetId(target)}
-							src={targetCoverSrc(target)}
-							hue={hueFor(targetId(target))}
-							size="medium"
-							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"
+							trackId={track.id}
+							src={track.coverUrl}
+							size="small"
+							alt={track.title}
+							class="h-14 w-14 shrink-0 rounded-control shadow-art transition duration-200"
 						>
-							{#if isTargetCurrent(target)}
+							{#if player.current.id === track.id}
 								<NowPlaying paused={!player.playing} />
 							{/if}
 						</Cover>
-						<CoverBadge label="Nuevo" />
-					</div>
-					<div class="mt-2.5 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)}
-						</span>
-					</div>
-					{#if targetArtist(target)}
-						<div class="mt-0.5 truncate text-sm text-fg-3">{targetArtist(target)}</div>
-					{/if}
-				</button>
-			{/each}
-		</Rail>
-	</section>
-{/if}
+						<div class="min-w-0">
+							<div class="flex min-w-0 items-center gap-1.5">
+								{#if track.explicit}
+									<ExplicitBadge />
+								{/if}
+								<span class="truncate text-fg transition-colors group-hover/row:text-accent-soft">
+									{track.title}
+								</span>
+							</div>
+							{#if track.artist}
+								<div class="truncate text-sm text-muted">{track.artist}</div>
+							{/if}
+						</div>
+					</button>
+				{/each}
+			</div>
+		</section>
+	{/if}
 
-<!---	
+	{#if albums.length > 0}
+		<section>
+			<SectionHeading title="Álbumes recientes" />
+			<Rail>
+				{#each albums as album, i (album.id)}
+					<a
+						href={album.youTubeAlbumId
+							? `/albums/youtube/${album.youTubeAlbumId}`
+							: `/albums/${album.id}`}
+						class="group/card animate-enter block w-42 shrink-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"
+					>
+						<div class="relative">
+							{#if album.thumbnailUrl}
+								<Cover
+									trackId={album.id}
+									src={album.thumbnailUrl}
+									size="large"
+									alt={album.title}
+									class="h-52 w-42 rounded-art shadow-art ring-line transition duration-300 ease-out"
+								/>
+							{:else}
+								<PlaylistArt
+									trackIds={album.coverTrackIds}
+									class="h-56 w-48 rounded-art shadow-art ring-line transition duration-300 ease-out"
+								/>
+							{/if}
+						</div>
+						<div class="mt-2.5 text-fg transition-colors group-hover/card:text-accent-soft">
+							{album.title}
+						</div>
+						<div class="mt-0.5 text-sm text-fg-3">{albumCaption(album)}</div>
+					</a>
+				{/each}
+			</Rail>
+		</section>
+	{/if}
+
+	{#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>
+				{#each playlists as playlist, i (playlist.id)}
+					<a
+						href="/playlists/{playlist.id}"
+						class="group/card animate-enter block w-38 shrink-0 rounded-art"
+						style="animation-delay:{Math.min(i, 10) * 45}ms"
+					>
+						<PlaylistArt
+							playlistId={playlist.id}
+							trackIds={playlist.coverTrackIds}
+							version={playlist.updatedAt}
+							class="h-38 w-38 rounded-art"
+						/>
+						<div
+							class="mt-2.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-muted">{playlist.description}</div>
+						{/if}
+					</a>
+				{/each}
+				<a
+					href="/playlists"
+					class="grid h-36 w-36 shrink-0 place-items-center text-fg-3 transition-colors hover:text-accent-soft"
+				>
+					<div class="flex flex-col items-center gap-2">
+						<span class="grid h-8 w-8 place-items-center">
+							<ArrowRight class="h-4 w-4" />
+						</span>
+						Ver todas
+					</div>
+				</a>
+			</Rail>
+		</section>
+	{/if}
+
+	{#if newTargets.length > 0}
+		<section>
+			<SectionHeading title="Canciones nuevas" />
+			<Rail>
+				{#each newTargets as target, i (targetId(target))}
+					<button
+						type="button"
+						onclick={() => playNew(i)}
+						oncontextmenu={(e) => openContextMenu(e, target)}
+						aria-label="Reproducir {targetTitle(target)}"
+						class="group/card animate-enter block w-[148px] 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="relative h-[198px] w-[148px]">
+							<Cover
+								trackId={targetId(target)}
+								src={targetCoverSrc(target)}
+								size="medium"
+								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"
+							>
+								{#if isTargetCurrent(target)}
+									<NowPlaying paused={!player.playing} />
+								{/if}
+							</Cover>
+							<CoverBadge label="Nuevo" />
+						</div>
+						<div class="mt-2.5 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)}
+							</span>
+						</div>
+						{#if targetArtist(target)}
+							<div class="mt-0.5 truncate text-sm text-fg-3">{targetArtist(target)}</div>
+						{/if}
+					</button>
+				{/each}
+			</Rail>
+		</section>
+	{/if}
+	{#if recentlyPlayed.length === 0 && albums.length === 0 && mixes.length === 0 && playlists.length === 0 && newTargets.length === 0}
+		<EmptyState icon={Music} title="Todavía no hay música" description="Sube tu música o explora nuevas canciones, álbumes y listas de reproducción." />
+	{/if}
+</div>
+
+<!---
 <section class="page-x pt-10 pb-16">
 	{#if recTargets.length > 0}
 		<Rail>
@@ -337,7 +351,6 @@
 						<Cover
 							trackId={targetId(target)}
 							src={targetCoverSrc(target)}
-							hue={hueFor(targetId(target))}
 							size="medium"
 							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"

web-player/src/routes/layout.css

@@ -37,10 +37,10 @@
 }
 
 @utility page-x {
-	padding-inline: --spacing(6);
+	padding-inline: --spacing(4);
 
 	@media (width >= 40rem) {
-		padding-inline: --spacing(10);
+		padding-inline: --spacing(8);
 	}
 }
 

web-player/src/routes/login/+page.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <svelte:head>
-	<title>Iniciar sesión · Musify</title>
+	<title>Iniciar sesión</title>
 	<meta name="description" content="Inicia sesión o crea una cuenta en Musify." />
 </svelte:head>