Migarate from Flowbite avatar into Shadcn avatar

apps/frontend/package.json

@@ -22,6 +22,7 @@
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@inlang/paraglide-js": "^2.2.0",
+		"@internationalized/date": "^3.10.0",
 		"@langchain/core": "^0.3.78",
 		"@langchain/langgraph-sdk": "^0.1.9",
 		"@lucide/svelte": "^0.554.0",
@@ -35,6 +36,7 @@
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.4",
 		"@vitest/coverage-v8": "^3.2.4",
+		"bits-ui": "^2.14.4",
 		"clsx": "^2.1.1",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",

apps/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	data-slot="avatar-fallback"
+	class={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
+	{...restProps}
+/>

apps/frontend/src/lib/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn('aspect-square size-full', className)}
+	{...restProps}
+/>

apps/frontend/src/lib/components/ui/avatar/avatar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		loadingStatus = $bindable('loading'),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	bind:loadingStatus
+	data-slot="avatar"
+	class={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
+	{...restProps}
+/>

apps/frontend/src/lib/components/ui/avatar/index.ts

@@ -0,0 +1,13 @@
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback
+};

apps/frontend/src/routes/+layout.svelte

@@ -20,15 +20,38 @@
 		NavHamburger,
 		Dropdown,
 		DropdownHeader,
-		DropdownDivider,
-		Avatar
+		DropdownDivider
 	} from 'flowbite-svelte';
-
+	import { Avatar, AvatarImage, AvatarFallback } from '$lib/components/ui/avatar';
 	import { ModeWatcher, toggleMode, mode } from 'mode-watcher';
 
 	import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 	import SignInButton from '$lib/auth/components/SignInButton.svelte';
 
+	type SessionUser = {
+		name?: string | null;
+		email?: string | null;
+	};
+
+	function getInitials(name?: string | null) {
+		if (!name) return 'U';
+		const parts = name.trim().split(/\s+/).filter(Boolean);
+		if (parts.length === 0) return 'U';
+		return parts
+			.slice(0, 2)
+			.map((p) => p[0]!.toUpperCase())
+			.join('');
+	}
+
+	function getDisplayName(user?: SessionUser | null) {
+		if (user?.name && user.name.trim().length > 0) return user.name;
+		if (user?.email) {
+			const localPart = user.email.split('@')[0] ?? user.email;
+			return localPart || user.email;
+		}
+		return m.user_fallback();
+	}
+
 	let { children } = $props();
 </script>
 
@@ -43,20 +66,21 @@
 
 	<div class="flex items-center md:order-2">
 		{#if page.data.session}
-			<!-- Avatar Button -->
 			<Button color="alternative" class="rounded-full p-1 pr-4" id="avatar-menu-button">
-				<Avatar
-					src={page.data.session.user?.image ? page.data.session.user.image : undefined}
-					size="sm"
-					class="me-2"
-				/>
-
+				<Avatar class="mr-2 h-8 w-8">
+					<AvatarImage
+						src={page.data.session.user?.image ?? undefined}
+						alt={getDisplayName(page.data.session.user)}
+					/>
+					<AvatarFallback>
+						{getInitials(page.data.session.user?.name ?? page.data.session.user?.email ?? null)}
+					</AvatarFallback>
+				</Avatar>
 				<span class="hidden text-sm font-medium text-gray-800 sm:inline dark:text-white">
-					{page.data.session.user?.name ?? m.user_fallback()}
+					{getDisplayName(page.data.session.user)}
 				</span>
 			</Button>
 
-			<!-- Dropdown Menu -->
 			<Dropdown triggeredBy="#avatar-menu-button" placement="bottom-end" simple>
 				<DropdownHeader>
 					<span class="block text-sm font-medium text-gray-900 dark:text-white">