feat: rip queue page, library stats/queue links and on-loan chip

web/src/App.tsx

@@ -11,6 +11,7 @@ import ItemPage from './pages/ItemPage'
 import ScanPage from './pages/ScanPage'
 import AddPage from './pages/AddPage'
 import SettingsPage from './pages/SettingsPage'
+import QueuePage from './pages/QueuePage'
 
 function Gate({ children }: { children: ReactNode }) {
   const { status } = useAuth()
@@ -44,6 +45,7 @@ export default function App() {
             <Route path="/scan" element={<ScanPage />} />
             <Route path="/add" element={<AddPage />} />
             <Route path="/settings" element={<SettingsPage />} />
+            <Route path="/queue" element={<QueuePage />} />
           </Route>
           <Route path="*" element={<Navigate to="/library" replace />} />
         </Routes>

web/src/pages/LibraryPage.tsx

@@ -10,6 +10,7 @@ const RIP = ['All', 'Ripped', 'Not ripped'] as const
 export default function LibraryPage() {
   const [format, setFormat] = useState<(typeof FORMATS)[number]>('All')
   const [ripped, setRipped] = useState<(typeof RIP)[number]>('All')
+  const [onLoan, setOnLoan] = useState(false)
   const [q, setQ] = useState('')
   const [data, setData] = useState<CollectionResponse | null>(null)
   const [error, setError] = useState(false)
@@ -20,6 +21,7 @@ export default function LibraryPage() {
     const params = {
       ...(format !== 'All' ? { format } : {}),
       ...(ripped !== 'All' ? { ripped: ripped === 'Ripped' ? 'ripped' : 'not_ripped' } : {}),
+      ...(onLoan ? { onLoan: 'true' } : {}),
       ...(q.trim() ? { q: q.trim() } : {}),
     }
     void api
@@ -33,7 +35,7 @@ export default function LibraryPage() {
       .catch(() => {
         if (seq.current === mine) setError(true)
       })
-  }, [format, ripped, q])
+  }, [format, ripped, onLoan, q])
 
   const artists = useMemo(() => {
     const set = new Set<string>()
@@ -43,6 +45,15 @@ export default function LibraryPage() {
 
   return (
     <div className="space-y-4">
+      <div className="flex gap-3 text-sm">
+        <Link to="/stats" className="text-emerald-400">
+          Stats
+        </Link>
+        <Link to="/queue" className="text-emerald-400">
+          Queue
+        </Link>
+      </div>
+
       <input
         type="search"
         placeholder="Search title or artist"
@@ -76,6 +87,15 @@ export default function LibraryPage() {
             {r}
           </button>
         ))}
+        <button
+          type="button"
+          onClick={() => setOnLoan((v) => !v)}
+          className={`rounded-full px-3 py-1 text-xs font-medium ${
+            onLoan ? 'bg-emerald-500 text-neutral-950' : 'border border-neutral-700 text-neutral-300'
+          }`}
+        >
+          On loan
+        </button>
       </div>
 
       {error && <p className="text-sm text-red-400">Could not load your collection.</p>}

web/src/pages/QueuePage.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { api } from '../api.js'
+import type { Item } from '../types.js'
+import Cover from '../components/Cover.js'
+
+export default function QueuePage() {
+  const [items, setItems] = useState<Item[] | null>(null)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    void api
+      .listCollection({ ripped: 'not_ripped' })
+      .then((res) => setItems([...res.items].reverse()))
+      .catch(() => setError(true))
+  }, [])
+
+  function markRipped(id: number) {
+    void api
+      .setRip(id, true)
+      .then(() => setItems((list) => (list ?? []).filter((i) => i.id !== id)))
+      .catch(() => setError(true))
+  }
+
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-neutral-400">Rip queue — oldest additions first.</p>
+      {error && <p className="text-sm text-red-400">Could not load the queue.</p>}
+      {items && items.length === 0 && (
+        <div className="py-12 text-center">
+          <p className="text-neutral-400">Nothing waiting to be ripped.</p>
+          <Link to="/scan" className="mt-2 inline-block text-sm text-emerald-400">
+            Scan something →
+          </Link>
+        </div>
+      )}
+      {items &&
+        items.map((item) => (
+          <div key={item.id} className="flex items-center gap-3 rounded-xl border border-neutral-800 bg-neutral-900 p-3">
+            <Cover src={item.artworkUrl} alt="" className="size-12 shrink-0" />
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-medium">{item.title}</p>
+              <p className="truncate text-xs text-neutral-400">
+                {item.artist} · added {new Date(item.dateAdded + 'Z').toLocaleDateString()}
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() => markRipped(item.id)}
+              className="shrink-0 rounded-lg bg-emerald-500 px-3 py-1.5 text-sm font-medium text-neutral-950"
+            >
+              Mark ripped
+            </button>
+            <Link to={`/item/${item.id}`} className="shrink-0 text-xs text-neutral-400">
+              details
+            </Link>
+          </div>
+        ))}
+    </div>
+  )
+}

