feat: /profile dashboard with tabbed preferences, account, bookmarks, collections (0.18.0)

Tabbed user dashboard at `/profile` that absorbs `/settings` and
surfaces bookmarks + collections in one place.

- New `/profile` shell with tabs: Overview (counts), Preferences
  (theme + reader prefs, ported from /settings; works for guests
  via localStorage), Account (password change; auth-gated),
  Bookmarks, Collections. Guest tab list is filtered to what they
  can actually use.
- `/settings` is a 308 redirect to `/profile/preferences` so old
  bookmarks land cleanly. The "Settings" link in the top nav is
  replaced by a Profile link between Upload and Bookmarks; Bookmarks
  + Collections stay as shortcuts per the user spec.
- Extracts `lib/components/BookmarkList.svelte` and
  `lib/components/CollectionsGrid.svelte` so the top-level
  /bookmarks + /collections routes and the new profile tabs render
  the same UI without duplication. Both layers use a three-state
  load (authenticated / guest / error) to handle network hiccups
  inline.
- Deep links preserved via `?next=` on every sign-in CTA.

88 frontend unit tests + svelte-check clean; 12 of 12 e2e tests in
profile.spec.ts and reader-mode.spec.ts pass (8 other e2e failures
predate this branch and stay flagged for cleanup).

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

frontend/src/routes/collections/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { fileUrl } from '$lib/api/client';
-    import FolderOpen from '@lucide/svelte/icons/folder-open';
+    import CollectionsGrid from '$lib/components/CollectionsGrid.svelte';
 
     let { data } = $props();
     const collections = $derived(data.collections);
@@ -24,39 +23,7 @@
         <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>
+    <CollectionsGrid {collections} />
 {/if}
 
 <style>
@@ -67,92 +34,4 @@
     .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>