static/asteroid.lass

@@ -145,28 +145,7 @@
        :padding "20px"
        :font-style italic)
       
-      (.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"))
+      (.error :color "#ff4444"))
      
      ((:and .recently-played-list .track-list)
       :list-style none
@@ -192,6 +171,9 @@
       :align-items center)
      
      ((:and .recently-played-list .track-title)
+      :color "#4488ff"
+      :font-weight 500
+      :font-size "1em"
       :grid-column 1
       :grid-row 1)
      
@@ -206,7 +188,32 @@
       :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"

static/js/recently-played.js

@@ -19,18 +19,19 @@ async function updateRecentlyPlayed() {
                 html += `
                     <li class="track-item">
                         <div class="track-info">
-                            <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">
+                            <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">
                                         <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>
                 `;