fix(web): whitespace in person name (#5401)

* fix(web): whitespace in person name

* pr feedback

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

@@ -17,6 +17,7 @@
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { cloneDeep } from 'lodash-es';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { searchNameLocal } from '$lib/utils/person';
 
   export let person: PersonResponseDto;
   let people: PersonResponseDto[] = [];
@@ -56,12 +57,7 @@
     }
     if (!force) {
       if (people.length < 20 && name.startsWith(searchWord)) {
-        people = peopleCopy
+        people = searchNameLocal(name, peopleCopy, 10);
-          .filter((person: PersonResponseDto) => {
-            const nameParts = person.name.split(' ');
-            return nameParts.some((splitName) => splitName.toLowerCase().startsWith(name.toLowerCase()));
-          })
-          .slice(0, 10);
         return;
       }
     }

web/src/lib/utils/person.ts

@@ -0,0 +1,32 @@
+import type { PersonResponseDto } from '@api';
+
+export const searchNameLocal = (
+  name: string,
+  people: PersonResponseDto[],
+  slice: number,
+  personId?: string,
+): PersonResponseDto[] => {
+  return name.indexOf(' ') >= 0
+    ? people
+        .filter((person: PersonResponseDto) => {
+          if (personId) {
+            return person.name.toLowerCase().startsWith(name.toLowerCase()) && person.id !== personId;
+          } else {
+            return person.name.toLowerCase().startsWith(name.toLowerCase());
+          }
+        })
+        .slice(0, slice)
+    : people
+        .filter((person: PersonResponseDto) => {
+          const nameParts = person.name.split(' ');
+          if (personId) {
+            return (
+              nameParts.some((splitName) => splitName.toLowerCase().startsWith(name.toLowerCase())) &&
+              person.id !== personId
+            );
+          } else {
+            return nameParts.some((splitName) => splitName.toLowerCase().startsWith(name.toLowerCase()));
+          }
+        })
+        .slice(0, slice);
+};

web/src/routes/(user)/people/[personId]/+page.svelte

@@ -35,6 +35,7 @@
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { mdiPlus, mdiDotsVertical, mdiArrowLeft } from '@mdi/js';
   import { isExternalUrl } from '$lib/utils/navigation';
+  import { searchNameLocal } from '$lib/utils/person';
 
   export let data: PageData;
 
@@ -110,17 +111,7 @@
 
   $: {
     if (people) {
-      suggestedPeople = !name
+      suggestedPeople = !name ? [] : searchNameLocal(name, people, 5, data.person.id);
-        ? []
-        : people
-            .filter((person: PersonResponseDto) => {
-              const nameParts = person.name.split(' ');
-              return (
-                nameParts.some((splitName) => splitName.toLowerCase().startsWith(name.toLowerCase())) &&
-                person.id !== data.person.id
-              );
-            })
-            .slice(0, 5);
     }
   }