From 506d522fc440f30b6b5849f4729fb8c8c3c50c43 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Fri, 10 May 2024 22:30:48 +0200
Subject: [PATCH 1/3] feat: hide all unnamed

---
 .../components/faces-page/show-hide.svelte    | 36 +++++++++++++++----
 web/src/routes/(user)/people/+page.svelte     | 20 +++++++----
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/faces-page/show-hide.svelte b/web/src/lib/components/faces-page/show-hide.svelte
index aee90bdbe7a3a..b22c4c8c42b4a 100644
--- a/web/src/lib/components/faces-page/show-hide.svelte
+++ b/web/src/lib/components/faces-page/show-hide.svelte
@@ -1,10 +1,28 @@
+<script lang="ts" context="module">
+  export enum ToggleVisibilty {
+    HIDE_ALL = 'hide-all',
+    HIDE_UNNANEMD = 'hide-unnamed',
+    VIEW_ALL = 'view-all',
+  }
+
+  export const changeVisibility = (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;
+    }
+  };
+</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';
 
@@ -16,9 +34,17 @@
   }>();
 
   export let showLoadingSpinner: boolean;
-  export let toggleVisibility: boolean;
+  export let toggleVisibility: ToggleVisibilty = ToggleVisibilty.VIEW_ALL;
   export let screenHeight: number;
   export let countTotalPeople: number;
+
+  const toggleIconOptions: Record<ToggleVisibilty, string> = {
+    [ToggleVisibilty.HIDE_ALL]: mdiEyeOff,
+    [ToggleVisibilty.HIDE_UNNANEMD]: mdiEyeSettings,
+    [ToggleVisibilty.VIEW_ALL]: mdiEye,
+  };
+
+  $: toggleIcon = toggleIconOptions[toggleVisibility];
 </script>
 
 <section
@@ -38,11 +64,7 @@
     <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="Toggle visibility"
-          icon={toggleVisibility ? mdiEye : mdiEyeOff}
-          on:click={() => dispatch('change')}
-        />
+        <CircleIconButton title="Toggle visibility" icon={toggleIcon} on:click={() => dispatch('change')} />
       </div>
       {#if !showLoadingSpinner}
         <Button on:click={() => dispatch('done')} size="sm" rounded="lg">Done</Button>
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index 7976bb4f3afb2..be5253e4d300c 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/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, { changeVisibility, 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 = () => {
@@ -117,9 +117,17 @@
   };
 
   const handleToggleVisibility = () => {
-    toggleVisibility = !toggleVisibility;
+    toggleVisibility = changeVisibility(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 +180,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]) => {

From b1a867d8fe2cc4858bcd1d72bff29ca602d1e6d1 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Sat, 11 May 2024 19:37:24 +0200
Subject: [PATCH 2/3] feat: remove dispatch event

---
 .../components/faces-page/show-hide.svelte    | 20 ++++++++-----------
 web/src/routes/(user)/people/+page.svelte     |  8 ++++----
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/web/src/lib/components/faces-page/show-hide.svelte b/web/src/lib/components/faces-page/show-hide.svelte
index b22c4c8c42b4a..0689261022ae5 100644
--- a/web/src/lib/components/faces-page/show-hide.svelte
+++ b/web/src/lib/components/faces-page/show-hide.svelte
@@ -20,23 +20,19 @@
   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, 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: ToggleVisibilty = ToggleVisibilty.VIEW_ALL;
   export let screenHeight: number;
   export let countTotalPeople: number;
+  export let onClose = () => {};
+  export let onReset = () => {};
+  export let onChange = () => {};
+  export let onDone = () => {};
 
   const toggleIconOptions: Record<ToggleVisibilty, string> = {
     [ToggleVisibilty.HIDE_ALL]: mdiEyeOff,
@@ -55,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>
@@ -63,11 +59,11 @@
     </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="Toggle visibility" icon={toggleIcon} on:click={() => dispatch('change')} />
+        <CircleIconButton title="Reset people visibility" icon={mdiRestart} on:click={onReset} />
+        <CircleIconButton title="Toggle visibility" icon={toggleIcon} on:click={onChange} />
       </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}
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index 80051d9416a3f..482e06da9a8c9 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -491,10 +491,10 @@
 </UserPageLayout>
 {#if selectHidden}
   <ShowHide
-    on:done={handleDoneClick}
-    on:close={handleCloseClick}
-    on:reset={handleResetVisibility}
-    on:change={handleToggleVisibility}
+    onDone={handleDoneClick}
+    onClose={handleCloseClick}
+    onReset={handleResetVisibility}
+    onChange={handleToggleVisibility}
     bind:showLoadingSpinner
     bind:toggleVisibility
     {countTotalPeople}

From 91d663668901bcc1503a9fa72cfffc055a72f1a8 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Sat, 11 May 2024 21:18:04 +0200
Subject: [PATCH 3/3] pr feedback

---
 .../components/faces-page/show-hide.svelte    | 34 +++++++++++--------
 web/src/routes/(user)/people/+page.svelte     |  5 ++-
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/web/src/lib/components/faces-page/show-hide.svelte b/web/src/lib/components/faces-page/show-hide.svelte
index 0689261022ae5..82159c8ee7a81 100644
--- a/web/src/lib/components/faces-page/show-hide.svelte
+++ b/web/src/lib/components/faces-page/show-hide.svelte
@@ -4,16 +4,6 @@
     HIDE_UNNANEMD = 'hide-unnamed',
     VIEW_ALL = 'view-all',
   }
-
-  export const changeVisibility = (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;
-    }
-  };
 </script>
 
 <script lang="ts">
@@ -29,10 +19,20 @@
   export let toggleVisibility: ToggleVisibilty = ToggleVisibilty.VIEW_ALL;
   export let screenHeight: number;
   export let countTotalPeople: number;
-  export let onClose = () => {};
-  export let onReset = () => {};
-  export let onChange = () => {};
-  export let onDone = () => {};
+  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,
@@ -60,7 +60,11 @@
     <div class="flex items-center justify-end">
       <div class="flex items-center md:mr-8">
         <CircleIconButton title="Reset people visibility" icon={mdiRestart} on:click={onReset} />
-        <CircleIconButton title="Toggle visibility" icon={toggleIcon} on:click={onChange} />
+        <CircleIconButton
+          title="Toggle visibility"
+          icon={toggleIcon}
+          on:click={() => onChange(getNextVisibility(toggleVisibility))}
+        />
       </div>
       {#if !showLoadingSpinner}
         <Button on:click={onDone} size="sm" rounded="lg">Done</Button>
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index 482e06da9a8c9..f4d318ac53fec 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/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, { changeVisibility, ToggleVisibilty } 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 {
@@ -116,8 +116,7 @@
     people = people;
   };
 
-  const handleToggleVisibility = () => {
-    toggleVisibility = changeVisibility(toggleVisibility);
+  const handleToggleVisibility = (toggleVisibility: ToggleVisibilty) => {
     for (const person of people) {
       if (toggleVisibility == ToggleVisibilty.HIDE_ALL) {
         person.isHidden = true;