feat(search): tag-based page search surface + per-page tags & collections
Add the /search surface (Pages / Chapters / Mangas tabs) backed by per-user page tags and per-page collections: schema (migration 0023), backend endpoints for page tags/collections and tagged-page aggregations (with the OCR text-search param reserved at 501), plus the frontend API clients, library Page-tags tab, collection page sections, page context menu / AddTagsSheet, and reader long-press wiring. Includes the continuous-reader navigation fixes (?page=N handling, chapter-reset timing, back-button pops history) and tag-normalization hardening accumulated on the branch. Bump version 0.60.2 -> 0.62.0. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
@@ -5,7 +5,12 @@
|
||||
removeMangaFromCollection,
|
||||
updateCollection
|
||||
} from '$lib/api/collections';
|
||||
import {
|
||||
removePageFromCollection,
|
||||
type CollectionPageItem
|
||||
} from '$lib/api/page_collections';
|
||||
import type { Manga } from '$lib/api/client';
|
||||
import { fileUrl } 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';
|
||||
@@ -18,6 +23,8 @@
|
||||
let collection = $state({ ...data.collection });
|
||||
// svelte-ignore state_referenced_locally
|
||||
let mangas = $state<Manga[]>([...data.mangas]);
|
||||
// svelte-ignore state_referenced_locally
|
||||
let pages = $state<CollectionPageItem[]>([...data.pages]);
|
||||
|
||||
let editing = $state(false);
|
||||
let editName = $state('');
|
||||
@@ -72,6 +79,17 @@
|
||||
editError = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
async function onRemovePage(p: CollectionPageItem) {
|
||||
const snapshot = pages;
|
||||
pages = pages.filter((x) => x.page_id !== p.page_id);
|
||||
try {
|
||||
await removePageFromCollection(collection.id, p.page_id);
|
||||
} catch (e) {
|
||||
pages = snapshot;
|
||||
editError = (e as Error).message;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -162,28 +180,73 @@
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
{#if mangas.length === 0}
|
||||
{#if mangas.length === 0 && pages.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}
|
||||
|
||||
{#if mangas.length > 0}
|
||||
<section aria-labelledby="mangas-heading">
|
||||
<h2 id="mangas-heading" class="section-heading">Mangas</h2>
|
||||
<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>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if pages.length > 0}
|
||||
<section aria-labelledby="pages-heading">
|
||||
<h2 id="pages-heading" class="section-heading">Pages</h2>
|
||||
<ul class="page-grid" data-testid="collection-page-list">
|
||||
{#each pages as p (p.page_id)}
|
||||
<li class="card-with-remove">
|
||||
<a
|
||||
class="page-card"
|
||||
href={`/manga/${p.manga_id}/chapter/${p.chapter_id}?page=${p.page_number}`}
|
||||
data-testid={`collection-page-${p.page_id}`}
|
||||
>
|
||||
<img
|
||||
src={fileUrl(p.storage_key)}
|
||||
alt={`${p.manga_title} chapter ${p.chapter_number} page ${p.page_number}`}
|
||||
class="page-thumb"
|
||||
loading="lazy"
|
||||
/>
|
||||
<span class="page-meta">
|
||||
<span class="page-title">{p.manga_title}</span>
|
||||
<span class="page-breadcrumb">
|
||||
Ch. {p.chapter_number} · page {p.page_number}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
class="remove"
|
||||
onclick={() => onRemovePage(p)}
|
||||
aria-label={`Remove ${p.manga_title} page ${p.page_number} from collection`}
|
||||
title="Remove from collection"
|
||||
data-testid={`collection-remove-page-${p.page_id}`}
|
||||
>
|
||||
<X size={14} aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
@@ -260,6 +323,67 @@
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
margin: var(--space-5) 0 var(--space-3);
|
||||
font-size: var(--font-lg);
|
||||
}
|
||||
|
||||
.section-heading:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.page-grid {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.page-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-card:hover {
|
||||
border-color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 2 / 3;
|
||||
object-fit: cover;
|
||||
background: var(--surface-elevated);
|
||||
}
|
||||
|
||||
.page-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: var(--space-2);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-weight: var(--weight-medium);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.page-breadcrumb {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
|
||||
.card-with-remove {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
|
||||
Reference in New Issue
Block a user