chore(web): refactor activity status

e2e/src/ui/generators/timeline/rest-response.ts

@@ -284,11 +284,7 @@ const createDefaultOwner = (ownerId: string) => {
  * Convert a TimelineAssetConfig to a full AssetResponseDto
  * This matches the response from GET /api/assets/:id
  */
-export function toAssetResponseDto(
-  asset: MockTimelineAsset,
-  owner?: UserResponseDto,
-  overrides?: Partial<Pick<AssetResponseDto, 'people' | 'unassignedFaces'>>,
-): AssetResponseDto {
+export function toAssetResponseDto(asset: MockTimelineAsset, owner?: UserResponseDto): AssetResponseDto {
   const now = new Date().toISOString();
 
   // Default owner if not provided
@@ -342,8 +338,8 @@ export function toAssetResponseDto(
     exifInfo,
     livePhotoVideoId: asset.livePhotoVideoId,
     tags: [],
-    people: overrides?.people ?? [],
-    unassignedFaces: overrides?.unassignedFaces ?? [],
+    people: [],
+    unassignedFaces: [],
     stack: asset.stack,
     isOffline: false,
     hasMetadata: true,

e2e/src/ui/mock-network/face-editor-network.ts

@@ -1,9 +1,3 @@
-import {
-  type AssetFaceResponseDto,
-  type AssetFaceWithoutPersonResponseDto,
-  type AssetResponseDto,
-  type PersonWithFacesResponseDto,
-} from '@immich/sdk';
 import { BrowserContext } from '@playwright/test';
 import { randomThumbnail } from 'src/ui/generators/timeline';
 
@@ -131,117 +125,3 @@ export const setupFaceEditorMockApiRoutes = async (
     });
   });
 };
-
-export type MockFaceSpec = {
-  personId: string;
-  personName: string;
-  faceId: string;
-  boundingBoxX1: number;
-  boundingBoxY1: number;
-  boundingBoxX2: number;
-  boundingBoxY2: number;
-};
-
-export const createMockFaceData = (
-  faceSpecs: MockFaceSpec[],
-  imageWidth: number,
-  imageHeight: number,
-): { people: PersonWithFacesResponseDto[]; unassignedFaces: AssetFaceWithoutPersonResponseDto[] } => {
-  const people: PersonWithFacesResponseDto[] = faceSpecs.map((spec) => ({
-    id: spec.personId,
-    name: spec.personName,
-    birthDate: null,
-    isHidden: false,
-    thumbnailPath: `/upload/thumbs/${spec.personId}.jpeg`,
-    updatedAt: new Date().toISOString(),
-    faces: [
-      {
-        id: spec.faceId,
-        imageWidth,
-        imageHeight,
-        boundingBoxX1: spec.boundingBoxX1,
-        boundingBoxY1: spec.boundingBoxY1,
-        boundingBoxX2: spec.boundingBoxX2,
-        boundingBoxY2: spec.boundingBoxY2,
-      },
-    ],
-  }));
-
-  return { people, unassignedFaces: [] };
-};
-
-export const setupFaceOverlayMockApiRoutes = async (
-  context: BrowserContext,
-  assetDto: AssetResponseDto,
-  faceSpecs: MockFaceSpec[],
-) => {
-  const faceResponseMap = new Map<string, AssetFaceResponseDto>();
-  for (const spec of faceSpecs) {
-    faceResponseMap.set(spec.faceId, {
-      id: spec.faceId,
-      imageWidth: assetDto.width ?? 3000,
-      imageHeight: assetDto.height ?? 4000,
-      boundingBoxX1: spec.boundingBoxX1,
-      boundingBoxY1: spec.boundingBoxY1,
-      boundingBoxX2: spec.boundingBoxX2,
-      boundingBoxY2: spec.boundingBoxY2,
-      person: {
-        id: spec.personId,
-        name: spec.personName,
-        birthDate: null,
-        isHidden: false,
-        thumbnailPath: `/upload/thumbs/${spec.personId}.jpeg`,
-        updatedAt: new Date().toISOString(),
-      },
-    });
-  }
-
-  await context.route(`**/api/assets/${assetDto.id}`, async (route, request) => {
-    if (request.method() !== 'GET') {
-      return route.fallback();
-    }
-    return route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      json: assetDto,
-    });
-  });
-
-  await context.route(`**/api/faces?id=${assetDto.id}`, async (route, request) => {
-    if (request.method() !== 'GET') {
-      return route.fallback();
-    }
-    return route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      json: [...faceResponseMap.values()],
-    });
-  });
-
-  await context.route('**/api/faces/*', async (route, request) => {
-    if (request.method() !== 'DELETE') {
-      return route.fallback();
-    }
-    const url = new URL(request.url());
-    const faceId = url.pathname.split('/').at(-1);
-    if (faceId) {
-      faceResponseMap.delete(faceId);
-    }
-    return route.fulfill({
-      status: 200,
-      contentType: 'text/plain',
-      body: 'OK',
-    });
-  });
-
-  await context.route('**/api/people/*/thumbnail', async (route) => {
-    if (!route.request().serviceWorker()) {
-      return route.continue();
-    }
-    return route.fulfill({
-      status: 200,
-      headers: { 'content-type': 'image/jpeg' },
-      body: await randomThumbnail('person-thumb', 1),
-    });
-  });
-};

