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/static/css/app.css

@@ -226,19 +226,33 @@ body {
 }
 
 .vs-player-title {
+  display: block;
   font-size: 0.85rem;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: inherit;
+  text-decoration: none;
 }
 
 .vs-player-artist {
+  display: block;
   font-size: 0.78rem;
   color: var(--bs-secondary-color);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-decoration: none;
+}
+
+.vs-player-title:hover,
+.vs-player-artist:hover {
+  text-decoration: underline;
+}
+
+.vs-player-art[role="button"] {
+  cursor: pointer;
 }
 
 .vs-player-controls {

web/static/js/app.js

@@ -114,7 +114,9 @@
     if (!song) return;
     this.audio.src = "/stream/" + encodeURIComponent(song.id);
     this.ui.title.textContent = song.title || "";
+    this.ui.title.href = song.albumId ? "/albums/" + encodeURIComponent(song.albumId) : "javascript:void(0)";
     this.ui.artist.textContent = song.artist || "";
+    this.ui.artist.href = song.artistId ? "/artists/" + encodeURIComponent(song.artistId) : "javascript:void(0)";
     this.ui.art.src = song.cover ? "/cover-art/" + encodeURIComponent(song.cover) + "?size=100" : "/static/img/default-art.svg";
     this.ui.starBtn.dataset.itemType = "song";
     this.ui.starBtn.dataset.itemId = song.id;
@@ -307,7 +309,9 @@
         id: node.dataset.songId,
         title: node.dataset.title,
         artist: node.dataset.artist,
+        artistId: node.dataset.artistId,
         album: node.dataset.album,
+        albumId: node.dataset.albumId,
         cover: node.dataset.cover,
         starred: node.dataset.starred === "1",
       });
@@ -348,6 +352,20 @@
       });
     }
 
+    var artModalEl = document.getElementById("vs-player-art-modal");
+    if (ui.art && artModalEl && window.bootstrap) {
+      var artModalImg = document.getElementById("vs-player-art-modal-img");
+      var artModal = new bootstrap.Modal(artModalEl);
+      ui.art.addEventListener("click", function () {
+        var song = player.queue[player.index];
+        artModalImg.src = song && song.cover
+          ? "/cover-art/" + encodeURIComponent(song.cover) + "?size=1200"
+          : "/static/img/default-art.svg";
+        artModalImg.alt = song ? (song.title || "") : "";
+        artModal.show();
+      });
+    }
+
     var lyricsBtn = document.getElementById("vs-lyrics-btn");
     if (lyricsBtn && ui.lyricsPanel) {
       lyricsBtn.addEventListener("click", function () {