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>

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.lastName}
+						{person.displayName}
 					</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(
-	abbreviated ? abbreviateName(person) : `${person.firstName} ${person.lastName}`
-);
+const name = $derived(abbreviated ? abbreviateName(person) : person.displayName);
 const avatarColor = $derived(personAvatarColor(person.id));
-const initials = $derived(
-	`${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase()
-);
+const initials = $derived(getInitials(person));
 </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.lastName}
+				{person.displayName}
 				<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>