From afb3669c59ea9a9d27d0812a52c46ec962d9b9ea Mon Sep 17 00:00:00 2001
From: acazares <acazares@aduanasoft.com.mx>
Date: Tue, 13 Jan 2026 17:16:55 -0600
Subject: [PATCH] feat(sidebar): add user and company initials display in
 avatar fallback

---
 frontend/src/lib/components/sidebar/nav-user.svelte      | 7 +++++--
 frontend/src/lib/components/sidebar/team-switcher.svelte | 9 +++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/sidebar/nav-user.svelte b/frontend/src/lib/components/sidebar/nav-user.svelte
index 144f6387..8ec56490 100644
--- a/frontend/src/lib/components/sidebar/nav-user.svelte
+++ b/frontend/src/lib/components/sidebar/nav-user.svelte
@@ -23,6 +23,9 @@
 	
 	// URL completa del avatar
 	let avatarUrl = $derived(getBackendAssetUrl(user.avatar) || '/avatars/default.jpg');
+	
+	// Iniciales del usuario (2 primeras letras)
+	let initials = $derived(user.name.slice(0, 2).toUpperCase());
 
 	// Estado reactivo del idioma actual
 	let currentLocale = $derived(page.data.locale || 'en');
@@ -107,7 +110,7 @@
 					>
 						<Avatar.Root class="size-8 rounded-lg">
 							<Avatar.Image src={avatarUrl} alt={user.name} />
-							<Avatar.Fallback class="rounded-lg">AS</Avatar.Fallback>
+							<Avatar.Fallback class="rounded-lg">{initials}</Avatar.Fallback>
 						</Avatar.Root>
 						<div class="grid flex-1 text-left text-sm leading-tight">
 							<span class="truncate font-medium">{user.name}</span>
@@ -127,7 +130,7 @@
 					<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
 						<Avatar.Root class="size-8 rounded-lg">
 							<Avatar.Image src={avatarUrl} alt={user.name} />
-							<Avatar.Fallback class="rounded-lg">AS</Avatar.Fallback>
+							<Avatar.Fallback class="rounded-lg">{initials}</Avatar.Fallback>
 						</Avatar.Root>
 						<div class="grid flex-1 text-left text-sm leading-tight">
 							<span class="truncate font-medium">{user.name}</span>
diff --git a/frontend/src/lib/components/sidebar/team-switcher.svelte b/frontend/src/lib/components/sidebar/team-switcher.svelte
index 341a0142..c61c8a3d 100644
--- a/frontend/src/lib/components/sidebar/team-switcher.svelte
+++ b/frontend/src/lib/components/sidebar/team-switcher.svelte
@@ -16,6 +16,11 @@
 			? getBackendAssetUrl(companyStore.activeCompany.logo) 
 			: null
 	);
+	
+	// Iniciales de la compañía activa (2 primeras letras)
+	let activeCompanyInitials = $derived(
+		companyStore.activeCompany?.name?.slice(0, 2).toUpperCase() || 'CO'
+	);
 
 </script>
 
@@ -40,7 +45,7 @@
 									onerror={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
 								/>
 							{:else}
-								<BuildingIcon class="size-4 text-white" />
+								<span class="text-sm font-semibold text-white">{activeCompanyInitials}</span>
 							{/if}
 						</div>
 						<div class="grid flex-1 text-left text-sm leading-tight min-w-0">
@@ -89,7 +94,7 @@
 										class="size-full rounded object-cover"
 									/>
 								{:else}
-									<BuildingIcon class="size-3.5 shrink-0" />
+									<span class="text-xs font-semibold">{company.name.slice(0, 2).toUpperCase()}</span>
 								{/if}
 							</div>
 							<div class="flex flex-1 flex-col min-w-0">