feat(web): Option to assign people to unassigned faces (#9773)

* added unassigned faces to people edit

* svelte fix

* fix format

* Captialized unassigned person name, removed person id from alttext, fixed problem with multiple faces per person

* Added faces to the getAssetInfo API endpoint

* Updated openApi clients

* Readded the photoeditor dependency

* fixed lint/format

* fixed photoViewer type

* changes getAssetInfo.faces to only include unassigned faces

* fix: bad merge

* title

* logic

---------

Co-authored-by: Jan108 <dasJan108@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -27,6 +27,7 @@
     mdiImageOutline,
     mdiInformationOutline,
     mdiPencil,
+    mdiAccountOff,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { createEventDispatcher, onMount } from 'svelte';
@@ -76,6 +77,7 @@
     if (newAsset.id && !isSharedLink()) {
       const data = await getAssetInfo({ id: asset.id });
       people = data?.people || [];
+      unassignedFaces = data?.unassignedFaces || [];
     }
   };
 
@@ -93,6 +95,8 @@
   $: people = asset.people || [];
   $: showingHiddenPeople = false;
 
+  $: unassignedFaces = asset.unassignedFaces || [];
+
   onMount(() => {
     return websocketEvents.on('on_asset_update', (assetUpdate) => {
       if (assetUpdate.id === asset.id) {
@@ -118,6 +122,7 @@
   const handleRefreshPeople = async () => {
     await getAssetInfo({ id: asset.id }).then((data) => {
       people = data?.people || [];
+      unassignedFaces = data?.unassignedFaces || [];
     });
     showEditFaces = false;
   };
@@ -158,11 +163,20 @@
 
   <DetailPanelDescription {asset} {isOwner} />
 
-  {#if !isSharedLink() && people.length > 0}
+  {#if (!isSharedLink() && unassignedFaces.length > 0) || people.length > 0}
     <section class="px-4 py-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="Asset has unassigned faces"
+              title="Asset has unassigned faces"
+              color="currentColor"
+              path={mdiAccountOff}
+              size="24"
+            />
+          {/if}
           {#if people.some((person) => person.isHidden)}
             <CircleIconButton
               title={$t('show_hidden_people')}