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>
This commit is contained in:
Marcel
2026-04-08 12:22:30 +02:00
parent 0ce803c7f1
commit f11d8a38ed
32 changed files with 117 additions and 77 deletions

View File

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

View File

@@ -16,8 +16,8 @@ let {
originalFilename: string;
documentDate?: string | null;
location?: string | null;
sender?: { firstName: string; lastName: string } | null;
receivers?: { firstName: string; lastName: string }[];
sender?: { firstName?: string | null; lastName: string; displayName: string } | null;
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>

View File

@@ -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;
if (p) senderName = `${p.firstName} ${p.lastName}`;
const p = result.data as { displayName: string } | undefined;
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;
if (p) receiverName = `${p.firstName} ${p.lastName}`;
const p = result.data as { displayName: string } | undefined;
if (p) receiverName = p.displayName;
})
);
}

View File

@@ -10,8 +10,13 @@ interface Props {
documentDate?: string;
location?: string;
status: string;
sender?: { id: string; firstName: string; lastName: string } | null;
receivers?: { id: string; firstName: string; lastName: string }[];
sender?: {
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(

View File

@@ -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}

View File

@@ -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;
if (p) senderName = `${p.firstName} ${p.lastName}`;
const p = data as { displayName: string } | undefined;
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;
if (p) receiverName = `${p.firstName} ${p.lastName}`;
const p = data as { displayName: string } | undefined;
if (p) receiverName = p.displayName;
})
);
}

View File

@@ -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}

View File

@@ -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}

View File

@@ -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
}
];
})
);
}

View File

@@ -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(
untrack(() => data.initialReceivers)
);
let selectedReceivers: { id: string; firstName?: string; lastName: string; displayName: string }[] =
$state(untrack(() => data.initialReceivers));
let parsedSuggestion = $state<FilenameParseResult>({});

View File

@@ -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} />

View File

@@ -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.lastName}
{person.displayName}
</p>
<!-- Alias -->

View File

@@ -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
});
}

View File

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

View File

@@ -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.lastName}
{person.displayName}
</h1>
<!-- Alias — centered, italic -->

View File

@@ -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}

View File

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

View File

@@ -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();

View File

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