e2e/src/ui/specs/asset-viewer/face-overlay.e2e-spec.ts

@@ -1,60 +0,0 @@
-import { expect, test } from '@playwright/test';
-import { toAssetResponseDto } from 'src/ui/generators/timeline';
-import {
-  createMockFaceData,
-  type MockFaceSpec,
-  setupFaceOverlayMockApiRoutes,
-} from 'src/ui/mock-network/face-editor-network';
-import { assetViewerUtils } from '../timeline/utils';
-import { ensureDetailPanelVisible, setupAssetViewerFixture } from './utils';
-
-test.describe.configure({ mode: 'parallel' });
-
-test.describe('face removal auto-close', () => {
-  const fixture = setupAssetViewerFixture(903);
-  const singleFaceSpec: MockFaceSpec[] = [
-    {
-      personId: 'person-solo',
-      personName: 'Solo Person',
-      faceId: 'face-solo',
-      boundingBoxX1: 1000,
-      boundingBoxY1: 500,
-      boundingBoxX2: 1500,
-      boundingBoxY2: 1200,
-    },
-  ];
-
-  test.beforeEach(async ({ context }) => {
-    const faceData = createMockFaceData(
-      singleFaceSpec,
-      fixture.primaryAssetDto.width ?? 3000,
-      fixture.primaryAssetDto.height ?? 4000,
-    );
-    const assetDtoWithFaces = toAssetResponseDto(fixture.primaryAsset, undefined, faceData);
-    await setupFaceOverlayMockApiRoutes(context, assetDtoWithFaces, singleFaceSpec);
-  });
-
-  test('person side panel closes when last face is removed', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    await ensureDetailPanelVisible(page);
-
-    const editPeopleButton = page.locator('#detail-panel').getByLabel('Edit people');
-    await expect(editPeopleButton).toBeVisible();
-    await editPeopleButton.click();
-
-    const personName = page.locator('text=Solo Person');
-    await expect(personName.first()).toBeVisible({ timeout: 5000 });
-
-    const deleteButton = page.getByLabel('Delete face');
-    await expect(deleteButton).toBeVisible();
-    await deleteButton.click();
-
-    const confirmButton = page.getByRole('button', { name: /confirm/i });
-    await expect(confirmButton).toBeVisible();
-    await confirmButton.click();
-
-    await expect(page.locator('text=Edit faces')).toBeHidden({ timeout: 5000 });
-  });
-});

e2e/src/ui/specs/asset-viewer/stack-face-tag.e2e-spec.ts

