fabi/Mangalord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): reader back button pops history instead of pushing (0.60.2)

Browse Source 
The reader's "back to manga" link was a naked `<a href="/manga/{id}">`
that pushed a new history entry on every tap, so browser-back kept
ping-ponging between detail and reader instead of walking out to
home:

  home → detail → reader → reader-back (push detail) → detail-back
       (pop reader) → reader-back (push detail) → … loop forever

The fix intercepts left-click and calls `window.history.back()`
directly when there's same-tab history to pop. Middle-click /
cmd-click / right-click pass through so "open in new tab" still
works, and a deep-link / fresh-tab visit where `history.length ===
1` falls through to the href so the button still leads somewhere
useful.

An earlier attempt gated the back on
`document.referrer.startsWith(origin)` — but SvelteKit's SPA
`pushState` doesn't update `document.referrer`, so that check was
always false in practice and the default href fired anyway. The
e2e regression added here uses real link clicks (not
`window.location.href`) so it actually exercises the SPA-nav path
the bug lives on.

Verified: home → detail → reader, then reader-back keeps
`history.length` at 4 (popped, not pushed), and a second tap on the
detail back button walks out to /.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-06-08 20:59:10 +02:00
parent 00577071fd
commit 9910a0a995
5 changed files with 197 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
frontend/e2e/back-nav-flow.spec.ts Normal file
View File

@@ -0,0 +1,166 @@
import { test, expect, type Page } from '@playwright/test';
// Regression spec for the reader-back-loop bug: previously the reader's
// back arrow was a plain `<a href="/manga/{id}">`, which PUSHED a new
// history entry every tap, so browser-back kept ping-ponging between
// detail and reader instead of walking out to home. The reader now
// intercepts left-click and does `history.back()` when there's
// same-origin history to pop.
const MID = 'a1111111-1111-1111-1111-111111111111';
const CID = 'c1111111-1111-1111-1111-111111111111';
const mangaBody = {
id: MID,
title: 'Berserk',
status: 'ongoing',
alt_titles: [],
description: 'Short.',
cover_image_path: null,
created_at: '2026-01-01T00:00:00Z',
updated_at: '2026-01-01T00:00:00Z',
authors: [],
genres: [],
tags: []
};
async function mockApis(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: 'x', message: 'x' } })
})
);
await page.route('**/api/v1/auth/me/preferences', (r) =>
r.fulfill({ status: 401, contentType: 'application/json', body: '{}' })
);
await page.route('**/api/v1/me/bookmarks*', (r) =>
r.fulfill({ status: 401, contentType: 'application/json', body: '{}' })
);
await page.route('**/api/v1/me/read-progress*', (r) =>
r.fulfill({ status: 404, contentType: 'application/json', body: '{}' })
);
await page.route('**/api/v1/genres*', (r) =>
r.fulfill({ status: 200, contentType: 'application/json', body: '[]' })
);
// Catalog returns a single card whose href points at MID so the
// SPA-click walk lands on the manga we've mocked downstream.
await page.route('**/api/v1/mangas', (r) =>
r.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
items: [mangaBody],
page: { limit: 50, offset: 0, total: 1 }
})
})
);
await page.route('**/api/v1/mangas/**', (r) => {
const u = new URL(r.request().url());
const last = u.pathname.split('/').pop();
if (last === CID)
return r.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
id: CID,
manga_id: MID,
number: 1,
title: 'Ch.1',
page_count: 1,
created_at: '2026-01-01T00:00:00Z'
})
});
if (last === 'pages')
return r.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
pages: [
{
id: 'p',
chapter_id: CID,
page_number: 1,
storage_key: 'x.png',
content_type: 'image/png'
}
]
})
});
if (u.pathname.endsWith('/chapters'))
return r.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
items: [
{
id: CID,
manga_id: MID,
number: 1,
title: 'Ch.1',
page_count: 1,
created_at: '2026-01-01T00:00:00Z'
}
],
page: { limit: 50, offset: 0, total: 1 }
})
});
return r.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify(mangaBody)
});
});
const png = Buffer.from(
'89504e470d0a1a0a0000000d49484452000000010000000108060000001f15c4890000000d49444154789c63000100000005000158a3b62a0000000049454e44ae426082',
'hex'
);
await page.route('**/api/v1/files/**', (r) =>
r.fulfill({ status: 200, contentType: 'image/png', body: png })
);
}
test.describe('back-nav flow', () => {
test('phone viewport: reader back pops history (does not push), then detail back returns to home', async ({
page
}) => {
await mockApis(page);
await page.setViewportSize({ width: 390, height: 844 });
await page.goto('/');
const initialLen = await page.evaluate(() => window.history.length);
// Walk: home → detail → reader USING SPA NAVIGATION (link clicks,
// not window.location.href). The bug only manifests on SPA nav
// because `document.referrer` stays empty across pushState — so
// a hard navigation would silently mask the regression.
await page.locator('[data-testid="manga-list"] a').first().click();
await page.waitForURL(/\/manga\/[^/]+$/);
await page.locator('[data-testid="chapter-list"] a').first().click();
await page.waitForURL(/\/chapter\//);
const lenAtReader = await page.evaluate(() => window.history.length);
expect(lenAtReader).toBe(initialLen + 2);
// Tap reader back → goes back to detail WITHOUT pushing a new entry.
await page.getByTestId('back-to-manga').click();
await page.waitForURL(/\/manga\/[^/]+$/);
const lenAtDetail = await page.evaluate(() => window.history.length);
expect(lenAtDetail).toBe(lenAtReader);
// Tap detail back → walks out to home.
await page.getByTestId('detail-back').click();
await page.waitForURL((url) => url.pathname === '/');
});
});

2
frontend/package.json
View File

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

29
frontend/src/routes/manga/[id]/chapter/[chapter_id]/+page.svelte
View File

@@ -446,6 +446,28 @@
progressTimer = setTimeout(flushProgress, 1500);
}
/**
* Reader back behavior — pop browser history instead of pushing a
* fresh entry for `/manga/{id}`. Previously this was a naked
* `<a href>` and every tap pushed, so browser-back ping-ponged
* between detail and reader instead of walking out to home.
*
* Just check `history.length > 1` — `document.referrer` does NOT
* update across SvelteKit SPA navigations, so referrer-based
* gating silently fell back to the default href every time.
* Middle-click / cmd-click / right-click are passed through so
* "open in new tab" still works.
*/
function onBackClick(e: MouseEvent) {
if (!browser) return;
if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
if (window.history.length > 1) {
e.preventDefault();
window.history.back();
}
// else: let the href navigate (deep-link / fresh tab path)
}
// Single-mode: every page change moves the high-water mark.
// Intentionally NOT depending on `mode` — toggling layout doesn't
// change the read position, and re-running this effect on a mode
@@ -552,7 +574,12 @@
</svelte:head>
<nav class="reader-nav" aria-label="reader" bind:this={readerNavEl}>
<a href="/manga/{manga.id}" class="back" data-testid="back-to-manga">
<a
href="/manga/{manga.id}"
class="back"
onclick={onBackClick}
data-testid="back-to-manga"
>
<ArrowLeft size={18} aria-hidden="true" />
{#if manga.cover_image_path}
<img