feat(dashboard): complete frontend redesign for Issue #271
- +layout.svelte: Upload button in header (authenticated users only) - +page.server.ts: call /api/dashboard/resume, /pulse, /activity; remove deprecated /api/documents/incomplete and /recent-activity - +page.svelte: 2-col grid layout (main + 320px sidebar), greeting, DashboardFamilyPulse + DashboardActivityFeed in sidebar - DashboardResumeStrip: refactored to use server data (resumeDoc prop), SVG thumbnail, progress bar with aria-*, empty state, CTA - DashboardFamilyPulse: new component — weekly stats from audit_log - DashboardActivityFeed: new component — activity feed with "für dich" badge - Update specs for new data shapes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -1,37 +1,115 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import type { DashboardResumeDTO } from '$lib/generated/api';
|
||||
|
||||
interface LastVisited {
|
||||
id: string;
|
||||
title: string;
|
||||
interface Props {
|
||||
resumeDoc: DashboardResumeDTO | null;
|
||||
}
|
||||
|
||||
let lastVisited = $state<LastVisited | null>(null);
|
||||
|
||||
onMount(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem('familienarchiv.lastVisited');
|
||||
if (raw) {
|
||||
const parsed = JSON.parse(raw) as LastVisited;
|
||||
if (parsed?.id) {
|
||||
lastVisited = parsed;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore malformed JSON
|
||||
}
|
||||
});
|
||||
const { resumeDoc }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if lastVisited}
|
||||
{#if resumeDoc === null}
|
||||
<div
|
||||
data-testid="resume-strip"
|
||||
class="flex items-center gap-2 rounded-sm border border-line bg-surface px-4 py-3 font-sans text-sm"
|
||||
data-testid="resume-strip-empty"
|
||||
class="rounded-sm border border-line bg-surface p-8 text-center"
|
||||
>
|
||||
<span class="text-ink-2">{m.dashboard_resume_label()}</span>
|
||||
<a href="/documents/{lastVisited.id}" class="font-medium text-ink hover:underline">
|
||||
{lastVisited.title || m.dashboard_resume_fallback()}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="mx-auto text-ink-3"
|
||||
>
|
||||
<rect width="20" height="16" x="2" y="4" rx="2" />
|
||||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
||||
</svg>
|
||||
<h2 class="mt-3 font-serif text-xl text-ink">{m.dashboard_empty_title()}</h2>
|
||||
<p class="mt-1 font-sans text-sm text-ink-2">{m.dashboard_empty_body()}</p>
|
||||
<a
|
||||
href="/documents"
|
||||
class="mt-4 inline-block font-sans text-sm font-bold text-accent hover:underline"
|
||||
>
|
||||
{m.dashboard_empty_cta()}
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div data-testid="resume-strip" class="flex gap-4 rounded-sm border border-line bg-surface p-5">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="180"
|
||||
height="246"
|
||||
viewBox="0 0 180 246"
|
||||
aria-hidden="true"
|
||||
class="shrink-0"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="parchment" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#f5f0e8" />
|
||||
<stop offset="100%" stop-color="#ede8d5" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="180" height="246" fill="url(#parchment)" />
|
||||
<line x1="30" y1="40" x2="150" y2="40" stroke="#b0a898" stroke-width="1" />
|
||||
<line x1="30" y1="70" x2="150" y2="70" stroke="#b0a898" stroke-width="1" />
|
||||
<line x1="30" y1="100" x2="150" y2="100" stroke="#b0a898" stroke-width="1" />
|
||||
<line x1="30" y1="130" x2="150" y2="130" stroke="#b0a898" stroke-width="1" />
|
||||
<line x1="30" y1="160" x2="150" y2="160" stroke="#b0a898" stroke-width="1" />
|
||||
</svg>
|
||||
|
||||
<div class="flex flex-1 flex-col gap-2">
|
||||
<p class="flex items-center gap-1.5 font-sans text-xs text-ink-3">
|
||||
<span class="text-[#A6DAD8]">●</span>
|
||||
{m.dashboard_resume_label()}
|
||||
·
|
||||
{m.dashboard_page_of({ page: resumeDoc.page, pages: resumeDoc.pages })}
|
||||
</p>
|
||||
|
||||
<h2 class="font-serif text-[1.75rem] leading-tight text-ink">{resumeDoc.title}</h2>
|
||||
|
||||
<p class="font-sans text-sm text-ink-2 italic">{resumeDoc.caption}</p>
|
||||
|
||||
<blockquote
|
||||
class="border-l-[3px] border-accent pl-3 font-serif text-[1.0625rem] leading-relaxed text-ink-2"
|
||||
>
|
||||
{resumeDoc.excerpt}
|
||||
</blockquote>
|
||||
|
||||
<div class="mt-auto flex items-center gap-3 pt-2">
|
||||
<span class="font-sans text-xs font-bold text-ink">{resumeDoc.pct}%</span>
|
||||
<div
|
||||
role="progressbar"
|
||||
aria-valuenow={resumeDoc.pct}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
class="h-1.5 flex-1 overflow-hidden rounded-full bg-line"
|
||||
>
|
||||
<div class="h-full rounded-full bg-accent" style="width:{resumeDoc.pct}%"></div>
|
||||
</div>
|
||||
{#each resumeDoc.collaborators.slice(0, 3) as collab (collab.initials)}
|
||||
<span
|
||||
class="-ml-1 inline-flex h-6 w-6 items-center justify-center rounded-full font-sans text-[10px] font-bold text-white ring-2 ring-white"
|
||||
style="background:{collab.color}">{collab.initials}</span
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="mt-1 flex items-center gap-4">
|
||||
<a
|
||||
href="/documents/{resumeDoc.documentId}"
|
||||
class="inline-block rounded-sm bg-accent px-4 py-1.5 font-sans text-sm font-bold text-white transition-opacity hover:opacity-90"
|
||||
>
|
||||
{m.dashboard_resume_cta()}
|
||||
</a>
|
||||
<a href="/documents" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink">
|
||||
{m.dashboard_resume_other()}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user