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: '/library/liked', label: 'Liked' },
-    { href: '/search',        label: 'Search' },
-    { href: '/discover',      label: 'Discover' },
-    { href: '/requests',      label: 'Requests' },
-    { href: '/playlists',     label: 'Playlists' },
-    { href: '/settings',      label: 'Settings' }
+    { href: '/',                label: 'Library' },
+    { href: '/library/liked',   label: 'Liked' },
+    { href: '/library/hidden',  label: 'Hidden' },
+    { href: '/search',          label: 'Search' },
+    { href: '/discover',        label: 'Discover' },
+    { href: '/requests',        label: 'Requests' },
+    { 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);