feat(web): discovery modals — artist + album, not preview navigation

Clicking a suggested (or find-similar) artist opens an ArtistModal: Follow +
a cover-art grid of their releases with per-album Want (reuses the preview
endpoint), plus a "Full page" link to the deep-linkable preview route. Clicking
a suggested album opens the AlbumModal (tracklist + Want). Lighter than jumping
to a full preview page.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/app/_ui/artist-modal.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Modal } from "./modal";
+import { CoverArt } from "./cover-art";
+
+type Rel = {
+  rgMbid: string;
+  album: string;
+  primaryType: string | null;
+  secondaryTypes: string[];
+  firstReleaseDate: string | null;
+  monitored: boolean;
+  have: boolean;
+};
+type Preview = { artistName: string; followed: boolean; releases: Rel[] };
+
+/** Lightweight artist preview in a modal: follow + a cover-art grid of their releases with
+ *  per-album Want. Reuses the discovery preview endpoint. The full preview page stays for
+ *  deep links (linked here as "Full page"). */
+export function ArtistModal({
+  open,
+  onClose,
+  mbid,
+  initialName,
+}: {
+  open: boolean;
+  onClose: () => void;
+  mbid: string;
+  initialName: string;
+}) {
+  const [data, setData] = useState<Preview | "loading" | "error">("loading");
+  const [followed, setFollowed] = useState(false);
+  const [wanted, setWanted] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (!open) return;
+    setData("loading");
+    setWanted(new Set());
+    let cancelled = false;
+    const qs = new URLSearchParams();
+    if (initialName) qs.set("name", initialName);
+    fetch(`/api/discover/preview/${mbid}?${qs.toString()}`)
+      .then((r) => (r.ok ? r.json() : Promise.reject()))
+      .then((d: Preview) => {
+        if (cancelled) return;
+        setData(d);
+        setFollowed(d.followed);
+      })
+      .catch(() => !cancelled && setData("error"));
+    return () => {
+      cancelled = true;
+    };
+  }, [open, mbid, initialName]);
+
+  const name = typeof data === "object" ? data.artistName || initialName : initialName;
+
+  async function follow() {
+    const res = await fetch("/api/artists", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ mbid, name }),
+    });
+    if (res.ok || res.status === 409) setFollowed(true);
+  }
+
+  async function want(r: Rel) {
+    const res = await fetch("/api/discover/want", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        rgMbid: r.rgMbid,
+        artistMbid: mbid,
+        artistName: name,
+        album: r.album,
+        primaryType: r.primaryType,
+        secondaryTypes: r.secondaryTypes,
+        firstReleaseDate: r.firstReleaseDate,
+      }),
+    });
+    if (res.ok) setWanted((s) => new Set(s).add(r.rgMbid));
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title="Artist" wide>
+      <div className="artist-modal-head">
+        <h2 className="album-modal-title">{name || "Artist"}</h2>
+        <div className="actions artist-modal-actions">
+          {followed ? <span className="following">Following</span> : (
+            <button className="btn accent sm" onClick={follow}>
+              Follow
+            </button>
+          )}
+          <a href={`/discover/artist/${mbid}?name=${encodeURIComponent(name)}`}>Full page ↗</a>
+        </div>
+      </div>
+
+      {data === "loading" ? <p className="muted-note">Loading…</p> : null}
+      {data === "error" ? <p className="muted-note">Couldn’t load this artist.</p> : null}
+      {typeof data === "object" ? (
+        data.releases.length === 0 ? (
+          <p className="muted-note">No releases found.</p>
+        ) : (
+          <div className="artist-modal-grid">
+            {data.releases.slice(0, 18).map((r) => {
+              const owned = r.have;
+              const monitored = r.monitored || wanted.has(r.rgMbid);
+              return (
+                <div key={r.rgMbid} className="am-rel">
+                  <CoverArt rgMbid={r.rgMbid} alt={r.album} />
+                  <div className="ac-title">{r.album}</div>
+                  <div className="ac-meta">
+                    {r.primaryType}
+                    {r.firstReleaseDate ? ` · ${r.firstReleaseDate.slice(0, 4)}` : ""}
+                  </div>
+                  <div className="am-rel-action">
+                    {owned ? (
+                      <span className="chip done">In library</span>
+                    ) : monitored ? (
+                      <span className="chip working">Wanted</span>
+                    ) : (
+                      <button className="btn sm" onClick={() => want(r)}>
+                        Want
+                      </button>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )
+      ) : null}
+    </Modal>
+  );
+}

web/src/app/design.css

@@ -322,3 +322,13 @@ nav.contents .sep { flex: 1; }
 .ac-title { font-size: 0.98rem; line-height: 1.25; }
 .ac-artist { color: var(--graphite); font-size: 0.86rem; margin-top: 1px; }
 .ac-meta { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); margin-top: 5px; }
+
+/* ── Link-styled button + artist modal ────────────────── */
+.linkish { background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; }
+.linkish:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
+.artist-modal-head { margin-bottom: 18px; }
+.artist-modal-actions { margin-top: 10px; align-items: center; }
+.artist-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px 14px; max-height: 56vh; overflow-y: auto; padding-top: 4px; }
+.am-rel .cover { margin-bottom: 7px; }
+.am-rel .ac-title { font-size: 0.9rem; }
+.am-rel-action { margin-top: 7px; }

web/src/app/discover/discover-client.tsx

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useState } from "react";
 import { PageHead } from "../_ui/page-head";
 import { SectionHeader } from "../_ui/section-header";
+import { ArtistModal } from "../_ui/artist-modal";
+import { AlbumModal } from "../_ui/album-modal";
 
 type Suggestion = {
   id: string;
@@ -29,6 +31,8 @@ export function DiscoverClient() {
   const [search, setSearch] = useState<SearchResult | null>(null);
   const [busy, setBusy] = useState(false);
   const [followedSimilar, setFollowedSimilar] = useState<Set<string>>(new Set());
+  const [artistModal, setArtistModal] = useState<{ mbid: string; name: string } | null>(null);
+  const [albumModal, setAlbumModal] = useState<Suggestion | null>(null);
 
   const loadFeed = useCallback(async () => {
     setFeed(await (await fetch("/api/discover")).json());
@@ -121,7 +125,9 @@ export function DiscoverClient() {
             <li key={s.mbid} className="list-row">
               <div className="main">
                 <div className="rtitle">
-                  <a href={`/discover/artist/${s.mbid}?name=${encodeURIComponent(s.name)}`}>{s.name}</a>
+                  <button className="linkish" onClick={() => setArtistModal({ mbid: s.mbid, name: s.name })}>
+                    {s.name}
+                  </button>
                 </div>
                 <div className="rmeta">
                   <span className="score">similarity {s.score.toFixed(1)}</span>
@@ -150,7 +156,9 @@ export function DiscoverClient() {
             <li key={s.id} className="list-row">
               <div className="main">
                 <div className="rtitle">
-                  <a href={`/discover/artist/${s.artistMbid}?name=${encodeURIComponent(s.artistName)}`}>{s.artistName}</a>
+                  <button className="linkish" onClick={() => setArtistModal({ mbid: s.artistMbid, name: s.artistName })}>
+                    {s.artistName}
+                  </button>
                 </div>
                 <div className="rmeta">
                   <span className="score">score {s.score.toFixed(2)}</span>
@@ -182,9 +190,9 @@ export function DiscoverClient() {
             <li key={s.id} className="list-row">
               <div className="main">
                 <div className="rtitle">
-                  <a href={`/discover/artist/${s.artistMbid}?name=${encodeURIComponent(s.artistName)}#rg-${s.rgMbid}`}>
+                  <button className="linkish" onClick={() => setAlbumModal(s)}>
                     {s.album}
-                  </a>{" "}
+                  </button>{" "}
                   <span className="artist">· {s.artistName}</span>
                 </div>
                 <div className="rmeta">
@@ -203,6 +211,27 @@ export function DiscoverClient() {
           ))}
         </ul>
       )}
+      {artistModal ? (
+        <ArtistModal open onClose={() => setArtistModal(null)} mbid={artistModal.mbid} initialName={artistModal.name} />
+      ) : null}
+      {albumModal ? (
+        <AlbumModal
+          open
+          onClose={() => setAlbumModal(null)}
+          album={{ rgMbid: albumModal.rgMbid, album: albumModal.album ?? "", artist: albumModal.artistName, year: null, type: null }}
+          actions={
+            <button
+              className="btn sm"
+              onClick={() => {
+                act(albumModal.id, "want");
+                setAlbumModal(null);
+              }}
+            >
+              Want
+            </button>
+          }
+        />
+      ) : null}
     </div>
   );
 }