Refactor avatar components across the application to use the new UserAvatar component, replacing instances of the Avatar component for improved consistency and maintainability.

apps/dashboard/src/lib/features/ui/analytics/hero-profile-card.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import * as Avatar from '@cio/ui/base/avatar';
+  import { UserAvatar } from '@cio/ui/custom/user-avatar';
   import { calDateDiff } from '$lib/utils/functions/date';
   import { t } from '$lib/utils/functions/translations';
   import type { UserAnalytics } from '$lib/utils/types/analytics';
   import AlarmClockIcon from '@lucide/svelte/icons/alarm-clock';
   import MailIcon from '@lucide/svelte/icons/mail';
-  import UserIcon from '@lucide/svelte/icons/user';
 
   interface Props {
     user: UserAnalytics['user'];
@@ -16,14 +15,7 @@
 
 <div class="rounded-md border p-5">
   <div class="flex w-full flex-col items-center justify-start gap-4 text-start md:flex-row">
-    <Avatar.Root class="h-16 w-16">
-      {#if user.avatarUrl}
-        <Avatar.Image src={user.avatarUrl} alt={user.fullName ? user.fullName : 'User'} />
-      {/if}
-      <Avatar.Fallback>
-        <UserIcon class="ui:size-8 ui:text-muted-foreground" />
-      </Avatar.Fallback>
-    </Avatar.Root>
+    <UserAvatar src={user.avatarUrl} alt={user.fullName ?? 'User'} class="h-16 w-16" />
     <div class="flex flex-col space-y-2">
       <p class="text-center text-2xl md:text-left dark:text-white">
         {user.fullName}

apps/dashboard/src/lib/features/ui/navigation/app-setup.svelte

@@ -21,7 +21,7 @@
       if (item.id === 'profile') {
         return {
           ...item,
-          is_completed: !$profile.avatarUrl?.includes('avatars/avatar.png')
+          is_completed: !$profile.avatarUrl?.includes('avatars/avatar.png') || !!$profile.avatarUrl
         };
       }
       return item;
@@ -46,7 +46,7 @@
             </Button>
           </div>
 
-          {#each setupList as item}
+          {#each setupList as item (item.id)}
             <div class="flex items-center gap-2 text-sm">
               {#if item.is_completed}
                 <BadgeCheckIcon class="custom size-4 shrink-0 text-green-600! opacity-50" />

apps/dashboard/src/lib/features/ui/sidebar/footer/menu.svelte

@@ -7,8 +7,8 @@
   import BellPlusIcon from '@lucide/svelte/icons/bell-plus';
   import BadgeHelpIcon from '@lucide/svelte/icons/badge-help';
   import LogOutIcon from '@lucide/svelte/icons/log-out';
-  import * as Avatar from '@cio/ui/base/avatar';
   import * as Sidebar from '@cio/ui/base/sidebar';
+  import { UserAvatar } from '@cio/ui/custom/user-avatar';
   import { useSidebar } from '@cio/ui/base/sidebar';
   import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
   import ThemeToggle from './theme-toggle.svelte';
@@ -25,10 +25,7 @@
 
 -->
 {#snippet avatarblock()}
-  <Avatar.Root>
-    <Avatar.Image src={$profile.avatarUrl} alt={$profile.fullname} />
-    <Avatar.Fallback class="rounded-lg">{$profile.fullname.slice(0, 2)}</Avatar.Fallback>
-  </Avatar.Root>
+  <UserAvatar src={$profile.avatarUrl} alt={$profile.fullname} />
   <div class="grid flex-1 text-left text-sm leading-tight font-normal">
     <span class="truncate">{$profile.fullname}</span>
     <span class="truncate text-xs">{$profile.email}</span>