feat(web,server): search people (#5703)

* feat: search peoples

* fix: responsive design

* use existing count

* generate sql file

* fix: tests

* remove visible people

* fix: merge, hide...

* use component

* fix: linter

* chore: regenerate api

* fix: change name when searching for a face

* save search

* remove duplicate

* use enums for query parameters

* fix: increase to 20 for the local search

* use constants

* simplify

* fix: number of people more visible

* fix: merge

* fix: search

* fix: loading spinner position

* pr feedback

web/src/lib/components/faces-page/search-bar.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { mdiClose, mdiMagnify } from '@mdi/js';
+  import Icon from '../elements/icon.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import type { SearchOptions } from '$lib/utils/dipatch';
+  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+
+  export let name: string;
+  export let isSearchingPeople: boolean;
+
+  const dispatch = createEventDispatcher<{ search: SearchOptions; reset: void }>();
+
+  const resetSearch = () => {
+    name = '';
+    dispatch('reset');
+  };
+</script>
+
+<div class="flex items-center text-sm rounded-lg bg-gray-100 p-2 dark:bg-gray-700 gap-2 place-items-center h-full">
+  <button on:click={() => dispatch('search', { force: true })}>
+    <div class="w-fit">
+      <Icon path={mdiMagnify} size="24" />
+    </div>
+  </button>
+  <!-- svelte-ignore a11y-autofocus -->
+  <input
+    autofocus
+    class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
+    type="text"
+    placeholder="Search names"
+    bind:value={name}
+    on:input={() => dispatch('search', { force: false })}
+  />
+  {#if isSearchingPeople}
+    <div class="flex place-items-center">
+      <LoadingSpinner />
+    </div>
+  {/if}
+  {#if name}
+    <button on:click={resetSearch}>
+      <Icon path={mdiClose} />
+    </button>
+  {/if}
+</div>