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>
+  )
 }

web/test/library.test.tsx

@@ -0,0 +1,113 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter } from 'react-router-dom'
+import LibraryPage from '../src/pages/LibraryPage.js'
+import type { Item } from '../src/types.js'
+
+vi.mock('../src/api.js', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../src/api.js')>()
+  return { ...actual, api: { ...actual.api, listCollection: vi.fn() } }
+})
+
+import { api } from '../src/api.js'
+
+function item(overrides: Partial<Item>): Item {
+  return {
+    id: 1,
+    discogsReleaseId: 100,
+    title: 'Motion',
+    artist: 'The Cinematic Orchestra',
+    year: 1999,
+    formats: ['CD'],
+    genres: [],
+    labels: [],
+    tracklist: [],
+    catno: null,
+    country: null,
+    artworkUrl: null,
+    barcodes: [],
+    dateAdded: '2026-08-29',
+    ripOverride: null,
+    ripStatus: 'not_ripped',
+    ...overrides,
+  }
+}
+
+const data = {
+  items: [
+    item({ id: 1, ripStatus: 'not_ripped' }),
+    item({ id: 2, title: 'Blue Lines', artist: 'Massive Attack', formats: ['Vinyl'], ripStatus: 'ripped' }),
+    item({ id: 3, title: 'Mezzanine', artist: 'Massive Attack', formats: ['Cassette'], ripStatus: 'not_ripped' }),
+  ],
+  counts: { total: 3, ripped: 1, notRipped: 2 },
+}
+
+beforeEach(() => {
+  vi.mocked(api.listCollection).mockReset()
+  vi.mocked(api.listCollection).mockResolvedValue(data as never)
+})
+
+function renderLibrary() {
+  return render(
+    <MemoryRouter>
+      <LibraryPage />
+    </MemoryRouter>
+  )
+}
+
+describe('LibraryPage', () => {
+  it('renders covers with artist and rip badges', async () => {
+    renderLibrary()
+    await waitFor(() => expect(screen.getAllByRole('link', { name: /motion/i })).toHaveLength(1))
+    expect(screen.getByRole('link', { name: /blue lines/i })).toBeTruthy()
+    expect(screen.getByRole('link', { name: /mezzanine/i })).toBeTruthy()
+  })
+
+  it('passes format and rip filters to the api', async () => {
+    renderLibrary()
+    await waitFor(() => expect(screen.getByRole('button', { name: /^vinyl$/i })).toBeTruthy())
+    await userEvent.click(screen.getByRole('button', { name: /^vinyl$/i }))
+    await waitFor(() =>
+      expect(api.listCollection).toHaveBeenLastCalledWith(expect.objectContaining({ format: 'Vinyl' }))
+    )
+    await userEvent.click(screen.getByRole('button', { name: /^ripped$/i }))
+    await waitFor(() =>
+      expect(api.listCollection).toHaveBeenLastCalledWith(
+        expect.objectContaining({ format: 'Vinyl', ripped: 'ripped' })
+      )
+    )
+  })
+
+  it('searches by title/artist via the q filter', async () => {
+    renderLibrary()
+    await waitFor(() => expect(screen.getByPlaceholderText(/search/i)).toBeTruthy())
+    await userEvent.type(screen.getByPlaceholderText(/search/i), 'mezz')
+    await waitFor(() =>
+      expect(api.listCollection).toHaveBeenLastCalledWith(expect.objectContaining({ q: 'mezz' }))
+    )
+  })
+
+  it('shows collection counts', async () => {
+    renderLibrary()
+    await waitFor(() => expect(screen.getByText(/3 in collection/i)).toBeTruthy())
+    expect(screen.getByText(/1 ripped/i)).toBeTruthy()
+    expect(screen.getByText(/2 not ripped/i)).toBeTruthy()
+  })
+
+  it('artist index sets the search box to the artist name', async () => {
+    renderLibrary()
+    const artistBtn = await screen.findByRole('button', { name: /massive attack/i })
+    await userEvent.click(artistBtn)
+    await waitFor(() =>
+      expect(api.listCollection).toHaveBeenLastCalledWith(expect.objectContaining({ q: 'Massive Attack' }))
+    )
+  })
+
+  it('shows an empty state when the collection is empty', async () => {
+    vi.mocked(api.listCollection).mockResolvedValue({ items: [], counts: { total: 0, ripped: 0, notRipped: 0 } } as never)
+    renderLibrary()
+    await waitFor(() => expect(screen.getByText(/nothing here yet/i)).toBeTruthy())
+    expect(screen.getByRole('link', { name: /add your first record/i }).getAttribute('href')).toBe('/add')
+  })
+})