Design Prot Merge #1

Merged
NotS1mp merged 217 commits from design-prot into master 2026-09-21 15:48:16 +00:00
Showing only changes of commit 2208453775 - Show all commits
+8 -8
View File
@@ -85,27 +85,27 @@
{#if recentlyPlayed.length > 0} {#if recentlyPlayed.length > 0}
<section class="px-8 pb-3 pt-6"> <section class="px-8 pb-3 pt-6">
<h2 class="mb-4 font-display text-2xl font-bold">Escuchado recientemente</h2> <h2 class="mb-4 font-display text-xl font-bold">Escuchado recientemente</h2>
<div class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4"> <div class="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-3.5">
{#each recentlyPlayed as track, i (track.id)} {#each recentlyPlayed as track, i (track.id)}
<button <button
type="button" type="button"
onclick={() => playRecent(i)} onclick={() => playRecent(i)}
class="flex items-center gap-4 rounded-xl bg-[var(--mf-surface)] p-2.5 text-left transition hover:bg-[var(--mf-surface-hover)]" class="flex items-center gap-3.5 rounded-xl bg-[var(--mf-surface)] p-2 text-left transition hover:bg-[var(--mf-surface-hover)]"
> >
<Cover <Cover
trackId={track.id} trackId={track.id}
hue={hueFor(track.id)} hue={hueFor(track.id)}
size="medium" size="small"
alt={track.title} alt={track.title}
class="h-16 w-16 flex-shrink-0 rounded-lg" class="h-14 w-14 flex-shrink-0 rounded-lg"
> >
{#if player.current.id === track.id} {#if player.current.id === track.id}
<NowPlaying paused={!player.playing} /> <NowPlaying paused={!player.playing} />
{/if} {/if}
</Cover> </Cover>
<div class="min-w-0"> <div class="min-w-0">
<div class="truncate text-base font-semibold text-[var(--mf-text)]">{track.title}</div> <div class="truncate text-sm font-semibold text-[var(--mf-text)]">{track.title}</div>
</div> </div>
</button> </button>
{/each} {/each}
@@ -116,7 +116,7 @@
<section class="px-8 pb-3 pt-3"> <section class="px-8 pb-3 pt-3">
<h2 class="mb-4 font-display text-xl font-bold">Novedades</h2> <h2 class="mb-4 font-display text-xl font-bold">Novedades</h2>
{#if latest.length > 0} {#if latest.length > 0}
<div class="grid max-w-[1400px] grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4"> <div class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
{#each latest as track, i (track.id)} {#each latest as track, i (track.id)}
<button <button
type="button" type="button"
@@ -166,7 +166,7 @@
<section class="px-8 pb-16 pt-3"> <section class="px-8 pb-16 pt-3">
<h2 class="mb-4 font-display text-xl font-bold">Mis listas</h2> <h2 class="mb-4 font-display text-xl font-bold">Mis listas</h2>
{#if playlists.length > 0} {#if playlists.length > 0}
<div class="grid max-w-[1400px] grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4"> <div class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
{#each playlists as playlist, i (playlist.id)} {#each playlists as playlist, i (playlist.id)}
<a <a
href="/playlists/{playlist.id}" href="/playlists/{playlist.id}"