@@ -1,100 +0,0 @@
-import { type AssetResponseDto } from '@immich/sdk';
-import { expect, test } from '@playwright/test';
-import { toAssetResponseDto } from 'src/ui/generators/timeline';
-import {
-  createMockStack,
-  createMockStackAsset,
-  MockStack,
-  setupBrokenAssetMockApiRoutes,
-} from 'src/ui/mock-network/broken-asset-network';
-import {
-  createMockPeople,
-  FaceCreateCapture,
-  MockPerson,
-  setupFaceEditorMockApiRoutes,
-} from 'src/ui/mock-network/face-editor-network';
-import { assetViewerUtils } from '../timeline/utils';
-import { ensureDetailPanelVisible, setupAssetViewerFixture } from './utils';
-
-test.describe.configure({ mode: 'parallel' });
-test.describe('stack face-tag selection preservation', () => {
-  const fixture = setupAssetViewerFixture(910);
-  let mockStack: MockStack;
-  let primaryAssetDto: AssetResponseDto;
-  let secondAssetDto: AssetResponseDto;
-  let mockPeople: MockPerson[];
-  let faceCreateCapture: FaceCreateCapture;
-
-  test.beforeAll(async () => {
-    primaryAssetDto = toAssetResponseDto(fixture.primaryAsset);
-    secondAssetDto = createMockStackAsset(fixture.adminUserId);
-    secondAssetDto.originalFileName = 'second-stacked-asset.jpg';
-    mockStack = createMockStack(primaryAssetDto, [secondAssetDto], new Set());
-    mockPeople = createMockPeople(3);
-  });
-
-  test.beforeEach(async ({ context }) => {
-    faceCreateCapture = { requests: [] };
-    await setupBrokenAssetMockApiRoutes(context, mockStack);
-    await setupFaceEditorMockApiRoutes(context, mockPeople, faceCreateCapture);
-  });
-
-  test('selected stacked asset is preserved after tagging a face', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const stackSlideshow = page.locator('#stack-slideshow');
-    await expect(stackSlideshow).toBeVisible();
-
-    const stackThumbnails = stackSlideshow.locator('[data-asset]');
-    await expect(stackThumbnails).toHaveCount(2);
-
-    await stackThumbnails.nth(1).click();
-
-    await ensureDetailPanelVisible(page);
-    await expect(page.locator('#detail-panel')).toContainText('second-stacked-asset.jpg');
-
-    await page.getByLabel('Tag people').click();
-    await page.locator('#face-selector').waitFor({ state: 'visible' });
-
-    await page.locator('#face-selector').getByText(mockPeople[0].name).click();
-
-    const confirmButton = page.getByRole('button', { name: /confirm/i });
-    await expect(confirmButton).toBeVisible();
-    await confirmButton.click();
-
-    await expect(page.locator('#face-selector')).toBeHidden();
-
-    expect(faceCreateCapture.requests).toHaveLength(1);
-    expect(faceCreateCapture.requests[0].assetId).toBe(secondAssetDto.id);
-
-    await expect(page.locator('#detail-panel')).toContainText('second-stacked-asset.jpg');
-
-    const selectedThumbnail = stackSlideshow.locator(`[data-asset="${secondAssetDto.id}"]`);
-    await expect(selectedThumbnail).toBeVisible();
-  });
-
-  test('primary asset stays selected after tagging a face without switching', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    await ensureDetailPanelVisible(page);
-    await expect(page.locator('#detail-panel')).toContainText(primaryAssetDto.originalFileName);
-
-    await page.getByLabel('Tag people').click();
-    await page.locator('#face-selector').waitFor({ state: 'visible' });
-
-    await page.locator('#face-selector').getByText(mockPeople[0].name).click();
-
-    const confirmButton = page.getByRole('button', { name: /confirm/i });
-    await expect(confirmButton).toBeVisible();
-    await confirmButton.click();
-
-    await expect(page.locator('#face-selector')).toBeHidden();
-
-    expect(faceCreateCapture.requests).toHaveLength(1);
-    expect(faceCreateCapture.requests[0].assetId).toBe(primaryAssetDto.id);
-
-    await expect(page.locator('#detail-panel')).toContainText(primaryAssetDto.originalFileName);
-  });
-});

web/src/lib/components/asset-viewer/activity-status.svelte

