From c0279451911413905660344c7d14d3683c139e30 Mon Sep 17 00:00:00 2001
From: Jonathan <claude.cs@jger.nl>
Date: Sun, 12 Jul 2026 15:37:02 +0200
Subject: [PATCH] feat(web): cover art on Wanted + Discover album rows

Wanted API returns rgMbid/type/year; Wanted rows show a cover thumb and open
the album modal. Discover suggested-album rows get a cover thumb too. Completes
cover art across the app (artist detail, Library, modals, Wanted, Discover).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/src/app/api/wanted/route.ts          |  3 ++
 web/src/app/discover/discover-client.tsx | 21 +++++-----
 web/src/app/wanted/wanted-client.tsx     | 49 +++++++++++++++++++++---
 3 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/web/src/app/api/wanted/route.ts b/web/src/app/api/wanted/route.ts
index 8fdd1e8..1fda9ce 100644
--- a/web/src/app/api/wanted/route.ts
+++ b/web/src/app/api/wanted/route.ts
@@ -15,6 +15,9 @@ export async function GET() {
       currentQualityClass: r.currentQualityClass,
       lastSearchedAt: r.lastSearchedAt,
       watchedArtistId: r.watchedArtistId,
+      rgMbid: r.rgMbid,
+      primaryType: r.primaryType,
+      firstReleaseDate: r.firstReleaseDate,
     })),
   });
 }
diff --git a/web/src/app/discover/discover-client.tsx b/web/src/app/discover/discover-client.tsx
index 652dc73..40af92a 100644
--- a/web/src/app/discover/discover-client.tsx
+++ b/web/src/app/discover/discover-client.tsx
@@ -5,6 +5,7 @@ import { PageHead } from "../_ui/page-head";
 import { SectionHeader } from "../_ui/section-header";
 import { ArtistModal } from "../_ui/artist-modal";
 import { AlbumModal } from "../_ui/album-modal";
+import { CoverArt } from "../_ui/cover-art";
 
 type Suggestion = {
   id: string;
@@ -189,15 +190,17 @@ export function DiscoverClient() {
           {feed.albums.map((s) => (
             <li key={s.id} className="list-row">
               <div className="main">
-                <div className="rtitle">
-                  <button className="linkish" onClick={() => setAlbumModal(s)}>
-                    {s.album}
-                  </button>{" "}
-                  <span className="artist">· {s.artistName}</span>
-                </div>
-                <div className="rmeta">
-                  <span className="score">score {s.score.toFixed(2)}</span>
-                </div>
+                <button className="disco-open" onClick={() => setAlbumModal(s)} aria-label={`Open ${s.album ?? ""}`}>
+                  <CoverArt rgMbid={s.rgMbid} alt={s.album ?? ""} className="thumb" />
+                  <span>
+                    <span className="rtitle">
+                      {s.album} <span className="artist">· {s.artistName}</span>
+                    </span>
+                    <span className="rmeta">
+                      <span className="score">score {s.score.toFixed(2)}</span>
+                    </span>
+                  </span>
+                </button>
               </div>
               <div className="actions">
                 <button className="btn sm" onClick={() => act(s.id, "want")}>
diff --git a/web/src/app/wanted/wanted-client.tsx b/web/src/app/wanted/wanted-client.tsx
index 5dbbe70..619acb5 100644
--- a/web/src/app/wanted/wanted-client.tsx
+++ b/web/src/app/wanted/wanted-client.tsx
@@ -3,6 +3,8 @@
 import { useEffect, useState } from "react";
 import { PageHead } from "../_ui/page-head";
 import { SectionHeader } from "../_ui/section-header";
+import { CoverArt } from "../_ui/cover-art";
+import { AlbumModal } from "../_ui/album-modal";
 
 type Wanted = {
   id: string;
@@ -11,6 +13,9 @@ type Wanted = {
   state: string;
   currentQualityClass: number | null;
   lastSearchedAt: string | null;
+  rgMbid: string | null;
+  primaryType: string | null;
+  firstReleaseDate: string | null;
 };
 
 function stateLabel(w: Wanted): string {
@@ -23,6 +28,7 @@ export function WantedClient() {
   const [artist, setArtist] = useState("");
   const [album, setAlbum] = useState("");
   const [error, setError] = useState("");
+  const [open, setOpen] = useState<Wanted | null>(null);
 
   async function refresh() {
     const res = await fetch("/api/wanted");
@@ -82,12 +88,17 @@ export function WantedClient() {
           {rows.map((w) => (
             <li key={w.id} className="list-row">
               <div className="main">
-                <div className="rtitle">
-                  {w.album} <span className="artist">· {w.artistName}</span>
-                </div>
-                <div className="rmeta">
-                  <span>{w.lastSearchedAt ? `last tried ${new Date(w.lastSearchedAt).toLocaleDateString()}` : "never tried"}</span>
-                </div>
+                <button className="disco-open" onClick={() => setOpen(w)} aria-label={`Open ${w.album}`}>
+                  <CoverArt rgMbid={w.rgMbid} alt={w.album} className="thumb" />
+                  <span>
+                    <span className="rtitle">
+                      {w.album} <span className="artist">· {w.artistName}</span>
+                    </span>
+                    <span className="rmeta">
+                      {w.lastSearchedAt ? `last tried ${new Date(w.lastSearchedAt).toLocaleDateString()}` : "never tried"}
+                    </span>
+                  </span>
+                </button>
               </div>
               <div className="actions">
                 <span className="chip">{stateLabel(w)}</span>
@@ -99,6 +110,32 @@ export function WantedClient() {
           ))}
         </ul>
       )}
+
+      {open ? (
+        <AlbumModal
+          open
+          onClose={() => setOpen(null)}
+          album={{
+            rgMbid: open.rgMbid,
+            album: open.album,
+            artist: open.artistName,
+            year: open.firstReleaseDate?.slice(0, 4) ?? null,
+            type: open.primaryType,
+          }}
+          status={<span className="chip working">{stateLabel(open)}</span>}
+          actions={
+            <button
+              className="btn sm ghost"
+              onClick={() => {
+                searchNow(open);
+                setOpen(null);
+              }}
+            >
+              Search now
+            </button>
+          }
+        />
+      ) : null}
     </div>
   );
 }