improved song entry layout

src/lib/components/SongEntry.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import {
+		ExternalLink,
 		ListPlus,
-		Play as PlayIcon,
+		PlayIcon,
 		SkipForward,
 		Trash2,
 	} from "@lucide/svelte";
@@ -67,20 +68,43 @@
 	}
 </script>
 
-<div class="rounded border flex-row px-3 py-2">
+<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>
+	<div class="flex flex-col">
 		<div class="flex flex-wrap w-fit items-baseline gap-x-2 gap-y-1">
+			{animeName}
 			<span class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
 				>{displayTypeNumber}</span
 			>
-		{animeName}
 		</div>
 
 		<div class="mt-1 w-fit text-foreground/80">
 			{songName}
 			<span class="text-sm text-muted-foreground">— {artistDisplay}</span>
 		</div>
+	</div>
 
-	<div class="mt-2 w-fitflex flex-wrap items-center gap-2">
+	<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"
@@ -125,20 +149,6 @@
 			<ListPlus class="icon-btn" />
 		</button>
 
-		{#if isQueued}
-			<button
-				type="button"
-				class="btn-icon"
-				title="Remove from queue"
-				aria-label="Remove from queue"
-				onclick={() => removeTrack(annSongId)}
-			>
-				<Trash2 class="icon-btn" />
-			</button>
-
-			<span class="text-xs text-muted-foreground">Queued</span>
-		{/if}
-
 		{#if !track}
 			<span class="text-xs text-muted-foreground">No audio file</span>
 		{/if}