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}