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

feat: manga metadata with status, authors, genres, tags, and search filters (0.15.0)

Browse Source 
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
2026-05-17 14:32:03 +02:00
parent 60cc7712fa
commit 59d380b6d7
34 changed files with 3614 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

486
frontend/src/routes/+page.svelte
View File

@@ -1,23 +1,56 @@
<script lang="ts">
import { onMount } from 'svelte';
import { listMangas, type Manga, type MangaSort } from '$lib/api/mangas';
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import {
listMangas,
type MangaCard,
type MangaSort,
type MangaStatus
} from '$lib/api/mangas';
import { listGenres, type Genre } from '$lib/api/genres';
import { listTags, type Tag } from '$lib/api/tags';
import { fileUrl } from '$lib/api/client';
import Chip from '$lib/components/Chip.svelte';
import Search from '@lucide/svelte/icons/search';
import BookImage from '@lucide/svelte/icons/book-image';
import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal';
import Plus from '@lucide/svelte/icons/plus';
let mangas: Manga[] = $state([]);
let mangas: MangaCard[] = $state([]);
let search = $state('');
let sort: MangaSort = $state('recent');
let statusFilter = $state<'' | MangaStatus>('');
let selectedGenres = $state<Genre[]>([]);
let selectedTags = $state<Tag[]>([]);
let allGenres = $state<Genre[]>([]);
let tagDraft = $state('');
let tagSuggestions = $state<Tag[]>([]);
let tagSuggestHighlight = $state(-1);
let suggestTimer: ReturnType<typeof setTimeout> | null = null;
// Monotonic counter — discards stale fetch results so a fast typist
// can't see an earlier query's results overwrite the current one.
let suggestSeq = 0;
const tagSuggestListId = 'tag-filter-suggest-list';
let filtersOpen = $state(false);
let total: number | null = $state(null);
let loading = $state(true);
let error: string | null = $state(null);
const activeFilterCount = $derived(
(statusFilter ? 1 : 0) + selectedGenres.length + selectedTags.length
);
async function load() {
loading = true;
error = null;
try {
const result = await listMangas({
search: search.trim() || undefined,
status: statusFilter || undefined,
genreIds: selectedGenres.map((g) => g.id),
tagIds: selectedTags.map((t) => t.id),
sort
});
mangas = result.items;
@@ -29,20 +62,156 @@
}
}
function syncUrl() {
if (!browser) return;
const params = new URLSearchParams();
if (search.trim()) params.set('q', search.trim());
if (sort !== 'recent') params.set('sort', sort);
if (statusFilter) params.set('status', statusFilter);
if (selectedGenres.length)
params.set('genres', selectedGenres.map((g) => g.id).join(','));
if (selectedTags.length)
params.set('tags', selectedTags.map((t) => t.id).join(','));
const qs = params.toString();
const url = qs ? `/?${qs}` : '/';
goto(url, { replaceState: true, keepFocus: true, noScroll: true });
}
async function hydrateFromUrl() {
// Parse the query and resolve the supplied ids back to full Tag /
// Genre objects so the chip rows render real labels.
const url = new URL($page.url);
search = url.searchParams.get('q') ?? '';
const s = url.searchParams.get('sort');
if (s === 'title' || s === 'recent') sort = s;
const st = url.searchParams.get('status');
statusFilter = st === 'ongoing' || st === 'completed' ? st : '';
const genreIds = (url.searchParams.get('genres') ?? '')
.split(',')
.filter(Boolean);
if (genreIds.length) {
selectedGenres = allGenres.filter((g) => genreIds.includes(g.id));
}
const tagIds = (url.searchParams.get('tags') ?? '')
.split(',')
.filter(Boolean);
if (tagIds.length) {
// listTags doesn't take ids; fetch a generous page and filter.
// Tag count is small in the near term, so this is fine.
const tags = await listTags({ limit: 50 });
selectedTags = tags.filter((t) => tagIds.includes(t.id));
}
// Open the filters panel if anything is active so the user can see why.
if (statusFilter || selectedGenres.length || selectedTags.length) {
filtersOpen = true;
}
}
async function onSubmit(e: SubmitEvent) {
e.preventDefault();
syncUrl();
await load();
}
function onSortChange() {
syncUrl();
load();
}
onMount(load);
function onStatusChange() {
syncUrl();
load();
}
function toggleGenre(g: Genre) {
selectedGenres = selectedGenres.some((x) => x.id === g.id)
? selectedGenres.filter((x) => x.id !== g.id)
: [...selectedGenres, g];
syncUrl();
load();
}
function removeTag(t: Tag) {
selectedTags = selectedTags.filter((x) => x.id !== t.id);
syncUrl();
load();
}
function pickTag(t: Tag) {
if (!selectedTags.some((x) => x.id === t.id)) {
selectedTags = [...selectedTags, t];
}
tagDraft = '';
tagSuggestions = [];
tagSuggestHighlight = -1;
syncUrl();
load();
}
function onTagDraftInput() {
tagSuggestHighlight = -1;
if (suggestTimer) clearTimeout(suggestTimer);
const q = tagDraft.trim();
if (q.length === 0) {
tagSuggestions = [];
suggestSeq++;
return;
}
const seq = ++suggestSeq;
suggestTimer = setTimeout(async () => {
try {
const matched = await listTags({ search: q, limit: 6 });
if (seq !== suggestSeq) return;
const chosen = new Set(selectedTags.map((t) => t.id));
tagSuggestions = matched.filter((m) => !chosen.has(m.id));
} catch {
if (seq === suggestSeq) tagSuggestions = [];
}
}, 180);
}
function onTagFilterKeydown(e: KeyboardEvent) {
if (e.key === 'ArrowDown' && tagSuggestions.length > 0) {
e.preventDefault();
tagSuggestHighlight = (tagSuggestHighlight + 1) % tagSuggestions.length;
} else if (e.key === 'ArrowUp' && tagSuggestions.length > 0) {
e.preventDefault();
tagSuggestHighlight =
tagSuggestHighlight <= 0
? tagSuggestions.length - 1
: tagSuggestHighlight - 1;
} else if (e.key === 'Enter' && tagSuggestHighlight >= 0) {
e.preventDefault();
pickTag(tagSuggestions[tagSuggestHighlight]);
} else if (e.key === 'Escape') {
tagSuggestions = [];
tagSuggestHighlight = -1;
}
}
function clearFilters() {
statusFilter = '';
selectedGenres = [];
selectedTags = [];
syncUrl();
load();
}
onMount(async () => {
try {
allGenres = await listGenres();
} catch {
// Filter UI still loads with an empty genre list rather than blocking.
}
await hydrateFromUrl();
await load();
});
</script>
<h1>Mangas</h1>
<form
onsubmit={(e) => {
e.preventDefault();
load();
}}
onsubmit={onSubmit}
action="javascript:void(0)"
class="controls"
>
@@ -54,10 +223,147 @@
placeholder="Search by title or author"
data-testid="search-input"
/>
<button class="icon-btn" type="submit" aria-label="Search" title="Search">
<button class="icon-btn primary" type="submit" aria-label="Search" title="Search">
<Search size={18} aria-hidden="true" />
</button>
<button
type="button"
class="filters-toggle"
class:active={filtersOpen}
onclick={() => (filtersOpen = !filtersOpen)}
aria-expanded={filtersOpen}
aria-controls="filters-panel"
data-testid="filters-toggle"
>
<SlidersHorizontal size={16} aria-hidden="true" />
<span>Filters</span>
{#if activeFilterCount > 0}
<span class="filter-count">{activeFilterCount}</span>
{/if}
</button>
</div>
{#if filtersOpen}
<div class="filters-panel" id="filters-panel" data-testid="filters-panel">
<div class="filter-group">
<span class="filter-label">Status</span>
<div class="status-row">
<label>
<input
type="radio"
name="status"
value=""
bind:group={statusFilter}
onchange={onStatusChange}
/>
<span>Any</span>
</label>
<label>
<input
type="radio"
name="status"
value="ongoing"
bind:group={statusFilter}
onchange={onStatusChange}
/>
<span>Ongoing</span>
</label>
<label>
<input
type="radio"
name="status"
value="completed"
bind:group={statusFilter}
onchange={onStatusChange}
/>
<span>Completed</span>
</label>
</div>
</div>
<div class="filter-group">
<span class="filter-label">Genres (all must match)</span>
<div class="filter-chip-row">
{#each allGenres as g (g.id)}
{@const on = selectedGenres.some((x) => x.id === g.id)}
<button
type="button"
class="genre-pill"
class:active={on}
onclick={() => toggleGenre(g)}
data-testid={`genre-filter-${g.name}`}
>
{g.name}
</button>
{/each}
</div>
</div>
<div class="filter-group">
<span class="filter-label">Tags (all must match)</span>
{#if selectedTags.length > 0}
<div class="filter-chip-row">
{#each selectedTags as t (t.id)}
<Chip
label={t.name}
variant="primary"
onRemove={() => removeTag(t)}
removeLabel={`Remove tag ${t.name}`}
testid={`tag-filter-chip-${t.name}`}
/>
{/each}
</div>
{/if}
<div class="tag-search">
<input
type="text"
role="combobox"
bind:value={tagDraft}
oninput={onTagDraftInput}
onkeydown={onTagFilterKeydown}
placeholder="Type to find a tag"
maxlength="64"
aria-label="Find a tag"
aria-controls={tagSuggestListId}
aria-expanded={tagSuggestions.length > 0}
aria-autocomplete="list"
aria-activedescendant={tagSuggestHighlight >= 0
? `${tagSuggestListId}-opt-${tagSuggestHighlight}`
: undefined}
data-testid="tag-filter-input"
/>
{#if tagSuggestions.length > 0}
<ul class="tag-suggestions" role="listbox" id={tagSuggestListId}>
{#each tagSuggestions as s, i (s.id)}
<li
id={`${tagSuggestListId}-opt-${i}`}
role="option"
aria-selected={i === tagSuggestHighlight}
class:active={i === tagSuggestHighlight}
>
<button
type="button"
tabindex="-1"
onmouseenter={() => (tagSuggestHighlight = i)}
onclick={() => pickTag(s)}
data-testid={`tag-filter-suggestion-${s.name}`}
>
<Plus size={12} aria-hidden="true" />
{s.name}
</button>
</li>
{/each}
</ul>
{/if}
</div>
</div>
{#if activeFilterCount > 0}
<button type="button" class="clear" onclick={clearFilters}>
Clear filters
</button>
{/if}
</div>
{/if}
<div class="config-row">
<label class="sort">
<span>Sort</span>
@@ -100,7 +406,16 @@
</a>
<div class="meta">
<a href="/manga/{m.id}" class="title">{m.title}</a>
{#if m.author}<span class="author">{m.author}</span>{/if}
{#if m.authors.length > 0}
<span class="author">
{m.authors.map((a) => a.name).join(', ')}
</span>
{/if}
{#if m.genres.length > 0}
<span class="genres">
{m.genres.map((g) => g.name).join(' · ')}
</span>
{/if}
</div>
</li>
{/each}
@@ -119,6 +434,7 @@
display: flex;
gap: var(--space-2);
align-items: center;
flex-wrap: wrap;
}
.search {
@@ -127,6 +443,150 @@
max-width: 28rem;
}
.filters-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-3);
height: 36px;
background: var(--surface);
border: 1px solid var(--border-strong);
color: var(--text);
cursor: pointer;
}
.filters-toggle:hover,
.filters-toggle.active {
background: var(--surface-elevated);
border-color: var(--primary);
}
.filter-count {
background: var(--primary);
color: var(--primary-contrast);
border-radius: var(--radius-pill);
font-size: var(--font-xs);
padding: 0 6px;
min-width: 18px;
text-align: center;
}
.filters-panel {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-3);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.filter-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.filter-label {
color: var(--text-muted);
font-size: var(--font-sm);
font-weight: var(--weight-medium);
}
.status-row {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
.status-row label {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--text);
font-size: var(--font-sm);
cursor: pointer;
}
.filter-chip-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.genre-pill {
display: inline-flex;
align-items: center;
padding: 4px var(--space-2);
background: var(--surface-elevated);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--radius-pill);
font-size: var(--font-xs);
cursor: pointer;
}
.genre-pill:hover {
border-color: var(--primary);
}
.genre-pill.active {
background: var(--primary-soft-bg);
border-color: var(--primary);
color: var(--primary);
}
.tag-search {
position: relative;
max-width: 20rem;
}
.tag-search input {
width: 100%;
}
.tag-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 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);
}
.tag-suggestions button {
width: 100%;
background: transparent;
border: 0;
text-align: left;
display: inline-flex;
align-items: center;
gap: var(--space-2);
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);
}
.clear {
align-self: flex-start;
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
font-size: var(--font-sm);
}
.config-row {
display: flex;
flex-wrap: wrap;
@@ -153,12 +613,15 @@
width: 36px;
height: 36px;
padding: 0;
}
.icon-btn.primary {
background: var(--primary);
color: var(--primary-contrast);
border: 1px solid var(--primary);
}
.icon-btn:hover:not(:disabled) {
.icon-btn.primary:hover:not(:disabled) {
background: var(--primary-hover);
border-color: var(--primary-hover);
}
@@ -237,7 +700,8 @@
text-decoration: none;
}
.author {
.author,
.genres {
color: var(--text-muted);
font-size: var(--font-xs);
white-space: nowrap;

361
frontend/src/routes/manga/[id]/+page.svelte
View File

@@ -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 {

213
frontend/src/routes/upload/+page.svelte
View File

@@ -1,24 +1,32 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { ApiError, fileUrl } from '$lib/api/client';
import { createManga } from '$lib/api/mangas';
import { createManga, type MangaStatus } from '$lib/api/mangas';
import { request } from '$lib/api/client';
import { session } from '$lib/session.svelte';
import { formatBytes, validateImageFile } from '$lib/upload-validation';
import Chip from '$lib/components/Chip.svelte';
import ArrowUp from '@lucide/svelte/icons/arrow-up';
import ArrowDown from '@lucide/svelte/icons/arrow-down';
import Trash2 from '@lucide/svelte/icons/trash-2';
import UploadCloud from '@lucide/svelte/icons/upload-cloud';
import BookImage from '@lucide/svelte/icons/book-image';
import Plus from '@lucide/svelte/icons/plus';
let { data } = $props();
const mangas = $derived(data.mangas);
const genres = $derived(data.genres);
// -------- Manga form state --------
let mangaTitle = $state('');
let mangaAuthor = $state('');
let mangaStatus = $state<MangaStatus>('ongoing');
let mangaDescription = $state('');
let mangaAuthors = $state<string[]>([]);
let authorDraft = $state('');
let mangaAltTitles = $state<string[]>([]);
let altTitleDraft = $state('');
let mangaGenreIds = $state<string[]>([]);
let coverFile = $state<File | null>(null);
let coverError = $state<string | null>(null);
let mangaSubmitting = $state(false);
@@ -30,6 +38,38 @@
mangaTitle.trim().length > 0 && !coverError && !mangaSubmitting
);
function addAuthor() {
const name = authorDraft.trim();
if (!name) return;
if (!mangaAuthors.some((a) => a.toLowerCase() === name.toLowerCase())) {
mangaAuthors = [...mangaAuthors, name];
}
authorDraft = '';
}
function removeAuthor(name: string) {
mangaAuthors = mangaAuthors.filter((a) => a !== name);
}
function addAltTitle() {
const t = altTitleDraft.trim();
if (!t) return;
if (!mangaAltTitles.includes(t)) {
mangaAltTitles = [...mangaAltTitles, t];
}
altTitleDraft = '';
}
function removeAltTitle(t: string) {
mangaAltTitles = mangaAltTitles.filter((x) => x !== t);
}
function toggleGenre(id: string) {
mangaGenreIds = mangaGenreIds.includes(id)
? mangaGenreIds.filter((g) => g !== id)
: [...mangaGenreIds, id];
}
function onCoverChange(e: Event) {
const input = e.target as HTMLInputElement;
const file = input.files?.[0] ?? null;
@@ -40,6 +80,10 @@
async function submitManga(e: SubmitEvent) {
e.preventDefault();
if (!canSubmitManga) return;
// Pick up an unsubmitted token if the user hit Submit without
// pressing Add — otherwise the typed name silently disappears.
if (authorDraft.trim()) addAuthor();
if (altTitleDraft.trim()) addAltTitle();
mangaSubmitting = true;
mangaError = null;
mangaFieldErrors = {};
@@ -48,14 +92,20 @@
const manga = await createManga(
{
title: mangaTitle.trim(),
author: mangaAuthor.trim() || null,
status: mangaStatus,
authors: mangaAuthors,
alt_titles: mangaAltTitles,
genre_ids: mangaGenreIds,
description: mangaDescription.trim() || null
},
coverFile ?? undefined
);
mangaSuccess = `Created "${manga.title}".`;
mangaTitle = '';
mangaAuthor = '';
mangaStatus = 'ongoing';
mangaAuthors = [];
mangaAltTitles = [];
mangaGenreIds = [];
mangaDescription = '';
coverFile = null;
} catch (e) {
@@ -80,6 +130,9 @@
let isDragOver = $state(false);
const selectedManga = $derived(mangas.find((m) => m.id === chapterMangaId) ?? null);
const selectedMangaAuthors = $derived(
selectedManga ? selectedManga.authors.map((a) => a.name).join(', ') : ''
);
const allChapterPagesValid = $derived(chapterPages.every((p) => !p.error));
const canSubmitChapter = $derived(
Boolean(chapterMangaId) &&
@@ -181,9 +234,6 @@
}
const message = e instanceof Error ? e.message : String(e);
setMessage(message);
// ApiError doesn't carry the details object yet; the API surfaces
// the most actionable field in the message itself, so we keep
// setFields available for a future refinement and clear it now.
setFields({});
}
</script>
@@ -217,15 +267,99 @@
<span class="field-error" role="alert">{mangaFieldErrors.title}</span>
{/if}
</label>
<label class="form-field">
<span>Author</span>
<input
type="text"
bind:value={mangaAuthor}
maxlength="200"
data-testid="manga-author"
/>
<span>Status</span>
<select bind:value={mangaStatus} data-testid="manga-status">
<option value="ongoing">Ongoing</option>
<option value="completed">Completed</option>
</select>
</label>
<div class="form-field">
<span>Authors</span>
<div class="token-row">
{#each mangaAuthors as a (a)}
<Chip label={a} variant="primary" onRemove={() => removeAuthor(a)} />
{/each}
</div>
<div class="token-input-row">
<input
type="text"
bind:value={authorDraft}
onkeydown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
addAuthor();
}
}}
placeholder="Add author"
maxlength="200"
data-testid="manga-author-input"
/>
<button
type="button"
class="icon-btn primary"
onclick={addAuthor}
disabled={!authorDraft.trim()}
aria-label="Add author"
title="Add author"
>
<Plus size={16} aria-hidden="true" />
</button>
</div>
</div>
<div class="form-field">
<span>Genres</span>
<div class="genre-grid" data-testid="manga-genres">
{#each genres as g (g.id)}
<label class="genre-toggle">
<input
type="checkbox"
checked={mangaGenreIds.includes(g.id)}
onchange={() => toggleGenre(g.id)}
/>
<span>{g.name}</span>
</label>
{/each}
</div>
</div>
<div class="form-field">
<span>Alternative titles</span>
<div class="token-row">
{#each mangaAltTitles as t (t)}
<Chip label={t} onRemove={() => removeAltTitle(t)} />
{/each}
</div>
<div class="token-input-row">
<input
type="text"
bind:value={altTitleDraft}
onkeydown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
addAltTitle();
}
}}
placeholder="Add alternative title"
maxlength="200"
data-testid="manga-alt-input"
/>
<button
type="button"
class="icon-btn primary"
onclick={addAltTitle}
disabled={!altTitleDraft.trim()}
aria-label="Add alternative title"
title="Add alternative title"
>
<Plus size={16} aria-hidden="true" />
</button>
</div>
</div>
<label class="form-field">
<span>Description</span>
<textarea
@@ -283,7 +417,9 @@
<option value="">Choose…</option>
{#each mangas as m (m.id)}
<option value={m.id}>
{m.title}{#if m.author} — {m.author}{/if}
{m.title}{#if m.authors.length > 0} — {m.authors
.map((a) => a.name)
.join(', ')}{/if}
</option>
{/each}
</select>
@@ -304,8 +440,8 @@
{/if}
<div class="preview-meta">
<span class="preview-title">{selectedManga.title}</span>
{#if selectedManga.author}
<span class="preview-author">{selectedManga.author}</span>
{#if selectedMangaAuthors}
<span class="preview-author">{selectedMangaAuthors}</span>
{/if}
</div>
</div>
@@ -472,6 +608,38 @@
color: var(--success);
}
.token-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-1);
}
.token-input-row {
display: flex;
gap: var(--space-2);
}
.token-input-row input {
flex: 1;
min-width: 0;
}
.genre-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-2);
}
.genre-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--text);
font-size: var(--font-sm);
cursor: pointer;
}
.manga-preview {
display: flex;
align-items: center;
@@ -598,6 +766,17 @@
color: var(--text);
}
.icon-btn.primary {
background: var(--primary);
color: var(--primary-contrast);
border-color: var(--primary);
}
.icon-btn.primary:hover:not(:disabled) {
background: var(--primary-hover);
border-color: var(--primary-hover);
}
.icon-btn.danger:hover:not(:disabled) {
color: var(--danger);
}

13
frontend/src/routes/upload/+page.ts
View File

@@ -1,4 +1,5 @@
import { listMangas, type Manga } from '$lib/api/mangas';
import { listMangas, type MangaCard } from '$lib/api/mangas';
import { listGenres, type Genre } from '$lib/api/genres';
import type { PageLoad } from './$types';
export const ssr = false;
@@ -6,7 +7,11 @@ export const ssr = false;
export const load: PageLoad = async () => {
// The chapter form needs a list of mangas to attach the new chapter
// to. There's no ownership concept yet, so any authenticated user can
// see and add to any manga.
const { items } = await listMangas({ limit: 200, sort: 'title' });
return { mangas: items as Manga[] };
// see and add to any manga. Genres are needed for the create-manga
// form's picker.
const [{ items }, genres] = await Promise.all([
listMangas({ limit: 200, sort: 'title' }),
listGenres()
]);
return { mangas: items as MangaCard[], genres: genres as Genre[] };
};