feat(detail): link genre and tag chips to the filtered catalogue

Genre chips now deep-link to /?genres=<id> and user-tag chips to
/?tags=<id>, reusing the homepage catalogue's existing filter params —
turning the detail page's metadata into one-tap discovery. Tag chips keep
their remove affordance (the Chip's href branch preventDefaults the remove
button). e2e asserts both chip hrefs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-07-04 21:04:30 +02:00
parent 01d18e7ba2
commit ad1689b818
6 changed files with 68 additions and 6 deletions

2
backend/Cargo.lock generated
View File

@@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
[[package]]
name = "mangalord"
version = "0.97.0"
version = "0.98.0"
dependencies = [
"anyhow",
"argon2",

View File

@@ -1,6 +1,6 @@
[package]
name = "mangalord"
version = "0.97.0"
version = "0.98.0"
edition = "2021"
default-run = "mangalord"

View File

@@ -0,0 +1,60 @@
import { test, expect, type Page } from './fixtures';
// Genre and user-tag chips on the manga detail page deep-link into the
// homepage catalogue pre-filtered by that genre / tag.
const mangaId = 'a1111111-1111-1111-1111-111111111111';
const genreId = 'g0000000-0000-0000-0000-000000000005';
const tagId = 't0000000-0000-0000-0000-000000000042';
async function mockDetail(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: '{}' })
);
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/mangas/${mangaId}`, (r) =>
r.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
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: [{ id: genreId, name: 'Fantasy' }],
tags: [{ id: tagId, name: 'isekai', added_by: null }],
content_warnings: [], chapter_storage_bytes: 0
})
})
);
}
test('genre and tag chips link to the filtered catalogue', async ({ page }) => {
await mockDetail(page);
await page.goto(`/manga/${mangaId}`);
await expect(page.getByTestId(`genre-chip-${genreId}`)).toHaveAttribute(
'href',
`/?genres=${genreId}`
);
await expect(page.getByTestId(`tag-chip-${tagId}`)).toHaveAttribute(
'href',
`/?tags=${tagId}`
);
});

View File

@@ -1,12 +1,12 @@
{
"name": "mangalord-frontend",
"version": "0.97.0",
"version": "0.98.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mangalord-frontend",
"version": "0.97.0",
"version": "0.98.0",
"devDependencies": {
"@lucide/svelte": "^1.16.0",
"@playwright/test": "^1.48.0",

View File

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

View File

@@ -426,7 +426,7 @@
<div class="chip-row" data-testid="manga-genres">
<span class="chip-row-label">Genres</span>
{#each genres as g (g.id)}
<Chip label={g.name} />
<Chip label={g.name} href={`/?genres=${g.id}`} testid={`genre-chip-${g.id}`} />
{/each}
</div>
{/if}
@@ -436,6 +436,8 @@
{#each tags as t (t.id)}
<Chip
label={t.name}
href={`/?tags=${t.id}`}
testid={`tag-chip-${t.id}`}
variant="soft"
onRemove={session.user && t.added_by === session.user.id
? () => removeTag(t)