fix(web): preserve stacked asset selection when tagging faces

.github/workflows/check-openapi.yml

@@ -24,7 +24,7 @@ jobs:
           persist-credentials: false
 
       - name: Check for breaking API changes
-        uses: oasdiff/oasdiff-action/breaking@748daafaf3aac877a36307f842a48d55db938ac8 # v0.0.31
+        uses: oasdiff/oasdiff-action/breaking@65fef71494258f00f911d7a71edb0482c5378899 # v0.0.30
         with:
           base: https://raw.githubusercontent.com/${{ github.repository }}/main/open-api/immich-openapi-specs.json
           revision: open-api/immich-openapi-specs.json

.github/workflows/cli.yml

@@ -42,10 +42,10 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './cli/.nvmrc'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/codeql-analysis.yml

@@ -57,7 +57,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
+        uses: github/codeql-action/init@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -70,7 +70,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
+        uses: github/codeql-action/autobuild@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -83,6 +83,6 @@ jobs:
       #   ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
+        uses: github/codeql-action/analyze@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
         with:
           category: '/language:${{matrix.language}}'

.github/workflows/docs-build.yml

@@ -67,10 +67,10 @@ jobs:
           fetch-depth: 0
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './docs/.nvmrc'
           cache: 'pnpm'

.github/workflows/fix-format.yml

@@ -29,10 +29,10 @@ jobs:
           persist-credentials: true
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'

.github/workflows/prepare-release.yml

@@ -63,13 +63,13 @@ jobs:
           ref: main
 
       - name: Install uv
-        uses: astral-sh/setup-uv@6ee6290f1cbc4156c0bdd66691b2c144ef8df19a # v7.4.0
+        uses: astral-sh/setup-uv@eac588ad8def6316056a12d4907a9d4d84ff7a3b # v7.3.0
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'

.github/workflows/sdk.yml

@@ -30,10 +30,10 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './open-api/typescript-sdk/.nvmrc'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/test.yml

@@ -75,9 +75,9 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -119,9 +119,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './cli/.nvmrc'
           cache: 'pnpm'
@@ -166,9 +166,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './cli/.nvmrc'
           cache: 'pnpm'
@@ -208,9 +208,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -252,9 +252,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -290,9 +290,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -338,9 +338,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -385,9 +385,9 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -424,9 +424,9 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -496,9 +496,9 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -620,7 +620,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Install uv
-        uses: astral-sh/setup-uv@6ee6290f1cbc4156c0bdd66691b2c144ef8df19a # v7.4.0
+        uses: astral-sh/setup-uv@eac588ad8def6316056a12d4907a9d4d84ff7a3b # v7.3.0
         with:
           python-version: 3.11
       - name: Install dependencies
@@ -661,9 +661,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './.github/.nvmrc'
           cache: 'pnpm'
@@ -712,9 +712,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -774,9 +774,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'

cli/src/utils.ts

@@ -81,7 +81,7 @@ export const connect = async (url: string, key: string) => {
 
   const [error] = await withError(getMyUser());
   if (isHttpError(error)) {
-    logError(error, `Failed to connect to server ${url}`);
+    logError(error, 'Failed to connect to server');
     process.exit(1);
   }
 

e2e/src/specs/web/photo-viewer.e2e-spec.ts

@@ -64,17 +64,17 @@ test.describe('Photo Viewer', () => {
     await expect(original).toHaveAttribute('src', /fullsize/);
   });
 
-  test('right-click targets the img element', async ({ page }) => {
+  test('reloads photo when checksum changes', async ({ page }) => {
     await page.goto(`/photos/${asset.id}`);
 
     const preview = page.getByTestId('preview').filter({ visible: true });
     await expect(preview).toHaveAttribute('src', /.+/);
+    const initialSrc = await preview.getAttribute('src');
 
-    const box = await preview.boundingBox();
-    const tagAtCenter = await page.evaluate(({ x, y }) => document.elementFromPoint(x, y)?.tagName, {
-      x: box!.x + box!.width / 2,
-      y: box!.y + box!.height / 2,
-    });
-    expect(tagAtCenter).toBe('IMG');
+    const websocketEvent = utils.waitForWebsocketEvent({ event: 'assetUpdate', id: asset.id });
+    await utils.replaceAsset(admin.accessToken, asset.id);
+    await websocketEvent;
+
+    await expect(preview).not.toHaveAttribute('src', initialSrc!);
   });
 });

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

@@ -284,7 +284,11 @@ 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): AssetResponseDto {
+export function toAssetResponseDto(
+  asset: MockTimelineAsset,
+  owner?: UserResponseDto,
+  overrides?: Partial<Pick<AssetResponseDto, 'people' | 'unassignedFaces'>>,
+): AssetResponseDto {
   const now = new Date().toISOString();
 
   // Default owner if not provided
@@ -338,8 +342,8 @@ export function toAssetResponseDto(asset: MockTimelineAsset, owner?: UserRespons
     exifInfo,
     livePhotoVideoId: asset.livePhotoVideoId,
     tags: [],
-    people: [],
-    unassignedFaces: [],
+    people: overrides?.people ?? [],
+    unassignedFaces: overrides?.unassignedFaces ?? [],
     stack: asset.stack,
     isOffline: false,
     hasMetadata: true,

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

@@ -1,3 +1,9 @@
+import {
+  type AssetFaceResponseDto,
+  type AssetFaceWithoutPersonResponseDto,
+  type AssetResponseDto,
+  type PersonWithFacesResponseDto,
+} from '@immich/sdk';
 import { BrowserContext } from '@playwright/test';
 import { randomThumbnail } from 'src/ui/generators/timeline';
 
@@ -125,3 +131,117 @@ 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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,100 @@
+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);
+  });
+});

e2e/src/utils.ts

@@ -375,6 +375,40 @@ export const utils = {
     return body as AssetMediaResponseDto;
   },
 
