feat(web): manual face tagging and deletion (#16062)

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

@@ -25,7 +25,6 @@
     type ExifResponseDto,
   } from '@immich/sdk';
   import {
-    mdiAccountOff,
     mdiCalendar,
     mdiCameraIris,
     mdiClose,
@@ -34,6 +33,7 @@
     mdiImageOutline,
     mdiInformationOutline,
     mdiPencil,
+    mdiPlus,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
@@ -46,6 +46,7 @@
   import AlbumListItemDetails from './album-list-item-details.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
+  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
 
   interface Props {
     asset: AssetResponseDto;
@@ -186,20 +187,11 @@
   <DetailPanelDescription {asset} {isOwner} />
   <DetailPanelRating {asset} {isOwner} />
 
-  {#if (!isSharedLink() && unassignedFaces.length > 0) || people.length > 0}
+  {#if !isSharedLink() && isOwner}
     <section class="px-4 pt-4 text-sm">
       <div class="flex h-10 w-full items-center justify-between">
         <h2>{$t('people').toUpperCase()}</h2>
         <div class="flex gap-2 items-center">
-          {#if unassignedFaces.length > 0}
-            <Icon
-              ariaLabel={$t('asset_has_unassigned_faces')}
-              title={$t('asset_has_unassigned_faces')}
-              color="currentColor"
-              path={mdiAccountOff}
-              size="24"
-            />
-          {/if}
           {#if people.some((person) => person.isHidden)}
             <CircleIconButton
               title={$t('show_hidden_people')}
@@ -210,13 +202,24 @@
             />
           {/if}
           <CircleIconButton
-            title={$t('edit_people')}
-            icon={mdiPencil}
+            title={$t('tag_people')}
+            icon={mdiPlus}
             padding="1"
             size="20"
             buttonSize="32"
-            onclick={() => (showEditFaces = true)}
+            onclick={() => (isFaceEditMode.value = !isFaceEditMode.value)}
           />
+
+          {#if people.length > 0 || unassignedFaces.length > 0}
+            <CircleIconButton
+              title={$t('edit_people')}
+              icon={mdiPencil}
+              padding="1"
+              size="20"
+              buttonSize="32"
+              onclick={() => (showEditFaces = true)}
+            />
+          {/if}
         </div>
       </div>