fix: don't delete offline library files from disk

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/auto-close.yml

@@ -0,0 +1,143 @@
+name: Auto-close PRs
+
+on:
+  pull_request_target: # zizmor: ignore[dangerous-triggers]
+    types: [opened, edited, labeled]
+
+permissions: {}
+
+jobs:
+  parse_template:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.action != 'labeled' && github.event.pull_request.head.repo.fork == true }}
+    permissions:
+      contents: read
+    outputs:
+      uses_template: ${{ steps.check.outputs.uses_template }}
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          sparse-checkout: .github/pull_request_template.md
+          sparse-checkout-cone-mode: false
+          persist-credentials: false
+
+      - name: Check required sections
+        id: check
+        env:
+          BODY: ${{ github.event.pull_request.body }}
+        run: |
+          OK=true
+          while IFS= read -r header; do
+            printf '%s\n' "$BODY" | grep -qF "$header" || OK=false
+          done < <(sed '/<!--/,/-->/d' .github/pull_request_template.md | grep "^## ")
+          echo "uses_template=$OK" >> "$GITHUB_OUTPUT"
+
+  close_template:
+    runs-on: ubuntu-latest
+    needs: parse_template
+    if: ${{ needs.parse_template.outputs.uses_template == 'false' && github.event.pull_request.state != 'closed' }}
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Comment and close
+        env:
+          GH_TOKEN: ${{ github.token }}
+          NODE_ID: ${{ github.event.pull_request.node_id }}
+        run: |
+          gh api graphql \
+            -f prId="$NODE_ID" \
+            -f body="This PR has been automatically closed as the description doesn't follow our template. After you edit it to match the template, the PR will automatically be reopened." \
+            -f query='
+              mutation CommentAndClosePR($prId: ID!, $body: String!) {
+                addComment(input: {
+                  subjectId: $prId,
+                  body: $body
+                }) {
+                  __typename
+                }
+                closePullRequest(input: {
+                  pullRequestId: $prId
+                }) {
+                  __typename
+                }
+              }'
+
+      - name: Add label
+        env:
+          GH_TOKEN: ${{ github.token }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+        run: gh pr edit "$PR_NUMBER" --add-label "auto-closed:template"
+
+  close_llm:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.action == 'labeled' && github.event.label.name == 'auto-closed:llm' }}
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Comment and close
+        env:
+          GH_TOKEN: ${{ github.token }}
+          NODE_ID: ${{ github.event.pull_request.node_id }}
+        run: |
+          gh api graphql \
+            -f prId="$NODE_ID" \
+            -f body="Thank you for your interest in contributing to Immich! Unfortunately this PR looks like it was generated using an LLM. As noted in our [CONTRIBUTING.md](https://github.com/immich-app/immich/blob/main/CONTRIBUTING.md#use-of-generative-ai), we request that you don't use LLMs to generate PRs as those are not a good use of maintainer time." \
+            -f query='
+              mutation CommentAndClosePR($prId: ID!, $body: String!) {
+                addComment(input: {
+                  subjectId: $prId,
+                  body: $body
+                }) {
+                  __typename
+                }
+                closePullRequest(input: {
+                  pullRequestId: $prId
+                }) {
+                  __typename
+                }
+              }'
+
+  reopen:
+    runs-on: ubuntu-latest
+    needs: parse_template
+    if: >-
+      ${{
+        needs.parse_template.outputs.uses_template == 'true'
+        && github.event.pull_request.state == 'closed'
+        && contains(github.event.pull_request.labels.*.name, 'auto-closed:template')
+      }}
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Remove template label
+        env:
+          GH_TOKEN: ${{ github.token }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+        run: gh pr edit "$PR_NUMBER" --remove-label "auto-closed:template" || true
+
+      - name: Check for remaining auto-closed labels
+        id: check_labels
+        env:
+          GH_TOKEN: ${{ github.token }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+        run: |
+          REMAINING=$(gh pr view "$PR_NUMBER" --json labels \
+            --jq '[.labels[].name | select(startswith("auto-closed:"))] | length')
+          echo "remaining=$REMAINING" >> "$GITHUB_OUTPUT"
+
+      - name: Reopen PR
+        if: ${{ steps.check_labels.outputs.remaining == '0' }}
+        env:
+          GH_TOKEN: ${{ github.token }}
+          NODE_ID: ${{ github.event.pull_request.node_id }}
+        run: |
+          gh api graphql \
+            -f prId="$NODE_ID" \
+            -f query='
+              mutation ReopenPR($prId: ID!) {
+                reopenPullRequest(input: {
+                  pullRequestId: $prId
+                }) {
+                  __typename
+                }
+              }'

.github/workflows/build-mobile.yml

@@ -51,14 +51,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
+        uses: immich-app/devtools/actions/pre-job@f50e3b600b6ac1763ddb8f3dfc69093512b967a1 # pre-job-action-v2.0.3
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -79,7 +79,7 @@ jobs:
 
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -103,7 +103,7 @@ jobs:
 
       - name: Restore Gradle Cache
         id: cache-gradle-restore
-        uses: actions/cache/restore@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
+        uses: actions/cache/restore@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5.0.4
         with:
           path: |
             ~/.gradle/caches
@@ -114,7 +114,7 @@ jobs:
           key: build-mobile-gradle-${{ runner.os }}-main
 
       - name: Setup Flutter SDK
-        uses: subosito/flutter-action@fd55f4c5af5b953cc57a2be44cb082c8f6635e8e # v2.21.0
+        uses: subosito/flutter-action@0ca7a949e71ae44c8e688a51c5e7e93b2c87e295 # v2.22.0
         with:
           channel: 'stable'
           flutter-version-file: ./mobile/pubspec.yaml
@@ -153,14 +153,14 @@ jobs:
           fi
 
       - name: Publish Android Artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: release-apk-signed
           path: mobile/build/app/outputs/flutter-apk/*.apk
 
       - name: Save Gradle Cache
         id: cache-gradle-save
-        uses: actions/cache/save@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
+        uses: actions/cache/save@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5.0.4
         if: github.ref == 'refs/heads/main'
         with:
           path: |
@@ -185,13 +185,13 @@ jobs:
         run: sudo xcode-select -s /Applications/Xcode_26.2.app/Contents/Developer
 
       - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ inputs.ref || github.sha }}
           persist-credentials: false
 
       - name: Setup Flutter SDK
-        uses: subosito/flutter-action@fd55f4c5af5b953cc57a2be44cb082c8f6635e8e # v2
+        uses: subosito/flutter-action@0ca7a949e71ae44c8e688a51c5e7e93b2c87e295 # v2.22.0
         with:
           channel: 'stable'
           flutter-version-file: ./mobile/pubspec.yaml
@@ -210,7 +210,7 @@ jobs:
         working-directory: ./mobile
 
       - name: Setup Ruby
-        uses: ruby/setup-ruby@v1
+        uses: ruby/setup-ruby@319994f95fa847cf3fb3cd3dbe89f6dcde9f178f # v1.295.0
         with:
           ruby-version: '3.3'
           bundler-cache: true
@@ -291,7 +291,7 @@ jobs:
           security delete-keychain build.keychain || true
 
       - name: Upload IPA artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: ios-release-ipa
           path: mobile/ios/Runner.ipa

.github/workflows/cache-cleanup.yml

@@ -19,7 +19,7 @@ jobs:
       actions: write
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}

.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@2a37bc82462349c03a533b8b608bebbaf57b3e60 # v0.0.33
         with:
           base: https://raw.githubusercontent.com/${{ github.repository }}/main/open-api/immich-openapi-specs.json
           revision: open-api/immich-openapi-specs.json

.github/workflows/check-pr-template.yml

@@ -1,97 +0,0 @@
-name: Check PR Template
-
-on:
-  pull_request_target: # zizmor: ignore[dangerous-triggers]
-    types: [opened, edited]
-
-permissions: {}
-
-env:
-  LABEL_ID: 'LA_kwDOGyI-8M8AAAACcAeOfg' # auto-closed:template
-
-jobs:
-  parse:
-    runs-on: ubuntu-latest
-    if: ${{ github.event.pull_request.head.repo.fork == true }}
-    permissions:
-      contents: read
-    outputs:
-      uses_template: ${{ steps.check.outputs.uses_template }}
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          sparse-checkout: .github/pull_request_template.md
-          sparse-checkout-cone-mode: false
-          persist-credentials: false
-
-      - name: Check required sections
-        id: check
-        env:
-          BODY: ${{ github.event.pull_request.body }}
-        run: |
-          OK=true
-          while IFS= read -r header; do
-            printf '%s\n' "$BODY" | grep -qF "$header" || OK=false
-          done < <(sed '/<!--/,/-->/d' .github/pull_request_template.md | grep "^## ")
-          echo "uses_template=$OK" >> "$GITHUB_OUTPUT"
-
-  act:
-    runs-on: ubuntu-latest
-    needs: parse
-    permissions:
-      pull-requests: write
-    steps:
-      - name: Close PR
-        if: ${{ needs.parse.outputs.uses_template == 'false' && github.event.pull_request.state != 'closed' }}
-        env:
-          GH_TOKEN: ${{ github.token }}
-          NODE_ID: ${{ github.event.pull_request.node_id }}
-        run: |
-          gh api graphql \
-            -f prId="$NODE_ID" \
-            -f labelId="$LABEL_ID" \
-            -f body="This PR has been automatically closed as the description doesn't follow our template. After you edit it to match the template, the PR will automatically be reopened." \
-            -f query='
-              mutation CommentAndClosePR($prId: ID!, $body: String!, $labelId: ID!) {
-                addComment(input: {
-                  subjectId: $prId,
-                  body: $body
-                }) {
-                  __typename
-                }
-                closePullRequest(input: {
-                  pullRequestId: $prId
-                }) {
-                  __typename
-                }
-                addLabelsToLabelable(input: {
-                  labelableId: $prId,
-                  labelIds: [$labelId]
-                }) {
-                  __typename
-                }
-              }'
-
-      - name: Reopen PR (sections now present, PR was auto-closed)
-        if: ${{ needs.parse.outputs.uses_template == 'true' && github.event.pull_request.state == 'closed' && contains(github.event.pull_request.labels.*.node_id, env.LABEL_ID) }}
-        env:
-          GH_TOKEN: ${{ github.token }}
-          NODE_ID: ${{ github.event.pull_request.node_id }}
-        run: |
-          gh api graphql \
-            -f prId="$NODE_ID" \
-            -f labelId="$LABEL_ID" \
-            -f query='
-              mutation ReopenPR($prId: ID!, $labelId: ID!) {
-                reopenPullRequest(input: {
-                  pullRequestId: $prId
-                }) {
-                  __typename
-                }
-                removeLabelsFromLabelable(input: {
-                  labelableId: $prId,
-                  labelIds: [$labelId]
-                }) {
-                  __typename
-                }
-              }'

.github/workflows/cli.yml

@@ -31,7 +31,7 @@ jobs:
         working-directory: ./cli
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -42,7 +42,7 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -71,7 +71,7 @@ jobs:
 
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -83,13 +83,13 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
+        uses: docker/setup-qemu-action@ce360397dd3f832beb865e1373c09c0e9f86d70a # v4.0.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4.0.0
         if: ${{ !github.event.pull_request.head.repo.fork }}
         with:
           registry: ghcr.io
@@ -104,7 +104,7 @@ jobs:
 
       - name: Generate docker image tags
         id: metadata
-        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
         with:
           flavor: |
             latest=false
@@ -115,7 +115,7 @@ jobs:
             type=raw,value=latest,enable=${{ github.event_name == 'release' }}
 
       - name: Build and push image
-        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7.0.0
         with:
           file: cli/Dockerfile
           platforms: linux/amd64,linux/arm64

.github/workflows/close-duplicates.yml

@@ -35,7 +35,7 @@ jobs:
     needs: [get_body, should_run]
     if: ${{ needs.should_run.outputs.should_run == 'true' }}
     container:
-      image: ghcr.io/immich-app/mdq:main@sha256:4f9860d04c88f7f87861f8ee84bfeedaec15ed7ca5ca87bc7db44b036f81645f
+      image: ghcr.io/immich-app/mdq:main@sha256:df7188ba88abb0800d73cc97d3633280f0c0c3d4c441d678225067bf154150fb
     outputs:
       checked: ${{ steps.get_checkbox.outputs.checked }}
     steps:

.github/workflows/close-llm-pr.yml

@@ -1,38 +0,0 @@
-name: Close LLM-generated PRs
-
-on:
-  pull_request_target:
-    types: [labeled]
-
-permissions: {}
-
-jobs:
-  comment_and_close:
-    runs-on: ubuntu-latest
-    if: ${{ github.event.label.name == 'llm-generated' }}
-    permissions:
-      pull-requests: write
-    steps:
-      - name: Comment and close
-        env:
-          GH_TOKEN: ${{ github.token }}
-          NODE_ID: ${{ github.event.pull_request.node_id }}
-        run: |
-          gh api graphql \
-            -f prId="$NODE_ID" \
-            -f body="Thank you for your interest in contributing to Immich! Unfortunately this PR looks like it was generated using an LLM. As noted in our [CONTRIBUTING.md](https://github.com/immich-app/immich/blob/main/CONTRIBUTING.md#use-of-generative-ai), we request that you don't use LLMs to generate PRs as those are not a good use of maintainer time." \
-            -f query='
-              mutation CommentAndClosePR($prId: ID!, $body: String!) {
-                addComment(input: {
-                  subjectId: $prId,
-                  body: $body
-                }) {
-                  __typename
-                }
-
-                closePullRequest(input: {
-                  pullRequestId: $prId
-                }) {
-                  __typename
-                }
-              }'

.github/workflows/codeql-analysis.yml

@@ -44,7 +44,7 @@ jobs:
 
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -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@b1bff81932f5cdfc8695c7752dcee935dcd061c8 # v4.33.0
         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@b1bff81932f5cdfc8695c7752dcee935dcd061c8 # v4.33.0
 
       # ℹ️ 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@b1bff81932f5cdfc8695c7752dcee935dcd061c8 # v4.33.0
         with:
           category: '/language:${{matrix.language}}'

.github/workflows/docker.yml

@@ -23,14 +23,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
+        uses: immich-app/devtools/actions/pre-job@f50e3b600b6ac1763ddb8f3dfc69093512b967a1 # pre-job-action-v2.0.3
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -60,7 +60,7 @@ jobs:
         suffix: ['', '-cuda', '-rocm', '-openvino', '-armnn', '-rknn']
     steps:
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4.0.0
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -90,7 +90,7 @@ jobs:
         suffix: ['']
     steps:
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4.0.0
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -132,7 +132,7 @@ jobs:
             suffixes: '-rocm'
             platforms: linux/amd64
             runner-mapping: '{"linux/amd64": "pokedex-large"}'
-    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@bd49ed7a5a6022149f79b6564df48177476a822b # multi-runner-build-workflow-v2.2.1
+    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@61a0fc2b41524edcc7c9fffb8bb178e6b0ccf21d # multi-runner-build-workflow-v2.3.0
     permissions:
       contents: read
       actions: read
@@ -155,7 +155,7 @@ jobs:
     name: Build and Push Server
     needs: pre-job
     if: ${{ fromJSON(needs.pre-job.outputs.should_run).server == true }}
-    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@bd49ed7a5a6022149f79b6564df48177476a822b # multi-runner-build-workflow-v2.2.1
+    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@61a0fc2b41524edcc7c9fffb8bb178e6b0ccf21d # multi-runner-build-workflow-v2.3.0
     permissions:
       contents: read
       actions: read

.github/workflows/docs-build.yml

@@ -21,14 +21,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
+        uses: immich-app/devtools/actions/pre-job@f50e3b600b6ac1763ddb8f3dfc69093512b967a1 # pre-job-action-v2.0.3
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -54,7 +54,7 @@ jobs:
 
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -67,7 +67,7 @@ jobs:
           fetch-depth: 0
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -86,7 +86,7 @@ jobs:
         run: pnpm build
 
       - name: Upload build output
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: docs-build-output
           path: docs/build/

.github/workflows/docs-deploy.yml

@@ -20,7 +20,7 @@ jobs:
       artifact: ${{ steps.get-artifact.outputs.result }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -119,7 +119,7 @@ jobs:
     if: ${{ fromJson(needs.checks.outputs.artifact).found && fromJson(needs.checks.outputs.parameters).shouldDeploy }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -131,7 +131,7 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup Mise
-        uses: immich-app/devtools/actions/use-mise@dab18118da6476e8237ac94080fd937983fecd42 # use-mise-action-v1.1.2
+        uses: immich-app/devtools/actions/use-mise@035e80a7d4355d5f087ffb95db9e4a0944c04e56 # use-mise-action-v1.1.3
 
       - name: Load parameters
         id: parameters

.github/workflows/docs-destroy.yml

@@ -17,7 +17,7 @@ jobs:
       pull-requests: write
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -29,7 +29,7 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup Mise
-        uses: immich-app/devtools/actions/use-mise@dab18118da6476e8237ac94080fd937983fecd42 # use-mise-action-v1.1.2
+        uses: immich-app/devtools/actions/use-mise@035e80a7d4355d5f087ffb95db9e4a0944c04e56 # use-mise-action-v1.1.3
 
       - name: Destroy Docs Subdomain
         env:

.github/workflows/fix-format.yml

@@ -16,7 +16,7 @@ jobs:
     steps:
       - name: Generate a token
         id: generate-token
-        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
+        uses: actions/create-github-app-token@f8d387b68d61c58ab83c6c016672934102569859 # v3.0.0
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -29,7 +29,7 @@ jobs:
           persist-credentials: true
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0

.github/workflows/merge-translations.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Generate a token
         id: generate_token
         if: ${{ inputs.skip != true }}
-        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
+        uses: actions/create-github-app-token@f8d387b68d61c58ab83c6c016672934102569859 # v3.0.0
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}

.github/workflows/pr-label-validation.yml

@@ -14,13 +14,13 @@ jobs:
       pull-requests: write
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Require PR to have a changelog label
-        uses: mheap/github-action-required-labels@8afbe8ae6ab7647d0c9f0cfa7c2f939650d22509 # v5.5.1
+        uses: mheap/github-action-required-labels@0ac283b4e65c1fb28ce6079dea5546ceca98ccbe # v5.5.2
         with:
           token: ${{ steps.token.outputs.token }}
           mode: exactly

.github/workflows/pr-labeler.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}

.github/workflows/prepare-release.yml

@@ -50,7 +50,7 @@ jobs:
     steps:
       - name: Generate a token
         id: generate-token
-        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
+        uses: actions/create-github-app-token@f8d387b68d61c58ab83c6c016672934102569859 # v3.0.0
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -63,10 +63,10 @@ jobs:
           ref: main
 
       - name: Install uv
-        uses: astral-sh/setup-uv@6ee6290f1cbc4156c0bdd66691b2c144ef8df19a # v7.4.0
+        uses: astral-sh/setup-uv@37802adc94f370d6bfd71619e3f0bf239e1f3b78 # v7.6.0
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -124,7 +124,7 @@ jobs:
     steps:
       - name: Generate a token
         id: generate-token
-        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
+        uses: actions/create-github-app-token@f8d387b68d61c58ab83c6c016672934102569859 # v3.0.0
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -136,13 +136,13 @@ jobs:
           persist-credentials: false
 
       - name: Download APK
-        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7.0.0
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         with:
           name: release-apk-signed
           github-token: ${{ steps.generate-token.outputs.token }}
 
       - name: Create draft release
-        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2.6.1
         with:
           draft: true
           tag_name: ${{ needs.bump_version.outputs.version }}

.github/workflows/preview-label.yaml

@@ -14,12 +14,12 @@ jobs:
       pull-requests: write
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
-      - uses: mshick/add-pr-comment@b8f338c590a895d50bcbfa6c5859251edc8952fc # v2.8.2
+      - uses: mshick/add-pr-comment@ffd016c7e151d97d69d21a843022fd4cd5b96fe5 # v3.9.0
         with:
           github-token: ${{ steps.token.outputs.token }}
           message-id: 'preview-status'
@@ -32,7 +32,7 @@ jobs:
       pull-requests: write
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -48,14 +48,14 @@ jobs:
               name: 'preview'
             })
 
-      - uses: mshick/add-pr-comment@b8f338c590a895d50bcbfa6c5859251edc8952fc # v2.8.2
+      - uses: mshick/add-pr-comment@ffd016c7e151d97d69d21a843022fd4cd5b96fe5 # v3.9.0
         if: ${{ github.event.pull_request.head.repo.fork }}
         with:
           github-token: ${{ steps.token.outputs.token }}
           message-id: 'preview-status'
           message: 'PRs from forks cannot have preview environments.'
 
-      - uses: mshick/add-pr-comment@b8f338c590a895d50bcbfa6c5859251edc8952fc # v2.8.2
+      - uses: mshick/add-pr-comment@ffd016c7e151d97d69d21a843022fd4cd5b96fe5 # v3.9.0
         if: ${{ !github.event.pull_request.head.repo.fork }}
         with:
           github-token: ${{ steps.token.outputs.token }}

.github/workflows/sdk.yml

@@ -19,7 +19,7 @@ jobs:
         working-directory: ./open-api/typescript-sdk
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -30,7 +30,7 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
 
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0

.github/workflows/static_analysis.yml

@@ -20,14 +20,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
+        uses: immich-app/devtools/actions/pre-job@f50e3b600b6ac1763ddb8f3dfc69093512b967a1 # pre-job-action-v2.0.3
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -49,7 +49,7 @@ jobs:
         working-directory: ./mobile
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -61,7 +61,7 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup Flutter SDK
-        uses: subosito/flutter-action@fd55f4c5af5b953cc57a2be44cb082c8f6635e8e # v2.21.0
+        uses: subosito/flutter-action@0ca7a949e71ae44c8e688a51c5e7e93b2c87e295 # v2.22.0
         with:
           channel: 'stable'
           flutter-version-file: ./mobile/pubspec.yaml

.github/workflows/test.yml

@@ -17,14 +17,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
+        uses: immich-app/devtools/actions/pre-job@f50e3b600b6ac1763ddb8f3dfc69093512b967a1 # pre-job-action-v2.0.3
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -63,7 +63,7 @@ jobs:
         working-directory: ./server
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -75,7 +75,7 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -108,7 +108,7 @@ jobs:
         working-directory: ./cli
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -119,7 +119,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -155,7 +155,7 @@ jobs:
         working-directory: ./cli
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -166,7 +166,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -197,7 +197,7 @@ jobs:
         working-directory: ./web
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -208,7 +208,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -241,7 +241,7 @@ jobs:
         working-directory: ./web
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -252,7 +252,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -279,7 +279,7 @@ jobs:
       contents: read
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -290,7 +290,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -327,7 +327,7 @@ jobs:
         working-directory: ./e2e
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -338,7 +338,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -373,7 +373,7 @@ jobs:
         working-directory: ./server
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -385,7 +385,7 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -412,7 +412,7 @@ jobs:
         runner: [ubuntu-latest, ubuntu-24.04-arm]
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -424,7 +424,7 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -464,7 +464,7 @@ jobs:
         run: docker compose logs --no-color > docker-compose-logs.txt
         working-directory: ./e2e
       - name: Archive Docker logs
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         if: always()
         with:
           name: e2e-server-docker-logs-${{ matrix.runner }}
@@ -484,7 +484,7 @@ jobs:
         runner: [ubuntu-latest, ubuntu-24.04-arm]
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -496,7 +496,7 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -522,7 +522,7 @@ jobs:
         run: pnpm test:web
         if: ${{ !cancelled() }}
       - name: Archive e2e test (web) results
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         if: success() || failure()
         with:
           name: e2e-web-test-results-${{ matrix.runner }}
@@ -533,7 +533,7 @@ jobs:
         run: pnpm test:web:ui
         if: ${{ !cancelled() }}
       - name: Archive ui test (web) results
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         if: success() || failure()
         with:
           name: e2e-ui-test-results-${{ matrix.runner }}
@@ -544,7 +544,7 @@ jobs:
         run: pnpm test:web:maintenance
         if: ${{ !cancelled() }}
       - name: Archive maintenance tests (web) results
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         if: success() || failure()
         with:
           name: e2e-maintenance-isolated-test-results-${{ matrix.runner }}
@@ -554,7 +554,7 @@ jobs:
         run: docker compose logs --no-color > docker-compose-logs.txt
         working-directory: ./e2e
       - name: Archive Docker logs
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         if: always()
         with:
           name: e2e-web-docker-logs-${{ matrix.runner }}
@@ -578,7 +578,7 @@ jobs:
       contents: read
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -588,7 +588,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup Flutter SDK
-        uses: subosito/flutter-action@fd55f4c5af5b953cc57a2be44cb082c8f6635e8e # v2.21.0
+        uses: subosito/flutter-action@0ca7a949e71ae44c8e688a51c5e7e93b2c87e295 # v2.22.0
         with:
           channel: 'stable'
           flutter-version-file: ./mobile/pubspec.yaml
@@ -610,7 +610,7 @@ jobs:
         working-directory: ./machine-learning
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -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@37802adc94f370d6bfd71619e3f0bf239e1f3b78 # v7.6.0
         with:
           python-version: 3.11
       - name: Install dependencies
@@ -650,7 +650,7 @@ jobs:
         working-directory: ./.github
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -661,7 +661,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -680,7 +680,7 @@ jobs:
       contents: read
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -701,7 +701,7 @@ jobs:
       contents: read
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -712,7 +712,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -763,7 +763,7 @@ jobs:
         working-directory: ./server
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -774,7 +774,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:

.github/workflows/weblate-lock.yml

@@ -24,14 +24,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
+        uses: immich-app/devtools/actions/pre-job@f50e3b600b6ac1763ddb8f3dfc69093512b967a1 # pre-job-action-v2.0.3
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -47,7 +47,7 @@ jobs:
     if: ${{ fromJSON(needs.pre-job.outputs.should_run).i18n == true }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
+        uses: immich-app/devtools/actions/create-workflow-token@57ff6ebfd507b045514442683ff06ff1b2f6efbd # create-workflow-token-action-v1.0.2
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/cli",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Command Line Interface (CLI) for Immich",
   "type": "module",
   "exports": "./dist/index.js",
@@ -35,8 +35,7 @@
     "prettier-plugin-organize-imports": "^4.0.0",
     "typescript": "^5.3.3",
     "typescript-eslint": "^8.28.0",
-    "vite": "^7.0.0",
+    "vite": "^8.0.0",
-    "vite-tsconfig-paths": "^6.0.0",
     "vitest": "^4.0.0",
     "vitest-fetch-mock": "^0.4.0",
     "yaml": "^2.3.1"

cli/vite.config.ts

@@ -1,10 +1,12 @@
 import { defineConfig, UserConfig } from 'vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  resolve: { alias: { src: '/src' } },
+  resolve: {
+    alias: { src: '/src' },
+    tsconfigPaths: true,
+  },
   build: {
-    rollupOptions: {
+    rolldownOptions: {
       input: 'src/index.ts',
       output: {
         dir: 'dist',
@@ -16,7 +18,6 @@ export default defineConfig({
     // bundle everything except for Node built-ins
     noExternal: /^(?!node:).*$/,
   },
-  plugins: [tsconfigPaths()],
   test: {
     name: 'cli:unit',
     globals: true,

docs/docs/install/requirements.md

@@ -8,7 +8,7 @@ Hardware and software requirements for Immich:
 
 ## Hardware
 
-- **OS**: Recommended Linux or \*nix operating system (Ubuntu, Debian, etc).
+- **OS**: Recommended Linux or \*nix 64-bit operating system (Ubuntu, Debian, etc).
   - Non-Linux OSes tend to provide a poor Docker experience and are strongly discouraged.
     Our ability to assist with setup or troubleshooting on non-Linux OSes will be severely reduced.
     If you still want to try to use a non-Linux OS, you can set it up as follows:
@@ -19,6 +19,10 @@ Hardware and software requirements for Immich:
     If you have issues, we recommend that you switch to a supported VM deployment.
 - **RAM**: Minimum 6GB, recommended 8GB.
 - **CPU**: Minimum 2 cores, recommended 4 cores.
+  - Immich runs on the `amd64` and `arm64` platforms.
+    Since `v2.6`, the machine learning container on `amd64` requires the `>= x86-64-v2` [microarchitecture level](https://en.wikipedia.org/wiki/X86-64#Microarchitecture_levels).
+    Most CPUs released since ~2012 support this microarchitecture.
+    If you are using a virtual machine, ensure you have selected a [supported microarchitecture](https://pve.proxmox.com/pve-docs/chapter-qm.html#_qemu_cpu_types).
 - **Storage**: Recommended Unix-compatible filesystem (EXT4, ZFS, APFS, etc.) with support for user/group ownership and permissions.
   - The generation of thumbnails and transcoded video can increase the size of the photo library by 10-20% on average.
 

docs/static/archived-versions.json

@@ -1,7 +1,7 @@
 [
   {
-    "label": "v2.6.1",
+    "label": "v2.6.2",
-    "url": "https://docs.v2.6.1.archive.immich.app"
+    "url": "https://docs.v2.6.2.archive.immich.app"
   },
   {
     "label": "v2.5.6",

e2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "immich-e2e",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "",
   "main": "index.js",
   "type": "module",

e2e/src/specs/server/api/album.e2e-spec.ts

@@ -524,14 +524,19 @@ describe('/albums', () => {
       expect(body).toEqual(errorDto.badRequest('Not found or no album.update access'));
     });
 
-    it('should not be able to update as an editor', async () => {
+    it('should be able to update as an editor', async () => {
       const { status, body } = await request(app)
         .patch(`/albums/${user1Albums[0].id}`)
         .set('Authorization', `Bearer ${user2.accessToken}`)
         .send({ albumName: 'New album name' });
 
-      expect(status).toBe(400);
+      expect(status).toBe(200);
-      expect(body).toEqual(errorDto.badRequest('Not found or no album.update access'));
+      expect(body).toEqual(
+        expect.objectContaining({
+          id: user1Albums[0].id,
+          albumName: 'New album name',
+        }),
+      );
     });
   });
 

e2e/src/specs/server/api/library.e2e-spec.ts

@@ -859,6 +859,48 @@ describe('/libraries', () => {
       ]);
     });
 
+    it('should not delete excluded external files from disk when trash is emptied', async () => {
+      const relativePath = 'temp/offline-empty-trash/offline.png';
+      const filePath = `${testAssetDir}/${relativePath}`;
+      const internalFilePath = `${testAssetDirInternal}/${relativePath}`;
+
+      utils.createImageFile(filePath);
+
+      const library = await utils.createLibrary(admin.accessToken, {
+        ownerId: admin.userId,
+        importPaths: [`${testAssetDirInternal}/temp/offline-empty-trash`],
+      });
+
+      await utils.scan(admin.accessToken, library.id);
+
+      const { assets } = await utils.searchAssets(admin.accessToken, {
+        libraryId: library.id,
+        originalPath: internalFilePath,
+      });
+      expect(assets.count).toBe(1);
+
+      await utils.updateLibrary(admin.accessToken, library.id, {
+        exclusionPatterns: ['**/offline-empty-trash/**'],
+      });
+
+      await utils.scan(admin.accessToken, library.id);
+
+      const trashedAsset = await utils.getAssetInfo(admin.accessToken, assets.items[0].id);
+      expect(trashedAsset.isTrashed).toBe(true);
+      expect(trashedAsset.isOffline).toBe(true);
+
+      const { status } = await request(app).post('/trash/empty').set('Authorization', `Bearer ${admin.accessToken}`);
+      expect(status).toBe(200);
+
+      await utils.waitForQueueFinish(admin.accessToken, 'backgroundTask');
+
+      expect(existsSync(filePath)).toBe(true);
+
+      if (existsSync(filePath)) {
+        utils.removeImageFile(filePath);
+      }
+    });
+
     it('should not set an asset offline if its file exists, is in an import path, and not covered by an exclusion pattern', async () => {
       const library = await utils.createLibrary(admin.accessToken, {
         ownerId: admin.userId,

e2e/src/specs/web/duplicates.e2e-spec.ts

@@ -0,0 +1,51 @@
+import { AssetMediaResponseDto, LoginResponseDto, updateAssets } from '@immich/sdk';
+import { expect, test } from '@playwright/test';
+import crypto from 'node:crypto';
+import { asBearerAuth, utils } from 'src/utils';
+
+test.describe('Duplicates Utility', () => {
+  let admin: LoginResponseDto;
+  let firstAsset: AssetMediaResponseDto;
+  let secondAsset: AssetMediaResponseDto;
+
+  test.beforeAll(async () => {
+    utils.initSdk();
+    await utils.resetDatabase();
+    admin = await utils.adminSetup();
+  });
+
+  test.beforeEach(async ({ context }) => {
+    [firstAsset, secondAsset] = await Promise.all([
+      utils.createAsset(admin.accessToken, { deviceAssetId: 'duplicate-a' }),
+      utils.createAsset(admin.accessToken, { deviceAssetId: 'duplicate-b' }),
+    ]);
+
+    await updateAssets(
+      {
+        assetBulkUpdateDto: {
+          ids: [firstAsset.id, secondAsset.id],
+          duplicateId: crypto.randomUUID(),
+        },
+      },
+      { headers: asBearerAuth(admin.accessToken) },
+    );
+
+    await utils.setAuthCookies(context, admin.accessToken);
+  });
+
+  test('navigates with arrow keys between duplicate preview assets', async ({ page }) => {
+    await page.goto('/utilities/duplicates');
+    await page.getByRole('button', { name: 'View' }).first().click();
+    await page.waitForSelector('#immich-asset-viewer');
+
+    const getViewedAssetId = () => new URL(page.url()).pathname.split('/').at(-1) ?? '';
+    const initialAssetId = getViewedAssetId();
+    expect([firstAsset.id, secondAsset.id]).toContain(initialAssetId);
+
+    await page.keyboard.press('ArrowRight');
+    await expect.poll(getViewedAssetId).not.toBe(initialAssetId);
+
+    await page.keyboard.press('ArrowLeft');
+    await expect.poll(getViewedAssetId).toBe(initialAssetId);
+  });
+});

e2e/src/ui/generators/timeline.ts

@@ -20,7 +20,7 @@ export {
   toColumnarFormat,
 } from './timeline/rest-response';
 
-export type { Changes, FaceData } from './timeline/rest-response';
+export type { Changes } from './timeline/rest-response';
 
 export { randomImage, randomImageFromString, randomPreview, randomThumbnail } from './timeline/images';
 

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

@@ -7,10 +7,8 @@ import {
   AssetVisibility,
   UserAvatarColor,
   type AlbumResponseDto,
-  type AssetFaceWithoutPersonResponseDto,
   type AssetResponseDto,
   type ExifResponseDto,
-  type PersonWithFacesResponseDto,
   type TimeBucketAssetResponseDto,
   type TimeBucketsResponseDto,
   type UserResponseDto,
@@ -286,16 +284,7 @@ const createDefaultOwner = (ownerId: string) => {
  * Convert a TimelineAssetConfig to a full AssetResponseDto
  * This matches the response from GET /api/assets/:id
  */
-export type FaceData = {
+export function toAssetResponseDto(asset: MockTimelineAsset, owner?: UserResponseDto): AssetResponseDto {
-  people: PersonWithFacesResponseDto[];
-  unassignedFaces: AssetFaceWithoutPersonResponseDto[];
-};
-
-export function toAssetResponseDto(
-  asset: MockTimelineAsset,
-  owner?: UserResponseDto,
-  faceData?: FaceData,
-): AssetResponseDto {
   const now = new Date().toISOString();
 
   // Default owner if not provided
@@ -349,8 +338,8 @@ export function toAssetResponseDto(
     exifInfo,
     livePhotoVideoId: asset.livePhotoVideoId,
     tags: [],
-    people: faceData?.people ?? [],
+    people: [],
-    unassignedFaces: faceData?.unassignedFaces ?? [],
+    unassignedFaces: [],
     stack: asset.stack,
     isOffline: false,
     hasMetadata: true,

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

@@ -1,6 +1,5 @@
-import type { AssetFaceResponseDto, AssetResponseDto, PersonWithFacesResponseDto, SourceType } from '@immich/sdk';
 import { BrowserContext } from '@playwright/test';
-import { type FaceData, randomThumbnail } from 'src/ui/generators/timeline';
+import { randomThumbnail } from 'src/ui/generators/timeline';
 
 // Minimal valid H.264 MP4 (8x8px, 1 frame) that browsers can decode to get videoWidth/videoHeight
 const MINIMAL_MP4_BASE64 =
@@ -126,84 +125,3 @@ export const setupFaceEditorMockApiRoutes = async (
     });
   });
 };
-
-export type MockFaceSpec = {
-  personId: string;
-  personName: string;
-  faceId: string;
-  boundingBoxX1: number;
-  boundingBoxY1: number;
-  boundingBoxX2: number;
-  boundingBoxY2: number;
-};
-
-const toPersonResponseDto = (spec: MockFaceSpec) => ({
-  id: spec.personId,
-  name: spec.personName,
-  birthDate: null,
-  isHidden: false,
-  thumbnailPath: `/upload/thumbs/${spec.personId}.jpeg`,
-  updatedAt: '2025-01-01T00:00:00.000Z',
-});
-
-const toBoundingBox = (spec: MockFaceSpec, imageWidth: number, imageHeight: number) => ({
-  id: spec.faceId,
-  imageWidth,
-  imageHeight,
-  boundingBoxX1: spec.boundingBoxX1,
-  boundingBoxY1: spec.boundingBoxY1,
-  boundingBoxX2: spec.boundingBoxX2,
-  boundingBoxY2: spec.boundingBoxY2,
-});
-
-export const createMockFaceData = (specs: MockFaceSpec[], imageWidth: number, imageHeight: number): FaceData => {
-  const people: PersonWithFacesResponseDto[] = specs.map((spec) => ({
-    ...toPersonResponseDto(spec),
-    faces: [toBoundingBox(spec, imageWidth, imageHeight)],
-  }));
-
-  return { people, unassignedFaces: [] };
-};
-
-export const createMockAssetFaces = (
-  specs: MockFaceSpec[],
-  imageWidth: number,
-  imageHeight: number,
-): AssetFaceResponseDto[] => {
-  return specs.map((spec) => ({
-    ...toBoundingBox(spec, imageWidth, imageHeight),
-    person: toPersonResponseDto(spec),
-    sourceType: 'machine-learning' as SourceType,
-  }));
-};
-
-export const setupGetFacesMockApiRoute = async (context: BrowserContext, faces: AssetFaceResponseDto[]) => {
-  await context.route('**/api/faces?*', async (route, request) => {
-    if (request.method() !== 'GET') {
-      return route.fallback();
-    }
-    return route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      json: faces,
-    });
-  });
-};
-
-export const setupFaceOverlayMockApiRoutes = async (context: BrowserContext, assetDto: AssetResponseDto) => {
-  await context.route('**/api/assets/*', async (route, request) => {
-    if (request.method() !== 'GET') {
-      return route.fallback();
-    }
-    const url = new URL(request.url());
-    const assetId = url.pathname.split('/').at(-1);
-    if (assetId !== assetDto.id) {
-      return route.fallback();
-    }
-    return route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      json: assetDto,
-    });
-  });
-};

