Refine recently played styling and MusicBrainz search

- Use 2-column grid layout: track/artist left, time/link right
- Match color scheme with now-playing section (blue text)
- Tighter row spacing (6px padding)
- Simplified MusicBrainz search query (no field prefixes)
- Fix CSS selector for proper link styling
- Right-align time and MusicBrainz link

asteroid.lisp

@@ -69,9 +69,9 @@
 
 (defun generate-music-search-url (artist song)
   "Generate MusicBrainz search URL for artist and song"
-  ;; MusicBrainz uses 'artist:' and 'recording:' prefixes for better search
-  (let ((query (format nil "artist:\"~a\" recording:\"~a\"" artist song)))
-    (format nil "https://musicbrainz.org/search?query=~a&type=recording&method=indexed"
+  ;; Simple search without field prefixes works better with URL encoding
+  (let ((query (format nil "~a ~a" artist song)))
+    (format nil "https://musicbrainz.org/search?query=~a&type=recording"
             (drakma:url-encode query :utf-8))))
 
 ;; API Routes using Radiance's define-api

static/asteroid.css

@@ -185,7 +185,7 @@ body .recently-played-panel .recently-played-list.track-list{
 }
 
 body .recently-played-panel .recently-played-list.track-item{
-    padding: 12px;
+    padding: 6px 12px;
     border-bottom: 1px solid #2a3441;
     -moz-transition: background-color 0.2s;
     -o-transition: background-color 0.2s;
@@ -199,58 +199,71 @@ body .recently-played-panel .recently-played-list.track-item LAST-CHILD{
 }
 
 body .recently-played-panel .recently-played-list.track-item HOVER{
-    background-color: #252525;
+    background-color: #2a3441;
 }
 
 body .recently-played-panel .recently-played-list.track-info{
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    gap: 2px 20px;
+    align-items: center;
 }
 
 body .recently-played-panel .recently-played-list.track-title{
-    color: #fff;
+    color: #4488ff;
     font-weight: 500;
     font-size: 1em;
+    grid-column: 1;
+    grid-row: 1;
 }
 
 body .recently-played-panel .recently-played-list.track-artist{
-    color: #aaa;
+    color: #4488ff;
     font-size: 0.9em;
-}
-
-body .recently-played-panel .recently-played-list.track-meta{
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-top: 4px;
+    grid-column: 1;
+    grid-row: 2;
 }
 
 body .recently-played-panel .recently-played-list.track-time{
-    color: #666;
+    color: #888;
     font-size: 0.85em;
+    grid-column: 2;
+    grid-row: 1;
+    text-align: right;
 }
 
-body .recently-played-panel .recently-played-list.allmusic-link{
+body .recently-played-panel .recently-played-list.track-meta{
+    grid-column: 2;
+    grid-row: 2;
+    text-align: right;
+}
+
+
+
+body .recently-played-list .allmusic-link{
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    color: #00ff00;
+    color: #4488ff;
     text-decoration: none;
     font-size: 0.85em;
-    -moz-transition: color 0.2s;
-    -o-transition: color 0.2s;
-    -webkit-transition: color 0.2s;
-    -ms-transition: color 0.2s;
-    transition: color 0.2s;
+    letter-spacing: 0.08rem;
+    -moz-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -ms-transition: all 0.2s;
+    transition: all 0.2s;
+    white-space: nowrap;
 }
 
-body .recently-played-panel .recently-played-list.allmusic-link HOVER{
-    color: #00cc00;
+body .recently-played-list .allmusic-link HOVER{
+    color: #00ff00;
     text-decoration: underline;
+    text-underline-offset: 5px;
 }
 
-body .recently-played-panel .recently-played-list.allmusic-link svg{
+body .recently-played-list .allmusic-link svg{
     width: 14px;
     height: 14px;
 }

static/asteroid.lass

@@ -156,49 +156,61 @@
       :overflow-y visible)
      
      ((:and .recently-played-list .track-item)
-      :padding "12px"
+      :padding "6px 12px"
       :border-bottom "1px solid #2a3441"
       :transition "background-color 0.2s"
       
       ((:and :last-child) :border-bottom none)
-      ((:and :hover) :background-color "#252525"))
+      ((:and :hover) :background-color "#2a3441"))
      
      ((:and .recently-played-list .track-info)
-      :display flex
-      :flex-direction column
-      :gap "4px")
+      :display grid
+      :grid-template-columns "1fr auto"
+      :grid-template-rows "auto auto"
+      :gap "2px 20px"
+      :align-items center)
      
      ((:and .recently-played-list .track-title)
-      :color "#fff"
+      :color "#4488ff"
       :font-weight 500
-      :font-size "1em")
+      :font-size "1em"
+      :grid-column 1
+      :grid-row 1)
      
      ((:and .recently-played-list .track-artist)
-      :color "#aaa"
-      :font-size "0.9em")
-     
-     ((:and .recently-played-list .track-meta)
-      :display flex
-      :align-items center
-      :gap "12px"
-      :margin-top "4px")
+      :color "#4488ff"
+      :font-size "0.9em"
+      :grid-column 1
+      :grid-row 2)
      
      ((:and .recently-played-list .track-time)
-      :color "#666"
-      :font-size "0.85em")
+      :color "#888"
+      :font-size "0.85em"
+      :grid-column 2
+      :grid-row 1
+      :text-align right)
      
-     ((:and .recently-played-list .allmusic-link)
+     ((: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 "#00ff00"
+       :color "#4488ff"
        :text-decoration none
        :font-size "0.85em"
-      :transition "color 0.2s"
+       :letter-spacing "0.08rem"
+       :transition "all 0.2s"
+       :white-space nowrap
        
        ((:and :hover)
-       :color "#00cc00"
-       :text-decoration underline)
+        :color "#00ff00"
+        :text-decoration underline
+        :text-underline-offset "5px")
        
        (svg :width "14px"
             :height "14px")))

static/js/recently-played.js

@@ -21,8 +21,8 @@ async function updateRecentlyPlayed() {
                         <div class="track-info">
                             <div class="track-title">${escapeHtml(track.song)}</div>
                             <div class="track-artist">${escapeHtml(track.artist)}</div>
-                            <div class="track-meta">
                             <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>