Make the now-playing bar's title/artist clickable and add a cover art lightbox

The song title links to its album, the artist name links to the artist
page, and clicking the cover art opens a larger version in a modal.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014r98AtcBbevpscWLsfwVvv

web/templates/partials/cards.html

@@ -22,7 +22,9 @@
           data-song-id="{{$s.ID}}"
           data-title="{{$s.Title}}"
           data-artist="{{$s.ArtistName}}"
+          data-artist-id="{{$s.ArtistID}}"
           data-album="{{$s.AlbumTitle}}"
+          data-album-id="{{$s.AlbumID}}"
           data-cover="{{$s.CoverArtID}}"
           data-starred="{{if $s.Starred}}1{{else}}0{{end}}">
         <td class="vs-track-num">{{if $s.TrackNumber}}{{$s.TrackNumber}}{{else}}{{add $i 1}}{{end}}</td>

web/templates/partials/footer.html

@@ -3,7 +3,7 @@
   </main>
 </div>
 
-{{if .User}}{{template "player"}}{{end}}
+{{if .User}}{{template "player"}}{{template "player_art_modal"}}{{end}}
 {{template "shortcuts_modal"}}
 {{template "confirm_delete_modal"}}
 
@@ -17,10 +17,10 @@
 <audio id="vs-audio" preload="metadata"></audio>
 <div id="vs-lyrics-panel" class="vs-lyrics-panel d-none"></div>
 <div class="vs-player">
-  <img id="vs-player-art" class="vs-player-art" src="/static/img/default-art.svg" alt="">
+  <img id="vs-player-art" class="vs-player-art" src="/static/img/default-art.svg" alt="" role="button" title="View larger photo">
   <div class="vs-player-meta">
-    <div id="vs-player-title" class="vs-player-title">Nothing playing</div>
-    <div id="vs-player-artist" class="vs-player-artist"></div>
+    <a id="vs-player-title" class="vs-player-title" href="javascript:void(0)">Nothing playing</a>
+    <a id="vs-player-artist" class="vs-player-artist" href="javascript:void(0)"></a>
   </div>
   <div class="vs-player-controls">
     <div class="vs-player-buttons">
@@ -47,6 +47,17 @@
 </div>
 {{end}}
 
+{{define "player_art_modal"}}
+<div class="modal fade" id="vs-player-art-modal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content bg-transparent border-0">
+      <button type="button" class="btn-close btn-close-white ms-auto me-2 mt-2" data-bs-dismiss="modal" aria-label="Close"></button>
+      <img id="vs-player-art-modal-img" src="" alt="" class="w-100 rounded">
+    </div>
+  </div>
+</div>
+{{end}}
+
 {{define "shortcuts_modal"}}
 <div class="modal fade" id="vs-shortcuts-modal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog">