refactor: user avatar (#19121)

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -247,7 +247,7 @@
     <div class="flex items-center justify-center p-2" bind:clientHeight={chatHeight}>
       <div class="flex p-2 gap-4 h-fit bg-gray-200 text-immich-dark-gray rounded-3xl w-full">
         <div>
-          <UserAvatar {user} size="md" showTitle={false} />
+          <UserAvatar {user} size="md" noTitle />
         </div>
         <form class="flex w-full max-h-56 gap-1" {onsubmit}>
           <div class="flex w-full items-center gap-4">

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -155,7 +155,7 @@
             title={`${$user.name} (${$user.email})`}
           >
             {#key $user}
-              <UserAvatar user={$user} size="md" showTitle={false} interactive />
+              <UserAvatar user={$user} size="md" noTitle interactive />
             {/key}
           </button>
 

web/src/lib/components/shared-components/user-avatar.svelte

@@ -18,25 +18,13 @@
 
   interface Props {
     user: User;
-    color?: UserAvatarColor | undefined;
     size?: Size;
-    rounded?: boolean;
     interactive?: boolean;
-    showTitle?: boolean;
-    showProfileImage?: boolean;
+    noTitle?: boolean;
     label?: string | undefined;
   }
 
-  let {
-    user,
-    color = undefined,
-    size = 'full',
-    rounded = true,
-    interactive = false,
-    showTitle = true,
-    showProfileImage = true,
-    label = undefined,
-  }: Props = $props();
+  let { user, size = 'full', interactive = false, noTitle = false, label = undefined }: Props = $props();
 
   let img: HTMLImageElement | undefined = $state();
   let showFallback = $state(true);
@@ -79,7 +67,7 @@
     }
   });
 
-  let colorClass = $derived(colorClasses[color || user.avatarColor]);
+  let colorClass = $derived(colorClasses[user.avatarColor]);
   let sizeClass = $derived(sizeClasses[size]);
   let title = $derived(label ?? `${user.name} (${user.email})`);
   let interactiveClass = $derived(
@@ -90,11 +78,10 @@
 </script>
 
 <figure
-  class="{sizeClass} {colorClass} {interactiveClass} overflow-hidden shadow-md"
-  class:rounded-full={rounded}
-  title={showTitle ? title : undefined}
+  class="{sizeClass} {colorClass} {interactiveClass} overflow-hidden shadow-md rounded-full"
+  title={noTitle ? undefined : title}
 >
-  {#if showProfileImage && user.profileImagePath}
+  {#if user.profileImagePath}
     <img
       bind:this={img}
       src={getProfileImageUrl(user)}

web/src/lib/modals/AvatarEditModal.svelte

@@ -34,12 +34,12 @@
   };
 </script>
 
-<Modal title={$t('select_avatar_color')} size="medium" {onClose}>
+<Modal title={$t('select_avatar_color')} size="small" {onClose}>
   <ModalBody>
-    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
+    <div class="grid grid-cols-2 sm:grid-cols-5 gap-4 place-items-center">
       {#each colors as color (color)}
         <button type="button" onclick={() => onSave(color)}>
-          <UserAvatar label={color} user={$user} {color} size="xl" showProfileImage={false} />
+          <UserAvatar label={color} user={{ ...$user, profileImagePath: '', avatarColor: color }} size="xl" />
         </button>
       {/each}
     </div>