@@ -2,7 +2,7 @@
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import type { ActivityResponseDto } from '@immich/sdk';
-  import { Icon } from '@immich/ui';
+  import { Button } from '@immich/ui';
   import { mdiCommentOutline, mdiThumbUp, mdiThumbUpOutline } from '@mdi/js';
 
   interface Props {
@@ -16,21 +16,32 @@
   let { isLiked, numberOfComments, numberOfLikes, disabled, onFavorite }: Props = $props();
 </script>
 
-<div class="w-full flex p-4 items-center justify-center rounded-full gap-5 bg-subtle border bg-opacity-60">
-  <button type="button" class={disabled ? 'cursor-not-allowed' : ''} onclick={onFavorite} {disabled}>
-    <div class="flex gap-2 items-center justify-center">
-      <Icon icon={isLiked ? mdiThumbUp : mdiThumbUpOutline} size="24" class={isLiked ? 'text-primary' : 'text-fg'} />
-      {#if numberOfLikes}
-        <div class="text-l">{numberOfLikes.toLocaleString($locale)}</div>
-      {/if}
-    </div>
-  </button>
-  <button type="button" onclick={() => assetViewerManager.toggleActivityPanel()}>
-    <div class="flex gap-2 items-center justify-center">
-      <Icon icon={mdiCommentOutline} class="scale-x-[-1]" size="24" />
-      {#if numberOfComments}
-        <div class="text-l">{numberOfComments.toLocaleString($locale)}</div>
-      {/if}
-    </div>
-  </button>
+<div class="flex p-1 items-center justify-center rounded-full gap-1 bg-subtle/70 border">
+  <Button
+    {disabled}
+    onclick={onFavorite}
+    leadingIcon={isLiked ? mdiThumbUp : mdiThumbUpOutline}
+    shape="round"
+    size="large"
+    variant="ghost"
+    color={isLiked ? 'primary' : 'secondary'}
+    class="p-3"
+  >
+    {#if numberOfLikes}
+      {numberOfLikes.toLocaleString($locale)}
+    {/if}
+  </Button>
+  <Button
+    onclick={() => assetViewerManager.toggleActivityPanel()}
+    leadingIcon={mdiCommentOutline}
+    shape="round"
+    size="large"
+    variant="ghost"
+    color="secondary"
+    class="p-3"
+  >
+    {#if numberOfComments}
+      {numberOfComments.toLocaleString($locale)}
+    {/if}
+  </Button>
 </div>

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -10,7 +10,6 @@
   import { AssetAction, ProjectionType } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
@@ -101,11 +100,10 @@
   const stackThumbnailSize = 60;
   const stackSelectedThumbnailSize = 65;
 
-  let stack: StackResponseDto | undefined = $state();
-  let selectedStackAsset: AssetResponseDto | undefined = $state();
   let previewStackedAsset: AssetResponseDto | undefined = $state();
+  let stack: StackResponseDto | null = $state(null);
 
-  const asset = $derived(previewStackedAsset ?? selectedStackAsset ?? cursor.current);
+  const asset = $derived(previewStackedAsset ?? cursor.current);
   const nextAsset = $derived(cursor.nextAsset);
   const previousAsset = $derived(cursor.previousAsset);
   let sharedLink = getSharedLink();
@@ -118,25 +116,17 @@
     playOriginalVideo = value;
   };
 
-  const selectStackedAsset = async (id: string) => {
-    selectedStackAsset = await assetCacheManager.getAsset({ id });
-  };
-
   const refreshStack = async () => {
     if (authManager.isSharedLink || !withStacked) {
       return;
     }
 
-    if (!cursor.current.stack) {
-      stack = undefined;
-      selectedStackAsset = undefined;
-      return;
+    if (asset.stack) {
+      stack = await getStack({ id: asset.stack.id });
     }
 
-    stack = await getStack({ id: cursor.current.stack.id });
-    const primaryAsset = stack?.assets.find(({ id }) => id === stack?.primaryAssetId);
-    if (primaryAsset) {
-      await selectStackedAsset(primaryAsset.id);
+    if (!stack?.assets.some(({ id }) => id === asset.id)) {
+      stack = null;
     }
   };
 
@@ -194,21 +184,11 @@
     onClose?.(asset);
   };
 
-  const refreshPreservingSelection = async () => {
-    const id = asset.id;
-    assetCacheManager.invalidateAsset(id);
-    if (selectedStackAsset) {
-      await selectStackedAsset(id);
-    } else {
-      const asset = await assetCacheManager.getAsset({ id });
-      assetViewingStore.setAsset(asset);
-    }
-    onAssetChange?.(asset);
-  };
-
   const closeEditor = async () => {
     if (editManager.hasAppliedEdits) {
-      await refreshPreservingSelection();
+      const refreshedAsset = await getAssetInfo({ id: asset.id });
+      onAssetChange?.(refreshedAsset);
+      assetViewingStore.setAsset(refreshedAsset);
     }
     assetViewerManager.closeEditor();
   };
@@ -308,6 +288,10 @@
     }
   };
 
+  const handleStackedAssetMouseEvent = (isMouseOver: boolean, stackedAsset: AssetResponseDto) => {
+    previewStackedAsset = isMouseOver ? stackedAsset : undefined;
+  };
+
   const handlePreAction = (action: Action) => {
     preAction?.(action);
   };
@@ -320,7 +304,7 @@
         break;
       }
       case AssetAction.REMOVE_ASSET_FROM_STACK: {
-        stack = action.stack ?? undefined;
+        stack = action.stack;
         if (stack) {
           cursor.current = stack.assets[0];
         }
@@ -387,7 +371,7 @@
 
   $effect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    cursor.current;
+    asset;
     untrack(() => handlePromiseError(refresh()));
   });
 
@@ -551,12 +535,7 @@
     {:else if viewerKind === 'CropArea'}
       <CropArea {asset} />
     {:else if viewerKind === 'PhotoViewer'}
-      <PhotoViewer
-        cursor={{ ...cursor, current: asset }}
-        {sharedLink}
-        {onSwipe}
-        onTagFace={refreshPreservingSelection}
-      />
+      <PhotoViewer cursor={{ ...cursor, current: asset }} {sharedLink} {onSwipe} />
     {:else if viewerKind === 'VideoViewer'}
       <VideoViewer
         {asset}
@@ -606,7 +585,7 @@
     >
       {#if showDetailPanel}
         <div class="w-90 h-full">
-          <DetailPanel {asset} currentAlbum={album} onRefreshPeople={refreshPreservingSelection} />
+          <DetailPanel {asset} currentAlbum={album} />
         </div>
       {:else if assetViewerManager.isShowEditor}
         <div class="w-100 h-full">
@@ -619,14 +598,10 @@
   {#if stack && withStacked && !assetViewerManager.isShowEditor}
     {@const stackedAssets = stack.assets}
     <div id="stack-slideshow" class="absolute bottom-0 w-full col-span-4 col-start-1 pointer-events-none">
-      <div
-        role="presentation"
-        class="relative flex flex-row no-wrap overflow-x-auto overflow-y-hidden horizontal-scrollbar pointer-events-auto"
-        onmouseleave={() => (previewStackedAsset = undefined)}
-      >
+      <div class="relative flex flex-row no-wrap overflow-x-auto overflow-y-hidden horizontal-scrollbar">
         {#each stackedAssets as stackedAsset (stackedAsset.id)}
           <div
-            class={['inline-block px-1 relative transition-all pb-2']}
+            class={['inline-block px-1 relative transition-all pb-2 pointer-events-auto']}
             style:bottom={stackedAsset.id === asset.id ? '0' : '-10px'}
           >
             <Thumbnail
@@ -634,25 +609,22 @@
               brokenAssetClass="text-xs"
               dimmed={stackedAsset.id !== asset.id}
               asset={toTimelineAsset(stackedAsset)}
-              onClick={async () => {
-                await selectStackedAsset(stackedAsset.id);
+              onClick={() => {
+                cursor.current = stackedAsset;
                 previewStackedAsset = undefined;
               }}
-              onMouseEvent={async ({ isMouseOver }) => {
-                if (isMouseOver) {
-                  previewStackedAsset = stackedAsset;
-                  previewStackedAsset = await assetCacheManager.getAsset({ id: stackedAsset.id });
-                }
-              }}
+              onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}
               readonly
               thumbnailSize={stackedAsset.id === asset.id ? stackSelectedThumbnailSize : stackThumbnailSize}
               showStackedIcon={false}
               disableLinkMouseOver
             />
 
-            <div class="w-full flex place-items-center place-content-center">
-              <div class={['w-2 h-2 rounded-full flex mt-0.5', { 'bg-white': stackedAsset.id === asset.id }]}></div>
-            </div>
+            {#if stackedAsset.id === asset.id}
+              <div class="w-full flex place-items-center place-content-center">
+                <div class="w-2 h-2 bg-white rounded-full flex mt-0.5"></div>
+              </div>
+            {/if}
           </div>
         {/each}
       </div>

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -20,7 +20,13 @@
   import { handleError } from '$lib/utils/handle-error';
   import { fromISODateTime, fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
   import { getParentPath } from '$lib/utils/tree-utils';
-  import { AssetMediaSize, getAllAlbums, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
+  import {
+    AssetMediaSize,
+    getAllAlbums,
+    getAssetInfo,
+    type AlbumResponseDto,
+    type AssetResponseDto,
+  } from '@immich/sdk';
   import { Icon, IconButton, LoadingSpinner, modalManager, Text } from '@immich/ui';
   import {
     mdiCalendar,
@@ -46,10 +52,9 @@
   interface Props {
     asset: AssetResponseDto;
     currentAlbum?: AlbumResponseDto | null;
-    onRefreshPeople?: () => Promise<void>;
   }
 
-  let { asset, currentAlbum = null, onRefreshPeople }: Props = $props();
+  let { asset, currentAlbum = null }: Props = $props();
 
   let showAssetPath = $state(false);
   let showEditFaces = $state(false);
@@ -115,6 +120,11 @@
     return undefined;
   };
 
+  const handleRefreshPeople = async () => {
+    asset = await getAssetInfo({ id: asset.id });
+    showEditFaces = false;
+  };
+
   const getAssetFolderHref = (asset: AssetResponseDto) => {
     // Remove the last part of the path to get the parent path
     return Route.folders({ path: getParentPath(asset.originalPath) });
@@ -565,6 +575,6 @@
     assetId={asset.id}
     assetType={asset.type}
     onClose={() => (showEditFaces = false)}
-    onRefresh={() => void onRefreshPeople?.()}
+    onRefresh={handleRefreshPeople}
   />
 {/if}

web/src/lib/components/asset-viewer/face-editor/face-editor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { getNaturalSize, scaleToFit } from '$lib/utils/container-utils';
@@ -16,10 +17,9 @@
     containerWidth: number;
     containerHeight: number;
     assetId: string;
-    onTagFace?: () => Promise<void>;
   }
 
-  let { htmlElement, containerWidth, containerHeight, assetId, onTagFace }: Props = $props();
+  let { htmlElement, containerWidth, containerHeight, assetId }: Props = $props();
 
   let canvasEl: HTMLCanvasElement | undefined = $state();
   let canvas: Canvas | undefined = $state();
@@ -280,7 +280,7 @@
         },
       });
 
-      await onTagFace?.();
+      await assetViewingStore.setAssetId(assetId);
     } catch (error) {
       handleError(error, 'Error tagging face');
     } finally {

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -32,10 +32,9 @@
     onReady?: () => void;
     onError?: () => void;
     onSwipe?: (event: SwipeCustomEvent) => void;
-    onTagFace?: () => Promise<void>;
   }
 
-  let { cursor, element = $bindable(), sharedLink, onReady, onError, onSwipe, onTagFace }: Props = $props();
+  let { cursor, element = $bindable(), sharedLink, onReady, onError, onSwipe }: Props = $props();
 
   const { slideshowState, slideshowLook } = slideshowStore;
   const asset = $derived(cursor.current);
@@ -267,12 +266,6 @@
   </AdaptiveImage>
 
   {#if isFaceEditMode.value && assetViewerManager.imgRef}
-    <FaceEditor
-      htmlElement={assetViewerManager.imgRef}
-      {containerWidth}
-      {containerHeight}
-      assetId={asset.id}
-      {onTagFace}
-    />
+    <FaceEditor htmlElement={assetViewerManager.imgRef} {containerWidth} {containerHeight} assetId={asset.id} />
   {/if}
 </div>

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import OnEvents from '$lib/components/OnEvents.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
@@ -25,6 +25,7 @@
   import { fly } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import AssignFaceSidePanel from './assign-face-side-panel.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
 
   interface Props {
     assetId: string;
@@ -178,10 +179,7 @@
 
       peopleWithFaces = peopleWithFaces.filter((f) => f.id !== face.id);
 
-      onRefresh();
-      if (peopleWithFaces.length === 0) {
-        onClose();
-      }
+      await assetViewingStore.setAssetId(assetId);
     } catch (error) {
       handleError(error, $t('error_delete_face'));
     }

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

@@ -437,8 +437,8 @@
         {/if}
       </Timeline>
 
-      {#if showActivityStatus && !activityManager.isLoading}
-        <div class="absolute z-2 bottom-0 end-0 mb-6 me-6 justify-self-end">
+      {#if showActivityStatus}
+        <div class="absolute z-2 bottom-0 end-0 mb-6 me-12">
           <ActivityStatus
             disabled={!album.isActivityEnabled}
             isLiked={activityManager.isLiked}