ADUANASOFT/plantillas-proyectos
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(sidebar): add user and company initials display in avatar fallback

Browse Source
This commit is contained in:
acazares
2026-01-13 17:16:55 -06:00
parent 8a3d0eccec
commit afb3669c59
2 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/lib/components/sidebar/nav-user.svelte
View File

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

9
frontend/src/lib/components/sidebar/team-switcher.svelte
View File

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