755417730f
Add /files/{key}?w=<px>: the endpoint decodes JPEG/PNG sources, downscales to
a width snapped to a small allow-list (aspect-preserving, never upscaling),
caches the result under a thumbs/ prefix, and serves it — so cover grids
download ~KB instead of the 1–5 MB original. Cover handlers purge cached
variants when a cover (whose key is reused) is replaced or deleted. Frontend
grids use new thumbUrl/thumbSrcset helpers (MangaCard with responsive srcset).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
133 lines
3.7 KiB
Svelte
133 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { thumbUrl } from '$lib/api/client';
|
|
import type { Bookmark } from '$lib/api/bookmarks';
|
|
import { overflowTooltip } from '$lib/actions/overflowTooltip';
|
|
import BookImage from '@lucide/svelte/icons/book-image';
|
|
|
|
let {
|
|
bookmarks,
|
|
testid
|
|
}: {
|
|
bookmarks: Bookmark[];
|
|
testid?: string;
|
|
} = $props();
|
|
</script>
|
|
|
|
<ul class="bookmark-list" data-testid={testid ?? 'bookmark-list'}>
|
|
{#each bookmarks as b (b.id)}
|
|
<li class="bookmark">
|
|
<a href="/manga/{b.manga_id}" class="cover-link" aria-hidden="true" tabindex="-1">
|
|
{#if b.manga_cover_image_path}
|
|
<img
|
|
src={thumbUrl(b.manga_cover_image_path, 320)}
|
|
alt=""
|
|
class="cover"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
{:else}
|
|
<div class="cover cover-placeholder">
|
|
<BookImage size={22} aria-hidden="true" />
|
|
</div>
|
|
{/if}
|
|
</a>
|
|
<div class="meta">
|
|
<a
|
|
href="/manga/{b.manga_id}"
|
|
class="title"
|
|
data-testid="bookmark-title"
|
|
use:overflowTooltip={b.manga_title ?? 'Unknown manga'}
|
|
>
|
|
{b.manga_title ?? 'Unknown manga'}
|
|
</a>
|
|
{#if b.chapter_id && b.chapter_number != null}
|
|
<a
|
|
href="/manga/{b.manga_id}/chapter/{b.chapter_id}"
|
|
class="target"
|
|
>
|
|
Chapter {b.chapter_number}{#if b.page != null && b.page > 0} — page {b.page}{/if}
|
|
</a>
|
|
{:else if b.chapter_id}
|
|
<!-- Chapter bookmark whose chapter was deleted;
|
|
chapter_id != null but chapter_number == null
|
|
because the LEFT JOIN found nothing. -->
|
|
<span class="target muted">(chapter removed)</span>
|
|
{:else}
|
|
<span class="target muted">Whole manga</span>
|
|
{/if}
|
|
<span class="created">
|
|
Bookmarked {new Date(b.created_at).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
<style>
|
|
.bookmark-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.bookmark {
|
|
display: grid;
|
|
grid-template-columns: 64px 1fr;
|
|
gap: var(--space-4);
|
|
align-items: start;
|
|
padding: var(--space-3) 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.cover-link {
|
|
display: block;
|
|
line-height: 0;
|
|
}
|
|
|
|
.cover {
|
|
width: 64px;
|
|
height: 96px;
|
|
object-fit: cover;
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.cover-placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-muted);
|
|
user-select: none;
|
|
}
|
|
|
|
.meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
min-width: 0;
|
|
}
|
|
|
|
.title {
|
|
font-weight: var(--weight-semibold);
|
|
font-size: var(--font-base);
|
|
color: var(--text);
|
|
}
|
|
|
|
.title:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.target {
|
|
font-size: var(--font-sm);
|
|
}
|
|
|
|
.muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.created {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-xs);
|
|
}
|
|
</style>
|