fix: update the profile picture in the navigation-bar (#12723)

* fix: update the profile picture in the navigation-bar

* chore: clean up

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>

web/src/lib/components/shared-components/profile-image-cropper.svelte

@@ -56,13 +56,14 @@
         return;
       }
       const file = new File([blob], 'profile-picture.png', { type: 'image/png' });
-      const { profileImagePath } = await createProfileImage({ createProfileImageDto: { file } });
+      const { profileImagePath, profileChangedAt } = await createProfileImage({ createProfileImageDto: { file } });
       notificationController.show({
         type: NotificationType.Info,
         message: $t('profile_picture_set'),
         timeout: 3000,
       });
       $user.profileImagePath = profileImagePath;
+      $user.profileChangedAt = profileChangedAt;
     } catch (error) {
       handleError(error, $t('errors.unable_to_set_profile_picture'));
     }

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

@@ -13,6 +13,7 @@
     email: string;
     profileImagePath: string;
     avatarColor: UserAvatarColor;
+    profileChangedAt: string;
   }
 
   export let user: User;
@@ -79,7 +80,7 @@
   {#if showProfileImage && user.profileImagePath}
     <img
       bind:this={img}
-      src={getProfileImageUrl(user.id)}
+      src={getProfileImageUrl(user)}
       alt={$t('profile_image_of_user', { values: { user: title } })}
       class="h-full w-full object-cover"
       class:hidden={showFallback}

web/src/lib/utils.ts

@@ -19,6 +19,7 @@ import {
   type AssetResponseDto,
   type PersonResponseDto,
   type SharedLinkResponseDto,
+  type UserResponseDto,
 } from '@immich/sdk';
 import { mdiCogRefreshOutline, mdiDatabaseRefreshOutline, mdiImageRefreshOutline } from '@mdi/js';
 import { sortBy } from 'lodash-es';
@@ -204,7 +205,8 @@ export const getAssetPlaybackUrl = (options: string | { id: string; checksum?: s
   return createUrl(getAssetPlaybackPath(id), { key: getKey(), c: checksum });
 };
 
-export const getProfileImageUrl = (userId: string) => createUrl(getUserProfileImagePath(userId));
+export const getProfileImageUrl = (user: UserResponseDto) =>
+  createUrl(getUserProfileImagePath(user.id), { updatedAt: user.profileChangedAt });
 
 export const getPeopleThumbnailUrl = (person: PersonResponseDto, updatedAt?: string) =>
   createUrl(getPeopleThumbnailPath(person.id), { updatedAt: updatedAt ?? person.updatedAt });

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

@@ -8,6 +8,7 @@ export const userFactory = Sync.makeFactory<UserResponseDto>({
   name: Sync.each(() => faker.person.fullName()),
   profileImagePath: '',
   avatarColor: UserAvatarColor.Primary,
+  profileChangedAt: Sync.each(() => faker.date.recent().toISOString()),
 });
 
 export const userAdminFactory = Sync.makeFactory<UserAdminResponseDto>({
@@ -31,4 +32,5 @@ export const userAdminFactory = Sync.makeFactory<UserAdminResponseDto>({
     activationKey: 'activation-key',
     activatedAt: new Date().toISOString(),
   },
+  profileChangedAt: Sync.each(() => faker.date.recent().toISOString()),
 });