7560d59616
Tabbed user dashboard at `/profile` that absorbs `/settings` and surfaces bookmarks + collections in one place. - New `/profile` shell with tabs: Overview (counts), Preferences (theme + reader prefs, ported from /settings; works for guests via localStorage), Account (password change; auth-gated), Bookmarks, Collections. Guest tab list is filtered to what they can actually use. - `/settings` is a 308 redirect to `/profile/preferences` so old bookmarks land cleanly. The "Settings" link in the top nav is replaced by a Profile link between Upload and Bookmarks; Bookmarks + Collections stay as shortcuts per the user spec. - Extracts `lib/components/BookmarkList.svelte` and `lib/components/CollectionsGrid.svelte` so the top-level /bookmarks + /collections routes and the new profile tabs render the same UI without duplication. Both layers use a three-state load (authenticated / guest / error) to handle network hiccups inline. - Deep links preserved via `?next=` on every sign-in CTA. 88 frontend unit tests + svelte-check clean; 12 of 12 e2e tests in profile.spec.ts and reader-mode.spec.ts pass (8 other e2e failures predate this branch and stay flagged for cleanup). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
133 lines
3.3 KiB
Svelte
133 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { fileUrl } from '$lib/api/client';
|
|
import type { CollectionSummary } from '$lib/api/collections';
|
|
import FolderOpen from '@lucide/svelte/icons/folder-open';
|
|
|
|
let {
|
|
collections
|
|
}: {
|
|
collections: CollectionSummary[];
|
|
} = $props();
|
|
</script>
|
|
|
|
<ul class="grid" data-testid="collections-list">
|
|
{#each collections as c (c.id)}
|
|
<li class="card">
|
|
<a href="/collections/{c.id}" class="cover-link" tabindex="-1" aria-hidden="true">
|
|
<div class="collage">
|
|
{#if c.sample_covers.length === 0}
|
|
<div class="collage-empty">
|
|
<FolderOpen size={36} aria-hidden="true" />
|
|
</div>
|
|
{:else}
|
|
{#each c.sample_covers as cover (cover)}
|
|
<img
|
|
src={fileUrl(cover)}
|
|
alt=""
|
|
class="collage-cover"
|
|
loading="lazy"
|
|
/>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</a>
|
|
<div class="meta">
|
|
<a href="/collections/{c.id}" class="name" data-testid={`collection-${c.id}`}>
|
|
{c.name}
|
|
</a>
|
|
<span class="count">
|
|
{c.manga_count}
|
|
{c.manga_count === 1 ? 'manga' : 'mangas'}
|
|
</span>
|
|
</div>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
<style>
|
|
.grid {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.cover-link {
|
|
display: block;
|
|
line-height: 0;
|
|
}
|
|
|
|
.collage {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 2px;
|
|
aspect-ratio: 2 / 3;
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.collage-empty {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1 / -1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.collage-cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.collage-cover:only-child {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1 / -1;
|
|
}
|
|
|
|
.collage-cover:first-child:nth-last-child(2),
|
|
.collage-cover:first-child:nth-last-child(2) ~ .collage-cover {
|
|
grid-row: 1 / -1;
|
|
}
|
|
|
|
.collage-cover:first-child:nth-last-child(3) {
|
|
grid-row: 1 / -1;
|
|
}
|
|
|
|
.meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.name {
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.name:hover {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.count {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-xs);
|
|
}
|
|
</style>
|