feat(frontend): mobile catalog with sheet filters + sort (0.57.0)

Phase 2 of the mobile redesign: the catalog at `/` adapts to phone
viewports without disrupting the desktop layout. The same filter form
renders inline on desktop and inside a bottom sheet on mobile, and a
dedicated sort sheet replaces the inline `<select>` below 640px.

- MangaCard gains optional `unreadCount` and `progress` props that
  render a top-right pill badge and a bottom progress overlay on the
  cover. Both are no-ops when omitted, so existing callers don't
  change. Counts past 99 cap at "99+".
- The filter form body is extracted into a Svelte 5 snippet and
  rendered conditionally — inline desktop panel OR mobile sheet, never
  both — so no testid is duplicated and the focus trap can't double-
  fire. A matchMedia listener tracks the 640px breakpoint and drives
  the snippet target.
- Mobile catalog adds: Filter / Sort chip buttons, an always-visible
  active-filter chip row with per-facet remove buttons, full-width
  search, and a 2-column grid.
- Auto-expanding the filter panel from URL params is now desktop-only
  — on mobile the active-filter chips signal applied facets without
  hiding the catalog under a scrim on first paint.
- Vitest suite covers MangaCard badge / overlay behavior including
  clamp / hide edge cases. Playwright spec covers the mobile filter +
  sort sheet flow at 390px viewport, with a hydration gate to keep
  click dispatch from racing the SSR'd-but-not-yet-reactive button.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/MangaCard.svelte.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/svelte';
+import MangaCard from './MangaCard.svelte';
+import type { Manga } from '$lib/api/client';
+
+afterEach(() => cleanup());
+
+const baseManga: Manga = {
+    id: 'm1',
+    title: 'Berserk',
+    status: 'ongoing',
+    alt_titles: [],
+    description: null,
+    cover_image_path: null,
+    created_at: '2026-01-01T00:00:00Z',
+    updated_at: '2026-01-01T00:00:00Z'
+};
+
+describe('MangaCard badges & overlays', () => {
+    it('does not render an unread badge when unreadCount is omitted', () => {
+        render(MangaCard, { props: { manga: baseManga } });
+        expect(screen.queryByTestId('unread-badge')).toBeNull();
+    });
+
+    it('does not render an unread badge when unreadCount is 0', () => {
+        render(MangaCard, { props: { manga: baseManga, unreadCount: 0 } });
+        expect(screen.queryByTestId('unread-badge')).toBeNull();
+    });
+
+    it('renders the unread badge with the count when unreadCount > 0', () => {
+        render(MangaCard, { props: { manga: baseManga, unreadCount: 7 } });
+        const badge = screen.getByTestId('unread-badge');
+        expect(badge.textContent?.trim()).toBe('7');
+    });
+
+    it('caps the unread badge at 99+ for very large counts', () => {
+        render(MangaCard, { props: { manga: baseManga, unreadCount: 250 } });
+        const badge = screen.getByTestId('unread-badge');
+        expect(badge.textContent?.trim()).toBe('99+');
+    });
+
+    it('does not render a progress bar when progress is omitted', () => {
+        render(MangaCard, { props: { manga: baseManga } });
+        expect(screen.queryByTestId('cover-progress')).toBeNull();
+    });
+
+    it('does not render a progress bar at exactly 0 (no reads yet)', () => {
+        render(MangaCard, { props: { manga: baseManga, progress: 0 } });
+        expect(screen.queryByTestId('cover-progress')).toBeNull();
+    });
+
+    it('renders the progress overlay clamped to 0..1 and reflects the value as a width style', () => {
+        const { rerender } = render(MangaCard, {
+            props: { manga: baseManga, progress: 0.4 }
+        });
+        const bar = screen.getByTestId('cover-progress-fill');
+        expect((bar as HTMLElement).style.width).toBe('40%');
+
+        rerender({ manga: baseManga, progress: 1.5 });
+        expect((screen.getByTestId('cover-progress-fill') as HTMLElement).style.width).toBe('100%');
+
+        rerender({ manga: baseManga, progress: -0.2 });
+        expect(screen.queryByTestId('cover-progress')).toBeNull();
+    });
+});