frontend/src/routes/(app)/explore/+page.svelte

@@ -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">
+				<p class="mt-3 text-sm text-neutral-300">Todavía no hay canciones. ¡Sé el primero en subir una!</p>
-				{#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>
 			</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 youtubeVisible}
-		{#if showHeadings}
+		{#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)}