fix: tests

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

@@ -4,7 +4,7 @@
 
 <script lang="ts">
   import { imageLoad } from '$lib/utils/image-load';
-  import { UpdateUserDtoAvatarColorEnum, api } from '@api';
+  import { UserDtoAvatarColorEnum, api } from '@api';
 
   interface User {
     id: string;
@@ -12,11 +12,11 @@
     lastName: string;
     email: string;
     profileImagePath: string;
-    avatarColor: UpdateUserDtoAvatarColorEnum;
+    avatarColor: UserDtoAvatarColorEnum;
   }
 
   export let user: User;
-  export let color: UpdateUserDtoAvatarColorEnum = user.avatarColor;
+  export let color: UserDtoAvatarColorEnum = user.avatarColor;
   export let size: Size = 'full';
   export let rounded = true;
   export let interactive = false;
@@ -26,7 +26,7 @@
 
   let showFallback = true;
 
-  const colorClasses: Record<UpdateUserDtoAvatarColorEnum, string> = {
+  const colorClasses: Record<UserDtoAvatarColorEnum, string> = {
     primary: 'bg-immich-primary dark:bg-immich-dark-primary text-immich-dark-fg dark:text-immich-fg',
     pink: 'bg-pink-400 text-immich-bg',
     red: 'bg-red-500 text-immich-bg',
@@ -52,7 +52,7 @@
   // Get color based on the user UUID.
   function getUserColor() {
     const seed = parseInt(user.id.split('-')[0], 16);
-    const colors = Object.keys(colorClasses).filter((color) => color !== 'primary') as UpdateUserDtoAvatarColorEnum[];
+    const colors = Object.keys(colorClasses).filter((color) => color !== 'primary') as UserDtoAvatarColorEnum[];
     const randomIndex = seed % colors.length;
     return colors[randomIndex];
   }

web/src/lib/components/user-settings-page/avatar-selector.svelte

@@ -4,27 +4,18 @@
   import { createEventDispatcher } from 'svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
-  import { UpdateUserDtoAvatarColorEnum, UserResponseDto } from '@api';
+  import { UserDtoAvatarColorEnum, UserResponseDto } from '@api';
 
   export let user: UserResponseDto;
 
   const dispatch = createEventDispatcher();
-  const colors: Array<UpdateUserDtoAvatarColorEnum> = [
-    UpdateUserDtoAvatarColorEnum.Primary,
-    UpdateUserDtoAvatarColorEnum.Red,
-    UpdateUserDtoAvatarColorEnum.Green,
-    UpdateUserDtoAvatarColorEnum.Blue,
-    UpdateUserDtoAvatarColorEnum.Purple,
-    UpdateUserDtoAvatarColorEnum.Yellow,
-    UpdateUserDtoAvatarColorEnum.Pink,
-    UpdateUserDtoAvatarColorEnum.Orange,
-  ];
+  const colors: Array<UserDtoAvatarColorEnum> = Object.values(UserDtoAvatarColorEnum);
 </script>
 
 <FullScreenModal on:clickOutside={() => dispatch('close')} on:escape={() => dispatch('close')}>
   <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
     <div
-      class="w-[300px] md:w-[500px] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+      class="w-[300px] md:w-[600px] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
     >
       <div class="flex px-2 pt-2 items-center">
         <h1 class="px-4 w-full self-center font-medium text-immich-primary dark:text-immich-dark-primary">
@@ -35,11 +26,11 @@
         </div>
       </div>
       <div class="flex items-center justify-center p-2">
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
           {#each colors as color}
             <div>
               <button on:click={() => dispatch('choose', color)}>
-                <UserAvatar {user} {color} size="xxxl" showProfileImage={false} />
+                <UserAvatar {user} {color} size="xxl" showProfileImage={false} />
               </button>
             </div>
           {/each}

web/src/lib/components/user-settings-page/user-profile-settings.svelte

@@ -3,7 +3,7 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { api, UpdateUserDtoAvatarColorEnum, UserResponseDto } from '@api';
+  import { api, UserDtoAvatarColorEnum, UserResponseDto } from '@api';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
   import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
@@ -20,7 +20,7 @@
 
   let isShowSelectAvatar = false;
 
-  const handleChooseAvatarColor = (color: UpdateUserDtoAvatarColorEnum) => {
+  const handleChooseAvatarColor = (color: UserDtoAvatarColorEnum) => {
     editingUser.avatarColor = color;
     forceShowColor = false;
     isShowSelectAvatar = false;

web/src/test-data/factories/user-factory.ts

@@ -1,4 +1,4 @@
-import { UpdateUserDtoAvatarColorEnum, type UserResponseDto } from '@api';
+import { UserDtoAvatarColorEnum, type UserResponseDto } from '@api';
 import { faker } from '@faker-js/faker';
 import { Sync } from 'factory.ts';
 
@@ -17,5 +17,5 @@ export const userFactory = Sync.makeFactory<UserResponseDto>({
   updatedAt: Sync.each(() => faker.date.past().toISOString()),
   memoriesEnabled: true,
   oauthId: '',
-  avatarColor: UpdateUserDtoAvatarColorEnum.Primary,
+  avatarColor: UserDtoAvatarColorEnum.Primary,
 });