feat(web): storage admin, search and catalog pages (M2)

- Storage admin: local folders with a folder picker and NFS sources,
  connection test, scan and full scan with live progress, enable,
  disable, delete
- path pattern editor with reorder, examples and a preview table that
  shows which pattern matched and what came from tags; compile errors
  land under the broken pattern
- Library page with counters, scans and unreadable files; search
  reindex for admins
- search box in the top bar: combobox with keyboard navigation, 150 ms
  debounce, cancelled stale requests, "/" and Ctrl+K, layout fix hint
- search page with tabs and paging, artist and album pages, album
  cards and track lists; unavailable tracks are dimmed

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

apps/web/src/pages/AlbumPage.tsx

@@ -0,0 +1,53 @@
+import { unwrap } from '@pipu/core';
+import { useQuery } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+
+import { useSession } from '../app/session';
+import { Cover, TrackList } from '../entities/catalog';
+import { formatDuration } from '../shared/lib/format';
+import { NotFound } from './NotFound';
+import s from './page.module.css';
+import c from './catalog.module.css';
+
+export function AlbumPage({ id }: { id: string }) {
+  const { t } = useTranslation();
+  const session = useSession();
+  const album = useQuery({
+    queryKey: ['album', id],
+    queryFn: async () => unwrap(await session.client.GET('/api/v1/albums/{id}', { params: { path: { id } } })),
+  });
+
+  if (album.isError) return <NotFound error={album.error} />;
+  const a = album.data;
+  const colors = a?.cover_colors.length === 3 ? a.cover_colors : null;
+
+  return (
+    <div className={s.page}>
+      <header className={c.hero}>
+        {colors && (
+          <span
+            className={c.heroBg}
+            style={{ background: `linear-gradient(135deg, ${colors[0]}, ${colors[1]})` }}
+            aria-hidden
+          />
+        )}
+        <Cover album={a ?? { id }} size={200} />
+        <div className={c.heroBody}>
+          <span className={c.kind}>{t('catalog.album')}</span>
+          <h1 className={c.heroTitle}>{a?.title ?? '…'}</h1>
+          {a && (
+            <span className={c.heroMeta}>
+              <Link to="/artist/$id" params={{ id: a.artist.id }}>
+                {a.artist.name}
+              </Link>
+              {a.year ? ` · ${a.year}` : ''} · {t('catalog.track_count', { count: a.tracks.length })} ·{' '}
+              {formatDuration(a.duration_ms)}
+            </span>
+          )}
+        </div>
+      </header>
+      {a && <TrackList tracks={a.tracks} numbered />}
+    </div>
+  );
+}