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

feat(persons): redesign /persons/[id] detail page (Concept A layout)

Browse Source 
PersonCard: remove edit toggle, add Edit→/edit link; 2-column layout on lg;
CoCorrespondentsList: add chat icon + title tooltip; remove update/merge actions.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-29 19:55:31 +02:00
parent 7141ae1e1f
commit 44e8891ca9
5 changed files with 137 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/routes/persons/[id]/+page.svelte
View File

@@ -2,11 +2,10 @@
import { m } from '$lib/paraglide/messages.js';
import { SvelteMap } from 'svelte/reactivity';
import PersonCard from './PersonCard.svelte';
import PersonMergePanel from './PersonMergePanel.svelte';
import CoCorrespondentsList from './CoCorrespondentsList.svelte';
import PersonDocumentList from './PersonDocumentList.svelte';
let { data, form } = $props();
let { data } = $props();
const person = $derived(data.person);
const sentDocuments = $derived(data.sentDocuments);
@@ -47,7 +46,7 @@ const coCorrespondents = $derived.by(() => {
});
</script>
<div class="mx-auto max-w-4xl px-4 py-10">
<div class="mx-auto max-w-6xl px-4 py-10">
<!-- Back Link -->
<div class="mb-6">
<a
@@ -64,25 +63,28 @@ const coCorrespondents = $derived.by(() => {
</a>
</div>
<PersonCard person={person} canWrite={data.canWrite} form={form} />
<!-- 2-column layout on large screens -->
<div class="lg:grid lg:grid-cols-[35%_65%] lg:gap-8">
<!-- Left column: Person card -->
<div>
<PersonCard person={person} canWrite={data.canWrite} />
</div>
{#if data.canWrite}
{#key person.id}
<PersonMergePanel person={person} form={form} />
{/key}
{/if}
<!-- Right column: correspondents + documents -->
<div>
<CoCorrespondentsList coCorrespondents={coCorrespondents} personId={person.id} />
<CoCorrespondentsList coCorrespondents={coCorrespondents} personId={person.id} />
<PersonDocumentList
documents={sentDocuments}
heading={m.person_docs_heading()}
emptyMessage={m.person_no_docs()}
/>
<PersonDocumentList
documents={sentDocuments}
heading={m.person_docs_heading()}
emptyMessage={m.person_no_docs()}
/>
<PersonDocumentList
documents={receivedDocuments}
heading={m.person_received_docs_heading()}
emptyMessage={m.person_no_received_docs()}
/>
<PersonDocumentList
documents={receivedDocuments}
heading={m.person_received_docs_heading()}
emptyMessage={m.person_no_received_docs()}
/>
</div>
</div>
</div>