From 27f362f95419f06ac39a754ac3e82b4b193058d4 Mon Sep 17 00:00:00 2001
From: Glenn Thompson <glennt40@gmail.com>
Date: Fri, 21 Nov 2025 09:49:45 +0300
Subject: [PATCH] refactor: Make track name clickable with external link icon
 (ParenScript)

- Update ParenScript to make track name a clickable link
- Add external link icon next to track name
- Remove separate MusicBrainz link to reduce clutter
- Fix LASS hover syntax using :and combinator at correct nesting level
- Update CSS styling for track-link with proper hover effects
- Improves UX by making the primary action (clicking track) more intuitive
---
 parenscript/recently-played.lisp | 13 ++++----
 static/asteroid.lass             | 51 ++++++++++++++------------------
 2 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/parenscript/recently-played.lisp b/parenscript/recently-played.lisp
index b0b5a70..31119d9 100644
--- a/parenscript/recently-played.lisp
+++ b/parenscript/recently-played.lisp
@@ -29,19 +29,18 @@
                                                          (+ html
                                                             "<li class=\"track-item\">"
                                                             "<div class=\"track-info\">"
-                                                            "<div class=\"track-title\">" (escape-html (ps:@ track song)) "</div>"
-                                                            "<div class=\"track-artist\">" (escape-html (ps:@ track artist)) "</div>"
-                                                            "<span class=\"track-time\">" time-ago "</span>"
-                                                            "<div class=\"track-meta\">"
-                                                            "<a href=\"" (ps:@ 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=\"" (ps:@ track search_url) "\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"track-link\">"
+                                                            (escape-html (ps:@ 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\">" (escape-html (ps:@ track artist)) "</div>"
+                                                            "<span class=\"track-time\">" time-ago "</span>"
                                                             "</div>"
                                                             "</li>"))))))
                            (setf html (+ html "</ul>"))
diff --git a/static/asteroid.lass b/static/asteroid.lass
index e07209a..ffedb2e 100644
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@@ -145,7 +145,28 @@
        :padding "20px"
        :font-style italic)
       
-      (.error :color "#ff4444"))
+      (.error :color "#ff4444")
+      
+      (.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"
+       
+       (.external-icon
+        :width "14px"
+        :height "14px"
+        :margin-left "2px"
+        :vertical-align middle))
+      
+      ((:and .track-link :hover)
+       :color "#00ff00"
+       :text-decoration underline
+       :text-underline-offset "3px"))
      
      ((:and .recently-played-list .track-list)
       :list-style none
@@ -171,9 +192,6 @@
       :align-items center)
      
      ((:and .recently-played-list .track-title)
-      :color "#4488ff"
-      :font-weight 500
-      :font-size "1em"
       :grid-column 1
       :grid-row 1)
      
@@ -188,32 +206,7 @@
       :font-size "0.85em"
       :grid-column 2
       :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")))
 
     (.back
      :color "#00ffff"