fix(web): search people (immich-app#8955)

* fix: search people * Update web/src/routes/(user)/people/+page.svelte Co-authored-by: Daniel Dietzler <[email protected]> * pr feedback * pr feedback --------- Co-authored-by: Daniel Dietzler <[email protected]>
elliotclee · Apr 23, 2024 · 99ccf28 · 99ccf28
1 parent 48b0b7e
commit 99ccf28
Showing 1 changed file with 21 additions and 6 deletions.
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
@@ -439,10 +439,10 @@
     {/if}
   </svelte:fragment>
 
-  {#if countVisiblePeople > 0}
+  {#if countVisiblePeople > 0 && (!searchName || searchedPeopleLocal.length > 0)}
     <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
-      {#each people as person, index (person.id)}
-        {#if !person.isHidden && (searchName ? searchedPeopleLocal.some((searchedPerson) => searchedPerson.id === person.id) : true)}
+      {#if searchName}
+        {#each searchedPeopleLocal as person, index (person.id)}
           <PeopleCard
             {person}
             preload={index < 20}
@@ -451,14 +451,29 @@
             on:merge-people={() => handleMergePeople(person)}
             on:hide-person={() => handleHidePerson(person)}
           />
-        {/if}
-      {/each}
+        {/each}
+      {:else}
+        {#each people as person, index (person.id)}
+          {#if !person.isHidden}
+            <PeopleCard
+              {person}
+              preload={index < 20}
+              on:change-name={() => handleChangeName(person)}
+              on:set-birth-date={() => handleSetBirthDate(person)}
+              on:merge-people={() => handleMergePeople(person)}
+              on:hide-person={() => handleHidePerson(person)}
+            />
+          {/if}
+        {/each}
+      {/if}
     </div>
   {:else}
     <div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
       <div class="flex flex-col content-center items-center text-center">
         <Icon path={mdiAccountOff} size="3.5em" />
-        <p class="mt-5 text-3xl font-medium">No people</p>
+        <p class="mt-5 text-3xl font-medium max-w-lg line-clamp-2 overflow-hidden">
+          {`No people${searchName ? ` named "${searchName}"` : ''}`}
+        </p>
       </div>
     </div>
   {/if}