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>

backend/Cargo.lock

@@ -1033,7 +1033,7 @@ checksum = "5e5032e24019045c762d3c0f28f5b6b8bbf38563a65908389bf7978758920897"
 
 [[package]]
 name = "mangalord"
-version = "0.17.0"
+version = "0.18.0"
 dependencies = [
  "anyhow",
  "argon2",

backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mangalord"
-version = "0.17.0"
+version = "0.18.0"
 edition = "2021"
 
 [lib]

frontend/e2e/profile.spec.ts

@@ -14,9 +14,25 @@ async function stubAuthenticated(page: Page) {
             body: JSON.stringify({ user: userFixture })
         })
     );
+    // Profile overview hits these for the count cards — return zeros
+    // unless a test overrides.
+    await page.route('**/api/v1/me/bookmarks?*', (route) =>
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ items: [], page: { limit: 1, offset: 0, total: 0 } })
+        })
+    );
+    await page.route('**/api/v1/me/collections?*', (route) =>
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ items: [], page: { limit: 1, offset: 0, total: 0 } })
+        })
+    );
 }
 
-test('settings link shows for authed users and reaches the password form', async ({ page }) => {
+test('Profile link in nav for authed users; landing shows counts', async ({ page }) => {
     await stubAuthenticated(page);
     await page.route('**/api/v1/mangas?*', (route) =>
         route.fulfill({
@@ -27,9 +43,18 @@ test('settings link shows for authed users and reaches the password form', async
     );
 
     await page.goto('/');
-    await expect(page.getByTestId('nav-settings')).toBeVisible();
+    await expect(page.getByTestId('nav-profile')).toBeVisible();
-    await page.getByTestId('nav-settings').click();
+    await page.getByTestId('nav-profile').click();
-    await expect(page).toHaveURL(/\/settings$/);
+    await expect(page).toHaveURL(/\/profile$/);
+    await expect(page.getByTestId('overview-bookmarks')).toBeVisible();
+    await expect(page.getByTestId('overview-collections')).toBeVisible();
+});
+
+test('Account tab reaches the password form', async ({ page }) => {
+    await stubAuthenticated(page);
+    await page.goto('/profile');
+    await page.getByTestId('tab-account').click();
+    await expect(page).toHaveURL(/\/profile\/account$/);
     await expect(page.getByTestId('password-form')).toBeVisible();
 });
 
@@ -43,7 +68,7 @@ test('changing password shows success and clears the form', async ({ page }) =>
         await route.fulfill({ status: 204 });
     });
 
-    await page.goto('/settings');
+    await page.goto('/profile/account');
     await page.getByTestId('current-password').fill('hunter2hunter2');
     await page.getByTestId('new-password').fill('freshpassfreshpass');
     await page.getByTestId('confirm-password').fill('freshpassfreshpass');
@@ -55,7 +80,6 @@ test('changing password shows success and clears the form', async ({ page }) =>
         current_password: 'hunter2hunter2',
         new_password: 'freshpassfreshpass'
     });
-    // Form should clear after success.
     await expect(page.getByTestId('current-password')).toHaveValue('');
 });
 
@@ -71,7 +95,7 @@ test('wrong current password surfaces the 401 envelope inline', async ({ page })
         })
     );
 
-    await page.goto('/settings');
+    await page.goto('/profile/account');
     await page.getByTestId('current-password').fill('definitelyNotIt');
     await page.getByTestId('new-password').fill('freshpassfreshpass');
     await page.getByTestId('confirm-password').fill('freshpassfreshpass');
