refactor(web): set birthdate (#25139)

web/src/lib/components/faces-page/people-card.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { focusOutside } from '$lib/actions/focus-outside';
+  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
+  import { getPersonActions } from '$lib/services/person.service';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { type PersonResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
   import {
     mdiAccountMultipleCheckOutline,
-    mdiCalendarEditOutline,
     mdiDotsVertical,
     mdiEyeOffOutline,
     mdiHeart,
@@ -18,17 +19,18 @@
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
 
-  interface Props {
+  type Props = {
     person: PersonResponseDto;
-    onSetBirthDate: () => void;
     onMergePeople: () => void;
     onHidePerson: () => void;
     onToggleFavorite: () => void;
-  }
+  };
 
-  let { person, onSetBirthDate, onMergePeople, onHidePerson, onToggleFavorite }: Props = $props();
+  let { person, onMergePeople, onHidePerson, onToggleFavorite }: Props = $props();
 
   let showVerticalDots = $state(false);
+
+  const { SetDateOfBirth } = $derived(getPersonActions($t, person));
 </script>
 
 <div
@@ -73,7 +75,7 @@
         title={$t('show_person_options')}
       >
         <MenuOption onClick={onHidePerson} icon={mdiEyeOffOutline} text={$t('hide_person')} />
-        <MenuOption onClick={onSetBirthDate} icon={mdiCalendarEditOutline} text={$t('set_date_of_birth')} />
+        <ActionMenuItem action={SetDateOfBirth} />
         <MenuOption onClick={onMergePeople} icon={mdiAccountMultipleCheckOutline} text={$t('merge_people')} />
         <MenuOption
           onClick={onToggleFavorite}

web/src/lib/managers/event-manager.svelte.ts

@@ -6,6 +6,7 @@ import type {
   AssetResponseDto,
   LibraryResponseDto,
   LoginResponseDto,
+  PersonResponseDto,
   QueueResponseDto,
   SharedLinkResponseDto,
   SystemConfigDto,
@@ -33,6 +34,8 @@ export type Events = {
   AlbumUpdate: [AlbumResponseDto];
   AlbumDelete: [AlbumResponseDto];
 
+  PersonUpdate: [PersonResponseDto];
+
   QueueUpdate: [QueueResponseDto];
 
   SharedLinkCreate: [SharedLinkResponseDto];

web/src/lib/modals/PersonEditBirthDateModal.svelte

@@ -1,73 +1,46 @@
 <script lang="ts">
   import DateInput from '$lib/elements/DateInput.svelte';
-  import { handleError } from '$lib/utils/handle-error';
+  import { handleUpdatePersonBirthDate } from '$lib/services/person.service';
-  import { updatePerson, type PersonResponseDto } from '@immich/sdk';
+  import { type PersonResponseDto } from '@immich/sdk';
-  import { Button, HStack, Modal, ModalBody, ModalFooter, toastManager } from '@immich/ui';
+  import { Button, FormModal, Text } from '@immich/ui';
   import { mdiCake } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
-  interface Props {
+  type Props = {
     person: PersonResponseDto;
-    onClose: (updatedPerson?: PersonResponseDto) => void;
+    onClose: () => void;
-  }
+  };
 
   let { person, onClose }: Props = $props();
-  let birthDate = $state(person.birthDate ?? '');
+  let birthDate = $derived(person.birthDate ?? '');
 
-  const todayFormatted = new Date().toISOString().split('T')[0];
+  const onSubmit = async () => {
-
+    const success = await handleUpdatePersonBirthDate(person, birthDate);
-  const handleUpdateBirthDate = async () => {
+    if (success) {
-    try {
+      onClose();
-      const updatedPerson = await updatePerson({
-        id: person.id,
-        personUpdateDto: { birthDate },
-      });
-
-      toastManager.success($t('date_of_birth_saved'));
-      onClose(updatedPerson);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_save_date_of_birth'));
     }
   };
+
+  const todayFormatted = new Date().toISOString().split('T')[0];
 </script>
 
-<Modal title={$t('set_date_of_birth')} icon={mdiCake} {onClose} size="small">
+<FormModal title={$t('set_date_of_birth')} size="small" icon={mdiCake} {onClose} {onSubmit}>
-  <ModalBody>
+  <Text size="small">{$t('birthdate_set_description')}</Text>
-    <div class="text-primary">
+  <div class="my-4 flex flex-col gap-2">
-      <p class="text-sm dark:text-immich-dark-fg">
+    <DateInput
-        {$t('birthdate_set_description')}
+      class="immich-form-input"
-      </p>
+      id="birthDate"
-    </div>
+      name="birthDate"
-
+      type="date"
-    <form onsubmit={() => handleUpdateBirthDate()} autocomplete="off" id="set-birth-date-form">
+      bind:value={birthDate}
-      <div class="my-4 flex flex-col gap-2">
+      max={todayFormatted}
-        <DateInput
+    />
-          class="immich-form-input"
+    {#if person.birthDate}
-          id="birthDate"
+      <div class="flex justify-end">
-          name="birthDate"
+        <Button shape="round" color="secondary" size="small" onclick={() => (birthDate = '')}>
-          type="date"
+          {$t('clear')}
-          bind:value={birthDate}
+        </Button>
-          max={todayFormatted}
-        />
-        {#if person.birthDate}
-          <div class="flex justify-end">
-            <Button shape="round" color="secondary" size="small" onclick={() => (birthDate = '')}>
-              {$t('clear')}
-            </Button>
-          </div>
-        {/if}
       </div>
-    </form>
+    {/if}
-  </ModalBody>
+  </div>
-
+</FormModal>
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>
-        {$t('cancel')}
-      </Button>
-      <Button type="submit" shape="round" color="primary" fullWidth form="set-birth-date-form">
-        {$t('save')}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>

web/src/lib/services/person.service.ts

@@ -0,0 +1,31 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
+import { handleError } from '$lib/utils/handle-error';
+import { getFormatter } from '$lib/utils/i18n';
+import { updatePerson, type PersonResponseDto } from '@immich/sdk';
+import { modalManager, toastManager, type ActionItem } from '@immich/ui';
+import { mdiCalendarEditOutline } from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+
+export const getPersonActions = ($t: MessageFormatter, person: PersonResponseDto) => {
+  const SetDateOfBirth: ActionItem = {
+    title: $t('set_date_of_birth'),
+    icon: mdiCalendarEditOutline,
+    onAction: () => modalManager.show(PersonEditBirthDateModal, { person }),
+  };
+
+  return { SetDateOfBirth };
+};
+
+export const handleUpdatePersonBirthDate = async (person: PersonResponseDto, birthDate: string) => {
+  const $t = await getFormatter();
+
+  try {
+    const response = await updatePerson({ id: person.id, personUpdateDto: { birthDate } });
+    toastManager.success($t('date_of_birth_saved'));
+    eventManager.emit('PersonUpdate', response);
+    return true;
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_save_date_of_birth'));
+  }
+};

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

@@ -9,8 +9,8 @@
   import PeopleInfiniteScroll from '$lib/components/faces-page/people-infinite-scroll.svelte';
   import SearchPeople from '$lib/components/faces-page/people-search.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import { ActionQueryParameterValue, AppRoute, QueryParameter, SessionStorageKey } from '$lib/constants';
-  import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
   import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { websocketEvents } from '$lib/stores/websocket';
@@ -210,21 +210,6 @@
     );
   };
 
-  const handleChangeBirthDate = async (person: PersonResponseDto) => {
-    const updatedPerson = await modalManager.show(PersonEditBirthDateModal, { person });
-
-    if (!updatedPerson) {
-      return;
-    }
-
-    people = people.map((person: PersonResponseDto) => {
-      if (person.id === updatedPerson.id) {
-        return updatedPerson;
-      }
-      return person;
-    });
-  };
-
   const onResetSearchBar = async () => {
     await clearQueryParam(QueryParameter.SEARCHED_PEOPLE, $page.url);
   };
@@ -293,10 +278,21 @@
       (person) => person.name.toLowerCase() === name.toLowerCase() && person.id !== personId && person.name,
     );
   };
+
+  const onPersonUpdate = (response: PersonResponseDto) => {
+    people = people.map((person: PersonResponseDto) => {
+      if (person.id === response.id) {
+        return response;
+      }
+      return person;
+    });
+  };
 </script>
 
 <svelte:window bind:innerHeight />
 
+<OnEvents {onPersonUpdate} />
+
 <UserPageLayout
   title={$t('people')}
   description={countVisiblePeople === 0 && !searchName ? undefined : `(${countVisiblePeople.toLocaleString($locale)})`}
@@ -353,7 +349,6 @@
         >
           <PeopleCard
             {person}
-            onSetBirthDate={() => handleChangeBirthDate(person)}
             onMergePeople={() => handleMergePeople(person)}
             onHidePerson={() => handleHidePerson(person)}
             onToggleFavorite={() => handleToggleFavorite(person)}

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -4,10 +4,12 @@
   import { clickOutside } from '$lib/actions/click-outside';
   import { listNavigation } from '$lib/actions/list-navigation';
   import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
+  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
   import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
   import MergeFaceSelector from '$lib/components/faces-page/merge-face-selector.svelte';
   import UnMergeFaceSelector from '$lib/components/faces-page/unmerge-face-selector.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
@@ -28,8 +30,8 @@
   import { AppRoute, PersonPageViewMode, QueryParameter, SessionStorageKey } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
   import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
+  import { getPersonActions } from '$lib/services/person.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { locale } from '$lib/stores/preferences.store';
@@ -50,7 +52,6 @@
     mdiAccountBoxOutline,
     mdiAccountMultipleCheckOutline,
     mdiArrowLeft,
-    mdiCalendarEditOutline,
     mdiDotsVertical,
     mdiEyeOffOutline,
     mdiEyeOutline,
@@ -79,7 +80,6 @@
   let viewMode: PersonPageViewMode = $state(PersonPageViewMode.VIEW_ASSETS);
   let isEditingName = $state(false);
   let previousRoute: string = $state(AppRoute.EXPLORE);
-  let people: PersonResponseDto[] = [];
   let personMerge1: PersonResponseDto | undefined = $state();
   let personMerge2: PersonResponseDto | undefined = $state();
   let potentialMergePeople: PersonResponseDto[] = $state([]);
@@ -223,9 +223,8 @@
       return { merged: false };
     }
 
-    const [personToMerge, personToBeMergedInto] = result;
+    const [, personToBeMergedInto] = result;
 
-    people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
     if (personToBeMergedInto.name != personName && person.id === personToBeMergedInto.id) {
       await updateAssetCount();
       return { merged: true };
@@ -309,22 +308,6 @@
     await changeName();
   };
 
-  const handleSetBirthDate = async () => {
-    const updatedPerson = await modalManager.show(PersonEditBirthDateModal, { person });
-
-    if (!updatedPerson) {
-      return;
-    }
-
-    person = updatedPerson;
-    people = people.map((person: PersonResponseDto) => {
-      if (person.id === updatedPerson.id) {
-        return updatedPerson;
-      }
-      return person;
-    });
-  };
-
   const handleGoBack = async () => {
     viewMode = PersonPageViewMode.VIEW_ASSETS;
     if ($page.url.searchParams.has(QueryParameter.ACTION)) {
@@ -351,8 +334,18 @@
     timelineManager.removeAssets(assetIds);
     assetInteraction.clearMultiselect();
   };
+
+  const onPersonUpdate = (response: PersonResponseDto) => {
+    if (person.id === response.id) {
+      return (person = response);
+    }
+  };
+
+  const { SetDateOfBirth } = $derived(getPersonActions($t, person));
 </script>
 
+<OnEvents {onPersonUpdate} />
+
 <main
   class="relative z-0 h-dvh overflow-hidden px-2 md:px-6 md:pt-(--navbar-height-md) pt-(--navbar-height)"
   use:scrollMemoryClearer={{
@@ -535,7 +528,7 @@
               icon={person.isHidden ? mdiEyeOutline : mdiEyeOffOutline}
               onClick={() => toggleHidePerson()}
             />
-            <MenuOption text={$t('set_date_of_birth')} icon={mdiCalendarEditOutline} onClick={handleSetBirthDate} />
+            <ActionMenuItem action={SetDateOfBirth} />
             <MenuOption
               text={$t('merge_people')}
               icon={mdiAccountMultipleCheckOutline}