web/test/library.test.tsx

@@ -110,4 +110,23 @@ describe('LibraryPage', () => {
     await waitFor(() => expect(screen.getByText(/nothing here yet/i)).toBeTruthy())
     expect(screen.getByRole('link', { name: /add your first record/i }).getAttribute('href')).toBe('/add')
   })
+
+  it('header links to stats and queue', async () => {
+    renderLibrary()
+    expect(screen.getByRole('link', { name: /stats/i }).getAttribute('href')).toBe('/stats')
+    expect(screen.getByRole('link', { name: /queue/i }).getAttribute('href')).toBe('/queue')
+  })
+
+  it('on-loan chip filters by loan state', async () => {
+    renderLibrary()
+    await waitFor(() => expect(screen.getByRole('button', { name: /^on loan$/i })).toBeTruthy())
+    await userEvent.click(screen.getByRole('button', { name: /^on loan$/i }))
+    await waitFor(() =>
+      expect(api.listCollection).toHaveBeenLastCalledWith(expect.objectContaining({ onLoan: 'true' }))
+    )
+    await userEvent.click(screen.getByRole('button', { name: /^on loan$/i }))
+    await waitFor(() =>
+      expect(api.listCollection).toHaveBeenLastCalledWith(expect.not.objectContaining({ onLoan: expect.anything() }))
+    )
+  })
 })

web/test/queue.test.tsx

@@ -0,0 +1,56 @@
+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 QueuePage from '../src/pages/QueuePage.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(), setRip: vi.fn() } }
+})
+import { api } from '../src/api.js'
+
+function qItem(id: number, title: string, added: string): Item {
+  return {
+    id, discogsReleaseId: 1, title, artist: 'Artist', year: 1999, formats: ['CD'], genres: [], labels: [],
+    tracklist: [], catno: null, country: null, artworkUrl: null, barcodes: [], dateAdded: added,
+    ripOverride: null, ripStatus: 'not_ripped',
+  }
+}
+
+beforeEach(() => {
+  vi.mocked(api.listCollection).mockReset()
+  vi.mocked(api.setRip).mockReset()
+})
+
+describe('QueuePage', () => {
+  it('lists not-ripped items oldest first and marks ripped', async () => {
+    vi.mocked(api.listCollection).mockResolvedValue({
+      items: [qItem(1, 'Newest', '2026-08-20'), qItem(2, 'Oldest', '2026-08-01')],
+      counts: { total: 2, ripped: 0, notRipped: 2 },
+    } as never)
+    vi.mocked(api.setRip).mockResolvedValue({} as never)
+    render(
+      <MemoryRouter>
+        <QueuePage />
+      </MemoryRouter>
+    )
+    expect(await screen.findByText('Oldest')).toBeTruthy() // oldest first
+    const rows = screen.getAllByRole('button', { name: /mark ripped/i })
+    await userEvent.click(rows[0]!)
+    await waitFor(() => expect(api.setRip).toHaveBeenCalledWith(2, true))
+    await waitFor(() => expect(screen.queryByText('Oldest')).toBeNull())
+  })
+
+  it('empty state points back to scanning', async () => {
+    vi.mocked(api.listCollection).mockResolvedValue({ items: [], counts: { total: 0, ripped: 0, notRipped: 0 } } as never)
+    render(
+      <MemoryRouter>
+        <QueuePage />
+      </MemoryRouter>
+    )
+    expect(await screen.findByText(/nothing waiting/i)).toBeTruthy()
+    expect(screen.getByRole('link', { name: /scan something/i }).getAttribute('href')).toBe('/scan')
+  })
+})