feat(frontend): replace all name concatenation with displayName

- Add displayName default method to PersonSummaryDTO
- Update native SQL queries to include title, person_type columns
- Add getInitials() utility to personFormat.ts
- Update abbreviateName/abbreviateCompact for nullable firstName
- Replace firstName+lastName concatenation with displayName in all
  person-displaying components and server load files
- Regenerate API types with displayName on Person and PersonSummaryDTO

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/src/main/java/org/raddatz/familienarchiv/dto/PersonSummaryDTO.java

@@ -9,11 +9,21 @@ import java.util.UUID;
  */
 public interface PersonSummaryDTO {
     UUID getId();
+    String getTitle();
     String getFirstName();
     String getLastName();
+    String getPersonType();
     String getAlias();
     Integer getBirthYear();
     Integer getDeathYear();
     String getNotes();
     long getDocumentCount();
+
+    default String getDisplayName() {
+        StringBuilder sb = new StringBuilder();
+        if (getTitle() != null) sb.append(getTitle()).append(" ");
+        if (getFirstName() != null) sb.append(getFirstName()).append(" ");
+        sb.append(getLastName());
+        return sb.toString().trim();
+    }
 }

backend/src/main/java/org/raddatz/familienarchiv/repository/PersonRepository.java

@@ -35,7 +35,8 @@ public interface PersonRepository extends JpaRepository<Person, UUID> {
     // --- PersonSummaryDTO with document count ---
 
     @Query(value = """
-            SELECT p.id, p.first_name AS firstName, p.last_name AS lastName,
+            SELECT p.id, p.title, p.first_name AS firstName, p.last_name AS lastName,
+                   p.person_type AS personType,
                    p.alias, p.birth_year AS birthYear, p.death_year AS deathYear, p.notes,
                    (SELECT COUNT(*) FROM documents d WHERE d.sender_id = p.id)
                    + (SELECT COUNT(*) FROM document_receivers dr WHERE dr.person_id = p.id) AS documentCount
@@ -46,7 +47,8 @@ public interface PersonRepository extends JpaRepository<Person, UUID> {
     List<PersonSummaryDTO> findAllWithDocumentCount();
 
     @Query(value = """
-            SELECT p.id, p.first_name AS firstName, p.last_name AS lastName,
+            SELECT p.id, p.title, p.first_name AS firstName, p.last_name AS lastName,
+                   p.person_type AS personType,
                    p.alias, p.birth_year AS birthYear, p.death_year AS deathYear, p.notes,
                    (SELECT COUNT(*) FROM documents d WHERE d.sender_id = p.id)
                    + (SELECT COUNT(*) FROM document_receivers dr WHERE dr.person_id = p.id) AS documentCount
@@ -56,7 +58,7 @@ public interface PersonRepository extends JpaRepository<Person, UUID> {
                OR LOWER(CONCAT(p.last_name,' ',COALESCE(p.first_name,''))) LIKE LOWER(CONCAT('%',:query,'%'))
                OR LOWER(p.alias) LIKE LOWER(CONCAT('%',:query,'%'))
                OR LOWER(a.last_name) LIKE LOWER(CONCAT('%',:query,'%'))
-            GROUP BY p.id, p.first_name, p.last_name, p.alias, p.birth_year, p.death_year, p.notes
+            GROUP BY p.id, p.title, p.first_name, p.last_name, p.person_type, p.alias, p.birth_year, p.death_year, p.notes
             ORDER BY p.last_name ASC, p.first_name ASC
             """,
             nativeQuery = true)

backend/src/test/java/org/raddatz/familienarchiv/controller/PersonControllerTest.java

@@ -73,8 +73,10 @@ class PersonControllerTest {
     private PersonSummaryDTO mockPersonSummary(String firstName, String lastName) {
         return new PersonSummaryDTO() {
             public java.util.UUID getId() { return UUID.randomUUID(); }
+            public String getTitle() { return null; }
             public String getFirstName() { return firstName; }
             public String getLastName() { return lastName; }
+            public String getPersonType() { return "PERSON"; }
             public String getAlias() { return null; }
             public Integer getBirthYear() { return null; }
             public Integer getDeathYear() { return null; }

frontend/src/lib/components/DashboardRecentDocuments.svelte

@@ -7,7 +7,7 @@ type Document = {
 	id: string;
 	title: string;
 	updatedAt?: string;
-	sender?: { id: string; firstName: string; lastName: string };
+	sender?: { id: string; firstName?: string | null; lastName: string; displayName: string };
 };
 
 type StatsDTO = components['schemas']['StatsDTO'];

frontend/src/lib/components/DocumentMetadataDrawer.svelte

@@ -2,9 +2,9 @@
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/date';
 import { formatDocumentStatus } from '$lib/utils/documentStatusLabel';
-import { personAvatarColor } from '$lib/utils/personFormat';
+import { getInitials as calcInitials, personAvatarColor } from '$lib/utils/personFormat';
 
-type Person = { id: string; firstName: string; lastName: string };
+type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 type Tag = { id: string; name: string };
 
 type Props = {
@@ -33,11 +33,11 @@ let showAllReceivers = $state(false);
 const displayedReceivers = $derived(showAllReceivers ? receivers : visibleReceivers);
 
 function getInitials(person: Person): string {
-	return `${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase();
+	return calcInitials(person);
 }
 
 function getFullName(person: Person): string {
-	return `${person.firstName} ${person.lastName}`;
+	return person.displayName;
 }
 </script>
 

frontend/src/lib/components/DocumentTopBar.svelte

@@ -7,7 +7,7 @@ import PersonChipRow from './PersonChipRow.svelte';
 import OverflowPillButton from './OverflowPillButton.svelte';
 import DocumentMetadataDrawer from './DocumentMetadataDrawer.svelte';
 
-type Person = { id: string; firstName: string; lastName: string };
+type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 type Tag = { id: string; name: string };
 
 type Doc = {

frontend/src/lib/components/OverflowPillButton.svelte

@@ -3,7 +3,7 @@ import { tick } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 import { clickOutside } from '$lib/actions/clickOutside';
 
-type Person = { id: string; firstName: string; lastName: string };
+type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 
 type Props = {
 	extraCount: number;
@@ -67,8 +67,7 @@ function handleKeydown(e: KeyboardEvent) {
 						href="/persons/{person.id}"
 						class="block py-0.5 text-[18px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
 					>
-						{person.firstName}
+						{person.displayName}
-						{person.lastName}
 					</a>
 				</div>
 			{/each}

frontend/src/lib/components/PersonChip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-import { abbreviateName, personAvatarColor } from '$lib/utils/personFormat';
+import { abbreviateName, getInitials, personAvatarColor } from '$lib/utils/personFormat';
 
-type Person = { id: string; firstName: string; lastName: string };
+type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 
 type Props = {
 	person: Person;
@@ -10,13 +10,9 @@ type Props = {
 
 let { person, abbreviated }: Props = $props();
 
-const displayName = $derived(
+const name = $derived(abbreviated ? abbreviateName(person) : person.displayName);
-	abbreviated ? abbreviateName(person) : `${person.firstName} ${person.lastName}`
-);
 const avatarColor = $derived(personAvatarColor(person.id));
-const initials = $derived(
+const initials = $derived(getInitials(person));
-	`${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase()
-);
 </script>
 
 <a
@@ -30,5 +26,5 @@ const initials = $derived(
 	>
 		{initials}
 	</span>
-	<span class="text-[14px] font-semibold text-ink">{displayName}</span>
+	<span class="text-[14px] font-semibold text-ink">{name}</span>
 </a>

frontend/src/lib/components/PersonChipRow.svelte

@@ -2,7 +2,7 @@
 import PersonChip from './PersonChip.svelte';
 import OverflowPillDisplay from './OverflowPillDisplay.svelte';
 
-type Person = { id: string; firstName: string; lastName: string };
+type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 
 type Props = {
 	sender: Person | null | undefined;

frontend/src/lib/components/PersonMultiSelect.svelte

@@ -73,8 +73,7 @@ function removePerson(id: string | undefined) {
 			<span
 				class="inline-flex items-center gap-1 rounded bg-muted px-2 py-1 text-sm font-medium text-ink"
 			>
-				{person.firstName}
+				{person.displayName}
-				{person.lastName}
 				<button
 					type="button"
 					onclick={() => removePerson(person.id)}
@@ -121,7 +120,7 @@ function removePerson(id: string | undefined) {
 						role="button"
 						tabindex="0"
 					>
-						{person.lastName}, {person.firstName}
+						{person.displayName}
 					</div>
 				{/each}
 			{/if}

frontend/src/lib/components/PersonTypeahead.svelte

@@ -117,7 +117,7 @@ function handleFocus() {
 
 function selectPerson(person: Person) {
 	value = person.id!;
-	searchTerm = `${person.firstName} ${person.lastName}`;
+	searchTerm = person.displayName;
 	showDropdown = false;
 	onchange?.(person.id!);
 }
@@ -166,7 +166,7 @@ function selectPerson(person: Person) {
 					>
 						<div class="flex items-center">
 							<span class="block truncate font-medium">
-								{person.lastName}, {person.firstName}
+								{person.displayName}
 							</span>
 						</div>
 					</div>

frontend/src/lib/generated/api.ts

@@ -1206,8 +1206,10 @@ export interface components {
             totalDocuments?: number;
         };
         PersonSummaryDTO: {
+            title?: string;
             /** Format: uuid */
             id?: string;
+            displayName?: string;
             firstName?: string;
             lastName?: string;
             /** Format: int32 */
@@ -1216,6 +1218,7 @@ export interface components {
             deathYear?: number;
             alias?: string;
             notes?: string;
+            personType?: string;
             /** Format: int64 */
             documentCount?: number;
         };
@@ -1231,10 +1234,10 @@ export interface components {
             /** Format: int32 */
             number?: number;
             sort?: components["schemas"]["SortObject"];
-            first?: boolean;
-            last?: boolean;
             /** Format: int32 */
             numberOfElements?: number;
+            first?: boolean;
+            last?: boolean;
             empty?: boolean;
         };
         PageableObject: {

frontend/src/lib/utils/personFormat.ts

@@ -1,6 +1,6 @@
 import { formatDocumentStatus } from './documentStatusLabel';
 
-type Person = { firstName: string; lastName: string };
+type Person = { firstName?: string | null; lastName: string; displayName: string };
 type DocumentStatus = 'PLACEHOLDER' | 'UPLOADED' | 'TRANSCRIBED' | 'REVIEWED' | 'ARCHIVED';
 type DocForMeta = {
 	sender?: Person | null;
@@ -18,7 +18,13 @@ function djb2(str: string): number {
 	return Math.abs(hash);
 }
 
+export function getInitials(person: Person): string {
+	if (person.firstName) return `${person.firstName[0]}${person.lastName[0]}`.toUpperCase();
+	return person.lastName.substring(0, 2).toUpperCase();
+}
+
 export function abbreviateName(person: Person): string {
+	if (!person.firstName) return person.lastName;
 	const first = person.firstName.trim();
 	const last = person.lastName.trim();
 	if (!last) return first;
@@ -26,6 +32,7 @@ export function abbreviateName(person: Person): string {
 }
 
 function abbreviateCompact(person: Person): string {
+	if (!person.firstName) return person.lastName;
 	const first = person.firstName.trim();
 	const last = person.lastName.trim();
 	if (!last) return first;

frontend/src/routes/+page.server.ts

@@ -93,8 +93,8 @@ export async function load({ url, fetch }) {
 			incompleteDocs,
 			recentDocs,
 			initialValues: {
-				senderName: senderObj ? `${senderObj.firstName} ${senderObj.lastName}` : '',
+				senderName: senderObj?.displayName ?? '',
-				receiverName: receiverObj ? `${receiverObj.firstName} ${receiverObj.lastName}` : ''
+				receiverName: receiverObj?.displayName ?? ''
 			},
 			filters: { q, from, to, senderId, receiverId, tags, sort, dir, tagQ },
 			error: null as string | null

frontend/src/routes/DocumentList.svelte

@@ -16,8 +16,8 @@ let {
 		originalFilename: string;
 		documentDate?: string | null;
 		location?: string | null;
-		sender?: { firstName: string; lastName: string } | null;
+		sender?: { firstName?: string | null; lastName: string; displayName: string } | null;
-		receivers?: { firstName: string; lastName: string }[];
+		receivers?: { firstName?: string | null; lastName: string; displayName: string }[];
 		tags?: { id: string; name: string }[];
 	}[];
 	canWrite: boolean;
@@ -102,7 +102,7 @@ let {
 											>{m.docs_list_from()}</span
 										>
 										{#if doc.sender}
-											<span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
+											<span class="text-ink">{doc.sender.displayName}</span>
 										{:else}
 											<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
 										{/if}
@@ -114,7 +114,7 @@ let {
 										>
 										{#if doc.receivers && doc.receivers.length > 0}
 											<span class="text-ink">
-												{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
+												{doc.receivers.map((p) => p.displayName).join(', ')}
 											</span>
 										{:else}
 											<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>

frontend/src/routes/briefwechsel/+page.server.ts

@@ -52,8 +52,8 @@ export async function load({ url, fetch, locals }) {
 					const code = (result.error as unknown as { code?: string })?.code;
 					throw error(result.response.status, getErrorMessage(code));
 				}
-				const p = result.data as { firstName: string; lastName: string } | undefined;
+				const p = result.data as { displayName: string } | undefined;
-				if (p) senderName = `${p.firstName} ${p.lastName}`;
+				if (p) senderName = p.displayName;
 			})
 		);
 	}
@@ -65,8 +65,8 @@ export async function load({ url, fetch, locals }) {
 					const code = (result.error as unknown as { code?: string })?.code;
 					throw error(result.response.status, getErrorMessage(code));
 				}
-				const p = result.data as { firstName: string; lastName: string } | undefined;
+				const p = result.data as { displayName: string } | undefined;
-				if (p) receiverName = `${p.firstName} ${p.lastName}`;
+				if (p) receiverName = p.displayName;
 			})
 		);
 	}

frontend/src/routes/briefwechsel/ConversationTimeline.svelte

@@ -10,8 +10,13 @@ interface Props {
 		documentDate?: string;
 		location?: string;
 		status: string;
-		sender?: { id: string; firstName: string; lastName: string } | null;
+		sender?: {
-		receivers?: { id: string; firstName: string; lastName: string }[];
+			id: string;
+			firstName?: string | null;
+			lastName: string;
+			displayName: string;
+		} | null;
+		receivers?: { id: string; firstName?: string | null; lastName: string; displayName: string }[];
 	}[];
 	senderId: string;
 	receiverId?: string;
@@ -67,9 +72,9 @@ function statusDotClass(status: string): string {
 function otherPartyName(doc: (typeof documents)[number]): string {
 	if (doc.sender?.id === senderId) {
 		const r = doc.receivers?.[0];
-		return r ? `${r.firstName} ${r.lastName}` : m.conv_no_party();
+		return r ? r.displayName : m.conv_no_party();
 	}
-	return doc.sender ? `${doc.sender.firstName} ${doc.sender.lastName}` : m.conv_no_party();
+	return doc.sender ? doc.sender.displayName : m.conv_no_party();
 }
 
 const newDocUrl = $derived(

frontend/src/routes/briefwechsel/CorrespondentSuggestionsDropdown.svelte

@@ -4,8 +4,9 @@ import { clickOutside } from '$lib/actions/clickOutside';
 
 interface Correspondent {
 	id: string;
-	firstName: string;
+	firstName?: string | null;
 	lastName: string;
+	displayName: string;
 }
 
 interface Props {
@@ -41,7 +42,9 @@ function handleKeydown(event: KeyboardEvent, container: HTMLElement) {
 }
 
 function getInitials(person: Correspondent): string {
-	return `${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase();
+	if (person.firstName)
+		return `${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase();
+	return person.lastName.substring(0, 2).toUpperCase();
 }
 </script>
 
@@ -78,7 +81,7 @@ function getInitials(person: Correspondent): string {
 					{getInitials(person)}
 				</span>
 				<!-- Svelte auto-escapes — do not use {@html} here. -->
-				{person.lastName}, {person.firstName}
+				{person.displayName}
 			</div>
 		{/each}
 	{/if}

frontend/src/routes/conversations/+page.server.ts

@@ -39,8 +39,8 @@ export async function load({ url, fetch }) {
 	if (senderId) {
 		requests.push(
 			api.GET('/api/persons/{id}', { params: { path: { id: senderId } } }).then(({ data }) => {
-				const p = data as { firstName: string; lastName: string } | undefined;
+				const p = data as { displayName: string } | undefined;
-				if (p) senderName = `${p.firstName} ${p.lastName}`;
+				if (p) senderName = p.displayName;
 			})
 		);
 	}
@@ -48,8 +48,8 @@ export async function load({ url, fetch }) {
 	if (receiverId) {
 		requests.push(
 			api.GET('/api/persons/{id}', { params: { path: { id: receiverId } } }).then(({ data }) => {
-				const p = data as { firstName: string; lastName: string } | undefined;
+				const p = data as { displayName: string } | undefined;
-				if (p) receiverName = `${p.firstName} ${p.lastName}`;
+				if (p) receiverName = p.displayName;
 			})
 		);
 	}

frontend/src/routes/conversations/ConversationTimeline.svelte

@@ -15,7 +15,12 @@ let {
 		documentDate?: string;
 		location?: string;
 		status: string;
-		sender?: { id: string; firstName: string; lastName: string } | null;
+		sender?: {
+			id: string;
+			firstName?: string | null;
+			lastName: string;
+			displayName: string;
+		} | null;
 	}[];
 	senderId: string;
 	receiverId: string;
@@ -106,7 +111,7 @@ const enrichedDocuments = $derived(
 									: 'border-line bg-surface text-ink'}"
 							>
 								{#if doc.sender}
-									{doc.sender.firstName[0]}{doc.sender.lastName[0]}
+									{doc.sender.firstName ? doc.sender.firstName[0] : doc.sender.lastName[0]}{doc.sender.lastName[0]}
 								{:else}
 									?
 								{/if}

frontend/src/routes/documents/[id]/edit/+page.svelte

@@ -54,7 +54,7 @@ let selectedReceivers = $state(doc.receivers ?? []);
 			bind:selectedReceivers={selectedReceivers}
 			initialDateIso={doc.documentDate ?? ''}
 			initialLocation={doc.location ?? ''}
-			initialSenderName={doc.sender ? `${doc.sender.firstName} ${doc.sender.lastName}` : ''}
+			initialSenderName={doc.sender ? doc.sender.displayName : ''}
 		/>
 		<DescriptionSection
 			bind:tags={tags}

frontend/src/routes/documents/new/+page.server.ts

@@ -24,14 +24,19 @@ export async function load({
 	const api = createApiClient(fetch);
 
 	let initialSenderName = '';
-	let initialReceivers: { id: string; firstName: string; lastName: string }[] = [];
+	let initialReceivers: {
+		id: string;
+		firstName?: string;
+		lastName: string;
+		displayName: string;
+	}[] = [];
 
 	const requests: Promise<void>[] = [];
 
 	if (senderId) {
 		requests.push(
 			api.GET('/api/persons/{id}', { params: { path: { id: senderId } } }).then(({ data }) => {
-				if (data) initialSenderName = `${data.firstName} ${data.lastName}`;
+				if (data) initialSenderName = data.displayName;
 			})
 		);
 	}
@@ -40,7 +45,14 @@ export async function load({
 		requests.push(
 			api.GET('/api/persons/{id}', { params: { path: { id: receiverId } } }).then(({ data }) => {
 				if (data)
-					initialReceivers = [{ id: data.id!, firstName: data.firstName, lastName: data.lastName }];
+					initialReceivers = [
+						{
+							id: data.id!,
+							firstName: data.firstName,
+							lastName: data.lastName,
+							displayName: data.displayName
+						}
+					];
 			})
 		);
 	}

frontend/src/routes/documents/new/+page.svelte

@@ -12,9 +12,8 @@ let { data, form } = $props();
 
 let tags: string[] = $state([]);
 let senderId = $state(untrack(() => data.initialSenderId));
-let selectedReceivers: { id: string; firstName: string; lastName: string }[] = $state(
+let selectedReceivers: { id: string; firstName?: string; lastName: string; displayName: string }[] =
-	untrack(() => data.initialReceivers)
+	$state(untrack(() => data.initialReceivers));
-);
 
 let parsedSuggestion = $state<FilenameParseResult>({});
 

frontend/src/routes/enrich/[id]/+page.svelte

@@ -120,7 +120,7 @@ let selectedReceivers = $state(untrack(() => doc.receivers ?? []));
 					initialDateIso={doc.documentDate ?? ''}
 					initialLocation={doc.location ?? ''}
 					initialSenderName={doc.sender
-						? `${doc.sender.firstName} ${doc.sender.lastName}`
+						? doc.sender.displayName
 						: ''}
 				/>
 				<DescriptionSection bind:tags={tags} initialTitle={doc.title ?? ''} titleRequired={true} />

frontend/src/routes/persons/+page.svelte

@@ -99,13 +99,12 @@ function handleSearch() {
 						<div
 							class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary font-serif text-base font-bold text-primary-fg transition-colors"
 						>
-							{person.firstName?.[0]}{person.lastName?.[0]}
+							{person.firstName ? person.firstName[0] : person.lastName[0]}{person.lastName[0]}
 						</div>
 
 						<!-- Name -->
 						<p class="font-serif text-sm font-bold text-ink group-hover:underline">
-							{person.firstName}
+							{person.displayName}
-							{person.lastName}
 						</p>
 
 						<!-- Alias -->

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

@@ -23,7 +23,7 @@ const coCorrespondents = $derived.by(() => {
 			else
 				freq.set(key, {
 					id: receiver.id,
-					name: `${receiver.firstName} ${receiver.lastName}`,
+					name: receiver.displayName,
 					count: 1
 				});
 		}
@@ -37,7 +37,7 @@ const coCorrespondents = $derived.by(() => {
 			else
 				freq.set(key, {
 					id: doc.sender.id,
-					name: `${doc.sender.firstName} ${doc.sender.lastName}`,
+					name: doc.sender.displayName,
 					count: 1
 				});
 		}

frontend/src/routes/persons/[id]/NameHistoryCard.svelte

@@ -9,7 +9,7 @@ interface Props {
 		type: string;
 		sortOrder: number;
 	}>;
-	personFirstName: string;
+	personFirstName?: string | null;
 }
 
 let { aliases, personFirstName }: Props = $props();

frontend/src/routes/persons/[id]/PersonCard.svelte

@@ -8,8 +8,9 @@ let {
 }: {
 	person: {
 		id: string;
-		firstName: string;
+		firstName?: string | null;
 		lastName: string;
+		displayName: string;
 		alias?: string | null;
 		birthYear?: number | null;
 		deathYear?: number | null;
@@ -29,14 +30,13 @@ let {
 			<div
 				class="flex h-16 w-16 items-center justify-center rounded-full bg-primary font-serif text-xl font-bold text-primary-fg"
 			>
-				{person.firstName[0]}{person.lastName[0]}
+				{person.firstName ? person.firstName[0] : person.lastName[0]}{person.lastName[0]}
 			</div>
 		</div>
 
 		<!-- Name — centered, serif -->
 		<h1 class="mb-1 text-center font-serif text-xl font-bold text-ink">
-			{person.firstName}
+			{person.displayName}
-			{person.lastName}
 		</h1>
 
 		<!-- Alias — centered, italic -->

frontend/src/routes/persons/[id]/PersonMergePanel.svelte

@@ -7,7 +7,7 @@ let {
 	person,
 	form
 }: {
-	person: { firstName: string; lastName: string };
+	person: { displayName: string };
 	form?: { mergeError?: string } | null;
 } = $props();
 
@@ -74,7 +74,7 @@ let showMergeConfirm = $state(false);
 
 			{#if showMergeConfirm}
 				<p class="mt-3 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-					{m.person_merge_warning()} <strong>{person.firstName} {person.lastName}</strong>
+					{m.person_merge_warning()} <strong>{person.displayName}</strong>
 					{m.person_merge_will_be_deleted()}
 				</p>
 			{/if}

frontend/src/routes/persons/[id]/edit/+page.svelte

@@ -30,8 +30,7 @@ const person = $derived(data.person);
 					d="M10 19l-7-7m0 0l7-7m-7 7h18"
 				/>
 			</svg>
-			{person.firstName}
+			{person.displayName}
-			{person.lastName}
 		</a>
 		<h1 class="font-serif text-3xl text-ink">{m.person_edit_heading()}</h1>
 	</div>

frontend/src/routes/persons/[id]/edit/PersonDangerZone.svelte

@@ -6,7 +6,7 @@ let {
 	person,
 	form
 }: {
-	person: { id: string; firstName: string; lastName: string };
+	person: { id: string; firstName?: string | null; lastName: string; displayName: string };
 	form?: { mergeError?: string } | null;
 } = $props();
 

frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte

@@ -5,7 +5,7 @@ let {
 	person
 }: {
 	person: {
-		firstName: string;
+		firstName?: string | null;
 		lastName: string;
 		alias?: string | null;
 		birthYear?: number | null;