feat(web): /lastfm browse page (artists/albums tabs, hide-in-library, follow/want)

web/src/app/_ui/contents-nav.tsx

@@ -7,6 +7,7 @@ const LINKS: { href: string; label: string }[] = [
   { href: "/library", label: "Library" },
   { href: "/artists", label: "Artists" },
   { href: "/discover", label: "Discover" },
+  { href: "/lastfm", label: "Last.fm" },
   { href: "/wanted", label: "Wanted" },
 ];
 

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

@@ -0,0 +1,345 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { PageHead } from "../_ui/page-head";
+import { ArtistModal } from "../_ui/artist-modal";
+import { AlbumModal } from "../_ui/album-modal";
+import { toast } from "../_ui/toast";
+
+type Tab = "Artists" | "Albums";
+type Period = "overall" | "7day" | "1month" | "3month" | "6month" | "12month";
+const PERIODS: { value: Period; label: string }[] = [
+  { value: "overall", label: "Overall" },
+  { value: "7day", label: "7 days" },
+  { value: "1month", label: "1 month" },
+  { value: "3month", label: "3 months" },
+  { value: "6month", label: "6 months" },
+  { value: "12month", label: "12 months" },
+];
+
+type ArtistRow = { name: string; playcount: number; mbid: string | null; inLibrary: boolean; followed: boolean; owned: boolean };
+type AlbumRow = { name: string; artist: string; playcount: number; mbid: string | null; inLibrary: boolean; owned: boolean; wanted: boolean };
+
+type ReleaseGroupMatch = {
+  rgMbid: string;
+  title: string;
+  primaryType: string | null;
+  secondaryTypes: string[];
+  firstReleaseDate: string | null;
+  artistMbid: string;
+  artistName: string;
+};
+
+type LoadError = { kind: "creds" } | { kind: "lastfm"; message: string };
+
+export function LastfmClient() {
+  const [tab, setTab] = useState<Tab>("Artists");
+  const [period, setPeriod] = useState<Period>("overall");
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [hideInLibrary, setHideInLibrary] = useState(false);
+  const [filter, setFilter] = useState("");
+
+  const [artists, setArtists] = useState<ArtistRow[]>([]);
+  const [albums, setAlbums] = useState<AlbumRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<LoadError | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+
+  const [artistModal, setArtistModal] = useState<{ mbid: string; name: string } | null>(null);
+  const [albumTarget, setAlbumTarget] = useState<{ row: AlbumRow; match: ReleaseGroupMatch } | null>(null);
+  const [wantedSet, setWantedSet] = useState<Set<string>>(new Set());
+
+  function selectTab(t: Tab) {
+    setTab(t);
+    setPage(1);
+  }
+  function selectPeriod(p: Period) {
+    setPeriod(p);
+    setPage(1);
+  }
+  function retry() {
+    setReloadKey((k) => k + 1);
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    const path = tab === "Artists" ? "/api/lastfm/top-artists" : "/api/lastfm/top-albums";
+    fetch(`${path}?period=${period}&page=${page}`)
+      .then(async (res) => {
+        if (cancelled) return;
+        if (res.status === 400) {
+          setError({ kind: "creds" });
+          return;
+        }
+        if (!res.ok) {
+          const d = await res.json().catch(() => ({}) as { error?: string });
+          setError({ kind: "lastfm", message: d.error ?? "Last.fm request failed" });
+          return;
+        }
+        const d = await res.json();
+        if (tab === "Artists") {
+          setArtists(d.artists ?? []);
+        } else {
+          setAlbums(d.albums ?? []);
+        }
+        setTotalPages(d.totalPages ?? 1);
+      })
+      .catch(() => {
+        if (!cancelled) setError({ kind: "lastfm", message: "Last.fm request failed" });
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [tab, period, page, reloadKey]);
+
+  const shownArtists = useMemo(() => {
+    const needle = filter.trim().toLowerCase();
+    return artists.filter((a) => {
+      if (hideInLibrary && a.inLibrary) return false;
+      if (needle && !a.name.toLowerCase().includes(needle)) return false;
+      return true;
+    });
+  }, [artists, filter, hideInLibrary]);
+
+  const shownAlbums = useMemo(() => {
+    const needle = filter.trim().toLowerCase();
+    return albums.filter((a) => {
+      if (hideInLibrary && a.inLibrary) return false;
+      if (needle && !`${a.artist} ${a.name}`.toLowerCase().includes(needle)) return false;
+      return true;
+    });
+  }, [albums, filter, hideInLibrary]);
+
+  async function openArtist(row: ArtistRow) {
+    let mbid = row.mbid;
+    if (!mbid) {
+      const res = await fetch(`/api/mb/artists?q=${encodeURIComponent(row.name)}`);
+      if (res.ok) {
+        const d = await res.json();
+        mbid = d.artists?.[0]?.mbid ?? null;
+      }
+    }
+    if (!mbid) {
+      toast(`No MusicBrainz match for ${row.name}`);
+      return;
+    }
+    setArtistModal({ mbid, name: row.name });
+  }
+
+  async function openAlbum(row: AlbumRow) {
+    const res = await fetch(`/api/mb/release-group?artist=${encodeURIComponent(row.artist)}&album=${encodeURIComponent(row.name)}`);
+    if (res.status === 404) {
+      toast("No MusicBrainz match");
+      return;
+    }
+    if (!res.ok) {
+      toast("MusicBrainz unavailable");
+      return;
+    }
+    const match: ReleaseGroupMatch = await res.json();
+    setAlbumTarget({ row, match });
+  }
+
+  async function want() {
+    if (!albumTarget) return;
+    const { match } = albumTarget;
+    const res = await fetch("/api/discover/want", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        rgMbid: match.rgMbid,
+        artistMbid: match.artistMbid,
+        artistName: match.artistName,
+        album: match.title,
+        primaryType: match.primaryType,
+        secondaryTypes: match.secondaryTypes,
+        firstReleaseDate: match.firstReleaseDate,
+      }),
+    });
+    if (res.ok) {
+      toast(`Wanted ${match.title}`);
+      setWantedSet((s) => new Set(s).add(match.rgMbid));
+      setAlbumTarget(null);
+    }
+  }
+
+  const rowCount = tab === "Artists" ? shownArtists.length : shownAlbums.length;
+
+  return (
+    <div>
+      <PageHead title="Last.fm" eyebrow="Your listening history · follow what's missing" />
+
+      <div className="tabs">
+        <button className={`tab${tab === "Artists" ? " active" : ""}`} onClick={() => selectTab("Artists")}>
+          Artists
+          <span className="n">{tab === "Artists" ? rowCount : ""}</span>
+        </button>
+        <button className={`tab${tab === "Albums" ? " active" : ""}`} onClick={() => selectTab("Albums")}>
+          Albums
+          <span className="n">{tab === "Albums" ? rowCount : ""}</span>
+        </button>
+      </div>
+
+      <form className="request-form" onSubmit={(e) => e.preventDefault()}>
+        <label className="field">
+          <span>Period</span>
+          <select aria-label="period" value={period} onChange={(e) => selectPeriod(e.target.value as Period)}>
+            {PERIODS.map((p) => (
+              <option key={p.value} value={p.value}>
+                {p.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="field">
+          <span>Filter</span>
+          <input aria-label="filter" placeholder="Artist or album…" value={filter} onChange={(e) => setFilter(e.target.value)} />
+        </label>
+        <label className="toggle">
+          <input
+            type="checkbox"
+            aria-label="hide items in my library"
+            checked={hideInLibrary}
+            onChange={(e) => setHideInLibrary(e.target.checked)}
+          />
+          Hide items in my library
+        </label>
+      </form>
+
+      {error?.kind === "creds" ? (
+        <div className="info-panel">
+          Connect your Last.fm account in <a href="/settings">Settings</a> to browse your top artists and albums.
+        </div>
+      ) : null}
+
+      {error?.kind === "lastfm" ? (
+        <p className="muted-note">
+          <span className="notice">{error.message}</span>{" "}
+          <button className="btn sm ghost" onClick={retry}>
+            Retry
+          </button>
+        </p>
+      ) : null}
+
+      {!error && loading ? <p className="empty">Loading…</p> : null}
+
+      {!error && !loading && tab === "Artists" ? (
+        shownArtists.length === 0 ? (
+          <p className="empty">No artists on this page.</p>
+        ) : (
+          <ul className="list">
+            {shownArtists.map((a) => (
+              <li key={a.mbid ?? a.name} className="list-row">
+                <div className="main">
+                  <div className="rtitle">
+                    <button className="linkish" onClick={() => openArtist(a)}>
+                      {a.name}
+                    </button>
+                  </div>
+                  <div className="rmeta">
+                    <span>{a.playcount} plays</span>
+                  </div>
+                </div>
+                <div className="actions">
+                  {a.owned ? (
+                    <span className="chip done">In library</span>
+                  ) : a.followed ? (
+                    <span className="chip working">Following</span>
+                  ) : null}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )
+      ) : null}
+
+      {!error && !loading && tab === "Albums" ? (
+        shownAlbums.length === 0 ? (
+          <p className="empty">No albums on this page.</p>
+        ) : (
+          <ul className="list">
+            {shownAlbums.map((a) => (
+              <li key={`${a.artist}-${a.name}`} className="list-row">
+                <div className="main">
+                  <div className="rtitle">
+                    <button className="linkish" onClick={() => openAlbum(a)}>
+                      {a.artist} — {a.name}
+                    </button>
+                  </div>
+                  <div className="rmeta">
+                    <span>{a.playcount} plays</span>
+                  </div>
+                </div>
+                <div className="actions">
+                  {a.owned ? (
+                    <span className="chip done">In library</span>
+                  ) : a.wanted ? (
+                    <span className="chip working">Wanted</span>
+                  ) : null}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )
+      ) : null}
+
+      {!error ? (
+        <div className="tool-row">
+          <button className="btn sm ghost" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>
+            Prev
+          </button>
+          <span className="rmeta">
+            {page} / {totalPages}
+          </span>
+          <button className="btn sm ghost" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page >= totalPages}>
+            Next
+          </button>
+        </div>
+      ) : null}
+
+      {artistModal ? (
+        <ArtistModal open onClose={() => setArtistModal(null)} mbid={artistModal.mbid} initialName={artistModal.name} />
+      ) : null}
+
+      {albumTarget ? (
+        (() => {
+          const owned = albumTarget.row.owned;
+          const wanted = albumTarget.row.wanted || wantedSet.has(albumTarget.match.rgMbid);
+          return (
+            <AlbumModal
+              open
+              onClose={() => setAlbumTarget(null)}
+              album={{
+                rgMbid: albumTarget.match.rgMbid,
+                album: albumTarget.match.title,
+                artist: albumTarget.match.artistName,
+                year: albumTarget.match.firstReleaseDate?.slice(0, 4) ?? null,
+                type: albumTarget.match.primaryType,
+              }}
+              status={
+                owned ? (
+                  <span className="chip done">In library</span>
+                ) : wanted ? (
+                  <span className="chip working">Wanted</span>
+                ) : null
+              }
+              actions={
+                owned || wanted ? null : (
+                  <button className="btn sm" onClick={want}>
+                    Want
+                  </button>
+                )
+              }
+            />
+          );
+        })()
+      ) : null}
+    </div>
+  );
+}

web/src/app/lastfm/page.tsx

@@ -0,0 +1,5 @@
+import { LastfmClient } from "./lastfm-client";
+
+export default function LastfmPage() {
+  return <LastfmClient />;
+}