marcel/familienarchiv
1
0
Fork 0
Code Issues 103 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(persons): enrich /persons list with stats bar, life dates, doc count chip

Browse Source 
Load /api/stats in parallel; PersonsStatsBar shows totals; person cards
show alias, life date range, and document count badge.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-29 19:52:37 +02:00
parent 3abdf9bb68
commit f4c99cabd5
5 changed files with 119 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/routes/persons/+page.svelte
View File

@@ -2,6 +2,9 @@
import { goto } from '$app/navigation';
import { untrack } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import { formatLifeDateRange } from '$lib/utils/personLifeDates';
import PersonsStatsBar from './PersonsStatsBar.svelte';
import PersonsEmptyState from './PersonsEmptyState.svelte';
let { data } = $props();
@@ -37,6 +40,12 @@ function handleSearch() {
<p class="mt-2 max-w-xl font-sans text-sm text-ink-2">
{m.persons_subtitle()}
</p>
<div class="mt-1">
<PersonsStatsBar
totalPersons={data.stats.totalPersons ?? 0}
totalDocuments={data.stats.totalDocuments ?? 0}
/>
</div>
{#if data.canWrite}
<a
href="/persons/new"
@@ -82,20 +91,7 @@ function handleSearch() {
</div>
{#if data.persons.length === 0}
<div
class="flex flex-col items-center justify-center rounded-lg border border-dashed border-line bg-surface py-16 text-center"
>
<div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted text-ink">
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
alt=""
aria-hidden="true"
class="h-6 w-6"
/>
</div>
<p class="font-serif text-lg text-ink">{m.persons_empty_heading()}</p>
<p class="mt-1 font-sans text-sm text-ink-2">{m.persons_empty_text()}</p>
</div>
<PersonsEmptyState />
{:else}
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
{#each data.persons as person (person.id)}
@@ -113,7 +109,7 @@ function handleSearch() {
<div
class="flex h-12 w-12 items-center justify-center rounded-full bg-primary font-serif text-lg text-primary-fg transition-colors group-hover:bg-accent group-hover:text-ink"
>
{person.firstName[0]}{person.lastName[0]}
{person.firstName?.[0]}{person.lastName?.[0]}
</div>
</div>
@@ -124,7 +120,19 @@ function handleSearch() {
{person.lastName}
</p>
{#if person.alias}
<p class="mt-0.5 truncate font-sans text-xs text-ink-2">"{person.alias}"</p>
<p class="mt-0.5 truncate font-sans text-xs text-ink-2 italic">"{person.alias}"</p>
{/if}
{#if person.birthYear || person.deathYear}
<p class="mt-0.5 font-sans text-xs text-ink-3">
{formatLifeDateRange(person.birthYear, person.deathYear)}
</p>
{/if}
{#if (person.documentCount ?? 0) > 0}
<span
class="mt-1.5 inline-flex items-center rounded-full bg-primary px-2 py-0.5 font-sans text-[10px] font-bold text-primary-fg"
>
{person.documentCount}
</span>
{/if}
</div>
</div>