Migrate: Avatar Component

[dokterbob]

Objective

Replace Flowbite Avatar with ShadCDN Avatar in the navigation bar.

Component Location

• routes/+layout.svelte - User profile avatar in navbar

Current Implementation

• Size: "sm"
• Shows user profile image
• Fallback to initials

Migration Example

<!-- Flowbite -->
<Avatar src={user.image} size="sm" />

<!-- ShadCDN -->
<Avatar.Root class="h-8 w-8">
  <Avatar.Image src={user.image} alt={user.name} />
  <Avatar.Fallback>{initials}</Avatar.Fallback>
</Avatar.Root>

Tasks

• Install ShadCDN Avatar: pnpm dlx shadcn-svelte@latest add avatar
• Update avatar in layout navigation
• Implement initials fallback logic
• Test image loading states
• Verify size matches current design

Acceptance Criteria

• Avatar displays correctly
• Fallback to initials works
• Size is consistent with current design
• Image loading is smooth