feat(web): allow hiding all unnamed faces and reset hidden faces (#9378)

* feat: hide all unnamed

* feat: remove dispatch event

* pr feedback

web/src/lib/components/faces-page/show-hide.svelte

@@ -1,24 +1,46 @@
+<script lang="ts" context="module">
+  export enum ToggleVisibilty {
+    HIDE_ALL = 'hide-all',
+    HIDE_UNNANEMD = 'hide-unnamed',
+    VIEW_ALL = 'view-all',
+  }
+</script>
+
 <script lang="ts">
   import { fly } from 'svelte/transition';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { quintOut } from 'svelte/easing';
-  import { createEventDispatcher } from 'svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-  import { mdiClose, mdiEye, mdiEyeOff, mdiRestart } from '@mdi/js';
+  import { mdiClose, mdiEye, mdiEyeOff, mdiEyeSettings, mdiRestart } from '@mdi/js';
   import { locale } from '$lib/stores/preferences.store';
   import Button from '$lib/components/elements/buttons/button.svelte';
 
-  const dispatch = createEventDispatcher<{
-    close: void;
-    reset: void;
-    change: void;
-    done: void;
-  }>();
-
   export let showLoadingSpinner: boolean;
-  export let toggleVisibility: boolean;
+  export let toggleVisibility: ToggleVisibilty = ToggleVisibilty.VIEW_ALL;
   export let screenHeight: number;
   export let countTotalPeople: number;
+  export let onClose: () => void;
+  export let onReset: () => void;
+  export let onChange: (toggleVisibility: ToggleVisibilty) => void;
+  export let onDone: () => void;
+
+  const getNextVisibility = (toggleVisibility: ToggleVisibilty) => {
+    if (toggleVisibility === ToggleVisibilty.VIEW_ALL) {
+      return ToggleVisibilty.HIDE_UNNANEMD;
+    } else if (toggleVisibility === ToggleVisibilty.HIDE_UNNANEMD) {
+      return ToggleVisibilty.HIDE_ALL;
+    } else {
+      return ToggleVisibilty.VIEW_ALL;
+    }
+  };
+
+  const toggleIconOptions: Record<ToggleVisibilty, string> = {
+    [ToggleVisibilty.HIDE_ALL]: mdiEyeOff,
+    [ToggleVisibilty.HIDE_UNNANEMD]: mdiEyeSettings,
+    [ToggleVisibilty.VIEW_ALL]: mdiEye,
+  };
+
+  $: toggleIcon = toggleIconOptions[toggleVisibility];
 </script>
 
 <section
@@ -29,7 +51,7 @@
     class="fixed top-0 z-10 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
   >
     <div class="flex items-center">
-      <CircleIconButton title="Close" icon={mdiClose} on:click={() => dispatch('close')} />
+      <CircleIconButton title="Close" icon={mdiClose} on:click={onClose} />
       <div class="flex gap-2 items-center">
         <p class="ml-2">Show & hide people</p>
         <p class="text-sm text-gray-400 dark:text-gray-600">({countTotalPeople.toLocaleString($locale)})</p>
@@ -37,15 +59,15 @@
     </div>
     <div class="flex items-center justify-end">
       <div class="flex items-center md:mr-8">
-        <CircleIconButton title="Reset people visibility" icon={mdiRestart} on:click={() => dispatch('reset')} />
+        <CircleIconButton title="Reset people visibility" icon={mdiRestart} on:click={onReset} />
         <CircleIconButton
           title="Toggle visibility"
-          icon={toggleVisibility ? mdiEye : mdiEyeOff}
+          icon={toggleIcon}
-          on:click={() => dispatch('change')}
+          on:click={() => onChange(getNextVisibility(toggleVisibility))}
         />
       </div>
       {#if !showLoadingSpinner}
-        <Button on:click={() => dispatch('done')} size="sm" rounded="lg">Done</Button>
+        <Button on:click={onDone} size="sm" rounded="lg">Done</Button>
       {:else}
         <LoadingSpinner />
       {/if}

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

@@ -7,7 +7,7 @@
   import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
   import PeopleCard from '$lib/components/faces-page/people-card.svelte';
   import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
-  import ShowHide from '$lib/components/faces-page/show-hide.svelte';
+  import ShowHide, { ToggleVisibilty } from '$lib/components/faces-page/show-hide.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import {
@@ -48,7 +48,7 @@
   let searchName = '';
 
   let showLoadingSpinner = false;
-  let toggleVisibility = false;
+  let toggleVisibility: ToggleVisibilty = ToggleVisibilty.VIEW_ALL;
 
   let showChangeNameModal = false;
   let showSetBirthDateModal = false;
@@ -104,7 +104,7 @@
     // Reset variables used on the "Show & hide people"   modal
     showLoadingSpinner = false;
     selectHidden = false;
-    toggleVisibility = false;
+    toggleVisibility = ToggleVisibilty.VIEW_ALL;
   };
 
   const handleResetVisibility = () => {
@@ -116,10 +116,17 @@
     people = people;
   };
 
-  const handleToggleVisibility = () => {
+  const handleToggleVisibility = (toggleVisibility: ToggleVisibilty) => {
-    toggleVisibility = !toggleVisibility;
     for (const person of people) {
-      person.isHidden = toggleVisibility;
+      if (toggleVisibility == ToggleVisibilty.HIDE_ALL) {
+        person.isHidden = true;
+      }
+      if (toggleVisibility == ToggleVisibilty.VIEW_ALL) {
+        person.isHidden = false;
+      }
+      if (toggleVisibility == ToggleVisibilty.HIDE_UNNANEMD && !person.name) {
+        person.isHidden = true;
+      }
     }
 
     // trigger reactivity
@@ -172,7 +179,7 @@
     // Reset variables used on the "Show & hide people" modal
     showLoadingSpinner = false;
     selectHidden = false;
-    toggleVisibility = false;
+    toggleVisibility = ToggleVisibilty.VIEW_ALL;
   };
 
   const handleMergeSamePerson = async (response: [PersonResponseDto, PersonResponseDto]) => {
@@ -483,10 +490,10 @@
 </UserPageLayout>
 {#if selectHidden}
   <ShowHide
-    on:done={handleDoneClick}
+    onDone={handleDoneClick}
-    on:close={handleCloseClick}
+    onClose={handleCloseClick}
-    on:reset={handleResetVisibility}
+    onReset={handleResetVisibility}
-    on:change={handleToggleVisibility}
+    onChange={handleToggleVisibility}
     bind:showLoadingSpinner
     bind:toggleVisibility
     {countTotalPeople}