NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): hide playlists if the user doesn't have any

Browse Source
This commit is contained in:
Admin
2026-07-14 19:24:41 +02:00
parent f101ce69a0
commit a10426b3f1
1 changed files with 25 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+page.svelte
+24 -33
View File
@@ -113,7 +113,31 @@
</section>
{/if}
{#if playlists.length > 0}
<section class="px-8 pb-3 pt-3">
<h2 class="mb-4 font-display text-xl font-bold">Mis listas</h2>
<div class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
{#each playlists as playlist, i (playlist.id)}
<a
href="/playlists/{playlist.id}"
class="group animate-enter text-left"
style="animation-delay:{i * 45}ms"
>
<PlaylistArt
trackIds={trackIds[playlist.id] ?? []}
hue={hueFor(playlist.id)}
class="aspect-square w-full rounded-xl shadow-[0_12px_28px_-10px_rgba(0,0,0,0.6)] transition group-hover:shadow-[0_16px_36px_-10px_rgba(0,0,0,0.75)]"
/>
<div class="mt-2.5 truncate text-sm font-semibold text-[var(--mf-text)]">
{playlist.name}
</div>
</a>
{/each}
</div>
</section>
{/if}
<section class="px-8 pb-16 pt-3">
<h2 class="mb-4 font-display text-xl font-bold">Novedades</h2>
{#if latest.length > 0}
<div class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
@@ -162,36 +186,3 @@
</div>
{/if}
</section>
<section class="px-8 pb-16 pt-3">
<h2 class="mb-4 font-display text-xl font-bold">Mis listas</h2>
{#if playlists.length > 0}
<div class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
{#each playlists as playlist, i (playlist.id)}
<a
href="/playlists/{playlist.id}"
class="group animate-enter text-left"
style="animation-delay:{i * 45}ms"
>
<PlaylistArt
trackIds={trackIds[playlist.id] ?? []}
hue={hueFor(playlist.id)}
class="aspect-square w-full rounded-xl shadow-[0_12px_28px_-10px_rgba(0,0,0,0.6)] transition group-hover:shadow-[0_16px_36px_-10px_rgba(0,0,0,0.75)]"
/>
<div class="mt-2.5 truncate text-sm font-semibold text-[var(--mf-text)]">
{playlist.name}
</div>
</a>
{/each}
</div>
{:else}
<div
class="max-w-[560px] rounded-xl border border-[var(--mf-border)] bg-[var(--mf-surface)] px-6 py-10 text-center"
>
<p class="text-sm text-[var(--mf-text-2)]">Todavía no tienes listas</p>
<p class="mt-1.5 text-xs text-[var(--mf-text-4)]">
Cuando crees listas, tus últimas aparecerán aquí.
</p>
</div>
{/if}
</section>