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>
99 lines
2.9 KiB
Svelte
99 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { session } from '$lib/session.svelte';
|
|
import Bookmark from '@lucide/svelte/icons/bookmark';
|
|
import FolderOpen from '@lucide/svelte/icons/folder-open';
|
|
import Calendar from '@lucide/svelte/icons/calendar';
|
|
|
|
let { data } = $props();
|
|
const authenticated = $derived(data.authenticated);
|
|
const bookmarkCount = $derived(data.bookmark_count);
|
|
const collectionCount = $derived(data.collection_count);
|
|
const memberSince = $derived(
|
|
session.user
|
|
? new Date(session.user.created_at).toLocaleDateString()
|
|
: null
|
|
);
|
|
</script>
|
|
|
|
{#if !authenticated}
|
|
<p class="status" data-testid="profile-signin">
|
|
<a href="/login?next=/profile">Sign in</a> to see your bookmarks,
|
|
collections, and reading history.
|
|
</p>
|
|
{:else}
|
|
<div class="overview">
|
|
<div class="card" data-testid="overview-member">
|
|
<Calendar size={22} aria-hidden="true" />
|
|
<div>
|
|
<div class="label">Member since</div>
|
|
<div class="value">{memberSince}</div>
|
|
</div>
|
|
</div>
|
|
<a class="card link" href="/profile/bookmarks" data-testid="overview-bookmarks">
|
|
<Bookmark size={22} aria-hidden="true" />
|
|
<div>
|
|
<div class="label">Bookmarks</div>
|
|
<div class="value">{bookmarkCount}</div>
|
|
</div>
|
|
</a>
|
|
<a class="card link" href="/profile/collections" data-testid="overview-collections">
|
|
<FolderOpen size={22} aria-hidden="true" />
|
|
<div>
|
|
<div class="label">Collections</div>
|
|
<div class="value">{collectionCount}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<p class="hint">
|
|
Use the tabs above to manage your preferences, account, bookmarks, and collections.
|
|
</p>
|
|
{/if}
|
|
|
|
<style>
|
|
.status {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.overview {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3);
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.card.link:hover {
|
|
background: var(--surface-elevated);
|
|
border-color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.label {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.value {
|
|
font-size: var(--font-xl);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
.hint {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-sm);
|
|
}
|
|
</style>
|