feat(web): artist detail — category tabs, cover thumbs, album modal
Discography now has category tabs (All/Albums/Singles/EPs/Live/Comps/Other with counts, defaults to Albums), cover-art thumbnails, and clicking an album opens the AlbumModal with its tracklist. Detail GET gains ?all=true so the client filters by tab (studio-only default still governs the artists-list counts). Replaces the old flat date-sorted list + show-all toggle. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan
@@ -1,10 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { PageHead } from "../../_ui/page-head";
|
||||
import { CoverArt } from "../../_ui/cover-art";
|
||||
import { AlbumModal } from "../../_ui/album-modal";
|
||||
|
||||
type Release = {
|
||||
id: string;
|
||||
rgMbid: string | null;
|
||||
album: string;
|
||||
primaryType: string | null;
|
||||
secondaryTypes: string[];
|
||||
@@ -15,6 +18,19 @@ type Release = {
|
||||
};
|
||||
type Detail = { id: string; name: string; autoMonitorFuture: boolean; showAllTypes: boolean; releases: Release[] };
|
||||
|
||||
type Category = "Albums" | "Singles" | "EPs" | "Live" | "Comps" | "Other";
|
||||
const TAB_ORDER: Category[] = ["Albums", "Singles", "EPs", "Live", "Comps", "Other"];
|
||||
|
||||
function categoryOf(r: Release): Category {
|
||||
if (r.secondaryTypes.includes("Live")) return "Live";
|
||||
if (r.secondaryTypes.includes("Compilation")) return "Comps";
|
||||
if (r.secondaryTypes.length > 0) return "Other";
|
||||
if (r.primaryType === "Album") return "Albums";
|
||||
if (r.primaryType === "Single") return "Singles";
|
||||
if (r.primaryType === "EP") return "EPs";
|
||||
return "Other";
|
||||
}
|
||||
|
||||
function badge(r: Release): { label: string; cls: string } {
|
||||
if (r.currentQualityClass !== null) return { label: `Have q${r.currentQualityClass}`, cls: "chip done" };
|
||||
if (r.monitored) return { label: r.state === "wanted" ? "Wanted" : r.state, cls: "chip working" };
|
||||
@@ -23,9 +39,11 @@ function badge(r: Release): { label: string; cls: string } {
|
||||
|
||||
export function DiscographyClient({ id }: { id: string }) {
|
||||
const [detail, setDetail] = useState<Detail | null>(null);
|
||||
const [tab, setTab] = useState<"All" | Category>("Albums");
|
||||
const [openAlbum, setOpenAlbum] = useState<Release | null>(null);
|
||||
|
||||
async function refresh() {
|
||||
const res = await fetch(`/api/artists/${id}`);
|
||||
const res = await fetch(`/api/artists/${id}?all=true`);
|
||||
setDetail(res.ok ? await res.json() : null);
|
||||
}
|
||||
useEffect(() => {
|
||||
@@ -44,52 +62,57 @@ export function DiscographyClient({ id }: { id: string }) {
|
||||
await fetch(`/api/releases/${r.id}/search`, { method: "POST" });
|
||||
refresh();
|
||||
}
|
||||
async function toggleShowAll() {
|
||||
if (!detail) return;
|
||||
await fetch(`/api/artists/${id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ showAllTypes: !detail.showAllTypes }),
|
||||
|
||||
const counts = useMemo(() => {
|
||||
const c: Record<string, number> = {};
|
||||
detail?.releases.forEach((r) => {
|
||||
c[categoryOf(r)] = (c[categoryOf(r)] ?? 0) + 1;
|
||||
});
|
||||
refresh();
|
||||
}
|
||||
return c;
|
||||
}, [detail]);
|
||||
|
||||
if (!detail) return <p className="empty">Loading…</p>;
|
||||
|
||||
const tabs: ("All" | Category)[] = ["All", ...TAB_ORDER.filter((t) => counts[t])];
|
||||
const visible = tab === "All" ? detail.releases : detail.releases.filter((r) => categoryOf(r) === tab);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHead title={detail.name} eyebrow="Discography" />
|
||||
|
||||
<div className="tool-row">
|
||||
<label className="toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label="show all release types"
|
||||
checked={detail.showAllTypes}
|
||||
onChange={toggleShowAll}
|
||||
/>
|
||||
Show all types (live, compilations, singles…)
|
||||
</label>
|
||||
<div className="tabs">
|
||||
{tabs.map((t) => (
|
||||
<button key={t} className={`tab${tab === t ? " active" : ""}`} onClick={() => setTab(t)}>
|
||||
{t}
|
||||
<span className="n">{t === "All" ? detail.releases.length : counts[t]}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ul className="list">
|
||||
{detail.releases.map((r) => {
|
||||
{visible.map((r) => {
|
||||
const b = badge(r);
|
||||
return (
|
||||
<li key={r.id} className="list-row">
|
||||
<div className="main">
|
||||
<div className="rtitle">
|
||||
{r.album}
|
||||
{r.firstReleaseDate ? <span className="dim"> ({r.firstReleaseDate.slice(0, 4)})</span> : null}
|
||||
</div>
|
||||
<div className="rmeta">
|
||||
{r.primaryType ? <span>{r.primaryType}</span> : null}
|
||||
{r.secondaryTypes.length ? (
|
||||
<>
|
||||
<span className="dot">·</span>
|
||||
<span>{r.secondaryTypes.join(", ")}</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
<button className="disco-open" onClick={() => setOpenAlbum(r)} aria-label={`Open ${r.album}`}>
|
||||
<CoverArt rgMbid={r.rgMbid} alt={r.album} className="thumb" />
|
||||
<span>
|
||||
<span className="rtitle">
|
||||
{r.album}
|
||||
{r.firstReleaseDate ? <span className="dim"> ({r.firstReleaseDate.slice(0, 4)})</span> : null}
|
||||
</span>
|
||||
<span className="rmeta">
|
||||
{r.primaryType ? <span>{r.primaryType}</span> : null}
|
||||
{r.secondaryTypes.length ? (
|
||||
<>
|
||||
<span className="dot">·</span>
|
||||
<span>{r.secondaryTypes.join(", ")}</span>
|
||||
</>
|
||||
) : null}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<span className={b.cls}>{b.label}</span>
|
||||
@@ -105,6 +128,32 @@ export function DiscographyClient({ id }: { id: string }) {
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
{openAlbum ? (
|
||||
<AlbumModal
|
||||
open
|
||||
onClose={() => setOpenAlbum(null)}
|
||||
album={{
|
||||
rgMbid: openAlbum.rgMbid,
|
||||
album: openAlbum.album,
|
||||
artist: detail.name,
|
||||
year: openAlbum.firstReleaseDate?.slice(0, 4) ?? null,
|
||||
type: openAlbum.primaryType,
|
||||
}}
|
||||
status={<span className={badge(openAlbum).cls}>{badge(openAlbum).label}</span>}
|
||||
actions={
|
||||
<button
|
||||
className="btn sm ghost"
|
||||
onClick={() => {
|
||||
searchNow(openAlbum);
|
||||
setOpenAlbum(null);
|
||||
}}
|
||||
>
|
||||
Search now
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user