From ea3cd4a8f6e0ee853b64ad2941f2bdced216d669 Mon Sep 17 00:00:00 2001
From: Glenn Thompson <glennt40@gmail.com>
Date: Fri, 21 Nov 2025 08:50:19 +0300
Subject: [PATCH] refactor: Make track name clickable with external link icon

- Replace separate MusicBrainz link with clickable track name
- Add external link icon next to track name
- Simplify grid layout by removing track-meta column
- Update CSS styling for track-link with hover effects
- Improves UX by making the primary action (clicking track) more intuitive
---
 static/asteroid.lass         | 47 +++++++++++++++---------------------
 static/js/recently-played.js | 13 +++++-----
 2 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/static/asteroid.lass b/static/asteroid.lass
index 0132ffc..75ca953 100644
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@@ -171,9 +171,6 @@
       :align-items center)
      
      ((:and .recently-played-list .track-title)
-      :color "#4488ff"
-      :font-weight 500
-      :font-size "1em"
       :grid-column 1
       :grid-row 1)
      
@@ -190,30 +187,26 @@
       :grid-row 1
       :text-align right)
      
-     ((:and .recently-played-list .track-meta)
-      :grid-column 2
-      :grid-row 2
-      :text-align right))
-     
-     (.recently-played-list
-      (.allmusic-link
-       :display inline-flex
-       :align-items center
-       :gap "4px"
-       :color "#4488ff"
-       :text-decoration none
-       :font-size "0.85em"
-       :letter-spacing "0.08rem"
-       :transition "all 0.2s"
-       :white-space nowrap
-       
-       ((:and :hover)
-        :color "#00ff00"
-        :text-decoration underline
-        :text-underline-offset "5px")
-       
-       (svg :width "14px"
-            :height "14px")))
+     ((:and .recently-played-list .track-link)
+      :display inline-flex
+      :align-items center
+      :gap "4px"
+      :color "#4488ff"
+      :text-decoration none
+      :font-weight 500
+      :font-size "1em"
+      :transition "all 0.2s"
+      
+      ((:and :hover)
+       :color "#00ff00"
+       :text-decoration underline
+       :text-underline-offset "3px")
+      
+      (.external-icon
+       :width "14px"
+       :height "14px"
+       :margin-left "2px"
+       :vertical-align middle)))
 
     (.back
      :color "#00ffff"
diff --git a/static/js/recently-played.js b/static/js/recently-played.js
index db79f1c..5520302 100644
--- a/static/js/recently-played.js
+++ b/static/js/recently-played.js
@@ -19,19 +19,18 @@ async function updateRecentlyPlayed() {
                 html += `
                     <li class="track-item">
                         <div class="track-info">
-                            <div class="track-title">${escapeHtml(track.song)}</div>
-                            <div class="track-artist">${escapeHtml(track.artist)}</div>
-                            <span class="track-time">${timeAgo}</span>
-                            <div class="track-meta">
-                                <a href="${track.search_url}" target="_blank" rel="noopener noreferrer" class="allmusic-link">
-                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <div class="track-title">
+                                <a href="${track.search_url}" target="_blank" rel="noopener noreferrer" class="track-link">
+                                    ${escapeHtml(track.song)}
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="external-icon">
                                         <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                                         <polyline points="15 3 21 3 21 9"></polyline>
                                         <line x1="10" y1="14" x2="21" y2="3"></line>
                                     </svg>
-                                    MusicBrainz
                                 </a>
                             </div>
+                            <div class="track-artist">${escapeHtml(track.artist)}</div>
+                            <span class="track-time">${timeAgo}</span>
                         </div>
                     </li>
                 `;