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/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 page.getByTestId('nav-settings').click();
-    await expect(page).toHaveURL(/\/settings$/);
+    await expect(page.getByTestId('nav-profile')).toBeVisible();
+    await page.getByTestId('nav-profile').click();
+    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 expect(page.getByTestId('settings-signin')).toBeVisible();
+    await page.goto('/profile');
+    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();