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

2026-03-28 23:22:55 +01:00
parent 935b1c493d
commit 2e38f7541b
18 changed files with 78 additions and 123 deletions
@@ -0,0 +1,4 @@
+import UserAvatar from './user-avatar.svelte';
+
+export { UserAvatar };
+export { UserAvatar as default };
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import * as Avatar from '../../base/avatar';
+  import UserIcon from '@lucide/svelte/icons/user';
+
+  interface Props {
+    src?: string | null;
+    alt?: string;
+    class?: string;
+    iconClass?: string;
+  }
+
+  let { src, alt = 'User', class: className = 'size-6', iconClass = '' }: Props = $props();
+</script>
+
+<Avatar.Root class={className}>
+  {#if src}
+    <Avatar.Image {src} {alt} />
+  {/if}
+  <Avatar.Fallback>
+    <UserIcon class="ui:text-muted-foreground {iconClass || 'h-1/2 w-1/2'}" />
+  </Avatar.Fallback>
+</Avatar.Root>