feat: add required indicator for required inputs (#993)

frontend/src/lib/components/form/form-input.svelte

@@ -36,7 +36,7 @@
 
 <div {...restProps}>
 	{#if label}
-		<Label class="mb-0" for={id}>{label}</Label>
+		<Label required={input?.required} class="mb-0" for={id}>{label}</Label>
 	{/if}
 	{#if description}
 		<p class="text-muted-foreground mt-1 text-xs">

frontend/src/lib/components/header/header-avatar.svelte

@@ -26,8 +26,7 @@
 		<DropdownMenu.Label class="font-normal">
 			<div class="flex flex-col space-y-1">
 				<p class="text-sm leading-none font-medium">
-					{$userStore?.firstName}
-					{$userStore?.lastName}
+					{$userStore?.displayName}
 				</p>
 				<p class="text-muted-foreground text-xs leading-none">{$userStore?.email}</p>
 			</div>

frontend/src/lib/components/ui/label/label.svelte

@@ -5,16 +5,25 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		required = false,
+		children,
 		...restProps
-	}: LabelPrimitive.RootProps = $props();
+	}: LabelPrimitive.RootProps & {
+		required?: boolean;
+	} = $props();
 </script>
 
 <LabelPrimitive.Root
 	bind:ref
 	data-slot="label"
 	class={cn(
-		'mb-3 flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+		'mb-3 flex items-center gap-1.5 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+		required && "after:text-[14px] after:text-red-500 after:content-['*']",
 		className
 	)}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</LabelPrimitive.Root>