From 26e0cb3eb4ed9c815a310fd66cb352d25bf07a6a Mon Sep 17 00:00:00 2001
From: Stewart Rand <stewartrand@gmail.com>
Date: Wed, 17 Sep 2025 12:22:26 -0300
Subject: [PATCH] fix: Refresh photo after updating featured photo (#21971)

fix: Refresh person photo after setting featured photo

Co-authored-by: Alex <alex.tran1502@gmail.com>
---
 .../components/asset-viewer/actions/action.ts |  3 ++-
 .../actions/set-person-featured-action.svelte | 19 +++++++++++++++++--
 .../asset-viewer/asset-viewer-nav-bar.svelte  |  2 +-
 .../asset-viewer/asset-viewer.svelte          |  6 ++++++
 web/src/lib/constants.ts                      |  1 +
 5 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/actions/action.ts b/web/src/lib/components/asset-viewer/actions/action.ts
index 446a004cbb..680dced7ca 100644
--- a/web/src/lib/components/asset-viewer/actions/action.ts
+++ b/web/src/lib/components/asset-viewer/actions/action.ts
@@ -1,6 +1,6 @@
 import type { AssetAction } from '$lib/constants';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import type { AlbumResponseDto, AssetResponseDto, StackResponseDto } from '@immich/sdk';
+import type { AlbumResponseDto, AssetResponseDto, PersonResponseDto, StackResponseDto } from '@immich/sdk';
 
 type ActionMap = {
   [AssetAction.ARCHIVE]: { asset: TimelineAsset };
@@ -18,6 +18,7 @@ type ActionMap = {
   [AssetAction.REMOVE_ASSET_FROM_STACK]: { stack: StackResponseDto | null; asset: AssetResponseDto };
   [AssetAction.SET_VISIBILITY_LOCKED]: { asset: TimelineAsset };
   [AssetAction.SET_VISIBILITY_TIMELINE]: { asset: TimelineAsset };
+  [AssetAction.SET_PERSON_FEATURED_PHOTO]: { asset: AssetResponseDto; person: PersonResponseDto };
 };
 
 export type Action = {
diff --git a/web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte b/web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte
index 70e1c4f1ba..de94c46dfc 100644
--- a/web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte
@@ -4,21 +4,36 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
+  import { AssetAction } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import { updatePerson, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';
   import { mdiFaceManProfile } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
 
   interface Props {
     asset: AssetResponseDto;
     person: PersonResponseDto;
+    onAction?: OnAction;
   }
 
-  let { asset, person }: Props = $props();
+  let { asset, person, onAction }: Props = $props();
 
   const handleSelectFeaturePhoto = async () => {
     try {
-      await updatePerson({ id: person.id, personUpdateDto: { featureFaceAssetId: asset.id } });
+      const updatedPerson = await updatePerson({
+        id: person.id,
+        personUpdateDto: { featureFaceAssetId: asset.id },
+      });
+
+      person = { ...person, ...updatedPerson };
+
+      onAction?.({
+        type: AssetAction.SET_PERSON_FEATURED_PHOTO,
+        asset,
+        person,
+      });
+
       notificationController.show({ message: $t('feature_photo_updated'), type: NotificationType.Info });
     } catch (error) {
       handleError(error, $t('errors.unable_to_set_feature_photo'));
diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index dd197f3a90..a22fbf2366 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -208,7 +208,7 @@
             <SetAlbumCoverAction {asset} {album} />
           {/if}
           {#if person}
-            <SetFeaturedPhotoAction {asset} {person} />
+            <SetFeaturedPhotoAction {asset} {person} {onAction} />
           {/if}
           {#if asset.type === AssetTypeEnum.Image && !isLocked}
             <SetProfilePictureAction {asset} />
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 0737031635..5484cd2c08 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -22,6 +22,7 @@
   import {
     AssetJobName,
     AssetTypeEnum,
+    getAssetInfo,
     getAllAlbums,
     getStack,
     runAssetJobs,
@@ -339,6 +340,11 @@
         stack = action.stack;
         break;
       }
+      case AssetAction.SET_PERSON_FEATURED_PHOTO: {
+        const assetInfo = await getAssetInfo({ id: asset.id });
+        asset = { ...asset, people: assetInfo.people };
+        break;
+      }
       case AssetAction.KEEP_THIS_DELETE_OTHERS:
       case AssetAction.UNSTACK: {
         closeViewer();
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index a4cdb656b4..da638bb41d 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -14,6 +14,7 @@ export enum AssetAction {
   REMOVE_ASSET_FROM_STACK = 'remove-asset-from-stack',
   SET_VISIBILITY_LOCKED = 'set-visibility-locked',
   SET_VISIBILITY_TIMELINE = 'set-visibility-timeline',
+  SET_PERSON_FEATURED_PHOTO = 'set-person-featured-photo',
 }
 
 export enum AppRoute {