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

@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { session } from '$lib/session.svelte';
+    import Bookmark from '@lucide/svelte/icons/bookmark';
+    import FolderOpen from '@lucide/svelte/icons/folder-open';
+    import Calendar from '@lucide/svelte/icons/calendar';
+
+    let { data } = $props();
+    const authenticated = $derived(data.authenticated);
+    const bookmarkCount = $derived(data.bookmark_count);
+    const collectionCount = $derived(data.collection_count);
+    const memberSince = $derived(
+        session.user
+            ? new Date(session.user.created_at).toLocaleDateString()
+            : null
+    );
+</script>
+
+{#if !authenticated}
+    <p class="status" data-testid="profile-signin">
+        <a href="/login?next=/profile">Sign in</a> to see your bookmarks,
+        collections, and reading history.
+    </p>
+{:else}
+    <div class="overview">
+        <div class="card" data-testid="overview-member">
+            <Calendar size={22} aria-hidden="true" />
+            <div>
+                <div class="label">Member since</div>
+                <div class="value">{memberSince}</div>
+            </div>
+        </div>
+        <a class="card link" href="/profile/bookmarks" data-testid="overview-bookmarks">
+            <Bookmark size={22} aria-hidden="true" />
+            <div>
+                <div class="label">Bookmarks</div>
+                <div class="value">{bookmarkCount}</div>
+            </div>
+        </a>
+        <a class="card link" href="/profile/collections" data-testid="overview-collections">
+            <FolderOpen size={22} aria-hidden="true" />
+            <div>
+                <div class="label">Collections</div>
+                <div class="value">{collectionCount}</div>
+            </div>
+        </a>
+    </div>
+    <p class="hint">
+        Use the tabs above to manage your preferences, account, bookmarks, and collections.
+    </p>
+{/if}
+
+<style>
+    .status {
+        color: var(--text-muted);
+    }
+
+    .overview {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: var(--space-3);
+        margin-bottom: var(--space-4);
+    }
+
+    .card {
+        display: flex;
+        align-items: center;
+        gap: var(--space-3);
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        padding: var(--space-3);
+        color: var(--text);
+        text-decoration: none;
+    }
+
+    .card.link:hover {
+        background: var(--surface-elevated);
+        border-color: var(--primary);
+        text-decoration: none;
+    }
+
+    .label {
+        color: var(--text-muted);
+        font-size: var(--font-xs);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+    }
+
+    .value {
+        font-size: var(--font-xl);
+        font-weight: var(--weight-semibold);
+    }
+
+    .hint {
+        color: var(--text-muted);
+        font-size: var(--font-sm);
+    }
+</style>