+  replaceAsset: async (
+    accessToken: string,
+    assetId: string,
+    dto?: Partial<Omit<AssetMediaCreateDto, 'assetData'>> & { assetData?: FileData },
+  ) => {
+    const _dto = {
+      deviceAssetId: 'test-1',
+      deviceId: 'test',
+      fileCreatedAt: new Date().toISOString(),
+      fileModifiedAt: new Date().toISOString(),
+      ...dto,
+    };
+
+    const assetData = dto?.assetData?.bytes || makeRandomImage();
+    const filename = dto?.assetData?.filename || 'example.png';
+
+    if (dto?.assetData?.bytes) {
+      console.log(`Uploading ${filename}`);
+    }
+
+    const builder = request(app)
+      .put(`/assets/${assetId}/original`)
+      .attach('assetData', assetData, filename)
+      .set('Authorization', `Bearer ${accessToken}`);
+
+    for (const [key, value] of Object.entries(_dto)) {
+      void builder.field(key, String(value));
+    }
+
+    const { body } = await builder;
+
+    return body as AssetMediaResponseDto;
+  },
+
   createImageFile: (path: string) => {
     if (!existsSync(dirname(path))) {
       mkdirSync(dirname(path), { recursive: true });

i18n/en.json

@@ -1651,7 +1651,6 @@
   "only_favorites": "Only favorites",
   "open": "Open",
   "open_calendar": "Open calendar",
-  "open_in_browser": "Open in browser",
   "open_in_map_view": "Open in map view",
   "open_in_openstreetmap": "Open in OpenStreetMap",
   "open_the_search_filters": "Open the search filters",

mobile/lib/presentation/widgets/action_buttons/archive_action_button.widget.dart

@@ -14,13 +14,13 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 Future<void> performArchiveAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
+  final result = await ref.read(actionProvider.notifier).archive(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
-  final result = await ref.read(actionProvider.notifier).archive(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   final successMessage = 'archive_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
   if (context.mounted) {

mobile/lib/presentation/widgets/action_buttons/delete_action_button.widget.dart

@@ -57,13 +57,13 @@ class DeleteActionButton extends ConsumerWidget {
       if (confirm != true) return;
     }
 
+    final result = await ref.read(actionProvider.notifier).trashRemoteAndDeleteLocal(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
-    final result = await ref.read(actionProvider.notifier).trashRemoteAndDeleteLocal(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
     final successMessage = 'delete_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
     if (context.mounted) {

mobile/lib/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart

@@ -35,13 +35,13 @@ class DeletePermanentActionButton extends ConsumerWidget {
         false;
     if (!confirm) return;
 
+    final result = await ref.read(actionProvider.notifier).deleteRemoteAndLocal(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
-    final result = await ref.read(actionProvider.notifier).deleteRemoteAndLocal(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
     final successMessage = 'delete_permanently_action_prompt'.t(
       context: context,
       args: {'count': result.count.toString()},

mobile/lib/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart

@@ -14,13 +14,13 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 Future<void> performMoveToLockFolderAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
+  final result = await ref.read(actionProvider.notifier).moveToLockFolder(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
-  final result = await ref.read(actionProvider.notifier).moveToLockFolder(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   final successMessage = 'move_to_lock_folder_action_prompt'.t(
     context: context,
     args: {'count': result.count.toString()},

mobile/lib/presentation/widgets/action_buttons/open_in_browser_action_button.widget.dart

@@ -1,61 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/domain/models/store.model.dart';
-import 'package:immich_mobile/domain/services/timeline.service.dart';
-import 'package:immich_mobile/entities/store.entity.dart';
-import 'package:immich_mobile/extensions/translate_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
-import 'package:url_launcher/url_launcher.dart';
-
-class OpenInBrowserActionButton extends ConsumerWidget {
-  final String remoteId;
-  final TimelineOrigin origin;
-  final bool iconOnly;
-  final bool menuItem;
-  final Color? iconColor;
-
-  const OpenInBrowserActionButton({
-    super.key,
-    required this.remoteId,
-    required this.origin,
-    this.iconOnly = false,
-    this.menuItem = false,
-    this.iconColor,
-  });
-
-  void _onTap() async {
-    final serverEndpoint = Store.get(StoreKey.serverEndpoint).replaceFirst('/api', '');
-
-    String originPath = '';
-    switch (origin) {
-      case TimelineOrigin.favorite:
-        originPath = '/favorites';
-        break;
-      case TimelineOrigin.trash:
-        originPath = '/trash';
-        break;
-      case TimelineOrigin.archive:
-        originPath = '/archive';
-        break;
-      default:
-        break;
-    }
-
-    final url = '$serverEndpoint$originPath/photos/$remoteId';
-    if (await canLaunchUrl(Uri.parse(url))) {
-      await launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication);
-    }
-  }
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return BaseActionButton(
-      label: 'open_in_browser'.t(context: context),
-      iconData: Icons.open_in_browser,
-      iconColor: iconColor,
-      iconOnly: iconOnly,
-      menuItem: menuItem,
-      onPressed: _onTap,
-    );
-  }
-}

mobile/lib/presentation/widgets/action_buttons/remove_from_album_action_button.widget.dart

@@ -29,13 +29,13 @@ class RemoveFromAlbumActionButton extends ConsumerWidget {
       return;
     }
 
+    final result = await ref.read(actionProvider.notifier).removeFromAlbum(source, albumId);
+    ref.read(multiSelectProvider.notifier).reset();
+
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
-    final result = await ref.read(actionProvider.notifier).removeFromAlbum(source, albumId);
-    ref.read(multiSelectProvider.notifier).reset();
-
     final successMessage = 'remove_from_album_action_prompt'.t(
       context: context,
       args: {'count': result.count.toString()},

mobile/lib/presentation/widgets/action_buttons/trash_action_button.widget.dart

@@ -25,13 +25,13 @@ class TrashActionButton extends ConsumerWidget {
       return;
     }
 
+    final result = await ref.read(actionProvider.notifier).trash(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
-    final result = await ref.read(actionProvider.notifier).trash(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
     final successMessage = 'trash_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
     if (context.mounted) {

mobile/lib/presentation/widgets/action_buttons/unarchive_action_button.widget.dart

@@ -16,13 +16,13 @@ import 'package:immich_mobile/domain/utils/event_stream.dart';
 Future<void> performUnArchiveAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
+  final result = await ref.read(actionProvider.notifier).unArchive(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
-  final result = await ref.read(actionProvider.notifier).unArchive(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   final successMessage = 'unarchive_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
   if (context.mounted) {

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -81,17 +81,19 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   late final _preloader = AssetPreloader(timelineService: ref.read(timelineServiceProvider), mounted: () => mounted);
 
   late int _currentPage = widget.initialIndex;
-  late int _totalAssets = ref.read(timelineServiceProvider).totalAssets;
 
   StreamSubscription? _reloadSubscription;
   KeepAliveLink? _stackChildrenKeepAlive;
 
+  bool _assetReloadRequested = false;
+
   void _onTapNavigate(int direction) {
     final page = _pageController.page?.toInt();
     if (page == null) return;
     final target = page + direction;
-    final maxPage = _totalAssets - 1;
+    final maxPage = ref.read(timelineServiceProvider).totalAssets - 1;
     if (target >= 0 && target <= maxPage) {
+      _currentPage = target;
       _pageController.jumpToPage(target);
       _onAssetChanged(target);
     }
@@ -139,6 +141,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
     final page = _pageController.page?.round();
     if (page != null && page != _currentPage) {
+      _currentPage = page;
       _onAssetChanged(page);
     }
     return false;
@@ -150,9 +153,8 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   }
 
   void _onAssetChanged(int index) async {
-    _currentPage = index;
-
-    final asset = await ref.read(timelineServiceProvider).getAssetAsync(index);
+    final timelineService = ref.read(timelineServiceProvider);
+    final asset = await timelineService.getAssetAsync(index);
     if (asset == null) return;
 
     AssetViewer._setAsset(ref, asset);
@@ -191,20 +193,11 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       case TimelineReloadEvent():
         _onTimelineReloadEvent();
       case ViewerReloadAssetEvent():
-        _onViewerReloadEvent();
+        _assetReloadRequested = true;
       default:
     }
   }
 
-  void _onViewerReloadEvent() {
-    if (_totalAssets <= 1) return;
-
-    final index = _pageController.page?.round() ?? 0;
-    final target = index >= _totalAssets - 1 ? index - 1 : index + 1;
-    _pageController.animateToPage(target, duration: Durations.medium1, curve: Curves.easeInOut);
-    _onAssetChanged(target);
-  }
-
   void _onTimelineReloadEvent() {
     final timelineService = ref.read(timelineServiceProvider);
     final totalAssets = timelineService.totalAssets;
@@ -214,24 +207,43 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       return;
     }
 
+    var index = _pageController.page?.round() ?? 0;
     final currentAsset = ref.read(assetViewerProvider).currentAsset;
-    final assetIndex = currentAsset != null ? timelineService.getIndex(currentAsset.heroTag) : null;
-    final index = (assetIndex ?? _currentPage).clamp(0, totalAssets - 1);
+    if (currentAsset != null) {
+      final newIndex = timelineService.getIndex(currentAsset.heroTag);
+      if (newIndex != null && newIndex != index) {
+        index = newIndex;
+        _currentPage = index;
+        _pageController.jumpToPage(index);
+      }
+    }
 
-    if (index != _currentPage) {
+    if (index >= totalAssets) {
+      index = totalAssets - 1;
+      _currentPage = index;
       _pageController.jumpToPage(index);
-      _onAssetChanged(index);
-    } else if (currentAsset != null && assetIndex == null) {
-      _onAssetChanged(index);
     }
 
-    if (_totalAssets != totalAssets) {
-      setState(() {
-        _totalAssets = totalAssets;
-      });
+    if (_assetReloadRequested) {
+      _assetReloadRequested = false;
+      _onAssetReloadEvent(index);
     }
   }
 
+  void _onAssetReloadEvent(int index) async {
+    final timelineService = ref.read(timelineServiceProvider);
+
+    final newAsset = await timelineService.getAssetAsync(index);
+    if (newAsset == null) return;
+
+    final currentAsset = ref.read(assetViewerProvider).currentAsset;
+
+    // Do not reload if the asset has not changed
+    if (newAsset.heroTag == currentAsset?.heroTag) return;
+
+    _onAssetChanged(index);
+  }
+
   void _setSystemUIMode(bool controls, bool details) {
     final mode = !controls || (CurrentPlatform.isIOS && details)
         ? SystemUiMode.immersiveSticky
@@ -289,7 +301,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
                     : CurrentPlatform.isIOS
                     ? const FastScrollPhysics()
                     : const FastClampingScrollPhysics(),
-                itemCount: _totalAssets,
+                itemCount: ref.read(timelineServiceProvider).totalAssets,
                 itemBuilder: (context, index) =>
                     AssetPage(index: index, heroOffset: _heroOffset, onTapNavigate: _onTapNavigate),
               ),

mobile/lib/utils/action_button.utils.dart

@@ -18,7 +18,6 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permane
 import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/like_activity_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/open_in_browser_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_album_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_lock_folder_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/set_album_cover.widget.dart';
@@ -76,7 +75,6 @@ enum ActionButtonType {
   viewInTimeline,
   download,
   upload,
-  openInBrowser,
   unstack,
   archive,
   unarchive,
@@ -151,7 +149,6 @@ enum ActionButtonType {
         context.isOwner && //
             !context.isInLockedView && //
             context.isStacked,
-      ActionButtonType.openInBrowser => context.asset.hasRemote && !context.isInLockedView,
       ActionButtonType.likeActivity =>
         !context.isInLockedView &&
             context.currentAlbum != null &&
@@ -239,13 +236,6 @@ enum ActionButtonType {
       ),
       ActionButtonType.likeActivity => LikeActivityActionButton(iconOnly: iconOnly, menuItem: menuItem),
       ActionButtonType.unstack => UnStackActionButton(source: context.source, iconOnly: iconOnly, menuItem: menuItem),
-      ActionButtonType.openInBrowser => OpenInBrowserActionButton(
-        remoteId: context.asset.remoteId!,
-        origin: context.timelineOrigin,
-        iconOnly: iconOnly,
-        menuItem: menuItem,
-        iconColor: context.originalTheme?.iconTheme.color,
-      ),
       ActionButtonType.similarPhotos => SimilarPhotosActionButton(
         assetId: (context.asset as RemoteAsset).id,
         iconOnly: iconOnly,

mobile/openapi/README.md

@@ -113,6 +113,7 @@ Class | Method | HTTP request | Description
 *AssetsApi* | [**getRandom**](doc//AssetsApi.md#getrandom) | **GET** /assets/random | Get random assets
 *AssetsApi* | [**playAssetVideo**](doc//AssetsApi.md#playassetvideo) | **GET** /assets/{id}/video/playback | Play asset video
 *AssetsApi* | [**removeAssetEdits**](doc//AssetsApi.md#removeassetedits) | **DELETE** /assets/{id}/edits | Remove edits from an existing asset
+*AssetsApi* | [**replaceAsset**](doc//AssetsApi.md#replaceasset) | **PUT** /assets/{id}/original | Replace asset
 *AssetsApi* | [**runAssetJobs**](doc//AssetsApi.md#runassetjobs) | **POST** /assets/jobs | Run an asset job
 *AssetsApi* | [**updateAsset**](doc//AssetsApi.md#updateasset) | **PUT** /assets/{id} | Update an asset
 *AssetsApi* | [**updateAssetMetadata**](doc//AssetsApi.md#updateassetmetadata) | **PUT** /assets/{id}/metadata | Update asset metadata
@@ -148,6 +149,7 @@ Class | Method | HTTP request | Description
 *DeprecatedApi* | [**getFullSyncForUser**](doc//DeprecatedApi.md#getfullsyncforuser) | **POST** /sync/full-sync | Get full sync for user
 *DeprecatedApi* | [**getQueuesLegacy**](doc//DeprecatedApi.md#getqueueslegacy) | **GET** /jobs | Retrieve queue counts and status
 *DeprecatedApi* | [**getRandom**](doc//DeprecatedApi.md#getrandom) | **GET** /assets/random | Get random assets
+*DeprecatedApi* | [**replaceAsset**](doc//DeprecatedApi.md#replaceasset) | **PUT** /assets/{id}/original | Replace asset
 *DeprecatedApi* | [**runQueueCommandLegacy**](doc//DeprecatedApi.md#runqueuecommandlegacy) | **PUT** /jobs/{name} | Run jobs
 *DownloadApi* | [**downloadArchive**](doc//DownloadApi.md#downloadarchive) | **POST** /download/archive | Download asset archive
 *DownloadApi* | [**getDownloadInfo**](doc//DownloadApi.md#getdownloadinfo) | **POST** /download/info | Retrieve download information

mobile/openapi/lib/api/assets_api.dart

@@ -1115,6 +1115,154 @@ class AssetsApi {
     }
   }
 
+  /// Replace asset
+  ///
+  /// Replace the asset with new file, without changing its id.
+  ///
+  /// Note: This method returns the HTTP [Response].
+  ///
+  /// Parameters:
+  ///
+  /// * [String] id (required):
+  ///
+  /// * [MultipartFile] assetData (required):
+  ///   Asset file data
+  ///
+  /// * [String] deviceAssetId (required):
+  ///   Device asset ID
+  ///
+  /// * [String] deviceId (required):
+  ///   Device ID
+  ///
+  /// * [DateTime] fileCreatedAt (required):
+  ///   File creation date
+  ///
+  /// * [DateTime] fileModifiedAt (required):
+  ///   File modification date
+  ///
+  /// * [String] key:
+  ///
+  /// * [String] slug:
+  ///
+  /// * [String] duration:
+  ///   Duration (for videos)
+  ///
+  /// * [String] filename:
+  ///   Filename
+  Future<Response> replaceAssetWithHttpInfo(String id, MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? slug, String? duration, String? filename, }) async {
+    // ignore: prefer_const_declarations
+    final apiPath = r'/assets/{id}/original'
+      .replaceAll('{id}', id);
+
+    // ignore: prefer_final_locals
+    Object? postBody;
+
+    final queryParams = <QueryParam>[];
+    final headerParams = <String, String>{};
+    final formParams = <String, String>{};
+
+    if (key != null) {
+      queryParams.addAll(_queryParams('', 'key', key));
+    }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
+
+    const contentTypes = <String>['multipart/form-data'];
+
+    bool hasFields = false;
+    final mp = MultipartRequest('PUT', Uri.parse(apiPath));
+    if (assetData != null) {
+      hasFields = true;
+      mp.fields[r'assetData'] = assetData.field;
+      mp.files.add(assetData);
+    }
+    if (deviceAssetId != null) {
+      hasFields = true;
+      mp.fields[r'deviceAssetId'] = parameterToString(deviceAssetId);
+    }
+    if (deviceId != null) {
+      hasFields = true;
+      mp.fields[r'deviceId'] = parameterToString(deviceId);
+    }
+    if (duration != null) {
+      hasFields = true;
+      mp.fields[r'duration'] = parameterToString(duration);
+    }
+    if (fileCreatedAt != null) {
+      hasFields = true;
+      mp.fields[r'fileCreatedAt'] = parameterToString(fileCreatedAt);
+    }
+    if (fileModifiedAt != null) {
+      hasFields = true;
+      mp.fields[r'fileModifiedAt'] = parameterToString(fileModifiedAt);
+    }
+    if (filename != null) {
+      hasFields = true;
+      mp.fields[r'filename'] = parameterToString(filename);
+    }
+    if (hasFields) {
+      postBody = mp;
+    }
+
+    return apiClient.invokeAPI(
+      apiPath,
+      'PUT',
+      queryParams,
+      postBody,
+      headerParams,
+      formParams,
+      contentTypes.isEmpty ? null : contentTypes.first,
+    );
+  }
+
+  /// Replace asset
+  ///
+  /// Replace the asset with new file, without changing its id.
+  ///
+  /// Parameters:
+  ///
+  /// * [String] id (required):
+  ///
+  /// * [MultipartFile] assetData (required):
+  ///   Asset file data
+  ///
+  /// * [String] deviceAssetId (required):
+  ///   Device asset ID
+  ///
+  /// * [String] deviceId (required):
+  ///   Device ID
+  ///
+  /// * [DateTime] fileCreatedAt (required):
+  ///   File creation date
+  ///
+  /// * [DateTime] fileModifiedAt (required):
+  ///   File modification date
+  ///
+  /// * [String] key:
+  ///
+  /// * [String] slug:
+  ///
+  /// * [String] duration:
+  ///   Duration (for videos)
+  ///
+  /// * [String] filename:
+  ///   Filename
+  Future<AssetMediaResponseDto?> replaceAsset(String id, MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? slug, String? duration, String? filename, }) async {
+    final response = await replaceAssetWithHttpInfo(id, assetData, deviceAssetId, deviceId, fileCreatedAt, fileModifiedAt,  key: key, slug: slug, duration: duration, filename: filename, );
+    if (response.statusCode >= HttpStatus.badRequest) {
+      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
+    }
+    // When a remote server returns no body with a status of 204, we shall not decode it.
+    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
+    // FormatException when trying to decode an empty string.
+    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
+      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'AssetMediaResponseDto',) as AssetMediaResponseDto;
+    
+    }
+    return null;
+  }
+
   /// Run an asset job
   ///
   /// Run a specific job on a set of assets.

mobile/openapi/lib/api/deprecated_api.dart

@@ -363,6 +363,154 @@ class DeprecatedApi {
     return null;
   }
 
+  /// Replace asset
+  ///
+  /// Replace the asset with new file, without changing its id.
+  ///
+  /// Note: This method returns the HTTP [Response].
+  ///
+  /// Parameters:
+  ///
+  /// * [String] id (required):
+  ///
+  /// * [MultipartFile] assetData (required):
+  ///   Asset file data
+  ///
+  /// * [String] deviceAssetId (required):
+  ///   Device asset ID
+  ///
+  /// * [String] deviceId (required):
+  ///   Device ID
+  ///
+  /// * [DateTime] fileCreatedAt (required):
+  ///   File creation date
+  ///
+  /// * [DateTime] fileModifiedAt (required):
+  ///   File modification date
+  ///
+  /// * [String] key:
+  ///
+  /// * [String] slug:
+  ///
+  /// * [String] duration:
+  ///   Duration (for videos)
+  ///
+  /// * [String] filename:
+  ///   Filename
+  Future<Response> replaceAssetWithHttpInfo(String id, MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? slug, String? duration, String? filename, }) async {
+    // ignore: prefer_const_declarations
+    final apiPath = r'/assets/{id}/original'
+      .replaceAll('{id}', id);
+
+    // ignore: prefer_final_locals
+    Object? postBody;
+
+    final queryParams = <QueryParam>[];
+    final headerParams = <String, String>{};
+    final formParams = <String, String>{};
+
+    if (key != null) {
+      queryParams.addAll(_queryParams('', 'key', key));
+    }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
+
+    const contentTypes = <String>['multipart/form-data'];
+
+    bool hasFields = false;
+    final mp = MultipartRequest('PUT', Uri.parse(apiPath));
+    if (assetData != null) {
+      hasFields = true;
+      mp.fields[r'assetData'] = assetData.field;
+      mp.files.add(assetData);
+    }
+    if (deviceAssetId != null) {
+      hasFields = true;
+      mp.fields[r'deviceAssetId'] = parameterToString(deviceAssetId);
+    }
+    if (deviceId != null) {
+      hasFields = true;
+      mp.fields[r'deviceId'] = parameterToString(deviceId);
+    }
+    if (duration != null) {
+      hasFields = true;
+      mp.fields[r'duration'] = parameterToString(duration);
+    }
+    if (fileCreatedAt != null) {
+      hasFields = true;
+      mp.fields[r'fileCreatedAt'] = parameterToString(fileCreatedAt);
+    }
+    if (fileModifiedAt != null) {
+      hasFields = true;
+      mp.fields[r'fileModifiedAt'] = parameterToString(fileModifiedAt);
+    }
+    if (filename != null) {
+      hasFields = true;
+      mp.fields[r'filename'] = parameterToString(filename);
+    }
+    if (hasFields) {
+      postBody = mp;
+    }
+
+    return apiClient.invokeAPI(
+      apiPath,
+      'PUT',
+      queryParams,
+      postBody,
+      headerParams,
+      formParams,
+      contentTypes.isEmpty ? null : contentTypes.first,
+    );
+  }
+
+  /// Replace asset
+  ///
+  /// Replace the asset with new file, without changing its id.
+  ///
+  /// Parameters:
+  ///
+  /// * [String] id (required):
+  ///
+  /// * [MultipartFile] assetData (required):
+  ///   Asset file data
+  ///
+  /// * [String] deviceAssetId (required):
+  ///   Device asset ID
+  ///
+  /// * [String] deviceId (required):
+  ///   Device ID
+  ///
+  /// * [DateTime] fileCreatedAt (required):
+  ///   File creation date
+  ///
+  /// * [DateTime] fileModifiedAt (required):
+  ///   File modification date
+  ///
+  /// * [String] key:
+  ///
+  /// * [String] slug:
+  ///
+  /// * [String] duration:
+  ///   Duration (for videos)
+  ///
+  /// * [String] filename:
+  ///   Filename
+  Future<AssetMediaResponseDto?> replaceAsset(String id, MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? slug, String? duration, String? filename, }) async {
+    final response = await replaceAssetWithHttpInfo(id, assetData, deviceAssetId, deviceId, fileCreatedAt, fileModifiedAt,  key: key, slug: slug, duration: duration, filename: filename, );
+    if (response.statusCode >= HttpStatus.badRequest) {
+      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
+    }
+    // When a remote server returns no body with a status of 204, we shall not decode it.
+    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
+    // FormatException when trying to decode an empty string.
+    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
+      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'AssetMediaResponseDto',) as AssetMediaResponseDto;
+    
+    }
+    return null;
+  }
+
   /// Run jobs
   ///
   /// Queue all assets for a specific job type. Defaults to only queueing assets that have not yet been processed, but the force command can be used to re-process all assets.

mobile/openapi/lib/model/permission.dart

@@ -41,6 +41,7 @@ class Permission {
   static const assetPeriodView = Permission._(r'asset.view');
   static const assetPeriodDownload = Permission._(r'asset.download');
   static const assetPeriodUpload = Permission._(r'asset.upload');
+  static const assetPeriodReplace = Permission._(r'asset.replace');
   static const assetPeriodCopy = Permission._(r'asset.copy');
   static const assetPeriodDerive = Permission._(r'asset.derive');
   static const assetPeriodEditPeriodGet = Permission._(r'asset.edit.get');
@@ -199,6 +200,7 @@ class Permission {
     assetPeriodView,
     assetPeriodDownload,
     assetPeriodUpload,
+    assetPeriodReplace,
     assetPeriodCopy,
     assetPeriodDerive,
     assetPeriodEditPeriodGet,
@@ -392,6 +394,7 @@ class PermissionTypeTransformer {
         case r'asset.view': return Permission.assetPeriodView;
         case r'asset.download': return Permission.assetPeriodDownload;
         case r'asset.upload': return Permission.assetPeriodUpload;
+        case r'asset.replace': return Permission.assetPeriodReplace;
         case r'asset.copy': return Permission.assetPeriodCopy;
         case r'asset.derive': return Permission.assetPeriodDerive;
         case r'asset.edit.get': return Permission.assetPeriodEditPeriodGet;

open-api/immich-openapi-specs.json

@@ -4216,6 +4216,89 @@
         ],
         "x-immich-permission": "asset.download",
         "x-immich-state": "Stable"
+      },
+      "put": {
+        "deprecated": true,
+        "description": "Replace the asset with new file, without changing its id.",
+        "operationId": "replaceAsset",
+        "parameters": [
+          {
+            "name": "id",
+            "required": true,
+            "in": "path",
+            "schema": {
+              "format": "uuid",
+              "type": "string"
+            }
+          },
+          {
+            "name": "key",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "requestBody": {
+          "content": {
+            "multipart/form-data": {
+              "schema": {
+                "$ref": "#/components/schemas/AssetMediaReplaceDto"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/AssetMediaResponseDto"
+                }
+              }
+            },
+            "description": "Asset replaced successfully"
+          }
+        },
+        "security": [
+          {
+            "bearer": []
+          },
+          {
+            "cookie": []
+          },
+          {
+            "api_key": []
+          }
+        ],
+        "summary": "Replace asset",
+        "tags": [
+          "Assets",
+          "Deprecated"
+        ],
+        "x-immich-history": [
+          {
+            "version": "v1",
+            "state": "Added"
+          },
+          {
+            "version": "v1",
+            "state": "Deprecated",
+            "replacementId": "copyAsset"
+          }
+        ],
+        "x-immich-permission": "asset.replace",
+        "x-immich-state": "Deprecated"
       }
     },
     "/assets/{id}/thumbnail": {
@@ -16527,6 +16610,49 @@
         ],
         "type": "object"
       },
+      "AssetMediaReplaceDto": {
+        "properties": {
+          "assetData": {
+            "description": "Asset file data",
+            "format": "binary",
+            "type": "string"
+          },
+          "deviceAssetId": {
+            "description": "Device asset ID",
+            "type": "string"
+          },
+          "deviceId": {
+            "description": "Device ID",
+            "type": "string"
+          },
+          "duration": {
+            "description": "Duration (for videos)",
+            "type": "string"
+          },
+          "fileCreatedAt": {
+            "description": "File creation date",
+            "format": "date-time",
+            "type": "string"
+          },
+          "fileModifiedAt": {
+            "description": "File modification date",
+            "format": "date-time",
+            "type": "string"
+          },
+          "filename": {
+            "description": "Filename",
+            "type": "string"
+          }
+        },
+        "required": [
+          "assetData",
+          "deviceAssetId",
+          "deviceId",
+          "fileCreatedAt",
+          "fileModifiedAt"
+        ],
+        "type": "object"
+      },
       "AssetMediaResponseDto": {
         "properties": {
           "id": {
@@ -19573,6 +19699,7 @@
           "asset.view",
           "asset.download",
           "asset.upload",
+          "asset.replace",
           "asset.copy",
           "asset.derive",
           "asset.edit.get",

open-api/typescript-sdk/src/fetch-client.ts

@@ -1028,6 +1028,22 @@ export type AssetOcrResponseDto = {
     /** Normalized y coordinate of box corner 4 (0-1) */
     y4: number;
 };
+export type AssetMediaReplaceDto = {
+    /** Asset file data */
+    assetData: Blob;
+    /** Device asset ID */
+    deviceAssetId: string;
+    /** Device ID */
+    deviceId: string;
+    /** Duration (for videos) */
+    duration?: string;
+    /** File creation date */
+    fileCreatedAt: string;
+    /** File modification date */
+    fileModifiedAt: string;
+    /** Filename */
+    filename?: string;
+};
 export type SignUpDto = {
     /** User email */
     email: string;
@@ -4254,6 +4270,27 @@ export function downloadAsset({ edited, id, key, slug }: {
         ...opts
     }));
 }
+/**
+ * Replace asset
+ */
+export function replaceAsset({ id, key, slug, assetMediaReplaceDto }: {
+    id: string;
+    key?: string;
+    slug?: string;
+    assetMediaReplaceDto: AssetMediaReplaceDto;
+}, opts?: Oazapfts.RequestOpts) {
+    return oazapfts.ok(oazapfts.fetchJson<{
+        status: 200;
+        data: AssetMediaResponseDto;
+    }>(`/assets/${encodeURIComponent(id)}/original${QS.query(QS.explode({
+        key,
+        slug
+    }))}`, oazapfts.multipart({
+        ...opts,
+        method: "PUT",
+        body: assetMediaReplaceDto
+    })));
+}
 /**
  * View asset thumbnail
  */
@@ -6883,6 +6920,7 @@ export enum Permission {
     AssetView = "asset.view",
     AssetDownload = "asset.download",
     AssetUpload = "asset.upload",
+    AssetReplace = "asset.replace",
     AssetCopy = "asset.copy",
     AssetDerive = "asset.derive",
     AssetEditGet = "asset.edit.get",

server/src/controllers/asset-media.controller.ts

@@ -8,6 +8,7 @@ import {
   Param,
   ParseFilePipe,
   Post,
+  Put,
   Query,
   Req,
   Res,
@@ -27,8 +28,10 @@ import {
   AssetBulkUploadCheckDto,
   AssetMediaCreateDto,
   AssetMediaOptionsDto,
+  AssetMediaReplaceDto,
   AssetMediaSize,
   CheckExistingAssetsDto,
+  UploadFieldName,
 } from 'src/dtos/asset-media.dto';
 import { AssetDownloadOriginalDto } from 'src/dtos/asset.dto';
 import { AuthDto } from 'src/dtos/auth.dto';
@@ -109,6 +112,36 @@ export class AssetMediaController {
     await sendFile(res, next, () => this.service.downloadOriginal(auth, id, dto), this.logger);
   }
 
+  @Put(':id/original')
+  @UseInterceptors(FileUploadInterceptor)
+  @ApiConsumes('multipart/form-data')
+  @ApiResponse({
+    status: 200,
+    description: 'Asset replaced successfully',
+    type: AssetMediaResponseDto,
+  })
+  @Endpoint({
+    summary: 'Replace asset',
+    description: 'Replace the asset with new file, without changing its id.',
+    history: new HistoryBuilder().added('v1').deprecated('v1', { replacementId: 'copyAsset' }),
+  })
+  @Authenticated({ permission: Permission.AssetReplace, sharedLink: true })
+  async replaceAsset(
+    @Auth() auth: AuthDto,
+    @Param() { id }: UUIDParamDto,
+    @UploadedFiles(new ParseFilePipe({ validators: [new FileNotEmptyValidator([UploadFieldName.ASSET_DATA])] }))
+    files: UploadFiles,
+    @Body() dto: AssetMediaReplaceDto,
+    @Res({ passthrough: true }) res: Response,
+  ): Promise<AssetMediaResponseDto> {
+    const { file } = getFiles(files);
+    const responseDto = await this.service.replaceAsset(auth, id, dto, file);
+    if (responseDto.status === AssetMediaStatus.DUPLICATE) {
+      res.status(HttpStatus.OK);
+    }
+    return responseDto;
+  }
+
   @Get(':id/thumbnail')
   @FileResponse()
   @Authenticated({ permission: Permission.AssetView, sharedLink: true })

server/src/dtos/asset-media.dto.ts

@@ -93,6 +93,8 @@ export class AssetMediaCreateDto extends AssetMediaBase {
   [UploadFieldName.SIDECAR_DATA]?: any;
 }
 
+export class AssetMediaReplaceDto extends AssetMediaBase {}
+
 export class AssetBulkUploadCheckItem {
   @ApiProperty({ description: 'Asset ID' })
   @IsString()

server/src/enum.ts

@@ -105,6 +105,7 @@ export enum Permission {
   AssetView = 'asset.view',
   AssetDownload = 'asset.download',
   AssetUpload = 'asset.upload',
+  AssetReplace = 'asset.replace',
   AssetCopy = 'asset.copy',
   AssetDerive = 'asset.derive',
 

server/src/maintenance/maintenance-worker.controller.ts

@@ -20,7 +20,7 @@ import {
   MaintenanceStatusResponseDto,
   SetMaintenanceModeDto,
 } from 'src/dtos/maintenance.dto';
-import { ServerConfigDto, ServerPingResponse, ServerVersionResponseDto } from 'src/dtos/server.dto';
+import { ServerConfigDto, ServerVersionResponseDto } from 'src/dtos/server.dto';
 import { ImmichCookie } from 'src/enum';
 import { MaintenanceRoute } from 'src/maintenance/maintenance-auth.guard';
 import { MaintenanceWorkerService } from 'src/maintenance/maintenance-worker.service';
@@ -52,11 +52,6 @@ export class MaintenanceWorkerController {
     return this.service.getSystemConfig();
   }
 
-  @Get('server/ping')
-  pingServer(): ServerPingResponse {
-    return this.service.ping();
-  }
-
   @Get('server/version')
   getServerVersion(): ServerVersionResponseDto {
     return this.service.getVersion();

server/src/maintenance/maintenance-worker.service.ts

@@ -12,7 +12,7 @@ import {
   MaintenanceStatusResponseDto,
   SetMaintenanceModeDto,
 } from 'src/dtos/maintenance.dto';
-import { ServerConfigDto, ServerPingResponse, ServerVersionResponseDto } from 'src/dtos/server.dto';
+import { ServerConfigDto, ServerVersionResponseDto } from 'src/dtos/server.dto';
 import { DatabaseLock, ImmichCookie, MaintenanceAction, SystemMetadataKey } from 'src/enum';
 import { MaintenanceHealthRepository } from 'src/maintenance/maintenance-health.repository';
 import { MaintenanceWebsocketRepository } from 'src/maintenance/maintenance-websocket.repository';
@@ -121,10 +121,6 @@ export class MaintenanceWorkerService {
     return ServerVersionResponseDto.fromSemVer(serverVersion);
   }
 
-  ping(): ServerPingResponse {
-    return { res: 'pong' };
-  }
-
   /**
    * {@link _ApiService.ssr}
    */

server/src/middleware/file-upload.interceptor.ts

@@ -3,16 +3,13 @@ import { PATH_METADATA } from '@nestjs/common/constants';
 import { Reflector } from '@nestjs/core';
 import { transformException } from '@nestjs/platform-express/multer/multer/multer.utils';
 import { NextFunction, RequestHandler } from 'express';
-import multer from 'multer';
+import multer, { StorageEngine, diskStorage } from 'multer';
 import { createHash, randomUUID } from 'node:crypto';
-import { join } from 'node:path';
-import { pipeline } from 'node:stream';
 import { Observable } from 'rxjs';
 import { UploadFieldName } from 'src/dtos/asset-media.dto';
 import { RouteKey } from 'src/enum';
 import { AuthRequest } from 'src/middleware/auth.guard';
 import { LoggingRepository } from 'src/repositories/logging.repository';
-import { StorageRepository } from 'src/repositories/storage.repository';
 import { AssetMediaService } from 'src/services/asset-media.service';
 import { ImmichFile, UploadFile, UploadFiles } from 'src/types';
 import { asUploadRequest, mapToUploadFile } from 'src/utils/asset.util';
@@ -29,6 +26,8 @@ export function getFiles(files: UploadFiles) {
   };
 }
 
+type DiskStorageCallback = (error: Error | null, result: string) => void;
+
 type ImmichMulterFile = Express.Multer.File & { uuid: string };
 
 interface Callback<T> {
@@ -36,21 +35,34 @@ interface Callback<T> {
   (error: null, result: T): void;
 }
 
+const callbackify = <T>(target: (...arguments_: any[]) => T, callback: Callback<T>) => {
+  try {
+    return callback(null, target());
+  } catch (error: Error | any) {
+    return callback(error);
+  }
+};
+
 @Injectable()
 export class FileUploadInterceptor implements NestInterceptor {
   private handlers: {
     userProfile: RequestHandler;
     assetUpload: RequestHandler;
   };
+  private defaultStorage: StorageEngine;
 
   constructor(
     private reflect: Reflector,
     private assetService: AssetMediaService,
-    private storageRepository: StorageRepository,
     private logger: LoggingRepository,
   ) {
     this.logger.setContext(FileUploadInterceptor.name);
 
+    this.defaultStorage = diskStorage({
+      filename: this.filename.bind(this),
+      destination: this.destination.bind(this),
+    });
+
     const instance = multer({
       fileFilter: this.fileFilter.bind(this),
       storage: {
@@ -87,60 +99,60 @@ export class FileUploadInterceptor implements NestInterceptor {
   }
 
   private fileFilter(request: AuthRequest, file: Express.Multer.File, callback: multer.FileFilterCallback) {
-    try {
-      callback(null, this.assetService.canUploadFile(asUploadRequest(request, file)));
-    } catch (error: Error | any) {
-      callback(error);
-    }
+    return callbackify(() => this.assetService.canUploadFile(asUploadRequest(request, file)), callback);
+  }
+
+  private filename(request: AuthRequest, file: Express.Multer.File, callback: DiskStorageCallback) {
+    return callbackify(
+      () => this.assetService.getUploadFilename(asUploadRequest(request, file)),
+      callback as Callback<string>,
+    );
+  }
+
+  private destination(request: AuthRequest, file: Express.Multer.File, callback: DiskStorageCallback) {
+    return callbackify(
+      () => this.assetService.getUploadFolder(asUploadRequest(request, file)),
+      callback as Callback<string>,
+    );
   }
 
   private handleFile(request: AuthRequest, file: Express.Multer.File, callback: Callback<Partial<ImmichFile>>) {
+    (file as ImmichMulterFile).uuid = randomUUID();
+
     request.on('error', (error) => {
       this.logger.warn('Request error while uploading file, cleaning up', error);
       this.assetService.onUploadError(request, file).catch(this.logger.error);
     });
 
-    try {
-      (file as ImmichMulterFile).uuid = randomUUID();
-
-      const uploadRequest = asUploadRequest(request, file);
-
-      const path = join(
-        this.assetService.getUploadFolder(uploadRequest),
-        this.assetService.getUploadFilename(uploadRequest),
-      );
-
-      const writeStream = this.storageRepository.createWriteStream(path);
-      const hash = file.fieldname === UploadFieldName.ASSET_DATA ? createHash('sha1') : null;
-
-      let size = 0;
-
-      file.stream.on('data', (chunk) => {
-        hash?.update(chunk);
-        size += chunk.length;
-      });
-
-      pipeline(file.stream, writeStream, (error) => {
-        if (error) {
-          hash?.destroy();
-          return callback(error);
-        }
-        callback(null, {
-          path,
-          size,
-          checksum: hash?.digest(),
-        });
-      });
-    } catch (error: Error | any) {
-      callback(error);
+    if (!this.isAssetUploadFile(file)) {
+      this.defaultStorage._handleFile(request, file, callback);
+      return;
     }
+
+    const hash = createHash('sha1');
+    file.stream.on('data', (chunk) => hash.update(chunk));
+    this.defaultStorage._handleFile(request, file, (error, info) => {
+      if (error) {
+        hash.destroy();
+        callback(error);
+      } else {
+        callback(null, { ...info, checksum: hash.digest() });
+      }
+    });
   }
 
-  private removeFile(_request: AuthRequest, file: Express.Multer.File, callback: (error: Error | null) => void) {
-    this.storageRepository
-      .unlink(file.path)
-      .then(() => callback(null))
-      .catch(callback);
+  private removeFile(request: AuthRequest, file: Express.Multer.File, callback: (error: Error | null) => void) {
+    this.defaultStorage._removeFile(request, file, callback);
+  }
+
+  private isAssetUploadFile(file: Express.Multer.File) {
+    switch (file.fieldname as UploadFieldName) {
+      case UploadFieldName.ASSET_DATA: {
+        return true;
+      }
+    }
+
+    return false;
   }
 
   private getHandler(route: RouteKey) {

server/src/repositories/storage.repository.ts

@@ -63,7 +63,7 @@ export class StorageRepository {
   }
 
   createWriteStream(filepath: string): Writable {
-    return createWriteStream(filepath, { flags: 'w', flush: true });
+    return createWriteStream(filepath, { flags: 'w' });
   }
 
   createOrOverwriteFile(filepath: string, buffer: Buffer) {

server/src/services/api.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, NotAcceptableException } from '@nestjs/common';
+import { Injectable } from '@nestjs/common';
 import { Interval } from '@nestjs/schedule';
 import { NextFunction, Request, Response } from 'express';
 import { readFileSync } from 'node:fs';
@@ -72,13 +72,6 @@ export class ApiService {
         return next();
       }
 
-      const responseType = request.accepts('text/html');
-      if (!responseType) {
-        throw new NotAcceptableException(
-          `The route ${request.path} was requested as ${request.header('accept')}, but only returns text/html`,
-        );
-      }
-
       let status = 200;
       let html = index;
 
@@ -112,7 +105,7 @@ export class ApiService {
         html = render(index, meta);
       }
 
-      res.status(status).type(responseType).header('Cache-Control', 'no-store').send(html);
+      res.status(status).type('text/html').header('Cache-Control', 'no-store').send(html);
     };
   }
 }

server/src/services/asset-media.service.ts

@@ -2,6 +2,7 @@ import { BadRequestException, Injectable, InternalServerErrorException, NotFound
 import { extname } from 'node:path';
 import sanitize from 'sanitize-filename';
 import { StorageCore } from 'src/cores/storage.core';
+import { Asset } from 'src/database';
 import {
   AssetBulkUploadCheckResponseDto,
   AssetMediaResponseDto,
@@ -14,13 +15,22 @@ import {
   AssetBulkUploadCheckDto,
   AssetMediaCreateDto,
   AssetMediaOptionsDto,
+  AssetMediaReplaceDto,
   AssetMediaSize,
   CheckExistingAssetsDto,
   UploadFieldName,
 } from 'src/dtos/asset-media.dto';
 import { AssetDownloadOriginalDto } from 'src/dtos/asset.dto';
 import { AuthDto } from 'src/dtos/auth.dto';
-import { AssetFileType, AssetVisibility, CacheControl, JobName, Permission, StorageFolder } from 'src/enum';
+import {
+  AssetFileType,
+  AssetStatus,
+  AssetVisibility,
+  CacheControl,
+  JobName,
+  Permission,
+  StorageFolder,
+} from 'src/enum';
 import { AuthRequest } from 'src/middleware/auth.guard';
 import { BaseService } from 'src/services/base.service';
 import { UploadFile, UploadRequest } from 'src/types';
@@ -153,6 +163,40 @@ export class AssetMediaService extends BaseService {
     }
   }
 
+  async replaceAsset(
+    auth: AuthDto,
+    id: string,
+    dto: AssetMediaReplaceDto,
+    file: UploadFile,
+    sidecarFile?: UploadFile,
+  ): Promise<AssetMediaResponseDto> {
+    try {
+      await this.requireAccess({ auth, permission: Permission.AssetUpdate, ids: [id] });
+      const asset = await this.assetRepository.getById(id);
+
+      if (!asset) {
+        throw new Error('Asset not found');
+      }
+
+      this.requireQuota(auth, file.size);
+
+      await this.replaceFileData(asset.id, dto, file, sidecarFile?.originalPath);
+
+      // Next, create a backup copy of the existing record. The db record has already been updated above,
+      // but the local variable holds the original file data paths.
+      const copiedPhoto = await this.createCopy(asset);
+      // and immediate trash it
+      await this.assetRepository.updateAll([copiedPhoto.id], { deletedAt: new Date(), status: AssetStatus.Trashed });
+      await this.eventRepository.emit('AssetTrash', { assetId: copiedPhoto.id, userId: auth.user.id });
+
+      await this.userRepository.updateUsage(auth.user.id, file.size);
+
+      return { status: AssetMediaStatus.REPLACED, id: copiedPhoto.id };
+    } catch (error: any) {
+      return this.handleUploadError(error, auth, file, sidecarFile);
+    }
+  }
+
   async downloadOriginal(auth: AuthDto, id: string, dto: AssetDownloadOriginalDto): Promise<ImmichFileResponse> {
     await this.requireAccess({ auth, permission: Permission.AssetDownload, ids: [id] });
 
@@ -313,6 +357,82 @@ export class AssetMediaService extends BaseService {
     throw error;
   }
 
+  /**
+   * Updates the specified assetId to the specified photo data file properties: checksum, path,
+   * timestamps, deviceIds, and sidecar. Derived properties like: faces, smart search info, etc
+   * are UNTOUCHED. The photo data files modification times on the filesysytem are updated to
+   * the specified timestamps. The exif db record is upserted, and then A METADATA_EXTRACTION
+   * job is queued to update these derived properties.
+   */
+  private async replaceFileData(
+    assetId: string,
+    dto: AssetMediaReplaceDto,
+    file: UploadFile,
+    sidecarPath?: string,
+  ): Promise<void> {
+    await this.assetRepository.update({
+      id: assetId,
+
+      checksum: file.checksum,
+      originalPath: file.originalPath,
+      type: mimeTypes.assetType(file.originalPath),
+      originalFileName: file.originalName,
+
+      deviceAssetId: dto.deviceAssetId,
+      deviceId: dto.deviceId,
+      fileCreatedAt: dto.fileCreatedAt,
+      fileModifiedAt: dto.fileModifiedAt,
+      localDateTime: dto.fileCreatedAt,
+      duration: dto.duration || null,
+
+      livePhotoVideoId: null,
+    });
+
+    await (sidecarPath
+      ? this.assetRepository.upsertFile({ assetId, type: AssetFileType.Sidecar, path: sidecarPath })
+      : this.assetRepository.deleteFile({ assetId, type: AssetFileType.Sidecar }));
+
+    await this.storageRepository.utimes(file.originalPath, new Date(), new Date(dto.fileModifiedAt));
+    await this.assetRepository.upsertExif(
+      { assetId, fileSizeInByte: file.size },
+      { lockedPropertiesBehavior: 'override' },
+    );
+    await this.jobRepository.queue({
+      name: JobName.AssetExtractMetadata,
+      data: { id: assetId, source: 'upload' },
+    });
+  }
+
+  /**
+   * Create a 'shallow' copy of the specified asset record creating a new asset record in the database.
+   * Uses only vital properties excluding things like: stacks, faces, smart search info, etc,
+   * and then queues a METADATA_EXTRACTION job.
+   */
+  private async createCopy(asset: Omit<Asset, 'id'>) {
+    const created = await this.assetRepository.create({
+      ownerId: asset.ownerId,
+      originalPath: asset.originalPath,
+      originalFileName: asset.originalFileName,
+      libraryId: asset.libraryId,
+      deviceAssetId: asset.deviceAssetId,
+      deviceId: asset.deviceId,
+      type: asset.type,
+      checksum: asset.checksum,
+      fileCreatedAt: asset.fileCreatedAt,
+      localDateTime: asset.localDateTime,
+      fileModifiedAt: asset.fileModifiedAt,
+      livePhotoVideoId: asset.livePhotoVideoId,
+    });
+
+    const { size } = await this.storageRepository.stat(created.originalPath);
+    await this.assetRepository.upsertExif(
+      { assetId: created.id, fileSizeInByte: size },
+      { lockedPropertiesBehavior: 'override' },
+    );
+    await this.jobRepository.queue({ name: JobName.AssetExtractMetadata, data: { id: created.id, source: 'copy' } });
+    return created;
+  }
+
   private async create(ownerId: string, dto: AssetMediaCreateDto, file: UploadFile, sidecarFile?: UploadFile) {
     const asset = await this.assetRepository.create({
       ownerId,

server/src/services/metadata.service.spec.ts

@@ -330,7 +330,7 @@ describe(MetadataService.name, () => {
         duration: null,
         fileCreatedAt: asset.fileCreatedAt,
         fileModifiedAt: asset.fileModifiedAt,
-        localDateTime: asset.fileCreatedAt,
+        localDateTime: asset.localDateTime,
         width: null,
         height: null,
       });
@@ -360,7 +360,7 @@ describe(MetadataService.name, () => {
         duration: null,
         fileCreatedAt: asset.fileCreatedAt,
         fileModifiedAt: asset.fileModifiedAt,
-        localDateTime: asset.fileCreatedAt,
+        localDateTime: asset.localDateTime,
         width: null,
         height: null,
       });

server/src/utils/transform.spec.ts

@@ -155,33 +155,6 @@ describe('transformFaceBoundingBox', () => {
       expect(result.boundingBoxX2).toBe(50);
       expect(result.boundingBoxY2).toBe(50);
     });
-
-    it('should always return whole numbers', () => {
-      const edits: AssetEditActionItem[] = [
-        { action: AssetEditAction.Crop, parameters: { x: 50, y: 50, width: 250, height: 250 } },
-      ];
-
-      expect(transformFaceBoundingBox(baseFace, edits, { width: 1000, height: 400 })).toMatchObject({
-        boundingBoxX1: 50,
-        boundingBoxY1: 0,
-        boundingBoxX2: 150,
-        boundingBoxY2: 50,
-      });
-
-      expect(transformFaceBoundingBox(baseFace, edits, { width: 1001, height: 401 })).toMatchObject({
-        boundingBoxX1: 50,
-        boundingBoxY1: 0,
-        boundingBoxX2: 150,
-        boundingBoxY2: 50,
-      });
-
-      expect(transformFaceBoundingBox(baseFace, edits, { width: 999, height: 399 })).toMatchObject({
-        boundingBoxX1: 49,
-        boundingBoxY1: -0,
-        boundingBoxX2: 149,
-        boundingBoxY2: 49,
-      });
-    });
   });
 });
 

server/src/utils/transform.ts

@@ -179,10 +179,10 @@ export const transformFaceBoundingBox = (
   // Ensure x1,y1 is top-left and x2,y2 is bottom-right
   const [p1, p2] = transformedPoints;
   return {
-    boundingBoxX1: Math.trunc(Math.min(p1.x, p2.x)),
-    boundingBoxY1: Math.trunc(Math.min(p1.y, p2.y)),
-    boundingBoxX2: Math.trunc(Math.max(p1.x, p2.x)),
-    boundingBoxY2: Math.trunc(Math.max(p1.y, p2.y)),
+    boundingBoxX1: Math.min(p1.x, p2.x),
+    boundingBoxY1: Math.min(p1.y, p2.y),
+    boundingBoxX2: Math.max(p1.x, p2.x),
+    boundingBoxY2: Math.max(p1.y, p2.y),
     imageWidth: currentWidth,
     imageHeight: currentHeight,
   };

server/test/factories/asset.factory.ts

@@ -19,7 +19,7 @@ import {
   UserLike,
 } from 'test/factories/types';
 import { UserFactory } from 'test/factories/user.factory';
-import { newSha1, newUuid, newUuidV7 } from 'test/small.factory';
+import { newDate, newSha1, newUuid, newUuidV7 } from 'test/small.factory';
 
 export class AssetFactory {
   #owner!: UserFactory;
@@ -43,12 +43,10 @@ export class AssetFactory {
 
     const originalFileName = dto.originalFileName ?? (dto.type === AssetType.Video ? `MOV_${id}.mp4` : `IMG_${id}.jpg`);
 
-    let now = Date.now();
-
     return new AssetFactory({
       id,
-      createdAt: new Date(now++),
-      updatedAt: new Date(now++),
+      createdAt: newDate(),
+      updatedAt: newDate(),
       deletedAt: null,
       updateId: newUuidV7(),
       status: AssetStatus.Active,
@@ -57,14 +55,14 @@ export class AssetFactory {
       deviceId: '',
       duplicateId: null,
       duration: null,
-      fileCreatedAt: new Date(now++),
-      fileModifiedAt: new Date(now++),
+      fileCreatedAt: newDate(),
+      fileModifiedAt: newDate(),
       isExternal: false,
       isFavorite: false,
       isOffline: false,
       libraryId: null,
       livePhotoVideoId: null,
-      localDateTime: new Date(now),
+      localDateTime: newDate(),
       originalFileName,
       originalPath: `/data/library/${originalFileName}`,
       ownerId: newUuid(),

server/test/medium/specs/services/person.service.spec.ts

@@ -591,10 +591,10 @@ describe(PersonService.name, () => {
         expect.arrayContaining([
           expect.objectContaining({
             person: expect.objectContaining({ id: person.id }),
-            boundingBoxX1: 25,
-            boundingBoxY1: 49,
-            boundingBoxX2: 99,
-            boundingBoxY2: 100,
+            boundingBoxX1: expect.closeTo(25, 1),
+            boundingBoxY1: expect.closeTo(50, 1),
+            boundingBoxX2: expect.closeTo(100, 1),
+            boundingBoxY2: expect.closeTo(100, 1),
           }),
         ]),
       );

web/src/lib/components/ImageLayer.svelte

@@ -36,7 +36,7 @@
       onLoad={() => adaptiveImageLoader.onLoad(quality)}
       onError={() => adaptiveImageLoader.onError(quality)}
       bind:ref
-      class="h-full w-full bg-transparent pointer-events-auto"
+      class="h-full w-full bg-transparent"
       {alt}
       {role}
       draggable={false}

web/src/lib/components/QueuePanel.svelte

@@ -112,7 +112,7 @@
 
       switch (dto.command) {
         case QueueCommand.Empty: {
-          toastManager.primary($t('admin.cleared_jobs', { values: { job: item.title } }));
+          toastManager.success($t('admin.cleared_jobs', { values: { job: item.title } }));
           break;
         }
       }

web/src/lib/components/admin-settings/AuthSettings.svelte

@@ -55,7 +55,7 @@
 
     try {
       await unlinkAllOAuthAccountsAdmin();
-      toastManager.primary();
+      toastManager.success();
     } catch (error) {
       handleError(error, $t('errors.something_went_wrong'));
     }

web/src/lib/components/admin-settings/NotificationSettings.svelte

@@ -45,7 +45,7 @@
         },
       });
 
-      toastManager.primary($t('admin.notification_email_test_email_sent', { values: { email: $user.email } }));
+      toastManager.success($t('admin.notification_email_test_email_sent', { values: { email: $user.email } }));
 
       if (!disabled) {
         await handleSystemConfigSave({ notifications: configToEdit.notifications });

web/src/lib/components/album-page/album-card-group.svelte

@@ -65,7 +65,6 @@
       {#each albums as album, index (album.id)}
         <a
           href={Route.viewAlbum(album)}
-          class="h-fit"
           animate:flip={{ duration: 400 }}
           oncontextmenu={(event) => oncontextmenu(event, album)}
         >

web/src/lib/components/album-page/album-title.svelte

@@ -4,7 +4,6 @@
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo } from '@immich/sdk';
   import { t } from 'svelte-i18n';
-  import { tv } from 'tailwind-variants';
 
   interface Props {
     id: string;
@@ -37,22 +36,14 @@
       return;
     }
   };
-
-  const styles = tv({
-    base: 'w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray placeholder:text-primary/90',
-    variants: {
-      isOwned: {
-        true: 'hover:border-gray-400',
-        false: 'hover:border-transparent',
-      },
-    },
-  });
 </script>
 
 <input
   use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
   onblur={handleUpdateName}
-  class={styles({ isOwned })}
+  class="w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all {isOwned
+    ? 'hover:border-gray-400'
+    : 'hover:border-transparent'} focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray placeholder:text-primary/90"
   type="text"
   bind:value={newAlbumName}
   disabled={!isOwned}

web/src/lib/components/asset-viewer/actions/delete-action.svelte

@@ -40,7 +40,7 @@
         preAction({ type: AssetAction.DELETE, asset: timelineAsset });
         await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
         onAction({ type: AssetAction.DELETE, asset: timelineAsset });
-        toastManager.primary($t('permanently_deleted_asset'));
+        toastManager.success($t('permanently_deleted_asset'));
       } catch (error) {
         handleError(error, $t('errors.unable_to_delete_asset'));
       }

web/src/lib/components/asset-viewer/actions/restore-action.svelte

@@ -21,7 +21,7 @@
       await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
       asset.isTrashed = false;
       onAction({ type: AssetAction.RESTORE, asset: toTimelineAsset(asset) });
-      toastManager.primary($t('restored_asset'));
+      toastManager.success($t('restored_asset'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_restore_assets'));
     }

web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte

@@ -23,7 +23,7 @@
         },
       });
       eventManager.emit('AlbumUpdate', response);
-      toastManager.primary($t('album_cover_updated'));
+      toastManager.success($t('album_cover_updated'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_album_cover'));
     }

web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte

@@ -31,7 +31,7 @@
         person,
       });
 
-      toastManager.primary($t('feature_photo_updated'));
+      toastManager.success($t('feature_photo_updated'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_set_feature_photo'));
     }

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

@@ -74,7 +74,7 @@
         [ReactionType.Comment]: $t('comment_deleted'),
         [ReactionType.Like]: $t('like_deleted'),
       };
-      toastManager.primary(deleteMessages[reaction.type]);
+      toastManager.success(deleteMessages[reaction.type]);
     } catch (error) {
       handleError(error, $t('errors.unable_to_remove_reaction'));
     }

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

@@ -22,7 +22,6 @@
   import { Route } from '$lib/route';
   import { getGlobalActions } from '$lib/services/app.service';
   import { getAssetActions } from '$lib/services/asset.service';
-  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { user } from '$lib/stores/user.store';
   import { getSharedLink, withoutIcons } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
@@ -89,7 +88,7 @@
     title: $t('go_back'),
     type: $t('assets'),
     icon: languageManager.rtl ? mdiArrowRight : mdiArrowLeft,
-    $if: () => !!onClose && !isFaceEditMode.value,
+    $if: () => !!onClose,
     onAction: () => onClose?.(),
     shortcuts: [{ key: 'Escape' }],
   });

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

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

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

@@ -22,7 +22,7 @@
     }
     try {
       await updateAsset({ id: asset.id, updateAssetDto: { description } });
-      toastManager.primary($t('asset_description_updated'));
+      toastManager.success($t('asset_description_updated'));
     } catch (error) {
       handleError(error, $t('cannot_update_the_description'));
     }

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

@@ -20,13 +20,7 @@
   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,
-    getAssetInfo,
-    type AlbumResponseDto,
-    type AssetResponseDto,
-  } from '@immich/sdk';
+  import { AssetMediaSize, getAllAlbums, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
   import { Icon, IconButton, LoadingSpinner, modalManager, Text } from '@immich/ui';
   import {
     mdiCalendar,
@@ -52,9 +46,10 @@
   interface Props {
     asset: AssetResponseDto;
     currentAlbum?: AlbumResponseDto | null;
+    onRefreshPeople?: () => Promise<void>;
   }
 
-  let { asset, currentAlbum = null }: Props = $props();
+  let { asset, currentAlbum = null, onRefreshPeople }: Props = $props();
 
   let showAssetPath = $state(false);
   let showEditFaces = $state(false);
@@ -120,11 +115,6 @@
     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) });
@@ -575,6 +565,6 @@
     assetId={asset.id}
     assetType={asset.type}
     onClose={() => (showEditFaces = false)}
-    onRefresh={handleRefreshPeople}
+    onRefresh={() => void onRefreshPeople?.()}
   />
 {/if}

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

@@ -1,12 +1,10 @@
 <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';
   import { handleError } from '$lib/utils/handle-error';
   import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
-  import { shortcut } from '$lib/actions/shortcut';
   import { Button, Input, modalManager, toastManager } from '@immich/ui';
   import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
   import { clamp } from 'lodash-es';
@@ -18,9 +16,10 @@
     containerWidth: number;
     containerHeight: number;
     assetId: string;
+    onTagFace?: () => Promise<void>;
   }
 
-  let { htmlElement, containerWidth, containerHeight, assetId }: Props = $props();
+  let { htmlElement, containerWidth, containerHeight, assetId, onTagFace }: Props = $props();
 
   let canvasEl: HTMLCanvasElement | undefined = $state();
   let canvas: Canvas | undefined = $state();
@@ -281,7 +280,7 @@
         },
       });
 
-      await assetViewingStore.setAssetId(assetId);
+      await onTagFace?.();
     } catch (error) {
       handleError(error, 'Error tagging face');
     } finally {
@@ -290,8 +289,6 @@
   };
 </script>
 
-<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: cancel }} />
-
 <div
   id="face-editor-data"
   class="absolute start-0 top-0 z-5 h-full w-full overflow-hidden"

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

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

web/src/lib/components/faces-page/manage-people-visibility.svelte

@@ -67,7 +67,7 @@
         if (failCount > 0) {
           toastManager.warning($t('errors.unable_to_change_visibility', { values: { count: failCount } }));
         }
-        toastManager.primary($t('visibility_changed', { values: { count: successCount } }));
+        toastManager.success($t('visibility_changed', { values: { count: successCount } }));
       }
 
       for (const person of people) {

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -72,7 +72,7 @@
       });
       const mergedPerson = await getPerson({ id: person.id });
       const count = results.filter(({ success }) => success).length;
-      toastManager.primary($t('merged_people_count', { values: { count } }));
+      toastManager.success($t('merged_people_count', { values: { count } }));
       onMerge(mergedPerson);
     } catch (error) {
       handleError(error, $t('cannot_merge_people'));

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

@@ -3,7 +3,6 @@
   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';
@@ -126,7 +125,7 @@
           }
         }
 
-        toastManager.primary($t('people_edits_count', { values: { count: numberOfChanges } }));
+        toastManager.success($t('people_edits_count', { values: { count: numberOfChanges } }));
       } catch (error) {
         handleError(error, $t('errors.cant_apply_changes'));
       }
@@ -179,7 +178,10 @@
 
       peopleWithFaces = peopleWithFaces.filter((f) => f.id !== face.id);
 
-      await assetViewingStore.setAssetId(assetId);
+      onRefresh();
+      if (peopleWithFaces.length === 0) {
+        onClose();
+      }
     } catch (error) {
       handleError(error, $t('error_delete_face'));
     }

web/src/lib/components/faces-page/unmerge-face-selector.svelte

@@ -71,7 +71,7 @@
       disableButtons = true;
       const data = await createPerson({ personCreateDto: {} });
       await reassignFaces({ id: data.id, assetFaceUpdateDto: { data: selectedPeople } });
-      toastManager.primary($t('reassigned_assets_to_new_person', { values: { count: assetIds.length } }));
+      toastManager.success($t('reassigned_assets_to_new_person', { values: { count: assetIds.length } }));
     } catch (error) {
       handleError(error, $t('errors.unable_to_reassign_assets_new_person'));
     } finally {
@@ -88,7 +88,7 @@
       disableButtons = true;
       if (selectedPerson) {
         await reassignFaces({ id: selectedPerson.id, assetFaceUpdateDto: { data: selectedPeople } });
-        toastManager.primary(
+        toastManager.success(
           $t('reassigned_assets_to_existing_person', {
             values: { count: assetIds.length, name: selectedPerson.name || null },
           }),

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -63,9 +63,8 @@
   let playerInitialized = $state(false);
   let paused = $state(false);
   let current = $state<MemoryAsset | undefined>(undefined);
-  const currentAssetId = $derived(current?.asset.id);
-  const currentMemoryAssetFull = $derived.by(async () =>
-    currentAssetId ? await getAssetInfo({ ...authManager.params, id: currentAssetId }) : undefined,
+  let currentMemoryAssetFull = $derived.by(async () =>
+    current?.asset ? await getAssetInfo({ ...authManager.params, id: current.asset.id }) : undefined,
   );
   let currentTimelineAssets = $derived(current?.memory.assets ?? []);
   let viewerAssets = $derived([
@@ -206,7 +205,7 @@
     }
 
     await memoryStore.deleteMemory(current.memory.id);
-    toastManager.primary($t('removed_memory'));
+    toastManager.success($t('removed_memory'));
     init(page);
   };
 
@@ -217,7 +216,7 @@
 
     const newSavedState = !current.memory.isSaved;
     await memoryStore.updateMemorySaved(current.memory.id, newSavedState);
-    toastManager.primary(newSavedState ? $t('added_to_favorites') : $t('removed_from_favorites'));
+    toastManager.success(newSavedState ? $t('added_to_favorites') : $t('removed_from_favorites'));
     init(page);
   };
 
@@ -551,18 +550,14 @@
               </div>
 
               <div>
-                {#await currentMemoryAssetFull then asset}
-                  {#if asset}
-                    <IconButton
-                      href={Route.photos({ at: asset.stack?.primaryAssetId ?? asset.id })}
-                      icon={mdiImageSearch}
-                      aria-label={$t('view_in_timeline')}
-                      color="secondary"
-                      variant="ghost"
-                      shape="round"
-                    />
-                  {/if}
-                {/await}
+                <IconButton
+                  href={Route.photos({ at: current.asset.id })}
+                  icon={mdiImageSearch}
+                  aria-label={$t('view_in_timeline')}
+                  color="secondary"
+                  variant="ghost"
+                  shape="round"
+                />
               </div>
             </div>
             <!-- CONTROL BUTTONS -->

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -52,7 +52,7 @@
         ? openFileUploadDialog()
         : fileUploadHandler({ files }));
 
-      toastManager.primary();
+      toastManager.success();
     } catch (error) {
       handleError(error, $t('errors.unable_to_add_assets_to_shared_link'));
     }

web/src/lib/components/shared-components/combobox.svelte

@@ -345,10 +345,8 @@
         {
           shortcut: { key: 'Escape' },
           onShortcut: (event) => {
-            if (isOpen) {
-              event.stopPropagation();
-              closeDropdown();
-            }
+            event.stopPropagation();
+            closeDropdown();
           },
         },
       ]}

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -14,11 +14,11 @@
   import { t } from 'svelte-i18n';
   import SearchHistoryBox from './search-history-box.svelte';
 
-  type Props = {
+  interface Props {
     value?: string;
     grayTheme: boolean;
     searchQuery?: MetadataSearchDto | SmartSearchDto;
-  };
+  }
 
   let { value = $bindable(''), grayTheme, searchQuery = {} }: Props = $props();
 

web/src/lib/components/shared-components/search-bar/search-camera-section.svelte

@@ -1,14 +1,21 @@
+<script lang="ts" module>
+  export interface SearchCameraFilter {
+    make?: string;
+    model?: string;
+    lensModel?: string;
+  }
+</script>
+
 <script lang="ts">
   import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
-  import type { SearchCameraFilter } from '$lib/types';
   import { handlePromiseError } from '$lib/utils';
   import { SearchSuggestionType, getSearchSuggestions } from '@immich/sdk';
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
-  type Props = {
+  interface Props {
     filters: SearchCameraFilter;
-  };
+  }
 
   let { filters = $bindable() }: Props = $props();
 

web/src/lib/components/shared-components/search-bar/search-date-section.svelte

@@ -1,11 +1,18 @@
+<script lang="ts" module>
+  export interface SearchDateFilter {
+    takenBefore?: DateTime;
+    takenAfter?: DateTime;
+  }
+</script>
+
 <script lang="ts">
-  import type { SearchDateFilter } from '$lib/types';
   import { DatePicker, Text } from '@immich/ui';
+  import type { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 
-  type Props = {
+  interface Props {
     filters: SearchDateFilter;
-  };
+  }
 
   let { filters = $bindable() }: Props = $props();
 

web/src/lib/components/shared-components/search-bar/search-display-section.svelte

@@ -1,11 +1,19 @@
+<script lang="ts" module>
+  export interface SearchDisplayFilters {
+    isNotInAlbum: boolean;
+    isArchive: boolean;
+    isFavorite: boolean;
+  }
+</script>
+
 <script lang="ts">
-  import type { SearchDisplayFilters } from '$lib/types';
   import { Checkbox, Label, Text } from '@immich/ui';
+
   import { t } from 'svelte-i18n';
 
-  type Props = {
+  interface Props {
     filters: SearchDisplayFilters;
-  };
+  }
 
   let { filters = $bindable() }: Props = $props();
 </script>

web/src/lib/components/shared-components/search-bar/search-location-section.svelte

@@ -1,15 +1,22 @@
+<script lang="ts" module>
+  export interface SearchLocationFilter {
+    country?: string;
+    state?: string;
+    city?: string;
+  }
+</script>
+
 <script lang="ts">
   import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
-  import type { SearchLocationFilter } from '$lib/types';
   import { handlePromiseError } from '$lib/utils';
   import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
   import { Text } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
-  type Props = {
+  interface Props {
     filters: SearchLocationFilter;
-  };
+  }
 
   let { filters = $bindable() }: Props = $props();
 

web/src/lib/components/shared-components/search-bar/search-people-section.svelte

@@ -9,7 +9,6 @@
   import { mdiArrowRight, mdiClose } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { SvelteSet } from 'svelte/reactivity';
-  import { tv } from 'tailwind-variants';
 
   interface Props {
     selectedPeople: SvelteSet<string>;
@@ -50,16 +49,6 @@
     const nameLower = name.toLowerCase();
     return name ? list.filter((p) => p.name.toLowerCase().includes(nameLower)) : list;
   };
-
-  const styles = tv({
-    base: 'flex flex-col items-center rounded-3xl border-2 hover:bg-subtle dark:hover:bg-immich-dark-primary/20 p-2 transition-all',
-    variants: {
-      selected: {
-        true: 'dark:border-slate-500 border-slate-400 bg-slate-200 dark:bg-slate-800 dark:text-white',
-        false: 'border-transparent',
-      },
-    },
-  });
 </script>
 
 {#await peoplePromise}
@@ -85,7 +74,11 @@
         {#each peopleList as person (person.id)}
           <button
             type="button"
-            class={styles({ selected: selectedPeople.has(person.id) })}
+            class="flex flex-col items-center rounded-3xl border-2 hover:bg-subtle dark:hover:bg-immich-dark-primary/20 p-2 transition-all {selectedPeople.has(
+              person.id,
+            )
+              ? 'dark:border-slate-500 border-slate-400 bg-slate-200 dark:bg-slate-800 dark:text-white'
+              : 'border-transparent'}"
             onclick={() => togglePersonSelection(person.id)}
           >
             <ImageThumbnail circle shadow url={getPeopleThumbnailUrl(person)} altText={person.name} widthStyle="100%" />

web/src/lib/components/shared-components/single-grid-row.svelte

@@ -5,7 +5,7 @@
     children?: import('svelte').Snippet<[{ itemCount: number }]>;
   }
 
-  let { class: className, itemCount = $bindable(1), children }: Props = $props();
+  let { class: className = '', itemCount = $bindable(1), children }: Props = $props();
 
   let container: HTMLElement | undefined = $state();
   let contentRect: DOMRectReadOnly | undefined = $state();

web/src/lib/components/shared-components/upload-panel.svelte

@@ -30,7 +30,7 @@
       if ($stats.errors > 0) {
         toastManager.danger($t('upload_errors', { values: { count: $stats.errors } }));
       } else if ($stats.success > 0) {
-        toastManager.primary($t('upload_success'));
+        toastManager.success($t('upload_success'));
       }
       if ($stats.duplicates > 0) {
         toastManager.warning($t('upload_skipped_duplicates', { values: { count: $stats.duplicates } }));

web/src/lib/components/timeline/actions/FavoriteAction.svelte

@@ -42,7 +42,7 @@
 
       onFavorite?.(ids, isFavorite);
 
-      toastManager.primary(
+      toastManager.success(
         isFavorite
           ? $t('added_to_favorites_count', { values: { count: ids.length } })
           : $t('removed_from_favorites_count', { values: { count: ids.length } }),

web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte

@@ -38,7 +38,7 @@
       onRemove?.(ids);
 
       const count = results.filter(({ success }) => success).length;
-      toastManager.primary($t('assets_removed_count', { values: { count } }));
+      toastManager.success($t('assets_removed_count', { values: { count } }));
 
       clearSelect();
     } catch (error) {

web/src/lib/components/timeline/actions/RestoreAction.svelte

@@ -24,7 +24,7 @@
       const ids = [...getAssets()].map((a) => a.id);
       await restoreAssets({ bulkIdsDto: { ids } });
       onRestore?.(ids);
-      toastManager.primary($t('assets_restored_count', { values: { count: ids.length } }));
+      toastManager.success($t('assets_restored_count', { values: { count: ids.length } }));
       clearSelect();
     } catch (error) {
       handleError(error, $t('errors.unable_to_restore_assets'));

web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte

@@ -22,7 +22,7 @@
     try {
       await changePinCode({ pinCodeChangeDto: { pinCode: currentPinCode, newPinCode } });
       resetForm();
-      toastManager.primary($t('pin_code_changed_successfully'));
+      toastManager.success($t('pin_code_changed_successfully'));
     } catch (error) {
       handleError(error, $t('unable_to_change_pin_code'));
     } finally {

web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte

@@ -26,7 +26,7 @@
     isLoading = true;
     try {
       await setupPinCode({ pinCodeSetupDto: { pinCode: newPinCode } });
-      toastManager.primary($t('pin_code_setup_successfully'));
+      toastManager.success($t('pin_code_setup_successfully'));
       onCreated?.(newPinCode);
       resetForm();
     } catch (error) {

web/src/lib/components/user-settings-page/PinCodeInput.svelte

@@ -49,22 +49,25 @@
 
   const handleInput = (event: Event, index: number) => {
     const target = event.target as HTMLInputElement;
-    const digits = target.value.replaceAll(/\D/g, '').slice(0, pinLength - index);
+    let currentPinValue = target.value;
 
-    if (digits.length === 0) {
+    if (target.value.length > 1) {
+      currentPinValue = value.slice(0, 1);
+    }
+
+    if (Number.isNaN(Number(value))) {
       pinValues[index] = '';
-      value = pinValues.join('').trim();
+      target.value = '';
       return;
     }
 
-    for (let i = 0; i < digits.length; i++) {
-      pinValues[index + i] = digits[i];
-    }
+    pinValues[index] = currentPinValue;
 
     value = pinValues.join('').trim();
 
-    const lastFilledIndex = Math.min(index + digits.length, pinLength - 1);
-    pinCodeInputElements[lastFilledIndex]?.focus();
+    if (value && index < pinLength - 1) {
+      focusNext(index);
+    }
 
     if (value.length === pinLength) {
       onFilled?.(value);
@@ -101,6 +104,12 @@
         }
         return;
       }
+      default: {
+        if (Number.isNaN(Number(event.key))) {
+          event.preventDefault();
+        }
+        break;
+      }
     }
   }
 </script>
@@ -116,6 +125,7 @@
         {type}
         inputmode="numeric"
         pattern="[0-9]*"
+        maxlength="1"
         bind:this={pinCodeInputElements[index]}
         id="pin-code-{index}"
         class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-mono bg-white dark:bg-light"

web/src/lib/components/user-settings-page/device-list.svelte

@@ -25,7 +25,7 @@
 
     try {
       await deleteSession({ id: device.id });
-      toastManager.primary($t('logged_out_device'));
+      toastManager.success($t('logged_out_device'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_log_out_device'));
     } finally {
@@ -41,7 +41,7 @@
 
     try {
       await deleteAllSessions();
-      toastManager.primary($t('logged_out_all_devices'));
+      toastManager.success($t('logged_out_all_devices'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_log_out_all_devices'));
     } finally {

web/src/lib/components/user-settings-page/download-settings.svelte

@@ -25,7 +25,7 @@
       });
       $preferences = newPreferences;
 
-      toastManager.primary($t('saved_settings'));
+      toastManager.success($t('saved_settings'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_settings'));
     }

web/src/lib/components/user-settings-page/feature-settings.svelte

@@ -53,7 +53,7 @@
 
       $preferences = { ...data };
 
-      toastManager.primary($t('saved_settings'));
+      toastManager.success($t('saved_settings'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_settings'));
     }

web/src/lib/components/user-settings-page/notifications-settings.svelte

@@ -26,7 +26,7 @@
       $preferences.emailNotifications.albumInvite = data.emailNotifications.albumInvite;
       $preferences.emailNotifications.albumUpdate = data.emailNotifications.albumUpdate;
 
-      toastManager.primary($t('saved_settings'));
+      toastManager.success($t('saved_settings'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_settings'));
     }

web/src/lib/components/user-settings-page/oauth-settings.svelte

@@ -22,7 +22,7 @@
       try {
         loading = true;
         user = await oauth.link(globalThis.location);
-        toastManager.primary($t('linked_oauth_account'));
+        toastManager.success($t('linked_oauth_account'));
       } catch (error) {
         handleError(error, $t('errors.unable_to_link_oauth_account'));
       } finally {
@@ -36,7 +36,7 @@
   const handleUnlink = async () => {
     try {
       user = await oauth.unlink();
-      toastManager.primary($t('unlinked_oauth_account'));
+      toastManager.success($t('unlinked_oauth_account'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_unlink_account'));
     }

web/src/lib/components/user-settings-page/user-profile-settings.svelte

@@ -23,7 +23,7 @@
       Object.assign(editedUser, data);
       $user = data;
 
-      toastManager.primary($t('saved_profile'));
+      toastManager.success($t('saved_profile'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_profile'));
     }

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

@@ -142,7 +142,7 @@ export class EditManager {
 
       eventManager.emit('AssetEditsApplied', assetId);
 
-      toastManager.primary(t('editor_edits_applied_success'));
+      toastManager.success(t('editor_edits_applied_success'));
       this.hasAppliedEdits = true;
 
       return true;

web/src/lib/modals/AvatarEditModal.svelte

@@ -20,7 +20,7 @@
         await deleteProfileImage();
       }
 
-      toastManager.primary($t('saved_profile'));
+      toastManager.success($t('saved_profile'));
 
       $user = await updateMyUser({ userUpdateMeDto: { avatarColor: color } });
       onClose();

web/src/lib/modals/PersonMergeSuggestionModal.svelte

@@ -38,7 +38,7 @@
         id: personToBeMergedInto.id,
         mergePersonDto: { ids: [personToMerge.id] },
       });
-      toastManager.primary($t('merge_people_successfully'));
+      toastManager.success($t('merge_people_successfully'));
       onClose([personToMerge, personToBeMergedInto]);
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_name'));

web/src/lib/modals/ProfileImageCropperModal.svelte

@@ -69,7 +69,7 @@
       }
       const file = new File([blob], 'profile-picture.png', { type: 'image/png' });
       const { profileImagePath, profileChangedAt } = await createProfileImage({ createProfileImageDto: { file } });
-      toastManager.primary($t('profile_picture_set'));
+      toastManager.success($t('profile_picture_set'));
       $user.profileImagePath = profileImagePath;
       $user.profileChangedAt = profileChangedAt;
 

web/src/lib/modals/SearchFilterModal.svelte

@@ -1,5 +1,28 @@
+<script lang="ts" module>
+  import { MediaType, QueryType, validQueryTypes } from '$lib/constants';
+  import type { SearchDateFilter } from '../components/shared-components/search-bar/search-date-section.svelte';
+  import type { SearchDisplayFilters } from '../components/shared-components/search-bar/search-display-section.svelte';
+  import type { SearchLocationFilter } from '../components/shared-components/search-bar/search-location-section.svelte';
+
+  export type SearchFilter = {
+    query: string;
+    ocr?: string;
+    queryType: 'smart' | 'metadata' | 'description' | 'ocr';
+    personIds: SvelteSet<string>;
+    tagIds: SvelteSet<string> | null;
+    location: SearchLocationFilter;
+    camera: SearchCameraFilter;
+    date: SearchDateFilter;
+    display: SearchDisplayFilters;
+    mediaType: MediaType;
+    rating?: number | null;
+  };
+</script>
+
 <script lang="ts">
-  import SearchCameraSection from '$lib/components/shared-components/search-bar/search-camera-section.svelte';
+  import SearchCameraSection, {
+    type SearchCameraFilter,
+  } from '$lib/components/shared-components/search-bar/search-camera-section.svelte';
   import SearchDateSection from '$lib/components/shared-components/search-bar/search-date-section.svelte';
   import SearchDisplaySection from '$lib/components/shared-components/search-bar/search-display-section.svelte';
   import SearchLocationSection from '$lib/components/shared-components/search-bar/search-location-section.svelte';
@@ -8,9 +31,7 @@
   import SearchRatingsSection from '$lib/components/shared-components/search-bar/search-ratings-section.svelte';
   import SearchTagsSection from '$lib/components/shared-components/search-bar/search-tags-section.svelte';
   import SearchTextSection from '$lib/components/shared-components/search-bar/search-text-section.svelte';
-  import { MediaType, QueryType, validQueryTypes } from '$lib/constants';
   import { preferences } from '$lib/stores/user.store';
-  import type { SearchFilter } from '$lib/types';
   import { parseUtcDate } from '$lib/utils/date-time';
   import { generateId } from '$lib/utils/generate-id';
   import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
@@ -20,10 +41,10 @@
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
 
-  type Props = {
+  interface Props {
     searchQuery: MetadataSearchDto | SmartSearchDto;
     onClose: (search?: SmartSearchDto | MetadataSearchDto) => void;
-  };
+  }
 
   let { searchQuery, onClose }: Props = $props();
 
@@ -45,57 +66,52 @@
     return validQueryTypes.has(storedQueryType) ? storedQueryType : QueryType.SMART;
   }
 
-  const asFilter = (searchQuery: SmartSearchDto | MetadataSearchDto): SearchFilter => {
-    let query = '';
-    if ('query' in searchQuery && searchQuery.query) {
-      query = searchQuery.query;
-    }
-    if ('originalFileName' in searchQuery && searchQuery.originalFileName) {
-      query = searchQuery.originalFileName;
-    }
+  let query = '';
+  if ('query' in searchQuery && searchQuery.query) {
+    query = searchQuery.query;
+  }
+  if ('originalFileName' in searchQuery && searchQuery.originalFileName) {
+    query = searchQuery.originalFileName;
+  }
 
-    return {
-      query,
-      ocr: searchQuery.ocr,
-      queryType: defaultQueryType(),
-      queryAssetId: 'queryAssetId' in searchQuery ? searchQuery.queryAssetId : undefined,
-      personIds: new SvelteSet('personIds' in searchQuery ? searchQuery.personIds : []),
-      tagIds:
-        'tagIds' in searchQuery
-          ? searchQuery.tagIds === null
-            ? null
-            : new SvelteSet(searchQuery.tagIds)
-          : new SvelteSet(),
-      location: {
-        country: withNullAsUndefined(searchQuery.country),
-        state: withNullAsUndefined(searchQuery.state),
-        city: withNullAsUndefined(searchQuery.city),
-      },
-      camera: {
-        make: withNullAsUndefined(searchQuery.make),
-        model: withNullAsUndefined(searchQuery.model),
-        lensModel: withNullAsUndefined(searchQuery.lensModel),
-      },
-      date: {
-        takenAfter: searchQuery.takenAfter ? toStartOfDayDate(searchQuery.takenAfter) : undefined,
-        takenBefore: searchQuery.takenBefore ? toStartOfDayDate(searchQuery.takenBefore) : undefined,
-      },
-      display: {
-        isArchive: searchQuery.visibility === AssetVisibility.Archive,
-        isFavorite: searchQuery.isFavorite ?? false,
-        isNotInAlbum: 'isNotInAlbum' in searchQuery ? (searchQuery.isNotInAlbum ?? false) : false,
-      },
-      mediaType:
-        searchQuery.type === AssetTypeEnum.Image
-          ? MediaType.Image
-          : searchQuery.type === AssetTypeEnum.Video
-            ? MediaType.Video
-            : MediaType.All,
-      rating: searchQuery.rating,
-    };
-  };
-
-  let filter: SearchFilter = $state(asFilter(searchQuery));
+  let filter: SearchFilter = $state({
+    query,
+    ocr: searchQuery.ocr,
+    queryType: defaultQueryType(),
+    personIds: new SvelteSet('personIds' in searchQuery ? searchQuery.personIds : []),
+    tagIds:
+      'tagIds' in searchQuery
+        ? searchQuery.tagIds === null
+          ? null
+          : new SvelteSet(searchQuery.tagIds)
+        : new SvelteSet(),
+    location: {
+      country: withNullAsUndefined(searchQuery.country),
+      state: withNullAsUndefined(searchQuery.state),
+      city: withNullAsUndefined(searchQuery.city),
+    },
+    camera: {
+      make: withNullAsUndefined(searchQuery.make),
+      model: withNullAsUndefined(searchQuery.model),
+      lensModel: withNullAsUndefined(searchQuery.lensModel),
+    },
+    date: {
+      takenAfter: searchQuery.takenAfter ? toStartOfDayDate(searchQuery.takenAfter) : undefined,
+      takenBefore: searchQuery.takenBefore ? toStartOfDayDate(searchQuery.takenBefore) : undefined,
+    },
+    display: {
+      isArchive: searchQuery.visibility === AssetVisibility.Archive,
+      isFavorite: searchQuery.isFavorite ?? false,
+      isNotInAlbum: 'isNotInAlbum' in searchQuery ? (searchQuery.isNotInAlbum ?? false) : false,
+    },
+    mediaType:
+      searchQuery.type === AssetTypeEnum.Image
+        ? MediaType.Image
+        : searchQuery.type === AssetTypeEnum.Video
+          ? MediaType.Video
+          : MediaType.All,
+    rating: searchQuery.rating,
+  });
 
   const resetForm = () => {
     filter = {
@@ -129,7 +145,6 @@
 
     let payload: SmartSearchDto | MetadataSearchDto = {
       query: filter.queryType === 'smart' ? query : undefined,
-      queryAssetId: filter.queryAssetId || undefined,
       ocr: filter.queryType === 'ocr' ? query : undefined,
       originalFileName: filter.queryType === 'metadata' ? query : undefined,
       description: filter.queryType === 'description' ? query : undefined,

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

@@ -163,7 +163,7 @@ const notifyAddToAlbums = (
   } else if (results.error) {
     toastManager.warning($t('assets_cannot_be_added_to_albums', { values: { count: assetIds.length } }));
   } else {
-    toastManager.primary(
+    toastManager.success(
       $t('assets_added_to_albums_count', {
         values: { albumTotal: albumIds.length, assetTotal: assetIds.length },
       }),
@@ -269,7 +269,7 @@ export const handleDeleteAlbum = async (album: AlbumResponseDto, options?: { pro
     await deleteAlbum({ id: album.id });
     eventManager.emit('AlbumDelete', album);
     if (notify) {
-      toastManager.primary();
+      toastManager.success();
     }
     return true;
   } catch (error) {

web/src/lib/services/api-key.service.ts

@@ -80,7 +80,7 @@ export const handleUpdateApiKey = async (apiKey: { id: string }, dto: ApiKeyUpda
   try {
     const response = await updateApiKey({ id: apiKey.id, apiKeyUpdateDto: dto });
     eventManager.emit('ApiKeyUpdate', response);
-    toastManager.primary($t('saved_api_key'));
+    toastManager.success($t('saved_api_key'));
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_save_api_key'));
@@ -98,7 +98,7 @@ export const handleDeleteApiKey = async (apiKey: ApiKeyResponseDto) => {
   try {
     await deleteApiKey({ id: apiKey.id });
     eventManager.emit('ApiKeyDelete', apiKey);
-    toastManager.primary($t('removed_api_key', { values: { name: apiKey.name } }));
+    toastManager.success($t('removed_api_key', { values: { name: apiKey.name } }));
   } catch (error) {
     handleError(error, $t('errors.unable_to_remove_api_key'));
   }

web/src/lib/services/asset.service.spec.ts

@@ -11,7 +11,7 @@ import { vitest } from 'vitest';
 
 vitest.mock('@immich/ui', () => ({
   toastManager: {
-    primary: vitest.fn(),
+    success: vitest.fn(),
   },
 }));
 
@@ -67,7 +67,7 @@ describe('AssetService', () => {
       const asset = assetFactory.build({ originalFileName: 'asset.heic' });
       await handleDownloadAsset(asset, { edited: false });
       expect($t).toHaveBeenNthCalledWith(1, 'downloading_asset_filename', { values: { filename: 'asset.heic' } });
-      expect(toastManager.primary).toHaveBeenCalledWith('formatter');
+      expect(toastManager.success).toHaveBeenCalledWith('formatter');
     });
 
     it('should use the motion asset originalFileName when showing toasts', async () => {
@@ -79,7 +79,7 @@ describe('AssetService', () => {
       await handleDownloadAsset(asset, { edited: false });
       expect($t).toHaveBeenNthCalledWith(1, 'downloading_asset_filename', { values: { filename: 'asset.heic' } });
       expect($t).toHaveBeenNthCalledWith(2, 'downloading_asset_filename', { values: { filename: 'asset.mov' } });
-      expect(toastManager.primary).toHaveBeenCalledWith('formatter');
+      expect(toastManager.success).toHaveBeenCalledWith('formatter');
     });
   });
 });

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

@@ -334,7 +334,7 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
     }
 
     try {
-      toastManager.primary($t('downloading_asset_filename', { values: { filename } }));
+      toastManager.success($t('downloading_asset_filename', { values: { filename } }));
       downloadUrl(
         getBaseUrl() +
           `/assets/${id}/original` +
@@ -352,7 +352,7 @@ const handleFavorite = async (asset: AssetResponseDto) => {
 
   try {
     const response = await updateAsset({ id: asset.id, updateAssetDto: { isFavorite: true } });
-    toastManager.primary($t('added_to_favorites'));
+    toastManager.success($t('added_to_favorites'));
     eventManager.emit('AssetUpdate', response);
   } catch (error) {
     handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: asset.isFavorite } }));
@@ -364,7 +364,7 @@ const handleUnfavorite = async (asset: AssetResponseDto) => {
 
   try {
     const response = await updateAsset({ id: asset.id, updateAssetDto: { isFavorite: false } });
-    toastManager.primary($t('removed_from_favorites'));
+    toastManager.success($t('removed_from_favorites'));
     eventManager.emit('AssetUpdate', response);
   } catch (error) {
     handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: asset.isFavorite } }));
@@ -387,7 +387,7 @@ const handleRunAssetJob = async (dto: AssetJobsDto) => {
 
   try {
     await runAssetJobs({ assetJobsDto: dto });
-    toastManager.primary(getAssetJobMessage($t, dto.name));
+    toastManager.success(getAssetJobMessage($t, dto.name));
   } catch (error) {
     handleError(error, $t('errors.unable_to_submit_job'));
   }

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

@@ -8,7 +8,7 @@ export const handleCreateJob = async (dto: JobCreateDto) => {
 
   try {
     await createJob({ jobCreateDto: dto });
-    toastManager.primary($t('admin.job_created'));
+    toastManager.success($t('admin.job_created'));
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_submit_job'));