feat: /profile dashboard with tabbed preferences, account, bookmarks, collections (0.18.0)
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>
This commit is contained in:
MechaCat02
129
frontend/src/lib/components/BookmarkList.svelte
Normal file
129
frontend/src/lib/components/BookmarkList.svelte
Normal file
@@ -0,0 +1,129 @@
|
||||
<script lang="ts">
|
||||
import { fileUrl } from '$lib/api/client';
|
||||
import type { Bookmark } from '$lib/api/bookmarks';
|
||||
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={fileUrl(b.manga_cover_image_path)}
|
||||
alt=""
|
||||
class="cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
{: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"
|
||||
>
|
||||
{b.manga_title ?? 'Unknown manga'}
|
||||
</a>
|
||||
{#if b.chapter_id && b.chapter_number != null}
|
||||
<a
|
||||
href="/manga/{b.manga_id}/chapter/{b.chapter_number}"
|
||||
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>
|
||||
132
frontend/src/lib/components/CollectionsGrid.svelte
Normal file
132
frontend/src/lib/components/CollectionsGrid.svelte
Normal file
@@ -0,0 +1,132 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user