feat(web): /library/hidden user-facing quarantine view

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/src/lib/components/Shell.svelte

@@ -22,13 +22,14 @@
   }
 
   const navItems = [
-    { href: '/',              label: 'Library' },
+    { href: '/',                label: 'Library' },
-    { href: '/library/liked', label: 'Liked' },
+    { href: '/library/liked',   label: 'Liked' },
-    { href: '/search',        label: 'Search' },
+    { href: '/library/hidden',  label: 'Hidden' },
-    { href: '/discover',      label: 'Discover' },
+    { href: '/search',          label: 'Search' },
-    { href: '/requests',      label: 'Requests' },
+    { href: '/discover',        label: 'Discover' },
-    { href: '/playlists',     label: 'Playlists' },
+    { href: '/requests',        label: 'Requests' },
-    { href: '/settings',      label: 'Settings' }
+    { href: '/playlists',       label: 'Playlists' },
+    { href: '/settings',        label: 'Settings' }
   ];
 
   // Admin link sits between Playlists and Settings, only visible to admins.

web/src/lib/components/Shell.test.ts

@@ -48,6 +48,21 @@ describe('Shell', () => {
     expect(screen.getByRole('link', { name: 'Playlists' })).toHaveAttribute('href', '/playlists');
   });
 
+  test('Hidden nav link sits between Liked and Search', () => {
+    render(Shell);
+    const hidden = screen.getByRole('link', { name: 'Hidden' });
+    expect(hidden).toHaveAttribute('href', '/library/hidden');
+    const labels = screen
+      .getAllByRole('link')
+      .map((el) => el.textContent?.trim())
+      .filter(Boolean);
+    const idxLiked  = labels.indexOf('Liked');
+    const idxHidden = labels.indexOf('Hidden');
+    const idxSearch = labels.indexOf('Search');
+    expect(idxLiked).toBeLessThan(idxHidden);
+    expect(idxHidden).toBeLessThan(idxSearch);
+  });
+
   test('non-admin users do not see the Admin nav link', () => {
     userState.current = { id: '1', username: 'alice', is_admin: false };
     render(Shell);

web/src/routes/library/hidden/+page.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { Music2, RotateCcw } from 'lucide-svelte';
+  import { useQueryClient } from '@tanstack/svelte-query';
+  import { createMyQuarantineQuery, unflagTrack } from '$lib/api/quarantine';
+  import { qk } from '$lib/api/queries';
+  import type { LidarrQuarantineMineRow, LidarrQuarantineReason } from '$lib/api/types';
+  import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
+
+  const client = useQueryClient();
+  const queryStore = createMyQuarantineQuery();
+  const query = $derived($queryStore);
+  const rows = $derived((query.data ?? []) as LidarrQuarantineMineRow[]);
+
+  const REASON_LABELS: Record<LidarrQuarantineReason, string> = {
+    bad_rip:    'Bad rip',
+    wrong_file: 'Wrong file',
+    wrong_tags: 'Wrong tags',
+    duplicate:  'Duplicate',
+    other:      'Other'
+  };
+
+  function relativeTime(iso: string): string {
+    const ms = Date.now() - new Date(iso).getTime();
+    const days = Math.floor(ms / (24 * 3_600_000));
+    if (days >= 1) return `${days}d ago`;
+    const hours = Math.floor(ms / 3_600_000);
+    if (hours >= 1) return `${hours}h ago`;
+    const minutes = Math.floor(ms / 60_000);
+    if (minutes >= 1) return `${minutes}m ago`;
+    return 'just now';
+  }
+
+  async function onUnhide(trackID: string) {
+    try {
+      await unflagTrack(trackID);
+      await client.invalidateQueries({ queryKey: qk.myQuarantine() });
+    } catch {
+      // Silent in v1; the SPA will refetch on next mount.
+    }
+  }
+</script>
+
+<div class="space-y-6">
+  <header class="space-y-1">
+    <h2 class="font-display text-2xl font-medium text-text-primary">Hidden</h2>
+    <p class="text-text-secondary">Tracks you've flagged as broken.</p>
+  </header>
+
+  {#if query.isError}
+    <ApiErrorBanner error={query.error} onRetry={query.refetch} />
+  {:else if !query.isPending && rows.length === 0}
+    <p class="text-text-secondary">Nothing hidden yet.</p>
+  {:else if rows.length > 0}
+    <ul class="space-y-2">
+      {#each rows as row (row.track_id)}
+        <li class="flex items-start gap-3 rounded-md border border-border bg-surface p-3">
+          <!-- Album art / fallback -->
+          <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-md bg-surface-hover">
+            {#if row.album_cover_art_path}
+              <img
+                src={`/api/albums/${row.album_id}/cover`}
+                alt=""
+                class="h-full w-full rounded-md object-cover"
+                loading="lazy"
+              />
+            {:else}
+              <Music2 size={24} strokeWidth={1} class="text-text-muted" />
+            {/if}
+          </div>
+          <!-- Body -->
+          <div class="flex flex-1 flex-col gap-1">
+            <div class="flex items-center gap-2">
+              <span class="kind-pill">Track</span>
+              <span class="kind-pill">{REASON_LABELS[row.reason]}</span>
+            </div>
+            <div class="text-sm text-text-primary">{row.track_title}</div>
+            <div class="text-xs text-text-secondary">
+              by {row.artist_name} · {row.album_title} · flagged {relativeTime(row.created_at)}
+            </div>
+            {#if row.notes}
+              <div class="text-xs italic text-text-secondary">{row.notes}</div>
+            {/if}
+          </div>
+          <!-- Action -->
+          <button
+            type="button"
+            aria-label={`Un-hide ${row.track_title}`}
+            onclick={() => onUnhide(row.track_id)}
+            class="inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2.5 py-1.5 text-sm text-text-secondary hover:text-text-primary"
+          >
+            <RotateCcw size={14} strokeWidth={1} />
+            Un-hide
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .kind-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 11px;
+    line-height: 14px;
+    background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
+    color: var(--fs-accent);
+  }
+</style>

web/src/routes/library/hidden/hidden.test.ts

@@ -0,0 +1,64 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { mockQuery } from '../../../test-utils/query';
+
+vi.mock('@tanstack/svelte-query', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return { ...actual, useQueryClient: () => ({ invalidateQueries: vi.fn() }) };
+});
+
+vi.mock('$lib/api/quarantine', () => ({
+  createMyQuarantineQuery: vi.fn(),
+  unflagTrack: vi.fn().mockResolvedValue(undefined)
+}));
+
+import HiddenPage from './+page.svelte';
+import { createMyQuarantineQuery, unflagTrack } from '$lib/api/quarantine';
+import type { LidarrQuarantineMineRow } from '$lib/api/types';
+
+const baseRow: LidarrQuarantineMineRow = {
+  track_id: 't1',
+  reason: 'bad_rip',
+  notes: 'crackles',
+  created_at: new Date(Date.now() - 2 * 24 * 3_600_000).toISOString(), // 2 days ago
+  track_title: 'Roygbiv',
+  track_duration_ms: 200000,
+  album_id: 'a1',
+  album_title: 'Geogaddi',
+  album_cover_art_path: null,
+  artist_id: 'ar1',
+  artist_name: 'Boards of Canada'
+};
+
+afterEach(() => vi.clearAllMocks());
+
+describe('/library/hidden', () => {
+  test('renders one row per quarantine with title + meta + reason pill + notes', () => {
+    (createMyQuarantineQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [baseRow] }));
+    render(HiddenPage);
+    expect(screen.getByText('Roygbiv')).toBeInTheDocument();
+    expect(screen.getByText(/by boards of canada · geogaddi/i)).toBeInTheDocument();
+    expect(screen.getByText('Bad rip')).toBeInTheDocument();
+    expect(screen.getByText('crackles')).toBeInTheDocument();
+  });
+
+  test('un-hide button calls unflagTrack', async () => {
+    (createMyQuarantineQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [baseRow] }));
+    render(HiddenPage);
+    await fireEvent.click(screen.getByRole('button', { name: /un-hide roygbiv/i }));
+    expect(unflagTrack).toHaveBeenCalledWith('t1');
+  });
+
+  test('empty state shows "Nothing hidden yet."', () => {
+    (createMyQuarantineQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [] }));
+    render(HiddenPage);
+    expect(screen.getByText(/nothing hidden yet/i)).toBeInTheDocument();
+  });
+
+  test('notes are absent when row.notes is null', () => {
+    const row = { ...baseRow, notes: null };
+    (createMyQuarantineQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [row] }));
+    render(HiddenPage);
+    expect(screen.queryByText('crackles')).not.toBeInTheDocument();
+  });
+});