refactor(web): person service actions

* fixed indicators staying hidden

* remove logs

* explanation comment

* move import to correct place

* revert accidental change in null handling

mobile/lib/presentation/widgets/images/thumbnail_tile.widget.dart

@@ -6,6 +6,7 @@ import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/duration_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
 import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.dart';
@@ -47,6 +48,7 @@ class _ThumbnailTileState extends ConsumerState<ThumbnailTile> {
   Widget build(BuildContext context) {
     final asset = widget.asset;
     final heroIndex = widget.heroOffset ?? TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
+    final isCurrentAsset = ref.watch(assetViewerProvider.select((current) => current.currentAsset == asset));
 
     final assetContainerColor = context.isDarkTheme
         ? context.primaryColor.darken(amount: 0.4)
@@ -59,6 +61,10 @@ class _ThumbnailTileState extends ConsumerState<ThumbnailTile> {
     final bool storageIndicator =
         ref.watch(settingsProvider.select((s) => s.get(Setting.showStorageIndicator))) && widget.showStorageIndicator;
 
+    if (!isCurrentAsset) {
+      _hideIndicators = false;
+    }
+
     if (isSelected) {
       _showSelectionContainer = true;
     }
@@ -96,7 +102,11 @@ class _ThumbnailTileState extends ConsumerState<ThumbnailTile> {
               children: [
                 Positioned.fill(
                   child: Hero(
-                    tag: '${asset?.heroTag ?? ''}_$heroIndex',
+                    // This key resets the hero animation when the asset is changed in the asset viewer.
+                    // It doesn't seem like the best solution, and only works to reset the hero, not prime the hero of the new active asset for animation,
+                    // but other solutions have failed thus far.
+                    key: ValueKey(isCurrentAsset),
+                    tag: '${asset?.heroTag}_$heroIndex',
                     child: Thumbnail.fromAsset(asset: asset, size: widget.size),
                     // Placeholderbuilder used to hide indicators on first hero animation, since flightShuttleBuilder isn't called until both source and destination hero exist in widget tree.
                     placeholderBuilder: (context, heroSize, child) {

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

@@ -4,7 +4,13 @@ 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 {
+  mdiCalendarEditOutline,
+  mdiEyeOffOutline,
+  mdiEyeOutline,
+  mdiHeartMinusOutline,
+  mdiHeartOutline,
+} from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 
 export const getPersonActions = ($t: MessageFormatter, person: PersonResponseDto) => {
@@ -14,7 +20,83 @@ export const getPersonActions = ($t: MessageFormatter, person: PersonResponseDto
     onAction: () => modalManager.show(PersonEditBirthDateModal, { person }),
   };
 
-  return { SetDateOfBirth };
+  const Favorite: ActionItem = {
+    title: $t('to_favorite'),
+    icon: mdiHeartOutline,
+    $if: () => !person.isFavorite,
+    onAction: () => handleFavoritePerson(person),
+  };
+
+  const Unfavorite: ActionItem = {
+    title: $t('unfavorite'),
+    icon: mdiHeartMinusOutline,
+    $if: () => !!person.isFavorite,
+    onAction: () => handleUnfavoritePerson(person),
+  };
+
+  const HidePerson: ActionItem = {
+    title: $t('hide_person'),
+    icon: mdiEyeOffOutline,
+    $if: () => !person.isHidden,
+    onAction: () => handleHidePerson(person),
+  };
+
+  const ShowPerson: ActionItem = {
+    title: $t('unhide_person'),
+    icon: mdiEyeOutline,
+    $if: () => !!person.isHidden,
+    onAction: () => handleShowPerson(person),
+  };
+
+  return { SetDateOfBirth, Favorite, Unfavorite, HidePerson, ShowPerson };
+};
+
+const handleFavoritePerson = async (person: { id: string }) => {
+  const $t = await getFormatter();
+
+  try {
+    const response = await updatePerson({ id: person.id, personUpdateDto: { isFavorite: true } });
+    eventManager.emit('PersonUpdate', response);
+    toastManager.success($t('added_to_favorites'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: false } }));
+  }
+};
+
+const handleUnfavoritePerson = async (person: { id: string }) => {
+  const $t = await getFormatter();
+
+  try {
+    const response = await updatePerson({ id: person.id, personUpdateDto: { isFavorite: false } });
+    eventManager.emit('PersonUpdate', response);
+    toastManager.success($t('removed_from_favorites'));
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: false } }));
+  }
+};
+
+const handleHidePerson = async (person: { id: string }) => {
+  const $t = await getFormatter();
+
+  try {
+    const response = await updatePerson({ id: person.id, personUpdateDto: { isHidden: true } });
+    toastManager.success($t('changed_visibility_successfully'));
+    eventManager.emit('PersonUpdate', response);
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_hide_person'));
+  }
+};
+
+const handleShowPerson = async (person: { id: string }) => {
+  const $t = await getFormatter();
+
+  try {
+    const response = await updatePerson({ id: person.id, personUpdateDto: { isHidden: false } });
+    toastManager.success($t('changed_visibility_successfully'));
+    eventManager.emit('PersonUpdate', response);
+  } catch (error) {
+    handleError(error, $t('errors.something_went_wrong'));
+  }
 };
 
 export const handleUpdatePersonBirthDate = async (person: PersonResponseDto, birthDate: string) => {

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

@@ -4,7 +4,6 @@
   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';
@@ -42,16 +41,12 @@
   import { handleError } from '$lib/utils/handle-error';
   import { isExternalUrl } from '$lib/utils/navigation';
   import { AssetVisibility, searchPerson, updatePerson, type PersonResponseDto } from '@immich/sdk';
-  import { LoadingSpinner, modalManager, toastManager } from '@immich/ui';
+  import { ContextMenuButton, LoadingSpinner, modalManager, toastManager, type ActionItem } from '@immich/ui';
   import {
     mdiAccountBoxOutline,
     mdiAccountMultipleCheckOutline,
     mdiArrowLeft,
     mdiDotsVertical,
-    mdiEyeOffOutline,
-    mdiEyeOutline,
-    mdiHeartMinusOutline,
-    mdiHeartOutline,
     mdiPlus,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
@@ -144,37 +139,6 @@
     viewMode = PersonPageViewMode.UNASSIGN_ASSETS;
   };
 
-  const toggleHidePerson = async () => {
-    try {
-      await updatePerson({
-        id: person.id,
-        personUpdateDto: { isHidden: !person.isHidden },
-      });
-
-      toastManager.success($t('changed_visibility_successfully'));
-
-      await goto(previousRoute);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_hide_person'));
-    }
-  };
-
-  const handleToggleFavorite = async () => {
-    try {
-      const updatedPerson = await updatePerson({
-        id: person.id,
-        personUpdateDto: { isFavorite: !person.isFavorite },
-      });
-
-      // Invalidate to reload the page data and have the favorite status updated
-      await invalidateAll();
-
-      toastManager.success(updatedPerson.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'));
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: person.isFavorite } }));
-    }
-  };
-
   const handleMerge = async (person: PersonResponseDto) => {
     await updateAssetCount();
     await handleGoBack();
@@ -325,13 +289,35 @@
     assetInteraction.clearMultiselect();
   };
 
