add store to update user profile picture when set

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

@@ -12,7 +12,7 @@
   import domtoimage from 'dom-to-image';
   import type { UserResponseDto } from '@api';
   import { notificationController, NotificationType } from './notification/notification';
-  import { isUpdateProfilePicture } from '$lib/stores/preferences.store';
+  import { lastUpdatedProfilePicture } from '$lib/stores/preferences.store';
   onMount(() => {
     console.log(asset);
   });
@@ -27,14 +27,16 @@
     domtoimage.toBlob(div).then(function (blob: Blob) {
       const file: File = new File([blob], 'profile-picture.png', { type: 'image/png' });
       try {
-        api.userApi.createProfileImage({ file });
-        //set store to update profile picture
-        isUpdateProfilePicture.set(true);
-        dispatch('close');
-        notificationController.show({
-          type: NotificationType.Info,
-          message: 'Profile picture set.',
-          timeout: 3000,
+        api.userApi.createProfileImage({ file }).then((res) => {
+          console.log(res);
+          //set store to update profile picture
+          lastUpdatedProfilePicture.set(Date.now());
+          dispatch('close');
+          notificationController.show({
+            type: NotificationType.Info,
+            message: 'Profile picture set.',
+            timeout: 3000,
+          });
         });
       } catch (err) {
         console.error('Error [profile-image-cropper]:', err);

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

@@ -6,6 +6,7 @@
 <script lang="ts">
   import { imageLoad } from '$lib/utils/image-load';
   import { api, UserResponseDto } from '@api';
+  import { lastUpdatedProfilePicture } from '$lib/stores/preferences.store';
 
   export let user: UserResponseDto;
   export let color: Color = 'primary';
@@ -15,6 +16,14 @@
   export let showTitle = true;
   export let autoColor = false;
   let showFallback = true;
+  let appendix = '';
+
+  lastUpdatedProfilePicture.subscribe((value) => {
+    console.log('isUpdateProfilePicture', value);
+    if (value) {
+      appendix = '?d=' + value;
+    }
+  });
 
   const colorClasses: Record<Color, string> = {
     primary: 'bg-immich-primary dark:bg-immich-dark-primary text-immich-dark-fg dark:text-immich-fg',
@@ -55,7 +64,7 @@
 >
   {#if user.profileImagePath}
     <img
-      src={api.getProfileImageUrl(user.id)}
+      src={api.getProfileImageUrl(user.id) + appendix}
       alt="Profile image of {title}"
       class="object-cover w-full h-full"
       class:hidden={showFallback}

web/src/lib/stores/preferences.store.ts

@@ -1,5 +1,6 @@
 import { browser } from '$app/environment';
 import { persisted } from 'svelte-local-storage-store';
+import { writable } from 'svelte/store';
 
 const initialTheme = browser && !window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark';
 
@@ -46,3 +47,6 @@ export interface AlbumViewSettings {
 export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settings', {
   sortBy: 'Most recent photo',
 });
+
+
+export const lastUpdatedProfilePicture = persisted<Number>('last-updated-profile-picture', 0, {});