@@ -83,7 +107,7 @@ test('wrong current password surfaces the 401 envelope inline', async ({ page })
 test('mismatched new + confirm disables the submit button', async ({ page }) => {
     await stubAuthenticated(page);
 
-    await page.goto('/settings');
+    await page.goto('/profile/account');
     await page.getByTestId('current-password').fill('hunter2hunter2');
     await page.getByTestId('new-password').fill('freshpassfreshpass');
     await page.getByTestId('confirm-password').fill('different');
@@ -92,7 +116,7 @@ test('mismatched new + confirm disables the submit button', async ({ page }) =>
     await expect(page.getByTestId('password-submit')).toBeDisabled();
 });
 
-test('anonymous user sees a sign-in prompt on /settings', async ({ page }) => {
+test('anonymous user sees a profile sign-in prompt', async ({ page }) => {
     await page.route('**/api/v1/auth/me', (route) =>
         route.fulfill({
             status: 401,
@@ -103,7 +127,16 @@ test('anonymous user sees a sign-in prompt on /settings', async ({ page }) => {
         })
     );
 
-    await page.goto('/settings');
+    await page.goto('/profile');
-    await expect(page.getByTestId('settings-signin')).toBeVisible();
+    await expect(page.getByTestId('profile-signin')).toBeVisible();
     await expect(page.getByTestId('password-form')).toHaveCount(0);
 });
+
+test('/settings 308-redirects to /profile/preferences', async ({ page }) => {
+    await stubAuthenticated(page);
+    await page.goto('/settings');
+    await expect(page).toHaveURL(/\/profile\/preferences$/);
+    // The theme radio is visually hidden (decorated label wraps it), so
+    // assert presence rather than CSS visibility.
+    await expect(page.getByTestId('theme-radio-system')).toBeAttached();
+});

frontend/e2e/reader-mode.spec.ts

@@ -201,13 +201,13 @@ test('reader-mode preference set on one page is honored when the reader opens',
     );
 });
 
-test('settings page hides the gap picker while in single-page mode', async ({ page }) => {
+test('preferences page hides the gap picker while in single-page mode', async ({ page }) => {
     // Visually verifies the conditional render. The radio-click semantics
     // are exercised in src/lib/preferences.svelte.test.ts; the visible
     // mode toggle in the reader top bar covers the cross-route propagation
     // path in the test above.
     await mockReaderApis(page);
-    await page.goto('/settings');
+    await page.goto('/profile/preferences');
 
     await expect(page.getByTestId('reader-mode-radio-single')).toBeAttached();
     await expect(page.getByTestId('reader-mode-radio-continuous')).toBeAttached();

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/lib/components/BookmarkList.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+    import { fileUrl } from '$lib/api/client';
+    import type { Bookmark } from '$lib/api/bookmarks';
+    import BookImage from '@lucide/svelte/icons/book-image';
+
+    let {
+        bookmarks,
+        testid
+    }: {
+        bookmarks: Bookmark[];
+        testid?: string;
+    } = $props();
+</script>
+
+<ul class="bookmark-list" data-testid={testid ?? 'bookmark-list'}>
+    {#each bookmarks as b (b.id)}
+        <li class="bookmark">
+            <a href="/manga/{b.manga_id}" class="cover-link" aria-hidden="true" tabindex="-1">
+                {#if b.manga_cover_image_path}
+                    <img
+                        src={fileUrl(b.manga_cover_image_path)}
+                        alt=""
+                        class="cover"
+                        loading="lazy"
+                    />
+                {:else}
+                    <div class="cover cover-placeholder">
+                        <BookImage size={22} aria-hidden="true" />
+                    </div>
+                {/if}
+            </a>
+            <div class="meta">
+                <a
+                    href="/manga/{b.manga_id}"
+                    class="title"
+                    data-testid="bookmark-title"
+                >
+                    {b.manga_title ?? 'Unknown manga'}
+                </a>
+                {#if b.chapter_id && b.chapter_number != null}
+                    <a
+                        href="/manga/{b.manga_id}/chapter/{b.chapter_number}"
+                        class="target"
+                    >
+                        Chapter {b.chapter_number}{#if b.page != null && b.page > 0} — page {b.page}{/if}
+                    </a>
+                {:else if b.chapter_id}
+                    <!-- Chapter bookmark whose chapter was deleted;
+                         chapter_id != null but chapter_number == null
+                         because the LEFT JOIN found nothing. -->
+                    <span class="target muted">(chapter removed)</span>
+                {:else}
+                    <span class="target muted">Whole manga</span>
+                {/if}
+                <span class="created">
+                    Bookmarked {new Date(b.created_at).toLocaleDateString()}
+                </span>
+            </div>
+        </li>
+    {/each}
+</ul>
+
+<style>
+    .bookmark-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .bookmark {
+        display: grid;
+        grid-template-columns: 64px 1fr;
+        gap: var(--space-4);
+        align-items: start;
+        padding: var(--space-3) 0;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .cover-link {
+        display: block;
+        line-height: 0;
+    }
+
+    .cover {
+        width: 64px;
+        height: 96px;
+        object-fit: cover;
+        border-radius: var(--radius-md);
+        background: var(--surface);
+    }
+
+    .cover-placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--text-muted);
+        user-select: none;
+    }
+
+    .meta {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-1);
+        min-width: 0;
+    }
+
+    .title {
+        font-weight: var(--weight-semibold);
+        font-size: var(--font-base);
+        color: var(--text);
+    }
+
+    .title:hover {
+        color: var(--primary);
+    }
+
+    .target {
+        font-size: var(--font-sm);
+    }
+
+    .muted {
+        color: var(--text-muted);
+    }
+
+    .created {
+        color: var(--text-muted);
+        font-size: var(--font-xs);
+    }
+</style>

frontend/src/lib/components/CollectionsGrid.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+    import { fileUrl } from '$lib/api/client';
+    import type { CollectionSummary } from '$lib/api/collections';
+    import FolderOpen from '@lucide/svelte/icons/folder-open';
+
+    let {
+        collections
+    }: {
+        collections: CollectionSummary[];
+    } = $props();
+</script>
+
+<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>
+
+<style>
+    .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;
+    }
+
+    .collage-cover:only-child {
+        grid-column: 1 / -1;
+        grid-row: 1 / -1;
+    }
+
+    .collage-cover:first-child:nth-last-child(2),
+    .collage-cover:first-child:nth-last-child(2) ~ .collage-cover {
+        grid-row: 1 / -1;
+    }
+
+    .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>

frontend/src/routes/+layout.svelte

@@ -6,9 +6,9 @@
     import { session } from '$lib/session.svelte';
     import { theme } from '$lib/theme.svelte';
     import Upload from '@lucide/svelte/icons/upload';
+    import UserCircle from '@lucide/svelte/icons/user-circle';
     import Bookmark from '@lucide/svelte/icons/bookmark';
     import FolderOpen from '@lucide/svelte/icons/folder-open';
-    import Settings from '@lucide/svelte/icons/settings';
     import LogOut from '@lucide/svelte/icons/log-out';
     import '$lib/styles/tokens.css';
 
@@ -53,6 +53,10 @@
             <Upload size={18} aria-hidden="true" />
             <span>Upload</span>
         </a>
+        <a class="nav-link" href="/profile" data-testid="nav-profile">
+            <UserCircle size={18} aria-hidden="true" />
+            <span>Profile</span>
+        </a>
         <a class="nav-link" href="/bookmarks">
             <Bookmark size={18} aria-hidden="true" />
             <span>Bookmarks</span>
@@ -67,10 +71,6 @@
             <span data-testid="session-loading" aria-busy="true">…</span>
         {:else if session.user}
             <span class="username" data-testid="session-user">{session.user.username}</span>
-            <a class="nav-link" href="/settings" data-testid="nav-settings">
-                <Settings size={18} aria-hidden="true" />
-                <span>Settings</span>
-            </a>
             <button
                 class="icon-btn"
                 type="button"

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { fileUrl } from '$lib/api/client';
+    import BookmarkList from '$lib/components/BookmarkList.svelte';
-    import BookImage from '@lucide/svelte/icons/book-image';
 
     let { data } = $props();
     const authenticated = $derived(data.authenticated);
@@ -25,122 +24,10 @@
 {:else if bookmarks.length === 0}
     <p class="hint" data-testid="bookmarks-empty">No bookmarks yet.</p>
 {:else}
-    <ul class="bookmark-list" data-testid="bookmark-list">
+    <BookmarkList {bookmarks} />
-        {#each bookmarks as b (b.id)}
-            <li class="bookmark">
-                <a href="/manga/{b.manga_id}" class="cover-link" aria-hidden="true" tabindex="-1">
-                    {#if b.manga_cover_image_path}
-                        <img
-                            src={fileUrl(b.manga_cover_image_path)}
-                            alt=""
-                            class="cover"
-                            loading="lazy"
-                        />
-                    {:else}
-                        <div class="cover cover-placeholder">
-                            <BookImage size={22} aria-hidden="true" />
-                        </div>
-                    {/if}
-                </a>
-                <div class="meta">
-                    <a
-                        href="/manga/{b.manga_id}"
-                        class="title"
-                        data-testid="bookmark-title"
-                    >
-                        {b.manga_title ?? 'Unknown manga'}
-                    </a>
-                    {#if b.chapter_id && b.chapter_number != null}
-                        <a
-                            href="/manga/{b.manga_id}/chapter/{b.chapter_number}"
-                            class="target"
-                        >
-                            Chapter {b.chapter_number}{#if b.page != null && b.page > 0} — page {b.page}{/if}
-                        </a>
-                    {:else if b.chapter_id}
-                        <!-- Chapter bookmark whose chapter was deleted;
-                             chapter_id != null but chapter_number == null
-                             because the LEFT JOIN found nothing. -->
-                        <span class="target muted">(chapter removed)</span>
-                    {:else}
-                        <span class="target muted">Whole manga</span>
-                    {/if}
-                    <span class="created">
-                        Bookmarked {new Date(b.created_at).toLocaleDateString()}
-                    </span>
-                </div>
-            </li>
-        {/each}
-    </ul>
 {/if}
 
 <style>
-    .bookmark-list {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-
-    .bookmark {
-        display: grid;
-        grid-template-columns: 64px 1fr;
-        gap: var(--space-4);
-        align-items: start;
-        padding: var(--space-3) 0;
-        border-bottom: 1px solid var(--border);
-    }
-
-    .cover-link {
-        display: block;
-        line-height: 0;
-    }
-
-    .cover {
-        width: 64px;
-        height: 96px;
-        object-fit: cover;
-        border-radius: var(--radius-md);
-        background: var(--surface);
-    }
-
-    .cover-placeholder {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--text-muted);
-        user-select: none;
-    }
-
-    .meta {
-        display: flex;
-        flex-direction: column;
-        gap: var(--space-1);
-        min-width: 0;
-    }
-
-    .title {
-        font-weight: var(--weight-semibold);
-        font-size: var(--font-base);
-        color: var(--text);
-    }
-
-    .title:hover {
-        color: var(--primary);
-    }
-
-    .target {
-        font-size: var(--font-sm);
-    }
-
-    .muted {
-        color: var(--text-muted);
-    }
-
-    .created {
-        color: var(--text-muted);
-        font-size: var(--font-xs);
-    }
-
     .error {
         color: var(--danger);
     }

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { fileUrl } from '$lib/api/client';
+    import CollectionsGrid from '$lib/components/CollectionsGrid.svelte';
-    import FolderOpen from '@lucide/svelte/icons/folder-open';
 
     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">
+    <CollectionsGrid {collections} />
-        {#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>
@@ -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>

frontend/src/routes/profile/+layout.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { session } from '$lib/session.svelte';
+    import User from '@lucide/svelte/icons/user';
+    import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal';
+    import KeyRound from '@lucide/svelte/icons/key-round';
+    import Bookmark from '@lucide/svelte/icons/bookmark';
+    import FolderOpen from '@lucide/svelte/icons/folder-open';
+
+    let { children } = $props();
+
+    type Tab = {
+        href: string;
+        label: string;
+        icon: typeof User;
+        testid: string;
+        /** Subroutes that genuinely have nothing for guests are hidden
+         *  until the user signs in. Preferences is shown to everyone
+         *  because theme + reader settings work device-locally. */
+        guestVisible: boolean;
+    };
+
+    const tabs: Tab[] = [
+        { href: '/profile', label: 'Overview', icon: User, testid: 'tab-overview', guestVisible: true },
+        { href: '/profile/preferences', label: 'Preferences', icon: SlidersHorizontal, testid: 'tab-preferences', guestVisible: true },
+        { href: '/profile/account', label: 'Account', icon: KeyRound, testid: 'tab-account', guestVisible: false },
+        { href: '/profile/bookmarks', label: 'Bookmarks', icon: Bookmark, testid: 'tab-bookmarks', guestVisible: false },
+        { href: '/profile/collections', label: 'Collections', icon: FolderOpen, testid: 'tab-collections', guestVisible: false }
+    ];
+
+    const visibleTabs = $derived(
+        tabs.filter((t) => session.user || t.guestVisible)
+    );
+</script>
+
+<svelte:head>
+    <title>Profile — Mangalord</title>
+</svelte:head>
+
+<header class="profile-header">
+    <h1>Profile</h1>
+    {#if !session.loaded}
+        <p class="welcome" data-testid="profile-loading">Loading session…</p>
+    {:else if session.user}
+        <p class="welcome">
+            Signed in as <strong>{session.user.username}</strong>
+        </p>
+    {:else}
+        <p class="welcome" data-testid="profile-guest">
+            Browsing as a guest — sign in to access bookmarks, collections,
+            and account settings.
+        </p>
+    {/if}
+</header>
+
+<nav class="tabs" aria-label="Profile sections">
+    {#each visibleTabs as t (t.href)}
+        {@const active =
+            t.href === '/profile'
+                ? $page.url.pathname === '/profile'
+                : $page.url.pathname === t.href ||
+                  $page.url.pathname.startsWith(t.href + '/')}
+        <a
+            class="tab"
+            class:active
+            href={t.href}
+            aria-current={active ? 'page' : undefined}
+            data-testid={t.testid}
+        >
+            <t.icon size={16} aria-hidden="true" />
+            <span>{t.label}</span>
+        </a>
+    {/each}
+</nav>
+
+<section class="content">
+    {@render children()}
+</section>
+
+<style>
+    .profile-header {
+        margin-bottom: var(--space-3);
+    }
+
+    .profile-header h1 {
+        margin: 0 0 var(--space-1);
+    }
+
+    .welcome {
+        color: var(--text-muted);
+        margin: 0;
+        font-size: var(--font-sm);
+    }
+
+    .tabs {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-1);
+        margin-bottom: var(--space-4);
+        border-bottom: 1px solid var(--border);
+    }
+
+    .tab {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: var(--space-2) var(--space-3);
+        color: var(--text-muted);
+        font-size: var(--font-sm);
+        border-bottom: 2px solid transparent;
+        margin-bottom: -1px;
+        transition:
+            color var(--transition),
+            border-color var(--transition);
+    }
+
+    .tab:hover {
+        color: var(--text);
+        text-decoration: none;
+    }
+
+    .tab.active {
+        color: var(--primary);
+        border-bottom-color: var(--primary);
+        font-weight: var(--weight-medium);
+    }
+
+    .content {
+        margin-top: var(--space-3);
+    }
+</style>

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>

frontend/src/routes/profile/+page.ts

@@ -0,0 +1,30 @@
+import { ApiError } from '$lib/api/client';
+import { listMyBookmarks } from '$lib/api/bookmarks';
+import { listMyCollections } from '$lib/api/collections';
+import type { PageLoad } from './$types';
+
+export const ssr = false;
+
+/**
+ * Cheap pair-fetch for the landing overview's counts. Each call asks
+ * for `limit: 1` so the server still returns the paged envelope's
+ * `total` without dragging the full payload across the wire.
+ */
+export const load: PageLoad = async () => {
+    try {
+        const [bookmarks, collections] = await Promise.all([
+            listMyBookmarks({ limit: 1 }),
+            listMyCollections({ limit: 1 })
+        ]);
+        return {
+            authenticated: true,
+            bookmark_count: bookmarks.page.total ?? 0,
+            collection_count: collections.page.total ?? 0
+        };
+    } catch (e) {
+        if (e instanceof ApiError && e.status === 401) {
+            return { authenticated: false, bookmark_count: 0, collection_count: 0 };
+        }
+        throw e;
+    }
+};

frontend/src/routes/profile/account/+page.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { changePassword } from '$lib/api/auth';
+    import { ApiError } from '$lib/api/client';
+    import { session } from '$lib/session.svelte';
+
+    let currentPassword = $state('');
+    let newPassword = $state('');
+    let confirmPassword = $state('');
+    let submitting = $state(false);
+    let success = $state<string | null>(null);
+    let error: string | null = $state(null);
+
+    const passwordsMatch = $derived(
+        newPassword.length > 0 && newPassword === confirmPassword
+    );
+    const canSubmit = $derived(
+        Boolean(session.user) &&
+            currentPassword.length > 0 &&
+            newPassword.length >= 8 &&
+            passwordsMatch &&
+            !submitting
+    );
+
+    async function submit(e: SubmitEvent) {
+        e.preventDefault();
+        if (!canSubmit) return;
+        submitting = true;
+        success = null;
+        error = null;
+        try {
+            await changePassword({
+                current_password: currentPassword,
+                new_password: newPassword
+            });
+            success = 'Password updated. Other devices have been signed out.';
+            currentPassword = '';
+            newPassword = '';
+            confirmPassword = '';
+        } catch (e) {
+            if (e instanceof ApiError && e.status === 401 && !session.user) {
+                await goto('/login');
+                return;
+            }
+            error = e instanceof Error ? e.message : String(e);
+        } finally {
+            submitting = false;
+        }
+    }
+</script>
+
+{#if !session.user}
+    <p class="status" data-testid="account-signin">
+        <a href="/login?next=/profile/account">Sign in</a> to change your password.
+    </p>
+{:else}
+<section class="card">
+    <h2>Change password</h2>
+    <p class="hint">
+        Changing your password signs out every other device using this account.
+        Bot API tokens keep working — revoke them individually from the bot-token
+        list if you want to invalidate them too.
+    </p>
+    <form onsubmit={submit} action="javascript:void(0)" data-testid="password-form">
+        <label class="form-field">
+            <span>Current password</span>
+            <input
+                type="password"
+                bind:value={currentPassword}
+                autocomplete="current-password"
+                required
+                data-testid="current-password"
+            />
+        </label>
+        <label class="form-field">
+            <span>New password</span>
+            <input
+                type="password"
+                bind:value={newPassword}
+                autocomplete="new-password"
+                minlength="8"
+                required
+                data-testid="new-password"
+            />
+        </label>
+        <label class="form-field">
+            <span>Confirm new password</span>
+            <input
+                type="password"
+                bind:value={confirmPassword}
+                autocomplete="new-password"
+                minlength="8"
+                required
+                data-testid="confirm-password"
+            />
+            {#if confirmPassword.length > 0 && !passwordsMatch}
+                <span class="field-error" role="alert" data-testid="mismatch">
+                    Passwords don't match.
+                </span>
+            {/if}
+        </label>
+        <button
+            class="primary"
+            type="submit"
+            disabled={!canSubmit}
+            data-testid="password-submit"
+        >
+            {submitting ? 'Updating…' : 'Update password'}
+        </button>
+        {#if success}
+            <p class="success" data-testid="password-success">{success}</p>
+        {/if}
+        {#if error}
+            <p role="alert" class="form-error" data-testid="password-error">{error}</p>
+        {/if}
+    </form>
+</section>
+{/if}
+
+<style>
+    .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        padding: var(--space-4);
+        max-width: 32rem;
+    }
+
+    .hint {
+        color: var(--text-muted);
+        font-size: var(--font-sm);
+    }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+    }
+
+    .primary {
+        background: var(--primary);
+        color: var(--primary-contrast);
+        border-color: var(--primary);
+        margin-top: var(--space-1);
+        align-self: flex-start;
+    }
+
+    .primary:hover:not(:disabled) {
+        background: var(--primary-hover);
+        border-color: var(--primary-hover);
+    }
+
+    .field-error {
+        color: var(--danger);
+        font-size: var(--font-sm);
+    }
+
+    .form-error {
+        color: var(--danger);
+    }
+
+    .success {
+        color: var(--success);
+    }
+
+    .status {
+        color: var(--text-muted);
+    }
+</style>

frontend/src/routes/profile/bookmarks/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import BookmarkList from '$lib/components/BookmarkList.svelte';
+
+    let { data } = $props();
+    const bookmarks = $derived(data.bookmarks);
+</script>
+
+{#if data.error}
+    <p class="error" role="alert" data-testid="profile-bookmarks-error">
+        Couldn't load bookmarks: {data.error}
+    </p>
+{:else if !data.authenticated}
+    <p class="hint" data-testid="profile-bookmarks-signin">
+        <a href="/login?next=/profile/bookmarks">Sign in</a> to see your bookmarks.
+    </p>
+{:else if bookmarks.length === 0}
+    <p class="hint" data-testid="profile-bookmarks-empty">No bookmarks yet.</p>
+{:else}
+    <BookmarkList {bookmarks} testid="profile-bookmark-list" />
+{/if}
+
+<style>
+    .hint {
+        color: var(--text-muted);
+    }
+    .error {
+        color: var(--danger);
+    }
+</style>

frontend/src/routes/profile/bookmarks/+page.ts

@@ -0,0 +1,25 @@
+import { ApiError } from '$lib/api/client';
+import { listMyBookmarks } from '$lib/api/bookmarks';
+import type { PageLoad } from './$types';
+
+export const ssr = false;
+
+/**
+ * Mirrors the top-level `/bookmarks` route's three-state load shape so
+ * a backend hiccup (5xx, network) surfaces inline within the profile
+ * tab rather than bouncing the user out of the tabbed shell.
+ */
+export const load: PageLoad = async () => {
+    try {
+        const page = await listMyBookmarks();
+        return { bookmarks: page.items, authenticated: true, error: null };
+    } catch (e) {
+        if (e instanceof ApiError && e.status === 401) {
+            return { bookmarks: [], authenticated: false, error: null };
+        }
+        if (e instanceof ApiError) {
+            return { bookmarks: [], authenticated: true, error: e.message };
+        }
+        throw e;
+    }
+};

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import CollectionsGrid from '$lib/components/CollectionsGrid.svelte';
+
+    let { data } = $props();
+    const collections = $derived(data.collections);
+</script>
+
+{#if data.error}
+    <p class="error" role="alert" data-testid="profile-collections-error">
+        Couldn't load collections: {data.error}
+    </p>
+{:else if !data.authenticated}
+    <p class="hint" data-testid="profile-collections-signin">
+        <a href="/login?next=/profile/collections">Sign in</a> to see your collections.
+    </p>
+{:else if collections.length === 0}
+    <p class="hint" data-testid="profile-collections-empty">
+        You don't have any collections yet. Open any manga and use
+        <strong>Add to collection</strong> to start one.
+    </p>
+{:else}
+    <CollectionsGrid {collections} />
+{/if}
+
+<style>
+    .hint {
+        color: var(--text-muted);
+    }
+    .error {
+        color: var(--danger);
+    }
+</style>

frontend/src/routes/profile/collections/+page.ts

@@ -0,0 +1,20 @@
+import { ApiError } from '$lib/api/client';
+import { listMyCollections } from '$lib/api/collections';
+import type { PageLoad } from './$types';
+
+export const ssr = false;
+
+export const load: PageLoad = async () => {
+    try {
+        const page = await listMyCollections({ limit: 200 });
+        return { collections: page.items, authenticated: true, error: null };
+    } catch (e) {
+        if (e instanceof ApiError && e.status === 401) {
+            return { collections: [], authenticated: false, error: null };
+        }
+        if (e instanceof ApiError) {
+            return { collections: [], authenticated: true, error: e.message };
+        }
+        throw e;
+    }
+};

frontend/src/routes/profile/preferences/+page.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+    import type { ReaderMode, ReaderPageGap } from '$lib/api/preferences';
+    import { preferences } from '$lib/preferences.svelte';
+    import { session } from '$lib/session.svelte';
+    import { theme, type Theme } from '$lib/theme.svelte';
+    import Monitor from '@lucide/svelte/icons/monitor';
+    import Sun from '@lucide/svelte/icons/sun';
+    import Moon from '@lucide/svelte/icons/moon';
+    import FileText from '@lucide/svelte/icons/file-text';
+    import ScrollText from '@lucide/svelte/icons/scroll-text';
+
+    const READER_MODES: { value: ReaderMode; label: string }[] = [
+        { value: 'single', label: 'Single page' },
+        { value: 'continuous', label: 'Continuous (scroll)' }
+    ];
+    const READER_GAPS: { value: ReaderPageGap; label: string }[] = [
+        { value: 'none', label: 'None' },
+        { value: 'small', label: 'Small' },
+        { value: 'medium', label: 'Medium' },
+        { value: 'large', label: 'Large' }
+    ];
+
+    function setTheme(next: Theme) {
+        theme.set(next);
+    }
+</script>
+
+<section class="card" aria-label="Appearance">
+    <h2>Appearance</h2>
+    <fieldset class="picker">
+        <legend>Theme</legend>
+        <label class="option" class:selected={theme.value === 'system'}>
+            <input
+                type="radio"
+                name="theme"
+                value="system"
+                checked={theme.value === 'system'}
+                onchange={() => setTheme('system')}
+                data-testid="theme-radio-system"
+            />
+            <Monitor size={18} aria-hidden="true" />
+            <span>System</span>
+        </label>
+        <label class="option" class:selected={theme.value === 'light'}>
+            <input
+                type="radio"
+                name="theme"
+                value="light"
+                checked={theme.value === 'light'}
+                onchange={() => setTheme('light')}
+                data-testid="theme-radio-light"
+            />
+            <Sun size={18} aria-hidden="true" />
+            <span>Light</span>
+        </label>
+        <label class="option" class:selected={theme.value === 'dark'}>
+            <input
+                type="radio"
+                name="theme"
+                value="dark"
+                checked={theme.value === 'dark'}
+                onchange={() => setTheme('dark')}
+                data-testid="theme-radio-dark"
+            />
+            <Moon size={18} aria-hidden="true" />
+            <span>Dark</span>
+        </label>
+    </fieldset>
+</section>
+
+<section class="card" aria-label="Reader">
+    <h2>Reader</h2>
+    {#if !session.user}
+        <p class="hint" data-testid="reader-prefs-guest-hint">
+            Sign in to sync these settings across devices. Until then they live in this browser.
+        </p>
+    {/if}
+    <fieldset class="picker">
+        <legend>Layout</legend>
+        {#each READER_MODES as opt (opt.value)}
+            <label class="option" class:selected={preferences.readerMode === opt.value}>
+                <input
+                    type="radio"
+                    name="reader-mode"
+                    value={opt.value}
+                    checked={preferences.readerMode === opt.value}
+                    onchange={() => preferences.setMode(opt.value)}
+                    data-testid={`reader-mode-radio-${opt.value}`}
+                />
+                {#if opt.value === 'single'}
+                    <FileText size={18} aria-hidden="true" />
+                {:else}
+                    <ScrollText size={18} aria-hidden="true" />
+                {/if}
+                <span>{opt.label}</span>
+            </label>
+        {/each}
+    </fieldset>
+
+    {#if preferences.readerMode === 'continuous'}
+        <fieldset class="picker gap-picker">
+            <legend>Page gap</legend>
+            {#each READER_GAPS as opt (opt.value)}
+                <label class="option" class:selected={preferences.readerPageGap === opt.value}>
+                    <input
+                        type="radio"
+                        name="reader-gap"
+                        value={opt.value}
+                        checked={preferences.readerPageGap === opt.value}
+                        onchange={() => preferences.setGap(opt.value)}
+                        data-testid={`reader-gap-radio-${opt.value}`}
+                    />
+                    <span>{opt.label}</span>
+                </label>
+            {/each}
+        </fieldset>
+    {/if}
+</section>
+
+<style>
+    .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        padding: var(--space-4);
+        max-width: 32rem;
+        margin-bottom: var(--space-4);
+    }
+
+    .hint {
+        color: var(--text-muted);
+        font-size: var(--font-sm);
+    }
+
+    .picker {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-2);
+        border: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .gap-picker {
+        margin-top: var(--space-3);
+    }
+
+    .picker legend {
+        font-size: var(--font-sm);
+        color: var(--text);
+        padding: 0;
+        margin-bottom: var(--space-2);
+    }
+
+    .option {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: var(--space-2) var(--space-3);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-md);
+        background: var(--surface);
+        color: var(--text);
+        font-size: var(--font-sm);
+        cursor: pointer;
+        transition:
+            background var(--transition),
+            border-color var(--transition);
+    }
+
+    .option:hover {
+        background: var(--surface-elevated);
+    }
+
+    .option input[type='radio'] {
+        position: absolute;
+        opacity: 0;
+        pointer-events: none;
+        width: 0;
+        height: 0;
+    }
+
+    .option.selected {
+        background: var(--primary-soft-bg);
+        border-color: var(--primary);
+        color: var(--text);
+    }
+
+    .option:has(input:focus-visible) {
+        outline: 2px solid var(--focus-ring);
+        outline-offset: 2px;
+    }
+</style>

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

@@ -1,354 +0,0 @@
-<script lang="ts">
-    import { goto } from '$app/navigation';
-    import { changePassword } from '$lib/api/auth';
-    import { ApiError } from '$lib/api/client';
-    import type { ReaderMode, ReaderPageGap } from '$lib/api/preferences';
-    import { preferences } from '$lib/preferences.svelte';
-    import { session } from '$lib/session.svelte';
-    import { theme, type Theme } from '$lib/theme.svelte';
-    import Monitor from '@lucide/svelte/icons/monitor';
-    import Sun from '@lucide/svelte/icons/sun';
-    import Moon from '@lucide/svelte/icons/moon';
-    import FileText from '@lucide/svelte/icons/file-text';
-    import ScrollText from '@lucide/svelte/icons/scroll-text';
-
-    const READER_MODES: { value: ReaderMode; label: string }[] = [
-        { value: 'single', label: 'Single page' },
-        { value: 'continuous', label: 'Continuous (scroll)' }
-    ];
-    const READER_GAPS: { value: ReaderPageGap; label: string }[] = [
-        { value: 'none', label: 'None' },
-        { value: 'small', label: 'Small' },
-        { value: 'medium', label: 'Medium' },
-        { value: 'large', label: 'Large' }
-    ];
-
-    function setTheme(next: Theme) {
-        theme.set(next);
-    }
-
-    let currentPassword = $state('');
-    let newPassword = $state('');
-    let confirmPassword = $state('');
-    let submitting = $state(false);
-    let success = $state<string | null>(null);
-    let error: string | null = $state(null);
-
-    const passwordsMatch = $derived(
-        newPassword.length > 0 && newPassword === confirmPassword
-    );
-    const canSubmit = $derived(
-        Boolean(session.user) &&
-            currentPassword.length > 0 &&
-            newPassword.length >= 8 &&
-            passwordsMatch &&
-            !submitting
-    );
-
-    async function submit(e: SubmitEvent) {
-        e.preventDefault();
-        if (!canSubmit) return;
-        submitting = true;
-        success = null;
-        error = null;
-        try {
-            await changePassword({
-                current_password: currentPassword,
-                new_password: newPassword
-            });
-            success = 'Password updated. Other devices have been signed out.';
-            currentPassword = '';
-            newPassword = '';
-            confirmPassword = '';
-        } catch (e) {
-            if (e instanceof ApiError && e.status === 401 && !session.user) {
-                // The CurrentUser extractor rejected us — session must
-                // have been wiped externally. Bounce to login.
-                await goto('/login');
-                return;
-            }
-            error = e instanceof Error ? e.message : String(e);
-        } finally {
-            submitting = false;
-        }
-    }
-</script>
-
-<svelte:head>
-    <title>Settings — Mangalord</title>
-</svelte:head>
-
-<h1>Settings</h1>
-
-<section class="card" aria-label="Appearance">
-    <h2>Appearance</h2>
-    <fieldset class="theme-picker">
-        <legend>Theme</legend>
-        <label class="theme-option" class:selected={theme.value === 'system'}>
-            <input
-                type="radio"
-                name="theme"
-                value="system"
-                checked={theme.value === 'system'}
-                onchange={() => setTheme('system')}
-                data-testid="theme-radio-system"
-            />
-            <Monitor size={18} aria-hidden="true" />
-            <span>System</span>
-        </label>
-        <label class="theme-option" class:selected={theme.value === 'light'}>
-            <input
-                type="radio"
-                name="theme"
-                value="light"
-                checked={theme.value === 'light'}
-                onchange={() => setTheme('light')}
-                data-testid="theme-radio-light"
-            />
-            <Sun size={18} aria-hidden="true" />
-            <span>Light</span>
-        </label>
-        <label class="theme-option" class:selected={theme.value === 'dark'}>
-            <input
-                type="radio"
-                name="theme"
-                value="dark"
-                checked={theme.value === 'dark'}
-                onchange={() => setTheme('dark')}
-                data-testid="theme-radio-dark"
-            />
-            <Moon size={18} aria-hidden="true" />
-            <span>Dark</span>
-        </label>
-    </fieldset>
-</section>
-
-<section class="card" aria-label="Reader">
-    <h2>Reader</h2>
-    {#if !session.user}
-        <p class="hint" data-testid="reader-prefs-guest-hint">
-            Sign in to sync these settings across devices. Until then they live in this browser.
-        </p>
-    {/if}
-    <fieldset class="theme-picker">
-        <legend>Layout</legend>
-        {#each READER_MODES as opt (opt.value)}
-            <label class="theme-option" class:selected={preferences.readerMode === opt.value}>
-                <input
-                    type="radio"
-                    name="reader-mode"
-                    value={opt.value}
-                    checked={preferences.readerMode === opt.value}
-                    onchange={() => preferences.setMode(opt.value)}
-                    data-testid={`reader-mode-radio-${opt.value}`}
-                />
-                {#if opt.value === 'single'}
-                    <FileText size={18} aria-hidden="true" />
-                {:else}
-                    <ScrollText size={18} aria-hidden="true" />
-                {/if}
-                <span>{opt.label}</span>
-            </label>
-        {/each}
-    </fieldset>
-
-    {#if preferences.readerMode === 'continuous'}
-        <fieldset class="theme-picker gap-picker">
-            <legend>Page gap</legend>
-            {#each READER_GAPS as opt (opt.value)}
-                <label class="theme-option" class:selected={preferences.readerPageGap === opt.value}>
-                    <input
-                        type="radio"
-                        name="reader-gap"
-                        value={opt.value}
-                        checked={preferences.readerPageGap === opt.value}
-                        onchange={() => preferences.setGap(opt.value)}
-                        data-testid={`reader-gap-radio-${opt.value}`}
-                    />
-                    <span>{opt.label}</span>
-                </label>
-            {/each}
-        </fieldset>
-    {/if}
-</section>
-
-{#if !session.loaded}
-    <p class="status" data-testid="settings-loading">Loading…</p>
-{:else if !session.user}
-    <p class="status" data-testid="settings-signin">
-        <a href="/login">Sign in</a> to change your password.
-    </p>
-{:else}
-    <section class="card">
-        <h2>Change password</h2>
-        <p class="hint">
-            Changing your password signs out every other device using this account.
-            Bot API tokens keep working — revoke them individually from the bot-token
-            list if you want to invalidate them too.
-        </p>
-        <form onsubmit={submit} action="javascript:void(0)" data-testid="password-form">
-            <label class="form-field">
-                <span>Current password</span>
-                <input
-                    type="password"
-                    bind:value={currentPassword}
-                    autocomplete="current-password"
-                    required
-                    data-testid="current-password"
-                />
-            </label>
-            <label class="form-field">
-                <span>New password</span>
-                <input
-                    type="password"
-                    bind:value={newPassword}
-                    autocomplete="new-password"
-                    minlength="8"
-                    required
-                    data-testid="new-password"
-                />
-            </label>
-            <label class="form-field">
-                <span>Confirm new password</span>
-                <input
-                    type="password"
-                    bind:value={confirmPassword}
-                    autocomplete="new-password"
-                    minlength="8"
-                    required
-                    data-testid="confirm-password"
-                />
-                {#if confirmPassword.length > 0 && !passwordsMatch}
-                    <span class="field-error" role="alert" data-testid="mismatch">
-                        Passwords don't match.
-                    </span>
-                {/if}
-            </label>
-            <button
-                class="primary"
-                type="submit"
-                disabled={!canSubmit}
-                data-testid="password-submit"
-            >
-                {submitting ? 'Updating…' : 'Update password'}
-            </button>
-            {#if success}
-                <p class="success" data-testid="password-success">{success}</p>
-            {/if}
-            {#if error}
-                <p role="alert" class="form-error" data-testid="password-error">{error}</p>
-            {/if}
-        </form>
-    </section>
-{/if}
-
-<style>
-    .status {
-        color: var(--text-muted);
-    }
-
-    .card {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-md);
-        padding: var(--space-4);
-        max-width: 32rem;
-        margin-bottom: var(--space-4);
-    }
-
-    .hint {
-        color: var(--text-muted);
-        font-size: var(--font-sm);
-    }
-
-    form {
-        display: flex;
-        flex-direction: column;
-        gap: var(--space-3);
-    }
-
-    .primary {
-        background: var(--primary);
-        color: var(--primary-contrast);
-        border-color: var(--primary);
-        margin-top: var(--space-1);
-        align-self: flex-start;
-    }
-
-    .primary:hover:not(:disabled) {
-        background: var(--primary-hover);
-        border-color: var(--primary-hover);
-    }
-
-    .field-error {
-        color: var(--danger);
-        font-size: var(--font-sm);
-    }
-
-    .form-error {
-        color: var(--danger);
-    }
-
-    .success {
-        color: var(--success);
-    }
-
-    .theme-picker {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--space-2);
-        border: none;
-        padding: 0;
-        margin: 0;
-    }
-
-    .gap-picker {
-        margin-top: var(--space-3);
-    }
-
-    .theme-picker legend {
-        font-size: var(--font-sm);
-        color: var(--text);
-        padding: 0;
-        margin-bottom: var(--space-2);
-    }
-
-    .theme-option {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--space-2);
-        padding: var(--space-2) var(--space-3);
-        border: 1px solid var(--border-strong);
-        border-radius: var(--radius-md);
-        background: var(--surface);
-        color: var(--text);
-        font-size: var(--font-sm);
-        cursor: pointer;
-        transition:
-            background var(--transition),
-            border-color var(--transition);
-    }
-
-    .theme-option:hover {
-        background: var(--surface-elevated);
-    }
-
-    .theme-option input[type='radio'] {
-        position: absolute;
-        opacity: 0;
-        pointer-events: none;
-        width: 0;
-        height: 0;
-    }
-
-    .theme-option.selected {
-        background: var(--primary-soft-bg);
-        border-color: var(--primary);
-        color: var(--text);
-    }
-
-    .theme-option:has(input:focus-visible) {
-        outline: 2px solid var(--focus-ring);
-        outline-offset: 2px;
-    }
-</style>

frontend/src/routes/settings/+page.ts

@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+/**
+ * /settings was absorbed into /profile in 0.18.0 — the appearance and
+ * reader prefs moved to /profile/preferences and the password form to
+ * /profile/account. Anything else that lands here is a stale bookmark;
+ * bounce them to the new home.
+ */
+export const ssr = false;
+
+export const load: PageLoad = () => {
+    redirect(308, '/profile/preferences');
+};