From c4606cef8bf84cacd95ec06c5ac092c015f2e200 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 10 Jun 2026 07:32:05 +0200
Subject: [PATCH] =?UTF-8?q?fix(journey):=20person=20chips=20rendered=20bla?=
 =?UTF-8?q?nk=20=E2=80=94=20share=20one=20PersonView=E2=86=92PersonOption?=
 =?UTF-8?q?=20projection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

JourneyEditor fed GeschichteView.PersonView (no displayName) straight into
the displayName-rendering PersonMultiSelect, so every chip on a journey was
empty. The name mapping both editors need now lives once in
$lib/person/personOption.ts (with the [Unbekannt] fallback matching
GeschichteService.toView), and PersonMultiSelect/GeschichteSidebar import
the narrow PersonOption contract from there.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../lib/geschichte/GeschichteEditor.svelte    |  9 ++-----
 .../lib/geschichte/GeschichteSidebar.svelte   |  5 +---
 .../src/lib/geschichte/JourneyEditor.svelte   |  6 +++--
 .../geschichte/JourneyEditor.svelte.spec.ts   | 15 +++++++++++
 .../src/lib/person/PersonMultiSelect.svelte   |  4 +--
 frontend/src/lib/person/personOption.ts       | 26 +++++++++++++++++++
 6 files changed, 49 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/lib/person/personOption.ts

diff --git a/frontend/src/lib/geschichte/GeschichteEditor.svelte b/frontend/src/lib/geschichte/GeschichteEditor.svelte
index 962f91cf..b3b5a9b6 100644
--- a/frontend/src/lib/geschichte/GeschichteEditor.svelte
+++ b/frontend/src/lib/geschichte/GeschichteEditor.svelte
@@ -6,10 +6,10 @@ import StarterKit from '@tiptap/starter-kit';
 import { m } from '$lib/paraglide/messages.js';
 import type { components } from '$lib/generated/api';
 import GeschichteSidebar from '$lib/geschichte/GeschichteSidebar.svelte';
+import { toPersonOption, type PersonOption } from '$lib/person/personOption';
 
 type GeschichteView = components['schemas']['GeschichteView'];
 type Person = components['schemas']['Person'];