e2e/src/ui/mock-network/ocr-network.ts

@@ -1,55 +0,0 @@
-import { faker } from '@faker-js/faker';
-import type { AssetOcrResponseDto } from '@immich/sdk';
-import { BrowserContext } from '@playwright/test';
-
-export type MockOcrBox = {
-  text: string;
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-  x3: number;
-  y3: number;
-  x4: number;
-  y4: number;
-};
-
-export const createMockOcrData = (assetId: string, boxes: MockOcrBox[]): AssetOcrResponseDto[] => {
-  return boxes.map((box) => ({
-    id: faker.string.uuid(),
-    assetId,
-    x1: box.x1,
-    y1: box.y1,
-    x2: box.x2,
-    y2: box.y2,
-    x3: box.x3,
-    y3: box.y3,
-    x4: box.x4,
-    y4: box.y4,
-    boxScore: 0.95,
-    textScore: 0.9,
-    text: box.text,
-  }));
-};
-
-export const setupOcrMockApiRoutes = async (
-  context: BrowserContext,
-  ocrDataByAssetId: Map<string, AssetOcrResponseDto[]>,
-) => {
-  await context.route('**/assets/*/ocr', async (route, request) => {
-    if (request.method() !== 'GET') {
-      return route.fallback();
-    }
-    const url = new URL(request.url());
-    const segments = url.pathname.split('/');
-    const assetIdIndex = segments.indexOf('assets') + 1;
-    const assetId = segments[assetIdIndex];
-
-    const ocrData = ocrDataByAssetId.get(assetId) ?? [];
-    return route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      json: ocrData,
-    });
-  });
-};

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

@@ -10,21 +10,16 @@ import { assetViewerUtils } from '../timeline/utils';
 import { setupAssetViewerFixture } from './utils';
 
 const waitForSelectorTransition = async (page: Page) => {
-  await expect(page.locator('#face-editor-data')).toHaveAttribute('data-face-width', /^[1-9]/, { timeout: 10_000 });
+  await page.waitForFunction(
-  await page.locator('#face-selector').evaluate(
+    () => {
-    (el) =>
+      const selector = document.querySelector('#face-selector') as HTMLElement | null;
-      new Promise<void>((resolve) => {
+      if (!selector) {
-        requestAnimationFrame(() =>
+        return false;
-          requestAnimationFrame(() => {
+      }
-            const animations = el.getAnimations();
+      return selector.getAnimations({ subtree: false }).every((animation) => animation.playState === 'finished');
-            if (animations.length === 0) {
+    },
-              resolve();
+    undefined,
-              return;
+    { timeout: 1000, polling: 50 },
-            }
-            void Promise.all(animations.map((a) => a.finished)).then(() => resolve());
-          }),
-        );
-      }),
   );
 };
 
@@ -100,7 +95,7 @@ test.describe('face-editor', () => {
     await page.mouse.down();
     await page.mouse.move(centerX + deltaX, centerY + deltaY, { steps: 5 });
     await page.mouse.up();
-    await waitForSelectorTransition(page);
+    await page.waitForTimeout(300);
   };
 
   test('Face editor opens with person list', async ({ page }) => {
@@ -154,7 +149,7 @@ test.describe('face-editor', () => {
     await expect(page.getByRole('dialog')).toBeVisible();
   });
 
-  test('Confirming tag calls createFace API with valid coordinates and closes editor', async ({ page }) => {
+  test('Confirming tag calls createFace API and closes editor', async ({ page }) => {
     const asset = selectRandom(fixture.assets, rng);
     await openFaceEditor(page, asset);
 
@@ -168,15 +163,8 @@ test.describe('face-editor', () => {
     await expect(page.locator('#face-editor')).toBeHidden();
 
     expect(faceCreateCapture.requests).toHaveLength(1);
-    const request = faceCreateCapture.requests[0];
+    expect(faceCreateCapture.requests[0].assetId).toBe(asset.id);
-    expect(request.assetId).toBe(asset.id);
+    expect(faceCreateCapture.requests[0].personId).toBe(personToTag.id);
-    expect(request.personId).toBe(personToTag.id);
-    expect(request.x).toBeGreaterThanOrEqual(0);
-    expect(request.y).toBeGreaterThanOrEqual(0);
-    expect(request.width).toBeGreaterThan(0);
-    expect(request.height).toBeGreaterThan(0);
-    expect(request.x + request.width).toBeLessThanOrEqual(request.imageWidth);
-    expect(request.y + request.height).toBeLessThanOrEqual(request.imageHeight);
   });
 
   test('Cancel button closes face editor', async ({ page }) => {
@@ -294,39 +282,4 @@ test.describe('face-editor', () => {
     expect(afterDrag.left).toBeGreaterThan(beforeDrag.left + 50);
     expect(afterDrag.top).toBeGreaterThan(beforeDrag.top + 20);
   });
-
-  test('Cancel on confirmation dialog keeps face editor open', async ({ page }) => {
-    const asset = selectRandom(fixture.assets, rng);
-    await openFaceEditor(page, asset);
-
-    const personToTag = mockPeople[0];
-    await page.locator('#face-selector').getByText(personToTag.name).click();
-
-    await expect(page.getByRole('dialog')).toBeVisible();
-    await page
-      .getByRole('dialog')
-      .getByRole('button', { name: /cancel/i })
-      .click();
-
-    await expect(page.getByRole('dialog')).toBeHidden();
-    await expect(page.locator('#face-selector')).toBeVisible();
-    await expect(page.locator('#face-editor')).toBeVisible();
-    expect(faceCreateCapture.requests).toHaveLength(0);
-  });
-
-  test('Clicking on face rect center does not reposition it', async ({ page }) => {
-    const asset = selectRandom(fixture.assets, rng);
-    await openFaceEditor(page, asset);
-
-    const beforeClick = await getFaceBoxRect(page);
-    const centerX = beforeClick.left + beforeClick.width / 2;
-    const centerY = beforeClick.top + beforeClick.height / 2;
-
-    await page.mouse.click(centerX, centerY);
-    await waitForSelectorTransition(page);
-
-    const afterClick = await getFaceBoxRect(page);
-    expect(Math.abs(afterClick.left - beforeClick.left)).toBeLessThan(3);
-    expect(Math.abs(afterClick.top - beforeClick.top)).toBeLessThan(3);
-  });
 });

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

@@ -1,340 +0,0 @@
-import { expect, test } from '@playwright/test';
-import { toAssetResponseDto } from 'src/ui/generators/timeline';
-import {
-  createMockAssetFaces,
-  createMockFaceData,
-  createMockPeople,
-  type MockFaceSpec,
-  setupFaceEditorMockApiRoutes,
-  setupFaceOverlayMockApiRoutes,
-  setupGetFacesMockApiRoute,
-} from 'src/ui/mock-network/face-editor-network';
-import { assetViewerUtils } from '../timeline/utils';
-import { ensureDetailPanelVisible, setupAssetViewerFixture } from './utils';
-
-test.describe.configure({ mode: 'parallel' });
-
-const FACE_SPECS: MockFaceSpec[] = [
-  {
-    personId: 'person-alice',
-    personName: 'Alice Johnson',
-    faceId: 'face-alice',
-    boundingBoxX1: 1000,
-    boundingBoxY1: 500,
-    boundingBoxX2: 1500,
-    boundingBoxY2: 1200,
-  },
-  {
-    personId: 'person-bob',
-    personName: 'Bob Smith',
-    faceId: 'face-bob',
-    boundingBoxX1: 2000,
-    boundingBoxY1: 800,
-    boundingBoxX2: 2400,
-    boundingBoxY2: 1600,
-  },
-];
-
-const setupFaceMocks = async (
-  context: import('@playwright/test').BrowserContext,
-  fixture: ReturnType<typeof setupAssetViewerFixture>,
-) => {
-  const mockPeople = createMockPeople(4);
-  const faceData = createMockFaceData(
-    FACE_SPECS,
-    fixture.primaryAssetDto.width ?? 3000,
-    fixture.primaryAssetDto.height ?? 4000,
-  );
-  const assetDtoWithFaces = toAssetResponseDto(fixture.primaryAsset, undefined, faceData);
-  await setupFaceOverlayMockApiRoutes(context, assetDtoWithFaces);
-  await setupFaceEditorMockApiRoutes(context, mockPeople, { requests: [] });
-};
-
-test.describe('face overlay bounding boxes', () => {
-  const fixture = setupAssetViewerFixture(901);
-
-  test.beforeEach(async ({ context }) => {
-    await setupFaceMocks(context, fixture);
-  });
-
-  test('face overlay divs render with correct aria labels', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const aliceOverlay = page.getByLabel('Person: Alice Johnson');
-    const bobOverlay = page.getByLabel('Person: Bob Smith');
-
-    await expect(aliceOverlay).toBeVisible();
-    await expect(bobOverlay).toBeVisible();
-  });
-
-  test('face overlay shows border on hover', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const aliceOverlay = page.getByLabel('Person: Alice Johnson');
-    await expect(aliceOverlay).toBeVisible();
-
-    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
-    await expect(activeBorder).toHaveCount(0);
-
-    await aliceOverlay.hover();
-    await expect(activeBorder).toHaveCount(1);
-  });
-
-  test('face name tooltip appears on hover', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const aliceOverlay = page.getByLabel('Person: Alice Johnson');
-    await expect(aliceOverlay).toBeVisible();
-
-    await aliceOverlay.hover();
-
-    const nameTooltip = page.locator('[data-viewer-content]').getByText('Alice Johnson');
-    await expect(nameTooltip).toBeVisible();
-  });
-
-  test('face overlays hidden in face edit mode', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const aliceOverlay = page.getByLabel('Person: Alice Johnson');
-    await expect(aliceOverlay).toBeVisible();
-
-    await ensureDetailPanelVisible(page);
-    await page.getByLabel('Tag people').click();
-    await page.locator('#face-selector').waitFor({ state: 'visible' });
-
-    await expect(aliceOverlay).toBeHidden();
-  });
-
-  test('face overlay hover works after exiting face edit mode', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const aliceOverlay = page.getByLabel('Person: Alice Johnson');
-    await expect(aliceOverlay).toBeVisible();
-
-    await ensureDetailPanelVisible(page);
-    await page.getByLabel('Tag people').click();
-    await page.locator('#face-selector').waitFor({ state: 'visible' });
-    await expect(aliceOverlay).toBeHidden();
-
-    await page.getByRole('button', { name: /cancel/i }).click();
-    await expect(page.locator('#face-selector')).toBeHidden();
-
-    await expect(aliceOverlay).toBeVisible();
-
-    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
-    await expect(activeBorder).toHaveCount(0);
-    await aliceOverlay.hover();
-    await expect(activeBorder).toHaveCount(1);
-  });
-});
-
-test.describe('zoom and face editor interaction', () => {
-  const fixture = setupAssetViewerFixture(902);
-
-  test.beforeEach(async ({ context }) => {
-    await setupFaceMocks(context, fixture);
-  });
-
-  test('zoom is preserved when entering face edit mode', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const { width, height } = page.viewportSize()!;
-    await page.mouse.move(width / 2, height / 2);
-    await page.mouse.wheel(0, -1);
-
-    const imgLocator = page.locator('[data-viewer-content] img[data-testid="preview"]');
-    await expect(async () => {
-      const transform = await imgLocator.evaluate((element) => {
-        return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
-      });
-      expect(transform).not.toBe('none');
-      expect(transform).not.toBe('');
-    }).toPass({ timeout: 2000 });
-
-    await ensureDetailPanelVisible(page);
-    await page.getByLabel('Tag people').click();
-    await page.locator('#face-selector').waitFor({ state: 'visible' });
-
-    await expect(page.locator('#face-editor')).toBeVisible();
-
-    const afterTransform = await imgLocator.evaluate((element) => {
-      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
-    });
-    expect(afterTransform).not.toBe('none');
-  });
-
-  test('modifier+drag pans zoomed image without repositioning face rect', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const { width, height } = page.viewportSize()!;
-    await page.mouse.move(width / 2, height / 2);
-    for (let i = 0; i < 10; i++) {
-      await page.mouse.wheel(0, -3);
-    }
-
-    const imgLocator = page.locator('[data-viewer-content] img[data-testid="preview"]');
-    await expect(async () => {
-      const transform = await imgLocator.evaluate((element) => {
-        return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
-      });
-      expect(transform).not.toBe('none');
-    }).toPass({ timeout: 2000 });
-
-    await ensureDetailPanelVisible(page);
-    await page.getByLabel('Tag people').click();
-    await page.locator('#face-selector').waitFor({ state: 'visible' });
-
-    const dataEl = page.locator('#face-editor-data');
-    await expect(dataEl).toHaveAttribute('data-face-width', /^[1-9]/);
-    const beforeLeft = Number(await dataEl.getAttribute('data-face-left'));
-    const beforeTop = Number(await dataEl.getAttribute('data-face-top'));
-    const transformBefore = await imgLocator.evaluate((element) => {
-      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
-    });
-
-    const panModifier = await page.evaluate(() =>
-      /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) ? 'Meta' : 'Control',
-    );
-    await page.keyboard.down(panModifier);
-
-    // Verify face editor becomes transparent to pointer events
-    await expect(async () => {
-      const pe = await dataEl.evaluate((el) => getComputedStyle(el).pointerEvents);
-      expect(pe).toBe('none');
-    }).toPass({ timeout: 2000 });
-
-    await page.mouse.move(width / 2, height / 2);
-    await page.mouse.down();
-    await page.mouse.move(width / 2 + 100, height / 2 + 50, { steps: 5 });
-    await page.mouse.up();
-    await page.keyboard.up(panModifier);
-
-    const transformAfter = await imgLocator.evaluate((element) => {
-      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
-    });
-    expect(transformAfter).not.toBe(transformBefore);
-
-    // Extract translate values from matrix(a, b, c, d, tx, ty)
-    const parseTranslate = (matrix: string) => {
-      const values =
-        matrix
-          .match(/matrix\((.+)\)/)?.[1]
-          .split(',')
-          .map(Number) ?? [];
-      return { tx: values[4], ty: values[5] };
-    };
-    const panBefore = parseTranslate(transformBefore);
-    const panAfter = parseTranslate(transformAfter);
-    const panDeltaX = panAfter.tx - panBefore.tx;
-    const panDeltaY = panAfter.ty - panBefore.ty;
-
-    // Face rect screen position should have moved by the same amount as the pan
-    // (it follows the image), NOT been repositioned by a click
-    const afterLeft = Number(await dataEl.getAttribute('data-face-left'));
-    const afterTop = Number(await dataEl.getAttribute('data-face-top'));
-    const faceDeltaX = afterLeft - beforeLeft;
-    const faceDeltaY = afterTop - beforeTop;
-    expect(Math.abs(faceDeltaX - panDeltaX)).toBeLessThan(3);
-    expect(Math.abs(faceDeltaY - panDeltaY)).toBeLessThan(3);
-  });
-});
-
-test.describe('face overlay via detail panel interaction', () => {
-  const fixture = setupAssetViewerFixture(903);
-
-  test.beforeEach(async ({ context }) => {
-    await setupFaceMocks(context, fixture);
-  });
-
-  test('hovering person in detail panel shows face overlay border', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    await ensureDetailPanelVisible(page);
-
-    const personLink = page.locator('#detail-panel a').filter({ hasText: 'Alice Johnson' });
-    await expect(personLink).toBeVisible();
-
-    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
-    await expect(activeBorder).toHaveCount(0);
-
-    await personLink.hover();
-    await expect(activeBorder).toHaveCount(1);
-  });
-
-  test('touch pointer on person in detail panel shows face overlay border', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    await ensureDetailPanelVisible(page);
-
-    const personLink = page.locator('#detail-panel a').filter({ hasText: 'Alice Johnson' });
-    await expect(personLink).toBeVisible();
-
-    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
-    await expect(activeBorder).toHaveCount(0);
-
-    // Simulate a touch-type pointerover (the fix changed from onmouseover to onpointerover,
-    // which fires for touch pointers unlike mouseover)
-    await personLink.dispatchEvent('pointerover', { pointerType: 'touch' });
-    await expect(activeBorder).toHaveCount(1);
-  });
-
-  test('hovering person in detail panel works after exiting face edit mode', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    await ensureDetailPanelVisible(page);
-    await page.getByLabel('Tag people').click();
-    await page.locator('#face-selector').waitFor({ state: 'visible' });
-
-    await page.getByRole('button', { name: /cancel/i }).click();
-    await expect(page.locator('#face-selector')).toBeHidden();
-
-    const personLink = page.locator('#detail-panel a').filter({ hasText: 'Alice Johnson' });
-    await expect(personLink).toBeVisible();
-
-    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
-    await personLink.hover();
-    await expect(activeBorder).toHaveCount(1);
-  });
-});
-
-test.describe('face overlay via edit faces side panel', () => {
-  const fixture = setupAssetViewerFixture(904);
-
-  test.beforeEach(async ({ context }) => {
-    await setupFaceMocks(context, fixture);
-
-    const assetFaces = createMockAssetFaces(
-      FACE_SPECS,
-      fixture.primaryAssetDto.width ?? 3000,
-      fixture.primaryAssetDto.height ?? 4000,
-    );
-    await setupGetFacesMockApiRoute(context, assetFaces);
-  });
-
-  test('hovering person in edit faces panel shows face overlay border', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    await ensureDetailPanelVisible(page);
-    await page.getByLabel('Edit people').click();
-
-    const faceThumbnail = page.getByTestId('face-thumbnail').first();
-    await expect(faceThumbnail).toBeVisible();
-
-    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
-    await expect(activeBorder).toHaveCount(0);
-
-    await faceThumbnail.hover();
-    await expect(activeBorder).toHaveCount(1);
-  });
-});

e2e/src/ui/specs/asset-viewer/ocr.e2e-spec.ts

@@ -1,300 +0,0 @@
-import type { AssetOcrResponseDto, 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 { createMockOcrData, setupOcrMockApiRoutes } from 'src/ui/mock-network/ocr-network';
-import { assetViewerUtils } from '../timeline/utils';
-import { setupAssetViewerFixture } from './utils';
-
-test.describe.configure({ mode: 'parallel' });
-
-const PRIMARY_OCR_BOXES = [
-  { text: 'Hello World', x1: 0.1, y1: 0.1, x2: 0.4, y2: 0.1, x3: 0.4, y3: 0.15, x4: 0.1, y4: 0.15 },
-  { text: 'Immich Photo', x1: 0.2, y1: 0.3, x2: 0.6, y2: 0.3, x3: 0.6, y3: 0.36, x4: 0.2, y4: 0.36 },
-];
-
-const SECONDARY_OCR_BOXES = [
-  { text: 'Second Asset Text', x1: 0.15, y1: 0.2, x2: 0.55, y2: 0.2, x3: 0.55, y3: 0.26, x4: 0.15, y4: 0.26 },
-];
-
-test.describe('OCR bounding boxes', () => {
-  const fixture = setupAssetViewerFixture(920);
-
-  test.beforeEach(async ({ context }) => {
-    const primaryAssetDto = toAssetResponseDto(fixture.primaryAsset);
-    const ocrDataByAssetId = new Map<string, AssetOcrResponseDto[]>([
-      [primaryAssetDto.id, createMockOcrData(primaryAssetDto.id, PRIMARY_OCR_BOXES)],
-    ]);
-
-    await setupOcrMockApiRoutes(context, ocrDataByAssetId);
-  });
-
-  test('OCR bounding boxes appear when clicking OCR button', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const ocrButton = page.getByLabel('Text recognition');
-    await expect(ocrButton).toBeVisible();
-    await ocrButton.click();
-
-    const ocrBoxes = page.locator('[data-viewer-content] [data-testid="ocr-box"]');
-    await expect(ocrBoxes).toHaveCount(2);
-
-    await expect(ocrBoxes.nth(0)).toContainText('Hello World');
-    await expect(ocrBoxes.nth(1)).toContainText('Immich Photo');
-  });
-
-  test('OCR bounding boxes toggle off on second click', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const ocrButton = page.getByLabel('Text recognition');
-    await ocrButton.click();
-    await expect(page.locator('[data-viewer-content] [data-testid="ocr-box"]').first()).toBeVisible();
-
-    await ocrButton.click();
-    await expect(page.locator('[data-viewer-content] [data-testid="ocr-box"]')).toHaveCount(0);
-  });
-});
-
-test.describe('OCR with stacked assets', () => {
-  const fixture = setupAssetViewerFixture(921);
-  let mockStack: MockStack;
-  let primaryAssetDto: AssetResponseDto;
-  let secondAssetDto: AssetResponseDto;
-
-  test.beforeAll(async () => {
-    primaryAssetDto = toAssetResponseDto(fixture.primaryAsset);
-    secondAssetDto = createMockStackAsset(fixture.adminUserId);
-    secondAssetDto.originalFileName = 'second-ocr-asset.jpg';
-    mockStack = createMockStack(primaryAssetDto, [secondAssetDto], new Set());
-  });
-
-  test.beforeEach(async ({ context }) => {
-    await setupBrokenAssetMockApiRoutes(context, mockStack);
-
-    const ocrDataByAssetId = new Map<string, AssetOcrResponseDto[]>([
-      [primaryAssetDto.id, createMockOcrData(primaryAssetDto.id, PRIMARY_OCR_BOXES)],
-      [secondAssetDto.id, createMockOcrData(secondAssetDto.id, SECONDARY_OCR_BOXES)],
-    ]);
-
-    await setupOcrMockApiRoutes(context, ocrDataByAssetId);
-  });
-
-  test('different OCR boxes shown for different stacked assets', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const ocrButton = page.getByLabel('Text recognition');
-    await expect(ocrButton).toBeVisible();
-    await ocrButton.click();
-
-    const ocrBoxes = page.locator('[data-viewer-content] [data-testid="ocr-box"]');
-    await expect(ocrBoxes).toHaveCount(2);
-    await expect(ocrBoxes.nth(0)).toContainText('Hello World');
-
-    const stackThumbnails = page.locator('#stack-slideshow [data-asset]');
-    await expect(stackThumbnails).toHaveCount(2);
-    await stackThumbnails.nth(1).click();
-
-    // refreshOcr() clears showOverlay when switching assets, so re-enable it
-    await expect(ocrBoxes).toHaveCount(0);
-    await expect(ocrButton).toBeVisible();
-    await ocrButton.click();
-
-    await expect(ocrBoxes).toHaveCount(1);
-    await expect(ocrBoxes.first()).toContainText('Second Asset Text');
-  });
-});
-
-test.describe('OCR boxes and zoom', () => {
-  const fixture = setupAssetViewerFixture(922);
-
-  test.beforeEach(async ({ context }) => {
-    const primaryAssetDto = toAssetResponseDto(fixture.primaryAsset);
-    const ocrDataByAssetId = new Map<string, AssetOcrResponseDto[]>([
-      [primaryAssetDto.id, createMockOcrData(primaryAssetDto.id, PRIMARY_OCR_BOXES)],
-    ]);
-
-    await setupOcrMockApiRoutes(context, ocrDataByAssetId);
-  });
-
-  test('OCR boxes scale with zoom', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    const ocrButton = page.getByLabel('Text recognition');
-    await expect(ocrButton).toBeVisible();
-    await ocrButton.click();
-
-    const ocrBox = page.locator('[data-viewer-content] [data-testid="ocr-box"]').first();
-    await expect(ocrBox).toBeVisible();
-
-    const initialBox = await ocrBox.boundingBox();
-    expect(initialBox).toBeTruthy();
-
-    const { width, height } = page.viewportSize()!;
-    await page.mouse.move(width / 2, height / 2);
-    await page.mouse.wheel(0, -3);
-
-    await expect(async () => {
-      const zoomedBox = await ocrBox.boundingBox();
-      expect(zoomedBox).toBeTruthy();
-      expect(zoomedBox!.width).toBeGreaterThan(initialBox!.width);
-      expect(zoomedBox!.height).toBeGreaterThan(initialBox!.height);
-    }).toPass({ timeout: 2000 });
-  });
-});
-
-test.describe('OCR text interaction', () => {
-  const fixture = setupAssetViewerFixture(923);
-
-  test.beforeEach(async ({ context }) => {
-    const primaryAssetDto = toAssetResponseDto(fixture.primaryAsset);
-    const ocrDataByAssetId = new Map<string, AssetOcrResponseDto[]>([
-      [primaryAssetDto.id, createMockOcrData(primaryAssetDto.id, PRIMARY_OCR_BOXES)],
-    ]);
-
-    await setupOcrMockApiRoutes(context, ocrDataByAssetId);
-  });
-
-  test('OCR text box has data-overlay-interactive attribute', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    await page.getByLabel('Text recognition').click();
-
-    const ocrBox = page.locator('[data-viewer-content] [data-testid="ocr-box"]').first();
-    await expect(ocrBox).toBeVisible();
-    await expect(ocrBox).toHaveAttribute('data-overlay-interactive');
-  });
-
-  test('OCR text box receives focus on click', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    await page.getByLabel('Text recognition').click();
-
-    const ocrBox = page.locator('[data-viewer-content] [data-testid="ocr-box"]').first();
-    await expect(ocrBox).toBeVisible();
-
-    await ocrBox.click();
-    await expect(ocrBox).toBeFocused();
-  });
-
-  test('dragging on OCR text box does not trigger image pan', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    await page.getByLabel('Text recognition').click();
-
-    const ocrBox = page.locator('[data-viewer-content] [data-testid="ocr-box"]').first();
-    await expect(ocrBox).toBeVisible();
-
-    const imgLocator = page.locator('[data-viewer-content] img[draggable="false"]');
-    const initialTransform = await imgLocator.evaluate((element) => {
-      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
-    });
-
-    const box = await ocrBox.boundingBox();
-    expect(box).toBeTruthy();
-    const centerX = box!.x + box!.width / 2;
-    const centerY = box!.y + box!.height / 2;
-
-    await page.mouse.move(centerX, centerY);
-    await page.mouse.down();
-    await page.mouse.move(centerX + 50, centerY + 30, { steps: 5 });
-    await page.mouse.up();
-
-    const afterTransform = await imgLocator.evaluate((element) => {
-      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
-    });
-    expect(afterTransform).toBe(initialTransform);
-  });
-
-  test('split touch gesture across zoom container does not trigger zoom', async ({ page }) => {
-    await page.goto(`/photos/${fixture.primaryAsset.id}`);
-    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
-
-    await page.getByLabel('Text recognition').click();
-    const ocrBox = page.locator('[data-viewer-content] [data-testid="ocr-box"]').first();
-    await expect(ocrBox).toBeVisible();
-
-    const imgLocator = page.locator('[data-viewer-content] img[draggable="false"]');
-    const initialTransform = await imgLocator.evaluate((element) => {
-      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
-    });
-
-    const viewerContent = page.locator('[data-viewer-content]');
-    const viewerBox = await viewerContent.boundingBox();
-    expect(viewerBox).toBeTruthy();
-
-    // Dispatch a synthetic split gesture: one touch inside the viewer, one outside
-    await page.evaluate(
-      ({ viewerCenterX, viewerCenterY, outsideY }) => {
-        const viewer = document.querySelector('[data-viewer-content]');
-        if (!viewer) {
-          return;
-        }
-
-        const createTouch = (id: number, x: number, y: number) => {
-          return new Touch({
-            identifier: id,
-            target: viewer,
-            clientX: x,
-            clientY: y,
-          });
-        };
-
-        const insideTouch = createTouch(0, viewerCenterX, viewerCenterY);
-        const outsideTouch = createTouch(1, viewerCenterX, outsideY);
-
-        const touchStartEvent = new TouchEvent('touchstart', {
-          touches: [insideTouch, outsideTouch],
-          targetTouches: [insideTouch],
-          changedTouches: [insideTouch, outsideTouch],
-          bubbles: true,
-          cancelable: true,
-        });
-
-        const touchMoveEvent = new TouchEvent('touchmove', {
-          touches: [createTouch(0, viewerCenterX, viewerCenterY - 30), createTouch(1, viewerCenterX, outsideY + 30)],
-          targetTouches: [createTouch(0, viewerCenterX, viewerCenterY - 30)],
-          changedTouches: [
-            createTouch(0, viewerCenterX, viewerCenterY - 30),
-            createTouch(1, viewerCenterX, outsideY + 30),
-          ],
-          bubbles: true,
-          cancelable: true,
-        });
-
-        const touchEndEvent = new TouchEvent('touchend', {
-          touches: [],
-          targetTouches: [],
-          changedTouches: [insideTouch, outsideTouch],
-          bubbles: true,
-          cancelable: true,
-        });
-
-        viewer.dispatchEvent(touchStartEvent);
-        viewer.dispatchEvent(touchMoveEvent);
-        viewer.dispatchEvent(touchEndEvent);
-      },
-      {
-        viewerCenterX: viewerBox!.x + viewerBox!.width / 2,
-        viewerCenterY: viewerBox!.y + viewerBox!.height / 2,
-        outsideY: 10, // near the top of the page, outside the viewer
-      },
-    );
-
-    const afterTransform = await imgLocator.evaluate((element) => {
-      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
-    });
-    expect(afterTransform).toBe(initialTransform);
-  });
-});