-  const onPersonUpdate = (response: PersonResponseDto) => {
-    if (person.id === response.id) {
-      return (person = response);
+  const onPersonUpdate = async (response: PersonResponseDto) => {
+    if (response.id !== person.id) {
+      return;
     }
+
+    if (response.isHidden) {
+      await goto(previousRoute);
+      return;
+    }
+
+    person = response;
   };
 
-  const { SetDateOfBirth } = $derived(getPersonActions($t, person));
+  const { SetDateOfBirth, Favorite, Unfavorite, HidePerson, ShowPerson } = $derived(getPersonActions($t, person));
+  const SelectFeaturePhoto: ActionItem = {
+    title: $t('select_featured_photo'),
+    icon: mdiAccountBoxOutline,
+    onAction: () => {
+      viewMode = PersonPageViewMode.SELECT_PERSON;
+    },
+  };
+
+  const Merge: ActionItem = {
+    title: $t('merge_people'),
+    icon: mdiAccountMultipleCheckOutline,
+    onAction: () => {
+      viewMode = PersonPageViewMode.MERGE_PEOPLE;
+    },
+  };
 </script>
 
 <OnEvents {onPersonUpdate} onAssetsDelete={updateAssetCount} onAssetsArchive={updateAssetCount} />
@@ -507,29 +493,10 @@
     {#if viewMode === PersonPageViewMode.VIEW_ASSETS}
       <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(previousRoute)}>
         {#snippet trailing()}
-          <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
-            <MenuOption
-              text={$t('select_featured_photo')}
-              icon={mdiAccountBoxOutline}
-              onClick={() => (viewMode = PersonPageViewMode.SELECT_PERSON)}
-            />
-            <MenuOption
-              text={person.isHidden ? $t('unhide_person') : $t('hide_person')}
-              icon={person.isHidden ? mdiEyeOutline : mdiEyeOffOutline}
-              onClick={() => toggleHidePerson()}
-            />
-            <ActionMenuItem action={SetDateOfBirth} />
-            <MenuOption
-              text={$t('merge_people')}
-              icon={mdiAccountMultipleCheckOutline}
-              onClick={() => (viewMode = PersonPageViewMode.MERGE_PEOPLE)}
-            />
-            <MenuOption
-              icon={person.isFavorite ? mdiHeartMinusOutline : mdiHeartOutline}
-              text={person.isFavorite ? $t('unfavorite') : $t('to_favorite')}
-              onClick={handleToggleFavorite}
-            />
-          </ButtonContextMenu>
+          <ContextMenuButton
+            items={[SelectFeaturePhoto, HidePerson, ShowPerson, SetDateOfBirth, Merge, Favorite, Unfavorite]}
+            aria-label={$t('open')}
+          />
         {/snippet}
       </ControlAppBar>
     {/if}