feat: manga metadata with status, authors, genres, tags, and search filters (0.15.0)
Adds first-class manga metadata across the stack: - **Status** (ongoing / completed), **alternative titles**, normalized **multi-author** support, **curated genres** (13 seeded), and **free-form user tags** (case-insensitive, globally shared). Each is modelled as its own table joined to mangas; `mangas.author` is backfilled into `authors` + `manga_authors` and dropped. - New endpoints: `PATCH /v1/mangas/:id` (three-state `description`), `POST/DELETE /v1/mangas/:id/tags[/:tag_id]`, `GET /v1/genres`, `GET /v1/tags?search=`. - `GET /v1/mangas` now returns `MangaCard` (with authors + genres batched in) and supports `?status=`, `?author_id=`, `?genre_id=`, `?tag_id=` filters — AND across facets, with empty-array no-op semantics for the unnest primitive. - `GET /v1/mangas/:id` returns the enriched `MangaDetail` with tags. - Frontend: reusable `Chip` component; manga detail page renders authors as chips linking to `/authors/:id` (Phase 2), a status badge, alt titles, genres, and tags with inline add/remove (only the attacher sees remove); upload form supports multi-author / multi-genre / alt titles / status; search page gets a collapsible URL-synced filter panel with keyboard-navigable tag autocomplete. - 126 backend tests (incl. AND-across-facets primitive, case-insens author/tag de-dup, transactional create rollback, PATCH semantics for missing / null / set on description); 72 frontend tests + svelte-check clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
@@ -1,16 +1,27 @@
|
||||
<script lang="ts">
|
||||
import { fileUrl } from '$lib/api/client';
|
||||
import { createBookmark, deleteBookmark, type Bookmark } from '$lib/api/bookmarks';
|
||||
import {
|
||||
attachTag,
|
||||
detachTag,
|
||||
type AuthorRef,
|
||||
type GenreRef,
|
||||
type TagRef
|
||||
} from '$lib/api/mangas';
|
||||
import { listTags, type Tag } from '$lib/api/tags';
|
||||
import { session } from '$lib/session.svelte';
|
||||
import Chip from '$lib/components/Chip.svelte';
|
||||
import Plus from '@lucide/svelte/icons/plus';
|
||||
|
||||
let { data } = $props();
|
||||
const manga = $derived(data.manga);
|
||||
const chapters = $derived(data.chapters);
|
||||
|
||||
// Local working copy of the bookmark list — mutated optimistically
|
||||
// when the user toggles, instead of re-fetching from the server.
|
||||
// The route re-mounts on /manga/{id} → /manga/{other} navigation,
|
||||
// so capturing the initial value here is the desired behaviour.
|
||||
const authors = $derived<AuthorRef[]>(manga.authors);
|
||||
const genres = $derived<GenreRef[]>(manga.genres);
|
||||
|
||||
// svelte-ignore state_referenced_locally
|
||||
let tags = $state<TagRef[]>([...manga.tags]);
|
||||
// svelte-ignore state_referenced_locally
|
||||
let bookmarks = $state<Bookmark[]>([...data.bookmarks]);
|
||||
|
||||
@@ -19,6 +30,7 @@
|
||||
);
|
||||
|
||||
let busy = $state(false);
|
||||
let altTitlesOpen = $state(false);
|
||||
|
||||
async function toggleBookmark() {
|
||||
if (!session.user) return;
|
||||
@@ -36,6 +48,106 @@
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Tag UI ----
|
||||
let tagDraft = $state('');
|
||||
let tagAddBusy = $state(false);
|
||||
let tagError = $state<string | null>(null);
|
||||
let suggestions = $state<Tag[]>([]);
|
||||
let suggestHighlight = $state(-1);
|
||||
let suggestTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
// Monotonic counter — late-returning fetches with a stale seq are
|
||||
// discarded so a fast typist can't see results from a previous
|
||||
// query overwrite the current one.
|
||||
let suggestSeq = 0;
|
||||
const suggestListId = 'tag-suggest-list';
|
||||
|
||||
function onTagDraftInput() {
|
||||
tagError = null;
|
||||
suggestHighlight = -1;
|
||||
if (suggestTimer) clearTimeout(suggestTimer);
|
||||
const q = tagDraft.trim();
|
||||
if (q.length === 0) {
|
||||
suggestions = [];
|
||||
suggestSeq++;
|
||||
return;
|
||||
}
|
||||
const seq = ++suggestSeq;
|
||||
suggestTimer = setTimeout(async () => {
|
||||
try {
|
||||
const matched = await listTags({ search: q, limit: 6 });
|
||||
if (seq !== suggestSeq) return;
|
||||
// Hide tags already attached so the menu only suggests new picks.
|
||||
const attached = new Set(tags.map((t) => t.id));
|
||||
suggestions = matched.filter((m) => !attached.has(m.id));
|
||||
} catch {
|
||||
if (seq === suggestSeq) suggestions = [];
|
||||
}
|
||||
}, 180);
|
||||
}
|
||||
|
||||
function onTagKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'ArrowDown' && suggestions.length > 0) {
|
||||
e.preventDefault();
|
||||
suggestHighlight = (suggestHighlight + 1) % suggestions.length;
|
||||
} else if (e.key === 'ArrowUp' && suggestions.length > 0) {
|
||||
e.preventDefault();
|
||||
suggestHighlight =
|
||||
suggestHighlight <= 0 ? suggestions.length - 1 : suggestHighlight - 1;
|
||||
} else if (e.key === 'Escape') {
|
||||
suggestions = [];
|
||||
suggestHighlight = -1;
|
||||
}
|
||||
// Enter is handled by the form's onsubmit — if a suggestion is
|
||||
// highlighted we submit that name, otherwise we submit the
|
||||
// raw draft so a brand-new tag can still be created inline.
|
||||
}
|
||||
|
||||
async function submitTag(name: string) {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed || !session.user || tagAddBusy) return;
|
||||
tagAddBusy = true;
|
||||
tagError = null;
|
||||
try {
|
||||
const attached = await attachTag(manga.id, trimmed);
|
||||
// If the tag was already attached by someone else, the
|
||||
// server returns 200 + the existing ref — replace any
|
||||
// matching entry to keep local state coherent.
|
||||
tags = [...tags.filter((t) => t.id !== attached.id), attached];
|
||||
tagDraft = '';
|
||||
suggestions = [];
|
||||
suggestHighlight = -1;
|
||||
} catch (e) {
|
||||
tagError = (e as Error).message;
|
||||
} finally {
|
||||
tagAddBusy = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeTag(tag: TagRef) {
|
||||
if (!session.user || tag.added_by !== session.user.id) return;
|
||||
const snapshot = tags;
|
||||
tags = tags.filter((t) => t.id !== tag.id);
|
||||
try {
|
||||
await detachTag(manga.id, tag.id);
|
||||
} catch (e) {
|
||||
tags = snapshot;
|
||||
tagError = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
function onTagFormSubmit(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
// If the user arrowed down to a suggestion, pick it; otherwise
|
||||
// submit whatever's in the input (allows creating a new tag).
|
||||
const target =
|
||||
suggestHighlight >= 0 && suggestions[suggestHighlight]
|
||||
? suggestions[suggestHighlight].name
|
||||
: tagDraft;
|
||||
submitTag(target);
|
||||
}
|
||||
|
||||
const statusLabel = $derived(manga.status === 'completed' ? 'Completed' : 'Ongoing');
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -54,10 +166,119 @@
|
||||
/>
|
||||
{/if}
|
||||
<div class="meta">
|
||||
<h1 data-testid="manga-title">{manga.title}</h1>
|
||||
{#if manga.author}
|
||||
<p class="author" data-testid="manga-author">by {manga.author}</p>
|
||||
<div class="title-row">
|
||||
<h1 data-testid="manga-title">{manga.title}</h1>
|
||||
<span
|
||||
class="status-badge status-{manga.status}"
|
||||
data-testid="manga-status"
|
||||
>
|
||||
{statusLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{#if authors.length > 0}
|
||||
<div class="chip-row" data-testid="manga-authors">
|
||||
<span class="chip-row-label">by</span>
|
||||
{#each authors as a (a.id)}
|
||||
<Chip label={a.name} href={`/authors/${a.id}`} variant="primary" />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if manga.alt_titles.length > 0}
|
||||
<details
|
||||
class="alt-titles"
|
||||
bind:open={altTitlesOpen}
|
||||
data-testid="manga-alt-titles"
|
||||
>
|
||||
<summary>Also known as ({manga.alt_titles.length})</summary>
|
||||
<ul>
|
||||
{#each manga.alt_titles as alt}
|
||||
<li>{alt}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</details>
|
||||
{/if}
|
||||
|
||||
{#if genres.length > 0}
|
||||
<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} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="chip-row tag-row" data-testid="manga-tags">
|
||||
<span class="chip-row-label">Tags</span>
|
||||
{#each tags as t (t.id)}
|
||||
<Chip
|
||||
label={t.name}
|
||||
variant="soft"
|
||||
onRemove={session.user && t.added_by === session.user.id
|
||||
? () => removeTag(t)
|
||||
: undefined}
|
||||
removeLabel="Remove tag"
|
||||
/>
|
||||
{/each}
|
||||
{#if session.user}
|
||||
<form class="tag-form" onsubmit={onTagFormSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
role="combobox"
|
||||
bind:value={tagDraft}
|
||||
oninput={onTagDraftInput}
|
||||
onkeydown={onTagKeydown}
|
||||
placeholder="Add tag"
|
||||
maxlength="64"
|
||||
aria-label="Add tag"
|
||||
aria-controls={suggestListId}
|
||||
aria-expanded={suggestions.length > 0}
|
||||
aria-autocomplete="list"
|
||||
aria-activedescendant={suggestHighlight >= 0
|
||||
? `${suggestListId}-opt-${suggestHighlight}`
|
||||
: undefined}
|
||||
class="tag-input"
|
||||
data-testid="tag-input"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
class="tag-add-btn"
|
||||
disabled={!tagDraft.trim() || tagAddBusy}
|
||||
aria-label="Add tag"
|
||||
title="Add tag"
|
||||
>
|
||||
<Plus size={14} aria-hidden="true" />
|
||||
</button>
|
||||
{#if suggestions.length > 0}
|
||||
<ul class="tag-suggestions" role="listbox" id={suggestListId}>
|
||||
{#each suggestions as s, i (s.id)}
|
||||
<li
|
||||
id={`${suggestListId}-opt-${i}`}
|
||||
role="option"
|
||||
aria-selected={i === suggestHighlight}
|
||||
class:active={i === suggestHighlight}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
onmouseenter={() => (suggestHighlight = i)}
|
||||
onclick={() => submitTag(s.name)}
|
||||
data-testid="tag-suggestion"
|
||||
>
|
||||
{s.name}
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
{#if tagError}
|
||||
<p class="tag-error" role="alert">{tagError}</p>
|
||||
{/if}
|
||||
|
||||
{#if manga.description}
|
||||
<p class="description" data-testid="manga-description">{manga.description}</p>
|
||||
{/if}
|
||||
@@ -123,15 +344,135 @@
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.author {
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-row h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px var(--space-2);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--font-xs);
|
||||
font-weight: var(--weight-semibold);
|
||||
background: var(--surface-elevated);
|
||||
border: 1px solid var(--border-strong);
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 var(--space-3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.status-badge.status-completed {
|
||||
background: var(--success-soft-bg, var(--surface-elevated));
|
||||
color: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin: var(--space-2) 0;
|
||||
}
|
||||
|
||||
.chip-row-label {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.alt-titles {
|
||||
margin: var(--space-2) 0;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.alt-titles ul {
|
||||
margin: var(--space-1) 0 0;
|
||||
padding-left: var(--space-5);
|
||||
}
|
||||
|
||||
.description {
|
||||
white-space: pre-wrap;
|
||||
color: var(--text);
|
||||
margin-bottom: var(--space-3);
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag-form {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag-input {
|
||||
height: 28px;
|
||||
padding: 0 var(--space-2);
|
||||
font-size: var(--font-xs);
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.tag-add-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
background: var(--primary);
|
||||
color: var(--primary-contrast);
|
||||
border: 1px solid var(--primary);
|
||||
}
|
||||
|
||||
.tag-add-btn:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
|
||||
.tag-suggestions {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin: var(--space-1) 0 0;
|
||||
padding: var(--space-1) 0;
|
||||
list-style: none;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
z-index: var(--z-dropdown);
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
.tag-suggestions button {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
padding: var(--space-1) var(--space-3);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.tag-suggestions li.active button,
|
||||
.tag-suggestions button:hover {
|
||||
background: var(--primary-soft-bg);
|
||||
}
|
||||
|
||||
.tag-error {
|
||||
color: var(--danger);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
|
||||
Reference in New Issue
Block a user