e2e/src/ui/specs/search/search-gallery.e2e-spec.ts

@@ -6,7 +6,6 @@ import {
   generateTimelineData,
   TimelineAssetConfig,
   TimelineData,
-  toAssetResponseDto,
 } from 'src/ui/generators/timeline';
 import { setupBaseMockApiRoutes } from 'src/ui/mock-network/base-network';
 import { setupTimelineMockApiRoutes, TimelineTestContext } from 'src/ui/mock-network/timeline-network';
@@ -31,10 +30,6 @@ test.describe('search gallery-viewer', () => {
   };
 
   test.beforeAll(async () => {
-    test.fail(
-      process.env.PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS !== '1',
-      'This test requires env var: PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS=1',
-    );
     adminUserId = faker.string.uuid();
     testContext.adminId = adminUserId;
     timelineRestData = generateTimelineData({ ...createDefaultTimelineConfig(), ownerId: adminUserId });
@@ -49,10 +44,7 @@ test.describe('search gallery-viewer', () => {
 
     await context.route('**/api/search/metadata', async (route, request) => {
       if (request.method() === 'POST') {
-        const searchAssets = assets
+        const searchAssets = assets.slice(0, 5).filter((asset) => !changes.assetDeletions.includes(asset.id));
-          .slice(0, 5)
-          .filter((asset) => !changes.assetDeletions.includes(asset.id))
-          .map((asset) => toAssetResponseDto(asset));
         return route.fulfill({
           status: 200,
           contentType: 'application/json',

e2e/src/ui/specs/timeline/utils.ts

@@ -143,7 +143,7 @@ export const timelineUtils = {
     return page.locator('#asset-grid');
   },
   async waitForTimelineLoad(page: Page) {
-    await page.locator('#asset-grid[data-initialized]').waitFor();
+    await expect(timelineUtils.locator(page)).toBeInViewport();
     await expect.poll(() => thumbnailUtils.locator(page).count()).toBeGreaterThan(0);
   },
   async getScrollTop(page: Page) {
@@ -163,17 +163,14 @@ export const assetViewerUtils = {
     return page.locator('#immich-asset-viewer');
   },
   async waitForViewerLoad(page: Page, asset: TimelineAssetConfig) {
-    const imgLocator = page.locator(`[data-viewer-content] img[data-testid="preview"][src*="${asset.id}"]`);
+    await page
-    const videoLocator = page.locator(`[data-viewer-content] video[poster*="${asset.id}"]`);
+      .locator(
-    await imgLocator.or(videoLocator).waitFor();
+        `img[draggable="false"][src="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`,
-
+      )
-    if ((await videoLocator.count()) === 0) {
+      .or(
-      await expect
+        page.locator(`video[poster="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`),
-        .poll(() => imgLocator.evaluate((img: HTMLImageElement) => img.complete && img.naturalWidth > 0))
+      )
-        .toBe(true);
+      .waitFor();
-    }
-
-    await expect(page.locator('#immich-asset-viewer')).not.toHaveAttribute('data-navigating');
   },
   async expectActiveAssetToBe(page: Page, assetId: string) {
     const activeElement = () =>

e2e/src/web/specs/asset-viewer/asset-viewer.ui-spec.ts

@@ -1,273 +0,0 @@
-import { faker } from '@faker-js/faker';
-import { expect, test } from '@playwright/test';
-import {
-  Changes,
-  createDefaultTimelineConfig,
-  generateTimelineData,
-  SeededRandom,
-  selectRandom,
-  TimelineAssetConfig,
-  TimelineData,
-} from 'src/ui/generators/timeline';
-import { setupBaseMockApiRoutes } from 'src/ui/mock-network/base-network';
-import { setupTimelineMockApiRoutes, TimelineTestContext } from 'src/ui/mock-network/timeline-network';
-import { assetViewerUtils } from 'src/ui/specs/timeline/utils';
-import { utils } from 'src/utils';
-
-test.describe.configure({ mode: 'parallel' });
-test.describe('asset-viewer', () => {
-  const rng = new SeededRandom(529);
-  let adminUserId: string;
-  let timelineRestData: TimelineData;
-  const assets: TimelineAssetConfig[] = [];
-  const yearMonths: string[] = [];
-  const testContext = new TimelineTestContext();
-  const changes: Changes = {
-    albumAdditions: [],
-    assetDeletions: [],
-    assetArchivals: [],
-    assetFavorites: [],
-  };
-
-  test.beforeAll(async () => {
-    utils.initSdk();
-    adminUserId = faker.string.uuid();
-    testContext.adminId = adminUserId;
-    timelineRestData = generateTimelineData({ ...createDefaultTimelineConfig(), ownerId: adminUserId });
-    for (const timeBucket of timelineRestData.buckets.values()) {
-      assets.push(...timeBucket);
-    }
-    for (const yearMonth of timelineRestData.buckets.keys()) {
-      const [year, month] = yearMonth.split('-');
-      yearMonths.push(`${year}-${Number(month)}`);
-    }
-  });
-
-  test.beforeEach(async ({ context }) => {
-    await setupBaseMockApiRoutes(context, adminUserId);
-    await setupTimelineMockApiRoutes(context, timelineRestData, changes, testContext);
-  });
-
-  test.afterEach(() => {
-    testContext.slowBucket = false;
-    changes.albumAdditions = [];
-    changes.assetDeletions = [];
-    changes.assetArchivals = [];
-    changes.assetFavorites = [];
-  });
-
-  test.describe('/photos/:id', () => {
-    test('Navigate to next asset via button', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      const index = assets.indexOf(asset);
-      await page.goto(`/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${asset.id}`);
-
-      await page.getByLabel('View next asset').click();
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
-      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index + 1].id}`);
-    });
-
-    test('Navigate to previous asset via button', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      const index = assets.indexOf(asset);
-      await page.goto(`/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${asset.id}`);
-
-      await page.getByLabel('View previous asset').click();
-      await assetViewerUtils.waitForViewerLoad(page, assets[index - 1]);
-      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index - 1].id}`);
-    });
-
-    test('Navigate to next asset via keyboard (ArrowRight)', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      const index = assets.indexOf(asset);
-      await page.goto(`/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${asset.id}`);
-
-      await page.getByTestId('next-asset').waitFor();
-      await page.keyboard.press('ArrowRight');
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
-      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index + 1].id}`);
-    });
-
-    test('Navigate to previous asset via keyboard (ArrowLeft)', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      const index = assets.indexOf(asset);
-      await page.goto(`/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${asset.id}`);
-
-      await page.getByTestId('previous-asset').waitFor();
-      await page.keyboard.press('ArrowLeft');
-      await assetViewerUtils.waitForViewerLoad(page, assets[index - 1]);
-      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index - 1].id}`);
-    });
-
-    test('Navigate forward 5 times via button', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      const index = assets.indexOf(asset);
-      await page.goto(`/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-
-      for (let i = 1; i <= 5; i++) {
-        await page.getByLabel('View next asset').click();
-        await assetViewerUtils.waitForViewerLoad(page, assets[index + i]);
-        await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index + i].id}`);
-      }
-    });
-
-    test('Navigate backward 5 times via button', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      const index = assets.indexOf(asset);
-      await page.goto(`/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-
-      for (let i = 1; i <= 5; i++) {
-        await page.getByLabel('View previous asset').click();
-        await assetViewerUtils.waitForViewerLoad(page, assets[index - i]);
-        await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index - i].id}`);
-      }
-    });
-
-    test('Navigate forward then backward via keyboard', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      const index = assets.indexOf(asset);
-      await page.goto(`/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-
-      // Navigate forward 3 times
-      for (let i = 1; i <= 3; i++) {
-        await page.getByTestId('next-asset').waitFor();
-        await page.keyboard.press('ArrowRight');
-        await assetViewerUtils.waitForViewerLoad(page, assets[index + i]);
-      }
-
-      // Navigate backward 3 times to return to original
-      for (let i = 2; i >= 0; i--) {
-        await page.getByTestId('previous-asset').waitFor();
-        await page.keyboard.press('ArrowLeft');
-        await assetViewerUtils.waitForViewerLoad(page, assets[index + i]);
-      }
-
-      // Verify we're back at the original asset
-      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${asset.id}`);
-    });
-
-    test('Verify no next button on last asset', async ({ page }) => {
-      const lastAsset = assets.at(-1)!;
-      await page.goto(`/photos/${lastAsset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, lastAsset);
-
-      // Verify next button doesn't exist
-      await expect(page.getByLabel('View next asset')).toHaveCount(0);
-    });
-
-    test('Verify no previous button on first asset', async ({ page }) => {
-      const firstAsset = assets[0];
-      await page.goto(`/photos/${firstAsset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, firstAsset);
-
-      // Verify previous button doesn't exist
-      await expect(page.getByLabel('View previous asset')).toHaveCount(0);
-    });
-
-    test('Delete photo advances to next', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      await page.goto(`/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-      await page.getByLabel('Delete').click();
-      const index = assets.indexOf(asset);
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
-    });
-    test('Delete photo advances to next (2x)', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      await page.goto(`/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-      await page.getByLabel('Delete').click();
-      const index = assets.indexOf(asset);
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
-      await page.getByLabel('Delete').click();
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 2]);
-    });
-    test('Delete last photo advances to prev', async ({ page }) => {
-      const asset = assets.at(-1)!;
-      await page.goto(`/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-      await page.getByLabel('Delete').click();
-      const index = assets.indexOf(asset);
-      await assetViewerUtils.waitForViewerLoad(page, assets[index - 1]);
-    });
-    test('Delete last photo advances to prev (2x)', async ({ page }) => {
-      const asset = assets.at(-1)!;
-      await page.goto(`/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-      await page.getByLabel('Delete').click();
-      const index = assets.indexOf(asset);
-      await assetViewerUtils.waitForViewerLoad(page, assets[index - 1]);
-      await page.getByLabel('Delete').click();
-      await assetViewerUtils.waitForViewerLoad(page, assets[index - 2]);
-    });
-  });
-  test.describe('/trash/photos/:id', () => {
-    test('Delete trashed photo advances to next', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      const index = assets.indexOf(asset);
-      const deletedAssets = assets.slice(index - 10, index + 10).map((asset) => asset.id);
-      changes.assetDeletions.push(...deletedAssets);
-      await page.goto(`/trash/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-      await page.getByLabel('Delete').click();
-      // confirm dialog
-      await page.getByRole('button').getByText('Delete').click();
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
-    });
-    test('Delete trashed photo advances to next 2x', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      const index = assets.indexOf(asset);
-      const deletedAssets = assets.slice(index - 10, index + 10).map((asset) => asset.id);
-      changes.assetDeletions.push(...deletedAssets);
-      await page.goto(`/trash/photos/${asset.id}`);
-      await assetViewerUtils.waitForViewerLoad(page, asset);
-      await page.getByLabel('Delete').click();
-      // confirm dialog
-      await page.getByRole('button').getByText('Delete').click();
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
-      await page.getByLabel('Delete').click();
-      // confirm dialog
-      await page.getByRole('button').getByText('Delete').click();
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 2]);
-    });
-    test('Delete trashed photo advances to prev', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      const index = assets.indexOf(asset);
-      const deletedAssets = assets.slice(index - 10, index + 10).map((asset) => asset.id);
-      changes.assetDeletions.push(...deletedAssets);
-      await page.goto(`/trash/photos/${assets[index + 9].id}`);
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 9]);
-      await page.getByLabel('Delete').click();
-      // confirm dialog
-      await page.getByRole('button').getByText('Delete').click();
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 8]);
-    });
-    test('Delete trashed photo advances to prev 2x', async ({ page }) => {
-      const asset = selectRandom(assets, rng);
-      const index = assets.indexOf(asset);
-      const deletedAssets = assets.slice(index - 10, index + 10).map((asset) => asset.id);
-      changes.assetDeletions.push(...deletedAssets);
-      await page.goto(`/trash/photos/${assets[index + 9].id}`);
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 9]);
-      await page.getByLabel('Delete').click();
-      // confirm dialog
-      await page.getByRole('button').getByText('Delete').click();
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 8]);
-      await page.getByLabel('Delete').click();
-      // confirm dialog
-      await page.getByRole('button').getByText('Delete').click();
-      await assetViewerUtils.waitForViewerLoad(page, assets[index + 7]);
-    });
-  });
-});

i18n/en.json

@@ -1013,7 +1013,6 @@
   "editor_reset_all_changes": "Reset changes",
   "editor_rotate_left": "Rotate 90° counterclockwise",
   "editor_rotate_right": "Rotate 90° clockwise",
-  "editor_smart_crop": "Smart crop",
   "email": "Email",
   "email_notifications": "Email notifications",
   "empty_folder": "This folder is empty",
@@ -1276,7 +1275,6 @@
   "hide_schema": "Hide schema",
   "hide_text_recognition": "Hide text recognition",
   "hide_unnamed_people": "Hide unnamed people",
-  "hold_key_to_pan": "Hold {key} to pan",
   "home_page_add_to_album_conflicts": "Added {added} assets to album {album}. {failed} assets are already in the album.",
   "home_page_add_to_album_err_local": "Can not add local assets to albums yet, skipping",
   "home_page_add_to_album_success": "Added {added} assets to album {album}.",
@@ -2161,7 +2159,6 @@
   "skip_to_folders": "Skip to folders",
   "skip_to_tags": "Skip to tags",
   "slideshow": "Slideshow",
-  "slideshow_ken_burns_effect": "Ken Burns effect",
   "slideshow_repeat": "Repeat slideshow",
   "slideshow_repeat_description": "Loop back to beginning when slideshow ends",
   "slideshow_settings": "Slideshow settings",

i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "immich-i18n",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "private": true,
   "scripts": {
     "format": "prettier --cache --check .",

machine-learning/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "immich-ml"
-version = "2.6.1"
+version = "2.6.2"
 description = ""
 authors = [{ name = "Hau Tran", email = "alex.tran1502@gmail.com" }]
 requires-python = ">=3.11,<4.0"

machine-learning/uv.lock

@@ -898,7 +898,7 @@ wheels = [
 
 [[package]]
 name = "immich-ml"
-version = "2.6.1"
+version = "2.6.2"
 source = { editable = "." }
 dependencies = [
     { name = "aiocache" },

mobile/android/fastlane/Fastfile

@@ -35,8 +35,8 @@ platform :android do
       task: 'bundle', 
       build_type: 'Release',
       properties: {
-        "android.injected.version.code" => 3039,
+        "android.injected.version.code" => 3040,
-        "android.injected.version.name" => "2.6.1",
+        "android.injected.version.name" => "2.6.2",
       }
     )
     upload_to_play_store(skip_upload_apk: true, skip_upload_images: true, skip_upload_screenshots: true, aab: '../build/app/outputs/bundle/release/app-release.aab')

mobile/ios/Runner/Info.plist

@@ -80,7 +80,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.6.1</string>
+	<string>2.6.2</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>

mobile/lib/presentation/pages/drift_people_collection.page.dart

@@ -79,6 +79,7 @@ class _DriftPeopleCollectionPageState extends ConsumerState<DriftPeopleCollectio
                     final person = people[index];
 
                     return Column(
+                      key: ValueKey(person.id),
                       children: [
                         GestureDetector(
                           onTap: () {
@@ -88,6 +89,7 @@ class _DriftPeopleCollectionPageState extends ConsumerState<DriftPeopleCollectio
                             shape: const CircleBorder(side: BorderSide.none),
                             elevation: 3,
                             child: CircleAvatar(
+                              key: ValueKey('avatar-${person.id}'),
                               maxRadius: isTablet ? 100 / 2 : 96 / 2,
                               backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
                             ),

mobile/lib/presentation/pages/search/drift_search.page.dart

@@ -69,6 +69,7 @@ class DriftSearchPage extends HookConsumerWidget {
     );
 
     final previousFilter = useState<SearchFilter?>(null);
+    final hasRequestedSearch = useState<bool>(false);
     final dateInputFilter = useState<DateFilterInputModel?>(null);
 
     final peopleCurrentFilterWidget = useState<Widget?>(null);
@@ -91,9 +92,11 @@ class DriftSearchPage extends HookConsumerWidget {
 
       if (filter.isEmpty) {
         previousFilter.value = null;
+        hasRequestedSearch.value = false;
         return;
       }
 
+      hasRequestedSearch.value = true;
       unawaited(ref.read(paginatedSearchProvider.notifier).search(filter));
       previousFilter.value = filter;
     }
@@ -107,6 +110,8 @@ class DriftSearchPage extends HookConsumerWidget {
     searchPreFilter() {
       if (preFilter != null) {
         Future.delayed(Duration.zero, () {
+          filter.value = preFilter;
+          textSearchController.clear();
           searchFilter(preFilter);
 
           if (preFilter.location.city != null) {
@@ -719,7 +724,7 @@ class DriftSearchPage extends HookConsumerWidget {
               ),
             ),
           ),
-          if (filter.value.isEmpty)
+          if (!hasRequestedSearch.value)
             const _SearchSuggestions()
           else
             _SearchResultGrid(onScrollEnd: loadMoreSearchResults),

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

@@ -24,20 +24,22 @@ class SimilarPhotosActionButton extends ConsumerWidget {
     }
 
     ref.invalidate(assetViewerProvider);
-    ref
+    ref.invalidate(paginatedSearchProvider);
-        .read(searchPreFilterProvider.notifier)
+
-        .setFilter(
+    ref.read(searchPreFilterProvider.notifier)
-          SearchFilter(
+      ..clear()
-            assetId: assetId,
+      ..setFilter(
-            people: {},
+        SearchFilter(
-            location: SearchLocationFilter(),
+          assetId: assetId,
-            camera: SearchCameraFilter(),
+          people: {},
-            date: SearchDateFilter(),
+          location: SearchLocationFilter(),
-            display: SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
+          camera: SearchCameraFilter(),
-            rating: SearchRatingFilter(),
+          date: SearchDateFilter(),
-            mediaType: AssetType.image,
+          display: SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
-          ),
+          rating: SearchRatingFilter(),
-        );
+          mediaType: AssetType.image,
+        ),
+      );
 
     unawaited(context.navigateTo(const DriftSearchRoute()));
   }

mobile/lib/presentation/widgets/asset_viewer/rating_bar.widget.dart

@@ -39,6 +39,16 @@ class _RatingBarState extends State<RatingBar> {
     _currentRating = widget.initialRating;
   }
 
+  @override
+  void didUpdateWidget(covariant RatingBar oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.initialRating != widget.initialRating && _currentRating != widget.initialRating) {
+      setState(() {
+        _currentRating = widget.initialRating;
+      });
+    }
+  }
+
   void _updateRating(Offset localPosition, bool isRTL, {bool isTap = false}) {
     final totalWidth = widget.itemCount * widget.itemSize + (widget.itemCount - 1) * widget.starPadding;
     double dx = localPosition.dx;

mobile/lib/services/auth.service.dart

@@ -67,6 +67,9 @@ class AuthService {
     bool isValid = false;
 
     try {
+      final urls = ApiService.getServerUrls();
+      urls.add(url);
+      await NetworkRepository.setHeaders(ApiService.getRequestHeaders(), urls);
       final uri = Uri.parse('$url/users/me');
       final response = await NetworkRepository.client.get(uri);
       if (response.statusCode == 200) {

mobile/lib/utils/action_button.utils.dart

@@ -143,8 +143,7 @@ enum ActionButtonType {
             !context.isInLockedView && //
             context.currentAlbum != null,
       ActionButtonType.setAlbumCover =>
-        context.isOwner && //
+        !context.isInLockedView && //
-            !context.isInLockedView && //
             context.currentAlbum != null && //
             context.selectedCount == 1,
       ActionButtonType.unstack =>

mobile/lib/widgets/search/search_filter/common/dropdown.dart

@@ -16,9 +16,15 @@ class SearchDropdown<T> extends StatelessWidget {
   final Widget? label;
   final Widget? leadingIcon;
 
+  static const WidgetStatePropertyAll<EdgeInsetsGeometry> _optionPadding = WidgetStatePropertyAll<EdgeInsetsGeometry>(
+    EdgeInsetsDirectional.fromSTEB(16, 0, 16, 0),
+  );
+
   @override
   Widget build(BuildContext context) {
-    final menuStyle = const MenuStyle(
+    final mediaQuery = MediaQuery.of(context);
+    final maxMenuHeight = mediaQuery.size.height * 0.5 - mediaQuery.viewPadding.bottom;
+    const menuStyle = MenuStyle(
       shape: WidgetStatePropertyAll<OutlinedBorder>(
         RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(15))),
       ),
@@ -26,11 +32,26 @@ class SearchDropdown<T> extends StatelessWidget {
 
     return LayoutBuilder(
       builder: (context, constraints) {
+        final styledEntries = dropdownMenuEntries
+            .map(
+              (entry) => DropdownMenuEntry<T>(
+                value: entry.value,
+                label: entry.label,
+                labelWidget: entry.labelWidget,
+                enabled: entry.enabled,
+                leadingIcon: entry.leadingIcon,
+                trailingIcon: entry.trailingIcon,
+                style: (entry.style ?? const ButtonStyle()).copyWith(padding: _optionPadding),
+              ),
+            )
+            .toList(growable: false);
+
         return DropdownMenu(
           controller: controller,
           leadingIcon: leadingIcon,
           width: constraints.maxWidth,
-          dropdownMenuEntries: dropdownMenuEntries,
+          menuHeight: maxMenuHeight,
+          dropdownMenuEntries: styledEntries,
           label: label,
           menuStyle: menuStyle,
           trailingIcon: const Icon(Icons.arrow_drop_down_rounded),

mobile/openapi/README.md

@@ -3,7 +3,7 @@ Immich API
 
 This Dart package is automatically generated by the [OpenAPI Generator](https://openapi-generator.tech) project:
 
-- API version: 2.6.1
+- API version: 2.6.2
 - Generator version: 7.8.0
 - Build package: org.openapitools.codegen.languages.DartClientCodegen
 

mobile/pubspec.yaml

@@ -2,7 +2,7 @@ name: immich_mobile
 description: Immich - selfhosted backup media file on mobile phone
 
 publish_to: 'none'
-version: 2.6.1+3039
+version: 2.6.2+3040
 
 environment:
   sdk: '>=3.8.0 <4.0.0'

mobile/test/utils/action_button_utils_test.dart

@@ -727,7 +727,7 @@ void main() {
         expect(ActionButtonType.setAlbumCover.shouldShow(context), isTrue);
       });
 
-      test('should not show when not owner', () {
+      test('should show when not owner', () {
         final album = createRemoteAlbum();
         final context = ActionButtonContext(
           asset: mergedAsset,
@@ -742,7 +742,7 @@ void main() {
           selectedCount: 1,
         );
 
-        expect(ActionButtonType.setAlbumCover.shouldShow(context), isFalse);
+        expect(ActionButtonType.setAlbumCover.shouldShow(context), isTrue);
       });
 
       test('should not show when in locked view', () {

open-api/immich-openapi-specs.json

@@ -15166,7 +15166,7 @@
   "info": {
     "title": "Immich",
     "description": "Immich API",
-    "version": "2.6.1",
+    "version": "2.6.2",
     "contact": {}
   },
   "tags": [

open-api/typescript-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/sdk",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Auto-generated TypeScript SDK for the Immich API",
   "type": "module",
   "main": "./build/index.js",

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

@@ -1,6 +1,6 @@
 /**
  * Immich
- * 2.6.1
+ * 2.6.2
  * DO NOT MODIFY - This file has been generated using oazapfts.
  * See https://www.npmjs.com/package/oazapfts
  */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "immich-monorepo",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Monorepo for Immich",
   "private": true,
   "packageManager": "pnpm@10.30.3+sha512.c961d1e0a2d8e354ecaa5166b822516668b7f44cb5bd95122d590dd81922f606f5473b6d23ec4a5be05e7fcd18e8488d47d978bbe981872f1145d06e9a740017",

server/Dockerfile

@@ -52,7 +52,7 @@ FROM builder AS plugins
 
 ARG TARGETPLATFORM
 
-COPY --from=ghcr.io/jdx/mise:2026.1.1@sha256:a55c391f7582f34c58bce1a85090cd526596402ba77fc32b06c49b8404ef9c14 /usr/local/bin/mise /usr/local/bin/mise
+COPY --from=ghcr.io/jdx/mise:2026.3.12@sha256:0210678cbf58413806531a27adb2c7daf1c37238e56e8f7ea381d73521571775 /usr/local/bin/mise /usr/local/bin/mise
 
 WORKDIR /usr/src/app
 COPY ./plugins/mise.toml ./plugins/

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "immich",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "",
   "author": "",
   "private": true,

server/src/repositories/trash.repository.ts

@@ -7,8 +7,8 @@ import { DB } from 'src/schema';
 export class TrashRepository {
   constructor(@InjectKysely() private db: Kysely<DB>) {}
 
-  getDeletedIds(): AsyncIterableIterator<{ id: string }> {
+  getDeletedIds(): AsyncIterableIterator<{ id: string; isOffline: boolean }> {
-    return this.db.selectFrom('asset').select(['id']).where('status', '=', AssetStatus.Deleted).stream();
+    return this.db.selectFrom('asset').select(['id', 'isOffline']).where('status', '=', AssetStatus.Deleted).stream();
   }
 
   @GenerateSql({ params: [DummyValue.UUID] })

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

@@ -4,10 +4,19 @@ import { TrashService } from 'src/services/trash.service';
 import { authStub } from 'test/fixtures/auth.stub';
 import { newTestService, ServiceMocks } from 'test/utils';
 
-async function* makeAssetIdStream(count: number): AsyncIterableIterator<{ id: string }> {
+async function* makeAssetIdStream(count: number): AsyncIterableIterator<{ id: string; isOffline: boolean }> {
   for (let i = 0; i < count; i++) {
     await Promise.resolve();
-    yield { id: `asset-${i + 1}` };
+    yield { id: `asset-${i + 1}`, isOffline: false };
+  }
+}
+
+async function* makeDeletedAssetStream(
+  assets: Array<{ id: string; isOffline: boolean }>,
+): AsyncIterableIterator<{ id: string; isOffline: boolean }> {
+  for (const asset of assets) {
+    await Promise.resolve();
+    yield asset;
   }
 }
 
@@ -99,5 +108,27 @@ describe(TrashService.name, () => {
         },
       ]);
     });
+
+    it('should not delete offline assets on disk', async () => {
+      mocks.trash.getDeletedIds.mockReturnValue(
+        makeDeletedAssetStream([
+          { id: 'asset-1', isOffline: false },
+          { id: 'asset-2', isOffline: true },
+        ]),
+      );
+
+      await expect(sut.handleEmptyTrash()).resolves.toEqual(JobStatus.Success);
+
+      expect(mocks.job.queueAll).toHaveBeenCalledWith([
+        {
+          name: JobName.AssetDelete,
+          data: { id: 'asset-1', deleteOnDisk: true },
+        },
+        {
+          name: JobName.AssetDelete,
+          data: { id: 'asset-2', deleteOnDisk: false },
+        },
+      ]);
+    });
   });
 });

server/src/services/trash.service.ts

@@ -50,9 +50,9 @@ export class TrashService extends BaseService {
     const assets = this.trashRepository.getDeletedIds();
 
     let count = 0;
-    const batch: string[] = [];
+    const batch: Array<{ id: string; isOffline: boolean }> = [];
-    for await (const { id } of assets) {
+    for await (const asset of assets) {
-      batch.push(id);
+      batch.push(asset);
 
       if (batch.length === JOBS_ASSET_PAGINATION_SIZE) {
         await this.handleBatch(batch);
@@ -70,14 +70,14 @@ export class TrashService extends BaseService {
     return JobStatus.Success;
   }
 
-  private async handleBatch(ids: string[]) {
+  private async handleBatch(assets: Array<{ id: string; isOffline: boolean }>) {
-    this.logger.debug(`Queueing ${ids.length} asset(s) for deletion from the trash`);
+    this.logger.debug(`Queueing ${assets.length} asset(s) for deletion from the trash`);
     await this.jobRepository.queueAll(
-      ids.map((assetId) => ({
+      assets.map(({ id, isOffline }) => ({
         name: JobName.AssetDelete,
         data: {
-          id: assetId,
+          id,
-          deleteOnDisk: true,
+          deleteOnDisk: !isOffline,
         },
       })),
     );

server/src/utils/access.ts

@@ -190,7 +190,13 @@ const checkOtherAccess = async (access: AccessRepository, request: OtherAccessRe
     }
 
     case Permission.AlbumUpdate: {
-      return await access.album.checkOwnerAccess(auth.user.id, ids);
+      const isOwner = await access.album.checkOwnerAccess(auth.user.id, ids);
+      const isShared = await access.album.checkSharedAlbumAccess(
+        auth.user.id,
+        setDifference(ids, isOwner),
+        AlbumUserRole.Editor,
+      );
+      return setUnion(isOwner, isShared);
     }
 
     case Permission.AlbumDelete: {
@@ -198,7 +204,13 @@ const checkOtherAccess = async (access: AccessRepository, request: OtherAccessRe
     }
 
     case Permission.AlbumShare: {
-      return await access.album.checkOwnerAccess(auth.user.id, ids);
+      const isOwner = await access.album.checkOwnerAccess(auth.user.id, ids);
+      const isShared = await access.album.checkSharedAlbumAccess(
+        auth.user.id,
+        setDifference(ids, isOwner),
+        AlbumUserRole.Editor,
+      );
+      return setUnion(isOwner, isShared);
     }
 
     case Permission.AlbumDownload: {

test-results/.last-run.json

@@ -1,4 +0,0 @@
-{
-  "status": "failed",
-  "failedTests": []
-}

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "immich-web",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "license": "GNU Affero General Public License version 3",
   "type": "module",
   "scripts": {
@@ -53,7 +53,6 @@
     "pmtiles": "^4.3.0",
     "qrcode": "^1.5.4",
     "simple-icons": "^15.15.0",
-    "smartcrop": "^2.0.5",
     "socket.io-client": "~4.8.0",
     "svelte-gestures": "^5.2.2",
     "svelte-i18n": "^4.0.1",
@@ -73,10 +72,10 @@
     "@koddsson/eslint-plugin-tscompat": "^0.2.0",
     "@socket.io/component-emitter": "^3.1.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/enhanced-img": "^0.10.0",
+    "@sveltejs/enhanced-img": "^0.10.4",
     "@sveltejs/kit": "^2.27.1",
-    "@sveltejs/vite-plugin-svelte": "6.2.4",
+    "@sveltejs/vite-plugin-svelte": "7.0.0",
-    "@tailwindcss/vite": "^4.1.7",
+    "@tailwindcss/vite": "^4.2.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.5.2",
@@ -104,10 +103,10 @@
     "svelte": "5.53.13",
     "svelte-check": "^4.1.5",
     "svelte-eslint-parser": "^1.3.3",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.2",
+    "vite": "^8.0.0",
     "vitest": "^4.0.0"
   },
   "volta": {

web/src/app.css

@@ -75,35 +75,6 @@
     --immich-dark-bg: 10 10 10;
     --immich-dark-fg: 229 231 235;
     --immich-dark-gray: 33 33 33;
-
-    /* transitions */
-    --immich-split-viewer-nav: enabled;
-
-    /* view transition variables */
-    /* Base animation duration for standard transitions (page fades, info panel) */
-    --vt-duration-default: 250ms;
-    /* Duration for hero transitions (thumbnail to full viewer) */
-    --vt-duration-hero: 280ms;
-    /* Duration for next/previous photo navigation */
-    --vt-duration-viewer-navigation: 270ms;
-    /* Duration for slideshow mode transitions */
-    --vt-duration-slideshow: 1s;
-    /* Easing function for slide animations (ease-out) */
-    --vt-viewer-slide-easing: cubic-bezier(0.2, 0, 0, 1);
-    /* How far images slide in/out during navigation (% of viewport) */
-    --vt-viewer-slide-distance: 15%;
-    /* Starting opacity for fly transitions (slide+fade effect) */
-    --vt-viewer-opacity-start: 0.1;
-    /* Maximum blur during fly transitions (currently disabled) */
-    --vt-viewer-blur-max: 0px;
-
-    --vt-viewer-next-in: flyInRight;
-    --vt-viewer-next-out: flyOutLeft;
-    --vt-viewer-prev-in: flyInLeft;
-    --vt-viewer-prev-out: flyOutRight;
-    --vt-viewer-old-opacity: 1;
-    /* Easing function for memory and hero morph transitions */
-    --vt-memory-easing: cubic-bezier(0.2, 0, 0, 1);
   }
 
   button:not(:disabled),
@@ -205,583 +176,3 @@
     @apply bg-subtle rounded-lg;
   }
 }
-
-@layer base {
-  ::view-transition {
-    background: var(--color-black);
-    animation-duration: var(--vt-duration-default);
-  }
-
-  ::view-transition-old(*),
-  ::view-transition-new(*) {
-    mix-blend-mode: normal;
-    animation-duration: inherit;
-  }
-
-  ::view-transition-old(*) {
-    animation-name: fadeOut;
-    animation-fill-mode: forwards;
-  }
-  ::view-transition-new(*) {
-    animation-name: fadeIn;
-    animation-fill-mode: forwards;
-  }
-
-  ::view-transition-old(root) {
-    animation: var(--vt-duration-default) 0s fadeOut forwards;
-  }
-  ::view-transition-new(root) {
-    animation: var(--vt-duration-default) 0s fadeIn forwards;
-  }
-  html:active-view-transition-type(slideshow) {
-    &::view-transition-old(*) {
-      animation: var(--vt-duration-slideshow) linear crossfadeOut forwards;
-    }
-    &::view-transition-new(*) {
-      animation: var(--vt-duration-slideshow) linear crossfadeIn forwards;
-    }
-    &::view-transition-image-pair(*) {
-      isolation: auto;
-    }
-  }
-  html:active-view-transition-type(viewer-nav) {
-    &::view-transition-old(root) {
-      animation: var(--vt-duration-hero) 0s fadeOut forwards;
-    }
-    &::view-transition-new(root) {
-      animation: var(--vt-duration-hero) 0s fadeIn forwards;
-    }
-  }
-  ::view-transition-image-pair(info) {
-    isolation: auto;
-  }
-  ::view-transition-old(info) {
-    animation: var(--vt-duration-default) 0s panelSlideOutRight forwards;
-  }
-  ::view-transition-new(info) {
-    animation: var(--vt-duration-default) 0s panelSlideInRight forwards;
-  }
-
-  ::view-transition-group(detail-panel) {
-    z-index: 1;
-  }
-  ::view-transition-old(detail-panel),
-  ::view-transition-new(detail-panel) {
-    animation: none;
-  }
-  ::view-transition-group(letterbox-left),
-  ::view-transition-group(letterbox-right),
-  ::view-transition-group(letterbox-top),
-  ::view-transition-group(letterbox-bottom) {
-    animation-duration: var(--vt-duration-viewer-navigation);
-    animation-timing-function: var(--vt-viewer-slide-easing);
-    z-index: 4;
-  }
-
-  ::view-transition-image-pair(letterbox-left),
-  ::view-transition-image-pair(letterbox-right),
-  ::view-transition-image-pair(letterbox-top),
-  ::view-transition-image-pair(letterbox-bottom) {
-    isolation: auto;
-  }
-
-  ::view-transition-old(letterbox-left),
-  ::view-transition-old(letterbox-right),
-  ::view-transition-old(letterbox-top),
-  ::view-transition-old(letterbox-bottom),
-  ::view-transition-new(letterbox-left),
-  ::view-transition-new(letterbox-right),
-  ::view-transition-new(letterbox-top),
-  ::view-transition-new(letterbox-bottom) {
-    animation: none;
-    width: 100%;
-    height: 100%;
-    object-fit: fill;
-    background-color: var(--color-black);
-  }
-
-  ::view-transition-group(exclude-leftbutton),
-  ::view-transition-group(exclude-rightbutton),
-  ::view-transition-group(exclude) {
-    animation: none;
-    z-index: 5;
-  }
-  ::view-transition-old(exclude-leftbutton),
-  ::view-transition-old(exclude-rightbutton),
-  ::view-transition-old(exclude) {
-    visibility: hidden;
-  }
-  ::view-transition-new(exclude-leftbutton),
-  ::view-transition-new(exclude-rightbutton),
-  ::view-transition-new(exclude) {
-    animation: none;
-    z-index: 5;
-  }
-
-  ::view-transition-group(hero) {
-    animation-duration: var(--vt-duration-hero);
-    animation-timing-function: var(--vt-memory-easing);
-  }
-  ::view-transition-old(hero) {
-    animation: none;
-    display: none;
-  }
-  ::view-transition-new(hero) {
-    animation: none;
-  }
-  ::view-transition-old(memory-overlay),
-  ::view-transition-old(memory-controls),
-  ::view-transition-new(memory-overlay),
-  ::view-transition-new(memory-controls) {
-    width: 100%;
-    height: 100%;
-    object-fit: none;
-    object-position: left top;
-  }
-
-  html:active-view-transition-type(memory) {
-    &::view-transition-group(hero),
-    &::view-transition-group(hero-out) {
-      animation-duration: var(--vt-duration-memory);
-      animation-timing-function: var(--vt-memory-easing);
-      overflow: hidden;
-      z-index: 1;
-    }
-    &::view-transition-group(memory-overlay),
-    &::view-transition-group(memory-controls) {
-      animation: none;
-      z-index: 5;
-    }
-    &::view-transition-group(memory-overlay-prev),
-    &::view-transition-group(memory-overlay-next) {
-      animation: none;
-      z-index: 2;
-      opacity: 0.25;
-    }
-    &::view-transition-image-pair(memory-overlay),
-    &::view-transition-image-pair(memory-controls) {
-      isolation: auto;
-    }
-    &::view-transition-old(memory-overlay),
-    &::view-transition-old(memory-controls) {
-      animation: 120ms linear fadeOut forwards;
-    }
-    &::view-transition-new(memory-overlay),
-    &::view-transition-new(memory-controls) {
-      animation: 200ms linear calc(var(--vt-duration-memory) - 200ms) fadeIn forwards;
-      opacity: 0;
-    }
-    &::view-transition-old(memory-overlay-prev),
-    &::view-transition-old(memory-overlay-next) {
-      display: none;
-    }
-    &::view-transition-new(memory-overlay-prev),
-    &::view-transition-new(memory-overlay-next) {
-      animation: none;
-      width: 100%;
-      height: 100%;
-      object-fit: none;
-      object-position: left top;
-    }
-    &::view-transition-image-pair(hero) {
-      isolation: auto;
-    }
-    &::view-transition-old(hero) {
-      display: none;
-    }
-    &::view-transition-new(hero) {
-      animation: none;
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-    &::view-transition-image-pair(hero-out) {
-      isolation: auto;
-    }
-    &::view-transition-old(hero-out) {
-      display: none;
-    }
-    &::view-transition-new(hero-out) {
-      animation: var(--vt-duration-memory) var(--vt-memory-easing) dimDown forwards;
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-    &::view-transition-group(memory-departing) {
-      animation: none;
-    }
-    &::view-transition-old(memory-departing) {
-      animation: calc(var(--vt-duration-memory) * 0.4) linear fadeFromDim forwards;
-    }
-    &::view-transition-new(memory-departing) {
-      animation: none;
-      visibility: hidden;
-    }
-  }
-
-  html:active-view-transition-type(memory-enter) {
-    &::view-transition-group(hero) {
-      animation-duration: var(--vt-duration-hero);
-      animation-timing-function: var(--vt-memory-easing);
-      overflow: hidden;
-    }
-    &::view-transition-old(hero),
-    &::view-transition-new(hero) {
-      animation: none;
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-    &::view-transition-group(memory-overlay),
-    &::view-transition-group(memory-controls),
-    &::view-transition-group(memory-nav-buttons) {
-      animation: none;
-      z-index: 5;
-    }
-    &::view-transition-old(memory-overlay),
-    &::view-transition-old(memory-controls),
-    &::view-transition-old(memory-nav-buttons) {
-      animation: none;
-      visibility: hidden;
-    }
-    &::view-transition-new(memory-overlay),
-    &::view-transition-new(memory-controls),
-    &::view-transition-new(memory-nav-buttons) {
-      animation: 200ms linear var(--vt-duration-hero) fadeIn forwards;
-      opacity: 0;
-    }
-  }
-
-  ::view-transition-old(memory-fade-out) {
-    animation: 500ms linear crossfadeOut forwards;
-  }
-  ::view-transition-new(memory-fade-in) {
-    animation: 500ms linear crossfadeIn forwards;
-  }
-
-  html:active-view-transition-type(memory-nav-fast) {
-    &::view-transition-old(memory-fade-out) {
-      animation-duration: 250ms;
-    }
-    &::view-transition-new(memory-fade-in) {
-      animation-duration: 250ms;
-    }
-    &::view-transition-old(memory-overlay),
-    &::view-transition-old(memory-controls) {
-      animation-duration: 100ms;
-    }
-    &::view-transition-new(memory-overlay),
-    &::view-transition-new(memory-controls) {
-      animation: 100ms linear 150ms fadeIn forwards;
-      opacity: 0;
-    }
-  }
-
-  html:active-view-transition-type(memory-nav) {
-    &::view-transition-group(memory-overlay),
-    &::view-transition-group(memory-controls) {
-      animation: none;
-      z-index: 5;
-    }
-    &::view-transition-image-pair(memory-overlay),
-    &::view-transition-image-pair(memory-controls) {
-      isolation: auto;
-    }
-    &::view-transition-old(memory-overlay),
-    &::view-transition-old(memory-controls) {
-      animation: 150ms linear fadeOut forwards;
-    }
-    &::view-transition-new(memory-overlay),
-    &::view-transition-new(memory-controls) {
-      animation: 200ms linear 300ms fadeIn forwards;
-      opacity: 0;
-    }
-    &::view-transition-group(memory-overlay-prev),
-    &::view-transition-group(memory-overlay-next) {
-      animation: none;
-      opacity: 0.25;
-    }
-    &::view-transition-old(memory-overlay-prev),
-    &::view-transition-old(memory-overlay-next) {
-      display: none;
-    }
-    &::view-transition-new(memory-overlay-prev),
-    &::view-transition-new(memory-overlay-next) {
-      animation: none;
-    }
-  }
-
-  ::view-transition-old(next),
-  ::view-transition-old(next-old),
-  ::view-transition-new(next),
-  ::view-transition-new(next-new),
-  ::view-transition-old(previous),
-  ::view-transition-old(previous-old),
-  ::view-transition-new(previous),
-  ::view-transition-new(previous-new) {
-    animation-duration: var(--vt-duration-viewer-navigation);
-    animation-timing-function: var(--vt-viewer-slide-easing);
-    animation-fill-mode: forwards;
-  }
-
-  ::view-transition-old(next),
-  ::view-transition-old(next-old),
-  ::view-transition-old(previous),
-  ::view-transition-old(previous-old) {
-    opacity: var(--vt-viewer-old-opacity);
-  }
-
-  ::view-transition-old(next),
-  ::view-transition-old(next-old) {
-    animation-name: var(--vt-viewer-next-out);
-  }
-
-  ::view-transition-new(next),
-  ::view-transition-new(next-new) {
-    animation-name: var(--vt-viewer-next-in);
-  }
-
-  ::view-transition-old(previous),
-  ::view-transition-old(previous-old) {
-    animation-name: var(--vt-viewer-prev-out);
-  }
-
-  ::view-transition-new(previous),
-  ::view-transition-new(previous-new) {
-    animation-name: var(--vt-viewer-prev-in);
-  }
-
-  ::view-transition-old(next-old),
-  ::view-transition-new(next-new),
-  ::view-transition-old(previous-old),
-  ::view-transition-new(previous-new) {
-    overflow: hidden;
-  }
-
-  ::view-transition-old(previous-old) {
-    z-index: -1;
-  }
-
-  @keyframes fadeFromDim {
-    from {
-      opacity: 0.25;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
-  @keyframes dimDown {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0.25;
-    }
-  }
-
-  @keyframes flyInLeft {
-    from {
-      transform: translateX(calc(-1 * var(--vt-viewer-slide-distance)));
-      opacity: var(--vt-viewer-opacity-start);
-      filter: blur(var(--vt-viewer-blur-max));
-    }
-    to {
-      opacity: 1;
-      filter: blur(0);
-    }
-  }
-
-  @keyframes flyOutLeft {
-    from {
-      opacity: 1;
-      filter: blur(0);
-    }
-    to {
-      transform: translateX(calc(-1 * var(--vt-viewer-slide-distance)));
-      opacity: var(--vt-viewer-opacity-start);
-      filter: blur(var(--vt-viewer-blur-max));
-    }
-  }
-
-  @keyframes flyInRight {
-    from {
-      transform: translateX(var(--vt-viewer-slide-distance));
-      opacity: var(--vt-viewer-opacity-start);
-      filter: blur(var(--vt-viewer-blur-max));
-    }
-    to {
-      opacity: 1;
-      filter: blur(0);
-    }
-  }
-
-  @keyframes flyOutRight {
-    from {
-      opacity: 1;
-      filter: blur(0);
-    }
-    to {
-      transform: translateX(var(--vt-viewer-slide-distance));
-      opacity: var(--vt-viewer-opacity-start);
-      filter: blur(var(--vt-viewer-blur-max));
-    }
-  }
-
-  @keyframes panelSlideInRight {
-    from {
-      transform: translateX(100%);
-    }
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes panelSlideOutRight {
-    from {
-      transform: translateX(0);
-    }
-    to {
-      transform: translateX(100%);
-    }
-  }
-
-  /* cubic fade curves so combined opacity stays close to 1.0 during crossfade */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    50% {
-      opacity: 0.85;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  @keyframes fadeOut {
-    from {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.85;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
-  @keyframes crossfadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  @keyframes crossfadeOut {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    ::view-transition-group(hero) {
-      animation-name: none;
-    }
-
-    ::view-transition-old(hero) {
-      animation: none;
-      display: none;
-    }
-
-    ::view-transition-new(hero) {
-      animation: none;
-    }
-
-    html:active-view-transition-type(viewer) {
-      &::view-transition-old(hero) {
-        animation: none;
-        display: none;
-      }
-      &::view-transition-new(hero) {
-        animation: var(--vt-duration-default) 0s fadeIn forwards;
-      }
-    }
-
-    html:active-view-transition-type(timeline) {
-      &::view-transition-old(hero) {
-        animation: var(--vt-duration-default) 0s fadeOut forwards;
-      }
-      &::view-transition-new(hero) {
-        animation: var(--vt-duration-default) 0s fadeIn forwards;
-      }
-    }
-
-    ::view-transition-group(letterbox-left),
-    ::view-transition-group(letterbox-right),
-    ::view-transition-group(letterbox-top),
-    ::view-transition-group(letterbox-bottom) {
-      z-index: 100;
-    }
-
-    ::view-transition-old(letterbox-left),
-    ::view-transition-old(letterbox-right),
-    ::view-transition-old(letterbox-top),
-    ::view-transition-old(letterbox-bottom),
-    ::view-transition-new(letterbox-left),
-    ::view-transition-new(letterbox-right),
-    ::view-transition-new(letterbox-top),
-    ::view-transition-new(letterbox-bottom) {
-      background-color: transparent;
-    }
-
-    html:active-view-transition-type(viewer-nav) {
-      &::view-transition-group(previous),
-      &::view-transition-group(previous-old),
-      &::view-transition-group(next),
-      &::view-transition-group(next-old) {
-        width: 100% !important;
-        height: 100% !important;
-        transform: none !important;
-      }
-
-      &::view-transition-old(previous),
-      &::view-transition-old(previous-old),
-      &::view-transition-old(next),
-      &::view-transition-old(next-old) {
-        animation: var(--vt-duration-viewer-navigation) fadeOut forwards;
-        transform-origin: center;
-        height: 100%;
-        width: 100%;
-        object-fit: contain;
-        overflow: hidden;
-      }
-
-      &::view-transition-new(previous),
-      &::view-transition-new(previous-new),
-      &::view-transition-new(next),
-      &::view-transition-new(next-new) {
-        animation: var(--vt-duration-viewer-navigation) fadeIn forwards;
-        transform-origin: center;
-        height: 100%;
-        width: 100%;
-        object-fit: contain;
-      }
-    }
-
-    html:active-view-transition-type(memory-enter) {
-      &::view-transition-group(hero) {
-        animation-duration: 0s;
-      }
-      &::view-transition-old(hero) {
-        animation: var(--vt-duration-default) fadeOut forwards;
-      }
-      &::view-transition-new(hero) {
-        animation: var(--vt-duration-default) fadeIn forwards;
-      }
-    }
-  }
-}

web/src/lib/actions/zoom-image.ts

@@ -1,18 +1,11 @@
 import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
 import { createZoomImageWheel } from '@zoom-image/core';
 
-// Minimal touch shape — avoids importing DOM TouchEvent which isn't available in all TS targets.
+export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolean }) => {
-type TouchEventLike = {
-  touches: Iterable<{ clientX: number; clientY: number }> & { length: number };
-  targetTouches: ArrayLike<unknown>;
-};
-const asTouchEvent = (event: Event) => event as unknown as TouchEventLike;
-
-export const zoomImageAction = (node: HTMLElement, options?: { zoomTarget?: HTMLElement }) => {
   const zoomInstance = createZoomImageWheel(node, {
     maxZoom: 10,
     initialState: assetViewerManager.zoomState,
-    zoomTarget: options?.zoomTarget,
+    zoomTarget: null,
   });
 
   const unsubscribes = [
@@ -20,130 +13,47 @@ export const zoomImageAction = (node: HTMLElement, options?: { zoomTarget?: HTML
     zoomInstance.subscribe(({ state }) => assetViewerManager.onZoomChange(state)),
   ];
 
-  const controller = new AbortController();
+  const onInteractionStart = (event: Event) => {
-  const { signal } = controller;
+    if (options?.disabled) {
-
+      event.stopImmediatePropagation();
-  node.addEventListener('pointerdown', () => assetViewerManager.cancelZoomAnimation(), { capture: true, signal });
-
-  // Intercept events in capture phase to prevent zoom-image from seeing interactions on
-  // overlay elements (e.g. OCR text boxes), preserving browser defaults like text selection.
-  const isOverlayEvent = (event: Event) => !!(event.target as HTMLElement).closest('[data-overlay-interactive]');
-  const isOverlayAtPoint = (x: number, y: number) =>
-    !!document.elementFromPoint(x, y)?.closest('[data-overlay-interactive]');
-
-  // Pointer event interception: track pointers that start on overlays and intercept the entire gesture.
-  const overlayPointers = new Set<number>();
-  const interceptedPointers = new Set<number>();
-  const interceptOverlayPointerDown = (event: PointerEvent) => {
-    if (isOverlayEvent(event) || isOverlayAtPoint(event.clientX, event.clientY)) {
-      overlayPointers.add(event.pointerId);
-      interceptedPointers.add(event.pointerId);
-      event.stopPropagation();
-    } else if (overlayPointers.size > 0) {
-      // Split gesture (e.g. pinch with one finger on overlay) — intercept entirely.
-      interceptedPointers.add(event.pointerId);
-      event.stopPropagation();
     }
+    assetViewerManager.cancelZoomAnimation();
   };
-  const interceptOverlayPointerEvent = (event: PointerEvent) => {
-    if (interceptedPointers.has(event.pointerId)) {
-      event.stopPropagation();
-    }
-  };
-  const interceptOverlayPointerEnd = (event: PointerEvent) => {
-    overlayPointers.delete(event.pointerId);
-    if (interceptedPointers.delete(event.pointerId)) {
-      event.stopPropagation();
-    }
-  };
-  node.addEventListener('pointerdown', interceptOverlayPointerDown, { capture: true, signal });
-  node.addEventListener('pointermove', interceptOverlayPointerEvent, { capture: true, signal });
-  node.addEventListener('pointerup', interceptOverlayPointerEnd, { capture: true, signal });
-  node.addEventListener('pointerleave', interceptOverlayPointerEnd, { capture: true, signal });
 
-  // Touch event interception for overlay touches or split gestures (pinch across container boundary).
+  node.addEventListener('wheel', onInteractionStart, { capture: true });
-  // Once intercepted, stays intercepted until all fingers are lifted.
+  node.addEventListener('pointerdown', onInteractionStart, { capture: true });
-  let touchGestureIntercepted = false;
-  const interceptOverlayTouchEvent = (event: Event) => {
-    if (touchGestureIntercepted) {
-      event.stopPropagation();
-      return;
-    }
-    const { touches, targetTouches } = asTouchEvent(event);
-    if (touches && targetTouches) {
-      if (touches.length > targetTouches.length) {
-        touchGestureIntercepted = true;
-        event.stopPropagation();
-        return;
-      }
-      for (const touch of touches) {
-        if (isOverlayAtPoint(touch.clientX, touch.clientY)) {
-          touchGestureIntercepted = true;
-          event.stopPropagation();
-          return;
-        }
-      }
-    } else if (isOverlayEvent(event)) {
-      event.stopPropagation();
-    }
-  };
-  const resetTouchGesture = (event: Event) => {
-    const { touches } = asTouchEvent(event);
-    if (touches.length === 0) {
-      touchGestureIntercepted = false;
-    }
-  };
-  node.addEventListener('touchstart', interceptOverlayTouchEvent, { capture: true, signal });
-  node.addEventListener('touchmove', interceptOverlayTouchEvent, { capture: true, signal });
-  node.addEventListener('touchend', resetTouchGesture, { capture: true, signal });
 
-  // Wheel and dblclick interception on overlay elements.
+  // Suppress Safari's synthetic dblclick on double-tap. Without this, zoom-image's touchstart
-  // Dblclick also intercepted for all touch double-taps (Safari fires synthetic dblclick
+  // handler zooms to maxZoom (10x), then Safari's synthetic dblclick triggers photo-viewer's
-  // on double-tap, which conflicts with zoom-image's touch zoom handler).
+  // handler which conflicts. Chrome does not fire synthetic dblclick on touch.
   let lastPointerWasTouch = false;
-  node.addEventListener('pointerdown', (event) => (lastPointerWasTouch = event.pointerType === 'touch'), {
+  const trackPointerType = (event: PointerEvent) => {
-    capture: true,
+    lastPointerWasTouch = event.pointerType === 'touch';
-    signal,
+  };
-  });
+  const suppressTouchDblClick = (event: MouseEvent) => {
-  node.addEventListener(
+    if (lastPointerWasTouch) {
-    'wheel',
+      event.stopImmediatePropagation();
-    (event) => {
+    }
-      if (isOverlayEvent(event)) {
+  };
-        event.stopPropagation();
+  node.addEventListener('pointerdown', trackPointerType, { capture: true });
-      }
+  node.addEventListener('dblclick', suppressTouchDblClick, { capture: true });
-    },
-    { capture: true, signal },
-  );
-  node.addEventListener(
-    'dblclick',
-    (event) => {
-      if (lastPointerWasTouch || isOverlayEvent(event)) {
-        event.stopImmediatePropagation();
-      }
-    },
-    { capture: true, signal },
-  );
 
-  if (options?.zoomTarget) {
+  // Allow zoomed content to render outside the container bounds
-    options.zoomTarget.style.willChange = 'transform';
-  }
   node.style.overflow = 'visible';
+  // Prevent browser handling of touch gestures so zoom-image can manage them
   node.style.touchAction = 'none';
   return {
-    update(newOptions?: { zoomTarget?: HTMLElement }) {
+    update(newOptions?: { disabled?: boolean }) {
       options = newOptions;
-      if (newOptions?.zoomTarget !== undefined) {
-        zoomInstance.setState({ zoomTarget: newOptions.zoomTarget });
-      }
     },
     destroy() {
-      controller.abort();
-      if (options?.zoomTarget) {
-        options.zoomTarget.style.willChange = '';
-      }
       for (const unsubscribe of unsubscribes) {
         unsubscribe();
       }
+      node.removeEventListener('wheel', onInteractionStart, { capture: true });
+      node.removeEventListener('pointerdown', onInteractionStart, { capture: true });
+      node.removeEventListener('pointerdown', trackPointerType, { capture: true });
+      node.removeEventListener('dblclick', suppressTouchDblClick, { capture: true });
       zoomInstance.cleanup();
     },
   };

web/src/lib/components/AdaptiveImage.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import { thumbhash } from '$lib/actions/thumbhash';
   import AlphaBackground from '$lib/components/AlphaBackground.svelte';
-  import Letterboxes from '$lib/components/asset-viewer/letterboxes.svelte';
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
   import DelayedLoadingSpinner from '$lib/components/DelayedLoadingSpinner.svelte';
   import ImageLayer from '$lib/components/ImageLayer.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { getAssetUrls } from '$lib/utils';
   import { AdaptiveImageLoader, type QualityList } from '$lib/utils/adaptive-image-loader.svelte';
-  import { scaleToCover, scaleToFit, type Size } from '$lib/utils/container-utils';
+  import { scaleToCover, scaleToFit } from '$lib/utils/container-utils';
   import { getAltText } from '$lib/utils/thumbnail-util';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import type { AssetResponseDto, SharedLinkResponseDto } from '@immich/sdk';
@@ -18,18 +17,15 @@
     asset: AssetResponseDto;
     sharedLink?: SharedLinkResponseDto;
     objectFit?: 'contain' | 'cover';
-    container: Size;
+    container: {
-    showLetterboxes?: boolean;
+      width: number;
-    transitionName?: string | null | undefined;
+      height: number;
-    letterboxTransitionName?: string | undefined;
+    };
-    imageClass?: string;
     onUrlChange?: (url: string) => void;
     onImageReady?: () => void;
     onError?: () => void;
     ref?: HTMLDivElement;
     imgRef?: HTMLImageElement;
-    imgNaturalSize?: Size;
-    imgScaledSize?: Size;
     backdrop?: Snippet;
     overlays?: Snippet;
   };
@@ -38,18 +34,10 @@
     ref = $bindable(),
     // eslint-disable-next-line no-useless-assignment
     imgRef = $bindable(),
-    // eslint-disable-next-line no-useless-assignment
-    imgNaturalSize = $bindable(),
-    // eslint-disable-next-line no-useless-assignment
-    imgScaledSize = $bindable(),
     asset,
     sharedLink,
     objectFit = 'contain',
     container,
-    showLetterboxes = true,
-    transitionName,
-    letterboxTransitionName,
-    imageClass,
     onUrlChange,
     onImageReady,
     onError,
@@ -113,21 +101,9 @@
     return { width: 1, height: 1 };
   });
 
-  $effect(() => {
-    imgNaturalSize = imageDimensions;
-  });
-
-  const scaledDimensions = $derived.by(() => {
-    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-    return scaleFn(imageDimensions, container);
-  });
-
-  $effect(() => {
-    imgScaledSize = scaledDimensions;
-  });
-
   const { width, height, left, top } = $derived.by(() => {
-    const { width, height } = scaledDimensions;
+    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
+    const { width, height } = scaleFn(imageDimensions, container);
     return {
       width: width + 'px',
       height: height + 'px',
@@ -173,76 +149,81 @@
       (quality.preview === 'success' ? previewElement : undefined) ??
       (quality.thumbnail === 'success' ? thumbnailElement : undefined);
   });
+
+  const zoomTransform = $derived.by(() => {
+    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
+    if (currentZoom === 1 && currentPositionX === 0 && currentPositionY === 0) {
+      return undefined;
+    }
+    return `translate(${currentPositionX}px, ${currentPositionY}px) scale(${currentZoom})`;
+  });
 </script>
 
-<div class="relative h-full w-full overflow-hidden" bind:this={ref}>
+<div class="relative h-full w-full overflow-hidden will-change-transform" bind:this={ref}>
   {@render backdrop?.()}
 
-  <Letterboxes {letterboxTransitionName} show={showLetterboxes} {scaledDimensions} {container} />
+  <!-- pointer-events-none so events pass through to the container where zoom-image listens -->
-
   <div
-    class={['absolute inset-0 pointer-events-none', imageClass]}
+    class="absolute inset-0 pointer-events-none"
-    style:left
+    style:transform={zoomTransform}
-    style:top
+    style:transform-origin={zoomTransform ? '0 0' : undefined}
-    style:width
-    style:height
-    style:view-transition-name={transitionName}
-    data-transition-name={transitionName}
   >
-    {#if show.alphaBackground}
+    <div class="absolute" style:left style:top style:width style:height>
-      <AlphaBackground />
+      {#if show.alphaBackground}
-    {/if}
+        <AlphaBackground />
-
-    {#if show.thumbhash}
-      {#if asset.thumbhash}
-        <!-- Thumbhash / spinner layer  -->
-        <canvas use:thumbhash={{ base64ThumbHash: asset.thumbhash }} class="h-full w-full absolute"></canvas>
-      {:else if show.spinner}
-        <DelayedLoadingSpinner />
       {/if}
-    {/if}
 
-    {#if show.thumbnail}
+      {#if show.thumbhash}
-      <ImageLayer
+        {#if asset.thumbhash}
-        {adaptiveImageLoader}
+          <!-- Thumbhash / spinner layer  -->
-        {width}
+          <canvas use:thumbhash={{ base64ThumbHash: asset.thumbhash }} class="h-full w-full absolute"></canvas>
-        {height}
+        {:else if show.spinner}
-        quality="thumbnail"
+          <DelayedLoadingSpinner />
-        src={status.urls.thumbnail}
+        {/if}
-        alt=""
+      {/if}
-        role="presentation"
-        bind:ref={thumbnailElement}
-      />
-    {/if}
 
-    {#if show.brokenAsset}
+      {#if show.thumbnail}
-      <BrokenAsset class="text-xl h-full w-full absolute" />
+        <ImageLayer
-    {/if}
+          {adaptiveImageLoader}
+          {width}
+          {height}
+          quality="thumbnail"
+          src={status.urls.thumbnail}
+          alt=""
+          role="presentation"
+          bind:ref={thumbnailElement}
+        />
+      {/if}
 
-    {#if show.preview}
+      {#if show.brokenAsset}
-      <ImageLayer
+        <BrokenAsset class="text-xl h-full w-full absolute" />
-        {adaptiveImageLoader}
+      {/if}
-        {alt}
-        {width}
-        {height}
-        {overlays}
-        quality="preview"
-        src={status.urls.preview}
-        bind:ref={previewElement}
-      />
-    {/if}
 
-    {#if show.original}
+      {#if show.preview}
-      <ImageLayer
+        <ImageLayer
-        {adaptiveImageLoader}
+          {adaptiveImageLoader}
-        {alt}
+          {alt}
-        {width}
+          {width}
-        {height}
+          {height}
-        {overlays}
+          {overlays}
-        quality="original"
+          quality="preview"
-        src={status.urls.original}
+          src={status.urls.preview}
-        bind:ref={originalElement}
+          bind:ref={previewElement}
-      />
+        />
-    {/if}
+      {/if}
+
+      {#if show.original}
+        <ImageLayer
+          {adaptiveImageLoader}
+          {alt}
+          {width}
+          {height}
+          {overlays}
+          quality="original"
+          src={status.urls.original}
+          bind:ref={originalElement}
+        />
+      {/if}
+    </div>
   </div>
 </div>

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

@@ -1,9 +1,3 @@
-<script module lang="ts">
-  const useSplitNavTransitions =
-    typeof document !== 'undefined' &&
-    getComputedStyle(document.documentElement).getPropertyValue('--immich-split-viewer-nav').trim() === 'enabled';
-</script>
-
 <script lang="ts">
   import { browser } from '$app/environment';
   import { focusTrap } from '$lib/actions/focus-trap';
@@ -19,7 +13,6 @@
   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';
-  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import { getAssetActions } from '$lib/services/asset.service';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
@@ -34,7 +27,6 @@
   import { InvocationTracker } from '$lib/utils/invocationTracker';
   import { SlideshowHistory } from '$lib/utils/slideshow-history';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { crossfadeViewerContent, removeCrossfadeOverlay } from '$lib/utils/transition-utils';
   import {
     AssetTypeEnum,
     getAssetInfo,
@@ -48,7 +40,7 @@
   import { onDestroy, onMount, untrack } from 'svelte';
   import type { SwipeCustomEvent } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
-  import { fly, slide } from 'svelte/transition';
+  import { fly } from 'svelte/transition';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
   import ActivityStatus from './activity-status.svelte';
   import ActivityViewer from './activity-viewer.svelte';
@@ -67,7 +59,7 @@
     previousAsset?: AssetResponseDto;
   };
 
-  type Props = {
+  interface Props {
     cursor: AssetCursor;
     showNavigation?: boolean;
     withStacked?: boolean;
@@ -80,7 +72,7 @@
     onUndoDelete?: OnUndoDelete;
     onClose?: (asset: AssetResponseDto) => void;
     onRandom?: () => Promise<{ id: string } | undefined>;
-  };
+  }
 
   let {
     cursor,
@@ -97,14 +89,13 @@
     onRandom,
   }: Props = $props();
 
-  const { setAssetId, invisible } = assetViewingStore;
+  const { setAssetId } = assetViewingStore;
   const {
     restartProgress: restartSlideshowProgress,
     stopProgress: stopSlideshowProgress,
     slideshowNavigation,
     slideshowState,
     slideshowRepeat,
-    slideshowTransition,
   } = slideshowStore;
   const stackThumbnailSize = 60;
   const stackSelectedThumbnailSize = 65;
@@ -118,10 +109,6 @@
   let sharedLink = getSharedLink();
   let fullscreenElement = $state<Element>();
 
-  let slideShowPlaying = $derived($slideshowState === SlideshowState.PlaySlideshow);
-  let slideShowAscending = $derived($slideshowNavigation === SlideshowNavigation.AscendingOrder);
-  let slideShowShuffle = $derived($slideshowNavigation === SlideshowNavigation.Shuffle);
-
   let playOriginalVideo = $state($alwaysLoadOriginalVideo);
   let slideshowStartAssetId = $state<string>();
 
@@ -155,58 +142,46 @@
     }
   };
 
-  let transitionName = $state<string | undefined>('hero');
+  const onAssetUpdate = (updatedAsset: AssetResponseDto) => {
-  let letterboxTransitionName = $state<string | undefined>(undefined);
+    if (asset.id === updatedAsset.id) {
-  let detailPanelTransitionName = $state<string | undefined>(undefined);
+      cursor = { ...cursor, current: updatedAsset };
+    }
+  };
 
-  let unsubscribes: (() => void)[] = [];
   onMount(() => {
     syncAssetViewerOpenClass(true);
+    const slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
+      if (value === SlideshowState.PlaySlideshow) {
+        slideshowHistory.reset();
+        slideshowHistory.queue(toTimelineAsset(asset));
+        handlePromiseError(handlePlaySlideshow());
+      } else if (value === SlideshowState.StopSlideshow) {
+        handlePromiseError(handleStopSlideshow());
+      }
+    });
 
-    const addInfoTransition = () => {
+    const slideshowNavigationUnsubscribe = slideshowNavigation.subscribe((value) => {
-      detailPanelTransitionName = 'info';
+      if (value === SlideshowNavigation.Shuffle) {
-      transitionName = 'hero';
+        slideshowHistory.reset();
+        slideshowHistory.queue(toTimelineAsset(asset));
+      }
+    });
+
+    return () => {
+      slideshowStateUnsubscribe();
+      slideshowNavigationUnsubscribe();
     };
-
-    unsubscribes.push(
-      eventManager.on({
-        ViewerOpenTransition: addInfoTransition,
-        ViewerCloseTransition: addInfoTransition,
-      }),
-      slideshowState.subscribe((value) => {
-        if (value === SlideshowState.PlaySlideshow) {
-          slideshowHistory.reset();
-          slideshowHistory.queue(toTimelineAsset(asset));
-          handlePromiseError(handlePlaySlideshow());
-        } else if (value === SlideshowState.StopSlideshow) {
-          handlePromiseError(handleStopSlideshow());
-        }
-      }),
-      slideshowNavigation.subscribe((value) => {
-        if (value === SlideshowNavigation.Shuffle) {
-          slideshowHistory.reset();
-          slideshowHistory.queue(toTimelineAsset(asset));
-        }
-      }),
-    );
   });
 
   onDestroy(() => {
     activityManager.reset();
     assetViewerManager.closeEditor();
-    isFaceEditMode.value = false;
     syncAssetViewerOpenClass(false);
     preloadManager.destroy();
-
-    for (const unsubscribe of unsubscribes) {
-      unsubscribe();
-    }
   });
 
   const closeViewer = () => {
-    transitionName = 'hero';
+    onClose?.(asset);
-    const id = stack?.primaryAssetId ?? asset.id;
-    onClose?.({ ...asset, id });
   };
 
   const closeEditor = async () => {
@@ -218,143 +193,65 @@
     assetViewerManager.closeEditor();
   };
 
-  const getTransitionName = (kind: 'old' | 'new', direction: string | null | undefined) => {
-    if (direction === 'previous' || direction === 'next') {
-      return useSplitNavTransitions ? `${direction}-${kind}` : direction;
-    }
-    return direction ?? undefined;
-  };
-
-  const clearTransitionNames = () => {
-    detailPanelTransitionName = undefined;
-    transitionName = undefined;
-    letterboxTransitionName = undefined;
-  };
-
-  const startTransition = async (
-    types: string[],
-    targetTransition: string | null,
-    navigateFn: () => Promise<boolean>,
-  ) => {
-    const oldName = getTransitionName('old', targetTransition);
-    const newName = getTransitionName('new', targetTransition);
-
-    let result = false;
-
-    await viewTransitionManager.startTransition({
-      types,
-      prepareOldSnapshot: () => {
-        transitionName = oldName;
-        letterboxTransitionName = targetTransition ? `${targetTransition}-old` : undefined;
-        detailPanelTransitionName = 'detail-panel';
-      },
-      performUpdate: async (signal) => {
-        const ready = eventManager.untilNext('ViewerOpenTransitionReady', { signal });
-        result = await navigateFn();
-        await ready;
-      },
-      prepareNewSnapshot: () => {
-        transitionName = newName;
-        letterboxTransitionName = targetTransition ? `${targetTransition}-new` : undefined;
-      },
-      onFinished: clearTransitionNames,
-    });
-
-    return result;
-  };
-
-  const completeNavigation = async (order: 'previous' | 'next', skipTransition: boolean) => {
-    preloadManager.cancelBeforeNavigation(order);
-    const skipped = viewTransitionManager.skipTransitions();
-    const canTransition = viewTransitionManager.isSupported() && !skipped && !skipTransition;
-
-    let navigate: () => Promise<boolean>;
-    let types: string[];
-    let targetTransition: string | null;
-
-    if (slideShowPlaying && slideShowShuffle) {
-      navigate = async () => {
-        let next = order === 'previous' ? slideshowHistory.previous() : slideshowHistory.next();
-        if (!next) {
-          const asset = await onRandom?.();
-          if (asset) {
-            slideshowHistory.queue(asset);
-            next = true;
-          }
-        }
-        return next;
-      };
-      types = ['slideshow'];
-      targetTransition = null;
-    } else {
-      navigate = async () => {
-        const target = order === 'previous' ? previousAsset : nextAsset;
-        return navigateToAsset(target);
-      };
-      types = slideShowPlaying ? ['slideshow'] : ['viewer-nav'];
-      targetTransition = slideShowPlaying ? null : order;
-    }
-
-    const targetAsset = order === 'previous' ? previousAsset : nextAsset;
-    const slideshowAllowsTransition = !slideShowPlaying || $slideshowTransition;
-    const useTransition = slideshowAllowsTransition && (slideShowShuffle || !!targetAsset);
-
-    let hasNext: boolean;
-    if (slideShowPlaying && useTransition) {
-      hasNext = false;
-      await crossfadeViewerContent(async () => {
-        hasNext = await navigate();
-      }, 1000);
-    } else if (canTransition && useTransition) {
-      hasNext = await startTransition(types, targetTransition, navigate);
-    } else {
-      hasNext = await navigate();
-    }
-
-    if (!slideShowPlaying) {
-      return;
-    }
-
-    if (hasNext) {
-      $restartSlideshowProgress = true;
-      return;
-    }
-
-    if ($slideshowRepeat && slideshowStartAssetId) {
-      await setAssetId(slideshowStartAssetId);
-      $restartSlideshowProgress = true;
-      return;
-    }
-
-    await handleStopSlideshow();
-  };
-
   const tracker = new InvocationTracker();
-  let navigating = $state(false);
+  const navigateAsset = (order?: 'previous' | 'next') => {
-  const navigateAsset = (order?: 'previous' | 'next', skipTransition: boolean = false) => {
     if (!order) {
-      if (slideShowPlaying) {
+      if ($slideshowState === SlideshowState.PlaySlideshow) {
-        order = slideShowAscending ? 'previous' : 'next';
+        order = $slideshowNavigation === SlideshowNavigation.AscendingOrder ? 'previous' : 'next';
       } else {
         return;
       }
     }
 
+    preloadManager.cancelBeforeNavigation(order);
+
     if (tracker.isActive()) {
       return;
     }
 
-    navigating = true;
+    void tracker.invoke(async () => {
-    void tracker.invoke(
+      const isShuffle =
-      () => completeNavigation(order, skipTransition),
+        $slideshowState === SlideshowState.PlaySlideshow && $slideshowNavigation === SlideshowNavigation.Shuffle;
-      (error: unknown) => handleError(error, $t('error_while_navigating')),
+
-      () => {
+      let hasNext: boolean;
-        navigating = false;
+
-        eventManager.emit('ViewerAfterNavigate');
+      if (isShuffle) {
-      },
+        hasNext = order === 'previous' ? slideshowHistory.previous() : slideshowHistory.next();
-    );
+        if (!hasNext) {
+          const asset = await onRandom?.();
+          if (asset) {
+            slideshowHistory.queue(asset);
+            hasNext = true;
+          }
+        }
+      } else {
+        hasNext =
+          order === 'previous' ? await navigateToAsset(cursor.previousAsset) : await navigateToAsset(cursor.nextAsset);
+      }
+
+      if ($slideshowState !== SlideshowState.PlaySlideshow) {
+        return;
+      }
+
+      if (hasNext) {
+        $restartSlideshowProgress = true;
+        return;
+      }
+
+      if ($slideshowRepeat && slideshowStartAssetId) {
+        await setAssetId(slideshowStartAssetId);
+        $restartSlideshowProgress = true;
+        return;
+      }
+
+      await handleStopSlideshow();
+    }, $t('error_while_navigating'));
   };
 
+  /**
+   * Slide show mode
+   */
+
   let assetViewerHtmlElement = $state<HTMLElement>();
 
   const slideshowHistory = new SlideshowHistory((asset) => {
@@ -379,11 +276,10 @@
 
   const handleStopSlideshow = async () => {
     try {
-      if (!document.fullscreenElement) {
+      if (document.fullscreenElement) {
-        return;
+        document.body.style.cursor = '';
+        await document.exitFullscreen();
       }
-      document.body.style.cursor = '';
-      await document.exitFullscreen();
     } catch (error) {
       handleError(error, $t('errors.unable_to_exit_fullscreen'));
     } finally {
@@ -392,24 +288,8 @@
     }
   };
 
-  const handleStackedAssetMouseEnter = (stackedAsset: AssetResponseDto) => {
+  const handleStackedAssetMouseEvent = (isMouseOver: boolean, stackedAsset: AssetResponseDto) => {
-    if ((previewStackedAsset ?? cursor.current).id === stackedAsset.id) {
+    previewStackedAsset = isMouseOver ? stackedAsset : undefined;
-      return;
-    }
-
-    isFaceEditMode.value = false;
-    void crossfadeViewerContent(() => {
-      previewStackedAsset = stackedAsset;
-    });
-  };
-
-  const handleStackSlideshowMouseLeave = () => {
-    if (!previewStackedAsset) {
-      return;
-    }
-
-    removeCrossfadeOverlay();
-    previewStackedAsset = undefined;
   };
 
   const handlePreAction = (action: Action) => {
@@ -478,18 +358,15 @@
     }
   };
 
-  const refreshOcr = async () => {
-    ocrManager.clear();
-    if (sharedLink) {
-      return;
-    }
-
-    await ocrManager.getAssetOcr(asset.id);
-  };
-
   const refresh = async () => {
     await refreshStack();
-    await refreshOcr();
+    ocrManager.clear();
+    if (!sharedLink) {
+      if (previewStackedAsset) {
+        await ocrManager.getAssetOcr(previewStackedAsset.id);
+      }
+      await ocrManager.getAssetOcr(asset.id);
+    }
   };
 
   $effect(() => {
@@ -498,36 +375,21 @@
     untrack(() => handlePromiseError(refresh()));
   });
 
-  $effect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    previewStackedAsset;
-    untrack(() => ocrManager.clear());
-  });
-
   let lastCursor = $state<AssetCursor>();
 
   $effect(() => {
     if (cursor.current.id === lastCursor?.current.id) {
       return;
     }
-
     if (lastCursor) {
-      previewStackedAsset = undefined;
-      ocrManager.showOverlay = false;
       preloadManager.updateAfterNavigation(lastCursor, cursor, sharedLink);
-      lastCursor = cursor;
-      return;
     }
-    preloadManager.initializePreloads(cursor, sharedLink);
+    if (!lastCursor) {
+      preloadManager.initializePreloads(cursor, sharedLink);
+    }
     lastCursor = cursor;
   });
 
-  const onAssetUpdate = (update: AssetResponseDto) => {
-    if (asset.id === update.id) {
-      cursor = { ...cursor, current: update };
-    }
-  };
-
   const viewerKind = $derived.by(() => {
     if (previewStackedAsset) {
       return previewStackedAsset.type === AssetTypeEnum.Image ? 'PhotoViewer' : 'StackVideoViewer';
@@ -598,17 +460,13 @@
 
 <section
   id="immich-asset-viewer"
-  class="fixed inset-s-0 top-0 z-10 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black touch-none"
+  class="fixed start-0 top-0 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
-  class:invisible={$invisible}
-  data-navigating={navigating || undefined}
   use:focusTrap
   bind:this={assetViewerHtmlElement}
 >
+  <!-- Top navigation bar -->
   {#if $slideshowState === SlideshowState.None && !assetViewerManager.isShowEditor}
-    <div
+    <div class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
-      class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform"
-      style:view-transition-name="exclude"
-    >
       <AssetViewerNavBar
         {asset}
         {album}
@@ -619,7 +477,7 @@
         onAction={handleAction}
         {onUndoDelete}
         onPlaySlideshow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
-        onClose={onClose ? closeViewer : undefined}
+        onClose={onClose ? () => onClose(asset) : undefined}
         {playOriginalVideo}
         {setPlayOriginalVideo}
       />
@@ -640,21 +498,16 @@
   {/if}
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !isFaceEditMode.value && previousAsset}
-    <div
+    <div class="my-auto col-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
-      data-test-id="previous-asset"
-      class="my-auto col-span-1 col-start-1 row-span-full row-start-1 justify-self-start"
-      style:view-transition-name="exclude-leftbutton"
-    >
       <PreviousAssetAction onPreviousAsset={() => navigateAsset('previous')} />
     </div>
   {/if}
 
+  <!-- Asset Viewer -->
   <div data-viewer-content class="z-[-1] relative col-start-1 col-span-4 row-start-1 row-span-full">
     {#if viewerKind === 'StackVideoViewer'}
       <VideoViewer
-        {transitionName}
         asset={previewStackedAsset!}
-        assetId={previewStackedAsset!.id}
         cacheKey={previewStackedAsset!.thumbhash}
         projectionType={previewStackedAsset!.exifInfo?.projectionType}
         loopVideo={true}
@@ -667,7 +520,6 @@
       />
     {:else if viewerKind === 'LiveVideoViewer'}
       <VideoViewer
-        {transitionName}
         {asset}
         assetId={asset.livePhotoVideoId!}
         cacheKey={asset.thumbhash}
@@ -679,20 +531,13 @@
         {playOriginalVideo}
       />
     {:else if viewerKind === 'ImagePanaramaViewer'}
-      <ImagePanoramaViewer {asset} {transitionName} {letterboxTransitionName} />
+      <ImagePanoramaViewer {asset} />
     {:else if viewerKind === 'CropArea'}
       <CropArea {asset} />
     {:else if viewerKind === 'PhotoViewer'}
-      <PhotoViewer
+      <PhotoViewer cursor={{ ...cursor, current: asset }} {sharedLink} {onSwipe} />
-        {transitionName}
-        {letterboxTransitionName}
-        cursor={{ ...cursor, current: asset }}
-        {sharedLink}
-        {onSwipe}
-      />
     {:else if viewerKind === 'VideoViewer'}
       <VideoViewer
-        {transitionName}
         {asset}
         cacheKey={asset.thumbhash}
         projectionType={asset.exifInfo?.projectionType}
@@ -726,20 +571,15 @@
   </div>
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !isFaceEditMode.value && nextAsset}
-    <div
+    <div class="my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end">
-      data-test-id="next-asset"
-      class="my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end"
-      style:view-transition-name="exclude-rightbutton"
-    >
       <NextAssetAction onNextAsset={() => navigateAsset('next')} />
     </div>
   {/if}
 
   {#if showDetailPanel || assetViewerManager.isShowEditor}
     <div
-      transition:slide={{ axis: 'x', duration: 150 }}
+      transition:fly={{ duration: 150 }}
       id="detail-panel"
-      style:view-transition-name={detailPanelTransitionName}
       class="row-start-1 row-span-4 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray bg-light"
       translate="yes"
     >
@@ -755,14 +595,9 @@
     </div>
   {/if}
 
-  {#if stack && withStacked && !assetViewerManager.isShowEditor && $slideshowState === SlideshowState.None}
+  {#if stack && withStacked && !assetViewerManager.isShowEditor}
     {@const stackedAssets = stack.assets}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div id="stack-slideshow" class="absolute bottom-0 w-full col-span-4 col-start-1 pointer-events-none">
-    <div
-      id="stack-slideshow"
-      class="absolute bottom-0 w-full col-span-4 col-start-1 pointer-events-none"
-      onmouseleave={handleStackSlideshowMouseLeave}
-    >
       <div class="relative flex flex-row no-wrap overflow-x-auto overflow-y-hidden horizontal-scrollbar">
         {#each stackedAssets as stackedAsset (stackedAsset.id)}
           <div
@@ -775,12 +610,10 @@
               dimmed={stackedAsset.id !== asset.id}
               asset={toTimelineAsset(stackedAsset)}
               onClick={() => {
-                removeCrossfadeOverlay();
                 cursor.current = stackedAsset;
                 previewStackedAsset = undefined;
-                isFaceEditMode.value = false;
               }}
-              onMouseEvent={({ isMouseOver }) => isMouseOver && handleStackedAssetMouseEnter(stackedAsset)}
+              onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}
               readonly
               thumbnailSize={stackedAsset.id === asset.id ? stackSelectedThumbnailSize : stackThumbnailSize}
               showStackedIcon={false}

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

@@ -7,11 +7,10 @@
   import { timeToLoadTheMap } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import AssetChangeDateModal from '$lib/modals/AssetChangeDateModal.svelte';
   import { Route } from '$lib/route';
-  import { isEditFacesPanelOpen, isFaceEditMode } from '$lib/stores/face-edit.svelte';
+  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { locale } from '$lib/stores/preferences.store';
   import { preferences, user } from '$lib/stores/user.store';
@@ -50,15 +49,15 @@
   import UserAvatar from '../shared-components/user-avatar.svelte';
   import AlbumListItemDetails from './album-list-item-details.svelte';
 
-  type Props = {
+  interface Props {
     asset: AssetResponseDto;
     currentAlbum?: AlbumResponseDto | null;
-  };
+  }
 
   let { asset, currentAlbum = null }: Props = $props();
 
   let showAssetPath = $state(false);
-  let showEditFaces = $derived(isEditFacesPanelOpen.value);
+  let showEditFaces = $state(false);
   let isOwner = $derived($user?.id === asset.ownerId);
   let people = $derived(asset.people || []);
   let unassignedFaces = $derived(asset.unassignedFaces || []);
@@ -107,7 +106,7 @@
       return;
     }
 
-    isEditFacesPanelOpen.value = false;
+    showEditFaces = false;
     previousId = asset.id;
   });
 
@@ -123,8 +122,7 @@
 
   const handleRefreshPeople = async () => {
     asset = await getAssetInfo({ id: asset.id });
-    eventManager.emit('AssetUpdate', asset);
+    showEditFaces = false;
-    isEditFacesPanelOpen.value = false;
   };
 
   const getAssetFolderHref = (asset: AssetResponseDto) => {
@@ -221,7 +219,7 @@
               shape="round"
               color="secondary"
               variant="ghost"
-              onclick={() => (isEditFacesPanelOpen.value = true)}
+              onclick={() => (showEditFaces = true)}
             />
           {/if}
         </div>
@@ -230,14 +228,13 @@
       <div class="mt-2 flex flex-wrap gap-2">
         {#each people as person, index (person.id)}
           {#if showingHiddenPeople || !person.isHidden}
-            {@const isHighlighted = people[index].faces.some((f) => $boundingBoxesArray.some((b) => b.id === f.id))}
             <a
-              class="group w-22 outline-none"
+              class="w-22"
               href={Route.viewPerson(person, { previousRoute })}
               onfocus={() => ($boundingBoxesArray = people[index].faces)}
               onblur={() => ($boundingBoxesArray = [])}
-              onpointerover={() => ($boundingBoxesArray = people[index].faces)}
+              onmouseover={() => ($boundingBoxesArray = people[index].faces)}
-              onpointerleave={() => ($boundingBoxesArray = [])}
+              onmouseleave={() => ($boundingBoxesArray = [])}
             >
               <div class="relative">
                 <ImageThumbnail
@@ -249,8 +246,6 @@
                   widthStyle="90px"
                   heightStyle="90px"
                   hidden={person.isHidden}
-                  highlighted={isHighlighted}
-                  class="group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-immich-primary dark:group-focus-visible:outline-immich-dark-primary"
                 />
               </div>
               <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
@@ -579,7 +574,7 @@
   <PersonSidePanel
     assetId={asset.id}
     assetType={asset.type}
-    onClose={() => (isEditFacesPanelOpen.value = false)}
+    onClose={() => (showEditFaces = false)}
     onRefresh={handleRefreshPeople}
   />
 {/if}

web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.svelte

@@ -7,7 +7,6 @@
   import { Icon } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
 
   interface Props {
     asset: AssetResponseDto;
@@ -75,8 +74,6 @@
       alt={$getAltText(toTimelineAsset(asset))}
       class="h-full select-none transition-transform motion-reduce:transition-none"
       style:transform={imageTransform}
-      onload={() => eventManager.emit('ViewerOpenTransitionReady')}
-      onerror={() => eventManager.emit('ViewerOpenTransitionReady')}
     />
     <div
       class={[

web/src/lib/components/asset-viewer/editor/transform-tool/transform-tool.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { transformManager } from '$lib/managers/edit/transform-manager.svelte';
-  import { Button, HStack, Icon, IconButton } from '@immich/ui';
+  import { Button, HStack, IconButton } from '@immich/ui';
-  import { mdiAutoFix, mdiFlipHorizontal, mdiFlipVertical, mdiRotateLeft, mdiRotateRight } from '@mdi/js';
+  import { mdiFlipHorizontal, mdiFlipVertical, mdiRotateLeft, mdiRotateRight } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface AspectRatioOption {
@@ -137,19 +137,5 @@
         <span class="text-sm text-white">{ratio.label}</span>
       </HStack>
     {/each}
-    <HStack>
-      <Button
-        class="w-14 h-14 m-2"
-        shape="round"
-        color="secondary"
-        variant="outline"
-        loading={transformManager.isApplyingSmartCrop}
-        aria-label={$t('editor_smart_crop')}
-        onclick={() => transformManager.applySmartCrop()}
-      >
-        <Icon icon={mdiAutoFix} size="1.75em" />
-      </Button>
-      <span class="text-sm text-white">{$t('editor_smart_crop')}</span>
-    </HStack>
   </div>
 </div>

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 { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
-  import { computeContentMetrics, mapContentRectToNatural, type Size } from '$lib/utils/container-utils';
+  import { getNaturalSize, scaleToFit } from '$lib/utils/container-utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { scaleFaceRectOnResize, type ResizeContext } from '$lib/utils/people-utils';
   import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
   import { shortcut } from '$lib/actions/shortcut';
   import { Button, Input, modalManager, toastManager } from '@immich/ui';
@@ -14,19 +12,17 @@
   import { clamp } from 'lodash-es';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
 
-  type Props = {
+  interface Props {
-    imageSize: Size;
+    htmlElement: HTMLImageElement | HTMLVideoElement;
     containerWidth: number;
     containerHeight: number;
     assetId: string;
-  };
+  }
 
-  let { imageSize, containerWidth, containerHeight, assetId }: Props = $props();
+  let { htmlElement, containerWidth, containerHeight, assetId }: Props = $props();
 
   let canvasEl: HTMLCanvasElement | undefined = $state();
-  let containerEl: HTMLDivElement | undefined = $state();
   let canvas: Canvas | undefined = $state();
   let faceRect: Rect | undefined = $state();
   let faceSelectorEl: HTMLDivElement | undefined = $state();
@@ -36,9 +32,6 @@
 
   let searchTerm = $state('');
   let faceBoxPosition = $state({ left: 0, top: 0, width: 0, height: 0 });
-  let userMovedRect = false;
-  let previousMetrics: ResizeContext | null = null;
-  let panModifierHeld = $state(false);
 
   let filteredCandidates = $derived(
     searchTerm
@@ -60,12 +53,11 @@
   };
 
   const setupCanvas = () => {
-    if (!canvasEl) {
+    if (!canvasEl || !htmlElement) {
       return;
     }
 
-    canvas = new Canvas(canvasEl, { width: containerWidth, height: containerHeight });
+    canvas = new Canvas(canvasEl);
-    canvas.selection = false;
     configureControlStyle();
 
     // eslint-disable-next-line tscompat/tscompat
@@ -83,104 +75,67 @@
 
     canvas.add(faceRect);
     canvas.setActiveObject(faceRect);
+    setDefaultFaceRectanglePosition(faceRect);
   };
 
-  onMount(() => {
+  onMount(async () => {
-    void getPeople();
+    setupCanvas();
+    await getPeople();
   });
 
+  const imageContentMetrics = $derived.by(() => {
+    const natural = getNaturalSize(htmlElement);
+    const container = { width: containerWidth, height: containerHeight };
+    const { width: contentWidth, height: contentHeight } = scaleToFit(natural, container);
+    return {
+      contentWidth,
+      contentHeight,
+      offsetX: (containerWidth - contentWidth) / 2,
+      offsetY: (containerHeight - contentHeight) / 2,
+    };
+  });
+
+  const setDefaultFaceRectanglePosition = (faceRect: Rect) => {
+    const { offsetX, offsetY } = imageContentMetrics;
+
+    faceRect.set({
+      top: offsetY + 200,
+      left: offsetX + 200,
+    });
+
+    faceRect.setCoords();
+    positionFaceSelector();
+  };
+
   $effect(() => {
     if (!canvas) {
       return;
     }
 
-    const upperCanvas = canvas.upperCanvasEl;
+    canvas.setDimensions({
-    const controller = new AbortController();
+      width: containerWidth,
-    const { signal } = controller;
+      height: containerHeight,
-
-    const stopIfOnTarget = (event: PointerEvent) => {
-      if (canvas?.findTarget(event).target) {
-        event.stopPropagation();
-      }
-    };
-
-    const handlePointerDown = (event: PointerEvent) => {
-      if (!canvas) {
-        return;
-      }
-      if (canvas.findTarget(event).target) {
-        event.stopPropagation();
-        return;
-      }
-      if (faceRect) {
-        event.stopPropagation();
-        const pointer = canvas.getScenePoint(event);
-        faceRect.set({ left: pointer.x, top: pointer.y });
-        faceRect.setCoords();
-        userMovedRect = true;
-        canvas.renderAll();
-        positionFaceSelector();
-      }
-    };
-
-    upperCanvas.addEventListener('pointerdown', handlePointerDown, { signal });
-    upperCanvas.addEventListener('pointermove', stopIfOnTarget, { signal });
-    upperCanvas.addEventListener('pointerup', stopIfOnTarget, { signal });
-
-    return () => {
-      controller.abort();
-    };
-  });
-
-  const imageContentMetrics = $derived.by(() => {
-    if (imageSize.width === 0 || imageSize.height === 0) {
-      return { contentWidth: 0, contentHeight: 0, offsetX: 0, offsetY: 0 };
-    }
-    return computeContentMetrics(imageSize, { width: containerWidth, height: containerHeight });
-  });
-
-  const setDefaultFaceRectanglePosition = (faceRect: Rect) => {
-    const { offsetX, offsetY, contentWidth, contentHeight } = imageContentMetrics;
-
-    faceRect.set({
-      top: offsetY + contentHeight / 2 - 56,
-      left: offsetX + contentWidth / 2 - 56,
     });
-  };
 
-  $effect(() => {
+    if (!faceRect) {
-    const { offsetX, offsetY, contentWidth } = imageContentMetrics;
-
-    if (contentWidth === 0) {
       return;
     }
 
-    const isFirstRun = previousMetrics === null;
+    if (!isFaceRectIntersectingCanvas(faceRect, canvas)) {
-
-    if (isFirstRun && !canvas) {
-      setupCanvas();
-    }
-
-    if (!canvas || !faceRect) {
-      return;
-    }
-
-    if (!isFirstRun) {
-      canvas.setDimensions({ width: containerWidth, height: containerHeight });
-    }
-
-    if (!isFirstRun && userMovedRect && previousMetrics) {
-      faceRect.set(scaleFaceRectOnResize(faceRect, previousMetrics, { contentWidth, offsetX, offsetY }));
-    } else {
       setDefaultFaceRectanglePosition(faceRect);
     }
-
-    faceRect.setCoords();
-    previousMetrics = { contentWidth, offsetX, offsetY };
-    canvas.renderAll();
-    positionFaceSelector();
   });
 
+  const isFaceRectIntersectingCanvas = (faceRect: Rect, canvas: Canvas) => {
+    const faceBox = faceRect.getBoundingRect();
+    return !(
+      0 > faceBox.left + faceBox.width ||
+      0 > faceBox.top + faceBox.height ||
+      canvas.width < faceBox.left ||
+      canvas.height < faceBox.top
+    );
+  };
+
   const cancel = () => {
     isFaceEditMode.value = false;
   };
@@ -209,15 +164,11 @@
     const gap = 15;
     const padding = faceRect.padding ?? 0;
     const rawBox = faceRect.getBoundingRect();
-    if (Number.isNaN(rawBox.left) || Number.isNaN(rawBox.width)) {
-      return;
-    }
-    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
     const faceBox = {
-      left: (rawBox.left - padding) * currentZoom + currentPositionX,
+      left: rawBox.left - padding,
-      top: (rawBox.top - padding) * currentZoom + currentPositionY,
+      top: rawBox.top - padding,
-      width: (rawBox.width + padding * 2) * currentZoom,
+      width: rawBox.width + padding * 2,
-      height: (rawBox.height + padding * 2) * currentZoom,
+      height: rawBox.height + padding * 2,
     };
     const selectorWidth = faceSelectorEl.offsetWidth;
     const chromeHeight = faceSelectorEl.offsetHeight - scrollableListEl.offsetHeight;
@@ -227,21 +178,20 @@
     const clampTop = (top: number) => clamp(top, gap, containerHeight - selectorHeight - gap);
     const clampLeft = (left: number) => clamp(left, gap, containerWidth - selectorWidth - gap);
 
-    const faceRight = faceBox.left + faceBox.width;
-    const faceBottom = faceBox.top + faceBox.height;
-
     const overlapArea = (position: { top: number; left: number }) => {
-      const overlapX = Math.max(
+      const selectorRight = position.left + selectorWidth;
-        0,
+      const selectorBottom = position.top + selectorHeight;
-        Math.min(position.left + selectorWidth, faceRight) - Math.max(position.left, faceBox.left),
+      const faceRight = faceBox.left + faceBox.width;
-      );
+      const faceBottom = faceBox.top + faceBox.height;
-      const overlapY = Math.max(
+
-        0,
+      const overlapX = Math.max(0, Math.min(selectorRight, faceRight) - Math.max(position.left, faceBox.left));
-        Math.min(position.top + selectorHeight, faceBottom) - Math.max(position.top, faceBox.top),
+      const overlapY = Math.max(0, Math.min(selectorBottom, faceBottom) - Math.max(position.top, faceBox.top));
-      );
       return overlapX * overlapY;
     };
 
+    const faceBottom = faceBox.top + faceBox.height;
+    const faceRight = faceBox.left + faceBox.width;
+
     const positions = [
       { top: clampTop(faceBottom + gap), left: clampLeft(faceBox.left) },
       { top: clampTop(faceBox.top - selectorHeight - gap), left: clampLeft(faceBox.left) },
@@ -263,139 +213,45 @@
       }
     }
 
-    const containerRect = containerEl?.getBoundingClientRect();
+    faceSelectorEl.style.top = `${bestPosition.top}px`;
-    const offsetTop = containerRect?.top ?? 0;
+    faceSelectorEl.style.left = `${bestPosition.left}px`;
-    const offsetLeft = containerRect?.left ?? 0;
-    faceSelectorEl.style.top = `${bestPosition.top + offsetTop}px`;
-    faceSelectorEl.style.left = `${bestPosition.left + offsetLeft}px`;
     scrollableListEl.style.height = `${listHeight}px`;
-    faceBoxPosition = faceBox;
+    faceBoxPosition = { left: faceBox.left, top: faceBox.top, width: faceBox.width, height: faceBox.height };
   };
 
-  $effect(() => {
-    if (!canvas) {
-      return;
-    }
-
-    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
-    canvas.setViewportTransform([currentZoom, 0, 0, currentZoom, currentPositionX, currentPositionY]);
-    canvas.renderAll();
-    positionFaceSelector();
-  });
-
   $effect(() => {
     const rect = faceRect;
     if (rect) {
-      const onUserMove = () => {
+      rect.on('moving', positionFaceSelector);
-        userMovedRect = true;
+      rect.on('scaling', positionFaceSelector);
-        positionFaceSelector();
-      };
-      rect.on('moving', onUserMove);
-      rect.on('scaling', onUserMove);
       return () => {
-        rect.off('moving', onUserMove);
+        rect.off('moving', positionFaceSelector);
-        rect.off('scaling', onUserMove);
+        rect.off('scaling', positionFaceSelector);
       };
     }
   });
 
-  const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
-  const panModifierKey = isMac ? 'Meta' : 'Control';
-  const panModifierLabel = isMac ? '⌘' : 'Ctrl';
-  const isZoomed = $derived(assetViewerManager.zoom > 1);
-
-  $effect(() => {
-    if (!containerEl) {
-      return;
-    }
-    const element = containerEl;
-    const parent = element.parentElement;
-
-    const activate = () => {
-      panModifierHeld = true;
-      element.style.pointerEvents = 'none';
-      if (parent) {
-        parent.style.cursor = 'move';
-      }
-    };
-
-    const deactivate = () => {
-      panModifierHeld = false;
-      element.style.pointerEvents = '';
-      if (parent) {
-        parent.style.cursor = '';
-      }
-    };
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === panModifierKey) {
-        activate();
-      }
-    };
-    const onKeyUp = (event: KeyboardEvent) => {
-      if (event.key === panModifierKey) {
-        deactivate();
-      }
-    };
-
-    document.addEventListener('keydown', onKeyDown);
-    document.addEventListener('keyup', onKeyUp);
-    window.addEventListener('blur', deactivate);
-
-    return () => {
-      document.removeEventListener('keydown', onKeyDown);
-      document.removeEventListener('keyup', onKeyUp);
-      window.removeEventListener('blur', deactivate);
-      deactivate();
-    };
-  });
-
-  const trapEvents = (node: HTMLElement) => {
-    const stop = (e: Event) => e.stopPropagation();
-    const eventTypes = ['keydown', 'pointerdown', 'pointermove', 'pointerup'] as const;
-    for (const type of eventTypes) {
-      node.addEventListener(type, stop);
-    }
-
-    // Move to body so the selector isn't affected by the zoom transform on the container
-    document.body.append(node);
-
-    return {
-      destroy() {
-        for (const type of eventTypes) {
-          node.removeEventListener(type, stop);
-        }
-        node.remove();
-      },
-    };
-  };
-
   const getFaceCroppedCoordinates = () => {
-    if (!faceRect || imageSize.width === 0 || imageSize.height === 0) {
+    if (!faceRect || !htmlElement) {
       return;
     }
 
-    const scaledWidth = faceRect.getScaledWidth();
+    const { left, top, width, height } = faceRect.getBoundingRect();
-    const scaledHeight = faceRect.getScaledHeight();
+    const { offsetX, offsetY, contentWidth, contentHeight } = imageContentMetrics;
+    const natural = getNaturalSize(htmlElement);
 
-    const imageRect = mapContentRectToNatural(
+    const scaleX = natural.width / contentWidth;
-      {
+    const scaleY = natural.height / contentHeight;
-        left: faceRect.left - scaledWidth / 2,
+    const imageX = (left - offsetX) * scaleX;
-        top: faceRect.top - scaledHeight / 2,
+    const imageY = (top - offsetY) * scaleY;
-        width: scaledWidth,
-        height: scaledHeight,
-      },
-      imageContentMetrics,
-      imageSize,
-    );
 
     return {
-      imageWidth: imageSize.width,
+      imageWidth: natural.width,
-      imageHeight: imageSize.height,
+      imageHeight: natural.height,
-      x: Math.floor(imageRect.left),
+      x: Math.floor(imageX),
-      y: Math.floor(imageRect.top),
+      y: Math.floor(imageY),
-      width: Math.floor(imageRect.width),
+      width: Math.floor(width * scaleX),
-      height: Math.floor(imageRect.height),
+      height: Math.floor(height * scaleY),
     };
   };
 
@@ -426,9 +282,10 @@
       });
 
       await assetViewingStore.setAssetId(assetId);
-      isFaceEditMode.value = false;
     } catch (error) {
       handleError(error, 'Error tagging face');
+    } finally {
+      isFaceEditMode.value = false;
     }
   };
 </script>
@@ -437,7 +294,6 @@
 
 <div
   id="face-editor-data"
-  bind:this={containerEl}
   class="absolute start-0 top-0 z-5 h-full w-full overflow-hidden"
   data-face-left={faceBoxPosition.left}
   data-face-top={faceBoxPosition.top}
@@ -449,9 +305,7 @@
   <div
     id="face-selector"
     bind:this={faceSelectorEl}
-    class="fixed z-20 w-[min(200px,45vw)] min-w-48 bg-white dark:bg-immich-dark-gray dark:text-immich-dark-fg backdrop-blur-sm px-2 py-4 rounded-xl border border-gray-200 dark:border-gray-800 transition-[top,left] duration-200 ease-out"
+    class="absolute top-[calc(50%-250px)] start-[calc(50%-125px)] max-w-[250px] w-[250px] bg-white dark:bg-immich-dark-gray dark:text-immich-dark-fg backdrop-blur-sm px-2 py-4 rounded-xl border border-gray-200 dark:border-gray-800 transition-[top,left] duration-200 ease-out"
-    use:trapEvents
-    onwheel={(e) => e.stopPropagation()}
   >
     <p class="text-center text-sm">{$t('select_person_to_tag')}</p>
 
@@ -492,15 +346,4 @@
 
     <Button size="small" fullWidth onclick={cancel} color="danger" class="mt-2">{$t('cancel')}</Button>
   </div>
-
-  {#if isZoomed && !panModifierHeld}
-    <div
-      transition:fade={{ duration: 200 }}
-      class="absolute bottom-4 inset-s-1/2 -translate-x-1/2 pointer-events-none z-10"
-    >
-      <p class="bg-black/60 text-white text-xs px-3 py-1.5 rounded-full whitespace-nowrap">
-        {$t('hold_key_to_pan', { values: { key: panModifierLabel } })}
-      </p>
-    </div>
-  {/if}
 </div>

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

@@ -4,14 +4,13 @@
   import { AssetMediaSize, viewAsset, type AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
 
   type Props = {
-    transitionName?: string;
-    letterboxTransitionName?: string;
     asset: AssetResponseDto;
   };
 
-  let { transitionName, letterboxTransitionName, asset }: Props = $props();
+  let { asset }: Props = $props();
 
   const assetId = $derived(asset.id);
 
@@ -21,16 +20,11 @@
   };
 </script>
 
-<div class="flex h-dvh w-dvw select-none place-content-center place-items-center">
+<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
   {#await Promise.all([loadAssetData(assetId), import('./photo-sphere-viewer-adapter.svelte')])}
     <LoadingSpinner />
   {:then [data, { default: PhotoSphereViewer }]}
-    <PhotoSphereViewer
+    <PhotoSphereViewer panorama={data} originalPanorama={getAssetUrl({ asset, forceOriginal: true })} />
-      {transitionName}
-      {letterboxTransitionName}
-      panorama={data}
-      originalPanorama={getAssetUrl({ asset, forceOriginal: true })}
-    />
   {:catch}
     {$t('errors.failed_to_load_asset')}
   {/await}

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

@@ -1,68 +0,0 @@
-<script lang="ts">
-  interface Props {
-    letterboxTransitionName?: string | undefined;
-    show?: boolean;
-    scaledDimensions: {
-      width: number;
-      height: number;
-    };
-    container: {
-      width: number;
-      height: number;
-    };
-  }
-
-  let { letterboxTransitionName, show = true, scaledDimensions, container }: Props = $props();
-
-  const shouldShowLetterboxes = $derived(show && !!letterboxTransitionName);
-
-  const letterboxes = $derived.by(() => {
-    const { width, height } = scaledDimensions;
-    const horizontalOffset = (container.width - width) / 2;
-    const verticalOffset = (container.height - height) / 2;
-
-    return [
-      {
-        name: 'letterbox-left',
-        width: horizontalOffset + 'px',
-        height: container.height + 'px',
-        left: '0px',
-        top: '0px',
-      },
-      {
-        name: 'letterbox-right',
-        width: horizontalOffset + 'px',
-        height: container.height + 'px',
-        left: container.width - horizontalOffset + 'px',
-        top: '0px',
-      },
-      {
-        name: 'letterbox-top',
-        width: width + 'px',
-        height: verticalOffset + 'px',
-        left: horizontalOffset + 'px',
-        top: '0px',
-      },
-      {
-        name: 'letterbox-bottom',
-        width: width + 'px',
-        height: verticalOffset + 'px',
-        left: horizontalOffset + 'px',
-        top: container.height - verticalOffset + 'px',
-      },
-    ];
-  });
-</script>
-
-{#if shouldShowLetterboxes}
-  {#each letterboxes as box (box.name)}
-    <div
-      class="absolute"
-      style:view-transition-name={box.name}
-      style:left={box.left}
-      style:top={box.top}
-      style:width={box.width}
-      style:height={box.height}
-    ></div>
-  {/each}
-{/if}

web/src/lib/components/asset-viewer/ocr-bounding-box.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import type { OcrBox } from '$lib/utils/ocr-utils';
   import { calculateBoundingBoxMatrix, calculateFittedFontSize } from '$lib/utils/ocr-utils';
 
@@ -9,7 +8,6 @@
 
   let { ocrBox }: Props = $props();
 
-  const isTouch = $derived(mediaQueryManager.pointerCoarse);
   const dimensions = $derived(calculateBoundingBoxMatrix(ocrBox.points));
 
   const transform = $derived(`matrix3d(${dimensions.matrix.join(',')})`);
@@ -17,23 +15,13 @@
     calculateFittedFontSize(ocrBox.text, dimensions.width, dimensions.height, ocrBox.verticalMode) + 'px',
   );
 
-  const handleSelectStart = (event: Event) => {
-    const target = event.currentTarget as HTMLElement;
-    requestAnimationFrame(() => {
-      const selection = globalThis.getSelection();
-      if (selection) {
-        selection.selectAllChildren(target);
-      }
-    });
-  };
-
   const verticalStyle = $derived.by(() => {
     switch (ocrBox.verticalMode) {
       case 'cjk': {
-        return 'writing-mode: vertical-rl;';
+        return ' writing-mode: vertical-rl;';
       }
       case 'rotated': {
-        return 'writing-mode: vertical-rl; text-orientation: sideways;';
+        return ' writing-mode: vertical-rl; text-orientation: sideways;';
       }
       default: {
         return '';
@@ -42,23 +30,17 @@
   });
 </script>
 
-<div
+<div class="absolute left-0 top-0">
-  class={[
+  <div
-    'absolute left-0 top-0 flex items-center justify-center',
+    class="absolute flex items-center justify-center text-transparent border-2 border-blue-500 bg-blue-500/10 pointer-events-auto cursor-text select-text transition-colors hover:z-1 hover:text-white hover:bg-black/60 hover:border-blue-600 hover:border-3 focus:z-1 focus:text-white focus:bg-black/60 focus:border-blue-600 focus:border-3 focus:outline-none {ocrBox.verticalMode ===
-    'border-2 border-blue-500 pointer-events-auto cursor-text',
+    'none'
-    'focus:z-1 focus:border-blue-600 focus:border-3 focus:outline-none',
+      ? 'px-2 py-1 whitespace-nowrap'
-    isTouch
+      : 'px-1 py-2'}"
-      ? 'text-white bg-black/60 select-all'
+    style="font-size: {fontSize}; width: {dimensions.width}px; height: {dimensions.height}px; transform: {transform}; transform-origin: 0 0;{verticalStyle}"
-      : 'select-text text-transparent bg-blue-500/10 transition-colors hover:z-1 hover:text-white hover:bg-black/60 hover:border-blue-600 hover:border-3',
+    tabindex="0"
-    ocrBox.verticalMode === 'none' ? 'px-2 py-1 whitespace-nowrap' : 'px-1 py-2',
+    role="button"
-  ]}
+    aria-label={ocrBox.text}
-  style="font-size: {fontSize}; width: {dimensions.width}px; height: {dimensions.height}px; transform: {transform}; transform-origin: 0 0; touch-action: none; {verticalStyle}"
+  >
-  data-testid="ocr-box"
+    {ocrBox.text}
-  data-overlay-interactive
+  </div>
-  tabindex="0"
-  role="button"
-  aria-label={ocrBox.text}
-  onselectstart={isTouch ? handleSelectStart : undefined}
->
-  {ocrBox.text}
 </div>

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

@@ -1,9 +1,7 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
   import AssetViewerEvents from '$lib/components/AssetViewerEvents.svelte';
-  import Letterboxes from '$lib/components/asset-viewer/letterboxes.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { ocrManager, type OcrBoundingBox } from '$lib/stores/ocr.svelte';
   import { boundingBoxesArray, type Faces } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
@@ -43,8 +41,6 @@
     'flex items-center justify-center text-white bg-black/50 cursor-text pointer-events-auto whitespace-pre-wrap wrap-break-word select-text';
 
   type Props = {
-    transitionName?: string;
-    letterboxTransitionName?: string;
     panorama: string | { source: string };
     originalPanorama?: string | { source: string };
     adapter?: AdapterConstructor | [AdapterConstructor, unknown];
@@ -52,21 +48,11 @@
     navbar?: boolean;
   };
 
-  let {
+  let { panorama, originalPanorama, adapter = EquirectangularAdapter, plugins = [], navbar = false }: Props = $props();
-    transitionName,
-    letterboxTransitionName,
-    panorama,
-    originalPanorama,
-    adapter = EquirectangularAdapter,
-    plugins = [],
-    navbar = false,
-  }: Props = $props();
 
   let container: HTMLDivElement | undefined = $state();
   let viewer: Viewer;
 
-  const fullscreenDimensions = { width: globalThis.innerWidth || 0, height: globalThis.innerHeight || 0 };
-
   let animationInProgress: { cancel: () => void } | undefined;
   let previousFaces: Faces[] = [];
 
@@ -142,8 +128,10 @@
     }
 
     const boxes = getOcrBoundingBoxes(ocrData, {
-      width: viewer.state.textureData.panoData.croppedWidth,
+      contentWidth: viewer.state.textureData.panoData.croppedWidth,
-      height: viewer.state.textureData.panoData.croppedHeight,
+      contentHeight: viewer.state.textureData.panoData.croppedHeight,
+      offsetX: 0,
+      offsetY: 0,
     });
 
     for (const [index, box] of boxes.entries()) {
@@ -224,7 +212,6 @@
       zoomSpeed: 0.5,
       fisheye: false,
     });
-    viewer.addEventListener('ready', () => eventManager.emit('ViewerOpenTransitionReady'), { once: true });
     const resolutionPlugin = viewer.getPlugin<ResolutionPlugin>(ResolutionPlugin);
     const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
       // zoomLevel is 0-100
@@ -269,15 +256,7 @@
 <AssetViewerEvents {onZoom} />
 
 <svelte:document use:shortcuts={[{ shortcut: { key: 'z' }, onShortcut: onZoom, preventDefault: true }]} />
-<div
+<div class="h-full w-full mb-0" bind:this={container}></div>
-  id="sphere"
-  class="h-full w-full h-dvh w-dvw mb-0"
-  bind:this={container}
-  style:view-transition-name={transitionName}
-></div>
-
-<!-- Zero-sized letterboxes for view transitions from/to regular photos -->
-<Letterboxes {letterboxTransitionName} scaledDimensions={fullscreenDimensions} container={fullscreenDimensions} />
 
 <style>
   /* Reset the default tooltip styling */

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

@@ -8,57 +8,38 @@
   import AssetViewerEvents from '$lib/components/AssetViewerEvents.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { castManager } from '$lib/managers/cast-manager.svelte';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
-  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
-  import { isEditFacesPanelOpen, isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { ocrManager } from '$lib/stores/ocr.svelte';
   import { boundingBoxesArray, type Faces } from '$lib/stores/people.store';
   import { SlideshowLook, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { handlePromiseError } from '$lib/utils';
   import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
-  import type { Size } from '$lib/utils/container-utils';
+  import { getNaturalSize, scaleToFit, type ContentMetrics } from '$lib/utils/container-utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { KenBurnsAnimation } from '$lib/utils/ken-burns';
   import { getOcrBoundingBoxes } from '$lib/utils/ocr-utils';
   import { getBoundingBox } from '$lib/utils/people-utils';
   import { type SharedLinkResponseDto } from '@immich/sdk';
   import { toastManager } from '@immich/ui';
-  import { onDestroy, onMount, untrack } from 'svelte';
+  import { onDestroy, untrack } from 'svelte';
   import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
   import type { AssetCursor } from './asset-viewer.svelte';
 
-  type Props = {
+  interface Props {
     cursor: AssetCursor;
     element?: HTMLDivElement;
     sharedLink?: SharedLinkResponseDto;
-    transitionName?: string;
+    onReady?: () => void;
-    letterboxTransitionName?: string;
     onError?: () => void;
     onSwipe?: (event: SwipeCustomEvent) => void;
-  };
+  }
 
-  let {
+  let { cursor, element = $bindable(), sharedLink, onReady, onError, onSwipe }: Props = $props();
-    cursor,
-    element = $bindable(),
-    sharedLink,
-    transitionName,
-    letterboxTransitionName,
-    onError,
-    onSwipe,
-  }: Props = $props();
 
-  const { slideshowState, slideshowLook, kenBurnsEffect, slideshowDelay } = slideshowStore;
+  const { slideshowState, slideshowLook } = slideshowStore;
   const asset = $derived(cursor.current);
 
   let visibleImageReady: boolean = $state(false);
-  const kenBurns = new KenBurnsAnimation();
-  let adaptiveImage = $state<HTMLDivElement | undefined>();
-  onMount(() =>
-    eventManager.on({
-      ViewTransitionOldSnapshotPending: () => kenBurns.freeze(),
-    }),
-  );
 
   let previousAssetId: string | undefined;
   $effect.pre(() => {
@@ -68,16 +49,13 @@
     }
     previousAssetId = id;
     untrack(() => {
-      kenBurns.cancel();
       assetViewerManager.resetZoomState();
       visibleImageReady = false;
       $boundingBoxesArray = [];
-      adaptiveImage?.style.removeProperty('transform');
     });
   });
 
   onDestroy(() => {
-    kenBurns.cancel();
     $boundingBoxesArray = [];
   });
 
@@ -89,14 +67,23 @@
     height: containerHeight,
   });
 
-  const isCoverMode = $derived($slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.Cover);
+  const overlayMetrics = $derived.by((): ContentMetrics => {
+    if (!assetViewerManager.imgRef || !visibleImageReady) {
+      return { contentWidth: 0, contentHeight: 0, offsetX: 0, offsetY: 0 };
+    }
 
-  let imageDimensions = $state<Size>({ width: 0, height: 0 });
+    const natural = getNaturalSize(assetViewerManager.imgRef);
-  let scaledDimensions = $state<Size>({ width: 0, height: 0 });
+    const scaled = scaleToFit(natural, { width: containerWidth, height: containerHeight });
 
-  const overlaySize = $derived(visibleImageReady ? scaledDimensions : { width: 0, height: 0 });
+    return {
+      contentWidth: scaled.width,
+      contentHeight: scaled.height,
+      offsetX: 0,
+      offsetY: 0,
+    };
+  });
 
-  const ocrBoxes = $derived(ocrManager.showOverlay ? getOcrBoundingBoxes(ocrManager.data, overlaySize) : []);
+  const ocrBoxes = $derived(ocrManager.showOverlay ? getOcrBoundingBoxes(ocrManager.data, overlayMetrics) : []);
 
   const onCopy = async () => {
     if (!canCopyImageToClipboard() || !assetViewerManager.imgRef) {
@@ -118,6 +105,12 @@
 
   const onPlaySlideshow = () => ($slideshowState = SlideshowState.PlaySlideshow);
 
+  $effect(() => {
+    if (isFaceEditMode.value && assetViewerManager.zoom > 1) {
+      onZoom();
+    }
+  });
+
   // TODO move to action + command palette
   const onCopyShortcut = (event: KeyboardEvent) => {
     if (globalThis.getSelection()?.type === 'Range') {
@@ -160,63 +153,46 @@
 
   const faceToNameMap = $derived.by(() => {
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
-    const map = new Map<Faces, string | undefined>();
+    const map = new Map<Faces, string>();
     for (const person of asset.people ?? []) {
       for (const face of person.faces ?? []) {
         map.set(face, person.name);
       }
     }
-    for (const face of asset.unassignedFaces ?? []) {
-      map.set(face, undefined);
-    }
     return map;
   });
 
-  // Array needed for indexed access in the template (faces[index])
   const faces = $derived(Array.from(faceToNameMap.keys()));
-  const boundingBoxes = $derived(getBoundingBox(faces, overlaySize));
-  const activeBoundingBoxes = $derived(boundingBoxes.filter((box) => $boundingBoxesArray.some((f) => f.id === box.id)));
 
-  const unassignedFaces = $derived((asset.unassignedFaces ?? []) as Faces[]);
+  const handleImageMouseMove = (event: MouseEvent) => {
-
+    $boundingBoxesArray = [];
-  const kenBurnsActive = $derived($slideshowState === SlideshowState.PlaySlideshow && $kenBurnsEffect);
+    if (!assetViewerManager.imgRef || !element || isFaceEditMode.value || ocrManager.showOverlay) {
-
-  $effect(() => {
-    if (!kenBurnsActive || !visibleImageReady || !adaptiveImage || !assetViewerManager.imgRef) {
       return;
     }
 
-    assetViewerManager.zoomState = { ...untrack(() => assetViewerManager.zoomState), enable: false };
+    const natural = getNaturalSize(assetViewerManager.imgRef);
+    const scaled = scaleToFit(natural, container);
+    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
 
-    void kenBurns.startWithSmartCrop(adaptiveImage, {
+    const contentOffsetX = (container.width - scaled.width) / 2;
-      imgRef: assetViewerManager.imgRef,
+    const contentOffsetY = (container.height - scaled.height) / 2;
-      faces,
-      fallbackFaces: unassignedFaces,
-      contentWidth: overlaySize.width,
-      contentHeight: overlaySize.height,
-      containerWidth,
-      containerHeight,
-      slideshowLook: $slideshowLook,
-      isCoverMode,
-      slideshowDelay: $slideshowDelay,
-      assetId: asset.id,
-    });
 
-    return () => {
+    const containerRect = element.getBoundingClientRect();
-      kenBurns.cancel();
+    const mouseX = (event.clientX - containerRect.left - contentOffsetX * currentZoom - currentPositionX) / currentZoom;
-      if (viewTransitionManager.activeViewTransition === null) {
+    const mouseY = (event.clientY - containerRect.top - contentOffsetY * currentZoom - currentPositionY) / currentZoom;
-        assetViewerManager.resetZoomState();
+
+    const faceBoxes = getBoundingBox(faces, overlayMetrics);
+
+    for (const [index, box] of faceBoxes.entries()) {
+      if (mouseX >= box.left && mouseX <= box.left + box.width && mouseY >= box.top && mouseY <= box.top + box.height) {
+        $boundingBoxesArray.push(faces[index]);
       }
-    };
-  });
-
-  $effect(() => {
-    if (viewTransitionManager.activeViewTransition === null) {
-      kenBurns.resume();
-    } else {
-      kenBurns.pause();
     }
-  });
+  };
+
+  const handleImageMouseLeave = () => {
+    $boundingBoxesArray = [];
+  };
 </script>
 
 <AssetViewerEvents {onCopy} {onZoom} />
@@ -237,30 +213,26 @@
   bind:clientHeight={containerHeight}
   role="presentation"
   ondblclick={onZoom}
-  use:zoomImageAction={{ zoomTarget: adaptiveImage }}
+  onmousemove={handleImageMouseMove}
+  onmouseleave={handleImageMouseLeave}
+  use:zoomImageAction={{ disabled: isFaceEditMode.value || ocrManager.showOverlay }}
   {...useSwipe((event) => onSwipe?.(event))}
 >
   <AdaptiveImage
     {asset}
     {sharedLink}
     {container}
-    objectFit={isCoverMode ? 'cover' : 'contain'}
+    objectFit={$slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.Cover ? 'cover' : 'contain'}
     {onUrlChange}
     onImageReady={() => {
       visibleImageReady = true;
-      eventManager.emit('ViewerOpenTransitionReady');
+      onReady?.();
     }}
     onError={() => {
       onError?.();
-      eventManager.emit('ViewerOpenTransitionReady');
+      onReady?.();
     }}
     bind:imgRef={assetViewerManager.imgRef}
-    bind:imgNaturalSize={imageDimensions}
-    bind:imgScaledSize={scaledDimensions}
-    bind:ref={adaptiveImage}
-    {transitionName}
-    {letterboxTransitionName}
-    showLetterboxes={!blurredSlideshow}
   >
     {#snippet backdrop()}
       {#if blurredSlideshow}
@@ -271,40 +243,20 @@
       {/if}
     {/snippet}
     {#snippet overlays()}
-      {#if !isFaceEditMode.value}
+      {#each getBoundingBox($boundingBoxesArray, overlayMetrics) as boundingbox, index (boundingbox.id)}
-        {#each boundingBoxes as boundingbox, index (boundingbox.id)}
-          {@const face = faces[index]}
-          {@const name = faceToNameMap.get(face)}
-          {#if name !== undefined || isEditFacesPanelOpen.value}
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div
-              class="absolute pointer-events-auto outline-none rounded-lg"
-              style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
-              aria-label="{$t('person')}: {name ?? $t('unknown')}"
-              onpointerenter={() => ($boundingBoxesArray = [face])}
-              onpointerleave={() => ($boundingBoxesArray = [])}
-            ></div>
-          {/if}
-        {/each}
-      {/if}
-
-      {#each activeBoundingBoxes as boundingbox (boundingbox.id)}
-        {@const face = faces.find((f) => f.id === boundingbox.id)}
-        {@const name = face ? faceToNameMap.get(face) : undefined}
         <div
-          class="absolute border-solid border-white border-3 rounded-lg pointer-events-none"
+          class="absolute border-solid border-white border-3 rounded-lg"
           style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
-        >
+        ></div>
-          {#if name}
+        {#if faceToNameMap.get($boundingBoxesArray[index])}
-            <div
+          <div
-              aria-hidden="true"
+            class="absolute bg-white/90 text-black px-2 py-1 rounded text-sm font-medium whitespace-nowrap pointer-events-none shadow-lg"
-              class="absolute bg-white/90 text-black px-2 py-1 rounded text-sm font-medium whitespace-nowrap shadow-lg"
+            style="top: {boundingbox.top + boundingbox.height + 4}px; left: {boundingbox.left +
-              style="top: {boundingbox.height + 4}px; right: 0;"
+              boundingbox.width}px; transform: translateX(-100%);"
-            >
+          >
-              {name}
+            {faceToNameMap.get($boundingBoxesArray[index])}
-            </div>
+          </div>
-          {/if}
+        {/if}
-        </div>
       {/each}
 
       {#each ocrBoxes as ocrBox (ocrBox.id)}
@@ -314,6 +266,6 @@
   </AdaptiveImage>
 
   {#if isFaceEditMode.value && assetViewerManager.imgRef}
-    <FaceEditor imageSize={imageDimensions} {containerWidth} {containerHeight} assetId={asset.id} />
+    <FaceEditor htmlElement={assetViewerManager.imgRef} {containerWidth} {containerHeight} assetId={asset.id} />
   {/if}
 </div>

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

@@ -3,7 +3,6 @@
   import VideoRemoteViewer from '$lib/components/asset-viewer/video-remote-viewer.svelte';
   import { assetViewerFadeDuration } from '$lib/constants';
   import { castManager } from '$lib/managers/cast-manager.svelte';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import {
     autoPlayVideo,
@@ -12,17 +11,14 @@
     videoViewerVolume,
   } from '$lib/stores/preferences.store';
   import { getAssetMediaUrl, getAssetPlaybackUrl } from '$lib/utils';
-  import type { Size } from '$lib/utils/container-utils';
   import { AssetMediaSize } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { onDestroy, onMount } from 'svelte';
   import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
   import { fade } from 'svelte/transition';
 
-  type Props = {
+  interface Props {
-    transitionName?: string;
     assetId: string;
-    imageSize: Size;
     loopVideo: boolean;
     cacheKey: string | null;
     playOriginalVideo: boolean;
@@ -31,12 +27,10 @@
     onVideoEnded?: () => void;
     onVideoStarted?: () => void;
     onClose?: () => void;
-  };
+  }
 
   let {
-    transitionName,
     assetId,
-    imageSize,
     loopVideo,
     cacheKey,
     playOriginalVideo,
@@ -64,6 +58,7 @@
   });
 
   $effect(() => {
+    // reactive on `assetFileUrl` changes
     if (assetFileUrl) {
       hasFocused = false;
       videoPlayer?.load();
@@ -144,7 +139,6 @@
       </div>
     {:else}
       <video
-        style:view-transition-name={transitionName}
         bind:this={videoPlayer}
         loop={$loopVideoPreference && loopVideo}
         autoplay={$autoPlayVideo}
@@ -153,7 +147,6 @@
         disablePictureInPicture
         class="h-full object-contain"
         {...useSwipe(onSwipe)}
-        onloadedmetadata={() => eventManager.emit('ViewerOpenTransitionReady')}
         oncanplay={(e) => handleCanPlay(e.currentTarget)}
         onended={onVideoEnded}
         onvolumechange={(e) => ($videoViewerMuted = e.currentTarget.muted)}
@@ -180,7 +173,7 @@
       {/if}
 
       {#if isFaceEditMode.value}
-        <FaceEditor {imageSize} {containerWidth} {containerHeight} {assetId} />
+        <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
       {/if}
     {/if}
   </div>

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

@@ -3,13 +3,13 @@
   import type { AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
 
   interface Props {
-    transitionName?: string;
     asset: AssetResponseDto;
   }
 
-  const { asset, transitionName }: Props = $props();
+  const { asset }: Props = $props();
 
   const modules = Promise.all([
     import('./photo-sphere-viewer-adapter.svelte').then((module) => module.default),
@@ -19,12 +19,11 @@
   ]);
 </script>
 
-<div class="flex h-full select-none place-content-center place-items-center">
+<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
   {#await modules}
     <LoadingSpinner />
   {:then [PhotoSphereViewer, adapter, videoPlugin]}
     <PhotoSphereViewer
-      {transitionName}
       panorama={{ source: getAssetPlaybackUrl({ id: asset.id }) }}
       originalPanorama={{ source: getAssetUrl({ asset, forceOriginal: true })! }}
       plugins={[videoPlugin]}

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

@@ -4,8 +4,7 @@
   import { ProjectionType } from '$lib/constants';
   import type { AssetResponseDto } from '@immich/sdk';
 
-  type Props = {
+  interface Props {
-    transitionName?: string;
     asset: AssetResponseDto;
     assetId?: string;
     projectionType: string | null | undefined;
@@ -17,10 +16,9 @@
     onNextAsset?: () => void;
     onVideoEnded?: () => void;
     onVideoStarted?: () => void;
-  };
+  }
 
   let {
-    transitionName,
     asset,
     assetId,
     projectionType,
@@ -38,14 +36,12 @@
 </script>
 
 {#if projectionType === ProjectionType.EQUIRECTANGULAR}
-  <VideoPanoramaViewer {transitionName} {asset} />
+  <VideoPanoramaViewer {asset} />
 {:else}
   <VideoNativeViewer
-    {transitionName}
     {loopVideo}
     {cacheKey}
     assetId={effectiveAssetId}
-    imageSize={{ width: asset.width ?? 1, height: asset.height ?? 1 }}
     {playOriginalVideo}
     {onPreviousAsset}
     {onNextAsset}

web/src/lib/components/assets/thumbnail/image-thumbnail.svelte

@@ -16,7 +16,6 @@
     circle?: boolean;
     hidden?: boolean;
     border?: boolean;
-    highlighted?: boolean;
     hiddenIconClass?: string;
     class?: ClassValue;
     brokenAssetClass?: ClassValue;
@@ -35,7 +34,6 @@
     circle = false,
     hidden = false,
     border = false,
-    highlighted = false,
     hiddenIconClass = 'text-white',
     onComplete = undefined,
     class: imageClass = '',
@@ -85,10 +83,6 @@
   />
 {/if}
 
-{#if highlighted}
-  <span class={['absolute inset-0 pointer-events-none border-2 border-white', sharedClasses]} {style}></span>
-{/if}
-
 {#if hidden}
   <div class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
     <!-- TODO fix `title` type -->

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

@@ -27,12 +27,12 @@
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import AssignFaceSidePanel from './assign-face-side-panel.svelte';
 
-  type Props = {
+  interface Props {
     assetId: string;
     assetType: AssetTypeEnum;
     onClose: () => void;
     onRefresh: () => void;
-  };
+  }
 
   let { assetId, assetType, onClose, onRefresh }: Props = $props();
 
@@ -58,8 +58,6 @@
   let automaticRefreshTimeout: ReturnType<typeof setTimeout>;
 
   const thumbnailWidth = '90px';
-  const focusHighlightClass =
-    'group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-immich-primary dark:group-focus-visible:outline-immich-dark-primary';
 
   async function loadPeople() {
     const timeout = setTimeout(() => (isShowLoadingPeople = true), timeBeforeShowLoadingSpinner);
@@ -228,16 +226,14 @@
       {:else}
         {#each peopleWithFaces as face, index (face.id)}
           {@const personName = face.person ? face.person?.name : $t('face_unassigned')}
-          {@const isHighlighted = $boundingBoxesArray.some((f) => f.id === face.id)}
           <div class="relative h-29 w-24">
             <div
               role="button"
               tabindex={index}
-              data-testid="face-thumbnail"
+              class="absolute start-0 top-0 h-22.5 w-22.5 cursor-default"
-              class="group absolute inset-s-0 top-0 h-22.5 w-22.5 cursor-default outline-none"
               onfocus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
-              onpointerover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
+              onmouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
-              onpointerleave={() => ($boundingBoxesArray = [])}
+              onmouseleave={() => ($boundingBoxesArray = [])}
             >
               <div class="relative">
                 {#if selectedPersonToCreate[face.id]}
@@ -249,8 +245,6 @@
                     title={$t('new_person')}
                     widthStyle={thumbnailWidth}
                     heightStyle={thumbnailWidth}
-                    highlighted={isHighlighted}
-                    class={focusHighlightClass}
                   />
                 {:else if selectedPersonToReassign[face.id]}
                   <ImageThumbnail
@@ -265,8 +259,6 @@
                     widthStyle={thumbnailWidth}
                     heightStyle={thumbnailWidth}
                     hidden={selectedPersonToReassign[face.id].isHidden}
-                    highlighted={isHighlighted}
-                    class={focusHighlightClass}
                   />
                 {:else if face.person}
                   <ImageThumbnail
@@ -278,8 +270,6 @@
                     widthStyle={thumbnailWidth}
                     heightStyle={thumbnailWidth}
                     hidden={face.person.isHidden}
-                    highlighted={isHighlighted}
-                    class={focusHighlightClass}
                   />
                 {:else}
                   {#await zoomImageToBase64(face, assetId, assetType, assetViewerManager.imgRef)}
@@ -291,8 +281,6 @@
                       title={$t('face_unassigned')}
                       widthStyle="90px"
                       heightStyle="90px"
-                      highlighted={isHighlighted}
-                      class={focusHighlightClass}
                     />
                   {:then data}
                     <ImageThumbnail
@@ -303,8 +291,6 @@
                       title={$t('face_unassigned')}
                       widthStyle="90px"
                       heightStyle="90px"
-                      highlighted={isHighlighted}
-                      class={focusHighlightClass}
                     />
                   {/await}
                 {/if}

web/src/lib/components/layouts/user-page-layout.svelte

@@ -6,11 +6,10 @@
   import { useActions, type ActionArray } from '$lib/actions/use-actions';
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
   import UserSidebar from '$lib/components/shared-components/side-bar/user-sidebar.svelte';
-  import { appManager } from '$lib/managers/app-manager.svelte';
   import type { HeaderButtonActionItem } from '$lib/types';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { Button, ContextMenuButton, HStack, isMenuItemType, type MenuItemType } from '@immich/ui';
-  import { type Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -45,17 +44,12 @@
 
   let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar' : 'scrollbar-hidden');
   let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-(--spacing(16)))]' : 'top-0 h-full');
-  let isAssetViewer = $derived(appManager.isAssetViewer);
 </script>
 
 <header>
-  {#if !hideNavbar && !isAssetViewer}
+  {#if !hideNavbar}
     <NavigationBar onUploadClick={() => openFileUploadDialog()} />
   {/if}
-
-  {#if isAssetViewer}
-    <div class="max-md:h-(--navbar-height-md) h-(--navbar-height)"></div>
-  {/if}
 </header>
 <div
   tabindex="-1"
@@ -64,15 +58,13 @@
     {hideNavbar ? 'pt-(--navbar-height)' : ''}
     {hideNavbar ? 'max-md:pt-(--navbar-height-md)' : ''}"
 >
-  {#if isAssetViewer}
+  {#if sidebar}
-    <div></div>
-  {:else if sidebar}
     {@render sidebar()}
   {:else}
     <UserSidebar />
   {/if}
 
-  <main class="relative w-full">
+  <main class="relative">
     <div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto p-2" use:useActions={use}>
       {@render children?.()}
     </div>

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

@@ -1,32 +1,57 @@
 <script lang="ts">
-  import AdaptiveImage from '$lib/components/AdaptiveImage.svelte';
+  import { assetViewerFadeDuration } from '$lib/constants';
-  import type { Size } from '$lib/utils/container-utils';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { AssetResponseDto } from '@immich/sdk';
+  import { getAssetMediaUrl } from '$lib/utils';
+  import { getAltText } from '$lib/utils/thumbnail-util';
+  import { AssetMediaSize } from '@immich/sdk';
   import DelayedLoadingSpinner from '$lib/components/DelayedLoadingSpinner.svelte';
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
 
   interface Props {
-    asset: AssetResponseDto;
+    asset: TimelineAsset;
-    transitionName?: string;
     onImageLoad: () => void;
-    onError?: () => void;
   }
 
-  const { asset, transitionName, onImageLoad, onError }: Props = $props();
+  const { asset, onImageLoad }: Props = $props();
 
-  let containerWidth = $state(0);
+  let assetFileUrl: string = $state('');
-  let containerHeight = $state(0);
+  let imageLoaded: boolean = $state(false);
+  let loader = $state<HTMLImageElement>();
 
-  const container: Size = $derived({ width: containerWidth, height: containerHeight });
+  const onLoadCallback = () => {
+    imageLoaded = true;
+    assetFileUrl = imageLoaderUrl;
+    onImageLoad();
+  };
+
+  onMount(() => {
+    if (loader?.complete) {
+      onLoadCallback();
+    }
+    loader?.addEventListener('load', onLoadCallback);
+    return () => {
+      loader?.removeEventListener('load', onLoadCallback);
+    };
+  });
+
+  const imageLoaderUrl = $derived(getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Preview }));
 </script>
 
-<div
+{#if !imageLoaded}
-  class="relative h-full w-full overflow-hidden"
+  <!-- svelte-ignore a11y_missing_attribute -->
-  bind:clientWidth={containerWidth}
+  <img bind:this={loader} style="display:none" src={imageLoaderUrl} aria-hidden="true" />
-  bind:clientHeight={containerHeight}
+{/if}
->
+
-  {#if containerWidth > 0 && containerHeight > 0}
+{#if !imageLoaded}
-    <AdaptiveImage {asset} {container} {transitionName} showLetterboxes={false} onImageReady={onImageLoad} {onError} />
+  <DelayedLoadingSpinner />
-  {:else}
+{:else if imageLoaded}
-    <DelayedLoadingSpinner />
+  <div transition:fade={{ duration: assetViewerFadeDuration }} class="h-full w-full">
-  {/if}
+    <img
-</div>
+      class="h-full w-full rounded-2xl object-contain transition-all"
+      src={assetFileUrl}
+      alt={$getAltText(asset)}
+      draggable="false"
+    />
+  </div>
+{/if}

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

@@ -20,14 +20,11 @@
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { QueryParameter } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
-  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
   import { memoryStore, type MemoryAsset } from '$lib/stores/memory.store.svelte';
   import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
@@ -55,7 +52,6 @@
   } from '@mdi/js';
   import type { NavigationTarget, Page } from '@sveltejs/kit';
   import { DateTime } from 'luxon';
-  import { tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Attachment } from 'svelte/attachments';
   import { Tween } from 'svelte/motion';
@@ -68,7 +64,6 @@
   let paused = $state(false);
   let current = $state<MemoryAsset | undefined>(undefined);
   const currentAssetId = $derived(current?.asset.id);
-  const currentAssetDto = $derived(current ? current.memory.assets[current.assetIndex] : undefined);
   const currentMemoryAssetFull = $derived.by(async () =>
     currentAssetId ? await getAssetInfo({ ...authManager.params, id: currentAssetId }) : undefined,
   );
@@ -81,14 +76,6 @@
 
   let isSaved = $derived(current?.memory.isSaved);
   let viewerHeight = $state(0);
-  let transition = $state({
-    name: undefined as string | undefined,
-    previousPanel: undefined as string | undefined,
-    nextPanel: undefined as string | undefined,
-    active: false,
-  });
-  const showTransitionOverlays = $derived(transition.active || transition.name === 'hero');
-  const showNavButtonOverlay = $derived(transition.name === 'hero');
 
   const { isViewing } = assetViewingStore;
   const viewport: Viewport = $state({ width: 0, height: 0 });
@@ -99,6 +86,18 @@
   let videoPlayer: HTMLVideoElement | undefined = $state();
   const asHref = (asset: { id: string }) => `?${QueryParameter.ID}=${asset.id}`;
 
+  const handleNavigate = async (asset?: { id: string }) => {
+    if ($isViewing) {
+      return asset;
+    }
+
+    if (!asset) {
+      return;
+    }
+
+    await goto(asHref(asset));
+  };
+
   const setProgressDuration = (asset: TimelineAsset) => {
     if (asset.isVideo) {
       const timeParts = asset.duration!.split(':').map(Number);
@@ -113,177 +112,11 @@
     }
   };
 
-  const scrollToTop = () => {
+  const handleNextAsset = () => handleNavigate(current?.next?.asset);
-    if (window.scrollY === 0) {
+  const handlePreviousAsset = () => handleNavigate(current?.previous?.asset);
-      return Promise.resolve();
+  const handleNextMemory = () => handleNavigate(current?.nextMemory?.assets[0]);
-    }
+  const handlePreviousMemory = () => handleNavigate(current?.previousMemory?.assets[0]);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+  const handleEscape = async () => goto(Route.photos());
-    return new Promise<void>((resolve) => {
-      const timeout = setTimeout(resolve, 500);
-      window.addEventListener(
-        'scrollend',
-        () => {
-          clearTimeout(timeout);
-          resolve();
-        },
-        { once: true },
-      );
-    });
-  };
-
-  const withMemoryTransition = async (
-    asset: { id: string } | undefined,
-    config: Omit<Parameters<typeof viewTransitionManager.startTransition>[0], 'onFinished'> & {
-      onFinished?: () => void;
-    },
-  ) => {
-    if ($isViewing || !asset) {
-      return;
-    }
-
-    await scrollToTop();
-
-    transition.active = true;
-    viewTransitionManager
-      .startTransition({
-        ...config,
-        onFinished: () => {
-          transition.previousPanel = undefined;
-          transition.nextPanel = undefined;
-          transition.name = undefined;
-          transition.active = false;
-          config.onFinished?.();
-        },
-      })
-      .catch((error: unknown) => console.error('[Memory] transition failed:', error));
-  };
-
-  const navigateWithTransition = (asset?: { id: string }) =>
-    withMemoryTransition(asset, {
-      types: ['memory-nav'],
-      prepareOldSnapshot: () => {
-        transition.name = 'memory-fade-out';
-      },
-      performUpdate: async () => {
-        await goto(asHref(asset!));
-        await eventManager.untilNext('ViewerOpenTransitionReady');
-      },
-      prepareNewSnapshot: () => {
-        transition.name = 'memory-fade-in';
-      },
-    });
-
-  const handleNextAsset = () => {
-    const next = current?.next;
-    if (next && next.memory.id !== current?.memory.id) {
-      void navigateToMemory('next', next.asset);
-    } else {
-      void navigateWithTransition(next?.asset);
-    }
-  };
-  const handlePreviousAsset = () => {
-    const previous = current?.previous;
-    if (previous && previous.memory.id !== current?.memory.id) {
-      void navigateToMemory('previous', previous.asset);
-    } else {
-      void navigateWithTransition(previous?.asset);
-    }
-  };
-  const navigateToMemory = (direction: 'next' | 'previous', asset?: { id: string }) => {
-    const isNext = direction === 'next';
-    const useHeroMorph = !mediaQueryManager.reducedMotion;
-
-    return withMemoryTransition(asset, {
-      types: ['memory'],
-      prepareOldSnapshot: () => {
-        if (useHeroMorph) {
-          if (isNext) {
-            transition.nextPanel = 'hero';
-            transition.previousPanel = 'memory-departing';
-          } else {
-            transition.previousPanel = 'hero';
-            transition.nextPanel = 'memory-departing';
-          }
-          transition.name = 'hero-out';
-        } else {
-          transition.name = 'memory-fade-out';
-        }
-      },
-      performUpdate: async () => {
-        transition.nextPanel = undefined;
-        transition.previousPanel = undefined;
-        if (useHeroMorph) {
-          if (isNext) {
-            transition.previousPanel = 'hero-out';
-          } else {
-            transition.nextPanel = 'hero-out';
-          }
-        }
-        transition.name = useHeroMorph ? 'hero' : 'memory-fade-in';
-        await goto(asHref(asset!));
-        await eventManager.untilNext('ViewerOpenTransitionReady');
-      },
-    });
-  };
-
-  const handleNextMemory = () => void navigateToMemory('next', current?.nextMemory?.assets[0]);
-  const handlePreviousMemory = () => void navigateToMemory('previous', current?.previousMemory?.assets[0]);
-  const closeMemoryViewer = () => {
-    if (current && current.assetIndex > 0 && !mediaQueryManager.reducedMotion) {
-      const firstAsset = current.memory.assets[0];
-      void withMemoryTransition(firstAsset, {
-        types: ['memory-nav', 'memory-nav-fast'],
-        prepareOldSnapshot: () => {
-          transition.name = 'memory-fade-out';
-        },
-        performUpdate: async () => {
-          await goto(asHref(firstAsset));
-          await eventManager.untilNext('ViewerOpenTransitionReady');
-        },
-        prepareNewSnapshot: () => {
-          transition.name = 'memory-fade-in';
-        },
-        onFinished: () => closeToTimeline(),
-      });
-    } else {
-      closeToTimeline();
-    }
-  };
-
-  const closeToTimeline = () => {
-    const memoryId = current?.memory.id;
-    let cardImage: HTMLElement | null | undefined;
-
-    void viewTransitionManager.startTransition({
-      types: ['memory-enter'],
-      prepareOldSnapshot: () => {
-        transition.name = 'hero';
-      },
-      performUpdate: async () => {
-        transition.name = undefined;
-        await goto(Route.photos());
-        await tick();
-
-        const memoryCard = memoryId
-          ? document.querySelector<HTMLElement>(`[data-memory-id="${CSS.escape(memoryId)}"]`)
-          : null;
-        memoryCard?.scrollIntoView({ behavior: 'instant', inline: 'nearest', block: 'nearest' });
-        cardImage = memoryCard?.querySelector<HTMLElement>('img');
-        if (cardImage) {
-          cardImage.style.viewTransitionName = 'hero';
-          await tick();
-        }
-      },
-      onFinished: () => {
-        if (cardImage) {
-          cardImage.style.viewTransitionName = '';
-          cardImage = null;
-        }
-      },
-    });
-  };
-
-  const handleEscape = closeMemoryViewer;
   const handleSelectAll = () =>
     assetInteraction.selectAssets(current?.memory.assets.map((a) => toTimelineAsset(a)) || []);
 
@@ -327,17 +160,13 @@
     }
   };
 
-  const handleProgress = (progress: number) => {
+  const handleProgress = async (progress: number) => {
     if (!progressBarController) {
       return;
     }
 
-    if (progress === 1 && !paused && !transition.active) {
+    if (progress === 1 && !paused) {
-      if (current?.next) {
+      await (current?.next ? handleNextAsset() : handlePromiseError(handleAction('handleProgressLast', 'pause')));
-        handleNextAsset();
-      } else {
-        handlePromiseError(handleAction('handleProgressLast', 'pause'));
-      }
     }
   };
 
@@ -441,18 +270,7 @@
     playerInitialized = false;
   };
 
-  const resolveTransitionIfPending = () => {
+  const resetAndPlay = () => {
-    if (viewTransitionManager.activeViewTransition) {
-      transition.name = 'hero';
-      eventManager.emit('ViewerOpenTransitionReady');
-      requestAnimationFrame(() => {
-        transition.name = undefined;
-      });
-    }
-  };
-
-  const handleMemoryImageReady = () => {
-    resolveTransitionIfPending();
     handlePromiseError(handleAction('resetAndPlay', 'reset'));
     handlePromiseError(handleAction('resetAndPlay', 'play'));
   };
@@ -467,7 +285,7 @@
       handlePromiseError(handleAction('initPlayer[AssetViewOpen]', 'pause'));
     } else if (isVideo) {
       // Image assets will start playing when the image is loaded. Only autostart video assets.
-      handleMemoryImageReady();
+      resetAndPlay();
     }
     playerInitialized = true;
   };
@@ -495,7 +313,7 @@
 
   $effect(() => {
     if (progressBarController) {
-      handleProgress(progressBarController.current);
+      handlePromiseError(handleProgress(progressBarController.current));
     }
   });
 
@@ -564,7 +382,7 @@
   bind:clientWidth={viewport.width}
 >
   {#if current}
-    <ControlAppBar onClose={closeMemoryViewer} forceDark multiRow>
+    <ControlAppBar onClose={() => goto(Route.photos())} forceDark multiRow>
       {#snippet leading()}
         {#if current}
           <p class="text-lg">
@@ -640,11 +458,7 @@
         class="ms-[-100%] box-border flex h-[calc(100vh-224px)] md:h-[calc(100vh-180px)] w-[300%] items-center justify-center gap-10 overflow-hidden"
       >
         <!-- PREVIOUS MEMORY -->
-        <div
+        <div class="h-1/2 w-[20vw] rounded-2xl {current.previousMemory ? 'opacity-25 hover:opacity-70' : 'opacity-0'}">
-          class="h-1/2 w-[20vw] rounded-2xl opacity-25 transition-opacity duration-150 hover:opacity-70 {current.previousMemory
-            ? ''
-            : 'opacity-0!'}"
-        >
           <button
             type="button"
             class="relative h-full w-full rounded-2xl"
@@ -657,7 +471,6 @@
                 src={getAssetMediaUrl({ id: current.previousMemory.assets[0].id, size: AssetMediaSize.Preview })}
                 alt={$t('previous_memory')}
                 draggable="false"
-                style:view-transition-name={transition.previousPanel}
               />
             {:else}
               <enhanced:img
@@ -670,10 +483,7 @@
             {/if}
 
             {#if current.previousMemory}
-              <div
+              <div class="absolute bottom-4 end-4 text-start text-white">
-                class="absolute bottom-4 end-4 text-start text-white"
-                style:view-transition-name={transition.active ? 'memory-overlay-prev' : undefined}
-              >
                 <p class="uppercase text-xs font-semibold text-gray-200">{$t('previous')}</p>
                 <p class="text-xl">{$memoryLaneTitle(current.previousMemory)}</p>
               </div>
@@ -682,42 +492,39 @@
         </div>
 
         <!-- CURRENT MEMORY -->
-        <div class="main-view relative isolate h-full w-[70vw] rounded-2xl bg-black">
+        <div
-          {#key current.asset.id}
+          class="main-view relative flex h-full w-[70vw] place-content-center place-items-center rounded-2xl bg-black"
-            {#if current.asset.isVideo}
+        >
-              <MemoryVideoViewer
+          <div class="relative h-full w-full rounded-2xl bg-black">
-                asset={current.asset}
+            {#key current.asset.id}
-                bind:videoPlayer
+              {#if current.asset.isVideo}
-                videoViewerMuted={$videoViewerMuted}
+                <MemoryVideoViewer
-                videoViewerVolume={$videoViewerVolume}
+                  asset={current.asset}
-              />
+                  bind:videoPlayer
-            {:else if currentAssetDto}
+                  videoViewerMuted={$videoViewerMuted}
-              <MemoryPhotoViewer
+                  videoViewerVolume={$videoViewerVolume}
-                asset={currentAssetDto}
+                />
-                transitionName={transition.name}
+              {:else}
-                onImageLoad={handleMemoryImageReady}
+                <MemoryPhotoViewer asset={current.asset} onImageLoad={resetAndPlay} />
-                onError={resolveTransitionIfPending}
+              {/if}
-              />
+            {/key}
-            {/if}
-          {/key}
 
-          <div
+            <div
-            class="absolute bottom-0 end-0 p-2 transition-all flex h-full justify-between flex-col items-end gap-2 dark"
+              class="absolute bottom-0 end-0 p-2 transition-all flex h-full justify-between flex-col items-end gap-2 dark"
-            class:opacity-0={galleryInView}
+              class:opacity-0={galleryInView}
-            class:opacity-100={!galleryInView}
+              class:opacity-100={!galleryInView}
-            style:view-transition-name={showTransitionOverlays ? 'memory-controls' : undefined}
+            >
-          >
+              <div class="flex items-center">
-            <div class="flex items-center">
+                <IconButton
-              <IconButton
+                  icon={isSaved ? mdiHeart : mdiHeartOutline}
-                icon={isSaved ? mdiHeart : mdiHeartOutline}
+                  shape="round"
-                shape="round"
+                  variant="ghost"
-                variant="ghost"
+                  color="secondary"
-                color="secondary"
+                  aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
-                aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
+                  onclick={() => handleSaveMemory()}
-                onclick={() => handleSaveMemory()}
+                  class="w-12 h-12"
-                class="w-12 h-12"
+                />
-              />
+                <!-- <IconButton
-              <!-- <IconButton
                   icon={mdiShareVariantOutline}
                   shape="round"
                   variant="ghost"
@@ -725,46 +532,42 @@
                   color="secondary"
                   aria-label={$t('share')}
                 /> -->
-              <ButtonContextMenu
+                <ButtonContextMenu
-                icon={mdiDotsVertical}
+                  icon={mdiDotsVertical}
-                title={$t('menu')}
+                  title={$t('menu')}
-                onclick={() => handlePromiseError(handleAction('ContextMenuClick', 'pause'))}
+                  onclick={() => handlePromiseError(handleAction('ContextMenuClick', 'pause'))}
-                direction="left"
+                  direction="left"
-                size="medium"
+                  size="medium"
-                align="bottom-right"
+                  align="bottom-right"
-              >
+                >
-                <MenuOption onClick={() => handleDeleteMemory()} text={$t('remove_memory')} icon={mdiCardsOutline} />
+                  <MenuOption onClick={() => handleDeleteMemory()} text={$t('remove_memory')} icon={mdiCardsOutline} />
-                <MenuOption
+                  <MenuOption
-                  onClick={() => handleDeleteMemoryAsset()}
+                    onClick={() => handleDeleteMemoryAsset()}
-                  text={$t('remove_photo_from_memory')}
+                    text={$t('remove_photo_from_memory')}
-                  icon={mdiImageMinusOutline}
+                    icon={mdiImageMinusOutline}
-                />
-                <!-- shortcut={{ key: 'l', shift: shared }} -->
-              </ButtonContextMenu>
-            </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}
+                  <!-- shortcut={{ key: 'l', shift: shared }} -->
-              {/await}
+                </ButtonContextMenu>
+              </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}
+              </div>
             </div>
-          </div>
+            <!-- CONTROL BUTTONS -->
-          <!-- CONTROL BUTTONS -->
-          <div
-            class="absolute inset-0 pointer-events-none"
-            style:view-transition-name={showNavButtonOverlay ? 'memory-nav-buttons' : undefined}
-          >
             {#if current.previous}
-              <div class="absolute top-1/2 inset-s-0 ms-4 dark pointer-events-auto">
+              <div class="absolute top-1/2 start-0 ms-4 dark">
                 <IconButton
                   shape="round"
                   aria-label={$t('previous_memory')}
@@ -778,7 +581,7 @@
             {/if}
 
             {#if current.next}
-              <div class="absolute top-1/2 inset-e-0 me-4 dark pointer-events-auto">
+              <div class="absolute top-1/2 end-0 me-4 dark">
                 <IconButton
                   shape="round"
                   aria-label={$t('next_memory')}
@@ -790,32 +593,25 @@
                 />
               </div>
             {/if}
-          </div>
 
-          <div
+            <div class="absolute start-8 top-4 text-sm font-medium text-white">
-            class="absolute start-8 top-4 text-sm font-medium text-white"
+              <p>
-            style:view-transition-name={showTransitionOverlays ? 'memory-overlay' : undefined}
+                {fromISODateTimeUTC(current.memory.assets[0].localDateTime).toLocaleString(DateTime.DATE_FULL, {
-          >
+                  locale: $locale,
-            <p>
+                })}
-              {fromISODateTimeUTC(current.memory.assets[0].localDateTime).toLocaleString(DateTime.DATE_FULL, {
+              </p>
-                locale: $locale,
+              <p>
-              })}
+                {#await currentMemoryAssetFull then asset}
-            </p>
+                  {asset?.exifInfo?.city || ''}
-            <p>
+                  {asset?.exifInfo?.country || ''}
-              {#await currentMemoryAssetFull then asset}
+                {/await}
-                {asset?.exifInfo?.city || ''}
+              </p>
-                {asset?.exifInfo?.country || ''}
+            </div>
-              {/await}
-            </p>
           </div>
         </div>
 
         <!-- NEXT MEMORY -->
-        <div
+        <div class="h-1/2 w-[20vw] rounded-2xl {current.nextMemory ? 'opacity-25 hover:opacity-70' : 'opacity-0'}">
-          class="h-1/2 w-[20vw] rounded-2xl opacity-25 transition-opacity duration-150 hover:opacity-70 {current.nextMemory
-            ? ''
-            : 'opacity-0!'}"
-        >
           <button
             type="button"
             class="relative h-full w-full rounded-2xl"
@@ -828,7 +624,6 @@
                 src={getAssetMediaUrl({ id: current.nextMemory.assets[0].id, size: AssetMediaSize.Preview })}
                 alt={$t('next_memory')}
                 draggable="false"
-                style:view-transition-name={transition.nextPanel}
               />
             {:else}
               <enhanced:img
@@ -841,10 +636,7 @@
             {/if}
 
             {#if current.nextMemory}
-              <div
+              <div class="absolute bottom-4 start-4 text-start text-white">
-                class="absolute bottom-4 start-4 text-start text-white"
-                style:view-transition-name={transition.active ? 'memory-overlay-next' : undefined}
-              >
                 <p class="uppercase text-xs font-semibold text-gray-200">{$t('up_next')}</p>
                 <p class="text-xl">{$memoryLaneTitle(current.nextMemory)}</p>
               </div>
@@ -888,6 +680,8 @@
 
 <style>
   .main-view {
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
+    box-shadow:
+      0 4px 4px 0 rgba(0, 0, 0, 0.3),
+      0 8px 12px 6px rgba(0, 0, 0, 0.15);
   }
 </style>

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -3,13 +3,10 @@
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
-  import { focusAsset } from '$lib/components/timeline/actions/focus-actions';
   import { AssetAction } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
-  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import AssetDeleteConfirmModal from '$lib/modals/AssetDeleteConfirmModal.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import { Route } from '$lib/route';
@@ -30,11 +27,9 @@
   import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
   import { navigate } from '$lib/utils/navigation';
   import { isTimelineAsset, toTimelineAsset } from '$lib/utils/timeline-util';
-  import { startViewerTransition } from '$lib/utils/transition-utils';
   import { AssetVisibility, type AssetResponseDto } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
   import { debounce } from 'lodash-es';
-  import { onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
 
   type Props = {
@@ -70,16 +65,6 @@
   }: Props = $props();
 
   let { isViewing: isViewerOpen, asset: viewingAsset } = assetViewingStore;
-
-  $effect(() => {
-    if ($isViewerOpen) {
-      document.documentElement.style.overflow = 'hidden';
-    }
-    return () => {
-      document.documentElement.style.overflow = '';
-    };
-  });
-
   const navigationAssets = $derived(viewerAssets ?? assets);
 
   const geometry = $derived(
@@ -122,36 +107,6 @@
 
   const updateSlidingWindow = () => (scrollTop = document.scrollingElement?.scrollTop ?? 0);
 
-  const scrollGalleryToAsset = async (assetId: string) => {
-    const index = assets.findIndex((asset) => asset.id === assetId);
-    if (index === -1) {
-      return;
-    }
-    const assetTopPage = geometry.getTop(index) + slidingWindowOffset;
-    const assetBottomPage = assetTopPage + geometry.getHeight(index);
-    const currentScrollTop = document.scrollingElement?.scrollTop ?? 0;
-    const visibleTop = currentScrollTop + pageHeaderOffset;
-    const visibleBottom = currentScrollTop + viewport.height;
-
-    if (assetTopPage >= visibleTop && assetBottomPage <= visibleBottom) {
-      return;
-    }
-    const distanceToAlignTop = Math.abs(assetTopPage - pageHeaderOffset - currentScrollTop);
-    const distanceToAlignBottom = Math.abs(assetBottomPage - viewport.height - currentScrollTop);
-    const newScrollTop =
-      distanceToAlignTop < distanceToAlignBottom ? assetTopPage - pageHeaderOffset : assetBottomPage - viewport.height;
-    if (document.scrollingElement) {
-      document.scrollingElement.scrollTop = newScrollTop;
-    }
-    updateSlidingWindow();
-    await tick();
-  };
-
-  const scrollToAndFocusAsset = async (assetId: string) => {
-    await scrollGalleryToAsset(assetId);
-    focusAsset(assetId);
-  };
-
   const debouncedOnIntersected = debounce(() => onIntersected?.(), 750, { maxWait: 100, leading: true });
 
   let lastIntersectedHeight = 0;
@@ -401,63 +356,6 @@
     nextAsset: getNextAsset(navigationAssets, $viewingAsset),
     previousAsset: getPreviousAsset(navigationAssets, $viewingAsset),
   });
-
-  let toViewerTransitionId = $state<string | null>(null);
-  let toGalleryTransitionId = $state<string | null>(null);
-  const transitionTargetId = $derived(toViewerTransitionId ?? toGalleryTransitionId);
-
-  const handleThumbnailClick = (asset: AssetResponseDto, currentAsset: TimelineAsset) => {
-    if (assetInteraction.selectionActive) {
-      handleSelectAssets(currentAsset);
-      return;
-    }
-
-    const doNavigate = () => void navigateToAsset(asset);
-
-    if (!viewTransitionManager.isSupported()) {
-      doNavigate();
-      return;
-    }
-
-    startViewerTransition(asset.id, doNavigate, (id) => (toViewerTransitionId = id));
-  };
-
-  const transitionToGalleryCallback = ({ id }: { id: string }) => {
-    void viewTransitionManager.startTransition({
-      types: ['timeline'],
-      prepareOldSnapshot: () => {
-        void scrollGalleryToAsset(id);
-      },
-      performUpdate: async () => {
-        eventManager.emit('ViewerCloseTransitionReady');
-        toGalleryTransitionId = id;
-        await tick();
-      },
-      onFinished: () => {
-        toGalleryTransitionId = null;
-        focusAsset(id);
-      },
-    });
-  };
-
-  if (viewTransitionManager.isSupported()) {
-    onMount(() => eventManager.on({ ViewerCloseTransition: transitionToGalleryCallback }));
-  }
-
-  const handleClose = async (asset: { id: string }) => {
-    const useTransition = viewTransitionManager.isSupported();
-    if (useTransition) {
-      const transitionReady = eventManager.untilNext('ViewerCloseTransitionReady');
-      eventManager.emit('ViewerCloseTransition', { id: asset.id });
-      await transitionReady;
-    }
-    assetViewingStore.showAssetViewer(false);
-    if (!useTransition) {
-      await tick();
-      await scrollToAndFocusAsset(asset.id);
-    }
-    handlePromiseError(navigate({ targetRoute: 'current', assetId: null }, { noScroll: true }));
-  };
 </script>
 
 <svelte:document
@@ -477,17 +375,16 @@
     {#each assets as asset, i (asset.id + '-' + i)}
       {#if isIntersecting(i)}
         {@const currentAsset = toTimelineAsset(asset)}
-        {@const transitionName = transitionTargetId === asset.id ? 'hero' : undefined}
+        <div class="absolute" style:overflow="clip" style={getStyle(i)}>
-        <div
-          class="absolute"
-          style:overflow="clip"
-          style={getStyle(i)}
-          style:view-transition-name={transitionName}
-          data-transition-name={transitionName}
-        >
           <Thumbnail
             readonly={disableAssetSelect}
-            onClick={() => handleThumbnailClick(asset, currentAsset)}
+            onClick={() => {
+              if (assetInteraction.selectionActive) {
+                handleSelectAssets(currentAsset);
+                return;
+              }
+              void navigateToAsset(asset);
+            }}
             onSelect={() => handleSelectAssets(currentAsset)}
             onMouseEvent={() => assetMouseEventHandler(currentAsset)}
             {showArchiveIcon}
@@ -519,7 +416,10 @@
         onAction={handleAction}
         onRandom={handleRandom}
         onAssetChange={updateCurrentAsset}
-        onClose={(asset) => handleClose(asset)}
+        onClose={() => {
+          assetViewingStore.showAssetViewer(false);
+          handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
+        }}
       />
     {/await}
   </Portal>

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

@@ -50,11 +50,7 @@
 
 <svelte:window bind:innerWidth />
 
-<nav
+<nav id="dashboard-navbar" class="max-md:h-(--navbar-height-md) h-(--navbar-height) w-dvw text-sm">
-  id="dashboard-navbar"
-  class="max-md:h-(--navbar-height-md) h-(--navbar-height) w-dvw text-sm relative z-10"
-  style:view-transition-name="exclude"
->
   <SkipLink text={$t('skip_to_content')} />
   <div
     class="grid h-full grid-cols-[--spacing(32)_auto] items-center py-2 sidebar:grid-cols-[--spacing(64)_auto] {noBorder

web/src/lib/components/timeline/AssetLayout.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { filterIntersecting } from '$lib/managers/timeline-manager/utils.svelte';
   import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
+  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
   import type { CommonPosition } from '$lib/utils/layout-utils';
   import type { Snippet } from 'svelte';
   import { flip } from 'svelte/animate';
   import { scale } from 'svelte/transition';
 
+  let { isUploading } = uploadAssetsStore;
+
   type Props = {
-    animationTargetAssetId?: string | null;
-    suspendTransitions?: boolean;
     viewerAssets: ViewerAsset[];
     width: number;
     height: number;
+    manager: VirtualScrollManager;
     thumbnail: Snippet<
       [
         {
@@ -25,20 +26,14 @@
     customThumbnailLayout?: Snippet<[asset: TimelineAsset]>;
   };
 
-  let { isUploading } = uploadAssetsStore;
+  const { viewerAssets, width, height, manager, thumbnail, customThumbnailLayout }: Props = $props();
 
-  const {
+  const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
-    animationTargetAssetId,
-    suspendTransitions = false,
-    viewerAssets,
-    width,
-    height,
-    thumbnail,
-    customThumbnailLayout,
-  }: Props = $props();
-
-  const transitionDuration = $derived(suspendTransitions && !$isUploading ? 0 : 150);
   const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
+
+  const filterIntersecting = <T extends { intersecting: boolean }>(intersectables: T[]) => {
+    return intersectables.filter(({ intersecting }) => intersecting);
+  };
 </script>
 
 <!-- Image grid -->
@@ -46,14 +41,11 @@
   {#each filterIntersecting(viewerAssets) as viewerAsset (viewerAsset.id)}
     {@const position = viewerAsset.position!}
     {@const asset = viewerAsset.asset!}
-    {@const transitionName = animationTargetAssetId === asset.id ? 'hero' : undefined}
 
     <!-- note: don't remove data-asset-id - its used by web e2e tests -->
     <div
       data-asset-id={asset.id}
       class="absolute"
-      data-transition-name={transitionName}
-      style:view-transition-name={transitionName}
       style:top={position.top + 'px'}
       style:inset-inline-start={position.left + 'px'}
       style:width={position.width + 'px'}

web/src/lib/components/timeline/Month.svelte

@@ -1,37 +1,34 @@
 <script lang="ts">
-  import { focusAsset } from '$lib/components/timeline/actions/focus-actions';
   import AssetLayout from '$lib/components/timeline/AssetLayout.svelte';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { assetsSnapshot, filterIntersecting } from '$lib/managers/timeline-manager/utils.svelte';
+  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
+  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
   import type { CommonPosition } from '$lib/utils/layout-utils';
   import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
   import { Icon } from '@immich/ui';
   import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-  import { onMount, tick, type Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
   type Props = {
-    toAssetViewerTransitionId?: string | null;
     thumbnail: Snippet<[{ asset: TimelineAsset; position: CommonPosition; dayGroup: DayGroup; groupIndex: number }]>;
     customThumbnailLayout?: Snippet<[TimelineAsset]>;
     singleSelect: boolean;
     assetInteraction: AssetInteraction;
     monthGroup: MonthGroup;
+    manager: VirtualScrollManager;
     onDayGroupSelect: (dayGroup: DayGroup, assets: TimelineAsset[]) => void;
   };
-
   let {
-    toAssetViewerTransitionId,
     thumbnail: thumbnailWithGroup,
     customThumbnailLayout,
     singleSelect,
     assetInteraction,
     monthGroup,
+    manager,
     onDayGroupSelect,
   }: Props = $props();
 
@@ -40,6 +37,10 @@
 
   const transitionDuration = $derived(monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150);
 
+  const filterIntersecting = <T extends { intersecting: boolean }>(intersectables: T[]) => {
+    return intersectables.filter(({ intersecting }) => intersecting);
+  };
+
   const getDayGroupFullDate = (dayGroup: DayGroup): string => {
     const { month, year } = dayGroup.monthGroup.yearMonth;
     const date = fromTimelinePlainDate({
@@ -49,32 +50,6 @@
     });
     return getDateLocaleString(date);
   };
-
-  let toTimelineTransitionAssetId = $state<string | null>(null);
-  let animationTargetAssetId = $derived(toTimelineTransitionAssetId ?? toAssetViewerTransitionId ?? null);
-
-  const transitionToTimelineCallback = ({ id }: { id: string }) => {
-    const asset = monthGroup.findAssetById({ id });
-    if (!asset) {
-      return;
-    }
-    void viewTransitionManager.startTransition({
-      types: ['timeline'],
-      performUpdate: async () => {
-        eventManager.emit('ViewerCloseTransitionReady');
-        const event = await eventManager.untilNext('TimelineLoaded');
-        toTimelineTransitionAssetId = event.id;
-        await tick();
-      },
-      onFinished: () => {
-        toTimelineTransitionAssetId = null;
-        focusAsset(asset.id);
-      },
-    });
-  };
-  if (viewTransitionManager.isSupported()) {
-    onMount(() => eventManager.on({ ViewerCloseTransition: transitionToTimelineCallback }));
-  }
 </script>
 
 {#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
@@ -118,8 +93,7 @@
     </div>
 
     <AssetLayout
-      {animationTargetAssetId}
+      {manager}
-      suspendTransitions={monthGroup.timelineManager.suspendTransitions}
       viewerAssets={dayGroup.viewerAssets}
       height={dayGroup.height}
       width={dayGroup.width}

web/src/lib/components/timeline/Scrubber.svelte

@@ -11,7 +11,6 @@
   import { fade, fly } from 'svelte/transition';
 
   interface Props {
-    invisible: boolean;
     /** Offset from the top of the timeline (e.g., for headers) */
     timelineTopOffset?: number;
     /** Offset from the bottom of the timeline (e.g., for footers) */
@@ -40,7 +39,6 @@
   }
 
   let {
-    invisible = false,
     timelineTopOffset = 0,
     timelineBottomOffset = 0,
     height = 0,
@@ -440,7 +438,7 @@
           next = forward
             ? (focusable[(index + 1) % focusable.length] as HTMLElement)
             : (focusable[(index - 1) % focusable.length] as HTMLElement);
-          next?.focus();
+          next.focus();
         }
       }
     }
@@ -511,7 +509,6 @@
   aria-valuemin={toScrollY(0)}
   data-id="scrubber"
   class="absolute end-0 z-1 select-none hover:cursor-row-resize"
-  class:invisible
   style:padding-top={PADDING_TOP + 'px'}
   style:padding-bottom={PADDING_BOTTOM + 'px'}
   style:width

web/src/lib/components/timeline/Timeline.svelte

@@ -11,8 +11,6 @@
   import HotModuleReload from '$lib/elements/HotModuleReload.svelte';
   import Portal from '$lib/elements/Portal.svelte';
   import Skeleton from '$lib/elements/Skeleton.svelte';
-  import { startViewerTransition } from '$lib/utils/transition-utils';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
   import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
   import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
@@ -104,7 +102,6 @@
   // Overall scroll percentage through the entire timeline (0-1)
   let timelineScrollPercent: number = $state(0);
   let scrubberWidth = $state(0);
-  let toAssetViewerTransitionId = $state<string | null>(null);
 
   const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
   const maxMd = $derived(mediaQueryManager.maxMd);
@@ -212,7 +209,7 @@
         timelineManager.viewportWidth = rect.width;
       }
     }
-    const scrollTarget = getScrollTarget();
+    const scrollTarget = $gridScrollTarget?.at;
     let scrolled = false;
     if (scrollTarget) {
       scrolled = await scrollAndLoadAsset(scrollTarget);
@@ -224,7 +221,7 @@
       await tick();
       focusAsset(scrollTarget);
     }
-    invisible = isAssetViewerRoute(page) ? true : false;
+    invisible = false;
   };
 
   // note: only modified once in afterNavigate()
@@ -242,13 +239,10 @@
     hasNavigatedToOrFromAssetViewer = isNavigatingToAssetViewer !== isNavigatingFromAssetViewer;
   });
 
-  const getScrollTarget = () => {
-    return $gridScrollTarget?.at ?? page.params.assetId ?? null;
-  };
   // afterNavigate is only called after navigation to a new URL, {complete} will resolve
   // after successful navigation.
   afterNavigate(({ complete }) => {
-    void complete.finally(async () => {
+    void complete.finally(() => {
       const isAssetViewerPage = isAssetViewerRoute(page);
 
       // Set initial load state only once - if initialLoadWasAssetViewer is null, then
@@ -257,13 +251,8 @@
       if (isDirectNavigation) {
         initialLoadWasAssetViewer = isAssetViewerPage && !hasNavigatedToOrFromAssetViewer;
       }
-      void scrollAfterNavigate();
-      if (!isAssetViewerPage) {
-        const scrollTarget = getScrollTarget();
-        await tick();
 
-        eventManager.emit('TimelineLoaded', { id: scrollTarget });
+      void scrollAfterNavigate();
-      }
     });
   });
 
@@ -271,7 +260,7 @@
   // note: don't throttle, debounch, or otherwise do this function async - it causes flicker
 
   onMount(() => {
-    if (!enableRouting && !isAssetViewerRoute(page)) {
+    if (!enableRouting) {
       invisible = false;
     }
   });
@@ -535,33 +524,6 @@
     }
   });
 
-  const defaultThumbnailClick = (
-    timelineManager: TimelineManager,
-    assets: TimelineAsset[],
-    groupTitle: string,
-    asset: TimelineAsset,
-  ) => {
-    if (isSelectionMode || assetInteraction.selectionActive) {
-      assetSelectHandler(timelineManager, asset, assets, groupTitle);
-      return;
-    }
-    void navigate({ targetRoute: 'current', assetId: asset.id });
-  };
-
-  const handleThumbnailClick = (asset: TimelineAsset, dayGroup: DayGroup) => {
-    if (typeof onThumbnailClick === 'function' || isSelectionMode || assetInteraction.selectionActive) {
-      if (typeof onThumbnailClick === 'function') {
-        onThumbnailClick(asset, timelineManager, dayGroup, defaultThumbnailClick);
-      } else {
-        defaultThumbnailClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
-      }
-      return;
-    }
-
-    const openViewer = () => void navigate({ targetRoute: 'current', assetId: asset.id });
-    startViewerTransition(asset.id, openViewer, (id) => (toAssetViewerTransitionId = id));
-  };
-
   const assetSelectHandler = (
     timelineManager: TimelineManager,
     asset: TimelineAsset,
@@ -582,6 +544,19 @@
 
     assetInteraction.selectAll = timelineManager.assetCount === assetInteraction.selectedAssets.length;
   };
+
+  const _onClick = (
+    timelineManager: TimelineManager,
+    assets: TimelineAsset[],
+    groupTitle: string,
+    asset: TimelineAsset,
+  ) => {
+    if (isSelectionMode || assetInteraction.selectionActive) {
+      assetSelectHandler(timelineManager, asset, assets, groupTitle);
+      return;
+    }
+    void navigate({ targetRoute: 'current', assetId: asset.id });
+  };
 </script>
 
 <svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
@@ -612,7 +587,6 @@
 {#if timelineManager.months.length > 0}
   <Scrubber
     {timelineManager}
-    {invisible}
     height={timelineManager.viewportHeight}
     timelineTopOffset={timelineManager.topSectionHeight}
     timelineBottomOffset={timelineManager.bottomSectionHeight}
@@ -644,7 +618,6 @@
   id="asset-grid"
   class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
   style:margin-inline-end={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
-  data-initialized={timelineManager.isInitialized || undefined}
   tabindex="-1"
   bind:clientHeight={timelineManager.viewportHeight}
   bind:clientWidth={timelineManager.viewportWidth}
@@ -693,11 +666,11 @@
           style:width="100%"
         >
           <Month
-            {toAssetViewerTransitionId}
             {assetInteraction}
             {customThumbnailLayout}
             {singleSelect}
             {monthGroup}
+            manager={timelineManager}
             onDayGroupSelect={handleGroupSelect}
           >
             {#snippet thumbnail({ asset, position, dayGroup, groupIndex })}
@@ -711,7 +684,13 @@
                 {asset}
                 {albumUsers}
                 {groupIndex}
-                onClick={(asset) => handleThumbnailClick(asset, dayGroup)}
+                onClick={(asset) => {
+                  if (typeof onThumbnailClick === 'function') {
+                    onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
+                  } else {
+                    _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+                  }
+                }}
                 onSelect={() => {
                   if (isSelectionMode || assetInteraction.selectionActive) {
                     assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle);

web/src/lib/components/timeline/TimelineAssetViewer.svelte

@@ -4,8 +4,6 @@
   import { AssetAction } from '$lib/constants';
   import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
-  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -100,12 +98,6 @@
   };
 
   const handleClose = async (asset: { id: string }) => {
-    if (viewTransitionManager.isSupported()) {
-      const transitionReady = eventManager.untilNext('ViewerCloseTransitionReady');
-      eventManager.emit('ViewerCloseTransition', { id: asset.id });
-      await transitionReady;
-    }
-
     invisible = true;
     $gridScrollTarget = { at: asset.id };
     await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });

web/src/lib/managers/ViewTransitionManager.svelte.spec.ts

@@ -1,376 +0,0 @@
-import { ViewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
-
-describe('ViewTransitionManager', () => {
-  let manager: ViewTransitionManager;
-
-  beforeEach(() => {
-    manager = new ViewTransitionManager();
-  });
-
-  afterEach(() => {
-    delete (document as Partial<typeof document> & { startViewTransition?: unknown }).startViewTransition;
-  });
-
-  describe('when View Transition API is not supported', () => {
-    it('should still call performUpdate', async () => {
-      const performUpdate = vi.fn().mockResolvedValue(undefined);
-
-      await manager.startTransition({ performUpdate });
-
-      expect(performUpdate).toHaveBeenCalledOnce();
-    });
-
-    it('should call onFinished after performUpdate', async () => {
-      const callOrder: string[] = [];
-      const performUpdate = vi.fn().mockImplementation(() => {
-        callOrder.push('performUpdate');
-      });
-      const onFinished = vi.fn().mockImplementation(() => {
-        callOrder.push('onFinished');
-      });
-
-      await manager.startTransition({ performUpdate, onFinished });
-
-      expect(onFinished).toHaveBeenCalledOnce();
-      expect(callOrder).toEqual(['performUpdate', 'onFinished']);
-    });
-
-    it('should not call prepareOldSnapshot or prepareNewSnapshot', async () => {
-      const prepareOldSnapshot = vi.fn();
-      const prepareNewSnapshot = vi.fn();
-      const performUpdate = vi.fn().mockResolvedValue(undefined);
-
-      await manager.startTransition({ performUpdate, prepareOldSnapshot, prepareNewSnapshot });
-
-      expect(prepareOldSnapshot).not.toHaveBeenCalled();
-      expect(prepareNewSnapshot).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('when a transition is already active', () => {
-    it('should skip the first transition and run the second', async () => {
-      let resolveFirstUpdate!: () => void;
-      const firstUpdateCallbackDone = new Promise<void>((resolve) => {
-        resolveFirstUpdate = resolve;
-      });
-      const firstFinished = new Promise<void>(() => {});
-      const firstSkipTransition = vi.fn();
-
-      let callCount = 0;
-      // eslint-disable-next-line tscompat/tscompat
-      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
-        callCount++;
-        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
-        void updateFn();
-        if (callCount === 1) {
-          return {
-            updateCallbackDone: firstUpdateCallbackDone,
-            finished: firstFinished,
-            ready: Promise.resolve(),
-            skipTransition: firstSkipTransition,
-          };
-        }
-        return {
-          updateCallbackDone: Promise.resolve(),
-          finished: Promise.resolve(),
-          ready: Promise.resolve(),
-          skipTransition: vi.fn(),
-        };
-      });
-
-      const secondPerformUpdate = vi.fn().mockResolvedValue(undefined);
-
-      // Start first — it will be blocked on updateCallbackDone
-      const firstPromise = manager.startTransition({
-        performUpdate: async () => {},
-      });
-
-      // Flush microtasks so the first transition reaches the startViewTransition call
-      await new Promise<void>((r) => queueMicrotask(r));
-
-      // While first is active, start a second — should skip the first and proceed
-      await manager.startTransition({ performUpdate: secondPerformUpdate });
-      expect(firstSkipTransition).toHaveBeenCalledOnce();
-      expect(secondPerformUpdate).toHaveBeenCalledOnce();
-
-      // Clean up first promise
-      resolveFirstUpdate();
-      await firstPromise;
-    });
-  });
-
-  describe('skipTransitions', () => {
-    it('should return false when no transition is active', () => {
-      expect(manager.skipTransitions()).toBe(false);
-    });
-
-    it('should call skipTransition on the active transition and return true', async () => {
-      let resolveFinished!: () => void;
-      const finished = new Promise<void>((resolve) => {
-        resolveFinished = resolve;
-      });
-      let resolveUpdate!: () => void;
-      const updateCallbackDone = new Promise<void>((resolve) => {
-        resolveUpdate = resolve;
-      });
-      const skipTransition = vi.fn();
-
-      // eslint-disable-next-line tscompat/tscompat
-      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
-        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
-        void updateFn();
-        return { updateCallbackDone, finished, ready: Promise.resolve(), skipTransition };
-      });
-
-      const promise = manager.startTransition({ performUpdate: async () => {} });
-      await new Promise<void>((r) => queueMicrotask(r));
-
-      const skipped = manager.skipTransitions();
-      expect(skipped).toBe(true);
-      expect(skipTransition).toHaveBeenCalledOnce();
-
-      resolveUpdate();
-      resolveFinished();
-      await promise;
-    });
-
-    it('should allow a new transition after skipping', async () => {
-      let resolveFinished!: () => void;
-      const finished = new Promise<void>((resolve) => {
-        resolveFinished = resolve;
-      });
-      let resolveUpdate!: () => void;
-      const updateCallbackDone = new Promise<void>((resolve) => {
-        resolveUpdate = resolve;
-      });
-
-      // eslint-disable-next-line tscompat/tscompat
-      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
-        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
-        void updateFn();
-        return { updateCallbackDone, finished, ready: Promise.resolve(), skipTransition: vi.fn() };
-      });
-
-      const promise = manager.startTransition({ performUpdate: async () => {} });
-      await new Promise<void>((r) => queueMicrotask(r));
-
-      manager.skipTransitions();
-      resolveUpdate();
-      resolveFinished();
-      await promise;
-
-      // Now start a second transition — it should NOT be skipped
-      const secondUpdate = vi.fn().mockResolvedValue(undefined);
-      const secondFinished = Promise.resolve();
-      const secondUpdateDone = Promise.resolve();
-
-      // eslint-disable-next-line tscompat/tscompat
-      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
-        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
-        void updateFn();
-        return {
-          updateCallbackDone: secondUpdateDone,
-          finished: secondFinished,
-          ready: Promise.resolve(),
-          skipTransition: vi.fn(),
-        };
-      });
-
-      await manager.startTransition({ performUpdate: secondUpdate });
-      expect(secondUpdate).toHaveBeenCalledOnce();
-    });
-  });
-
-  describe('error handling', () => {
-    it('should propagate error from performUpdate when API is not supported', async () => {
-      const error = new Error('update failed');
-      const performUpdate = vi.fn().mockRejectedValue(error);
-
-      await expect(manager.startTransition({ performUpdate })).rejects.toThrow('update failed');
-    });
-
-    it('should clean up activeViewTransition when performUpdate throws (API supported)', async () => {
-      const error = new Error('update failed');
-      let resolveFinished!: () => void;
-      const finished = new Promise<void>((resolve) => {
-        resolveFinished = resolve;
-      });
-
-      // eslint-disable-next-line tscompat/tscompat
-      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
-        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
-        const updateCallbackDone = updateFn();
-        return { updateCallbackDone, finished, ready: Promise.resolve(), skipTransition: vi.fn() };
-      });
-
-      await expect(manager.startTransition({ performUpdate: () => Promise.reject(error) })).rejects.toThrow(
-        'update failed',
-      );
-
-      // Simulate transition finishing after error
-      resolveFinished();
-      await new Promise<void>((r) => queueMicrotask(r));
-
-      // Manager should accept new transitions after cleanup
-      const secondUpdate = vi.fn().mockResolvedValue(undefined);
-      const secondFinished = Promise.resolve();
-      const secondUpdateDone = Promise.resolve();
-      // eslint-disable-next-line tscompat/tscompat
-      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
-        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
-        void updateFn();
-        return {
-          updateCallbackDone: secondUpdateDone,
-          finished: secondFinished,
-          ready: Promise.resolve(),
-          skipTransition: vi.fn(),
-        };
-      });
-
-      await manager.startTransition({ performUpdate: secondUpdate });
-      expect(secondUpdate).toHaveBeenCalledOnce();
-    });
-  });
-
-  describe('fallback path', () => {
-    it('should fall back to function argument when object argument throws', async () => {
-      const performUpdate = vi.fn().mockResolvedValue(undefined);
-      const prepareNewSnapshot = vi.fn();
-      const finished = Promise.resolve();
-      const updateCallbackDone = Promise.resolve();
-
-      let callCount = 0;
-      // eslint-disable-next-line tscompat/tscompat
-      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
-        callCount++;
-        if (callCount === 1 && typeof arg !== 'function') {
-          throw new TypeError('object form not supported');
-        }
-        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
-        void updateFn();
-        return { updateCallbackDone, finished, ready: Promise.resolve(), skipTransition: vi.fn() };
-      });
-
-      await manager.startTransition({ performUpdate, prepareNewSnapshot, types: ['test'] });
-
-      expect(performUpdate).toHaveBeenCalledOnce();
-      expect(prepareNewSnapshot).toHaveBeenCalledOnce();
-      // eslint-disable-next-line tscompat/tscompat
-      expect(document.startViewTransition).toHaveBeenCalledTimes(2);
-    });
-  });
-
-  describe('abort signal', () => {
-    it('should pass an AbortSignal to performUpdate', async () => {
-      const performUpdate = vi.fn().mockResolvedValue(undefined);
-
-      // eslint-disable-next-line tscompat/tscompat
-      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
-        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
-        void updateFn();
-        return {
-          updateCallbackDone: Promise.resolve(),
-          finished: Promise.resolve(),
-          ready: Promise.resolve(),
-          skipTransition: vi.fn(),
-        };
-      });
-
-      await manager.startTransition({ performUpdate });
-
-      expect(performUpdate).toHaveBeenCalledWith(expect.any(AbortSignal));
-    });
-
-    it('should abort the signal when transition.ready rejects', async () => {
-      let capturedSignal: AbortSignal | undefined;
-      let resolveUpdate!: () => void;
-      const updateCallbackDone = new Promise<void>((resolve) => {
-        resolveUpdate = resolve;
-      });
-
-      const readyError = new Error('Transition was aborted because of timeout in DOM update');
-
-      // eslint-disable-next-line tscompat/tscompat
-      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
-        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
-        void updateFn();
-        return {
-          updateCallbackDone,
-          finished: Promise.reject(readyError),
-          ready: Promise.reject(readyError),
-          skipTransition: vi.fn(),
-        };
-      });
-
-      const performUpdate = vi.fn().mockImplementation((signal: AbortSignal) => {
-        capturedSignal = signal;
-        return new Promise<void>((resolve) => {
-          signal.addEventListener('abort', () => resolve(), { once: true });
-        });
-      });
-
-      const promise = manager.startTransition({ performUpdate });
-
-      // Flush microtasks so ready rejection fires and aborts the signal
-      await new Promise<void>((r) => queueMicrotask(r));
-      await new Promise<void>((r) => queueMicrotask(r));
-
-      expect(capturedSignal?.aborted).toBe(true);
-
-      resolveUpdate();
-      await promise;
-    });
-
-    it('should not abort the signal when transition completes normally', async () => {
-      let capturedSignal: AbortSignal | undefined;
-
-      // eslint-disable-next-line tscompat/tscompat
-      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
-        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
-        void updateFn();
-        return {
-          updateCallbackDone: Promise.resolve(),
-          finished: Promise.resolve(),
-          ready: Promise.resolve(),
-          skipTransition: vi.fn(),
-        };
-      });
-
-      await manager.startTransition({
-        performUpdate: (signal) => {
-          capturedSignal = signal;
-          return Promise.resolve();
-        },
-      });
-
-      expect(capturedSignal?.aborted).toBe(false);
-    });
-
-    it('should pass a non-aborted signal in the unsupported fallback path', async () => {
-      let capturedSignal: AbortSignal | undefined;
-
-      await manager.startTransition({
-        performUpdate: (signal) => {
-          capturedSignal = signal;
-          return Promise.resolve();
-        },
-      });
-
-      expect(capturedSignal).toBeInstanceOf(AbortSignal);
-      expect(capturedSignal?.aborted).toBe(false);
-    });
-  });
-
-  describe('isSupported', () => {
-    it('should return false when startViewTransition is not in document', () => {
-      expect(manager.isSupported()).toBe(false);
-    });
-
-    it('should return true when startViewTransition is in document', () => {
-      // eslint-disable-next-line tscompat/tscompat
-      document.startViewTransition = vi.fn();
-
-      expect(manager.isSupported()).toBe(true);
-    });
-  });
-});

web/src/lib/managers/ViewTransitionManager.svelte.ts

@@ -1,102 +0,0 @@
-import { tick } from 'svelte';
-
-interface TransitionRequest {
-  types?: string[];
-  prepareOldSnapshot?: () => void;
-  performUpdate: (signal: AbortSignal) => Promise<void>;
-  prepareNewSnapshot?: () => void;
-  onFinished?: () => void;
-}
-
-export class ViewTransitionManager {
-  #activeViewTransition = $state<ViewTransition | null>(null);
-  #activeOnFinished: (() => void) | undefined;
-
-  get activeViewTransition() {
-    return this.#activeViewTransition;
-  }
-
-  isSupported() {
-    return 'startViewTransition' in document;
-  }
-
-  skipTransitions() {
-    const skipped = !!this.#activeViewTransition;
-    this.#activeViewTransition?.skipTransition();
-    this.#activeViewTransition = null;
-    const onFinished = this.#activeOnFinished;
-    this.#activeOnFinished = undefined;
-    onFinished?.();
-    return skipped;
-  }
-
-  async startTransition({
-    types,
-    prepareOldSnapshot,
-    performUpdate,
-    prepareNewSnapshot,
-    onFinished,
-  }: TransitionRequest) {
-    if (this.#activeViewTransition) {
-      this.skipTransitions();
-    }
-
-    if (!this.isSupported()) {
-      await performUpdate(AbortSignal.timeout(10_000));
-      onFinished?.();
-      return;
-    }
-
-    prepareOldSnapshot?.();
-    await tick();
-
-    const abortController = new AbortController();
-    let transition: ViewTransition;
-    try {
-      // eslint-disable-next-line tscompat/tscompat
-      transition = document.startViewTransition({
-        update: async () => {
-          await performUpdate(abortController.signal);
-          prepareNewSnapshot?.();
-          await tick();
-        },
-        types,
-      });
-    } catch {
-      // eslint-disable-next-line tscompat/tscompat
-      transition = document.startViewTransition(async () => {
-        await performUpdate(abortController.signal);
-        prepareNewSnapshot?.();
-        await tick();
-      });
-    }
-
-    this.#activeViewTransition = transition;
-    this.#activeOnFinished = onFinished;
-
-    // eslint-disable-next-line tscompat/tscompat
-    void transition.ready.catch((error: unknown) => {
-      abortController.abort(error);
-    });
-
-    // Let animation run in the background — don't block the caller.
-    // This allows skipTransitions() to abort mid-animation for rapid navigation.
-    // eslint-disable-next-line tscompat/tscompat
-    void transition.finished
-      .catch(() => {})
-      .finally(() => {
-        if (this.#activeViewTransition === transition) {
-          this.#activeViewTransition = null;
-          this.#activeOnFinished = undefined;
-          onFinished?.();
-        }
-      });
-
-    // Wait only until the DOM update completes (both snapshots captured),
-    // not for the animation to finish.
-    // eslint-disable-next-line tscompat/tscompat
-    await transition.updateCallbackDone;
-  }
-}
-
-export const viewTransitionManager = new ViewTransitionManager();