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

bugfix: /bookmarks renders manga title and cover

Browse Source 
The bookmarks list was rendering "Manga bookmark <date>" with no
indication of which manga the bookmark referred to. The data is
already in the DB — the list query just wasn't pulling it.

Backend:
- BookmarkSummary gains manga_title (String) and
  manga_cover_image_path (Option<String>). Populated by an INNER JOIN
  on `mangas` in `repo::bookmark::list_for_user`. The JOIN is INNER
  because `bookmarks.manga_id` has ON DELETE CASCADE, so a bookmark
  cannot outlive its manga. Chapter LEFT JOIN unchanged.
- The existing list_me_enriches_chapter_bookmarks_with_chapter_number
  test now also asserts manga_title is populated for both chapter-
  and manga-level bookmarks, and that manga_cover_image_path is null
  when no cover was uploaded.

Frontend:
- Bookmark type carries optional manga_title and
  manga_cover_image_path (optional because POST /bookmarks returns
  the bare Bookmark, not the enriched summary).
- /bookmarks page redesigned as a grid: cover thumbnail (64×96 with
  a placeholder when no cover) on the left, then the manga title (as
  the primary link), then either "Chapter N — page M" linked to the
  reader, "(chapter removed)" for orphan chapter bookmarks, or
  "Whole manga" for manga-level bookmarks. Bookmark date moves to a
  subdued footer.
- E2E fixtures track the enriched shape returned by the list endpoint
  (vs. the bare Bookmark returned by POST). The toggle test now
  asserts the manga title appears on the bookmarks card after the
  bookmark is created.

Also: tighten .gitignore. `/data` only catches the compose volume
root; the dev backend writes to `/backend/data` (default STORAGE_DIR
is `./data/storage` relative to backend cwd), so local uploads were
showing as untracked. Adding `/backend/data` keeps test uploads out
of the index.

Lockstep version bump to 0.11.1.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-05-17 10:46:01 +02:00
parent 08e4f4fa18
commit dee7f1d160
9 changed files with 139 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/e2e/bookmarks.spec.ts
View File

@@ -23,9 +23,18 @@ const bookmarkFixture = {
page: null,
created_at: '2026-01-01T00:00:00Z'
};
// /me/bookmarks responses are enriched (`BookmarkSummary` on the wire),
// while POST /bookmarks returns the bare `Bookmark`. The mock layer
// returns the bare fixture on POST and the enriched one in the list.
const enrichedBookmarkFixture = {
...bookmarkFixture,
manga_title: 'Berserk',
manga_cover_image_path: null,
chapter_number: null
};
async function setupAuthenticatedBookmarkFlow(page: Page) {
let bookmarks: typeof bookmarkFixture[] = [];
let bookmarks: typeof enrichedBookmarkFixture[] = [];
await page.route('**/api/v1/auth/me', (route) =>
route.fulfill({
@@ -67,7 +76,11 @@ async function setupAuthenticatedBookmarkFlow(page: Page) {
);
await page.route('**/api/v1/bookmarks', (route) => {
if (route.request().method() === 'POST') {
bookmarks = [bookmarkFixture, ...bookmarks];
// List endpoint is enriched (BookmarkSummary), POST returns
// the bare Bookmark — but the in-memory list we surface to
// /me/bookmarks uses the enriched fixture so the rendered
// card has the manga title.
bookmarks = [enrichedBookmarkFixture, ...bookmarks];
route.fulfill({
status: 201,
contentType: 'application/json',
@@ -101,7 +114,10 @@ test('authed user toggles a manga bookmark and sees it in /bookmarks', async ({
// The /bookmarks list reflects it.
await page.goto('/bookmarks');
await expect(page.getByTestId('bookmark-list')).toContainText('Manga bookmark');
// The /bookmarks page now renders a real card with the manga
// title — the fixture title is "Berserk" (see mangaFixture above).
await expect(page.getByTestId('bookmark-title')).toContainText('Berserk');
await expect(page.getByTestId('bookmark-list')).toContainText('Whole manga');
// Toggle off from the manga page.
await page.goto(`/manga/${mangaId}`);

2
frontend/package.json
View File

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

10
frontend/src/lib/api/bookmarks.ts
View File

@@ -8,9 +8,17 @@ export type Bookmark = {
/**
* Reader-facing chapter number, populated by the backend's LEFT
* JOIN when listing. `null` for manga-level bookmarks and for
* chapter bookmarks whose chapter has been deleted.
* chapter bookmarks whose chapter has been deleted. Absent on the
* bare POST response (which returns `Bookmark`, not enriched).
*/
chapter_number?: number | null;
/**
* Parent manga title + cover, JOINed in on the list endpoint so
* the /bookmarks page can render a real card instead of just a
* date. Absent on the POST/DELETE responses.
*/
manga_title?: string;
manga_cover_image_path?: string | null;
page: number | null;
created_at: string;
};

100
frontend/src/routes/bookmarks/+page.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { fileUrl } from '$lib/api/client';
let { data } = $props();
const authenticated = $derived(data.authenticated);
const bookmarks = $derived(data.bookmarks);
@@ -24,21 +26,46 @@
{:else}
<ul class="bookmark-list" data-testid="bookmark-list">
{#each bookmarks as b (b.id)}
<li>
{#if b.chapter_id && b.chapter_number != null}
<a href="/manga/{b.manga_id}/chapter/{b.chapter_number}">
Chapter {b.chapter_number}
{#if b.page != null && b.page > 0}— page {b.page}{/if}
<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">📖</div>
{/if}
</a>
<div class="meta">
<a
href="/manga/{b.manga_id}"
class="title"
data-testid="bookmark-title"
>
{b.manga_title ?? 'Unknown manga'}
</a>
{:else if b.chapter_id}
<!-- Chapter bookmark whose chapter was deleted; fall
back to the manga overview rather than emit a
broken link to a number we don't have. -->
<a href="/manga/{b.manga_id}">Chapter bookmark (chapter removed)</a>
{:else}
<a href="/manga/{b.manga_id}">Manga bookmark</a>
{/if}
<span class="created">{new Date(b.created_at).toLocaleDateString()}</span>
{#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>
@@ -49,12 +76,51 @@
list-style: none;
padding: 0;
}
.bookmark-list li {
padding: 0.5rem 0;
.bookmark {
display: grid;
grid-template-columns: 64px 1fr;
gap: 1rem;
align-items: start;
padding: 0.75rem 0;
border-bottom: 1px solid #eee;
}
.cover-link {
display: block;
line-height: 0;
}
.cover {
width: 64px;
height: 96px;
object-fit: cover;
border-radius: 4px;
background: #f0f0f0;
}
.cover-placeholder {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #999;
user-select: none;
}
.meta {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.title {
font-weight: 600;
font-size: 1rem;
}
.target {
font-size: 0.95rem;
}
.muted {
color: #888;
}
.created {
color: #888;
margin-left: 0.5rem;
font-size: 0.85rem;
}
</style>