pr feedback

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

@@ -21,7 +21,7 @@
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import type { FaceWithGeneretedThumbnail } from '$lib/utils/people-utils';
+  import type { FaceWithGeneratedThumbnail } from '$lib/utils/people-utils';
   import {
     NotificationType,
     notificationController,
@@ -45,11 +45,11 @@
   let peopleWithFaces: AssetFaceResponseDto[] = [];
   let selectedPersonToReassign: Record<string, PersonResponseDto> = {};
   let selectedPersonToCreate: Record<string, string> = {};
-  let selectedPersonToAdd: Record<string, FaceWithGeneretedThumbnail> = {};
+  let selectedPersonToAdd: Record<string, FaceWithGeneratedThumbnail> = {};
   let selectedFaceToRemove: Record<string, AssetFaceResponseDto> = {};
   let editedPerson: PersonResponseDto;
   let editedFace: AssetFaceResponseDto;
-  let unassignedFaces: FaceWithGeneretedThumbnail[] = [];
+  let unassignedFaces: FaceWithGeneratedThumbnail[] = [];
 
   // loading spinners
   let isShowLoadingDone = false;
@@ -75,7 +75,7 @@
         }
       }),
     );
-    unassignedFaces = peopleWithGeneratedImage.filter((item): item is FaceWithGeneretedThumbnail => item !== undefined);
+    unassignedFaces = peopleWithGeneratedImage.filter((item): item is FaceWithGeneratedThumbnail => item !== undefined);
   };
 
   async function loadPeople() {
@@ -225,7 +225,7 @@
       showSelectedFaces = true;
     }
   };