-type PersonOption = Pick<Person, 'id' | 'displayName'>;
 
 interface Props {
 	geschichte?: GeschichteView | null;
@@ -33,12 +33,7 @@ let title = $state(geschichte?.title ?? '');
 let body = $state(geschichte?.body ?? '');
 let status: 'DRAFT' | 'PUBLISHED' = $state(geschichte?.status ?? 'DRAFT');
 let selectedPersons: PersonOption[] = $state(
-	geschichte?.persons
-		? Array.from(geschichte.persons).map((p) => ({
-				id: p.id,
-				displayName: [p.firstName, p.lastName].filter(Boolean).join(' ')
-			}))
-		: initialPersons
+	geschichte?.persons ? Array.from(geschichte.persons).map(toPersonOption) : initialPersons
 );
 
 let dirty = $state(false);
diff --git a/frontend/src/lib/geschichte/GeschichteSidebar.svelte b/frontend/src/lib/geschichte/GeschichteSidebar.svelte
index 4a149b17..83f69f76 100644
--- a/frontend/src/lib/geschichte/GeschichteSidebar.svelte
+++ b/frontend/src/lib/geschichte/GeschichteSidebar.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-import type { components } from '$lib/generated/api';
 import PersonMultiSelect from '$lib/person/PersonMultiSelect.svelte';
-
-type Person = components['schemas']['Person'];
-type PersonOption = Pick<Person, 'id' | 'displayName'>;
+import type { PersonOption } from '$lib/person/personOption';
 
 interface Props {
 	status: 'DRAFT' | 'PUBLISHED';
diff --git a/frontend/src/lib/geschichte/JourneyEditor.svelte b/frontend/src/lib/geschichte/JourneyEditor.svelte
index 2d50e902..d8c0a2aa 100644
--- a/frontend/src/lib/geschichte/JourneyEditor.svelte
+++ b/frontend/src/lib/geschichte/JourneyEditor.svelte
@@ -3,6 +3,7 @@ import type { components } from '$lib/generated/api';
 import { m } from '$lib/paraglide/messages.js';
 import { csrfFetch } from '$lib/shared/cookies';
 import { createBlockDragDrop } from '$lib/document/transcription/useBlockDragDrop.svelte';
+import { toPersonOption, type PersonOption } from '$lib/person/personOption';
 import { createUnsavedWarning } from '$lib/shared/hooks/useUnsavedWarning.svelte';
 import type { DocumentOption } from '$lib/document/documentTypeahead';
 import GeschichteSidebar from './GeschichteSidebar.svelte';
@@ -11,7 +12,6 @@ import JourneyAddBar from './JourneyAddBar.svelte';
 
 type GeschichteView = components['schemas']['GeschichteView'];
 type JourneyItemView = components['schemas']['JourneyItemView'];
-type Person = components['schemas']['Person'];
 
 interface Props {
 	geschichte: GeschichteView;
@@ -31,7 +31,9 @@ const unsaved = createUnsavedWarning();
 let title = $state(geschichte.title ?? '');
 let body = $state(geschichte.body ?? '');
 let status: 'DRAFT' | 'PUBLISHED' = $state(geschichte.status ?? 'DRAFT');
-let selectedPersons: Person[] = $state(geschichte.persons ? Array.from(geschichte.persons) : []);
+let selectedPersons: PersonOption[] = $state(
+	geschichte.persons ? Array.from(geschichte.persons).map(toPersonOption) : []
+);
 let items: JourneyItemView[] = $state(
 	[...(geschichte.items ?? [])].sort((a, b) => a.position - b.position)
 );
diff --git a/frontend/src/lib/geschichte/JourneyEditor.svelte.spec.ts b/frontend/src/lib/geschichte/JourneyEditor.svelte.spec.ts
index 25263952..cab0b2d8 100644
--- a/frontend/src/lib/geschichte/JourneyEditor.svelte.spec.ts
+++ b/frontend/src/lib/geschichte/JourneyEditor.svelte.spec.ts
@@ -394,3 +394,18 @@ describe('JourneyEditor — duplicate document aria-disabled', () => {
 		expect(option.getAttribute('aria-disabled')).toBe('true');
 	});
 });
+
+describe('JourneyEditor — person chips from GeschichteView', () => {
+	it('renders person names in the sidebar chips (PersonView carries no displayName)', async () => {
+		render(
+			JourneyEditor,
+			defaultProps({
+				geschichte: makeGeschichte({
+					persons: [{ id: 'p1', firstName: 'Anna', lastName: 'Schmidt' }]
+				})
+			})
+		);
+
+		await expect.element(page.getByText('Anna Schmidt')).toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/lib/person/PersonMultiSelect.svelte b/frontend/src/lib/person/PersonMultiSelect.svelte
index 2908e597..1b03c0db 100644
--- a/frontend/src/lib/person/PersonMultiSelect.svelte
+++ b/frontend/src/lib/person/PersonMultiSelect.svelte
@@ -2,10 +2,8 @@
 import type { components } from '$lib/generated/api';
 import { m } from '$lib/paraglide/messages.js';
 import { clickOutside } from '$lib/shared/actions/clickOutside';
+import type { PersonOption } from './personOption';
 type Person = components['schemas']['Person'];
-// Narrow contract: only what the chips render and dedup needs. Full Person
-// objects from /api/persons remain assignable; view projections fit too.
-type PersonOption = Pick<Person, 'id' | 'displayName'>;
 
 interface Props {
 	selectedPersons?: PersonOption[];
diff --git a/frontend/src/lib/person/personOption.ts b/frontend/src/lib/person/personOption.ts
new file mode 100644
index 00000000..cc594d38
--- /dev/null
+++ b/frontend/src/lib/person/personOption.ts
@@ -0,0 +1,26 @@
+import type { components } from '$lib/generated/api';
+
+type Person = components['schemas']['Person'];
+
+/**
+ * Narrow chip/dedup contract for person pickers: exactly what PersonMultiSelect
+ * renders. Full `Person` objects (search results) are structurally assignable;
+ * view projections without a displayName go through {@link toPersonOption}.
+ */
+export type PersonOption = Pick<Person, 'id' | 'displayName'>;
+
+/**
+ * Maps a name-carrying projection (e.g. GeschichteView.PersonView, which has no
+ * server-computed displayName) into the chip contract. Mirrors the server-side
+ * fallback in GeschichteService.toView.
+ */
+export function toPersonOption(p: {
+	id: string;
+	firstName?: string | null;
+	lastName?: string | null;
+}): PersonOption {
+	return {
+		id: p.id,
+		displayName: [p.firstName, p.lastName].filter(Boolean).join(' ') || '[Unbekannt]'
+	};
+}