fix(web): new feature photo (#9443)

* fix: new feature photo

* fix: use updatedAt

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -213,7 +213,7 @@
                 <ImageThumbnail
                   curve
                   shadow
-                  url={getPeopleThumbnailUrl(person.id)}
+                  url={getPeopleThumbnailUrl(person)}
                   altText={person.name}
                   title={person.name}
                   widthStyle="90px"

web/src/lib/components/faces-page/assign-face-side-panel.svelte

@@ -108,7 +108,7 @@
                 <ImageThumbnail
                   curve
                   shadow
-                  url={getPeopleThumbnailUrl(person.id)}
+                  url={getPeopleThumbnailUrl(person)}
                   altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
                   title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
                   widthStyle="90px"

web/src/lib/components/faces-page/face-thumbnail.svelte

@@ -36,7 +36,7 @@
     class:dark:border-immich-dark-primary={border}
     class:border-immich-primary={border}
   >
-    <ImageThumbnail {circle} url={getPeopleThumbnailUrl(person.id)} altText={person.name} widthStyle="100%" shadow />
+    <ImageThumbnail {circle} url={getPeopleThumbnailUrl(person)} altText={person.name} widthStyle="100%" shadow />
   </div>
 
   <div

web/src/lib/components/faces-page/merge-suggestion-modal.svelte

@@ -38,7 +38,7 @@
         <ImageThumbnail
           circle
           shadow
-          url={getPeopleThumbnailUrl(personMerge1.id)}
+          url={getPeopleThumbnailUrl(personMerge1)}
           altText={personMerge1.name}
           widthStyle="100%"
         />
@@ -65,7 +65,7 @@
           border={potentialMergePeople.length > 0}
           circle
           shadow
-          url={getPeopleThumbnailUrl(personMerge2.id)}
+          url={getPeopleThumbnailUrl(personMerge2)}
           altText={personMerge2.name}
           widthStyle="100%"
         />
@@ -84,7 +84,7 @@
                     border={true}
                     circle
                     shadow
-                    url={getPeopleThumbnailUrl(person.id)}
+                    url={getPeopleThumbnailUrl(person)}
                     altText={person.name}
                     widthStyle="100%"
                     on:click={() => changePersonToMerge(person)}

web/src/lib/components/faces-page/people-card.svelte

@@ -50,7 +50,7 @@
       <ImageThumbnail
         shadow
         {preload}
-        url={getPeopleThumbnailUrl(person.id)}
+        url={getPeopleThumbnailUrl(person)}
         altText={person.name}
         title={person.name}
         widthStyle="100%"

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -234,7 +234,7 @@
                   <ImageThumbnail
                     curve
                     shadow
-                    url={getPeopleThumbnailUrl(selectedPersonToReassign[face.id].id)}
+                    url={getPeopleThumbnailUrl(selectedPersonToReassign[face.id])}
                     altText={selectedPersonToReassign[face.id].name}
                     title={getPersonNameWithHiddenValue(
                       selectedPersonToReassign[face.id].name,
@@ -248,7 +248,7 @@
                   <ImageThumbnail
                     curve
                     shadow
-                    url={getPeopleThumbnailUrl(face.person.id)}
+                    url={getPeopleThumbnailUrl(face.person)}
                     altText={face.person.name}
                     title={getPersonNameWithHiddenValue(face.person.name, face.person.isHidden)}
                     widthStyle={thumbnailWidth}

web/src/lib/components/shared-components/search-bar/search-people-section.svelte

@@ -71,13 +71,7 @@
               : 'border-transparent'}"
             on:click={() => togglePersonSelection(person.id)}
           >
-            <ImageThumbnail
-              circle
-              shadow
-              url={getPeopleThumbnailUrl(person.id)}
-              altText={person.name}
-              widthStyle="100%"
-            />
+            <ImageThumbnail circle shadow url={getPeopleThumbnailUrl(person)} altText={person.name} widthStyle="100%" />
             <p class="mt-2 line-clamp-2 text-sm font-medium dark:text-white">{person.name}</p>
           </button>
         {/each}

web/src/lib/i18n/en.json

@@ -621,6 +621,7 @@
     "unable_to_save_settings": "Unable to save settings",
     "unable_to_scan_libraries": "Unable to scan libraries",
     "unable_to_scan_library": "Unable to scan library",
+    "unable_to_set_feature_photo": "Unable to set feature photo",
     "unable_to_set_profile_picture": "Unable to set profile picture",
     "unable_to_submit_job": "Unable to submit job",
     "unable_to_trash_asset": "Unable to trash asset",

web/src/lib/utils.ts

@@ -17,6 +17,7 @@ import {
   startOAuth,
   unlinkOAuthAccount,
   type AssetResponseDto,
+  type PersonResponseDto,
   type SharedLinkResponseDto,
 } from '@immich/sdk';
 import { mdiCogRefreshOutline, mdiDatabaseRefreshOutline, mdiImageRefreshOutline } from '@mdi/js';
@@ -205,7 +206,8 @@ export const getAssetPlaybackUrl = (options: string | { id: string; checksum?: s
 
 export const getProfileImageUrl = (userId: string) => createUrl(getUserProfileImagePath(userId));
 
-export const getPeopleThumbnailUrl = (personId: string) => createUrl(getPeopleThumbnailPath(personId));
+export const getPeopleThumbnailUrl = (person: PersonResponseDto, updatedAt?: string) =>
+  createUrl(getPeopleThumbnailPath(person.id), { updatedAt: updatedAt ?? person.updatedAt });
 
 export const getAssetJobName = derived(t, ($t) => {
   return (job: AssetJobName) => {