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

feat(frontend): hide empty local/YouTube sections when searching in explore

Browse Source
This commit is contained in:
Admin
2026-07-16 17:00:27 +02:00
parent 1050372634
commit cfa5bdc6ff
1 changed files with 97 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/(app)/explore/+page.svelte
+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)}