diff --git a/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte b/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte index afe45331e43..e7709cd9ccb 100644 --- a/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte +++ b/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte @@ -5,7 +5,7 @@ import { isFaceEditMode } from '$lib/stores/face-edit.svelte'; import { getPeopleThumbnailUrl } from '$lib/utils'; import { getAllPeople, createFace, type PersonResponseDto } from '@immich/sdk'; - import { Button } from '@immich/ui'; + import { Button, Input } from '@immich/ui'; import { Canvas, InteractiveFabricObject, Rect } from 'fabric'; import { onMount } from 'svelte'; import { assetViewingStore } from '$lib/stores/asset-viewing.store'; @@ -24,6 +24,16 @@ let canvas: Canvas | undefined = $state(); let faceRect: Rect | undefined = $state(); let faceSelectorEl: HTMLDivElement | undefined = $state(); + let page = $state(1); + let candidates = $state([]); + + let searchTerm = $state(''); + + let filteredCandidates = $derived( + searchTerm + ? candidates.filter((person) => person.name.toLowerCase().includes(searchTerm.toLowerCase())) + : candidates, + ); const configureControlStyle = () => { InteractiveFabricObject.ownDefaults = { @@ -133,11 +143,8 @@ isFaceEditMode.value = false; }; - let page = $state(1); - let candidates = $state([]); - const getPeople = async () => { - const { hasNextPage, people, total } = await getAllPeople({ page, size: 250, withHidden: false }); + const { hasNextPage, people, total } = await getAllPeople({ page, size: 1000, withHidden: false }); if (candidates.length === total) { return; @@ -307,33 +314,43 @@

Select a person to tag

-
-
- {#each candidates as person} - - {/each} -
+
+ +
+ +
+ {#if filteredCandidates.length > 0} +
+ {#each filteredCandidates as person} + + {/each} +
+ {:else} +
+

No matching people found

+
+ {/if}