From 026162e2b52b7099b1bb359feee6c8dd726ad21c Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Tue, 1 Jul 2025 17:14:05 +0000
Subject: [PATCH] feat: simplify track display in Album and Queue pages,
 removing unnecessary elements and improving UI clarity

---
 app/album/[id]/page.tsx | 10 +---------
 app/queue/page.tsx      | 32 ++++++--------------------------
 2 files changed, 7 insertions(+), 35 deletions(-)

diff --git a/app/album/[id]/page.tsx b/app/album/[id]/page.tsx
index e066a77..239b60e 100644
--- a/app/album/[id]/page.tsx
+++ b/app/album/[id]/page.tsx
@@ -160,23 +160,15 @@ export default function AlbumPage() {
                 {tracklist.map((song, index) => (
                   <div
                     key={song.id}
-                    className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors ${
-                      isCurrentlyPlaying(song) ? 'bg-accent/50 border-l-4 border-primary' : ''
-                    }`}
+                    className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors`}
                     onClick={() => handlePlayClick(song)}
                   >
                     {/* Track Number / Play Indicator */}
                     <div className="w-8 text-center text-sm text-muted-foreground mr-3">
-                      {isCurrentlyPlaying(song) ? (
-                        <div className="w-4 h-4 mx-auto">
-                          <div className="w-full h-full bg-primary rounded-full animate-pulse" />
-                        </div>
-                      ) : (
                         <>
                           <span className="group-hover:hidden">{song.track || index + 1}</span>
                           <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
                         </>
-                      )}
                     </div>
 
                     {/* Song Info */}
diff --git a/app/queue/page.tsx b/app/queue/page.tsx
index f6c5ef4..683b02e 100644
--- a/app/queue/page.tsx
+++ b/app/queue/page.tsx
@@ -46,7 +46,7 @@ const QueuePage: React.FC = () => {
         {currentTrack && (
           <div className="space-y-3">
             <h2 className="text-lg font-semibold">Now Playing</h2>
-            <div className="p-4 bg-accent/30 rounded-lg border-l-4 border-primary">
+            <div className="p-4 bg-accent/30 rounded-lg">
               <div className="flex items-center">
                 {/* Album Art */}
                 <div className="w-16 h-16 mr-4 flex-shrink-0">
@@ -65,7 +65,6 @@ const QueuePage: React.FC = () => {
                     <p className="font-semibold text-lg text-primary truncate">
                       {currentTrack.name}
                     </p>
-                    <div className="w-3 h-3 bg-primary rounded-full animate-pulse flex-shrink-0" />
                   </div>
                   <div className="flex items-center text-sm text-muted-foreground space-x-4">
                     <div className="flex items-center gap-1">
@@ -74,12 +73,6 @@ const QueuePage: React.FC = () => {
                         {currentTrack.artist}
                       </Link>
                     </div>
-                    <div className="flex items-center gap-1">
-                      <Disc className="w-3 h-3" />
-                      <Link href={`/album/${currentTrack.albumId}`} className="truncate hover:text-primary hover:underline">
-                        {currentTrack.album}
-                      </Link>
-                    </div>
                   </div>
                 </div>
 
@@ -122,14 +115,8 @@ const QueuePage: React.FC = () => {
                     className="group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors"
                     onClick={() => skipToTrackInQueue(index)}
                   >
-                    {/* Track Number / Play Indicator */}
-                    <div className="w-8 text-center text-sm text-muted-foreground mr-3">
-                      <span className="group-hover:hidden">{index + 1}</span>
-                      <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
-                    </div>
-
-                    {/* Album Art */}
-                    <div className="w-12 h-12 mr-4 flex-shrink-0">
+                    {/* Album Art with Play Indicator */}
+                    <div className="w-12 h-12 mr-4 flex-shrink-0 relative">
                       <Image
                         src={track.coverArt || '/default-user.jpg'}
                         alt={track.album}
@@ -137,6 +124,9 @@ const QueuePage: React.FC = () => {
                         height={48}
                         className="w-full h-full object-cover rounded-md"
                       />
+                      <div className="absolute inset-0 bg-black/50 rounded-md opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                        <Play className="w-5 h-5 text-white" />
+                      </div>
                     </div>
 
                     {/* Song Info */}
@@ -155,16 +145,6 @@ const QueuePage: React.FC = () => {
                             {track.artist}
                           </Link>
                         </div>
-                        <div className="flex items-center gap-1">
-                          <Disc className="w-3 h-3" />
-                          <Link 
-                            href={`/album/${track.albumId}`} 
-                            className="truncate hover:text-primary hover:underline"
-                            onClick={(e) => e.stopPropagation()}
-                          >
-                            {track.album}
-                          </Link>
-                        </div>
                       </div>
                     </div>