feat: global navigation progress bar

Most data routes run their load with ssr = false, so SvelteKit holds the
previous page on screen while the next one's data resolves — with no
feedback. NavProgress, mounted once in the root layout and driven by the
$navigating store, shows a thin top bar that trickles while a navigation is
pending and fades out on completion. Degrades to a static visible bar under
prefers-reduced-motion. New --z-nav-progress token sits above the fixed
header but below modals/toasts.

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

frontend/e2e/nav-progress.spec.ts

@@ -0,0 +1,147 @@
+import { test, expect, type Page } from './fixtures';
+
+// The global nav progress bar (rendered once in the root layout) is the only
+// feedback most data routes have while a client-side navigation is pending:
+// they run `load` with `ssr = false`, so SvelteKit holds the previous page on
+// screen with no indication anything is happening. This drives a real
+// home -> detail navigation, holds the detail's `getManga` open, and asserts
+// the bar activates during the pending load and clears once it settles.
+
+const mangaId = 'm1111111-1111-1111-1111-111111111111';
+
+const listItem = {
+    id: mangaId,
+    title: 'Berserk',
+    status: 'ongoing',
+    alt_titles: [],
+    description: null,
+    cover_image_path: null,
+    created_at: '2026-01-01T00:00:00Z',
+    updated_at: '2026-01-01T00:00:00Z',
+    authors: [],
+    genres: []
+};
+
+const mangaDetail = {
+    id: mangaId,
+    title: 'Berserk',
+    status: 'ongoing',
+    alt_titles: [],
+    description: null,
+    cover_image_path: null,
+    created_at: '2026-01-01T00:00:00Z',
+    updated_at: '2026-01-01T00:00:00Z',
+    authors: [],
+    genres: [],
+    tags: [],
+    content_warnings: [],
+    chapter_storage_bytes: 0
+};
+
+async function mockCommon(page: Page) {
+    await page.route('**/api/v1/auth/config', (r) =>
+        r.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ self_register_enabled: true, private_mode: false })
+        })
+    );
+    await page.route('**/api/v1/auth/me', (r) =>
+        r.fulfill({
+            status: 401,
+            contentType: 'application/json',
+            body: JSON.stringify({ error: { code: 'unauthenticated', message: 'no' } })
+        })
+    );
+    await page.route('**/api/v1/auth/me/preferences', (r) =>
+        r.fulfill({
+            status: 401,
+            contentType: 'application/json',
+            body: JSON.stringify({ error: { code: 'unauthenticated', message: 'no' } })
+        })
+    );
+    await page.route('**/api/v1/genres*', (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: '[]' })
+    );
+    // Catalog list (Pattern B). Registered before the detail routes so the
+    // more-specific handlers below win for the /mangas/:id URLs.
+    await page.route('**/api/v1/mangas*', (r) =>
+        r.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ items: [listItem], page: { limit: 50, offset: 0, total: 1 } })
+        })
+    );
+    // Detail load's non-manga calls.
+    await page.route('**/api/v1/me/bookmarks*', (r) =>
+        r.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } })
+        })
+    );
+    await page.route(`**/api/v1/mangas/${mangaId}/chapters*`, (r) =>
+        r.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ items: [], page: { limit: 50, offset: 0, total: 0 } })
+        })
+    );
+    await page.route(`**/api/v1/mangas/${mangaId}/similar`, (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [] }) })
+    );
+    await page.route(`**/api/v1/me/read-progress/${mangaId}`, (r) =>
+        r.fulfill({
+            status: 404,
+            contentType: 'application/json',
+            body: JSON.stringify({ error: { code: 'not_found', message: 'no' } })
+        })
+    );
+    await page.route(`**/api/v1/me/reactions/${mangaId}`, (r) =>
+        r.fulfill({
+            status: 404,
+            contentType: 'application/json',
+            body: JSON.stringify({ error: { code: 'not_found', message: 'no' } })
+        })
+    );
+}
+
+test('shows the nav progress bar during a pending navigation and clears it after', async ({
+    page
+}) => {
+    await mockCommon(page);
+
+    // Hold the detail's getManga open so the navigation stays pending long
+    // enough to observe the bar. Registered last => wins for the exact
+    // /mangas/:id URL over the catalog glob.
+    let releaseDetail: () => void = () => {};
+    const gate = new Promise<void>((resolve) => {
+        releaseDetail = resolve;
+    });
+    await page.route(`**/api/v1/mangas/${mangaId}`, async (route) => {
+        await gate;
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(mangaDetail)
+        });
+    });
+
+    await page.goto('/');
+    await expect(page.getByTestId('manga-list')).toBeVisible();
+
+    const bar = page.getByTestId('nav-progress');
+    // Idle on a settled page.
+    await expect(bar).not.toHaveClass(/active/);
+
+    // Client-side navigate into the (gated) detail page.
+    await page.locator(`a[href="/manga/${mangaId}"]`).first().click();
+
+    // Bar activates while the detail load is in flight.
+    await expect(bar).toHaveClass(/active/);
+
+    // Let the load resolve; the detail renders and the bar goes idle again.
+    releaseDetail();
+    await expect(page.getByTestId('manga-title')).toHaveText('Berserk');
+    await expect(bar).not.toHaveClass(/active/);
+});