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;
|
||||
|
||||
@@ -4,33 +4,30 @@ import {
|
||||
getCollection,
|
||||
listCollectionMangas
|
||||
} from '$lib/api/collections';
|
||||
import { listCollectionPages } from '$lib/api/page_collections';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const ssr = false;
|
||||
|
||||
export const load: PageLoad = async ({ params, url }) => {
|
||||
try {
|
||||
const [collection, mangas] = await Promise.all([
|
||||
const [collection, mangas, pages] = await Promise.all([
|
||||
getCollection(params.id),
|
||||
listCollectionMangas(params.id, { limit: 200 })
|
||||
listCollectionMangas(params.id, { limit: 200 }),
|
||||
listCollectionPages(params.id, { limit: 200 })
|
||||
]);
|
||||
return {
|
||||
collection,
|
||||
mangas: mangas.items,
|
||||
total: mangas.page.total
|
||||
total: mangas.page.total,
|
||||
pages: pages.items
|
||||
};
|
||||
} 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');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user