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>

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;