From 50bd94dfc09a10932ff726adf2127b538ca64f6e Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Tue, 8 Oct 2024 19:33:18 -0500
Subject: [PATCH] feat: improve album track list ui

---
 src/modules/album/album.templ | 12 ++++++++----
 src/utils/utils.templ         |  7 +++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/modules/album/album.templ b/src/modules/album/album.templ
index e73ee06..be81cf5 100644
--- a/src/modules/album/album.templ
+++ b/src/modules/album/album.templ
@@ -3,6 +3,7 @@ package album
 import (
 	"acide/src/utils"
 	"fmt"
+	"strconv"
 )
 
 templ albumTempl(albumId string, album *utils.Album, songs []utils.Song) {
@@ -15,10 +16,10 @@ templ albumTempl(albumId string, album *utils.Album, songs []utils.Song) {
 			<p>
 				{ album.Artist }
 			</p>
-			<div class="text-left">
+			<div>
 				for _, song := range songs {
-					<p
-						class="py-2 px-4"
+					<button
+						class="inline-block py-2 pl-2 pr-4 w-full cursor-pointer text-left hover:bg-sky-100 whitespace-nowrap overflow-hidden overflow-ellipsis"
 						_={ fmt.Sprintf("on click playSong('%s', '%s', '%s', '%s')", 
 							utils.EscapeSingle(song.Title),
 							utils.EscapeSingle(song.Artist),
@@ -26,8 +27,11 @@ templ albumTempl(albumId string, album *utils.Album, songs []utils.Song) {
 							song.ID,
 						) }
 					>
+						<span class="inline-block w-6 text-right opacity-75 pr-2">
+							{ strconv.Itoa(song.TrackNumber) }
+						</span>
 						{ song.Title }
-					</p>
+					</button>
 				}
 			</div>
 		</div>
diff --git a/src/utils/utils.templ b/src/utils/utils.templ
index 0ac9a2e..47721d3 100644
--- a/src/utils/utils.templ
+++ b/src/utils/utils.templ
@@ -39,11 +39,14 @@ templ MusicPlayer() {
 			<p id="music-player-title" class="overflow-hidden overflow-ellipsis whitespace-nowrap w-full">-</p>
 			<p id="music-player-artist" class="text-sm opacity-75 overflow-hidden overflow-ellipsis whitespace-nowrap w-full">-</p>
 		</div>
-		<div class="flex items-center justify-center" _="on click togglePlaying()">
+		<div
+			class="flex items-center justify-center cursor-pointer"
+			_="on click togglePlaying()"
+		>
 			@playIcon(26)
 			@pauseIcon(26)
 		</div>
-		<button class="flex items-center justify-center" _="on click log $sound">
+		<button class="flex items-center justify-center">
 			@skipForwardIcon(24)
 		</button>
 	</div>