feat: item detail with rip override, re-match and remove

web/src/App.tsx

@@ -5,6 +5,7 @@ import Shell from './shell'
 import SetupPage from './pages/SetupPage'
 import LoginPage from './pages/LoginPage'
 import LibraryPage from './pages/LibraryPage'
+import ItemPage from './pages/ItemPage'
 import ScanPage from './pages/ScanPage'
 import AddPage from './pages/AddPage'
 import SettingsPage from './pages/SettingsPage'
@@ -34,6 +35,7 @@ export default function App() {
             }
           >
             <Route path="/library" element={<LibraryPage />} />
+            <Route path="/item/:id" element={<ItemPage />} />
             <Route path="/scan" element={<ScanPage />} />
             <Route path="/add" element={<AddPage />} />
             <Route path="/settings" element={<SettingsPage />} />

web/src/pages/ItemPage.tsx

@@ -0,0 +1,206 @@
+import { useEffect, useState } from 'react'
+import { Link, useNavigate, useParams } from 'react-router-dom'
+import { api } from '../api.js'
+import type { DigitalAlbum, Item } from '../types.js'
+import Cover from '../components/Cover.js'
+
+export default function ItemPage() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const [item, setItem] = useState<Item | null>(null)
+  const [error, setError] = useState(false)
+  const [matching, setMatching] = useState(false)
+  const [albumQuery, setAlbumQuery] = useState('')
+  const [albums, setAlbums] = useState<DigitalAlbum[] | null>(null)
+  const [pickedAlbum, setPickedAlbum] = useState<number | null>(null)
+  const [confirmRemove, setConfirmRemove] = useState(false)
+
+  useEffect(() => {
+    void api
+      .getItem(Number(id))
+      .then(setItem)
+      .catch(() => setError(true))
+  }, [id])
+
+  function searchAlbums() {
+    void api
+      .searchAlbums(albumQuery)
+      .then((res) => setAlbums(res.albums))
+      .catch(() => setAlbums([]))
+  }
+
+  function applyMatch(albumId: number | null) {
+    if (!item) return
+    void api.setMatch(item.id, albumId).then(setItem)
+  }
+
+  function remove() {
+    if (!item) return
+    void api.deleteItem(item.id).then(() => navigate('/library'))
+  }
+
+  if (error) return <p className="py-8 text-center text-sm text-red-400">Item not found.</p>
+  if (!item) return <p className="py-8 text-center text-sm text-neutral-400">Loading…</p>
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-4">
+        <Cover src={item.artworkUrl} alt="" className="size-32 shrink-0" />
+        <div className="min-w-0">
+          <h2 className="text-lg font-semibold leading-tight">{item.title}</h2>
+          <p className="text-neutral-400">{item.artist}</p>
+          <p className="text-xs text-neutral-500">
+            {[item.year, item.formats.join(', '), item.labels.join(', '), item.catno, item.country]
+              .filter(Boolean)
+              .join(' · ')}
+          </p>
+          {item.genres.length > 0 && <p className="mt-1 text-xs text-neutral-500">{item.genres.join(', ')}</p>}
+          <a
+            href={`https://www.discogs.com/release/${item.discogsReleaseId}`}
+            target="_blank"
+            rel="noreferrer"
+            className="mt-1 inline-block text-xs text-emerald-400"
+          >
+            View on Discogs ↗
+          </a>
+        </div>
+      </div>
+
+      {item.ripStatus === 'ripped' ? (
+        <p className="rounded-xl bg-emerald-500/10 px-4 py-3 text-sm text-emerald-400">
+          In your digital collection ✓
+          {item.ripOverride !== null && ' (manually set)'}
+        </p>
+      ) : (
+        <p className="rounded-xl bg-amber-500/10 px-4 py-3 text-sm text-amber-400">Not ripped yet</p>
+      )}
+
+      <div className="flex flex-wrap gap-2">
+        {item.ripStatus === 'ripped' ? (
+          <>
+            <button
+              type="button"
+              onClick={() => void api.setRip(item.id, false).then(setItem)}
+              className="rounded-xl border border-neutral-700 px-3 py-1.5 text-sm text-neutral-300"
+            >
+              Mark not ripped
+            </button>
+            {item.ripOverride !== null && (
+              <button
+                type="button"
+                onClick={() => void api.setRip(item.id, null).then(setItem)}
+                className="rounded-xl border border-neutral-700 px-3 py-1.5 text-sm text-neutral-300"
+              >
+                Reset to auto
+              </button>
+            )}
+          </>
+        ) : (
+          <button
+            type="button"
+            onClick={() => void api.setRip(item.id, true).then(setItem)}
+            className="rounded-xl border border-neutral-700 px-3 py-1.5 text-sm text-neutral-300"
+          >
+            Mark ripped
+          </button>
+        )}
+      </div>
+
+      <section className="rounded-xl border border-neutral-800 bg-neutral-900 p-3">
+        <button
+          type="button"
+          onClick={() => setMatching((m) => !m)}
+          className="text-sm font-medium text-neutral-200"
+          aria-expanded={matching}
+        >
+          Re-match
+        </button>
+        {matching && (
+          <div className="mt-3 space-y-2">
+            <div className="flex gap-2">
+              <input
+                value={albumQuery}
+                onChange={(e) => setAlbumQuery(e.target.value)}
+                placeholder="Search your digital library"
+                className="min-w-0 flex-1 rounded-lg border border-neutral-700 bg-neutral-950 px-3 py-1.5 text-sm"
+              />
+              <button
+                type="button"
+                onClick={searchAlbums}
+                className="rounded-lg border border-neutral-700 px-3 py-1.5 text-sm text-neutral-300"
+              >
+                Search
+              </button>
+            </div>
+            {albums && albums.length === 0 && <p className="text-sm text-neutral-500">No matches in your library.</p>}
+            {albums && albums.length > 0 && (
+              <div className="space-y-1.5">
+                {albums.map((a) => (
+                  <label key={a.id} className="flex items-center gap-2 text-sm">
+                    <input
+                      type="radio"
+                      name="album"
+                      checked={pickedAlbum === a.id}
+                      onChange={() => setPickedAlbum(a.id)}
+                    />
+                    {a.artist} — {a.title}
+                  </label>
+                ))}
+              </div>
+            )}
+            <div className="flex gap-2">
+              <button
+                type="button"
+                disabled={pickedAlbum === null}
+                onClick={() => applyMatch(pickedAlbum)}
+                className="rounded-lg bg-emerald-500 px-3 py-1.5 text-sm font-medium text-neutral-950 disabled:opacity-50"
+              >
+                Link
+              </button>
+              <button
+                type="button"
+                onClick={() => applyMatch(null)}
+                className="rounded-lg border border-neutral-700 px-3 py-1.5 text-sm text-neutral-300"
+              >
+                Unlink
+              </button>
+            </div>
+          </div>
+        )}
+      </section>
+
+      {item.tracklist.length > 0 && (
+        <details className="rounded-xl border border-neutral-800 bg-neutral-900 p-3" open>
+          <summary className="cursor-pointer text-sm text-neutral-300">Tracklist</summary>
+          <ol className="mt-2 space-y-1 text-sm text-neutral-400">
+            {item.tracklist.map((t, i) => (
+              <li key={i} className="flex gap-2">
+                <span className="w-8 shrink-0 text-neutral-600">{t.position}</span>
+                <span>{t.title}</span>
+              </li>
+            ))}
+          </ol>
+        </details>
+      )}
+
+      {item.barcodes.length > 0 && (
+        <p className="text-xs text-neutral-500">Barcodes: {item.barcodes.join(', ')}</p>
+      )}
+
+      <div className="flex justify-between border-t border-neutral-800 pt-4">
+        <Link to="/library" className="text-sm text-neutral-400">
+          ← Back
+        </Link>
+        {confirmRemove ? (
+          <button type="button" onClick={remove} className="text-sm font-medium text-red-400">
+            Confirm remove
+          </button>
+        ) : (
+          <button type="button" onClick={() => setConfirmRemove(true)} className="text-sm text-red-400">
+            Remove
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

web/test/item.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, Route, Routes } from 'react-router-dom'
+import ItemPage from '../src/pages/ItemPage.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, getItem: vi.fn(), setRip: vi.fn(), setMatch: vi.fn(), deleteItem: vi.fn(), searchAlbums: vi.fn() },
+  }
+})
+
+import { api } from '../src/api.js'
+
+const item: Item = {
+  id: 1,
+  discogsReleaseId: 1001,
+  title: 'Motion',
+  artist: 'The Cinematic Orchestra',
+  year: 1999,
+  formats: ['CD'],
+  genres: ['Electronic'],
+  labels: ['Ninja Tune'],
+  tracklist: [{ position: '1', title: 'Overture' }],
+  catno: 'ZENCD012',
+  country: 'UK',
+  artworkUrl: '/artwork/abc.jpg',
+  barcodes: ['5021592210629'],
+  dateAdded: '2026-08-29',
+  ripOverride: null,
+  ripStatus: 'not_ripped',
+}
+
+beforeEach(() => {
+  vi.mocked(api.getItem).mockReset()
+  vi.mocked(api.getItem).mockResolvedValue(item as never)
+  vi.mocked(api.setRip).mockReset()
+  vi.mocked(api.setMatch).mockReset()
+  vi.mocked(api.deleteItem).mockReset()
+  vi.mocked(api.searchAlbums).mockReset()
+})
+
+function renderItem() {
+  return render(
+    <MemoryRouter initialEntries={['/item/1']}>
+      <Routes>
+        <Route path="/item/:id" element={<ItemPage />} />
+        <Route path="/library" element={<p>library</p>} />
+      </Routes>
+    </MemoryRouter>
+  )
+}
+
+describe('ItemPage', () => {
+  it('renders metadata and the rip-status banner', async () => {
+    renderItem()
+    await waitFor(() => expect(screen.getByRole('heading', { name: 'Motion' })).toBeTruthy())
+    expect(screen.getByText('The Cinematic Orchestra')).toBeTruthy()
+    expect(screen.getByText(/not ripped yet/i)).toBeTruthy()
+    expect(screen.getByText(/ZENCD012/)).toBeTruthy()
+    expect(screen.getByText(/5021592210629/)).toBeTruthy()
+    expect(screen.getByText('Overture')).toBeTruthy()
+    expect(screen.getByRole('link', { name: /view on discogs/i }).getAttribute('href')).toBe(
+      'https://www.discogs.com/release/1001'
+    )
+  })
+
+  it('rip override: mark ripped, then reset to auto', async () => {
+    vi.mocked(api.setRip).mockResolvedValue({ ...item, ripOverride: true, ripStatus: 'ripped' } as never)
+    renderItem()
+    await userEvent.click(await screen.findByRole('button', { name: /mark ripped/i }))
+    await waitFor(() => expect(api.setRip).toHaveBeenCalledWith(1, true))
+    await waitFor(() => expect(screen.getByText(/in your digital collection/i)).toBeTruthy())
+
+    vi.mocked(api.setRip).mockResolvedValue(item as never)
+    await userEvent.click(screen.getByRole('button', { name: /reset to auto/i }))
+    await waitFor(() => expect(api.setRip).toHaveBeenCalledWith(1, null))
+  })
+
+  it('re-match: search albums and link one', async () => {
+    vi.mocked(api.searchAlbums).mockResolvedValue({
+      albums: [{ id: 77, subsonicId: 'a1', title: 'Motion (Remaster)', artist: 'The Cinematic Orchestra' }],
+    } as never)
+    vi.mocked(api.setMatch).mockResolvedValue({ ...item, ripStatus: 'ripped' } as never)
+    renderItem()
+    await userEvent.click(await screen.findByRole('button', { name: /re-match/i }))
+    await userEvent.click(screen.getByRole('button', { name: /^search$/i }))
+    const albumRadio = await screen.findByRole('radio', { name: /motion \(remaster\)/i })
+    await userEvent.click(albumRadio)
+    await userEvent.click(screen.getByRole('button', { name: /^link$/i }))
+    await waitFor(() => expect(api.setMatch).toHaveBeenCalledWith(1, 77))
+  })
+
+  it('unlink clears the match', async () => {
+    vi.mocked(api.setMatch).mockResolvedValue(item as never)
+    renderItem()
+    await userEvent.click(await screen.findByRole('button', { name: /re-match/i }))
+    await userEvent.click(screen.getByRole('button', { name: /^unlink$/i }))
+    await waitFor(() => expect(api.setMatch).toHaveBeenCalledWith(1, null))
+  })
+
+  it('remove deletes the item and navigates back to the library', async () => {
+    vi.mocked(api.deleteItem).mockResolvedValue({ ok: true } as never)
+    renderItem()
+    await userEvent.click(await screen.findByRole('button', { name: /^remove$/i }))
+    await userEvent.click(await screen.findByRole('button', { name: /^confirm remove$/i }))
+    await waitFor(() => expect(api.deleteItem).toHaveBeenCalledWith(1))
+    await waitFor(() => expect(screen.getByText('library')).toBeTruthy())
+  })
+})