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/course/pages/marks.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import { Empty } from '@cio/ui/custom/empty';
   import UserXIcon from '@lucide/svelte/icons/user-x';
-  import * as Avatar from '@cio/ui/base/avatar';
+  import { UserAvatar } from '@cio/ui/custom/user-avatar';
   import * as Table from '@cio/ui/base/table';
   import * as Tooltip from '@cio/ui/base/tooltip';
   import { t } from '$lib/utils/functions/translations';
-  import { shortenName } from '$lib/utils/functions/string';
   import { calculateStudentAverage, type MarksPageData, type ExerciseInfo } from '$features/course/utils/marks-utils';
   import TruncatedWithTooltip from '$features/course/components/truncated-with-tooltip.svelte';
 
@@ -70,15 +69,11 @@
                 class="sticky left-0 min-w-[200px] border-r border-gray-200 bg-gray-50 px-3 py-2 dark:border-neutral-700 dark:bg-neutral-800/80"
               >
                 <div class="flex items-center gap-2">
-                  <Avatar.Root class="size-6! shrink-0 rounded-full">
-                    <Avatar.Image
-                      src={student.profile?.avatarUrl ?? undefined}
-                      alt={student.profile?.fullname ?? 'Student'}
-                    />
-                    <Avatar.Fallback class="ui:bg-muted ui:text-muted-foreground rounded-full">
-                      {shortenName(student.profile?.fullname) ?? 'S'}
-                    </Avatar.Fallback>
-                  </Avatar.Root>
+                  <UserAvatar
+                    src={student.profile?.avatarUrl}
+                    alt={student.profile?.fullname ?? 'Student'}
+                    class="size-6! shrink-0"
+                  />
                   <div class="min-w-0 flex-1">
                     <p class="ui:text-foreground truncate text-sm font-medium">
                       {student.profile?.fullname ?? '-'}

apps/dashboard/src/lib/features/course/pages/submissions.svelte

@@ -10,6 +10,7 @@
   import { t } from '$lib/utils/functions/translations';
 
   import { Chip } from '@cio/ui/custom/chip';
+  import { UserAvatar } from '@cio/ui/custom/user-avatar';
   import MarkExerciseModal from '$features/course/components/exercise/mark-exercise-modal.svelte';
   import { STATUS } from '$features/course/components/exercise/constants';
   import { onMount } from 'svelte';
@@ -242,7 +243,7 @@
               class="mb-2 flex w-full cursor-pointer items-center text-black"
               href={`${page.url.pathname}?submissionId=${item.id}`}
             >
-              <img alt="Student avatar" class="block h-6 w-6 rounded-full" src={item.student.avatarUrl} />
+              <UserAvatar src={item.student.avatarUrl} alt="Student avatar" class="h-6 w-6" />
               <p class="ml-2 text-sm dark:text-white">
                 {item.student.username}
               </p>