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 cfa5bdc6ff - Show all commits
+24 -17
View File
@@ -35,11 +35,20 @@
addedVideoIds = new Set();
});
const showHeadings = $derived(!!data.query);
const tracks = $derived(data.tracks);
const currentPage = $derived(Number(data.tracks.pageNumber));
const total = $derived(Number(data.tracks.totalItemCount));
const localVisible = $derived(!data.query || tracks.items.length > 0);
const youtubeVisible = $derived(
!!data.query && (data.needsAuth || data.ytError || ytItems.length > 0)
);
const localHeadingVisible = $derived(!!data.query && localVisible);
const youtubeHeadingVisible = $derived(!!data.query && youtubeVisible);
const nothingFound = $derived(
!!data.query && !localVisible && !youtubeVisible && !data.needsAuth && !data.ytError
);
function buildHref(page = 1, query = data.query) {
const params = new URLSearchParams();
if (query) params.set('q', query);
@@ -137,11 +146,19 @@
</p>
{/if}
{#if showHeadings}
{#if nothingFound}
<div class="mt-10 rounded-2xl border border-white/10 bg-neutral-900/40 p-12 text-center backdrop-blur-md">
<Music class="mx-auto h-10 w-10 text-neutral-500" />
<p class="mt-4 text-neutral-300">No hay resultados para «{data.query}».</p>
</div>
{/if}
{#if localVisible}
{#if localHeadingVisible}
<h2 class="mt-10 font-display text-lg font-bold tracking-tight">Mi música</h2>
{/if}
<p class="{showHeadings ? 'mt-1' : 'mt-6'} text-sm text-neutral-500">
<p class="{localHeadingVisible ? 'mt-1' : 'mt-6'} text-sm text-neutral-500">
{#if data.query}
{total}
{total === 1 ? 'resultado' : 'resultados'} para «{data.query}»
@@ -154,13 +171,7 @@
{#if tracks.items.length === 0}
<div class="mt-6 rounded-2xl border border-white/10 bg-neutral-900/40 p-10 text-center backdrop-blur-md">
<Music class="mx-auto h-8 w-8 text-neutral-500" />
<p class="mt-3 text-sm text-neutral-300">
{#if data.query}
No hay canciones tuyas que coincidan con «{data.query}».
{:else}
Todavía no hay canciones. ¡Sé el primero en subir una!
{/if}
</p>
<p class="mt-3 text-sm text-neutral-300">Todavía no hay canciones. ¡Sé el primero en subir una!</p>
</div>
{:else}
<ul class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
@@ -223,9 +234,10 @@
</nav>
{/if}
{/if}
{/if}
{#if data.query}
{#if showHeadings}
{#if youtubeVisible}
{#if youtubeHeadingVisible}
<h2 class="mt-12 font-display text-lg font-bold tracking-tight">YouTube Music</h2>
{/if}
@@ -239,11 +251,6 @@
<Music class="mx-auto h-8 w-8 text-neutral-500" />
<p class="mt-3 text-sm text-neutral-300">YouTube Music no está disponible ahora mismo. Inténtalo de nuevo.</p>
</div>
{:else if ytItems.length === 0}
<div class="mt-6 rounded-2xl border border-white/10 bg-neutral-900/40 p-10 text-center backdrop-blur-md">
<Music class="mx-auto h-8 w-8 text-neutral-500" />
<p class="mt-3 text-sm text-neutral-300">No hay resultados en YouTube Music para «{data.query}».</p>
</div>
{:else}
<ul class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
{#each ytItems as song, i (song.videoId)}