From 138b11f73b6d151537d87cfd4f038cbfe22292dc Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Fri, 6 Feb 2026 07:40:35 -0800
Subject: [PATCH] improved song entry layout

---
 src/lib/components/SongEntry.svelte | 64 +++++++++++++++++------------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/SongEntry.svelte b/src/lib/components/SongEntry.svelte
index fba54b3..8006fe6 100644
--- a/src/lib/components/SongEntry.svelte
+++ b/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="flex flex-wrap w-fit items-baseline gap-x-2 gap-y-1">
-		<span class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
-			>{displayTypeNumber}</span
-		>
-		{animeName}
+<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
+			>
+		</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-1 w-fit text-foreground/80">
-		{songName}
-		<span class="text-sm text-muted-foreground">— {artistDisplay}</span>
-	</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}