feat: add user display name field (#898)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/routes/settings/admin/application-configuration/+page.svelte

@@ -120,7 +120,12 @@
 </div>
 
 <div>
-	<CollapsibleCard id="application-configuration-images" icon={LucideImage} title={m.images()}>
+	<CollapsibleCard
+		id="application-configuration-images"
+		icon={LucideImage}
+		title={m.images()}
+		description={m.configure_application_images()}
+	>
 		<UpdateApplicationImages callback={updateImages} />
 	</CollapsibleCard>
 </div>

frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte

@@ -38,6 +38,7 @@
 		ldapAttributeUserEmail: z.string().min(1),
 		ldapAttributeUserFirstName: z.string().min(1),
 		ldapAttributeUserLastName: z.string().min(1),
+		ldapAttributeUserDisplayName: z.string().min(1),
 		ldapAttributeUserProfilePicture: z.string(),
 		ldapAttributeGroupMember: z.string(),
 		ldapAttributeGroupUniqueIdentifier: z.string().min(1),
@@ -159,6 +160,11 @@
 				placeholder="sn"
 				bind:input={$inputs.ldapAttributeUserLastName}
 			/>
+			<FormInput
+				label={m.display_name_attribute()}
+				placeholder="displayName"
+				bind:input={$inputs.ldapAttributeUserDisplayName}
+			/>
 			<FormInput
 				label={m.user_profile_picture_attribute()}
 				description={m.the_value_of_this_attribute_can_either_be_a_url_binary_or_base64_encoded_image()}

frontend/src/routes/settings/admin/users/user-form.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
 	import FormInput from '$lib/components/form/form-input.svelte';
+	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { User, UserCreate } from '$lib/types/user.type';
 	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
+	import { emptyToUndefined } from '$lib/utils/zod-util';
 	import { z } from 'zod/v4';
 
 	let {
@@ -19,10 +20,12 @@
 
 	let isLoading = $state(false);
 	let inputDisabled = $derived(!!existingUser?.ldapId && $appConfigStore.ldapEnabled);
+	let hasManualDisplayNameEdit = $state(!!existingUser?.displayName);
 
 	const user = {
 		firstName: existingUser?.firstName || '',
 		lastName: existingUser?.lastName || '',
+		displayName: existingUser?.displayName || '',
 		email: existingUser?.email || '',
 		username: existingUser?.username || '',
 		isAdmin: existingUser?.isAdmin || false,
@@ -31,7 +34,8 @@
 
 	const formSchema = z.object({
 		firstName: z.string().min(1).max(50),
-		lastName: z.string().max(50),
+		lastName: emptyToUndefined(z.string().max(50).optional()),
+		displayName: z.string().max(100),
 		username: z
 			.string()
 			.min(2)
@@ -53,15 +57,29 @@
 		if (success && !existingUser) form.reset();
 		isLoading = false;
 	}
+	function onNameInput() {
+		if (!hasManualDisplayNameEdit) {
+			$inputs.displayName.value = `${$inputs.firstName.value}${
+				$inputs.lastName?.value ? ' ' + $inputs.lastName.value : ''
+			}`;
+		}
+	}
 </script>
 
 <form onsubmit={preventDefault(onSubmit)}>
 	<fieldset disabled={inputDisabled}>
 		<div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2">
-			<FormInput label={m.first_name()} bind:input={$inputs.firstName} />
-			<FormInput label={m.last_name()} bind:input={$inputs.lastName} />
+			<FormInput label={m.first_name()} oninput={onNameInput} bind:input={$inputs.firstName} />
+			<FormInput label={m.last_name()} oninput={onNameInput} bind:input={$inputs.lastName} />
+			<FormInput
+				label={m.display_name()}
+				oninput={() => (hasManualDisplayNameEdit = true)}
+				bind:input={$inputs.displayName}
+			/>
 			<FormInput label={m.username()} bind:input={$inputs.username} />
 			<FormInput label={m.email()} bind:input={$inputs.email} />
+		</div>
+		<div class="mt-5 grid grid-cols-1 items-start gap-5 md:grid-cols-2">
 			<SwitchWithLabel
 				id="admin-privileges"
 				label={m.admin_privileges()}

frontend/src/routes/settings/admin/users/user-list.svelte

@@ -103,6 +103,7 @@
 	columns={[
 		{ label: m.first_name(), sortColumn: 'firstName' },
 		{ label: m.last_name(), sortColumn: 'lastName' },
+		{ label: m.display_name(), sortColumn: 'displayName' },
 		{ label: m.email(), sortColumn: 'email' },
 		{ label: m.username(), sortColumn: 'username' },
 		{ label: m.role(), sortColumn: 'isAdmin' },
@@ -114,6 +115,7 @@
 	{#snippet rows({ item })}
 		<Table.Cell>{item.firstName}</Table.Cell>
 		<Table.Cell>{item.lastName}</Table.Cell>
+		<Table.Cell>{item.displayName}</Table.Cell>
 		<Table.Cell>{item.email}</Table.Cell>
 		<Table.Cell>{item.username}</Table.Cell>
 		<Table.Cell>