feat(web): Add "set as featured" option for an asset (#14879)

Author: IMBeniamin

i18n/en.json

@@ -1142,6 +1142,7 @@
   "set": "Set",
   "set_as_album_cover": "Set as album cover",
   "set_as_profile_picture": "Set as profile picture",
+  "set_as_featured_photo": "Set as featured photo",
   "set_date_of_birth": "Set date of birth",
   "set_profile_picture": "Set profile picture",
   "set_slideshow_to_fullscreen": "Set Slideshow to fullscreen",

web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  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';
+
+  interface Props {
+    asset: AssetResponseDto;
+    person: PersonResponseDto;
+  }
+
+  let { asset, person }: Props = $props();
+
+  const handleSelectFeaturePhoto = async () => {
+    try {
+      await updatePerson({ id: person.id, personUpdateDto: { featureFaceAssetId: asset.id } });
+      notificationController.show({ message: $t('feature_photo_updated'), type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_set_feature_photo'));
+    }
+  };
+</script>
+
+<MenuOption text={$t('set_as_featured_photo')} icon={mdiFaceManProfile} onClick={handleSelectFeaturePhoto} />

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -9,6 +9,7 @@
   import FavoriteAction from '$lib/components/asset-viewer/actions/favorite-action.svelte';
   import RestoreAction from '$lib/components/asset-viewer/actions/restore-action.svelte';
   import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/set-album-cover-action.svelte';
+  import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/set-person-featured-action.svelte';
   import SetProfilePictureAction from '$lib/components/asset-viewer/actions/set-profile-picture-action.svelte';
   import ShareAction from '$lib/components/asset-viewer/actions/share-action.svelte';
   import ShowDetailAction from '$lib/components/asset-viewer/actions/show-detail-action.svelte';
@@ -27,6 +28,7 @@
     AssetTypeEnum,
     type AlbumResponseDto,
     type AssetResponseDto,
+    type PersonResponseDto,
     type StackResponseDto,
   } from '@immich/sdk';
   import {
@@ -50,6 +52,7 @@
   interface Props {
     asset: AssetResponseDto;
     album?: AlbumResponseDto | null;
+    person?: PersonResponseDto | null;
     stack?: StackResponseDto | null;
     showDetailButton: boolean;
     showSlideshow?: boolean;
@@ -67,6 +70,7 @@
   let {
     asset,
     album = null,
+    person = null,
     stack = null,
     showDetailButton,
     showSlideshow = false,
@@ -169,6 +173,9 @@
           {#if album}
             <SetAlbumCoverAction {asset} {album} />
           {/if}
+          {#if person}
+            <SetFeaturedPhotoAction {asset} {person} />
+          {/if}
           {#if asset.type === AssetTypeEnum.Image}
             <SetProfilePictureAction {asset} />
           {/if}

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

@@ -30,6 +30,7 @@
     type ActivityResponseDto,
     type AlbumResponseDto,
     type AssetResponseDto,
+    type PersonResponseDto,
     type StackResponseDto,
   } from '@immich/sdk';
   import { onDestroy, onMount, untrack } from 'svelte';
@@ -56,6 +57,7 @@
     withStacked?: boolean;
     isShared?: boolean;
     album?: AlbumResponseDto | null;
+    person?: PersonResponseDto | null;
     onAction?: OnAction | undefined;
     reactions?: ActivityResponseDto[];
     onClose: (dto: { asset: AssetResponseDto }) => void;
@@ -72,6 +74,7 @@
     withStacked = false,
     isShared = false,
     album = null,
+    person = null,
     onAction = undefined,
     reactions = $bindable([]),
     onClose,
@@ -429,6 +432,7 @@
       <AssetViewerNavBar
         {asset}
         {album}
+        {person}
         {stack}
         showDetailButton={enableDetailPanel}
         showSlideshow={!!assetStore}

web/src/lib/components/photos-page/asset-grid.svelte

@@ -19,7 +19,7 @@
     type ScrollTargetListener,
   } from '$lib/utils/timeline-util';
   import { TUNABLES } from '$lib/utils/tunables';
-  import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
+  import type { AlbumResponseDto, AssetResponseDto, PersonResponseDto } from '@immich/sdk';
   import { throttle } from 'lodash-es';
   import { onDestroy, onMount, type Snippet } from 'svelte';
   import Portal from '../shared-components/portal/portal.svelte';
@@ -52,6 +52,7 @@
     showArchiveIcon?: boolean;
     isShared?: boolean;
     album?: AlbumResponseDto | null;
+    person?: PersonResponseDto | null;
     isShowDeleteConfirmation?: boolean;
     onSelect?: (asset: AssetResponseDto) => void;
     onEscape?: () => void;
@@ -70,6 +71,7 @@
     showArchiveIcon = false,
     isShared = false,
     album = null,
+    person = null,
     isShowDeleteConfirmation = $bindable(false),
     onSelect = () => {},
     onEscape = () => {},
@@ -914,6 +916,7 @@
         preloadAssets={$preloadAssets}
         {isShared}
         {album}
+        {person}
         onAction={handleAction}
         onPrevious={handlePrevious}
         onNext={handleNext}

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -454,6 +454,7 @@
   {#key person.id}
     <AssetGrid
       enableRouting={true}
+      {person}
       {assetStore}
       {assetInteraction}
       isSelectionMode={viewMode === PersonPageViewMode.SELECT_PERSON}