feat: manga collections (0.17.0)
User-owned named lists of mangas with an add-to-collection modal on the manga page and dedicated /collections and /collections/:id pages. - Schema (0010): `collections` (per-user case-insensitive name uniqueness) + `collection_mangas` join with cascade FKs. - Endpoints: full CRUD on `/v1/collections`, idempotent add/remove for `/v1/collections/:id/mangas`, and `/v1/mangas/:id/my-collections` for the modal's pre-checked state. Owner-mismatch surfaces as 404 (not 403) so the API doesn't disclose collection existence to non-owners; the frontend funnels 401 to /login. Three-state PATCH via a new shared `domain::patch::Patch<T>` lets clients distinguish "leave alone", "clear", and "set" for description. - Frontend: reusable `Modal` component (focus trap, opt-in backdrop close, ESC) and `AddToCollectionModal` with optimistic toggling that's race-safe under fast clicks. /collections page renders cover-collage cards; /collections/:id is editable with per-card remove. Top nav gets a Collections link. 155 backend tests (incl. 21 collection tests covering ownership, idempotence, sample-cover enrichment, three-state PATCH, FK race); 88 frontend tests; svelte-check clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mangalord-frontend",
|
||||
"version": "0.16.0",
|
||||
"version": "0.17.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
158
frontend/src/lib/api/collections.test.ts
Normal file
158
frontend/src/lib/api/collections.test.ts
Normal file
@@ -0,0 +1,158 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach, type MockInstance } from 'vitest';
|
||||
import {
|
||||
listMyCollections,
|
||||
listMyCollectionsOrEmpty,
|
||||
createCollection,
|
||||
getCollection,
|
||||
updateCollection,
|
||||
deleteCollection,
|
||||
listCollectionMangas,
|
||||
addMangaToCollection,
|
||||
removeMangaFromCollection,
|
||||
getMyCollectionsContaining
|
||||
} from './collections';
|
||||
|
||||
function ok(body: unknown, status = 200): Response {
|
||||
return new Response(JSON.stringify(body), {
|
||||
status,
|
||||
headers: { 'content-type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
function noContent(): Response {
|
||||
return new Response(null, { status: 204 });
|
||||
}
|
||||
|
||||
function envelope(status: number, code: string, message: string): Response {
|
||||
return new Response(JSON.stringify({ error: { code, message } }), {
|
||||
status,
|
||||
headers: { 'content-type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
function collectionFixture(extra: Record<string, unknown> = {}) {
|
||||
return {
|
||||
id: 'c1',
|
||||
user_id: 'u1',
|
||||
name: 'Favorites',
|
||||
description: null,
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
updated_at: '2026-01-01T00:00:00Z',
|
||||
manga_count: 0,
|
||||
sample_covers: [],
|
||||
...extra
|
||||
};
|
||||
}
|
||||
|
||||
describe('collections api client', () => {
|
||||
let fetchSpy: MockInstance<typeof globalThis.fetch>;
|
||||
|
||||
beforeEach(() => {
|
||||
fetchSpy = vi.spyOn(globalThis, 'fetch');
|
||||
});
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('listMyCollections returns the paged envelope', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(
|
||||
ok({
|
||||
items: [collectionFixture()],
|
||||
page: { limit: 50, offset: 0, total: 1 }
|
||||
})
|
||||
);
|
||||
const result = await listMyCollections();
|
||||
expect(result.items[0].name).toBe('Favorites');
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toMatch(/\/v1\/me\/collections$/);
|
||||
});
|
||||
|
||||
it('listMyCollectionsOrEmpty returns empty page on 401', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(envelope(401, 'unauthenticated', 'login required'));
|
||||
const result = await listMyCollectionsOrEmpty();
|
||||
expect(result.items).toEqual([]);
|
||||
expect(result.page.total).toBeNull();
|
||||
});
|
||||
|
||||
it('listMyCollectionsOrEmpty re-throws non-401 errors', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(envelope(500, 'internal_error', 'oops'));
|
||||
await expect(listMyCollectionsOrEmpty()).rejects.toMatchObject({ status: 500 });
|
||||
});
|
||||
|
||||
it('createCollection POSTs JSON to /v1/collections', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(ok(collectionFixture(), 201));
|
||||
const c = await createCollection({ name: 'Favorites' });
|
||||
expect(c.name).toBe('Favorites');
|
||||
const init = fetchSpy.mock.calls[0][1] as RequestInit;
|
||||
expect(init.method).toBe('POST');
|
||||
expect(JSON.parse(init.body as string)).toEqual({ name: 'Favorites' });
|
||||
});
|
||||
|
||||
it('getCollection encodes the id', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(ok(collectionFixture()));
|
||||
await getCollection('id with space');
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toContain('/v1/collections/id%20with%20space');
|
||||
});
|
||||
|
||||
it('updateCollection PATCHes with the patch body', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(ok(collectionFixture({ name: 'Read later' })));
|
||||
const updated = await updateCollection('c1', { name: 'Read later' });
|
||||
expect(updated.name).toBe('Read later');
|
||||
const init = fetchSpy.mock.calls[0][1] as RequestInit;
|
||||
expect(init.method).toBe('PATCH');
|
||||
expect(JSON.parse(init.body as string)).toEqual({ name: 'Read later' });
|
||||
});
|
||||
|
||||
it('deleteCollection issues DELETE', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(noContent());
|
||||
await deleteCollection('c1');
|
||||
const init = fetchSpy.mock.calls[0][1] as RequestInit;
|
||||
expect(init.method).toBe('DELETE');
|
||||
});
|
||||
|
||||
it('listCollectionMangas returns the paged envelope of mangas', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(
|
||||
ok({
|
||||
items: [
|
||||
{
|
||||
id: 'm1',
|
||||
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'
|
||||
}
|
||||
],
|
||||
page: { limit: 50, offset: 0, total: 1 }
|
||||
})
|
||||
);
|
||||
const r = await listCollectionMangas('c1');
|
||||
expect(r.items[0].title).toBe('Berserk');
|
||||
});
|
||||
|
||||
it('addMangaToCollection POSTs the manga_id', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(ok({}, 201));
|
||||
await addMangaToCollection('c1', 'm9');
|
||||
const init = fetchSpy.mock.calls[0][1] as RequestInit;
|
||||
expect(init.method).toBe('POST');
|
||||
expect(JSON.parse(init.body as string)).toEqual({ manga_id: 'm9' });
|
||||
});
|
||||
|
||||
it('removeMangaFromCollection DELETEs the nested resource', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(noContent());
|
||||
await removeMangaFromCollection('c1', 'm9');
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toMatch(/\/v1\/collections\/c1\/mangas\/m9$/);
|
||||
});
|
||||
|
||||
it('getMyCollectionsContaining returns the id list', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(ok({ collection_ids: ['c1', 'c3'] }));
|
||||
const ids = await getMyCollectionsContaining('m1');
|
||||
expect(ids).toEqual(['c1', 'c3']);
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toMatch(/\/v1\/mangas\/m1\/my-collections$/);
|
||||
});
|
||||
});
|
||||
139
frontend/src/lib/api/collections.ts
Normal file
139
frontend/src/lib/api/collections.ts
Normal file
@@ -0,0 +1,139 @@
|
||||
import { ApiError, request, type Manga, type Page } from './client';
|
||||
|
||||
export type Collection = {
|
||||
id: string;
|
||||
user_id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
/** Returned by `GET /v1/me/collections` — enriched for card rendering. */
|
||||
export type CollectionSummary = Collection & {
|
||||
manga_count: number;
|
||||
/** Up to 3 cover image keys, newest-added first. */
|
||||
sample_covers: string[];
|
||||
};
|
||||
|
||||
export type CollectionsPage = {
|
||||
items: CollectionSummary[];
|
||||
page: Page;
|
||||
};
|
||||
|
||||
export type CollectionMangasPage = {
|
||||
items: Manga[];
|
||||
page: Page;
|
||||
};
|
||||
|
||||
export type NewCollection = {
|
||||
name: string;
|
||||
description?: string | null;
|
||||
};
|
||||
|
||||
export type CollectionPatch = {
|
||||
name?: string;
|
||||
description?: string | null;
|
||||
};
|
||||
|
||||
export type ListMyOptions = { limit?: number; offset?: number };
|
||||
|
||||
export async function listMyCollections(
|
||||
opts: ListMyOptions = {}
|
||||
): Promise<CollectionsPage> {
|
||||
const params = new URLSearchParams();
|
||||
if (opts.limit != null) params.set('limit', String(opts.limit));
|
||||
if (opts.offset != null) params.set('offset', String(opts.offset));
|
||||
const qs = params.toString();
|
||||
return request<CollectionsPage>(`/v1/me/collections${qs ? `?${qs}` : ''}`);
|
||||
}
|
||||
|
||||
/** Empty page on 401 so guest-rendering pages don't have to special-case. */
|
||||
export async function listMyCollectionsOrEmpty(): Promise<CollectionsPage> {
|
||||
try {
|
||||
return await listMyCollections();
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError && e.status === 401) {
|
||||
return { items: [], page: { limit: 50, offset: 0, total: null } };
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
export async function createCollection(
|
||||
input: NewCollection
|
||||
): Promise<Collection> {
|
||||
return request<Collection>('/v1/collections', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(input)
|
||||
});
|
||||
}
|
||||
|
||||
export async function getCollection(id: string): Promise<Collection> {
|
||||
return request<Collection>(`/v1/collections/${encodeURIComponent(id)}`);
|
||||
}
|
||||
|
||||
export async function updateCollection(
|
||||
id: string,
|
||||
patch: CollectionPatch
|
||||
): Promise<Collection> {
|
||||
return request<Collection>(`/v1/collections/${encodeURIComponent(id)}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(patch)
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteCollection(id: string): Promise<void> {
|
||||
await request<void>(`/v1/collections/${encodeURIComponent(id)}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
}
|
||||
|
||||
export async function listCollectionMangas(
|
||||
id: string,
|
||||
opts: ListMyOptions = {}
|
||||
): Promise<CollectionMangasPage> {
|
||||
const params = new URLSearchParams();
|
||||
if (opts.limit != null) params.set('limit', String(opts.limit));
|
||||
if (opts.offset != null) params.set('offset', String(opts.offset));
|
||||
const qs = params.toString();
|
||||
return request<CollectionMangasPage>(
|
||||
`/v1/collections/${encodeURIComponent(id)}/mangas${qs ? `?${qs}` : ''}`
|
||||
);
|
||||
}
|
||||
|
||||
export async function addMangaToCollection(
|
||||
collectionId: string,
|
||||
mangaId: string
|
||||
): Promise<void> {
|
||||
await request<void>(
|
||||
`/v1/collections/${encodeURIComponent(collectionId)}/mangas`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ manga_id: mangaId })
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export async function removeMangaFromCollection(
|
||||
collectionId: string,
|
||||
mangaId: string
|
||||
): Promise<void> {
|
||||
await request<void>(
|
||||
`/v1/collections/${encodeURIComponent(collectionId)}/mangas/${encodeURIComponent(mangaId)}`,
|
||||
{ method: 'DELETE' }
|
||||
);
|
||||
}
|
||||
|
||||
/** Which of the user's collections currently contain this manga. */
|
||||
export async function getMyCollectionsContaining(
|
||||
mangaId: string
|
||||
): Promise<string[]> {
|
||||
const r = await request<{ collection_ids: string[] }>(
|
||||
`/v1/mangas/${encodeURIComponent(mangaId)}/my-collections`
|
||||
);
|
||||
return r.collection_ids;
|
||||
}
|
||||
279
frontend/src/lib/components/AddToCollectionModal.svelte
Normal file
279
frontend/src/lib/components/AddToCollectionModal.svelte
Normal file
@@ -0,0 +1,279 @@
|
||||
<script lang="ts">
|
||||
import Modal from './Modal.svelte';
|
||||
import {
|
||||
addMangaToCollection,
|
||||
createCollection,
|
||||
listMyCollections,
|
||||
getMyCollectionsContaining,
|
||||
removeMangaFromCollection,
|
||||
type CollectionSummary
|
||||
} from '$lib/api/collections';
|
||||
import Plus from '@lucide/svelte/icons/plus';
|
||||
|
||||
let {
|
||||
open,
|
||||
mangaId,
|
||||
onClose
|
||||
}: {
|
||||
open: boolean;
|
||||
mangaId: string;
|
||||
onClose: () => void;
|
||||
} = $props();
|
||||
|
||||
let collections = $state<CollectionSummary[]>([]);
|
||||
let containingIds = $state<Set<string>>(new Set());
|
||||
let busyIds = $state<Set<string>>(new Set());
|
||||
let newName = $state('');
|
||||
let creating = $state(false);
|
||||
let loading = $state(false);
|
||||
let error: string | null = $state(null);
|
||||
|
||||
// Refetch every time the modal opens (and when the manga id changes
|
||||
// mid-session — unlikely but cheap). The data is per-user and per-
|
||||
// manga, so re-fetching is the simplest way to stay in sync with
|
||||
// changes made elsewhere (e.g., a collection deleted on another page).
|
||||
$effect(() => {
|
||||
if (open) {
|
||||
void load();
|
||||
}
|
||||
});
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
error = null;
|
||||
try {
|
||||
const [page, ids] = await Promise.all([
|
||||
listMyCollections({ limit: 200 }),
|
||||
getMyCollectionsContaining(mangaId)
|
||||
]);
|
||||
collections = page.items;
|
||||
containingIds = new Set(ids);
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Functional set updates that read the latest state at mutation
|
||||
// time, so concurrent toggles on different rows don't clobber
|
||||
// each other by building from a stale snapshot.
|
||||
function withAdd<T>(s: Set<T>, v: T): Set<T> {
|
||||
const n = new Set(s);
|
||||
n.add(v);
|
||||
return n;
|
||||
}
|
||||
function withDelete<T>(s: Set<T>, v: T): Set<T> {
|
||||
const n = new Set(s);
|
||||
n.delete(v);
|
||||
return n;
|
||||
}
|
||||
|
||||
async function toggle(collection: CollectionSummary) {
|
||||
if (busyIds.has(collection.id)) return;
|
||||
const wasIn = containingIds.has(collection.id);
|
||||
// Optimistic toggle — local set first; revert on failure.
|
||||
containingIds = wasIn
|
||||
? withDelete(containingIds, collection.id)
|
||||
: withAdd(containingIds, collection.id);
|
||||
busyIds = withAdd(busyIds, collection.id);
|
||||
try {
|
||||
if (wasIn) {
|
||||
await removeMangaFromCollection(collection.id, mangaId);
|
||||
collection.manga_count = Math.max(0, collection.manga_count - 1);
|
||||
} else {
|
||||
await addMangaToCollection(collection.id, mangaId);
|
||||
collection.manga_count += 1;
|
||||
}
|
||||
} catch (e) {
|
||||
// Revert (read latest containingIds, not the pre-toggle snapshot).
|
||||
containingIds = wasIn
|
||||
? withAdd(containingIds, collection.id)
|
||||
: withDelete(containingIds, collection.id);
|
||||
error = (e as Error).message;
|
||||
} finally {
|
||||
busyIds = withDelete(busyIds, collection.id);
|
||||
}
|
||||
}
|
||||
|
||||
async function createAndAdd() {
|
||||
const name = newName.trim();
|
||||
if (!name || creating) return;
|
||||
creating = true;
|
||||
error = null;
|
||||
try {
|
||||
const created = await createCollection({ name });
|
||||
// The list endpoint sorts by updated_at DESC; adding the
|
||||
// manga immediately also bumps it. Append a synthetic
|
||||
// summary so the new collection appears checked-on right
|
||||
// away rather than waiting for a refetch.
|
||||
await addMangaToCollection(created.id, mangaId);
|
||||
collections = [
|
||||
{
|
||||
...created,
|
||||
manga_count: 1,
|
||||
sample_covers: []
|
||||
},
|
||||
...collections
|
||||
];
|
||||
containingIds = new Set([...containingIds, created.id]);
|
||||
newName = '';
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
} finally {
|
||||
creating = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onCreateSubmit(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
void createAndAdd();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal {open} {onClose} title="Add to collection" size="md" testid="add-to-collection-modal">
|
||||
{#if loading}
|
||||
<p class="status">Loading your collections…</p>
|
||||
{:else if error}
|
||||
<p class="error" role="alert" data-testid="add-to-collection-error">{error}</p>
|
||||
{:else if collections.length === 0}
|
||||
<p class="status" data-testid="no-collections">
|
||||
You don't have any collections yet. Create one below to get started.
|
||||
</p>
|
||||
{:else}
|
||||
<ul class="collection-list">
|
||||
{#each collections as c (c.id)}
|
||||
{@const checked = containingIds.has(c.id)}
|
||||
{@const busy = busyIds.has(c.id)}
|
||||
<li>
|
||||
<label class="row" class:checked>
|
||||
<input
|
||||
type="checkbox"
|
||||
{checked}
|
||||
disabled={busy}
|
||||
onchange={() => toggle(c)}
|
||||
data-testid={`collection-toggle-${c.id}`}
|
||||
/>
|
||||
<span class="row-label">
|
||||
<span class="row-name">{c.name}</span>
|
||||
<span class="row-count">
|
||||
{c.manga_count}
|
||||
{c.manga_count === 1 ? 'manga' : 'mangas'}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
class="create-form"
|
||||
onsubmit={onCreateSubmit}
|
||||
action="javascript:void(0)"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newName}
|
||||
maxlength="64"
|
||||
placeholder="Create new collection"
|
||||
aria-label="New collection name"
|
||||
data-testid="new-collection-name"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
class="create-btn"
|
||||
disabled={!newName.trim() || creating}
|
||||
data-testid="create-collection-btn"
|
||||
>
|
||||
<Plus size={14} aria-hidden="true" />
|
||||
<span>{creating ? 'Creating…' : 'Create + add'}</span>
|
||||
</button>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.status {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger);
|
||||
margin: 0 0 var(--space-2);
|
||||
}
|
||||
|
||||
.collection-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
max-height: 16rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.row:hover {
|
||||
background: var(--surface-elevated);
|
||||
}
|
||||
|
||||
.row.checked {
|
||||
background: var(--primary-soft-bg);
|
||||
}
|
||||
|
||||
.row-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.row-name {
|
||||
color: var(--text);
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
.row-count {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
|
||||
.create-form {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.create-form input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
background: var(--primary);
|
||||
color: var(--primary-contrast);
|
||||
border: 1px solid var(--primary);
|
||||
padding: 0 var(--space-3);
|
||||
height: 36px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.create-btn:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
</style>
|
||||
221
frontend/src/lib/components/Modal.svelte
Normal file
221
frontend/src/lib/components/Modal.svelte
Normal file
@@ -0,0 +1,221 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import X from '@lucide/svelte/icons/x';
|
||||
|
||||
let {
|
||||
open,
|
||||
title,
|
||||
onClose,
|
||||
children,
|
||||
footer,
|
||||
size = 'md',
|
||||
closeOnBackdrop = false,
|
||||
testid
|
||||
}: {
|
||||
open: boolean;
|
||||
title: string;
|
||||
onClose: () => void;
|
||||
children: Snippet;
|
||||
footer?: Snippet;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
/**
|
||||
* Whether clicking the dim backdrop closes the modal. Off by
|
||||
* default — forms with unsaved input would discard typed data
|
||||
* on a misclick. Opt-in for confirm dialogs and read-only
|
||||
* popovers.
|
||||
*/
|
||||
closeOnBackdrop?: boolean;
|
||||
testid?: string;
|
||||
} = $props();
|
||||
|
||||
let dialog: HTMLDivElement | undefined = $state();
|
||||
|
||||
// Track previous focus so we can restore it on close — a basic
|
||||
// requirement for any focus-trapping modal.
|
||||
let previouslyFocused: HTMLElement | null = null;
|
||||
|
||||
$effect(() => {
|
||||
if (open) {
|
||||
previouslyFocused = document.activeElement as HTMLElement | null;
|
||||
// Defer until the dialog mounts.
|
||||
queueMicrotask(() => dialog?.focus());
|
||||
} else if (previouslyFocused) {
|
||||
previouslyFocused.focus();
|
||||
previouslyFocused = null;
|
||||
}
|
||||
});
|
||||
|
||||
function focusable(): HTMLElement[] {
|
||||
if (!dialog) return [];
|
||||
// Standard set of "tab can land here" elements, minus those
|
||||
// disabled or with `tabindex=-1`. Sufficient for our forms.
|
||||
const selector = [
|
||||
'a[href]',
|
||||
'button:not([disabled])',
|
||||
'input:not([disabled]):not([type="hidden"])',
|
||||
'select:not([disabled])',
|
||||
'textarea:not([disabled])',
|
||||
'[tabindex]:not([tabindex="-1"])'
|
||||
].join(',');
|
||||
return Array.from(dialog.querySelectorAll<HTMLElement>(selector));
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (!open) return;
|
||||
if (e.key === 'Escape') {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
if (e.key === 'Tab') {
|
||||
// Wrap focus inside the dialog so Tab/Shift+Tab don't
|
||||
// escape to the background page.
|
||||
const items = focusable();
|
||||
if (items.length === 0) {
|
||||
e.preventDefault();
|
||||
dialog?.focus();
|
||||
return;
|
||||
}
|
||||
const first = items[0];
|
||||
const last = items[items.length - 1];
|
||||
const active = document.activeElement as HTMLElement | null;
|
||||
if (e.shiftKey) {
|
||||
if (active === first || !dialog?.contains(active)) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
}
|
||||
} else if (active === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
document.addEventListener('keydown', onKeydown);
|
||||
return () => document.removeEventListener('keydown', onKeydown);
|
||||
});
|
||||
|
||||
function onBackdropClick(e: MouseEvent) {
|
||||
if (!closeOnBackdrop) return;
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div
|
||||
class="backdrop"
|
||||
onclick={onBackdropClick}
|
||||
role="presentation"
|
||||
data-testid={testid ? `${testid}-backdrop` : undefined}
|
||||
>
|
||||
<div
|
||||
class="dialog size-{size}"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
tabindex="-1"
|
||||
bind:this={dialog}
|
||||
data-testid={testid}
|
||||
>
|
||||
<header class="header">
|
||||
<h2 id="modal-title">{title}</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
onclick={onClose}
|
||||
aria-label="Close"
|
||||
title="Close"
|
||||
data-testid={testid ? `${testid}-close` : undefined}
|
||||
>
|
||||
<X size={18} aria-hidden="true" />
|
||||
</button>
|
||||
</header>
|
||||
<div class="body">{@render children()}</div>
|
||||
{#if footer}
|
||||
<footer class="footer">{@render footer()}</footer>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-4);
|
||||
z-index: var(--z-modal);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.size-sm {
|
||||
max-width: 24rem;
|
||||
}
|
||||
.size-md {
|
||||
max-width: 32rem;
|
||||
}
|
||||
.size-lg {
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
margin: 0;
|
||||
font-size: var(--font-lg);
|
||||
}
|
||||
|
||||
.close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
background: var(--surface-elevated);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: var(--space-4);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -7,6 +7,7 @@
|
||||
import { theme } from '$lib/theme.svelte';
|
||||
import Upload from '@lucide/svelte/icons/upload';
|
||||
import Bookmark from '@lucide/svelte/icons/bookmark';
|
||||
import FolderOpen from '@lucide/svelte/icons/folder-open';
|
||||
import Settings from '@lucide/svelte/icons/settings';
|
||||
import LogOut from '@lucide/svelte/icons/log-out';
|
||||
import '$lib/styles/tokens.css';
|
||||
@@ -56,6 +57,10 @@
|
||||
<Bookmark size={18} aria-hidden="true" />
|
||||
<span>Bookmarks</span>
|
||||
</a>
|
||||
<a class="nav-link" href="/collections">
|
||||
<FolderOpen size={18} aria-hidden="true" />
|
||||
<span>Collections</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="session" data-testid="session-area">
|
||||
{#if !session.loaded}
|
||||
|
||||
158
frontend/src/routes/collections/+page.svelte
Normal file
158
frontend/src/routes/collections/+page.svelte
Normal file
@@ -0,0 +1,158 @@
|
||||
<script lang="ts">
|
||||
import { fileUrl } from '$lib/api/client';
|
||||
import FolderOpen from '@lucide/svelte/icons/folder-open';
|
||||
|
||||
let { data } = $props();
|
||||
const collections = $derived(data.collections);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Collections — Mangalord</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Collections</h1>
|
||||
|
||||
{#if !data.authenticated}
|
||||
<p class="status">
|
||||
<a href="/login">Sign in</a> to see and manage your collections.
|
||||
</p>
|
||||
{:else if data.error}
|
||||
<p class="error" role="alert">{data.error}</p>
|
||||
{:else if collections.length === 0}
|
||||
<p class="status" data-testid="collections-empty">
|
||||
You don't have any collections yet. Open any manga and use
|
||||
<strong>Add to collection</strong> to start one.
|
||||
</p>
|
||||
{:else}
|
||||
<ul class="grid" data-testid="collections-list">
|
||||
{#each collections as c (c.id)}
|
||||
<li class="card">
|
||||
<a href="/collections/{c.id}" class="cover-link" tabindex="-1" aria-hidden="true">
|
||||
<div class="collage">
|
||||
{#if c.sample_covers.length === 0}
|
||||
<div class="collage-empty">
|
||||
<FolderOpen size={36} aria-hidden="true" />
|
||||
</div>
|
||||
{:else}
|
||||
{#each c.sample_covers as cover (cover)}
|
||||
<img
|
||||
src={fileUrl(cover)}
|
||||
alt=""
|
||||
class="collage-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
<div class="meta">
|
||||
<a href="/collections/{c.id}" class="name" data-testid={`collection-${c.id}`}>
|
||||
{c.name}
|
||||
</a>
|
||||
<span class="count">
|
||||
{c.manga_count}
|
||||
{c.manga_count === 1 ? 'manga' : 'mangas'}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.status {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.grid {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.cover-link {
|
||||
display: block;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.collage {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 2px;
|
||||
aspect-ratio: 2 / 3;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.collage-empty {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1 / -1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.collage-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* If only one cover, it fills the whole card. */
|
||||
.collage-cover:only-child {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
/* If two covers, split vertically. */
|
||||
.collage-cover:first-child:nth-last-child(2),
|
||||
.collage-cover:first-child:nth-last-child(2) ~ .collage-cover {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
/* If three covers: the first spans the left column, the other two stack on the right. */
|
||||
.collage-cover:first-child:nth-last-child(3) {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.name:hover {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.count {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
</style>
|
||||
20
frontend/src/routes/collections/+page.ts
Normal file
20
frontend/src/routes/collections/+page.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { ApiError } from '$lib/api/client';
|
||||
import { listMyCollections } from '$lib/api/collections';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const ssr = false;
|
||||
|
||||
export const load: PageLoad = async () => {
|
||||
try {
|
||||
const page = await listMyCollections({ limit: 200 });
|
||||
return { collections: page.items, authenticated: true, error: null };
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError && e.status === 401) {
|
||||
return { collections: [], authenticated: false, error: null };
|
||||
}
|
||||
if (e instanceof ApiError) {
|
||||
return { collections: [], authenticated: true, error: e.message };
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
313
frontend/src/routes/collections/[id]/+page.svelte
Normal file
313
frontend/src/routes/collections/[id]/+page.svelte
Normal file
@@ -0,0 +1,313 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
deleteCollection,
|
||||
removeMangaFromCollection,
|
||||
updateCollection
|
||||
} from '$lib/api/collections';
|
||||
import type { Manga } from '$lib/api/client';
|
||||
import MangaCard from '$lib/components/MangaCard.svelte';
|
||||
import ArrowLeft from '@lucide/svelte/icons/arrow-left';
|
||||
import Pencil from '@lucide/svelte/icons/pencil';
|
||||
import Check from '@lucide/svelte/icons/check';
|
||||
import Trash2 from '@lucide/svelte/icons/trash-2';
|
||||
import X from '@lucide/svelte/icons/x';
|
||||
|
||||
let { data } = $props();
|
||||
// svelte-ignore state_referenced_locally
|
||||
let collection = $state({ ...data.collection });
|
||||
// svelte-ignore state_referenced_locally
|
||||
let mangas = $state<Manga[]>([...data.mangas]);
|
||||
|
||||
let editing = $state(false);
|
||||
let editName = $state('');
|
||||
let editDescription = $state('');
|
||||
let editError: string | null = $state(null);
|
||||
let editBusy = $state(false);
|
||||
|
||||
function startEdit() {
|
||||
editName = collection.name;
|
||||
editDescription = collection.description ?? '';
|
||||
editError = null;
|
||||
editing = true;
|
||||
}
|
||||
|
||||
async function saveEdit() {
|
||||
if (editBusy) return;
|
||||
editBusy = true;
|
||||
editError = null;
|
||||
try {
|
||||
const updated = await updateCollection(collection.id, {
|
||||
name: editName.trim(),
|
||||
description: editDescription.trim() || null
|
||||
});
|
||||
collection = updated;
|
||||
editing = false;
|
||||
} catch (e) {
|
||||
editError = (e as Error).message;
|
||||
} finally {
|
||||
editBusy = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onDeleteCollection() {
|
||||
if (!confirm(`Delete collection "${collection.name}"? This cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await deleteCollection(collection.id);
|
||||
goto('/collections');
|
||||
} catch (e) {
|
||||
editError = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
async function onRemoveManga(m: Manga) {
|
||||
const snapshot = mangas;
|
||||
mangas = mangas.filter((x) => x.id !== m.id);
|
||||
try {
|
||||
await removeMangaFromCollection(collection.id, m.id);
|
||||
} catch (e) {
|
||||
mangas = snapshot;
|
||||
editError = (e as Error).message;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{collection.name} — Mangalord</title>
|
||||
</svelte:head>
|
||||
|
||||
<nav class="back">
|
||||
<a href="/collections" class="back-link">
|
||||
<ArrowLeft size={16} aria-hidden="true" />
|
||||
<span>All collections</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<header class="overview">
|
||||
{#if editing}
|
||||
<form
|
||||
class="edit-form"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
void saveEdit();
|
||||
}}
|
||||
action="javascript:void(0)"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={editName}
|
||||
maxlength="64"
|
||||
required
|
||||
aria-label="Collection name"
|
||||
data-testid="collection-edit-name"
|
||||
/>
|
||||
<textarea
|
||||
bind:value={editDescription}
|
||||
rows="2"
|
||||
maxlength="1024"
|
||||
placeholder="Description (optional)"
|
||||
aria-label="Collection description"
|
||||
data-testid="collection-edit-description"
|
||||
></textarea>
|
||||
<div class="edit-actions">
|
||||
<button
|
||||
type="submit"
|
||||
class="primary"
|
||||
disabled={!editName.trim() || editBusy}
|
||||
data-testid="collection-edit-save"
|
||||
>
|
||||
<Check size={14} aria-hidden="true" />
|
||||
<span>Save</span>
|
||||
</button>
|
||||
<button type="button" onclick={() => (editing = false)} disabled={editBusy}>
|
||||
<X size={14} aria-hidden="true" />
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="title-row">
|
||||
<h1 data-testid="collection-name">{collection.name}</h1>
|
||||
<button
|
||||
type="button"
|
||||
class="icon-btn"
|
||||
onclick={startEdit}
|
||||
aria-label="Edit collection"
|
||||
title="Edit"
|
||||
data-testid="collection-edit-open"
|
||||
>
|
||||
<Pencil size={16} aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="icon-btn danger"
|
||||
onclick={onDeleteCollection}
|
||||
aria-label="Delete collection"
|
||||
title="Delete"
|
||||
data-testid="collection-delete"
|
||||
>
|
||||
<Trash2 size={16} aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
{#if collection.description}
|
||||
<p class="description" data-testid="collection-description">
|
||||
{collection.description}
|
||||
</p>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if editError}
|
||||
<p class="error" role="alert">{editError}</p>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
{#if mangas.length === 0}
|
||||
<p class="status" data-testid="collection-empty">
|
||||
This collection is empty.
|
||||
</p>
|
||||
{:else}
|
||||
<ul class="manga-grid" data-testid="collection-manga-list">
|
||||
{#each mangas as m (m.id)}
|
||||
<li class="card-with-remove">
|
||||
<MangaCard manga={m} testid={`collection-manga-${m.id}`} />
|
||||
<button
|
||||
type="button"
|
||||
class="remove"
|
||||
onclick={() => onRemoveManga(m)}
|
||||
aria-label={`Remove ${m.title} from collection`}
|
||||
title="Remove from collection"
|
||||
data-testid={`collection-remove-manga-${m.id}`}
|
||||
>
|
||||
<X size={14} aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.back {
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.overview {
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.title-row h1 {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--text-muted);
|
||||
margin: var(--space-2) 0 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.edit-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: var(--primary);
|
||||
color: var(--primary-contrast);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger);
|
||||
margin: var(--space-2) 0 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.manga-grid {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.card-with-remove {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.remove {
|
||||
position: absolute;
|
||||
top: var(--space-1);
|
||||
right: var(--space-1);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.card-with-remove:hover .remove,
|
||||
.card-with-remove:focus-within .remove {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: var(--surface-elevated);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.icon-btn.danger:hover {
|
||||
color: var(--danger);
|
||||
}
|
||||
</style>
|
||||
40
frontend/src/routes/collections/[id]/+page.ts
Normal file
40
frontend/src/routes/collections/[id]/+page.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { error, redirect } from '@sveltejs/kit';
|
||||
import { ApiError } from '$lib/api/client';
|
||||
import {
|
||||
getCollection,
|
||||
listCollectionMangas
|
||||
} from '$lib/api/collections';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const ssr = false;
|
||||
|
||||
export const load: PageLoad = async ({ params, url }) => {
|
||||
try {
|
||||
const [collection, mangas] = await Promise.all([
|
||||
getCollection(params.id),
|
||||
listCollectionMangas(params.id, { limit: 200 })
|
||||
]);
|
||||
return {
|
||||
collection,
|
||||
mangas: mangas.items,
|
||||
total: mangas.page.total
|
||||
};
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError) {
|
||||
// 401 means the user's session is gone — bounce to login
|
||||
// and preserve where they wanted to go.
|
||||
if (e.status === 401) {
|
||||
const next = encodeURIComponent(url.pathname);
|
||||
redirect(302, `/login?next=${next}`);
|
||||
}
|
||||
// 403 (post-Phase-3-polish the backend collapses this to
|
||||
// 404 already, but keep the branch for defense-in-depth)
|
||||
// and 404 both render the standard not-found page so the
|
||||
// URL doesn't disclose collection existence to non-owners.
|
||||
if (e.status === 404 || e.status === 403) {
|
||||
error(404, 'Collection not found');
|
||||
}
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
@@ -11,7 +11,9 @@
|
||||
import { listTags, type Tag } from '$lib/api/tags';
|
||||
import { session } from '$lib/session.svelte';
|
||||
import Chip from '$lib/components/Chip.svelte';
|
||||
import AddToCollectionModal from '$lib/components/AddToCollectionModal.svelte';
|
||||
import Plus from '@lucide/svelte/icons/plus';
|
||||
import FolderPlus from '@lucide/svelte/icons/folder-plus';
|
||||
|
||||
let { data } = $props();
|
||||
const manga = $derived(data.manga);
|
||||
@@ -148,6 +150,8 @@
|
||||
}
|
||||
|
||||
const statusLabel = $derived(manga.status === 'completed' ? 'Completed' : 'Ongoing');
|
||||
|
||||
let collectionModalOpen = $state(false);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -284,25 +288,44 @@
|
||||
{/if}
|
||||
|
||||
{#if session.user}
|
||||
<button
|
||||
type="button"
|
||||
class="bookmark"
|
||||
class:active={mangaBookmark}
|
||||
onclick={toggleBookmark}
|
||||
disabled={busy}
|
||||
aria-pressed={mangaBookmark ? 'true' : 'false'}
|
||||
data-testid="bookmark-toggle"
|
||||
>
|
||||
{mangaBookmark ? '★ Bookmarked' : '☆ Bookmark'}
|
||||
</button>
|
||||
<div class="action-row">
|
||||
<button
|
||||
type="button"
|
||||
class="action"
|
||||
class:active={mangaBookmark}
|
||||
onclick={toggleBookmark}
|
||||
disabled={busy}
|
||||
aria-pressed={mangaBookmark ? 'true' : 'false'}
|
||||
data-testid="bookmark-toggle"
|
||||
>
|
||||
{mangaBookmark ? '★ Bookmarked' : '☆ Bookmark'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="action"
|
||||
onclick={() => (collectionModalOpen = true)}
|
||||
data-testid="add-to-collection-open"
|
||||
>
|
||||
<FolderPlus size={16} aria-hidden="true" />
|
||||
<span>Add to collection</span>
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<a class="bookmark" href="/login" data-testid="bookmark-signin">
|
||||
Sign in to bookmark
|
||||
<a class="action" href="/login" data-testid="bookmark-signin">
|
||||
Sign in to bookmark or collect
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if session.user}
|
||||
<AddToCollectionModal
|
||||
open={collectionModalOpen}
|
||||
mangaId={manga.id}
|
||||
onClose={() => (collectionModalOpen = false)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<section aria-label="chapters">
|
||||
<h2>Chapters</h2>
|
||||
{#if chapters.length === 0}
|
||||
@@ -475,11 +498,17 @@
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
padding: 0 var(--space-3);
|
||||
height: 36px;
|
||||
border: 1px solid var(--border-strong);
|
||||
@@ -496,12 +525,12 @@
|
||||
color var(--transition);
|
||||
}
|
||||
|
||||
.bookmark:hover {
|
||||
.action:hover {
|
||||
background: var(--surface-elevated);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bookmark.active {
|
||||
.action.active {
|
||||
background: var(--warning-soft-bg);
|
||||
border-color: var(--warning-border);
|
||||
color: var(--text);
|
||||
|
||||
Reference in New Issue
Block a user