feat: manga collections (0.17.0)

User-owned named lists of mangas with an add-to-collection modal on
the manga page and dedicated /collections and /collections/:id pages.

- Schema (0010): `collections` (per-user case-insensitive name
  uniqueness) + `collection_mangas` join with cascade FKs.
- Endpoints: full CRUD on `/v1/collections`, idempotent add/remove
  for `/v1/collections/:id/mangas`, and `/v1/mangas/:id/my-collections`
  for the modal's pre-checked state. Owner-mismatch surfaces as 404
  (not 403) so the API doesn't disclose collection existence to
  non-owners; the frontend funnels 401 to /login. Three-state PATCH
  via a new shared `domain::patch::Patch<T>` lets clients distinguish
  "leave alone", "clear", and "set" for description.
- Frontend: reusable `Modal` component (focus trap, opt-in
  backdrop close, ESC) and `AddToCollectionModal` with optimistic
  toggling that's race-safe under fast clicks. /collections page
  renders cover-collage cards; /collections/:id is editable with
  per-card remove. Top nav gets a Collections link.

155 backend tests (incl. 21 collection tests covering ownership,
idempotence, sample-cover enrichment, three-state PATCH, FK race);
88 frontend tests; svelte-check clean.

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

frontend/src/lib/components/Modal.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import type { Snippet } from 'svelte';
+    import X from '@lucide/svelte/icons/x';
+
+    let {
+        open,
+        title,
+        onClose,
+        children,
+        footer,
+        size = 'md',
+        closeOnBackdrop = false,
+        testid
+    }: {
+        open: boolean;
+        title: string;
+        onClose: () => void;
+        children: Snippet;
+        footer?: Snippet;
+        size?: 'sm' | 'md' | 'lg';
+        /**
+         * Whether clicking the dim backdrop closes the modal. Off by
+         * default — forms with unsaved input would discard typed data
+         * on a misclick. Opt-in for confirm dialogs and read-only
+         * popovers.
+         */
+        closeOnBackdrop?: boolean;
+        testid?: string;
+    } = $props();
+
+    let dialog: HTMLDivElement | undefined = $state();
+
+    // Track previous focus so we can restore it on close — a basic
+    // requirement for any focus-trapping modal.
+    let previouslyFocused: HTMLElement | null = null;
+
+    $effect(() => {
+        if (open) {
+            previouslyFocused = document.activeElement as HTMLElement | null;
+            // Defer until the dialog mounts.
+            queueMicrotask(() => dialog?.focus());
+        } else if (previouslyFocused) {
+            previouslyFocused.focus();
+            previouslyFocused = null;
+        }
+    });
+
+    function focusable(): HTMLElement[] {
+        if (!dialog) return [];
+        // Standard set of "tab can land here" elements, minus those
+        // disabled or with `tabindex=-1`. Sufficient for our forms.
+        const selector = [
+            'a[href]',
+            'button:not([disabled])',
+            'input:not([disabled]):not([type="hidden"])',
+            'select:not([disabled])',
+            'textarea:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(',');
+        return Array.from(dialog.querySelectorAll<HTMLElement>(selector));
+    }
+
+    function onKeydown(e: KeyboardEvent) {
+        if (!open) return;
+        if (e.key === 'Escape') {
+            e.stopPropagation();
+            onClose();
+            return;
+        }
+        if (e.key === 'Tab') {
+            // Wrap focus inside the dialog so Tab/Shift+Tab don't
+            // escape to the background page.
+            const items = focusable();
+            if (items.length === 0) {
+                e.preventDefault();
+                dialog?.focus();
+                return;
+            }
+            const first = items[0];
+            const last = items[items.length - 1];
+            const active = document.activeElement as HTMLElement | null;
+            if (e.shiftKey) {
+                if (active === first || !dialog?.contains(active)) {
+                    e.preventDefault();
+                    last.focus();
+                }
+            } else if (active === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        }
+    }
+
+    onMount(() => {
+        document.addEventListener('keydown', onKeydown);
+        return () => document.removeEventListener('keydown', onKeydown);
+    });
+
+    function onBackdropClick(e: MouseEvent) {
+        if (!closeOnBackdrop) return;
+        if (e.target === e.currentTarget) onClose();
+    }
+</script>
+
+{#if open}
+    <div
+        class="backdrop"
+        onclick={onBackdropClick}
+        role="presentation"
+        data-testid={testid ? `${testid}-backdrop` : undefined}
+    >
+        <div
+            class="dialog size-{size}"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="modal-title"
+            tabindex="-1"
+            bind:this={dialog}
+            data-testid={testid}
+        >
+            <header class="header">
+                <h2 id="modal-title">{title}</h2>
+                <button
+                    type="button"
+                    class="close"
+                    onclick={onClose}
+                    aria-label="Close"
+                    title="Close"
+                    data-testid={testid ? `${testid}-close` : undefined}
+                >
+                    <X size={18} aria-hidden="true" />
+                </button>
+            </header>
+            <div class="body">{@render children()}</div>
+            {#if footer}
+                <footer class="footer">{@render footer()}</footer>
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<style>
+    .backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-4);
+        z-index: var(--z-modal);
+    }
+
+    .dialog {
+        background: var(--surface);
+        color: var(--text);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-lg);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+        max-height: 90vh;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        outline: none;
+    }
+
+    .size-sm {
+        max-width: 24rem;
+    }
+    .size-md {
+        max-width: 32rem;
+    }
+    .size-lg {
+        max-width: 48rem;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--space-3) var(--space-4);
+        border-bottom: 1px solid var(--border);
+    }
+
+    .header h2 {
+        margin: 0;
+        font-size: var(--font-lg);
+    }
+
+    .close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        background: transparent;
+        color: var(--text-muted);
+        border: 1px solid transparent;
+        border-radius: var(--radius-sm);
+    }
+
+    .close:hover {
+        background: var(--surface-elevated);
+        color: var(--text);
+    }
+
+    .body {
+        padding: var(--space-4);
+        overflow-y: auto;
+    }
+
+    .footer {
+        padding: var(--space-3) var(--space-4);
+        border-top: 1px solid var(--border);
+        display: flex;
+        gap: var(--space-2);
+        justify-content: flex-end;
+    }
+</style>