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/routes/collections/+page.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+    import { fileUrl } from '$lib/api/client';
+    import FolderOpen from '@lucide/svelte/icons/folder-open';
+
+    let { data } = $props();
+    const collections = $derived(data.collections);
+</script>
+
+<svelte:head>
+    <title>Collections — Mangalord</title>
+</svelte:head>
+
+<h1>Collections</h1>
+
+{#if !data.authenticated}
+    <p class="status">
+        <a href="/login">Sign in</a> to see and manage your collections.
+    </p>
+{:else if data.error}
+    <p class="error" role="alert">{data.error}</p>
+{:else if collections.length === 0}
+    <p class="status" data-testid="collections-empty">
+        You don't have any collections yet. Open any manga and use
+        <strong>Add to collection</strong> to start one.
+    </p>
+{:else}
+    <ul class="grid" data-testid="collections-list">
+        {#each collections as c (c.id)}
+            <li class="card">
+                <a href="/collections/{c.id}" class="cover-link" tabindex="-1" aria-hidden="true">
+                    <div class="collage">
+                        {#if c.sample_covers.length === 0}
+                            <div class="collage-empty">
+                                <FolderOpen size={36} aria-hidden="true" />
+                            </div>
+                        {:else}
+                            {#each c.sample_covers as cover (cover)}
+                                <img
+                                    src={fileUrl(cover)}
+                                    alt=""
+                                    class="collage-cover"
+                                    loading="lazy"
+                                />
+                            {/each}
+                        {/if}
+                    </div>
+                </a>
+                <div class="meta">
+                    <a href="/collections/{c.id}" class="name" data-testid={`collection-${c.id}`}>
+                        {c.name}
+                    </a>
+                    <span class="count">
+                        {c.manga_count}
+                        {c.manga_count === 1 ? 'manga' : 'mangas'}
+                    </span>
+                </div>
+            </li>
+        {/each}
+    </ul>
+{/if}
+
+<style>
+    .status {
+        color: var(--text-muted);
+    }
+
+    .error {
+        color: var(--danger);
+    }
+
+    .grid {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: var(--space-4);
+    }
+
+    .card {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+    }
+
+    .cover-link {
+        display: block;
+        line-height: 0;
+    }
+
+    .collage {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        gap: 2px;
+        aspect-ratio: 2 / 3;
+        border-radius: var(--radius-md);
+        overflow: hidden;
+        background: var(--surface);
+    }
+
+    .collage-empty {
+        grid-column: 1 / -1;
+        grid-row: 1 / -1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--text-muted);
+    }
+
+    .collage-cover {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    /* If only one cover, it fills the whole card. */
+    .collage-cover:only-child {
+        grid-column: 1 / -1;
+        grid-row: 1 / -1;
+    }
+
+    /* If two covers, split vertically. */
+    .collage-cover:first-child:nth-last-child(2),
+    .collage-cover:first-child:nth-last-child(2) ~ .collage-cover {
+        grid-row: 1 / -1;
+    }
+
+    /* If three covers: the first spans the left column, the other two stack on the right. */
+    .collage-cover:first-child:nth-last-child(3) {
+        grid-row: 1 / -1;
+    }
+
+    .meta {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        gap: var(--space-1);
+    }
+
+    .name {
+        font-weight: var(--weight-semibold);
+        color: var(--text);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .name:hover {
+        color: var(--primary);
+        text-decoration: none;
+    }
+
+    .count {
+        color: var(--text-muted);
+        font-size: var(--font-xs);
+    }
+</style>