feat: library grid with rip/format filters, search and artist index

web/src/components/CoverGrid.tsx

@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom'
+import type { Item } from '../types.js'
+import Cover from './Cover.js'
+
+export default function CoverGrid({ items }: { items: Item[] }) {
+  return (
+    <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5">
+      {items.map((item) => (
+        <Link
+          key={item.id}
+          to={`/item/${item.id}`}
+          aria-label={`${item.artist} — ${item.title}`}
+          className="group"
+        >
+          <div className="relative">
+            <Cover src={item.artworkUrl} alt="" className="aspect-square w-full" />
+            <span
+              aria-label={item.ripStatus === 'ripped' ? 'ripped' : 'not ripped'}
+              className={`absolute right-1.5 top-1.5 size-3 rounded-full ring-2 ring-neutral-950 ${
+                item.ripStatus === 'ripped' ? 'bg-emerald-400' : 'bg-amber-500'
+              }`}
+            />
+          </div>
+          <p className="mt-1 truncate text-xs font-medium">{item.title}</p>
+          <p className="truncate text-xs text-neutral-500">{item.artist}</p>
+        </Link>
+      ))}
+    </div>
+  )
+}

web/src/pages/LibraryPage.tsx

@@ -1,3 +1,121 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { api } from '../api.js'
+import type { CollectionResponse } from '../types.js'
+import CoverGrid from '../components/CoverGrid.js'
+
+const FORMATS = ['All', 'Vinyl', 'CD', 'Cassette'] as const
+const RIP = ['All', 'Ripped', 'Not ripped'] as const
+
 export default function LibraryPage() {
-  return <p className="text-neutral-400">Library goes here.</p>
+  const [format, setFormat] = useState<(typeof FORMATS)[number]>('All')
+  const [ripped, setRipped] = useState<(typeof RIP)[number]>('All')
+  const [q, setQ] = useState('')
+  const [data, setData] = useState<CollectionResponse | null>(null)
+  const [error, setError] = useState(false)
+  const seq = useRef(0)
+
+  useEffect(() => {
+    const mine = ++seq.current
+    const params = {
+      ...(format !== 'All' ? { format } : {}),
+      ...(ripped !== 'All' ? { ripped: ripped === 'Ripped' ? 'ripped' : 'not_ripped' } : {}),
+      ...(q.trim() ? { q: q.trim() } : {}),
+    }
+    void api
+      .listCollection(params)
+      .then((res) => {
+        if (seq.current === mine) {
+          setData(res)
+          setError(false)
+        }
+      })
+      .catch(() => {
+        if (seq.current === mine) setError(true)
+      })
+  }, [format, ripped, q])
+
+  const artists = useMemo(() => {
+    const set = new Set<string>()
+    for (const item of data?.items ?? []) set.add(item.artist)
+    return [...set].sort((a, b) => a.localeCompare(b))
+  }, [data])
+
+  return (
+    <div className="space-y-4">
+      <input
+        type="search"
+        placeholder="Search title or artist"
+        value={q}
+        onChange={(e) => setQ(e.target.value)}
+        className="w-full rounded-xl border border-neutral-800 bg-neutral-900 px-3 py-2 text-sm"
+      />
+
+      <div className="flex flex-wrap gap-2">
+        {FORMATS.map((f) => (
+          <button
+            key={f}
+            type="button"
+            onClick={() => setFormat(f)}
+            className={`rounded-full px-3 py-1 text-xs font-medium ${
+              format === f ? 'bg-emerald-500 text-neutral-950' : 'border border-neutral-700 text-neutral-300'
+            }`}
+          >
+            {f}
+          </button>
+        ))}
+        {RIP.map((r) => (
+          <button
+            key={r}
+            type="button"
+            onClick={() => setRipped(r)}
+            className={`rounded-full px-3 py-1 text-xs font-medium ${
+              ripped === r ? 'bg-emerald-500 text-neutral-950' : 'border border-neutral-700 text-neutral-300'
+            }`}
+          >
+            {r}
+          </button>
+        ))}
+      </div>
+
+      {error && <p className="text-sm text-red-400">Could not load your collection.</p>}
+
+      {data && (
+        <>
+          <p className="text-xs text-neutral-500">
+            {data.counts.total} in collection · {data.counts.ripped} ripped · {data.counts.notRipped} not ripped
+          </p>
+
+          {data.items.length === 0 ? (
+            <div className="py-12 text-center">
+              <p className="text-neutral-400">Nothing here yet.</p>
+              <Link to="/add" className="mt-2 inline-block text-sm text-emerald-400">
+                Add your first record →
+              </Link>
+            </div>
+          ) : (
+            <CoverGrid items={data.items} />
+          )}
+
+          {!q && artists.length > 1 && (
+            <details className="rounded-xl border border-neutral-800 bg-neutral-900 p-3">
+              <summary className="cursor-pointer text-sm text-neutral-300">Artists</summary>
+              <div className="mt-2 flex flex-wrap gap-1.5">
+                {artists.map((artist) => (
+                  <button
+                    key={artist}
+                    type="button"
+                    onClick={() => setQ(artist)}
+                    className="rounded-full border border-neutral-700 px-2.5 py-0.5 text-xs text-neutral-300"
+                  >
+                    {artist}
+                  </button>
+                ))}
+              </div>
+            </details>
+          )}
+        </>
+      )}
+    </div>
+  )
 }