-  const handleCreateOrReassignFaceFromUnassignedFace = (face: FaceWithGeneretedThumbnail) => {
+  const handleCreateOrReassignFaceFromUnassignedFace = (face: FaceWithGeneratedThumbnail) => {
     selectedPersonToAdd[face.id] = face;
     selectedPersonToAdd = selectedPersonToAdd;
     showUnassignedFaces = false;
@@ -234,7 +234,7 @@
   const handleOpenAvailableFaces = () => {
     showUnassignedFaces = !showUnassignedFaces;
   };
-  const handleRemoveAddedFace = (face: FaceWithGeneretedThumbnail) => {
+  const handleRemoveAddedFace = (face: FaceWithGeneratedThumbnail) => {
     $boundingBoxesArray = [];
     delete selectedPersonToAdd[face.id];
 

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

@@ -2,7 +2,7 @@
   import { fly } from 'svelte/transition';
   import { linear } from 'svelte/easing';
   import { mdiAccountOff, mdiArrowLeftThin, mdiClose, mdiMinus } from '@mdi/js';
-  import type { FaceWithGeneretedThumbnail } from '$lib/utils/people-utils';
+  import type { FaceWithGeneratedThumbnail } from '$lib/utils/people-utils';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import type { AssetFaceResponseDto, AssetTypeEnum, PersonResponseDto } from '@immich/sdk';
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
@@ -11,28 +11,28 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
-  export let unassignedFaces: FaceWithGeneretedThumbnail[];
+  export let unassignedFaces: FaceWithGeneratedThumbnail[];
   export let allPeople: PersonResponseDto[];
-  export let selectedPersonToAdd: Record<string, FaceWithGeneretedThumbnail>;
+  export let selectedPersonToAdd: Record<string, FaceWithGeneratedThumbnail>;
   export let selectedFaceToRemove: Record<string, AssetFaceResponseDto>;
   export let assetType: AssetTypeEnum;
   export let assetId: string;
   export let onResetFacesToBeRemoved = () => {};
   export let onClose = () => {};
-  export let onCreatePerson: (face: FaceWithGeneretedThumbnail) => void;
+  export let onCreatePerson: (face: FaceWithGeneratedThumbnail) => void;
-  export let onReassign: (face: FaceWithGeneretedThumbnail) => void;
+  export let onReassign: (face: FaceWithGeneratedThumbnail) => void;
   export let onAbortRemove: (id: string) => void;
 
-  let showSeletecFaces = false;
+  let showSelectedFaces = false;
-  let editedFace: FaceWithGeneretedThumbnail;
+  let editedFace: FaceWithGeneratedThumbnail;
 
-  const handleSelectedFace = (face: FaceWithGeneretedThumbnail) => {
+  const handleSelectedFace = (face: FaceWithGeneratedThumbnail) => {
     editedFace = face;
-    showSeletecFaces = true;
+    showSelectedFaces = true;
   };
 
   const handleCreatePerson = (newFeaturePhoto: string | null) => {
-    showSeletecFaces = false;
+    showSelectedFaces = false;
     if (newFeaturePhoto) {
       editedFace.customThumbnail = newFeaturePhoto;
       onCreatePerson(editedFace);
@@ -43,7 +43,7 @@
 
   const handleReassignFace = (person: PersonResponseDto | null) => {
     if (person) {
-      showSeletecFaces = false;
+      showSelectedFaces = false;
       editedFace.person = person;
       onReassign(editedFace);
     } else {
@@ -95,8 +95,8 @@
               <button
                 tabindex={index}
                 class="absolute left-0 top-0 h-[90px] w-[90px] cursor-default"
-                on:focus={() => (face ? ($boundingBoxesArray = [face]) : '')}
+                on:focus={() => ($boundingBoxesArray = [face])}
-                on:mouseover={() => (face ? ($boundingBoxesArray = [face]) : '')}
+                on:mouseover={() => ($boundingBoxesArray = [face])}
                 on:mouseleave={() => ($boundingBoxesArray = [])}
               >
                 <ImageThumbnail
@@ -191,13 +191,13 @@
   {/if}
 </section>
 
-{#if showSeletecFaces}
+{#if showSelectedFaces}
   <AssignFaceSidePanel
     {assetType}
     {assetId}
     {editedFace}
     {allPeople}
-    onClose={() => (showSeletecFaces = false)}
+    onClose={() => (showSelectedFaces = false)}
     onCreatePerson={handleCreatePerson}
     onReassign={handleReassignFace}
   />

web/src/lib/components/faces-page/unmerge-face-selector.svelte

@@ -152,10 +152,10 @@
           disabled={disableButtons || hasSelection}
           on:click={handleUnassign}
         >
-          {#if !showLoadingSpinnerUnassign}
+          {#if showLoadingSpinnerUnassign}
-            <Icon path={mdiTagRemove} size={18} />
-          {:else}
             <LoadingSpinner />
+          {:else}
+            <Icon path={mdiTagRemove} size={18} />
           {/if}
           <span class="ml-2"> Unassign</span></Button
         >
@@ -165,10 +165,10 @@
           disabled={disableButtons || hasSelection}
           on:click={handleCreate}
         >
-          {#if !showLoadingSpinnerCreate}
+          {#if showLoadingSpinnerCreate}
-            <Icon path={mdiPlus} size={18} />
-          {:else}
             <LoadingSpinner />
+          {:else}
+            <Icon path={mdiPlus} size={18} />
           {/if}
           <span class="ml-2"> Create new Person</span></Button
         >
@@ -178,12 +178,12 @@
           disabled={disableButtons || !hasSelection}
           on:click={handleReassign}
         >
-          {#if !showLoadingSpinnerReassign}
+          {#if showLoadingSpinnerReassign}
+            <LoadingSpinner />
+          {:else}
             <div>
               <Icon path={mdiMerge} size={18} class="rotate-180" />
             </div>
-          {:else}
-            <LoadingSpinner />
           {/if}
           <span class="ml-2"> Reassign</span></Button
         >

web/src/lib/utils/people-utils.ts

@@ -20,7 +20,7 @@ export interface boundingBox {
   height: number;
 }
 
-export interface FaceWithGeneretedThumbnail extends AssetFaceResponseDto {
+export interface FaceWithGeneratedThumbnail extends AssetFaceResponseDto {
   customThumbnail: string;
 }