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/community/components/community-comment-item.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import * as Avatar from '@cio/ui/base/avatar';
   import TrashIcon from '@lucide/svelte/icons/trash';
-  import UserIcon from '@lucide/svelte/icons/user';
+  import { UserAvatar } from '@cio/ui/custom/user-avatar';
   import { calDateDiff } from '$lib/utils/functions/date';
   import { IconButton } from '@cio/ui/custom/icon-button';
   import { Vote } from '$features/ui';
@@ -39,17 +38,7 @@
   <div class="border-gray w-full rounded-lg border">
     <header class="flex items-center justify-between p-2 leading-none">
       <div class="flex items-center text-black">
-        <Avatar.Root class="size-7">
-          {#if comment.author?.avatarUrl}
-            <Avatar.Image
-              src={comment.author.avatarUrl}
-              alt={comment.author?.fullname ? comment.author.fullname : 'User'}
-            />
-          {/if}
-          <Avatar.Fallback>
-            <UserIcon class="ui:size-3.5 ui:text-muted-foreground" />
-          </Avatar.Fallback>
-        </Avatar.Root>
+        <UserAvatar src={comment.author?.avatarUrl} alt={comment.author?.fullname ?? 'User'} class="size-7" />
 
         <p class="ml-2 text-sm dark:text-white">{comment.author?.fullname}</p>