Changes

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

@@ -14,7 +14,6 @@
 	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 CoverBadge from '$lib/components/ui/CoverBadge.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';
@@ -223,7 +222,7 @@
 <Page>
 	<PageHeader title="Buscar" subtitle="Encuentra canciones, álbumes y personas." />
 
-	<div class="mt-8">
+	<div class="mt-6">
 		<Input
 			type="search"
 			icon={Search}
@@ -246,8 +245,7 @@
 	{/if}
 
 	{#if hasAlbums}
-		<div class="mt-10">
-			<SectionHeading title="Álbumes" />
+		<div class="mt-8">
 			<MediaGrid as="ul" min="168px" minMobile="150px">
 				{#each albumEntries as entry, i (entry.kind === 'local' ? entry.album.id : entry.album.albumId)}
 					<li>
@@ -264,9 +262,8 @@
 									<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:-translate-y-1 group-hover/card:shadow-art-lg"
+										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"
 									/>
-									<CoverBadge label="Álbum" />
 								</div>
 								<div
 									class="mt-2.5 truncate text-fg transition-colors group-hover/card:text-accent-soft"
@@ -291,9 +288,8 @@
 										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:-translate-y-1 group-hover/card:shadow-art-lg"
+										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"
 									/>
-									<CoverBadge label="Álbum" />
 								</div>
 								<div
 									class="mt-2.5 truncate text-fg transition-colors group-hover/card:text-accent-soft"
@@ -312,7 +308,7 @@
 	{/if}
 
 	{#if hasUsers}
-		<div class="mt-10">
+		<div class="mt-8">
 			<SectionHeading title="Usuarios" />
 			<Rail>
 				{#each users as u, i (u.id)}
@@ -328,8 +324,7 @@
 		</div>
 	{/if}
 
-	<div class="mt-10">
-		<SectionHeading title="Canciones" />
+	<div class="mt-6">
 		{#if songRows.length > 0}
 			<ul class="flex flex-col gap-1">
 				{#each songRows as { target: item, seconds }, i (targetId(item))}
@@ -363,7 +358,7 @@
 									</span>
 								</div>
 								{#if targetArtist(item)}
-									<div class="truncate text-sm text-fg-3">{targetArtist(item)}</div>
+									<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>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '@fontsource-variable/inter/index.css';
+	import '@fontsource-variable/sora/index.css';
 	import '$lib/theme/theme.css';
 	import './layout.css';
 	import favicon from '$lib/assets/favicon.svg';

web-player/src/routes/+page.server.ts

@@ -4,14 +4,12 @@ import { fetchYoutubeFiller } from '$lib/server/youtube';
 import { addTrackAction, addYouTubeToPlaylistAction } from '$lib/server/playlistActions';
 import {
 	HOME_ALBUMS_LIMIT,
-	HOME_ARTISTS_LIMIT,
 	HOME_LATEST_PAGE_SIZE,
 	HOME_MIXES_BENTO,
 	HOME_SHELF_LIMIT,
 	YOUTUBE_FILLER_LIMIT
 } from '$lib/config';
 import { pickGreeting } from '$lib/server/greeting';
-import { pickTopArtists } from '$lib/server/topArtists';
 
 export const load: PageServerLoad = async ({ locals, url, fetch }) => {
 	const user = requireUser(locals, url);
@@ -52,7 +50,6 @@ export const load: PageServerLoad = async ({ locals, url, fetch }) => {
 		playlists: playlistItems.slice(0, HOME_SHELF_LIMIT),
 		playlistsHasMore: playlistItems.length > HOME_SHELF_LIMIT,
 		newReleases: latestItems,
-		topArtists: pickTopArtists(latestItems, HOME_ARTISTS_LIMIT),
 		youtubeFiller: fetchYoutubeFiller(
 			api,
 			locals.accessToken,

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Music from '@lucide/svelte/icons/music';
-	import ListMusic from '@lucide/svelte/icons/list-music';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
 	import { player, toQueueItems, type QueueItem } from '$lib/player/player.svelte';
 	import {
 		isTargetCurrent,
@@ -19,11 +19,9 @@
 	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 ArtistAvatar from '$lib/components/ui/ArtistAvatar.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 MediaGrid from '$lib/components/ui/MediaGrid.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 	import TrackContextMenu, {
 		contextMenuStateFor,
@@ -31,6 +29,7 @@
 	} from '$lib/components/TrackContextMenu.svelte';
 	import type { YouTubeSong } from '$lib/types';
 	import { appendUnique } from '$lib/collections';
+	import { HOME_LATEST_PAGE_SIZE } from '$lib/config';
 
 	let { data } = $props();
 
@@ -52,7 +51,6 @@
 	const albums = $derived(data.albums);
 	const mixes = $derived(data.mixes);
 	const playlists = $derived(data.playlists);
-	const artists = $derived(data.topArtists);
 
 	const newTargets = $derived<TrackTarget[]>(
 		data.newReleases.map((track) => ({ kind: 'local' as const, track }))
@@ -90,7 +88,7 @@
 				explicit: item.explicit
 			});
 		}
-		return merged.slice(0, 12);
+		return merged.slice(0, HOME_LATEST_PAGE_SIZE);
 	});
 
 	function playRecent(index: number) {
@@ -142,8 +140,9 @@
 
 {#if recentlyPlayed.length > 0}
 	<section class="page-x pt-6 sm:pt-8">
-		<SectionHeading title="Escuchar otra vez" />
-		<MediaGrid min="260px" minMobile="220px">
+		<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"
@@ -152,7 +151,7 @@
 					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 text-left transition duration-200"
+					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}
@@ -160,7 +159,7 @@
 						hue={hueFor(track.id)}
 						size="small"
 						alt={track.title}
-						class="h-14 w-14 shrink-0 rounded-control shadow-art ring-line transition duration-200"
+						class="h-14 w-14 shrink-0 rounded-control shadow-art transition duration-200"
 					>
 						{#if player.current.id === track.id}
 							<NowPlaying paused={!player.playing} />
@@ -181,12 +180,12 @@
 					</div>
 				</button>
 			{/each}
-		</MediaGrid>
+		</div>
 	</section>
 {/if}
 
 {#if albums.length > 0}
-	<section class="page-x pt-10 sm:pt-14">
+	<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>
@@ -203,7 +202,7 @@
 						<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:-translate-y-1 group-hover/card:shadow-art-lg"
+							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>
@@ -218,9 +217,8 @@
 {/if}
 
 {#if mixes.length > 0}
-	<section class="page-x pt-10 sm:pt-14">
-		<SectionHeading title="Hecho para ti" />
-		<div class="grid grid-cols-2 gap-3 sm:auto-rows-[100px] sm:grid-cols-4 sm:gap-4">
+	<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}
@@ -228,12 +226,12 @@
 					featured={i === 0}
 					banner={i === 4}
 					class={i === 0
-						? 'col-span-2 min-h-[168px] sm:row-span-2 sm:min-h-0'
+						? 'col-span-2 min-h-42 sm:row-span-2 sm:min-h-0'
 						: i === 1
-							? 'col-span-2 min-h-[120px] sm:min-h-0'
+							? 'col-span-2 min-h-30 sm:min-h-0'
 							: i === 4
-								? 'col-span-2 min-h-[96px] sm:col-span-4 sm:min-h-0'
-								: 'min-h-[120px] sm:min-h-0'}
+								? 'col-span-2 min-h-24 sm:col-span-4 sm:min-h-0'
+								: 'min-h-30 sm:min-h-0'}
 				/>
 			{/each}
 		</div>
@@ -241,21 +239,12 @@
 {/if}
 
 {#if playlists.length > 0}
-	<section class="page-x pt-10 sm:pt-14">
-		<SectionHeading title="Tus playlists">
-			{#snippet actions()}
-				{#if data.playlistsHasMore}
-					<a href="/playlists" class="text-sm text-fg-3 transition hover:text-accent-soft">
-						Ver todas
-					</a>
-				{/if}
-			{/snippet}
-		</SectionHeading>
+	<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-[150px] 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"
+					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
@@ -263,21 +252,23 @@
 						trackIds={playlist.coverTrackIds}
 						hue={hueFor(playlist.id)}
 						version={playlist.updatedAt}
-						class="h-[150px] w-[150px] rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:-translate-y-1 group-hover/card:shadow-art-lg"
+						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-fg-3">{playlist.description ?? 'Lista'}</div>
+					<div class="mt-0.5 truncate text-sm text-muted">{playlist.description}</div>
 				</a>
 			{/each}
 			<a
 				href="/playlists"
-				class="grid h-[150px] w-[150px] shrink-0 place-items-center rounded-art border border-dashed border-line-strong text-fg-3 transition hover:border-accent hover:text-accent-soft"
+				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">
-					<ListMusic class="h-6 w-6" />
-					<span class="text-sm">Ver todas</span>
+					<span class="grid h-8 w-8 place-items-center">
+						<ArrowRight class="h-4 w-4" />
+					</span>
+					Ver todas
 				</div>
 			</a>
 		</Rail>
@@ -285,7 +276,7 @@
 {/if}
 
 {#if newTargets.length > 0}
-	<section class="page-x pt-10 sm:pt-14">
+	<section class="page-x pt-10">
 		<SectionHeading title="Canciones nuevas" />
 		<Rail>
 			{#each newTargets as target, i (targetId(target))}
@@ -304,7 +295,7 @@
 							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:-translate-y-1 group-hover/card:shadow-art-lg"
+							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} />
@@ -329,24 +320,8 @@
 	</section>
 {/if}
 
-{#if artists.length > 0}
-	<section class="page-x pt-10 sm:pt-14">
-		<SectionHeading title="Top artistas del momento" />
-		<Rail>
-			{#each artists as artist, i (artist.id)}
-				<div
-					class="group/artist animate-enter shrink-0"
-					style="animation-delay:{Math.min(i, 10) * 45}ms"
-				>
-					<ArtistAvatar id={artist.id} name={artist.name} />
-				</div>
-			{/each}
-		</Rail>
-	</section>
-{/if}
-
-<section class="page-x pt-10 pb-16 sm:pt-14">
-	<SectionHeading title="Recomendado para ti" />
+<!---	
+<section class="page-x pt-10 pb-16">
 	{#if recTargets.length > 0}
 		<Rail>
 			{#each recTargets as target, i (targetId(target))}
@@ -365,7 +340,7 @@
 							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:-translate-y-1 group-hover/card:shadow-art-lg"
+							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} />
@@ -389,7 +364,7 @@
 	{:else}
 		<EmptyState icon={Music} title="Todavía no hay recomendaciones" />
 	{/if}
-</section>
+</section>-->
 
 {#if contextMenu}
 	<TrackContextMenu

web-player/src/routes/layout.css

@@ -2,6 +2,7 @@
 
 @theme {
 	--font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
+	--font-display: 'Sora Variable', 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
 
 	--color-bg: var(--mf-bg);
 	--color-elevated: var(--mf-elevated);
@@ -36,10 +37,10 @@
 }
 
 @utility page-x {
-	padding-inline: --spacing(4);
+	padding-inline: --spacing(6);
 
 	@media (width >= 40rem) {
-		padding-inline: --spacing(8);
+		padding-inline: --spacing(10);
 	}
 }