fix nonexistent filenames for song entry component

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,7 +70,13 @@
 </script>
 
 <div class="rounded border flex flex-wrap items-center gap-2 px-3 py-2">
+	{#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"
@@ -78,6 +85,7 @@
 		>
 			<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,7 +100,9 @@
 		</div>
 	</div>
 
-	<div class="mt-2 flex items-center ml-auto gap-2">
+	{#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
@@ -148,9 +158,6 @@
 			>
 				<ListPlus class="icon-btn" />
 			</button>
-
-		{#if !track}
-			<span class="text-xs text-muted-foreground">No audio file</span>
-		{/if}
 		</div>
+	{/if}
 </div>