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>
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user