From 13b11a39a92db748d7c2e1028c2b9d7c7bdfbbe0 Mon Sep 17 00:00:00 2001
From: Sam Holton <samholton@gmail.com>
Date: Wed, 27 Mar 2024 15:58:38 -0400
Subject: [PATCH] feat(web) add filter when viewing all people in search box
 (#7997)

* feat(web) add filter when viewing all people in search box

* chore: svelte check

* pr feedback: fix vertical spacing to eliminate jump when filter appears

* pr feedback

* simplify filter logic

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../lib/components/elements/search-bar.svelte   |  2 +-
 .../search-bar/search-people-section.svelte     | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/elements/search-bar.svelte b/web/src/lib/components/elements/search-bar.svelte
index 21d36c4a27..fb301b65fe 100644
--- a/web/src/lib/components/elements/search-bar.svelte
+++ b/web/src/lib/components/elements/search-bar.svelte
@@ -23,7 +23,7 @@
     ? 'rounded-2xl'
     : 'rounded-t-lg'} bg-gray-200 p-2 dark:bg-immich-dark-gray gap-2 place-items-center h-full"
 >
-  <button on:click={() => dispatch('search', { force: true })}>
+  <button type="button" on:click={() => dispatch('search', { force: true })}>
     <div class="w-fit">
       <Icon path={mdiMagnify} size="24" />
     </div>
diff --git a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
index 4b87ab12df..a8f0008450 100644
--- a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { getAllPeople, type PersonResponseDto } from '@immich/sdk';
@@ -12,6 +13,7 @@
 
   let peoplePromise = getPeople();
   let showAllPeople = false;
+  let name = '';
   $: numberOfPeople = (width - 80) / 85;
 
   function orderBySelectedPeopleFirst(people: PersonResponseDto[]) {
@@ -38,15 +40,24 @@
     }
     selectedPeople = selectedPeople;
   }
+
+  const filterPeople = (list: PersonResponseDto[], name: string) => {
+    const nameLower = name.toLowerCase();
+    return name ? list.filter((p) => p.name.toLowerCase().startsWith(nameLower)) : list;
+  };
 </script>
 
 {#await peoplePromise then people}
   {#if people && people.length > 0}
-    {@const peopleList = showAllPeople ? people : people.slice(0, numberOfPeople)}
+    {@const peopleList = showAllPeople ? filterPeople(people, name) : people.slice(0, numberOfPeople)}
 
     <div id="people-selection" class="-mb-4">
-      <div class="flex items-center gap-6">
-        <p class="immich-form-label">PEOPLE</p>
+      <div class="flex items-center w-full justify-between gap-6">
+        <p class="immich-form-label py-3">PEOPLE</p>
+
+        {#if showAllPeople}
+          <SearchBar bind:name placeholder="Filter people" isSearching={false} />
+        {/if}
       </div>
 
       <div class="flex -mx-1 max-h-64 gap-1 mt-2 flex-wrap overflow-y-auto immich-scrollbar">