From a33d495acd8e06abe48b6daa87f45ce12b2b9587 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Fri, 6 Feb 2026 12:08:14 -0800
Subject: [PATCH] fix nonexistent filenames for song entry component

---
 src/lib/components/SongEntry.svelte | 133 +++++++++++++++-------------
 1 file changed, 70 insertions(+), 63 deletions(-)

diff --git a/src/lib/components/SongEntry.svelte b/src/lib/components/SongEntry.svelte
index 8006fe6..1f32119 100644
--- a/src/lib/components/SongEntry.svelte
+++ b/src/lib/components/SongEntry.svelte
@@ -14,6 +14,7 @@
 		removeTrack,
 	} from "$lib/player/player.svelte";
 	import { type SongType, trackFromSongRow } from "$lib/player/types";
+	import { Button } from "./ui/button";
 
 	type SongEntryProps = {
 		annSongId: number;
@@ -69,15 +70,22 @@
 </script>
 
 <div class="rounded border flex flex-wrap items-center gap-2 px-3 py-2">
-	<a
-		type="button"
-		target="_blank"
-		rel="noopener noreferrer"
-		class="btn-icon"
-		href={`https://nawdist.animemusicquiz.com/${fileName}`}
-	>
-		<ExternalLink class="icon-btn" />
-	</a>
+	{#if !fileName}
+		<button disabled class="btn-icon opacity-50">
+			<ExternalLink class="icon-btn bg-muted" />
+		</button>
+	{:else}
+		<a
+			aria-disabled={!fileName}
+			type="button"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="btn-icon"
+			href={`https://nawdist.animemusicquiz.com/${fileName}`}
+		>
+			<ExternalLink class="icon-btn" />
+		</a>
+	{/if}
 	<div class="flex flex-col">
 		<div class="flex flex-wrap w-fit items-baseline gap-x-2 gap-y-1">
 			{animeName}
@@ -92,65 +100,64 @@
 		</div>
 	</div>
 
-	<div class="mt-2 flex items-center ml-auto gap-2">
-		{#if isQueued}
-			<span class="text-xs text-muted-foreground">Queued</span>
+	{#if !track}
+		<span class="text-xs text-muted-foreground ml-auto">No audio file</span>
+	{:else}<div class="mt-2 flex items-center ml-auto gap-2">
+			{#if isQueued}
+				<span class="text-xs text-muted-foreground">Queued</span>
+				<button
+					type="button"
+					class="btn-icon"
+					title="Remove from queue"
+					aria-label="Remove from queue"
+					onclick={() => removeTrack(annSongId)}
+				>
+					<Trash2 class="icon-btn" />
+				</button>
+			{/if}
 			<button
 				type="button"
 				class="btn-icon"
-				title="Remove from queue"
-				aria-label="Remove from queue"
-				onclick={() => removeTrack(annSongId)}
+				disabled={!track}
+				title="Play"
+				aria-label="Play"
+				onclick={() => {
+					if (!track) return;
+					play(track);
+					requestGlobalAutoplay();
+				}}
 			>
-				<Trash2 class="icon-btn" />
+				<PlayIcon class="icon-btn" />
 			</button>
-		{/if}
-		<button
-			type="button"
-			class="btn-icon"
-			disabled={!track}
-			title="Play"
-			aria-label="Play"
-			onclick={() => {
-				if (!track) return;
-				play(track);
-				requestGlobalAutoplay();
-			}}
-		>
-			<PlayIcon class="icon-btn" />
-		</button>
 
-		<button
-			type="button"
-			class="btn-icon"
-			disabled={!track}
-			title="Play next"
-			aria-label="Play next"
-			onclick={() => {
-				if (!track) return;
-				playNext(track);
-				requestGlobalAutoplay();
-			}}
-		>
-			<SkipForward class="icon-btn" />
-		</button>
+			<button
+				type="button"
+				class="btn-icon"
+				disabled={!track}
+				title="Play next"
+				aria-label="Play next"
+				onclick={() => {
+					if (!track) return;
+					playNext(track);
+					requestGlobalAutoplay();
+				}}
+			>
+				<SkipForward class="icon-btn" />
+			</button>
 
-		<button
-			type="button"
-			class="btn-icon"
-			disabled={!track}
-			title="Add to queue"
-			aria-label="Add to queue"
-			onclick={() => {
-				if (!track) return;
-				addToQueue(track);
-			}}
-		>
-			<ListPlus class="icon-btn" />
-		</button>
-
-		{#if !track}
-			<span class="text-xs text-muted-foreground">No audio file</span>
-		{/if}
-	</div>
+			<button
+				type="button"
+				class="btn-icon"
+				disabled={!track}
+				title="Add to queue"
+				aria-label="Add to queue"
+				onclick={() => {
+					if (!track) return;
+					addToQueue(track);
+				}}
+			>
+				<ListPlus class="icon-btn" />
+			</button>
+		</div>
+	{/if}
 </div>