chore(deps): update github-actions

2026-01-22 01:18:54 -08:00 · 2026-01-21 18:03:51 +00:00
68 changed files with 771 additions and 2216 deletions
--- a/.github/workflows/build-mobile.yml
+++ b/.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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        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@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@4effdb9faa3c120fa03f487f0a476d55fc4cd9f2 # pre-job-action-v2.0.1
        with:
          github-token: ${{ steps.token.outputs.token }}
          filters: |
@@ -79,7 +79,7 @@ jobs:

    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        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@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache/restore@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
        with:
          path: |
            ~/.gradle/caches
@@ -160,7 +160,7 @@ jobs:

      - name: Save Gradle Cache
        id: cache-gradle-save
-        uses: actions/cache/save@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache/save@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
        if: github.ref == 'refs/heads/main'
        with:
          path: |
--- a/.github/workflows/cache-cleanup.yml
+++ b/.github/workflows/cache-cleanup.yml
@@ -19,7 +19,7 @@ jobs:
      actions: write
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
--- a/.github/workflows/cli.yml
+++ b/.github/workflows/cli.yml
@@ -30,7 +30,7 @@ jobs:

    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -44,7 +44,7 @@ jobs:
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './cli/.nvmrc'
          registry-url: 'https://registry.npmjs.org'
@@ -72,7 +72,7 @@ jobs:

    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
--- a/.github/workflows/close-duplicates.yml
+++ b/.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:ab9f163cd5d5cec42704a26ca2769ecf3f10aa8e7bae847f1d527cdf075946e6
+      image: ghcr.io/immich-app/mdq:main@sha256:49f1603397bf9496840162b996e12b089d7d78d7e8b1880ba45545173a1104bf
    outputs:
      checked: ${{ steps.get_checkbox.outputs.checked }}
    steps:
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -44,7 +44,7 @@ jobs:

    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        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@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
+        uses: github/codeql-action/init@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10
        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@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
+        uses: github/codeql-action/autobuild@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10

      # ℹ️ 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@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
+        uses: github/codeql-action/analyze@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10
        with:
          category: '/language:${{matrix.language}}'
--- a/.github/workflows/docker.yml
+++ b/.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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        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@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@4effdb9faa3c120fa03f487f0a476d55fc4cd9f2 # pre-job-action-v2.0.1
        with:
          github-token: ${{ steps.token.outputs.token }}
          filters: |
@@ -132,7 +132,7 @@ jobs:
            suffixes: '-rocm'
            platforms: linux/amd64
            runner-mapping: '{"linux/amd64": "mich"}'
-    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@0477486d82313fba68f7c82c034120a4b8981297 # multi-runner-build-workflow-v2.1.0
+    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@fe13f89d76bce06e0f40ec521b074f77bcf05d12 # multi-runner-build-workflow-v2.2.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@0477486d82313fba68f7c82c034120a4b8981297 # multi-runner-build-workflow-v2.1.0
+    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@fe13f89d76bce06e0f40ec521b074f77bcf05d12 # multi-runner-build-workflow-v2.2.0
    permissions:
      contents: read
      actions: read
--- a/.github/workflows/docs-build.yml
+++ b/.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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        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@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@4effdb9faa3c120fa03f487f0a476d55fc4cd9f2 # pre-job-action-v2.0.1
        with:
          github-token: ${{ steps.token.outputs.token }}
          filters: |
@@ -54,7 +54,7 @@ jobs:

    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -70,7 +70,7 @@ jobs:
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './docs/.nvmrc'
          cache: 'pnpm'
--- a/.github/workflows/docs-deploy.yml
+++ b/.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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
--- a/.github/workflows/docs-destroy.yml
+++ b/.github/workflows/docs-destroy.yml
@@ -17,7 +17,7 @@ jobs:
      pull-requests: write
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
--- a/.github/workflows/fix-format.yml
+++ b/.github/workflows/fix-format.yml
@@ -32,7 +32,7 @@ jobs:
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
--- a/.github/workflows/pr-label-validation.yml
+++ b/.github/workflows/pr-label-validation.yml
@@ -14,7 +14,7 @@ jobs:
      pull-requests: write
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
--- a/.github/workflows/pr-labeler.yml
+++ b/.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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
--- a/.github/workflows/prepare-release.yml
+++ b/.github/workflows/prepare-release.yml
@@ -63,13 +63,13 @@ jobs:
          ref: main

      - name: Install uv
-        uses: astral-sh/setup-uv@681c641aba71e4a1c380be3ab5e12ad51f415867 # v7.1.6
+        uses: astral-sh/setup-uv@61cb8a9741eeb8a550a1b8544337180c0fc8476b # v7.2.0

      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
--- a/.github/workflows/preview-label.yaml
+++ b/.github/workflows/preview-label.yaml
@@ -14,7 +14,7 @@ jobs:
      pull-requests: write
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -32,7 +32,7 @@ jobs:
      pull-requests: write
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
--- a/.github/workflows/release-pr.yml
+++ b/.github/workflows/release-pr.yml
@@ -30,13 +30,13 @@ jobs:
          ref: main

      - name: Install uv
-        uses: astral-sh/setup-uv@681c641aba71e4a1c380be3ab5e12ad51f415867 # v7.1.6
+        uses: astral-sh/setup-uv@61cb8a9741eeb8a550a1b8544337180c0fc8476b # v7.2.0

      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
--- a/.github/workflows/sdk.yml
+++ b/.github/workflows/sdk.yml
@@ -17,7 +17,7 @@ jobs:
        working-directory: ./open-api/typescript-sdk
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -31,7 +31,7 @@ jobs:
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './open-api/typescript-sdk/.nvmrc'
          registry-url: 'https://registry.npmjs.org'
--- a/.github/workflows/static_analysis.yml
+++ b/.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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        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@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@4effdb9faa3c120fa03f487f0a476d55fc4cd9f2 # pre-job-action-v2.0.1
        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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
--- a/.github/workflows/test.yml
+++ b/.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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        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@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@4effdb9faa3c120fa03f487f0a476d55fc4cd9f2 # pre-job-action-v2.0.1
        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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -77,7 +77,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
@@ -108,7 +108,7 @@ jobs:
        working-directory: ./cli
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -121,7 +121,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './cli/.nvmrc'
          cache: 'pnpm'
@@ -155,7 +155,7 @@ jobs:
        working-directory: ./cli
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -168,7 +168,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './cli/.nvmrc'
          cache: 'pnpm'
@@ -197,7 +197,7 @@ jobs:
        working-directory: ./web
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -210,7 +210,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './web/.nvmrc'
          cache: 'pnpm'
@@ -241,7 +241,7 @@ jobs:
        working-directory: ./web
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -254,7 +254,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './web/.nvmrc'
          cache: 'pnpm'
@@ -279,7 +279,7 @@ jobs:
      contents: read
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -292,7 +292,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './web/.nvmrc'
          cache: 'pnpm'
@@ -327,7 +327,7 @@ jobs:
        working-directory: ./e2e
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -340,7 +340,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './e2e/.nvmrc'
          cache: 'pnpm'
@@ -373,7 +373,7 @@ jobs:
        working-directory: ./server
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -387,7 +387,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
@@ -412,7 +412,7 @@ jobs:
        runner: [ubuntu-latest, ubuntu-24.04-arm]
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -426,7 +426,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './e2e/.nvmrc'
          cache: 'pnpm'
@@ -467,7 +467,7 @@ jobs:
        runner: [ubuntu-latest, ubuntu-24.04-arm]
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -481,7 +481,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './e2e/.nvmrc'
          cache: 'pnpm'
@@ -529,7 +529,7 @@ jobs:
      contents: read
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -561,7 +561,7 @@ jobs:
        working-directory: ./machine-learning
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -571,7 +571,7 @@ jobs:
          persist-credentials: false
          token: ${{ steps.token.outputs.token }}
      - name: Install uv
-        uses: astral-sh/setup-uv@681c641aba71e4a1c380be3ab5e12ad51f415867 # v7.1.6
+        uses: astral-sh/setup-uv@61cb8a9741eeb8a550a1b8544337180c0fc8476b # v7.2.0
        with:
          python-version: 3.11
      - name: Install dependencies
@@ -601,7 +601,7 @@ jobs:
        working-directory: ./.github
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -614,7 +614,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './.github/.nvmrc'
          cache: 'pnpm'
@@ -631,7 +631,7 @@ jobs:
      contents: read
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -652,7 +652,7 @@ jobs:
      contents: read
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -665,7 +665,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
@@ -714,7 +714,7 @@ jobs:
        working-directory: ./server
    steps:
      - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -727,7 +727,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
--- a/.github/workflows/weblate-lock.yml
+++ b/.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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        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@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@4effdb9faa3c120fa03f487f0a476d55fc4cd9f2 # pre-job-action-v2.0.1
        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@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
--- a/e2e/src/web/specs/photo-viewer.e2e-spec.ts
+++ b/e2e/src/web/specs/photo-viewer.e2e-spec.ts
@@ -1,7 +1,10 @@
 import { AssetMediaResponseDto, LoginResponseDto } from '@immich/sdk';
-import { expect, test } from '@playwright/test';
+import { Page, expect, test } from '@playwright/test';
 import { utils } from 'src/utils';

+function imageLocator(page: Page) {
+  return page.getByAltText('Image taken').locator('visible=true');
+}
 test.describe('Photo Viewer', () => {
  let admin: LoginResponseDto;
  let asset: AssetMediaResponseDto;
@@ -23,44 +26,31 @@ test.describe('Photo Viewer', () => {

  test('loads original photo when zoomed', async ({ page }) => {
    await page.goto(`/photos/${asset.id}`);
-
-    const thumbnail = page.getByTestId('thumbnail').filter({ visible: true });
-    const original = page.getByTestId('original').filter({ visible: true });
-
-    await expect(thumbnail).toHaveAttribute('src', /thumbnail/);
-    const box = await thumbnail.boundingBox();
+    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('thumbnail');
+    const box = await imageLocator(page).boundingBox();
    expect(box).toBeTruthy();
    const { x, y, width, height } = box!;
    await page.mouse.move(x + width / 2, y + height / 2);
    await page.mouse.wheel(0, -1);
-    await expect(original).toBeInViewport();
-    await expect(original).toHaveAttribute('src', /original/);
+    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('original');
  });

  test('loads fullsize image when zoomed and original is web-incompatible', async ({ page }) => {
    await page.goto(`/photos/${rawAsset.id}`);
-
-    const thumbnail = page.getByTestId('thumbnail').filter({ visible: true });
-    const original = page.getByTestId('original').filter({ visible: true });
-
-    await expect(thumbnail).toHaveAttribute('src', /thumbnail/);
-    const box = await thumbnail.boundingBox();
+    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('thumbnail');
+    const box = await imageLocator(page).boundingBox();
    expect(box).toBeTruthy();
    const { x, y, width, height } = box!;
    await page.mouse.move(x + width / 2, y + height / 2);
    await page.mouse.wheel(0, -1);
-    await expect(original).toHaveAttribute('src', /fullsize/);
+    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('fullsize');
  });

  test('reloads photo when checksum changes', async ({ page }) => {
    await page.goto(`/photos/${asset.id}`);
-
-    const thumbnail = page.getByTestId('thumbnail').filter({ visible: true });
-    const preview = page.getByTestId('preview').filter({ visible: true });
-
-    await expect(thumbnail).toHaveAttribute('src', /thumbnail/);
-    const initialSrc = await thumbnail.getAttribute('src');
+    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('thumbnail');
+    const initialSrc = await imageLocator(page).getAttribute('src');
    await utils.replaceAsset(admin.accessToken, asset.id);
-    await expect(preview).not.toHaveAttribute('src', initialSrc!);
+    await expect.poll(async () => await imageLocator(page).getAttribute('src')).not.toBe(initialSrc);
  });
 });
--- a/web/src/lib/actions/image-loader.svelte.ts
+++ b/web/src/lib/actions/image-loader.svelte.ts
@@ -1,201 +0,0 @@
-import { cancelImageUrl } from '$lib/utils/sw-messaging';
-import type { ClassValue } from 'svelte/elements';
-
-/**
- * Converts a ClassValue to a string suitable for className assignment.
- * Handles strings, arrays, and objects similar to how clsx works.
- */
-function classValueToString(value: ClassValue | undefined): string {
-  if (!value) {
-    return '';
-  }
-  if (typeof value === 'string') {
-    return value;
-  }
-  if (Array.isArray(value)) {
-    return value
-      .map((v) => classValueToString(v))
-      .filter(Boolean)
-      .join(' ');
-  }
-  // Object/dictionary case
-  return Object.entries(value)
-    .filter(([, v]) => v)
-    .map(([k]) => k)
-    .join(' ');
-}
-
-export interface ImageLoaderProperties {
-  imgClass?: ClassValue;
-  alt?: string;
-  draggable?: boolean;
-  role?: string;
-  style?: string;
-  title?: string | null;
-  loading?: 'lazy' | 'eager';
-  dataAttributes?: Record<string, string>;
-}
-export interface ImageSourceProperty {
-  src: string | undefined;
-}
-export interface ImageLoaderCallbacks {
-  onStart?: () => void;
-  onLoad?: () => void;
-  onError?: (error: Error) => void;
-  onElementCreated?: (element: HTMLImageElement) => void;
-}
-
-const updateImageAttributes = (img: HTMLImageElement, params: ImageLoaderProperties) => {
-  if (params.alt !== undefined) {
-    img.alt = params.alt;
-  }
-  if (params.draggable !== undefined) {
-    img.draggable = params.draggable;
-  }
-  if (params.imgClass) {
-    img.className = classValueToString(params.imgClass);
-  }
-  if (params.role) {
-    img.role = params.role;
-  }
-  if (params.style !== undefined) {
-    img.setAttribute('style', params.style);
-  }
-  if (params.title !== undefined && params.title !== null) {
-    img.title = params.title;
-  }
-  if (params.loading !== undefined) {
-    img.loading = params.loading;
-  }
-  if (params.dataAttributes) {
-    for (const [key, value] of Object.entries(params.dataAttributes)) {
-      img.setAttribute(key, value);
-    }
-  }
-};
-
-const cleanupImageElement = (
-  imgElement: HTMLImageElement,
-  currentSrc: string | undefined,
-  handleLoad: () => void,
-  handleError: () => void,
-) => {
-  cancelImageUrl(currentSrc);
-  if (imgElement) {
-    imgElement.removeEventListener('load', handleLoad);
-    imgElement.removeEventListener('error', handleError);
-    imgElement.remove();
-  }
-};
-
-const createImageElement = (
-  src: string | undefined,
-  properties: ImageLoaderProperties,
-  onLoad: () => void,
-  onError: () => void,
-  onStart?: () => void,
-  onElementCreated?: (imgElement: HTMLImageElement) => void,
-) => {
-  if (!src) {
-    return undefined;
-  }
-  const img = document.createElement('img');
-  updateImageAttributes(img, properties);
-
-  img.addEventListener('load', onLoad);
-  img.addEventListener('error', onError);
-
-  onStart?.();
-
-  if (src) {
-    img.src = src;
-    onElementCreated?.(img);
-  }
-
-  return img;
-};
-
-export function loadImage(
-  src: string,
-  properties: ImageLoaderProperties,
-  onLoad: () => void,
-  onError: () => void,
-  onStart?: () => void,
-) {
-  const img = createImageElement(src, properties, onLoad, onError, onStart);
-  if (!img) {
-    return () => void 0;
-  }
-  return () => cleanupImageElement(img, src, onLoad, onError);
-}
-
-export type LoadImageFunction = typeof loadImage;
-
-/**
- * 1. Creates and appends an <img> element to the parent
- * 2. Coordinates with service worker before src triggers fetch
- * 3. Adds load/error listeners
- * 4. Cancels SW request when element is removed from DOM
- */
-export function imageLoader(
-  node: HTMLElement,
-  params: ImageSourceProperty & ImageLoaderProperties & ImageLoaderCallbacks,
-) {
-  let currentSrc = params.src;
-  let currentCallbacks = params;
-  let imgElement: HTMLImageElement | undefined = undefined;
-
-  const handleLoad = () => {
-    currentCallbacks.onLoad?.();
-  };
-
-  const handleError = () => {
-    currentCallbacks.onError?.(new Error(`Failed to load image: ${currentSrc}`));
-  };
-
-  const handleElementCreated = (img: HTMLImageElement) => {
-    if (img) {
-      node.append(img);
-      // const a = document.createElement('p');
-
-      // a.classList.add('absolute', 'h-full', 'w-full', 'top-0');
-      // a.textContent = img.src;
-      // node.append(a);
-      currentCallbacks.onElementCreated?.(img);
-    }
-  };
-
-  const createImage = () => {
-    imgElement = createImageElement(currentSrc, params, handleLoad, handleError, params.onStart, handleElementCreated);
-  };
-  createImage();
-
-  return {
-    update(newParams: ImageSourceProperty & ImageLoaderProperties & ImageLoaderCallbacks) {
-      // If src changed, recreate the image element
-      if (newParams.src !== currentSrc) {
-        cleanupImageElement(imgElement!, currentSrc, handleLoad, handleError);
-
-        currentSrc = newParams.src;
-        currentCallbacks = newParams;
-
-        createImage();
-        return;
-      }
-
-      currentCallbacks = newParams;
-
-      if (!imgElement) {
-        return;
-      }
-
-      updateImageAttributes(imgElement, newParams);
-    },
-
-    destroy() {
-      if (imgElement) {
-        cleanupImageElement(imgElement, currentSrc, handleLoad, handleError);
-      }
-    },
-  };
-}
--- a/web/src/lib/actions/zoom-image.ts
+++ b/web/src/lib/actions/zoom-image.ts
@@ -9,25 +9,10 @@ export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolea
    initialState: state,
  });

-  let isUpdatingFromInstance = false;
-  let isUpdatingFromStore = false;
-
  const unsubscribes = [
-    photoZoomState.subscribe((state) => {
-      if (isUpdatingFromInstance || options?.disabled) {
-        return;
-      }
-      isUpdatingFromStore = true;
-      zoomInstance.setState(state);
-      isUpdatingFromStore = false;
-    }),
+    photoZoomState.subscribe((state) => zoomInstance.setState(state)),
    zoomInstance.subscribe(({ state }) => {
-      if (isUpdatingFromStore || options?.disabled) {
-        return;
-      }
-      isUpdatingFromInstance = true;
      photoZoomState.set(state);
-      isUpdatingFromInstance = false;
    }),
  ];

--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -13,7 +13,7 @@
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
  import { handlePromiseError } from '$lib/utils';
  import { cancelMultiselect } from '$lib/utils/asset-utils';
@@ -114,7 +114,7 @@
    <ControlAppBar showBackButton={false}>
      {#snippet leading()}
        <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
-          <Logo variant={mediaQueryManager.maxMd ? 'icon' : 'inline'} class="min-w-10" />
+          <Logo variant={mobileDevice.maxMd ? 'icon' : 'inline'} class="min-w-10" />
        </a>
      {/snippet}

--- a/web/src/lib/components/asset-viewer/adaptive-image.svelte
+++ b/web/src/lib/components/asset-viewer/adaptive-image.svelte
@@ -1,249 +0,0 @@
-<script lang="ts">
-  import { imageLoader } from '$lib/actions/image-loader.svelte';
-  import { thumbhash } from '$lib/actions/thumbhash';
-  import { zoomImageAction } from '$lib/actions/zoom-image';
-  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
-  import { SlideshowLook, SlideshowState } from '$lib/stores/slideshow.store';
-  import { photoZoomState, photoZoomTransform, resetZoomState } from '$lib/stores/zoom-image.store';
-  import { AdaptiveImageLoader } from '$lib/utils/adaptive-image-loader.svelte';
-  import { getDimensions } from '$lib/utils/asset-utils';
-  import { scaleToFit } from '$lib/utils/layout-utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import type { AssetResponseDto, SharedLinkResponseDto } from '@immich/sdk';
-  import { LoadingSpinner } from '@immich/ui';
-  import { onDestroy, untrack, type Snippet } from 'svelte';
-
-  interface Props {
-    asset: AssetResponseDto;
-    sharedLink?: SharedLinkResponseDto;
-    zoomDisabled?: boolean;
-    imageClass?: string;
-    container: {
-      width: number;
-      height: number;
-    };
-    slideshowState: SlideshowState;
-    slideshowLook: SlideshowLook;
-    onImageReady?: () => void;
-    onError?: () => void;
-    imgElement?: HTMLImageElement;
-    imgContainerElement?: HTMLElement;
-    overlays?: Snippet;
-  }
-
-  let {
-    imgElement = $bindable<HTMLImageElement | undefined>(),
-    imgContainerElement = $bindable<HTMLElement | undefined>(),
-    asset,
-    sharedLink,
-    zoomDisabled = false,
-    imageClass = '',
-    container,
-    slideshowState,
-    slideshowLook,
-    onImageReady,
-    onError,
-    overlays,
-  }: Props = $props();
-
-  let previousLoader = $state<AdaptiveImageLoader>();
-  let previousAssetId: string | undefined;
-  let previousSharedLinkId: string | undefined;
-
-  const adaptiveImageLoader = $derived.by(() => {
-    if (previousAssetId === asset.id && previousSharedLinkId === sharedLink?.id) {
-      return previousLoader!;
-    }
-
-    return untrack(() => {
-      previousAssetId = asset.id;
-      previousSharedLinkId = sharedLink?.id;
-
-      previousLoader?.destroy();
-      resetZoomState();
-      const loader = new AdaptiveImageLoader(asset, sharedLink, {
-        currentZoomFn: () => $photoZoomState.currentZoom,
-        onImageReady,
-        onError,
-      });
-      previousLoader = loader;
-      return loader;
-    });
-  });
-  onDestroy(() => adaptiveImageLoader.destroy());
-
-  const imageDimensions = $derived.by(() => {
-    if ((asset.width ?? 0) > 0 && (asset.height ?? 0) > 0) {
-      return { width: asset.width!, height: asset.height! };
-    }
-
-    if (asset.exifInfo?.exifImageHeight && asset.exifInfo.exifImageWidth) {
-      return getDimensions(asset.exifInfo) as { width: number; height: number };
-    }
-
-    return { width: 1, height: 1 };
-  });
-
-  const scaledDimensions = $derived(scaleToFit(imageDimensions, container));
-
-  const renderDimensions = $derived.by(() => {
-    const { width, height } = scaledDimensions;
-    return {
-      width: width + 'px',
-      height: height + 'px',
-      left: (container.width - width) / 2 + 'px',
-      top: (container.height - height) / 2 + 'px',
-    };
-  });
-
-  const loadState = $derived(adaptiveImageLoader.adaptiveLoaderState);
-  const imageAltText = $derived(loadState.previewUrl ? $getAltText(toTimelineAsset(asset)) : '');
-  const thumbnailUrl = $derived(loadState.thumbnailUrl);
-  const previewUrl = $derived(loadState.previewUrl);
-  const originalUrl = $derived(loadState.originalUrl);
-  const showSpinner = $derived(!asset.thumbhash && loadState.quality === 'basic');
-  const showBrokenAsset = $derived(loadState.hasError && loadState.quality !== 'loading-original');
-
-  // Effect: Upgrade to original when user zooms in
-  $effect(() => {
-    if ($photoZoomState.currentZoom > 1 && loadState.quality === 'preview') {
-      void adaptiveImageLoader.triggerOriginal();
-    }
-  });
-  let thumbnailElement = $state<HTMLImageElement>();
-  let previewElement = $state<HTMLImageElement>();
-  let originalElement = $state<HTMLImageElement>();
-
-  // Effect: Synchronize highest quality element as main imgElement
-  $effect(() => {
-    imgElement = originalElement ?? previewElement ?? thumbnailElement;
-  });
-</script>
-
-<div
-  class="relative h-full w-full"
-  style:left={renderDimensions.left}
-  style:top={renderDimensions.top}
-  style:width={renderDimensions.width}
-  style:height={renderDimensions.height}
-  bind:this={imgContainerElement}
->
-  {#if asset.thumbhash}
-    <!-- Thumbhash / spinner layer  -->
-    <div style:transform-origin="0px 0px" style:transform={$photoZoomTransform} class="h-full w-full absolute">
-      <canvas use:thumbhash={{ base64ThumbHash: asset.thumbhash }} class="h-full w-full absolute -z-2"></canvas>
-    </div>
-  {:else if showSpinner}
-    <div id="spinner" class="absolute flex h-full items-center justify-center">
-      <LoadingSpinner />
-    </div>
-  {/if}
-
-  <div
-    use:imageLoader={{
-      src: thumbnailUrl,
-      onStart: () => adaptiveImageLoader.onThumbnailStart(),
-      onLoad: () => adaptiveImageLoader.onThumbnailLoad(),
-      onError: () => adaptiveImageLoader.onThumbnailError(),
-      onElementCreated: (el) => (thumbnailElement = el),
-      imgClass: ['absolute h-full', 'w-full'],
-      alt: '',
-      role: 'presentation',
-      dataAttributes: {
-        'data-testid': 'thumbnail',
-      },
-    }}
-  ></div>
-
-  {#if showBrokenAsset}
-    <div class="h-full w-full absolute">
-      <BrokenAsset class="text-xl h-full w-full" />
-    </div>
-  {:else}
-    <!-- Slideshow blurred background -->
-    {#if thumbnailUrl && slideshowState !== SlideshowState.None && slideshowLook === SlideshowLook.BlurredBackground}
-      <img
-        src={thumbnailUrl}
-        alt=""
-        role="presentation"
-        class="-z-1 absolute top-0 start-0 object-cover h-full w-full blur-lg"
-        draggable="false"
-      />
-    {/if}
-
-    <div
-      class="absolute top-0"
-      style:transform-origin="0px 0px"
-      style:transform={$photoZoomTransform}
-      style:width={renderDimensions.width}
-      style:height={renderDimensions.height}
-    >
-      <div
-        use:imageLoader={{
-          src: previewUrl,
-          onStart: () => adaptiveImageLoader.onPreviewStart(),
-          onLoad: () => adaptiveImageLoader.onPreviewLoad(),
-          onError: () => adaptiveImageLoader.onPreviewError(),
-          onElementCreated: (el) => (previewElement = el),
-          imgClass: ['h-full', 'w-full', { imageClass }],
-          alt: imageAltText,
-          draggable: false,
-          dataAttributes: {
-            'data-testid': 'preview',
-          },
-        }}
-      ></div>
-
-      {@render overlays?.()}
-    </div>
-
-    <div
-      class="absolute top-0"
-      style:transform-origin="0px 0px"
-      style:transform={$photoZoomTransform}
-      style:width={renderDimensions.width}
-      style:height={renderDimensions.height}
-    >
-      <div
-        use:imageLoader={{
-          src: originalUrl,
-          onStart: () => adaptiveImageLoader.onOriginalStart(),
-          onLoad: () => adaptiveImageLoader.onOriginalLoad(),
-          onError: () => adaptiveImageLoader.onOriginalError(),
-          onElementCreated: (el) => (originalElement = el),
-          imgClass: ['h-full', 'w-full', { imageClass }],
-          alt: imageAltText,
-          draggable: false,
-          dataAttributes: {
-            'data-testid': 'original',
-          },
-        }}
-      ></div>
-
-      {@render overlays?.()}
-    </div>
-
-    <!-- Use placeholder empty image to zoomImage so it can monitor mouse-wheel events and update zoom state -->
-    <div
-      class="absolute top-0"
-      use:zoomImageAction={{ disabled: zoomDisabled }}
-      style:width={renderDimensions.width}
-      style:height={renderDimensions.height}
-    >
-      <img alt="" class="absolute h-full w-full hidden" draggable="false" />
-    </div>
-  {/if}
-</div>
-
-<style>
-  @keyframes delayedVisibility {
-    to {
-      visibility: visible;
-    }
-  }
-  #spinner {
-    visibility: hidden;
-    animation: 0s linear 0.4s forwards delayedVisibility;
-  }
-</style>
--- a/web/src/lib/components/asset-viewer/album-list-item.svelte
+++ b/web/src/lib/components/asset-viewer/album-list-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { SCROLL_PROPERTIES } from '$lib/components/shared-components/album-selection/album-selection-utils';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { getAssetThumbnailUrl } from '$lib/utils';
  import { normalizeSearchString } from '$lib/utils/string-utils.js';
  import { type AlbumResponseDto } from '@immich/sdk';
@@ -54,7 +54,7 @@
    onMultiSelect();
  };

-  let usingMobileDevice = $derived(mediaQueryManager.pointerCoarse);
+  let usingMobileDevice = $derived(mobileDevice.pointerCoarse);
  let mouseOver = $state(false);
  const onMouseEnter = () => {
    if (usingMobileDevice) {
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts
@@ -16,7 +16,7 @@ describe('AssetViewerNavBar component', () => {
    preAction: () => {},
    onZoomImage: () => {},
    onAction: () => {},
-    onEdit: () => {},
+    onRunJob: () => {},
    onPlaySlideshow: () => {},
    onClose: () => {},
    playOriginalVideo: false,
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -28,11 +28,12 @@
  import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
  import { user } from '$lib/stores/user.store';
  import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { getSharedLink, withoutIcons } from '$lib/utils';
+  import { getAssetJobName, getSharedLink, withoutIcons } from '$lib/utils';
  import type { OnUndoDelete } from '$lib/utils/actions';
  import { canCopyImageToClipboard } from '$lib/utils/asset-utils';
  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import {
+    AssetJobName,
    AssetTypeEnum,
    AssetVisibility,
    type AlbumResponseDto,
@@ -43,9 +44,13 @@
  import { CommandPaletteDefaultProvider, IconButton, type ActionItem } from '@immich/ui';
  import {
    mdiArrowLeft,
+    mdiCogRefreshOutline,
    mdiCompare,
    mdiContentCopy,
+    mdiDatabaseRefreshOutline,
    mdiDotsVertical,
+    mdiHeadSyncOutline,
+    mdiImageRefreshOutline,
    mdiImageSearch,
    mdiMagnifyMinusOutline,
    mdiMagnifyPlusOutline,
@@ -66,6 +71,7 @@
    preAction: PreAction;
    onAction: OnAction;
    onUndoDelete?: OnUndoDelete;
+    onRunJob: (name: AssetJobName) => void;
    onPlaySlideshow: () => void;
    onEdit: () => void;
    onClose?: () => void;
@@ -84,6 +90,7 @@
    preAction,
    onAction,
    onUndoDelete = undefined,
+    onRunJob,
    onPlaySlideshow,
    onClose,
    onEdit,
@@ -117,10 +124,6 @@
    PlayMotionPhoto,
    StopMotionPhoto,
    Info,
-    RefreshFacesJob,
-    RefreshMetadataJob,
-    RegenerateThumbnailJob,
-    TranscodeVideoJob,
  } = $derived(getAssetActions($t, asset));
  const sharedLink = getSharedLink();

@@ -137,24 +140,7 @@

 <CommandPaletteDefaultProvider
  name={$t('assets')}
-  actions={withoutIcons([
-    Close,
-    Cast,
-    Share,
-    Download,
-    DownloadOriginal,
-    SharedLinkDownload,
-    Offline,
-    Favorite,
-    Unfavorite,
-    PlayMotionPhoto,
-    StopMotionPhoto,
-    Info,
-    RefreshFacesJob,
-    RefreshMetadataJob,
-    RegenerateThumbnailJob,
-    TranscodeVideoJob,
-  ])}
+  actions={withoutIcons([Close, Share, Offline, Favorite, Unfavorite, PlayMotionPhoto, StopMotionPhoto, Info])}
 />

 <div
@@ -289,10 +275,28 @@
        {/if}
        {#if isOwner}
          <hr />
-          <ActionMenuItem action={RefreshFacesJob} />
-          <ActionMenuItem action={RefreshMetadataJob} />
-          <ActionMenuItem action={RegenerateThumbnailJob} />
-          <ActionMenuItem action={TranscodeVideoJob} />
+          <MenuOption
+            icon={mdiHeadSyncOutline}
+            onClick={() => onRunJob(AssetJobName.RefreshFaces)}
+            text={$getAssetJobName(AssetJobName.RefreshFaces)}
+          />
+          <MenuOption
+            icon={mdiDatabaseRefreshOutline}
+            onClick={() => onRunJob(AssetJobName.RefreshMetadata)}
+            text={$getAssetJobName(AssetJobName.RefreshMetadata)}
+          />
+          <MenuOption
+            icon={mdiImageRefreshOutline}
+            onClick={() => onRunJob(AssetJobName.RegenerateThumbnail)}
+            text={$getAssetJobName(AssetJobName.RegenerateThumbnail)}
+          />
+          {#if asset.type === AssetTypeEnum.Video}
+            <MenuOption
+              icon={mdiCogRefreshOutline}
+              onClick={() => onRunJob(AssetJobName.TranscodeVideo)}
+              text={$getAssetJobName(AssetJobName.TranscodeVideo)}
+            />
+          {/if}
        {/if}
      </ButtonContextMenu>
    {/if}
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
  import { goto } from '$app/navigation';
  import { focusTrap } from '$lib/actions/focus-trap';
-  import { loadImage } from '$lib/actions/image-loader.svelte';
  import type { Action, OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
  import NextAssetAction from '$lib/components/asset-viewer/actions/next-asset-action.svelte';
  import PreviousAssetAction from '$lib/components/asset-viewer/actions/previous-asset-action.svelte';
@@ -13,30 +12,34 @@
  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 { preloadManager } from '$lib/managers/PreloadManager.svelte';
  import { Route } from '$lib/route';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { ocrManager } from '$lib/stores/ocr.svelte';
  import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
  import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
  import { user } from '$lib/stores/user.store';
-  import { getSharedLink, handlePromiseError } from '$lib/utils';
+  import { getAssetJobMessage, getAssetUrl, getSharedLink, handlePromiseError } from '$lib/utils';
  import type { OnUndoDelete } from '$lib/utils/actions';
-  import { AdaptiveImageLoader } from '$lib/utils/adaptive-image-loader.svelte';
  import { navigateToAsset } from '$lib/utils/asset-utils';
  import { handleError } from '$lib/utils/handle-error';
  import { InvocationTracker } from '$lib/utils/invocationTracker';
  import { SlideshowHistory } from '$lib/utils/slideshow-history';
-
+  import { preloadImageUrl } from '$lib/utils/sw-messaging';
  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import {
+    AssetJobName,
    AssetTypeEnum,
+    getAllAlbums,
    getAssetInfo,
    getStack,
+    runAssetJobs,
    type AlbumResponseDto,
    type AssetResponseDto,
    type PersonResponseDto,
    type StackResponseDto,
  } from '@immich/sdk';
+  import { toastManager } from '@immich/ui';
  import { onDestroy, onMount, untrack } from 'svelte';
  import { t } from 'svelte-i18n';
  import { fly } from 'svelte/transition';
@@ -96,6 +99,7 @@
    stopProgress: stopSlideshowProgress,
    slideshowNavigation,
    slideshowState,
+    slideshowTransition,
  } = slideshowStore;
  const stackThumbnailSize = 60;
  const stackSelectedThumbnailSize = 65;
@@ -103,11 +107,12 @@
  const asset = $derived(cursor.current);
  const nextAsset = $derived(cursor.nextAsset);
  const previousAsset = $derived(cursor.previousAsset);
-
+  let appearsInAlbums: AlbumResponseDto[] = $state([]);
  let sharedLink = getSharedLink();
  let previewStackedAsset: AssetResponseDto | undefined = $state();
  let isShowEditor = $state(false);
  let fullscreenElement = $state<Element>();
+  let unsubscribes: (() => void)[] = [];
  let stack: StackResponseDto | null = $state(null);

  let zoomToggle = $state(() => void 0);
@@ -122,167 +127,93 @@
      return;
    }

-    if (!asset.stack) {
-      return;
+    if (asset.stack) {
+      stack = await getStack({ id: asset.stack.id });
    }

-    stack = await getStack({ id: asset.stack.id });
-
    if (!stack?.assets.some(({ id }) => id === asset.id)) {
      stack = null;
    }

-    if (stack?.assets[1]) {
-      untrack(() => {
-        const loader = new AdaptiveImageLoader(stack!.assets[1], undefined, undefined, loadImage);
-        loader.start();
-      });
-    }
+    untrack(() => {
+      if (stack && stack?.assets.length > 1) {
+        preloadImageUrl(getAssetUrl({ asset: stack.assets[1] }));
+      }
+    });
  };

  const handleFavorite = async () => {
-    if (!album || !album.isActivityEnabled) {
+    if (album && album.isActivityEnabled) {
+      try {
+        await activityManager.toggleLike();
+      } catch (error) {
+        handleError(error, $t('errors.unable_to_change_favorite'));
+      }
+    }
+  };
+
+  onMount(async () => {
+    unsubscribes.push(
+      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));
+        }
+      }),
+    );
+
+    if (!sharedLink) {
+      await handleGetAllAlbums();
+    }
+  });
+
+  onDestroy(() => {
+    for (const unsubscribe of unsubscribes) {
+      unsubscribe();
+    }
+
+    activityManager.reset();
+  });
+
+  const handleGetAllAlbums = async () => {
+    if (authManager.isSharedLink) {
      return;
    }

    try {
-      await activityManager.toggleLike();
+      appearsInAlbums = await getAllAlbums({ assetId: asset.id });
    } catch (error) {
-      handleError(error, $t('errors.unable_to_change_favorite'));
+      console.error('Error getting album that asset belong to', error);
    }
  };

-  onMount(() => {
-    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 slideshowNavigationUnsubscribe = slideshowNavigation.subscribe((value) => {
-      if (value === SlideshowNavigation.Shuffle) {
-        slideshowHistory.reset();
-        slideshowHistory.queue(toTimelineAsset(asset));
-      }
-    });
-
-    return () => {
-      slideshowStateUnsubscribe();
-      slideshowNavigationUnsubscribe();
-    };
-  });
-
-  onDestroy(() => {
-    activityManager.reset();
-
-    destroyNextPreloader();
-    destroyPreviousPreloader();
-  });
-
  const closeViewer = () => {
    onClose?.(asset);
  };

  const closeEditor = async () => {
    if (editManager.hasAppliedEdits) {
+      console.log(asset);
      const refreshedAsset = await getAssetInfo({ id: asset.id });
+      console.log(refreshedAsset);
      onAssetChange?.(refreshedAsset);
      assetViewingStore.setAsset(refreshedAsset);
    }
    isShowEditor = false;
  };

-  let nextPreloader: AdaptiveImageLoader | undefined;
-  let previousPreloader: AdaptiveImageLoader | undefined;
-  let nextPreviewUrl = $state<string | undefined>();
-  let previousPreviewUrl = $state<string | undefined>();
-
-  const setPreviewUrl = (direction: 'next' | 'previous', url: string | undefined) => {
-    if (direction === 'next') {
-      nextPreviewUrl = url;
-    } else {
-      previousPreviewUrl = url;
-    }
-  };
-
-  const startPreloader = (asset: AssetResponseDto | undefined, direction: 'next' | 'previous') => {
-    if (!asset) {
-      return;
-    }
-    const loader = new AdaptiveImageLoader(
-      asset,
-      undefined,
-      {
-        currentZoomFn: () => 1,
-        onQualityUpgrade: (url) => setPreviewUrl(direction, url),
-      },
-      loadImage,
-    );
-    loader.start();
-    return loader;
-  };
-
-  const destroyPreviousPreloader = () => {
-    previousPreloader?.destroy();
-    previousPreloader = undefined;
-    previousPreviewUrl = undefined;
-  };
-
-  const destroyNextPreloader = () => {
-    nextPreloader?.destroy();
-    nextPreloader = undefined;
-    nextPreviewUrl = undefined;
-  };
-
-  const cancelPreloadsBeforeNavigation = (direction: 'previous' | 'next') => {
-    setPreviewUrl(direction, undefined);
-    if (direction === 'next') {
-      destroyPreviousPreloader();
-      return;
-    }
-    destroyNextPreloader();
-  };
-
-  const updatePreloadsAfterNavigation = (oldCursor: AssetCursor, newCursor: AssetCursor) => {
-    const movedForward = newCursor.current.id === oldCursor.nextAsset?.id;
-    const movedBackward = newCursor.current.id === oldCursor.previousAsset?.id;
-
-    const shouldDestroyPrevious = movedForward || !movedBackward;
-    const shouldDestroyNext = movedBackward || !movedForward;
-
-    if (movedForward) {
-      // When moving forward: old next becomes current, shift preview URLs
-      const oldNextUrl = nextPreviewUrl;
-      destroyPreviousPreloader();
-      previousPreviewUrl = oldNextUrl;
-      destroyNextPreloader();
-      nextPreloader = startPreloader(newCursor.nextAsset, 'next');
-    } else if (movedBackward) {
-      // When moving backward: old previous becomes current, shift preview URLs
-      const oldPreviousUrl = previousPreviewUrl;
-      destroyNextPreloader();
-      nextPreviewUrl = oldPreviousUrl;
-      destroyPreviousPreloader();
-      previousPreloader = startPreloader(newCursor.previousAsset, 'previous');
-    } else {
-      // Non-adjacent navigation (e.g., slideshow random) - clear everything
-      if (shouldDestroyPrevious) {
-        destroyPreviousPreloader();
-      }
-      if (shouldDestroyNext) {
-        destroyNextPreloader();
-      }
-      previousPreloader = startPreloader(newCursor.previousAsset, 'previous');
-      nextPreloader = startPreloader(newCursor.nextAsset, 'next');
-    }
-  };
-
  const tracker = new InvocationTracker();
-  const navigateAsset = (order?: 'previous' | 'next') => {
+
+  const navigateAsset = (order?: 'previous' | 'next', e?: Event) => {
    if (!order) {
      if ($slideshowState === SlideshowState.PlaySlideshow) {
        order = $slideshowNavigation === SlideshowNavigation.AscendingOrder ? 'previous' : 'next';
@@ -291,12 +222,12 @@
      }
    }

+    e?.stopPropagation();
+    preloadManager.cancel(asset);
    if (tracker.isActive()) {
      return;
    }

-    cancelPreloadsBeforeNavigation(order);
-
    void tracker.invoke(async () => {
      let hasNext = false;

@@ -314,14 +245,12 @@
          order === 'previous' ? await navigateToAsset(cursor.previousAsset) : await navigateToAsset(cursor.nextAsset);
      }

-      if ($slideshowState !== SlideshowState.PlaySlideshow) {
-        return;
-      }
-
-      if (hasNext) {
-        $restartSlideshowProgress = true;
-      } else {
-        await handleStopSlideshow();
+      if ($slideshowState === SlideshowState.PlaySlideshow) {
+        if (hasNext) {
+          $restartSlideshowProgress = true;
+        } else {
+          await handleStopSlideshow();
+        }
      }
    }, $t('error_while_navigating'));
  };
@@ -333,6 +262,15 @@
    isShowEditor = !isShowEditor;
  };

+  const handleRunJob = async (name: AssetJobName) => {
+    try {
+      await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
+      toastManager.success($getAssetJobMessage(name));
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_submit_job'));
+    }
+  };
+
  /**
   * Slide show mode
   */
@@ -381,7 +319,7 @@
  const handleAction = async (action: Action) => {
    switch (action.type) {
      case AssetAction.ADD_TO_ALBUM: {
-        eventManager.emit('AlbumAddAssets');
+        await handleGetAllAlbums();
        break;
      }
      case AssetAction.DELETE:
@@ -441,42 +379,21 @@

  const refresh = async () => {
    await refreshStack();
+    await handleGetAllAlbums();
    ocrManager.clear();
-    if (sharedLink) {
-      return;
+    if (!sharedLink) {
+      if (previewStackedAsset) {
+        await ocrManager.getAssetOcr(previewStackedAsset.id);
+      }
+      await ocrManager.getAssetOcr(asset.id);
    }
-
-    if (previewStackedAsset) {
-      await ocrManager.getAssetOcr(previewStackedAsset.id);
-    }
-    await ocrManager.getAssetOcr(asset.id);
  };
  $effect(() => {
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    asset;
    untrack(() => handlePromiseError(refresh()));
-  });
-
-  let lastCursor = $state<AssetCursor>();
-
-  $effect(() => {
-    if (cursor.current.id === lastCursor?.current.id) {
-      return;
-    }
-    if (lastCursor) {
-      // After navigation completes, reconcile preloads with full state information
-      updatePreloadsAfterNavigation(lastCursor, cursor);
-    }
-    if (!lastCursor && cursor) {
-      // "first time" load, start preloads
-      if (cursor.nextAsset) {
-        nextPreloader = startPreloader(cursor.nextAsset, 'next');
-      }
-      if (cursor.previousAsset) {
-        previousPreloader = startPreloader(cursor.previousAsset, 'previous');
-      }
-    }
-    lastCursor = cursor;
+    preloadManager.preload(cursor.nextAsset);
+    preloadManager.preload(cursor.previousAsset);
  });

  const onAssetReplace = async ({ oldAssetId, newAssetId }: { oldAssetId: string; newAssetId: string }) => {
@@ -556,6 +473,7 @@
        onAction={handleAction}
        {onUndoDelete}
        onEdit={showEditor}
+        onRunJob={handleRunJob}
        onPlaySlideshow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
        onClose={onClose ? () => onClose(asset) : undefined}
        {playOriginalVideo}
@@ -590,17 +508,19 @@
        bind:zoomToggle
        bind:copyImage
        cursor={{ ...cursor, current: previewStackedAsset! }}
+        onPreviousAsset={() => navigateAsset('previous')}
+        onNextAsset={() => navigateAsset('next')}
+        haveFadeTransition={false}
        {sharedLink}
-        onSwipe={(direction) => navigateAsset(direction === 'left' ? 'previous' : 'next')}
      />
    {:else if viewerKind === 'StackVideoViewer'}
      <VideoViewer
-        cursor={{ ...cursor, current: previewStackedAsset! }}
        assetId={previewStackedAsset!.id}
        cacheKey={previewStackedAsset!.thumbhash}
        projectionType={previewStackedAsset!.exifInfo?.projectionType}
        loopVideo={true}
-        onSwipe={(direction) => navigateAsset(direction === 'left' ? 'next' : 'previous')}
+        onPreviousAsset={() => navigateAsset('previous')}
+        onNextAsset={() => navigateAsset('next')}
        onClose={closeViewer}
        onVideoEnded={() => navigateAsset()}
        onVideoStarted={handleVideoStarted}
@@ -608,13 +528,12 @@
      />
    {:else if viewerKind === 'LiveVideoViewer'}
      <VideoViewer
-        {cursor}
        assetId={asset.livePhotoVideoId!}
-        {sharedLink}
        cacheKey={asset.thumbhash}
        projectionType={asset.exifInfo?.projectionType}
        loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
-        onSwipe={(direction) => navigateAsset(direction === 'left' ? 'next' : 'previous')}
+        onPreviousAsset={() => navigateAsset('previous')}
+        onNextAsset={() => navigateAsset('next')}
        onVideoEnded={() => (assetViewerManager.isPlayingMotionPhoto = false)}
        {playOriginalVideo}
      />
@@ -627,18 +546,19 @@
        bind:zoomToggle
        bind:copyImage
        {cursor}
+        onPreviousAsset={() => navigateAsset('previous')}
+        onNextAsset={() => navigateAsset('next')}
        {sharedLink}
-        onSwipe={(direction) => navigateAsset(direction === 'left' ? 'next' : 'previous')}
+        haveFadeTransition={$slideshowState !== SlideshowState.None && $slideshowTransition}
      />
    {:else if viewerKind === 'VideoViewer'}
      <VideoViewer
-        {cursor}
        assetId={asset.id}
-        {sharedLink}
        cacheKey={asset.thumbhash}
        projectionType={asset.exifInfo?.projectionType}
        loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
-        onSwipe={(direction) => navigateAsset(direction === 'left' ? 'next' : 'previous')}
+        onPreviousAsset={() => navigateAsset('previous')}
+        onNextAsset={() => navigateAsset('next')}
        onClose={closeViewer}
        onVideoEnded={() => navigateAsset()}
        onVideoStarted={handleVideoStarted}
@@ -678,7 +598,7 @@
      class="row-start-1 row-span-4 w-90 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray bg-light"
      translate="yes"
    >
-      <DetailPanel {asset} currentAlbum={album} />
+      <DetailPanel {asset} currentAlbum={album} albums={appearsInAlbums} />
    </div>
  {/if}

--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -7,7 +7,6 @@
  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';
@@ -18,16 +17,9 @@
  import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
  import { delay, getDimensions } from '$lib/utils/asset-utils';
  import { getByteUnitString } from '$lib/utils/byte-units';
-  import { handleError } from '$lib/utils/handle-error';
  import { fromISODateTime, fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
  import { getParentPath } from '$lib/utils/tree-utils';
-  import {
-    AssetMediaSize,
-    getAllAlbums,
-    getAssetInfo,
-    type AlbumResponseDto,
-    type AssetResponseDto,
-  } from '@immich/sdk';
+  import { AssetMediaSize, getAssetInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
  import { Icon, IconButton, LoadingSpinner, modalManager, Text } from '@immich/ui';
  import {
    mdiCalendar,
@@ -42,7 +34,6 @@
    mdiPlus,
  } from '@mdi/js';
  import { DateTime } from 'luxon';
-  import { onDestroy, untrack } from 'svelte';
  import { t } from 'svelte-i18n';
  import { slide } from 'svelte/transition';
  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
@@ -52,10 +43,11 @@

  interface Props {
    asset: AssetResponseDto;
+    albums?: AlbumResponseDto[];
    currentAlbum?: AlbumResponseDto | null;
  }

-  let { asset, currentAlbum = null }: Props = $props();
+  let { asset, albums = [], currentAlbum = null }: Props = $props();

  let showAssetPath = $state(false);
  let showEditFaces = $state(false);
@@ -82,43 +74,14 @@
  let previousId: string | undefined = $state();
  let previousRoute = $derived(currentAlbum?.id ? Route.viewAlbum(currentAlbum) : Route.photos());

-  let albums = $state<AlbumResponseDto[]>([]);
-
-  const refreshAlbums = async () => {
-    if (authManager.isSharedLink) {
-      return;
-    }
-
-    try {
-      albums = await getAllAlbums({ assetId: asset.id });
-    } catch (error) {
-      handleError(error, 'Error getting asset album membership');
-    }
-  };
-
-  eventManager.on('AlbumAddAssets', () => void refreshAlbums());
-  onDestroy(() => {
-    eventManager.off('AlbumAddAssets', () => void refreshAlbums());
-  });
-
-  $effect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    asset;
-    untrack(() => void refreshAlbums());
-  });
-
  $effect(() => {
    if (!previousId) {
      previousId = asset.id;
-      return;
    }
-
-    if (asset.id === previousId) {
-      return;
+    if (asset.id !== previousId) {
+      showEditFaces = false;
+      previousId = asset.id;
    }
-
-    showEditFaces = false;
-    previousId = asset.id;
  });

  const getMegapixel = (width: number, height: number): number | undefined => {
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -1,43 +1,51 @@
 <script lang="ts">
  import { shortcuts } from '$lib/actions/shortcut';
-  import AdaptiveImage from '$lib/components/asset-viewer/adaptive-image.svelte';
+  import { zoomImageAction } from '$lib/actions/zoom-image';
  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
  import OcrBoundingBox from '$lib/components/asset-viewer/ocr-bounding-box.svelte';
-  import SwipeFeedback from '$lib/components/asset-viewer/swipe-feedback.svelte';
+  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import { assetViewerFadeDuration } from '$lib/constants';
  import { castManager } from '$lib/managers/cast-manager.svelte';
+  import { preloadManager } from '$lib/managers/PreloadManager.svelte';
  import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
  import { ocrManager } from '$lib/stores/ocr.svelte';
  import { boundingBoxesArray } from '$lib/stores/people.store';
-  import { SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
+  import { SlideshowLook, SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
  import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { handlePromiseError } from '$lib/utils';
+  import { getAssetUrl, targetImageSize as getTargetImageSize, handlePromiseError } from '$lib/utils';
  import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
  import { handleError } from '$lib/utils/handle-error';
  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 { getAltText } from '$lib/utils/thumbnail-util';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { AssetMediaSize, type SharedLinkResponseDto } from '@immich/sdk';
+  import { LoadingSpinner, toastManager } from '@immich/ui';
  import { onDestroy, untrack } from 'svelte';
+  import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
  import type { AssetCursor } from './asset-viewer.svelte';

  interface Props {
    cursor: AssetCursor;
-    element?: HTMLDivElement;
-    sharedLink?: SharedLinkResponseDto;
-    onReady?: () => void;
-    onSwipe?: (direction: 'left' | 'right') => void;
+    element?: HTMLDivElement | undefined;
+    haveFadeTransition?: boolean;
+    sharedLink?: SharedLinkResponseDto | undefined;
+    onPreviousAsset?: (() => void) | null;
+    onNextAsset?: (() => void) | null;
    copyImage?: () => Promise<void>;
-    zoomToggle?: () => void;
+    zoomToggle?: (() => void) | null;
  }

  let {
    cursor,
    element = $bindable(),
-    sharedLink,
-    onReady,
-    onSwipe,
+    haveFadeTransition = true,
+    sharedLink = undefined,
+    onPreviousAsset = null,
+    onNextAsset = null,
    copyImage = $bindable(),
    zoomToggle = $bindable(),
  }: Props = $props();
@@ -45,6 +53,20 @@
  const { slideshowState, slideshowLook } = slideshowStore;
  const asset = $derived(cursor.current);

+  let imageLoaded: boolean = $state(false);
+  let originalImageLoaded: boolean = $state(false);
+  let imageError: boolean = $state(false);
+
+  let loader = $state<HTMLImageElement>();
+
+  photoZoomState.set({
+    currentRotation: 0,
+    currentZoom: 1,
+    enable: true,
+    currentPositionX: 0,
+    currentPositionY: 0,
+  });
+
  onDestroy(() => {
    $boundingBoxesArray = [];
  });
@@ -93,11 +115,29 @@
    handlePromiseError(copyImage());
  };

-  let currentPreviewUrl = $state<string>();
+  const onSwipe = (event: SwipeCustomEvent) => {
+    if ($photoZoomState.currentZoom > 1) {
+      return;
+    }
+
+    if (ocrManager.showOverlay) {
+      return;
+    }
+
+    if (onNextAsset && event.detail.direction === 'left') {
+      onNextAsset();
+    }
+
+    if (onPreviousAsset && event.detail.direction === 'right') {
+      onPreviousAsset();
+    }
+  };
+
+  const targetImageSize = $derived(getTargetImageSize(asset, originalImageLoaded || $photoZoomState.currentZoom > 1));

  $effect(() => {
-    if (currentPreviewUrl) {
-      void cast(currentPreviewUrl);
+    if (imageLoaderUrl) {
+      void cast(imageLoaderUrl);
    }
  });

@@ -115,20 +155,35 @@
    }
  };

+  const onload = () => {
+    imageLoaded = true;
+    originalImageLoaded = targetImageSize === AssetMediaSize.Fullsize || targetImageSize === 'original';
+  };
+
+  const onerror = () => {
+    imageError = imageLoaded = true;
+  };
+
+  onDestroy(() => preloadManager.cancelPreloadUrl(imageLoaderUrl));
+
+  let imageLoaderUrl = $derived(
+    getAssetUrl({ asset, sharedLink, forceOriginal: originalImageLoaded || $photoZoomState.currentZoom > 1 }),
+  );
+
  let containerWidth = $state(0);
  let containerHeight = $state(0);
-  const container = $derived({
-    width: containerWidth,
-    height: containerHeight,
-  });
-  let imgContainerElement = $state<HTMLElement | undefined>();
-  let swipeFeedbackReset = $state<(() => void) | undefined>();
+
+  let lastUrl: string | undefined;

  $effect(() => {
-    // Reset swipe feedback when asset changes
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    asset.id;
-    untrack(() => swipeFeedbackReset?.());
+    if (lastUrl && lastUrl !== imageLoaderUrl) {
+      untrack(() => {
+        imageLoaded = false;
+        originalImageLoaded = false;
+        imageError = false;
+      });
+    }
+    lastUrl = imageLoaderUrl;
  });
 </script>

@@ -138,32 +193,49 @@
    { shortcut: { key: 's' }, onShortcut: onPlaySlideshow, preventDefault: true },
    { shortcut: { key: 'c', ctrl: true }, onShortcut: onCopyShortcut, preventDefault: false },
    { shortcut: { key: 'c', meta: true }, onShortcut: onCopyShortcut, preventDefault: false },
+    { shortcut: { key: 'z' }, onShortcut: zoomToggle, preventDefault: false },
  ]}
 />
-
-<SwipeFeedback
-  bind:element
+{#if imageError}
+  <div id="broken-asset" class="h-full w-full">
+    <BrokenAsset class="text-xl h-full w-full" />
+  </div>
+{/if}
+<img bind:this={loader} style="display:none" src={imageLoaderUrl} alt="" aria-hidden="true" {onload} {onerror} />
+<div
+  bind:this={element}
  class="relative h-full w-full select-none"
  bind:clientWidth={containerWidth}
  bind:clientHeight={containerHeight}
-  disabled={isOcrActive || $photoZoomState.currentZoom > 1}
-  {onSwipe}
-  bind:reset={swipeFeedbackReset}
 >
-  <AdaptiveImage
-    {asset}
-    {sharedLink}
-    {container}
-    zoomDisabled={isOcrActive}
-    imageClass={$slideshowState === SlideshowState.None ? 'object-contain' : slideshowLookCssMapping[$slideshowLook]}
-    slideshowState={$slideshowState}
-    slideshowLook={$slideshowLook}
-    onImageReady={() => onReady?.()}
-    onError={() => onReady?.()}
-    bind:imgElement={$photoViewerImgElement}
-    bind:imgContainerElement
-  >
-    {#snippet overlays()}
+  {#if !imageLoaded}
+    <div id="spinner" class="flex h-full items-center justify-center">
+      <LoadingSpinner />
+    </div>
+  {:else if !imageError}
+    <div
+      use:zoomImageAction={{ disabled: isOcrActive }}
+      {...useSwipe(onSwipe)}
+      class="h-full w-full"
+      transition:fade={{ duration: haveFadeTransition ? assetViewerFadeDuration : 0 }}
+    >
+      {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
+        <img
+          src={imageLoaderUrl}
+          alt=""
+          class="-z-1 absolute top-0 start-0 object-cover h-full w-full blur-lg"
+          draggable="false"
+        />
+      {/if}
+      <img
+        bind:this={$photoViewerImgElement}
+        src={imageLoaderUrl}
+        alt={$getAltText(toTimelineAsset(asset))}
+        class="h-full w-full {$slideshowState === SlideshowState.None
+          ? 'object-contain'
+          : slideshowLookCssMapping[$slideshowLook]}"
+        draggable="false"
+      />
      <!-- eslint-disable-next-line svelte/require-each-key -->
      {#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewerImgElement) as boundingbox}
        <div
@@ -175,38 +247,23 @@
      {#each ocrBoxes as ocrBox (ocrBox.id)}
        <OcrBoundingBox {ocrBox} />
      {/each}
-    {/snippet}
-  </AdaptiveImage>
+    </div>

-  {#if isFaceEditMode.value}
-    <FaceEditor htmlElement={$photoViewerImgElement} {containerWidth} {containerHeight} assetId={asset.id} />
+    {#if isFaceEditMode.value}
+      <FaceEditor htmlElement={$photoViewerImgElement} {containerWidth} {containerHeight} assetId={asset.id} />
+    {/if}
  {/if}
+</div>

-  {#snippet leftPreview()}
-    {#if cursor.previousAsset}
-      <AdaptiveImage
-        asset={cursor.previousAsset}
-        {sharedLink}
-        {container}
-        zoomDisabled={true}
-        imageClass="object-contain"
-        slideshowState={$slideshowState}
-        slideshowLook={$slideshowLook}
-      />
-    {/if}
-  {/snippet}
-
-  {#snippet rightPreview()}
-    {#if cursor.nextAsset}
-      <AdaptiveImage
-        asset={cursor.nextAsset}
-        {sharedLink}
-        {container}
-        zoomDisabled={true}
-        imageClass="object-contain"
-        slideshowState={$slideshowState}
-        slideshowLook={$slideshowLook}
-      />
-    {/if}
-  {/snippet}
-</SwipeFeedback>
+<style>
+  @keyframes delayedVisibility {
+    to {
+      visibility: visible;
+    }
+  }
+  #broken-asset,
+  #spinner {
+    visibility: hidden;
+    animation: 0s linear 0.4s forwards delayedVisibility;
+  }
+</style>
--- a/web/src/lib/components/asset-viewer/swipe-feedback.svelte
+++ b/web/src/lib/components/asset-viewer/swipe-feedback.svelte
@@ -1,370 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { onDestroy } from 'svelte';
-
-  interface Props {
-    disabled?: boolean;
-    onSwipeEnd?: (offsetX: number) => void;
-    onSwipeMove?: (offsetX: number) => void;
-    onSwipe?: (direction: 'left' | 'right') => void;
-    swipeThreshold?: number;
-    class?: string;
-    transitionName?: string;
-    element?: HTMLDivElement;
-    clientWidth?: number;
-    clientHeight?: number;
-    reset?: () => void;
-    children: Snippet;
-    leftPreview?: Snippet;
-    rightPreview?: Snippet;
-  }
-
-  let {
-    disabled = false,
-    onSwipeEnd,
-    onSwipeMove,
-    onSwipe,
-    swipeThreshold = 45,
-    class: className = '',
-    transitionName,
-    element = $bindable(),
-    clientWidth = $bindable(),
-    clientHeight = $bindable(),
-    reset = $bindable(),
-    children,
-    leftPreview,
-    rightPreview,
-  }: Props = $props();
-
-  interface SwipeAnimations {
-    currentImageAnimation: Animation;
-    previewAnimation: Animation | null;
-    abortController: AbortController;
-  }
-
-  const ANIMATION_DURATION_MS = 300;
-  // Tolerance to avoid edge cases where animation is nearly complete but not exactly at end
-  const ANIMATION_COMPLETION_TOLERANCE_MS = 5;
-  // Minimum velocity to trigger swipe (tuned for natural flick gesture)
-  const MIN_SWIPE_VELOCITY = 0.11; // pixels per millisecond
-  // Require 25% drag progress if velocity is too low (prevents accidental swipes)
-  const MIN_PROGRESS_THRESHOLD = 0.25;
-  const ENABLE_SCALE_ANIMATION = false;
-
-  let contentElement: HTMLElement | undefined = $state();
-  let leftPreviewContainer: HTMLDivElement | undefined = $state();
-  let rightPreviewContainer: HTMLDivElement | undefined = $state();
-
-  let isDragging = $state(false);
-  let startX = $state(0);
-  let currentOffsetX = $state(0);
-  let dragStartTime: number | null = $state(null);
-
-  let leftAnimations: SwipeAnimations | null = $state(null);
-  let rightAnimations: SwipeAnimations | null = $state(null);
-  let isSwipeInProgress = $state(false);
-
-  const cursorStyle = $derived(disabled ? '' : isSwipeInProgress ? 'wait' : isDragging ? 'grabbing' : 'grab');
-
-  const isValidPointerEvent = (event: PointerEvent) =>
-    event.isPrimary && (event.pointerType !== 'mouse' || event.button === 0);
-
-  const createSwipeAnimations = (direction: 'left' | 'right'): SwipeAnimations | null => {
-    if (!contentElement) {
-      return null;
-    }
-
-    const createAnimationKeyframes = (direction: 'left' | 'right', isPreview: boolean) => {
-      const scale = (s: number) => (ENABLE_SCALE_ANIMATION ? ` scale(${s})` : '');
-      const sign = direction === 'left' ? -1 : 1;
-
-      if (isPreview) {
-        return [
-          { transform: `translateX(${sign * -100}vw)${scale(0)}`, opacity: '0', offset: 0 },
-          { transform: `translateX(${sign * -80}vw)${scale(0.2)}`, opacity: '0', offset: 0.2 },
-          { transform: `translateX(${sign * -50}vw)${scale(0.5)}`, opacity: '0.5', offset: 0.5 },
-          { transform: `translateX(${sign * -20}vw)${scale(0.8)}`, opacity: '1', offset: 0.8 },
-          { transform: `translateX(0)${scale(1)}`, opacity: '1', offset: 1 },
-        ];
-      }
-
-      return [
-        { transform: `translateX(0)${scale(1)}`, opacity: '1', offset: 0 },
-        { transform: `translateX(${sign * 100}vw)${scale(0)}`, opacity: '0', offset: 1 },
-      ];
-    };
-
-    contentElement.style.transformOrigin = 'center';
-
-    const currentImageAnimation = contentElement.animate(createAnimationKeyframes(direction, false), {
-      duration: ANIMATION_DURATION_MS,
-      easing: 'linear',
-      fill: 'both',
-    });
-
-    // Preview slides in from opposite side of swipe direction
-    const previewContainer = direction === 'left' ? rightPreviewContainer : leftPreviewContainer;
-    let previewAnimation: Animation | null = null;
-
-    if (previewContainer) {
-      previewContainer.style.transformOrigin = 'center';
-      previewAnimation = previewContainer.animate(createAnimationKeyframes(direction, true), {
-        duration: ANIMATION_DURATION_MS,
-        easing: 'linear',
-        fill: 'both',
-      });
-    }
-
-    currentImageAnimation.pause();
-    previewAnimation?.pause();
-
-    const abortController = new AbortController();
-
-    return { currentImageAnimation, previewAnimation, abortController };
-  };
-
-  const setAnimationTime = (animations: SwipeAnimations, time: number) => {
-    animations.currentImageAnimation.currentTime = time;
-    if (animations.previewAnimation) {
-      animations.previewAnimation.currentTime = time;
-    }
-  };
-
-  const playAnimation = (animations: SwipeAnimations, playbackRate: number) => {
-    animations.currentImageAnimation.playbackRate = playbackRate;
-    if (animations.previewAnimation) {
-      animations.previewAnimation.playbackRate = playbackRate;
-    }
-    animations.currentImageAnimation.play();
-    animations.previewAnimation?.play();
-  };
-
-  const cancelAnimations = (animations: SwipeAnimations | null) => {
-    if (!animations) {
-      return;
-    }
-    animations.abortController.abort();
-    animations.currentImageAnimation.cancel();
-    animations.previewAnimation?.cancel();
-  };
-
-  const handlePointerDown = (event: PointerEvent) => {
-    if (disabled || !contentElement || !isValidPointerEvent(event) || !element || isSwipeInProgress) {
-      return;
-    }
-
-    startDrag(event);
-    event.preventDefault();
-  };
-
-  const startDrag = (event: PointerEvent) => {
-    if (!element) {
-      return;
-    }
-
-    isDragging = true;
-    startX = event.clientX;
-    currentOffsetX = 0;
-
-    element.setPointerCapture(event.pointerId);
-    dragStartTime = Date.now();
-  };
-
-  const handlePointerMove = (event: PointerEvent) => {
-    if (disabled || !contentElement || !isDragging || isSwipeInProgress) {
-      return;
-    }
-
-    currentOffsetX = event.clientX - startX;
-
-    const direction = currentOffsetX < 0 ? 'left' : 'right';
-    const animationTime = Math.min(Math.abs(currentOffsetX) / window.innerWidth, 1) * ANIMATION_DURATION_MS;
-
-    if (direction === 'left') {
-      if (!leftAnimations) {
-        leftAnimations = createSwipeAnimations('left');
-      }
-      if (leftAnimations) {
-        setAnimationTime(leftAnimations, animationTime);
-      }
-      if (rightAnimations) {
-        cancelAnimations(rightAnimations);
-        rightAnimations = null;
-      }
-    } else {
-      if (!rightAnimations) {
-        rightAnimations = createSwipeAnimations('right');
-      }
-      if (rightAnimations) {
-        setAnimationTime(rightAnimations, animationTime);
-      }
-      if (leftAnimations) {
-        cancelAnimations(leftAnimations);
-        leftAnimations = null;
-      }
-    }
-    onSwipeMove?.(currentOffsetX);
-    event.preventDefault(); // Prevent scrolling during drag
-  };
-
-  const handlePointerUp = (event: PointerEvent) => {
-    if (!isDragging || !isValidPointerEvent(event) || !contentElement || !element) {
-      return;
-    }
-
-    isDragging = false;
-    if (element.hasPointerCapture(event.pointerId)) {
-      element.releasePointerCapture(event.pointerId);
-    }
-
-    const dragDuration = dragStartTime ? Date.now() - dragStartTime : 0;
-    const velocity = dragDuration > 0 ? Math.abs(currentOffsetX) / dragDuration : 0;
-    const progress = Math.min(Math.abs(currentOffsetX) / window.innerWidth, 1);
-
-    if (
-      Math.abs(currentOffsetX) < swipeThreshold ||
-      (velocity < MIN_SWIPE_VELOCITY && progress <= MIN_PROGRESS_THRESHOLD)
-    ) {
-      resetPosition();
-      return;
-    }
-
-    isSwipeInProgress = true;
-
-    onSwipeEnd?.(currentOffsetX);
-    completeTransition(currentOffsetX > 0 ? 'right' : 'left');
-  };
-
-  const resetPosition = () => {
-    if (!contentElement) {
-      return;
-    }
-
-    const direction = currentOffsetX < 0 ? 'left' : 'right';
-    const animations = direction === 'left' ? leftAnimations : rightAnimations;
-
-    if (!animations) {
-      currentOffsetX = 0;
-      return;
-    }
-
-    playAnimation(animations, -1);
-
-    const handleFinish = () => {
-      cancelAnimations(animations);
-      if (direction === 'left') {
-        leftAnimations = null;
-      } else {
-        rightAnimations = null;
-      }
-    };
-    animations.currentImageAnimation.addEventListener('finish', handleFinish, {
-      signal: animations.abortController.signal,
-    });
-
-    currentOffsetX = 0;
-  };
-
-  const completeTransition = (direction: 'left' | 'right') => {
-    if (!contentElement) {
-      return;
-    }
-
-    const animations = direction === 'left' ? leftAnimations : rightAnimations;
-    if (!animations) {
-      return;
-    }
-
-    const currentTime = Number(animations.currentImageAnimation.currentTime) || 0;
-
-    if (currentTime >= ANIMATION_DURATION_MS - ANIMATION_COMPLETION_TOLERANCE_MS) {
-      onSwipe?.(direction);
-      return;
-    }
-
-    playAnimation(animations, 1);
-
-    const handleFinish = () => {
-      if (contentElement) {
-        onSwipe?.(direction);
-      }
-    };
-    animations.currentImageAnimation.addEventListener('finish', handleFinish, {
-      signal: animations.abortController.signal,
-    });
-  };
-
-  const resetPreviewContainers = () => {
-    cancelAnimations(leftAnimations);
-    cancelAnimations(rightAnimations);
-    leftAnimations = null;
-    rightAnimations = null;
-
-    if (contentElement) {
-      contentElement.style.transform = '';
-      contentElement.style.transition = '';
-      contentElement.style.opacity = '';
-    }
-    currentOffsetX = 0;
-  };
-
-  const resetSwipeFeedback = () => {
-    resetPreviewContainers();
-    isSwipeInProgress = false;
-  };
-
-  reset = resetSwipeFeedback;
-
-  onDestroy(() => {
-    resetSwipeFeedback();
-    if (element) {
-      element.style.cursor = '';
-    }
-    if (contentElement) {
-      contentElement.style.cursor = '';
-    }
-  });
-</script>
-
-<!-- Listen on window to catch pointer release outside element (due to setPointerCapture) -->
-<svelte:window onpointerup={handlePointerUp} onpointercancel={handlePointerUp} />
-
-<div
-  bind:this={element}
-  bind:clientWidth
-  bind:clientHeight
-  class={className}
-  style:cursor={cursorStyle}
-  style:view-transition-name={transitionName}
-  onpointerdown={handlePointerDown}
-  onpointermove={handlePointerMove}
-  role="presentation"
->
-  {#if leftPreview}
-    <!-- Swiping right reveals left preview -->
-    <div
-      bind:this={leftPreviewContainer}
-      class="absolute inset-0"
-      style:pointer-events="none"
-      style:display={rightAnimations ? 'block' : 'none'}
-    >
-      {@render leftPreview()}
-    </div>
-  {/if}
-
-  {#if rightPreview}
-    <!-- Swiping left reveals right preview -->
-    <div
-      bind:this={rightPreviewContainer}
-      class="absolute inset-0"
-      style:pointer-events="none"
-      style:display={leftAnimations ? 'block' : 'none'}
-    >
-      {@render rightPreview()}
-    </div>
-  {/if}
-
-  <div bind:this={contentElement} class="h-full w-full" style:cursor={cursorStyle}>
-    {@render children()}
-  </div>
-</div>
--- a/web/src/lib/components/asset-viewer/video-native-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-  import AdaptiveImage from '$lib/components/asset-viewer/adaptive-image.svelte';
-  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
-  import SwipeFeedback from '$lib/components/asset-viewer/swipe-feedback.svelte';
  import VideoRemoteViewer from '$lib/components/asset-viewer/video-remote-viewer.svelte';
  import { assetViewerFadeDuration } from '$lib/constants';
  import { castManager } from '$lib/managers/cast-manager.svelte';
@@ -13,87 +10,54 @@
    videoViewerMuted,
    videoViewerVolume,
  } from '$lib/stores/preferences.store';
-  import { slideshowStore } from '$lib/stores/slideshow.store';
  import { getAssetOriginalUrl, getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
-  import { getDimensions } from '$lib/utils/asset-utils';
-  import { scaleToFit } from '$lib/utils/layout-utils';
-  import { AssetMediaSize, type SharedLinkResponseDto } from '@immich/sdk';
+  import { AssetMediaSize } from '@immich/sdk';
  import { LoadingSpinner } from '@immich/ui';
-  import { onDestroy, onMount, untrack } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
+  import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
  import { fade } from 'svelte/transition';

  interface Props {
-    transitionName?: string;
-    cursor: AssetCursor;
    assetId: string;
-    sharedLink?: SharedLinkResponseDto;
    loopVideo: boolean;
    cacheKey: string | null;
    playOriginalVideo: boolean;
-    onSwipe?: (direction: 'left' | 'right') => void;
+    onPreviousAsset?: () => void;
+    onNextAsset?: () => void;
    onVideoEnded?: () => void;
    onVideoStarted?: () => void;
    onClose?: () => void;
  }

  let {
-    transitionName,
-    cursor,
    assetId,
-    sharedLink,
    loopVideo,
    cacheKey,
    playOriginalVideo,
-    onSwipe,
+    onPreviousAsset = () => {},
+    onNextAsset = () => {},
    onVideoEnded = () => {},
    onVideoStarted = () => {},
    onClose = () => {},
  }: Props = $props();

-  const asset = $derived(cursor.current);
-  const previousAsset = $derived(cursor.previousAsset);
-  const nextAsset = $derived(cursor.nextAsset);
-
-  const { slideshowState, slideshowLook } = slideshowStore;
-
  let videoPlayer: HTMLVideoElement | undefined = $state();
  let isLoading = $state(true);
-  let swipeFeedbackReset: (() => void) | undefined = $state();
  let assetFileUrl = $derived(
    playOriginalVideo ? getAssetOriginalUrl({ id: assetId, cacheKey }) : getAssetPlaybackUrl({ id: assetId, cacheKey }),
  );
-  let previousAssetFileUrl = $state<string | undefined>();
  let isScrubbing = $state(false);
  let showVideo = $state(false);

-  let containerWidth = $state(document.documentElement.clientWidth);
-  let containerHeight = $state(document.documentElement.clientHeight);
-
-  const exifDimensions = $derived(
-    asset?.exifInfo?.exifImageHeight && asset?.exifInfo.exifImageHeight
-      ? (getDimensions(asset.exifInfo) as { width: number; height: number })
-      : null,
-  );
-  const container = $derived({
-    width: containerWidth,
-    height: containerHeight,
-  });
-  let dimensions = $derived(exifDimensions ?? { width: 1, height: 1 });
-  const scaledDimensions = $derived(scaleToFit(dimensions, container));
-
  onMount(() => {
    // Show video after mount to ensure fading in.
    showVideo = true;
  });

  $effect(() => {
-    if (assetFileUrl && assetFileUrl !== previousAssetFileUrl) {
-      previousAssetFileUrl = assetFileUrl;
-      untrack(() => {
-        isLoading = true;
-        videoPlayer?.load();
-        swipeFeedbackReset?.();
-      });
+    // reactive on `assetFileUrl` changes
+    if (assetFileUrl) {
+      videoPlayer?.load();
    }
  });

@@ -103,13 +67,6 @@
    }
  });

-  const handleLoadedMetadata = () => {
-    dimensions = {
-      width: videoPlayer?.videoWidth ?? 1,
-      height: videoPlayer?.videoHeight ?? 1,
-    };
-  };
-
  const handleCanPlay = async (video: HTMLVideoElement) => {
    try {
      if (!video.paused && !isScrubbing) {
@@ -141,120 +98,76 @@
    }
  };

+  const onSwipe = (event: SwipeCustomEvent) => {
+    if (event.detail.direction === 'left') {
+      onNextAsset();
+    }
+    if (event.detail.direction === 'right') {
+      onPreviousAsset();
+    }
+  };
+
+  let containerWidth = $state(0);
+  let containerHeight = $state(0);
+
  $effect(() => {
    if (isFaceEditMode.value) {
      videoPlayer?.pause();
    }
  });
-
-  const calculateSize = () => {
-    const { width, height } = scaledDimensions;
-
-    const size = {
-      width: width + 'px',
-      height: height + 'px',
-    };
-
-    return size;
-  };
-
-  const box = $derived(calculateSize());
 </script>

-<SwipeFeedback
-  class="flex select-none h-full w-full place-content-center place-items-center"
-  bind:clientWidth={containerWidth}
-  bind:clientHeight={containerHeight}
-  bind:reset={swipeFeedbackReset}
-  {onSwipe}
->
-  {#if showVideo}
-    <div
-      in:fade={{ duration: assetViewerFadeDuration }}
-      class="flex h-full w-full place-content-center place-items-center"
-    >
-      {#if castManager.isCasting}
-        <div class="place-content-center h-full place-items-center">
-          <VideoRemoteViewer
-            poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
-            {onVideoStarted}
-            {onVideoEnded}
-            {assetFileUrl}
-          />
-        </div>
-      {:else}
-        <div class="relative">
-          <video
-            style:view-transition-name={transitionName}
-            style:height={box.height}
-            style:width={box.width}
-            bind:this={videoPlayer}
-            loop={$loopVideoPreference && loopVideo}
-            autoplay={$autoPlayVideo}
-            playsinline
-            controls
-            disablePictureInPicture
-            onloadedmetadata={() => handleLoadedMetadata()}
-            oncanplay={(e) => handleCanPlay(e.currentTarget)}
-            onended={onVideoEnded}
-            onvolumechange={(e) => ($videoViewerMuted = e.currentTarget.muted)}
-            onseeking={() => (isScrubbing = true)}
-            onseeked={() => (isScrubbing = false)}
-            onplaying={(e) => {
-              e.currentTarget.focus();
-            }}
-            onclose={() => onClose()}
-            muted={$videoViewerMuted}
-            bind:volume={$videoViewerVolume}
-            poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
-            src={assetFileUrl}
-          >
-          </video>
+{#if showVideo}
+  <div
+    transition:fade={{ duration: assetViewerFadeDuration }}
+    class="flex h-full select-none place-content-center place-items-center"
+    bind:clientWidth={containerWidth}
+    bind:clientHeight={containerHeight}
+  >
+    {#if castManager.isCasting}
+      <div class="place-content-center h-full place-items-center">
+        <VideoRemoteViewer
+          poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
+          {onVideoStarted}
+          {onVideoEnded}
+          {assetFileUrl}
+        />
+      </div>
+    {:else}
+      <video
+        bind:this={videoPlayer}
+        loop={$loopVideoPreference && loopVideo}
+        autoplay={$autoPlayVideo}
+        playsinline
+        controls
+        disablePictureInPicture
+        class="h-full object-contain"
+        {...useSwipe(onSwipe)}
+        oncanplay={(e) => handleCanPlay(e.currentTarget)}
+        onended={onVideoEnded}
+        onvolumechange={(e) => ($videoViewerMuted = e.currentTarget.muted)}
+        onseeking={() => (isScrubbing = true)}
+        onseeked={() => (isScrubbing = false)}
+        onplaying={(e) => {
+          e.currentTarget.focus();
+        }}
+        onclose={() => onClose()}
+        muted={$videoViewerMuted}
+        bind:volume={$videoViewerVolume}
+        poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
+        src={assetFileUrl}
+      >
+      </video>

-          {#if isLoading}
-            <div class="absolute inset-0 flex place-content-center place-items-center">
-              <LoadingSpinner />
-            </div>
-          {/if}
-
-          {#if isFaceEditMode.value}
-            <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
-          {/if}
+      {#if isLoading}
+        <div class="absolute flex place-content-center place-items-center">
+          <LoadingSpinner />
        </div>
      {/if}
-    </div>
-  {/if}
-  {#snippet leftPreview()}
-    {#if previousAsset}
-      <AdaptiveImage
-        asset={previousAsset}
-        {sharedLink}
-        container={{ width: containerWidth, height: containerHeight }}
-        zoomDisabled={true}
-        imageClass="object-contain"
-        slideshowState={$slideshowState}
-        slideshowLook={$slideshowLook}
-      />
-    {/if}
-  {/snippet}

-  {#snippet rightPreview()}
-    {#if nextAsset}
-      <AdaptiveImage
-        asset={nextAsset}
-        {sharedLink}
-        container={{ width: containerWidth, height: containerHeight }}
-        zoomDisabled={true}
-        imageClass="object-contain"
-        slideshowState={$slideshowState}
-        slideshowLook={$slideshowLook}
-      />
+      {#if isFaceEditMode.value}
+        <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
+      {/if}
    {/if}
-  {/snippet}
-</SwipeFeedback>
-
-<style>
-  video:focus {
-    outline: none;
-  }
-</style>
+  </div>
+{/if}
--- a/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
@@ -1,34 +1,30 @@
 <script lang="ts">
-  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
  import VideoNativeViewer from '$lib/components/asset-viewer/video-native-viewer.svelte';
  import VideoPanoramaViewer from '$lib/components/asset-viewer/video-panorama-viewer.svelte';
  import { ProjectionType } from '$lib/constants';
-  import type { SharedLinkResponseDto } from '@immich/sdk';

  interface Props {
-    cursor: AssetCursor;
    assetId: string;
-    sharedLink?: SharedLinkResponseDto;
    projectionType: string | null | undefined;
    cacheKey: string | null;
    loopVideo: boolean;
    playOriginalVideo: boolean;
    onClose?: () => void;
-    onSwipe?: (direction: 'left' | 'right') => void;
+    onPreviousAsset?: () => void;
+    onNextAsset?: () => void;
    onVideoEnded?: () => void;
    onVideoStarted?: () => void;
  }

  let {
-    cursor,
    assetId,
-    sharedLink,
    projectionType,
    cacheKey,
    loopVideo,
    playOriginalVideo,
-    onSwipe,
+    onPreviousAsset,
    onClose,
+    onNextAsset,
    onVideoEnded,
    onVideoStarted,
  }: Props = $props();
@@ -40,11 +36,10 @@
  <VideoNativeViewer
    {loopVideo}
    {cacheKey}
-    {cursor}
    {assetId}
-    {sharedLink}
    {playOriginalVideo}
-    {onSwipe}
+    {onPreviousAsset}
+    {onNextAsset}
    {onVideoEnded}
    {onVideoStarted}
    {onClose}
--- a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { imageLoader } from '$lib/actions/image-loader.svelte';
  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import { preloadManager } from '$lib/managers/PreloadManager.svelte';
  import { Icon } from '@immich/ui';
  import { mdiEyeOffOutline } from '@mdi/js';
+  import type { ActionReturn } from 'svelte/action';
  import type { ClassValue } from 'svelte/elements';

  interface Props {
@@ -53,6 +54,16 @@
    onComplete?.(true);
  };

+  function mount(elem: HTMLImageElement): ActionReturn {
+    if (elem.complete) {
+      loaded = true;
+      onComplete?.(false);
+    }
+    return {
+      destroy: () => preloadManager.cancelPreloadUrl(url),
+    };
+  }
+
  let optionalClasses = $derived(
    [
      curve && 'rounded-xl',
@@ -65,28 +76,26 @@
      .filter(Boolean)
      .join(' '),
  );
-
-  let style = $derived(
-    `width: ${widthStyle}; height: ${heightStyle ?? ''}; filter: ${hidden ? 'grayscale(50%)' : 'none'}; opacity: ${hidden ? '0.5' : '1'};`,
-  );
 </script>

 {#if errored}
  <BrokenAsset class={optionalClasses} width={widthStyle} height={heightStyle} />
 {:else}
-  <div
-    use:imageLoader={{
-      src: url,
-      onLoad: setLoaded,
-      onError: setErrored,
-      imgClass: ['object-cover', optionalClasses, imageClass],
-      style,
-      alt: loaded || errored ? altText : '',
-      draggable: false,
-      title,
-      loading: preload ? 'eager' : 'lazy',
-    }}
-  ></div>
+  <img
+    use:mount
+    onload={setLoaded}
+    onerror={setErrored}
+    style:width={widthStyle}
+    style:height={heightStyle}
+    style:filter={hidden ? 'grayscale(50%)' : 'none'}
+    style:opacity={hidden ? '0.5' : '1'}
+    src={url}
+    alt={loaded || errored ? altText : ''}
+    {title}
+    class={['object-cover', optionalClasses, imageClass]}
+    draggable="false"
+    loading={preload ? 'eager' : 'lazy'}
+  />
 {/if}

 {#if hidden}
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -1,18 +1,10 @@
 <script lang="ts">
-  import { thumbhash } from '$lib/actions/thumbhash';
  import { ProjectionType } from '$lib/constants';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
  import { locale, playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
  import { getAssetOriginalUrl, getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
  import { timeToSeconds } from '$lib/utils/date-time';
-  import { moveFocus } from '$lib/utils/focus-util';
-  import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { TUNABLES } from '$lib/utils/tunables';
  import { AssetMediaSize, AssetVisibility, type UserResponseDto } from '@immich/sdk';
-  import { Icon } from '@immich/ui';
  import {
    mdiArchiveArrowDownOutline,
    mdiCameraBurst,
@@ -23,11 +15,21 @@
    mdiMotionPlayOutline,
    mdiRotate360,
  } from '@mdi/js';
+
+  import { thumbhash } from '$lib/actions/thumbhash';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { moveFocus } from '$lib/utils/focus-util';
+  import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
+  import { TUNABLES } from '$lib/utils/tunables';
+  import { Icon } from '@immich/ui';
  import { onMount } from 'svelte';
  import type { ClassValue } from 'svelte/elements';
  import { fade } from 'svelte/transition';
  import ImageThumbnail from './image-thumbnail.svelte';
  import VideoThumbnail from './video-thumbnail.svelte';
+
  interface Props {
    asset: TimelineAsset;
    groupIndex?: number;
@@ -76,7 +78,7 @@
    IMAGE_THUMBNAIL: { THUMBHASH_FADE_DURATION },
  } = TUNABLES;

-  let usingMobileDevice = $derived(mediaQueryManager.pointerCoarse);
+  let usingMobileDevice = $derived(mobileDevice.pointerCoarse);
  let element: HTMLElement | undefined = $state();
  let mouseOver = $state(false);
  let loaded = $state(false);
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/web/src/lib/components/faces-page/person-side-panel.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import OnEvents from '$lib/components/OnEvents.svelte';
  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
  import { boundingBoxesArray } from '$lib/stores/people.store';
+  import { websocketEvents } from '$lib/stores/websocket';
  import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
  import { handleError } from '$lib/utils/handle-error';
  import { zoomImageToBase64 } from '$lib/utils/people-utils';
@@ -70,8 +70,8 @@
    isShowLoadingPeople = false;
  }

-  const onPersonThumbnailReady = ({ id }: { id: string }) => {
-    assetFaceGenerated.push(id);
+  const onPersonThumbnail = (personId: string) => {
+    assetFaceGenerated.push(personId);
    if (
      isEqual(assetFaceGenerated, peopleToCreate) &&
      loaderLoadingDoneTimeout &&
@@ -86,6 +86,7 @@

  onMount(() => {
    handlePromiseError(loadPeople());
+    return websocketEvents.on('on_person_thumbnail', onPersonThumbnail);
  });

  const isEqual = (a: string[], b: string[]): boolean => {
@@ -183,8 +184,6 @@
  };
 </script>

-<OnEvents {onPersonThumbnailReady} />
-
 <section
  transition:fly={{ x: 360, duration: 100, easing: linear }}
  class="absolute top-0 h-full w-90 overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte
@@ -10,7 +10,7 @@
  import { Route } from '$lib/route';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { handlePromiseError } from '$lib/utils';
  import { cancelMultiselect, downloadArchive } from '$lib/utils/asset-utils';
  import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
@@ -110,7 +110,7 @@
      <ControlAppBar onClose={() => goto(Route.photos())} backIcon={mdiArrowLeft} showBackButton={false}>
        {#snippet leading()}
          <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
-            <Logo variant={mediaQueryManager.maxMd ? 'icon' : 'inline'} class="min-w-10" />
+            <Logo variant={mobileDevice.maxMd ? 'icon' : 'inline'} class="min-w-10" />
          </a>
        {/snippet}

--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -13,7 +13,7 @@
  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
  import { Route } from '$lib/route';
  import { getGlobalActions } from '$lib/services/app.service';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { notificationManager } from '$lib/stores/notification-manager.svelte';
  import { sidebarStore } from '$lib/stores/sidebar.svelte';
  import { user } from '$lib/stores/user.store';
@@ -79,7 +79,7 @@
        class="sidebar:hidden"
      />
      <a data-sveltekit-preload-data="hover" href={Route.photos()}>
-        <Logo variant={mediaQueryManager.isFullSidebar ? 'inline' : 'icon'} class="max-md:h-12" />
+        <Logo variant={mobileDevice.isFullSidebar ? 'inline' : 'icon'} class="max-md:h-12" />
      </a>
    </div>
    <div class="flex justify-between gap-4 lg:gap-8 pe-6">
--- a/web/src/lib/components/sidebar/sidebar.spec.ts
+++ b/web/src/lib/components/sidebar/sidebar.spec.ts
@@ -5,14 +5,14 @@ import { vi } from 'vitest';

 const mocks = vi.hoisted(() => {
  return {
-    mediaQueryManager: {
+    mobileDevice: {
      isFullSidebar: false,
    },
  };
 });

-vi.mock('$lib/stores/media-query-manager.svelte', () => ({
-  mediaQueryManager: mocks.mediaQueryManager,
+vi.mock('$lib/stores/mobile-device.svelte', () => ({
+  mobileDevice: mocks.mobileDevice,
 }));

 vi.mock('$lib/stores/sidebar.svelte', () => ({
@@ -25,7 +25,7 @@ vi.mock('$lib/stores/sidebar.svelte', () => ({
 describe('Sidebar component', () => {
  beforeEach(() => {
    vi.resetAllMocks();
-    mocks.mediaQueryManager.isFullSidebar = false;
+    mocks.mobileDevice.isFullSidebar = false;
    sidebarStore.isOpen = false;
  });

@@ -39,7 +39,7 @@ describe('Sidebar component', () => {
    'inert is $expectedInert when isFullSidebar=$isFullSidebar and isSidebarOpen=$isSidebarOpen',
    ({ isFullSidebar, isSidebarOpen, expectedInert }) => {
      // setup
-      mocks.mediaQueryManager.isFullSidebar = isFullSidebar;
+      mocks.mobileDevice.isFullSidebar = isFullSidebar;
      sidebarStore.isOpen = isSidebarOpen;

      // when
@@ -53,7 +53,7 @@ describe('Sidebar component', () => {

  it('should set width when sidebar is expanded', () => {
    // setup
-    mocks.mediaQueryManager.isFullSidebar = false;
+    mocks.mobileDevice.isFullSidebar = false;
    sidebarStore.isOpen = true;

    // when
@@ -68,7 +68,7 @@ describe('Sidebar component', () => {

  it('should close the sidebar if it is open on initial render', () => {
    // setup
-    mocks.mediaQueryManager.isFullSidebar = false;
+    mocks.mobileDevice.isFullSidebar = false;
    sidebarStore.isOpen = true;

    // when
--- a/web/src/lib/components/sidebar/sidebar.svelte
+++ b/web/src/lib/components/sidebar/sidebar.svelte
@@ -2,7 +2,7 @@
  import { clickOutside } from '$lib/actions/click-outside';
  import { focusTrap } from '$lib/actions/focus-trap';
  import { menuButtonId } from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { sidebarStore } from '$lib/stores/sidebar.svelte';
  import { onMount, type Snippet } from 'svelte';

@@ -13,8 +13,8 @@

  let { ariaLabel, children }: Props = $props();

-  const isHidden = $derived(!sidebarStore.isOpen && !mediaQueryManager.isFullSidebar);
-  const isExpanded = $derived(sidebarStore.isOpen && !mediaQueryManager.isFullSidebar);
+  const isHidden = $derived(!sidebarStore.isOpen && !mobileDevice.isFullSidebar);
+  const isExpanded = $derived(sidebarStore.isOpen && !mobileDevice.isFullSidebar);

  onMount(() => {
    closeSidebar();
--- a/web/src/lib/components/timeline/Scrubber.svelte
+++ b/web/src/lib/components/timeline/Scrubber.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
  import type { ScrubberMonth, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { getTabbable } from '$lib/utils/focus-util';
  import { type ScrubberListener } from '$lib/utils/timeline-util';
  import { Icon } from '@immich/ui';
@@ -65,7 +65,7 @@
  const toScrollY = (percent: number) => percent * (height - (PADDING_TOP + PADDING_BOTTOM));
  const toTimelineY = (scrollY: number) => scrollY / (height - (PADDING_TOP + PADDING_BOTTOM));

-  const usingMobileDevice = $derived(mediaQueryManager.pointerCoarse);
+  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);

  const MOBILE_WIDTH = 20;
  const DESKTOP_WIDTH = 60;
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -21,7 +21,7 @@
  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { isAssetViewerRoute, navigate } from '$lib/utils/navigation';
  import { getTimes, type ScrubberListener } from '$lib/utils/timeline-util';
  import { type AlbumResponseDto, type PersonResponseDto, type UserResponseDto } from '@immich/sdk';
@@ -106,8 +106,8 @@
  let scrubberWidth = $state(0);

  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-  const maxMd = $derived(mediaQueryManager.maxMd);
-  const usingMobileDevice = $derived(mediaQueryManager.pointerCoarse);
+  const maxMd = $derived(mobileDevice.maxMd);
+  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);

  $effect(() => {
    const layoutOptions = maxMd
--- a/web/src/lib/components/timeline/actions/AssetJobActions.svelte
+++ b/web/src/lib/components/timeline/actions/AssetJobActions.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
  import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import { getAssetJobIcon, getAssetJobName } from '$lib/utils';
+  import { getAssetJobIcon, getAssetJobMessage, getAssetJobName } from '$lib/utils';
  import { handleError } from '$lib/utils/handle-error';
  import { AssetJobName, runAssetJobs } from '@immich/sdk';
  import { toastManager } from '@immich/ui';
@@ -22,7 +22,7 @@
    try {
      const ids = [...getOwnedAssets()].map(({ id }) => id);
      await runAssetJobs({ assetJobsDto: { assetIds: ids, name } });
-      toastManager.success(getAssetJobName($t, name));
+      toastManager.success($getAssetJobMessage(name));
      clearSelect();
    } catch (error) {
      handleError(error, $t('errors.unable_to_submit_job'));
@@ -32,6 +32,6 @@

 {#each jobs as job (job)}
  {#if isAllVideos || job !== AssetJobName.TranscodeVideo}
-    <MenuOption text={getAssetJobName($t, job)} icon={getAssetJobIcon(job)} onClick={() => handleRunJob(job)} />
+    <MenuOption text={$getAssetJobName(job)} icon={getAssetJobIcon(job)} onClick={() => handleRunJob(job)} />
  {/if}
 {/each}
--- a/web/src/lib/managers/ImageManager.svelte.ts
+++ b/web/src/lib/managers/ImageManager.svelte.ts
@@ -1,44 +0,0 @@
-import { getAssetUrlForKind, ImageKinds, type ImageKind } from '$lib/utils';
-import { cancelImageUrl } from '$lib/utils/sw-messaging';
-import { type AssetResponseDto } from '@immich/sdk';
-
-type CancelImageKind = ImageKind | 'all';
-
-class ImageManager {
-  preload(asset: AssetResponseDto | undefined, kind: ImageKind = 'preview') {
-    if (!asset) {
-      return;
-    }
-    this.preloadImageUrl(getAssetUrlForKind(asset, kind));
-  }
-
-  preloadImageUrl(src: string | undefined) {
-    if (!src) {
-      return;
-    }
-    const img = new Image();
-    img.src = src;
-  }
-
-  cancel(asset: AssetResponseDto | undefined, kind: CancelImageKind = 'preview') {
-    if (!asset) {
-      return;
-    }
-
-    const kinds = kind === 'all' ? (Object.keys(ImageKinds) as ImageKind[]) : [kind];
-    for (const kind of kinds) {
-      const url = getAssetUrlForKind(asset, kind);
-      if (url) {
-        cancelImageUrl(url);
-      }
-    }
-  }
-
-  cancelPreloadUrl(url: string | undefined) {
-    if (url) {
-      cancelImageUrl(url);
-    }
-  }
-}
-
-export const imageManager = new ImageManager();
--- a/web/src/lib/managers/PreloadManager.svelte.ts
+++ b/web/src/lib/managers/PreloadManager.svelte.ts
@@ -0,0 +1,38 @@
+import { getAssetUrl } from '$lib/utils';
+import { cancelImageUrl, preloadImageUrl } from '$lib/utils/sw-messaging';
+import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
+
+class PreloadManager {
+  preload(asset: AssetResponseDto | undefined) {
+    if (globalThis.isSecureContext) {
+      preloadImageUrl(getAssetUrl({ asset }));
+      return;
+    }
+    if (!asset || asset.type !== AssetTypeEnum.Image) {
+      return;
+    }
+    const img = new Image();
+    const url = getAssetUrl({ asset });
+    if (!url) {
+      return;
+    }
+    img.src = url;
+  }
+
+  cancel(asset: AssetResponseDto | undefined) {
+    if (!globalThis.isSecureContext || !asset) {
+      return;
+    }
+    const url = getAssetUrl({ asset });
+    cancelImageUrl(url);
+  }
+
+  cancelPreloadUrl(url: string | undefined) {
+    if (!globalThis.isSecureContext) {
+      return;
+    }
+    cancelImageUrl(url);
+  }
+}
+
+export const preloadManager = new PreloadManager();
--- a/web/src/lib/managers/event-manager.svelte.ts
+++ b/web/src/lib/managers/event-manager.svelte.ts
@@ -44,7 +44,6 @@ export type Events = {
  AlbumUserDelete: [{ albumId: string; userId: string }];

  PersonUpdate: [PersonResponseDto];
-  PersonThumbnailReady: [{ id: string }];

  BackupDeleteStatus: [{ filename: string; isDeleting: boolean }];
  BackupDeleted: [{ filename: string }];
--- a/web/src/lib/services/asset.service.ts
+++ b/web/src/lib/services/asset.service.ts
@@ -3,36 +3,28 @@ import { authManager } from '$lib/managers/auth-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
 import { user as authUser, preferences } from '$lib/stores/user.store';
-import { getAssetJobName, getSharedLink, sleep } from '$lib/utils';
+import { getSharedLink, sleep } from '$lib/utils';
 import { downloadUrl } from '$lib/utils/asset-utils';
 import { openFileUploadDialog } from '$lib/utils/file-uploader';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import { asQueryString } from '$lib/utils/shared-links';
 import {
-  AssetJobName,
-  AssetTypeEnum,
  AssetVisibility,
  copyAsset,
  deleteAssets,
  getAssetInfo,
  getBaseUrl,
-  runAssetJobs,
  updateAsset,
-  type AssetJobsDto,
  type AssetResponseDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import {
  mdiAlertOutline,
-  mdiCogRefreshOutline,
-  mdiDatabaseRefreshOutline,
  mdiDownload,
  mdiDownloadBox,
-  mdiHeadSyncOutline,
  mdiHeart,
  mdiHeartOutline,
-  mdiImageRefreshOutline,
  mdiInformationOutline,
  mdiMotionPauseOutline,
  mdiMotionPlayOutline,
@@ -132,31 +124,6 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
    shortcuts: [{ key: 'i' }],
  };

-  const RefreshFacesJob: ActionItem = {
-    title: getAssetJobName($t, AssetJobName.RefreshFaces),
-    icon: mdiHeadSyncOutline,
-    onAction: () => handleRunAssetJob({ name: AssetJobName.RefreshFaces, assetIds: [asset.id] }),
-  };
-
-  const RefreshMetadataJob: ActionItem = {
-    title: getAssetJobName($t, AssetJobName.RefreshMetadata),
-    icon: mdiDatabaseRefreshOutline,
-    onAction: () => handleRunAssetJob({ name: AssetJobName.RefreshMetadata, assetIds: [asset.id] }),
-  };
-
-  const RegenerateThumbnailJob: ActionItem = {
-    title: getAssetJobName($t, AssetJobName.RegenerateThumbnail),
-    icon: mdiImageRefreshOutline,
-    onAction: () => handleRunAssetJob({ name: AssetJobName.RegenerateThumbnail, assetIds: [asset.id] }),
-  };
-
-  const TranscodeVideoJob: ActionItem = {
-    title: getAssetJobName($t, AssetJobName.TranscodeVideo),
-    icon: mdiCogRefreshOutline,
-    onAction: () => handleRunAssetJob({ name: AssetJobName.TranscodeVideo, assetIds: [asset.id] }),
-    $if: () => asset.type === AssetTypeEnum.Video,
-  };
-
  return {
    Share,
    Download,
@@ -168,10 +135,6 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
    Unfavorite,
    PlayMotionPhoto,
    StopMotionPhoto,
-    RefreshFacesJob,
-    RefreshMetadataJob,
-    RegenerateThumbnailJob,
-    TranscodeVideoJob,
  };
 };

@@ -254,14 +217,3 @@ export const handleReplaceAsset = async (oldAssetId: string) => {

  eventManager.emit('AssetReplace', { oldAssetId, newAssetId });
 };
-
-const handleRunAssetJob = async (dto: AssetJobsDto) => {
-  const $t = await getFormatter();
-
-  try {
-    await runAssetJobs({ assetJobsDto: dto });
-    toastManager.success(getAssetJobName($t, dto.name));
-  } catch (error) {
-    handleError(error, $t('errors.unable_to_submit_job'));
-  }
-};
--- a/web/src/lib/services/keyboard.service.ts
+++ b/web/src/lib/services/keyboard.service.ts
@@ -1,14 +0,0 @@
-import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
-import { modalManager, type ActionItem } from '@immich/ui';
-import { mdiKeyboard } from '@mdi/js';
-import type { MessageFormatter } from 'svelte-i18n';
-
-export const getKeyboardActions = ($t: MessageFormatter) => {
-  const KeyboardShortcuts: ActionItem = {
-    title: $t('show_keyboard_shortcuts'),
-    icon: mdiKeyboard,
-    onAction: () => modalManager.show(ShortcutsModal, {}),
-  };
-
-  return { KeyboardShortcuts };
-};
--- a/web/src/lib/services/library.service.ts
+++ b/web/src/lib/services/library.service.ts
@@ -20,7 +20,7 @@ import {
  type UpdateLibraryDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiInformationOutline, mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
+import { mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';

 export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResponseDto[]) => {
@@ -45,13 +45,6 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
 };

 export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponseDto) => {
-  const Detail: ActionItem = {
-    icon: mdiInformationOutline,
-    type: $t('command'),
-    title: $t('details'),
-    onAction: () => goto(Route.viewLibrary(library)),
-  };
-
  const Edit: ActionItem = {
    icon: mdiPencilOutline,
    type: $t('command'),
@@ -91,7 +84,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
    shortcuts: { shift: true, key: 'r' },
  };

-  return { Detail, Edit, Delete, AddFolder, AddExclusionPattern, Scan };
+  return { Edit, Delete, AddFolder, AddExclusionPattern, Scan };
 };

 export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryResponseDto, folder: string) => {
--- a/web/src/lib/stores/assets-store.svelte.ts
+++ b/web/src/lib/stores/assets-store.svelte.ts
@@ -1,4 +1,4 @@
 import { writable } from 'svelte/store';

-export const photoViewerImgElement = writable<HTMLImageElement>();
+export const photoViewerImgElement = writable<HTMLImageElement | null>(null);
 export const isSelectingAllAssets = writable(false);
--- a/web/src/lib/stores/media-query-manager.svelte.ts
+++ b/web/src/lib/stores/media-query-manager.svelte.ts
@@ -3,9 +3,8 @@ import { MediaQuery } from 'svelte/reactivity';
 const pointerCoarse = new MediaQuery('pointer:coarse');
 const maxMd = new MediaQuery('max-width: 767px');
 const sidebar = new MediaQuery(`min-width: 850px`);
-const reducedMotion = new MediaQuery('prefers-reduced-motion: reduce');

-export const mediaQueryManager = {
+export const mobileDevice = {
  get pointerCoarse() {
    return pointerCoarse.current;
  },
@@ -15,7 +14,4 @@ export const mediaQueryManager = {
  get isFullSidebar() {
    return sidebar.current;
  },
-  get reducedMotion() {
-    return reducedMotion.current;
-  },
 };
--- a/web/src/lib/stores/ocr.svelte.spec.ts
+++ b/web/src/lib/stores/ocr.svelte.spec.ts
@@ -1,4 +1,3 @@
-import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
 import { ocrManager, type OcrBoundingBox } from '$lib/stores/ocr.svelte';
 import { getAssetOcr } from '@immich/sdk';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -31,7 +30,6 @@ describe('OcrManager', () => {
  beforeEach(() => {
    // Reset the singleton state before each test
    ocrManager.clear();
-    assetCacheManager.clearOcrCache();
    vi.clearAllMocks();
  });

--- a/web/src/lib/stores/ocr.svelte.ts
+++ b/web/src/lib/stores/ocr.svelte.ts
@@ -1,5 +1,5 @@
-import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
 import { CancellableTask } from '$lib/utils/cancellable-task';
+import { getAssetOcr } from '@immich/sdk';

 export type OcrBoundingBox = {
  id: string;
@@ -38,7 +38,7 @@ class OcrManager {
      this.#cleared = false;
    }
    await this.#ocrLoader.execute(async () => {
-      this.#data = await assetCacheManager.getAssetOcr(id);
+      this.#data = await getAssetOcr({ id });
    }, false);
  }

--- a/web/src/lib/stores/sidebar.svelte.ts
+++ b/web/src/lib/stores/sidebar.svelte.ts
@@ -1,20 +1,20 @@
-import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
+import { mobileDevice } from '$lib/stores/mobile-device.svelte';

 class SidebarStore {
-  isOpen = $derived.by(() => mediaQueryManager.isFullSidebar);
+  isOpen = $derived.by(() => mobileDevice.isFullSidebar);

  /**
   * Reset the sidebar visibility to the default, based on the current screen width.
   */
  reset() {
-    this.isOpen = mediaQueryManager.isFullSidebar;
+    this.isOpen = mobileDevice.isFullSidebar;
  }

  /**
   * Toggles the sidebar visibility, if available at the current screen width.
   */
  toggle() {
-    this.isOpen = mediaQueryManager.isFullSidebar ? true : !this.isOpen;
+    this.isOpen = mobileDevice.isFullSidebar ? true : !this.isOpen;
  }
 }

--- a/web/src/lib/stores/websocket.ts
+++ b/web/src/lib/stores/websocket.ts
@@ -76,7 +76,6 @@ websocket
  .on('on_new_release', (event) => eventManager.emit('ReleaseEvent', event))
  .on('on_session_delete', () => authManager.logout())
  .on('on_user_delete', (id) => eventManager.emit('UserAdminDeleted', { id }))
-  .on('on_person_thumbnail', (id) => eventManager.emit('PersonThumbnailReady', { id }))
  .on('on_notification', () => notificationManager.refresh())
  .on('connect_error', (e) => console.log('Websocket Connect Error', e));

--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -28,18 +28,9 @@ import {
 } from '@immich/sdk';
 import { toastManager, type ActionItem, type IfLike } from '@immich/ui';
 import { mdiCogRefreshOutline, mdiDatabaseRefreshOutline, mdiHeadSyncOutline, mdiImageRefreshOutline } from '@mdi/js';
-import { init, register, t, type MessageFormatter } from 'svelte-i18n';
+import { init, register, t } from 'svelte-i18n';
 import { derived, get } from 'svelte/store';

-export const ImageKinds = {
-  thumbnail: true,
-  preview: true,
-  fullsize: true,
-  original: true,
-} as const;
-
-export type ImageKind = keyof typeof ImageKinds;
-
 interface DownloadRequestOptions<T = unknown> {
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
  url: string;
@@ -204,32 +195,18 @@ const createUrl = (path: string, parameters?: Record<string, unknown>) => {

 type AssetUrlOptions = { id: string; cacheKey?: string | null; edited?: boolean };

-export const getAssetUrlForKind = (asset: AssetResponseDto, kind: ImageKind) => {
-  switch (kind) {
-    case 'preview': {
-      return getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Preview, cacheKey: asset.thumbhash });
-    }
-    case 'thumbnail': {
-      return getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash });
-    }
-    case 'fullsize': {
-      return getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Fullsize, cacheKey: asset.thumbhash });
-    }
-    case 'original': {
-      return getAssetOriginalUrl({ id: asset.id, cacheKey: asset.thumbhash });
-    }
-  }
-};
-
 export const getAssetUrl = ({
  asset,
  sharedLink,
  forceOriginal = false,
 }: {
-  asset: AssetResponseDto;
+  asset: AssetResponseDto | undefined;
  sharedLink?: SharedLinkResponseDto;
  forceOriginal?: boolean;
 }) => {
+  if (!asset) {
+    return;
+  }
  const id = asset.id;
  const cacheKey = asset.thumbhash;
  if (sharedLink && (!sharedLink.allowDownload || !sharedLink.showMetadata)) {
@@ -282,16 +259,31 @@ export const getProfileImageUrl = (user: UserResponseDto) =>
 export const getPeopleThumbnailUrl = (person: PersonResponseDto, updatedAt?: string) =>
  createUrl(getPeopleThumbnailPath(person.id), { updatedAt: updatedAt ?? person.updatedAt });

-export const getAssetJobName = ($t: MessageFormatter, job: AssetJobName) => {
-  const messages: Record<AssetJobName, string> = {
-    [AssetJobName.RefreshFaces]: $t('refreshing_faces'),
-    [AssetJobName.RefreshMetadata]: $t('refreshing_metadata'),
-    [AssetJobName.RegenerateThumbnail]: $t('regenerating_thumbnails'),
-    [AssetJobName.TranscodeVideo]: $t('refreshing_encoded_video'),
-  };
+export const getAssetJobName = derived(t, ($t) => {
+  return (job: AssetJobName) => {
+    const names: Record<AssetJobName, string> = {
+      [AssetJobName.RefreshFaces]: $t('refresh_faces'),
+      [AssetJobName.RefreshMetadata]: $t('refresh_metadata'),
+      [AssetJobName.RegenerateThumbnail]: $t('refresh_thumbnails'),
+      [AssetJobName.TranscodeVideo]: $t('refresh_encoded_videos'),
+    };

-  return messages[job];
-};
+    return names[job];
+  };
+});
+
+export const getAssetJobMessage = derived(t, ($t) => {
+  return (job: AssetJobName) => {
+    const messages: Record<AssetJobName, string> = {
+      [AssetJobName.RefreshFaces]: $t('refreshing_faces'),
+      [AssetJobName.RefreshMetadata]: $t('refreshing_metadata'),
+      [AssetJobName.RegenerateThumbnail]: $t('regenerating_thumbnails'),
+      [AssetJobName.TranscodeVideo]: $t('refreshing_encoded_video'),
+    };
+
+    return messages[job];
+  };
+});

 export const getAssetJobIcon = (job: AssetJobName) => {
  const names: Record<AssetJobName, string> = {
--- a/web/src/lib/utils/adaptive-image-loader.svelte.ts
+++ b/web/src/lib/utils/adaptive-image-loader.svelte.ts
@@ -1,207 +0,0 @@
-import type { LoadImageFunction } from '$lib/actions/image-loader.svelte';
-import { imageManager } from '$lib/managers/ImageManager.svelte';
-import { getAssetUrl, getAssetUrlForKind } from '$lib/utils';
-import { type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
-
-/**
- * Quality levels for progressive image loading
- */
-type ImageQuality =
-  | 'basic'
-  | 'loading-thumbnail'
-  | 'thumbnail'
-  | 'loading-preview'
-  | 'preview'
-  | 'loading-original'
-  | 'original';
-
-export interface ImageLoaderState {
-  previewUrl?: string;
-  thumbnailUrl?: string;
-  originalUrl?: string;
-  quality: ImageQuality;
-  hasError: boolean;
-  thumbnailImage: ImageStatus;
-  previewImage: ImageStatus;
-  originalImage: ImageStatus;
-}
-enum ImageStatus {
-  Unloaded = 'Unloaded',
-  Success = 'Success',
-  Error = 'Error',
-}
-
-/**
- * Coordinates adaptive loading of a single asset image:
- * thumbhash → thumbnail → preview → original (on zoom)
- *
- */
-export class AdaptiveImageLoader {
-  private state = $state<ImageLoaderState>({
-    quality: 'basic',
-    hasError: false,
-    thumbnailImage: ImageStatus.Unloaded,
-    previewImage: ImageStatus.Unloaded,
-    originalImage: ImageStatus.Unloaded,
-  });
-
-  private readonly currentZoomFn?: () => number;
-  private readonly onImageReady?: () => void;
-  private readonly onError?: () => void;
-  private readonly onQualityUpgrade?: (url: string, quality: ImageQuality) => void;
-  private readonly imageLoader?: LoadImageFunction;
-  private readonly destroyFunctions: (() => void)[] = [];
-  readonly thumbnailUrl: string;
-  readonly previewUrl: string;
-  readonly originalUrl: string;
-  asset: AssetResponseDto;
-  constructor(
-    asset: AssetResponseDto,
-    sharedLink: SharedLinkResponseDto | undefined,
-    callbacks?: {
-      currentZoomFn: () => number;
-      onImageReady?: () => void;
-      onError?: () => void;
-      onQualityUpgrade?: (url: string, quality: ImageQuality) => void;
-    },
-    imageLoader?: LoadImageFunction,
-  ) {
-    this.asset = asset;
-    this.currentZoomFn = callbacks?.currentZoomFn;
-    this.onImageReady = callbacks?.onImageReady;
-    this.onError = callbacks?.onError;
-    this.onQualityUpgrade = callbacks?.onQualityUpgrade;
-    this.imageLoader = imageLoader;
-
-    this.thumbnailUrl = getAssetUrlForKind(asset, 'thumbnail');
-    this.previewUrl = getAssetUrl({ asset, sharedLink });
-    this.originalUrl = getAssetUrl({ asset, sharedLink, forceOriginal: true });
-    this.state.thumbnailUrl = this.thumbnailUrl;
-  }
-
-  start() {
-    if (!this.imageLoader) {
-      throw new Error('Start requires imageLoader to be specified');
-    }
-    this.destroyFunctions.push(
-      this.imageLoader(
-        this.thumbnailUrl,
-        {},
-        () => this.onThumbnailLoad(),
-        () => this.onThumbnailError(),
-        () => this.onThumbnailStart(),
-      ),
-    );
-  }
-
-  get adaptiveLoaderState(): ImageLoaderState {
-    return this.state;
-  }
-
-  onThumbnailStart() {
-    this.state.quality = 'loading-thumbnail';
-  }
-
-  onThumbnailLoad() {
-    this.state.quality = 'thumbnail';
-    this.state.thumbnailImage = ImageStatus.Success;
-    this.onImageReady?.();
-    this.onQualityUpgrade?.(this.thumbnailUrl, 'thumbnail');
-    this.triggerMainImage();
-  }
-
-  onThumbnailError() {
-    this.state.thumbnailUrl = undefined;
-    this.state.thumbnailImage = ImageStatus.Error;
-    this.triggerMainImage();
-  }
-
-  triggerMainImage() {
-    const wantsOriginal = (this.currentZoomFn?.() ?? 1) > 1;
-    return wantsOriginal ? this.triggerOriginal() : this.triggerPreview();
-  }
-
-  triggerPreview() {
-    if (!this.previewUrl) {
-      // no preview, try original?
-      this.triggerOriginal();
-      return false;
-    }
-    this.state.previewUrl = this.previewUrl;
-    if (this.imageLoader) {
-      this.destroyFunctions.push(
-        this.imageLoader(
-          this.previewUrl,
-          {},
-          () => this.onPreviewLoad(),
-          () => this.onPreviewError(),
-          () => this.onPreviewStart(),
-        ),
-      );
-    }
-  }
-
-  onPreviewStart() {
-    this.state.quality = 'loading-preview';
-  }
-
-  onPreviewLoad() {
-    this.state.quality = 'preview';
-    this.state.previewImage = ImageStatus.Success;
-    this.onImageReady?.();
-    this.onQualityUpgrade?.(this.previewUrl, 'preview');
-  }
-
-  onPreviewError() {
-    this.state.previewImage = ImageStatus.Error;
-    this.state.previewUrl = undefined;
-    // TODO: maybe try original, but only if preview's error isnt due to cancelation
-  }
-
-  triggerOriginal() {
-    if (!this.originalUrl) {
-      this.onError?.();
-      return false;
-    }
-    this.state.originalUrl = this.originalUrl;
-
-    if (this.imageLoader) {
-      this.destroyFunctions.push(
-        this.imageLoader(
-          this.originalUrl,
-          {},
-          () => this.onOriginalLoad(),
-          () => this.onOriginalError(),
-          () => this.onOriginalStart(),
-        ),
-      );
-    }
-  }
-
-  onOriginalStart() {
-    this.state.quality = 'loading-original';
-  }
-
-  onOriginalLoad() {
-    this.state.quality = 'original';
-    this.state.originalImage = ImageStatus.Success;
-    this.onImageReady?.();
-  }
-
-  onOriginalError() {
-    this.state.originalImage = ImageStatus.Error;
-    this.state.originalUrl = undefined;
-  }
-
-  destroy(): void {
-    if (this.imageLoader) {
-      for (const destroy of this.destroyFunctions) {
-        destroy();
-      }
-      return;
-    }
-    imageManager.cancelPreloadUrl(this.thumbnailUrl);
-    imageManager.cancelPreloadUrl(this.previewUrl);
-    imageManager.cancelPreloadUrl(this.originalUrl);
-  }
-}
--- a/web/src/lib/utils/layout-utils.ts
+++ b/web/src/lib/utils/layout-utils.ts
@@ -129,19 +129,3 @@ export type CommonPosition = {
  width: number;
  height: number;
 };
-
-// Scales dimensions to fit within a container (like object-fit: contain)
-export const scaleToFit = (
-  dimensions: { width: number; height: number },
-  container: { width: number; height: number },
-) => {
-  const scaleX = container.width / dimensions.width;
-  const scaleY = container.height / dimensions.height;
-
-  const scale = Math.min(scaleX, scaleY);
-
-  return {
-    width: dimensions.width * scale,
-    height: dimensions.height * scale,
-  };
-};
--- a/web/src/lib/utils/sw-messaging.ts
+++ b/web/src/lib/utils/sw-messaging.ts
@@ -1,24 +1,14 @@
-import { ServiceWorkerMessenger } from './sw-messenger';
-
-const messenger = new ServiceWorkerMessenger();
-
-let isServiceWorkerEnabled = true;
-
-messenger.onAckTimeout(() => {
-  if (!isServiceWorkerEnabled) {
-    return;
-  }
-  console.error('[ServiceWorker] No communication detected. Auto-disabled service worker.');
-  isServiceWorkerEnabled = false;
-});
-
-const isValidSwContext = (url: string | undefined | null): url is string => {
-  return globalThis.isSecureContext && isServiceWorkerEnabled && !!url;
-};
+const broadcast = new BroadcastChannel('immich');

 export function cancelImageUrl(url: string | undefined | null) {
-  if (!isValidSwContext(url)) {
+  if (!url) {
    return;
  }
-  void messenger.send('cancel', { url });
+  broadcast.postMessage({ type: 'cancel', url });
+}
+export function preloadImageUrl(url: string | undefined | null) {
+  if (!url) {
+    return;
+  }
+  broadcast.postMessage({ type: 'preload', url });
 }
--- a/web/src/lib/utils/sw-messenger.ts
+++ b/web/src/lib/utils/sw-messenger.ts
@@ -1,157 +0,0 @@
-/**
- * Low-level protocol for communicating with the service worker via postMessage.
- *
- * Protocol:
- * 1. Main thread sends request: { type: string, requestId: string, ...data }
- * 2. SW sends ack: { type: 'ack', requestId: string }
- * 3. SW sends response (optional): { type: 'response', requestId: string, result?: any, error?: string }
- */
-
-interface PendingRequest {
-  resolveAck: () => void;
-  resolveResponse?: (result: unknown) => void;
-  rejectResponse?: (error: Error) => void;
-  ackTimeout: ReturnType<typeof setTimeout>;
-  ackReceived: boolean;
-}
-
-export class ServiceWorkerMessenger {
-  readonly #pendingRequests = new Map<string, PendingRequest>();
-  readonly #ackTimeoutMs: number;
-  #requestCounter = 0;
-  #onTimeout?: (type: string, data: Record<string, unknown>) => void;
-  #messageHandler?: (event: MessageEvent) => void;
-
-  constructor(ackTimeoutMs = 5000) {
-    this.#ackTimeoutMs = ackTimeoutMs;
-
-    // Listen for messages from the service worker
-    if ('serviceWorker' in navigator) {
-      this.#messageHandler = (event) => {
-        this.#handleMessage(event.data);
-      };
-      navigator.serviceWorker.addEventListener('message', this.#messageHandler);
-    }
-  }
-
-  #handleMessage(data: unknown) {
-    if (typeof data !== 'object' || data === null) {
-      return;
-    }
-
-    const message = data as { requestId?: string; type?: string; error?: string; result?: unknown };
-    const requestId = message.requestId;
-    if (!requestId) {
-      return;
-    }
-
-    const pending = this.#pendingRequests.get(requestId);
-    if (!pending) {
-      return;
-    }
-
-    if (message.type === 'ack') {
-      pending.ackReceived = true;
-      clearTimeout(pending.ackTimeout);
-      pending.resolveAck();
-      return;
-    }
-
-    if (message.type === 'response') {
-      clearTimeout(pending.ackTimeout);
-      this.#pendingRequests.delete(requestId);
-
-      if (message.error) {
-        pending.rejectResponse?.(new Error(message.error));
-        return;
-      }
-
-      pending.resolveResponse?.(message.result);
-    }
-  }
-
-  /**
-   * Set a callback to be invoked when an ack timeout occurs.
-   * This can be used to detect and disable faulty service workers.
-   */
-  onAckTimeout(callback: (type: string, data: Record<string, unknown>) => void): void {
-    this.#onTimeout = callback;
-  }
-
-  /**
-   * Send a message to the service worker.
-   * - send(): waits for ack, resolves when acknowledged
-   * - request(): waits for response, throws on error/timeout
-   */
-  #sendInternal<T>(type: string, data: Record<string, unknown>, waitForResponse: boolean): Promise<T> {
-    const requestId = `${type}-${++this.#requestCounter}-${Date.now()}`;
-
-    const promise = new Promise<T>((resolve, reject) => {
-      const ackTimeout = setTimeout(() => {
-        const pending = this.#pendingRequests.get(requestId);
-        if (pending && !pending.ackReceived) {
-          this.#pendingRequests.delete(requestId);
-          console.warn(`[ServiceWorker] ${type} request not acknowledged:`, data);
-          this.#onTimeout?.(type, data);
-          // Only reject if we're waiting for a response
-          if (waitForResponse) {
-            reject(new Error(`Service worker did not acknowledge ${type} request`));
-          } else {
-            resolve(undefined as T);
-          }
-        }
-      }, this.#ackTimeoutMs);
-
-      this.#pendingRequests.set(requestId, {
-        resolveAck: waitForResponse ? () => {} : () => resolve(undefined as T),
-        resolveResponse: waitForResponse ? (result: unknown) => resolve(result as T) : undefined,
-        rejectResponse: waitForResponse ? reject : undefined,
-        ackTimeout,
-        ackReceived: false,
-      });
-
-      // Send message to the active service worker
-      // Feature detection is done in constructor and at call sites (sw-messaging.ts:isValidSwContext)
-      // eslint-disable-next-line compat/compat
-      navigator.serviceWorker.controller?.postMessage({
-        type,
-        requestId,
-        ...data,
-      });
-    });
-
-    return promise;
-  }
-
-  /**
-   * Send a one-way message to the service worker.
-   * Returns a promise that resolves after the service worker acknowledges receipt.
-   * Resolves even if no ack is received within the timeout period.
-   */
-  send(type: string, data: Record<string, unknown>): Promise<void> {
-    return this.#sendInternal<void>(type, data, false);
-  }
-
-  /**
-   * Send a request and wait for ack + response.
-   * Returns a promise that resolves with the response data or rejects on error/timeout.
-   */
-  request<T = void>(type: string, data: Record<string, unknown>): Promise<T> {
-    return this.#sendInternal<T>(type, data, true);
-  }
-
-  /**
-   * Clean up pending requests and remove event listener
-   */
-  close(): void {
-    for (const pending of this.#pendingRequests.values()) {
-      clearTimeout(pending.ackTimeout);
-    }
-    this.#pendingRequests.clear();
-
-    if (this.#messageHandler && 'serviceWorker' in navigator) {
-      navigator.serviceWorker.removeEventListener('message', this.#messageHandler);
-      this.#messageHandler = undefined;
-    }
-  }
-}
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
  import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
  import { Route } from '$lib/route';
+  import { websocketEvents } from '$lib/stores/websocket';
  import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
  import { AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
  import { Icon } from '@immich/ui';
  import { mdiHeart } from '@mdi/js';
+  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';

@@ -28,17 +29,17 @@

  let hasPeople = $derived(data.response.total > 0);

-  const onPersonThumbnailReady = ({ id }: { id: string }) => {
-    for (const person of people) {
-      if (person.id === id) {
-        person.updatedAt = new Date().toISOString();
-      }
-    }
-  };
+  onMount(() => {
+    return websocketEvents.on('on_person_thumbnail', (personId: string) => {
+      people.map((person) => {
+        if (person.id === personId) {
+          person.updatedAt = Date.now().toString();
+        }
+      });
+    });
+  });
 </script>

-<OnEvents {onPersonThumbnailReady} />
-
 <UserPageLayout title={data.meta.title}>
  {#if hasPeople}
    <div class="mb-6 mt-2">
--- a/web/src/routes/(user)/user-settings/+page.svelte
+++ b/web/src/routes/(user)/user-settings/+page.svelte
@@ -1,21 +1,30 @@
 <script lang="ts">
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
  import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
-  import { getKeyboardActions } from '$lib/services/keyboard.service';
-  import { Container } from '@immich/ui';
+  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
+  import { Container, IconButton, modalManager } from '@immich/ui';
+  import { mdiKeyboard } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';

-  type Props = {
+  interface Props {
    data: PageData;
-  };
+  }

  let { data }: Props = $props();
-
-  const { KeyboardShortcuts } = $derived(getKeyboardActions($t));
 </script>

-<UserPageLayout title={data.meta.title} actions={[KeyboardShortcuts]}>
+<UserPageLayout title={data.meta.title}>
+  {#snippet buttons()}
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      icon={mdiKeyboard}
+      aria-label={$t('show_keyboard_shortcuts')}
+      onclick={() => modalManager.show(ShortcutsModal, {})}
+    />
+  {/snippet}
  <Container size="medium" center>
    <UserSettingsList keys={data.keys} sessions={data.sessions} />
  </Container>
--- a/web/src/routes/admin/library-management/(list)/+layout.svelte
+++ b/web/src/routes/admin/library-management/(list)/+layout.svelte
@@ -4,16 +4,14 @@
  import OnEvents from '$lib/components/OnEvents.svelte';
  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
  import { Route } from '$lib/route';
-  import { getLibrariesActions, getLibraryActions } from '$lib/services/library.service';
+  import { getLibrariesActions } from '$lib/services/library.service';
  import { locale } from '$lib/stores/preferences.store';
  import { getBytesWithUnit } from '$lib/utils/byte-units';
  import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk';
  import {
+    Button,
    CommandPaletteDefaultProvider,
    Container,
-    ContextMenuButton,
-    Link,
-    MenuItemType,
    Table,
    TableBody,
    TableCell,
@@ -60,18 +58,13 @@

  const { Create, ScanAll } = $derived(getLibrariesActions($t, libraries));

-  const getActionsForLibrary = (library: LibraryResponseDto) => {
-    const { Detail, Scan, Edit, Delete } = getLibraryActions($t, library);
-    return [Detail, Scan, Edit, MenuItemType.Divider, Delete];
-  };
-
  const classes = {
    column1: 'w-4/12',
    column2: 'w-4/12',
-    column3: 'w-1/12',
-    column4: 'w-1/12',
-    column5: 'w-1/12',
-    column6: 'w-1/12 flex justify-end',
+    column3: 'w-2/12',
+    column4: 'w-2/12',
+    column5: 'w-2/12',
+    column6: 'w-2/12',
  };
 </script>

@@ -96,19 +89,14 @@
            {#each libraries as library (library.id + library.name)}
              {@const { photos, usage, videos } = statistics[library.id]}
              {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(usage, 0)}
-              {@const owner = owners[library.id]}
              <TableRow>
-                <TableCell class={classes.column1}>
-                  <Link href={Route.viewLibrary(library)}>{library.name}</Link>
-                </TableCell>
-                <TableCell class={classes.column2}>
-                  <Link href={Route.viewUser(owner)}>{owner.name}</Link>
-                </TableCell>
+                <TableCell class={classes.column1}>{library.name}</TableCell>
+                <TableCell class={classes.column2}>{owners[library.id].name}</TableCell>
                <TableCell class={classes.column3}>{photos.toLocaleString($locale)}</TableCell>
                <TableCell class={classes.column4}>{videos.toLocaleString($locale)}</TableCell>
                <TableCell class={classes.column5}>{diskUsage} {diskUsageUnit}</TableCell>
                <TableCell class={classes.column6}>
-                  <ContextMenuButton color="primary" aria-label={$t('open')} items={getActionsForLibrary(library)} />
+                  <Button size="small" href={Route.viewLibrary(library)}>{$t('view')}</Button>
                </TableCell>
              </TableRow>
            {/each}
--- a/web/src/service-worker/broadcast-channel.ts
+++ b/web/src/service-worker/broadcast-channel.ts
@@ -0,0 +1,25 @@
+import { handleCancel, handlePreload } from './request';
+
+export const installBroadcastChannelListener = () => {
+  const broadcast = new BroadcastChannel('immich');
+  // eslint-disable-next-line  unicorn/prefer-add-event-listener
+  broadcast.onmessage = (event) => {
+    if (!event.data) {
+      return;
+    }
+
+    const url = new URL(event.data.url, event.origin);
+
+    switch (event.data.type) {
+      case 'preload': {
+        handlePreload(url);
+        break;
+      }
+
+      case 'cancel': {
+        handleCancel(url);
+        break;
+      }
+    }
+  };
+};
--- a/web/src/service-worker/cache.ts
+++ b/web/src/service-worker/cache.ts
@@ -0,0 +1,42 @@
+import { version } from '$service-worker';
+
+const CACHE = `cache-${version}`;
+
+let _cache: Cache | undefined;
+const getCache = async () => {
+  if (_cache) {
+    return _cache;
+  }
+  _cache = await caches.open(CACHE);
+  return _cache;
+};
+
+export const get = async (key: string) => {
+  const cache = await getCache();
+  if (!cache) {
+    return;
+  }
+
+  return cache.match(key);
+};
+
+export const put = async (key: string, response: Response) => {
+  if (response.status !== 200) {
+    return;
+  }
+
+  const cache = await getCache();
+  if (!cache) {
+    return;
+  }
+
+  cache.put(key, response.clone());
+};
+
+export const prune = async () => {
+  for (const key of await caches.keys()) {
+    if (key !== CACHE) {
+      await caches.delete(key);
+    }
+  }
+};
--- a/web/src/service-worker/index.ts
+++ b/web/src/service-worker/index.ts
@@ -2,9 +2,9 @@
 /// <reference no-default-lib="true"/>
 /// <reference lib="esnext" />
 /// <reference lib="webworker" />
-
-import { installMessageListener } from './messaging';
-import { handleFetch as handleAssetFetch } from './request';
+import { installBroadcastChannelListener } from './broadcast-channel';
+import { prune } from './cache';
+import { handleRequest } from './request';

 const ASSET_REQUEST_REGEX = /^\/api\/assets\/[a-f0-9-]+\/(original|thumbnail)/;

@@ -12,10 +12,12 @@ const sw = globalThis as unknown as ServiceWorkerGlobalScope;

 const handleActivate = (event: ExtendableEvent) => {
  event.waitUntil(sw.clients.claim());
+  event.waitUntil(prune());
 };

 const handleInstall = (event: ExtendableEvent) => {
  event.waitUntil(sw.skipWaiting());
+  // do not preload app resources
 };

 const handleFetch = (event: FetchEvent): void => {
@@ -26,7 +28,7 @@ const handleFetch = (event: FetchEvent): void => {
  // Cache requests for thumbnails
  const url = new URL(event.request.url);
  if (url.origin === self.location.origin && ASSET_REQUEST_REGEX.test(url.pathname)) {
-    event.respondWith(handleAssetFetch(event.request));
+    event.respondWith(handleRequest(event.request));
    return;
  }
 };
@@ -34,4 +36,4 @@ const handleFetch = (event: FetchEvent): void => {
 sw.addEventListener('install', handleInstall, { passive: true });
 sw.addEventListener('activate', handleActivate, { passive: true });
 sw.addEventListener('fetch', handleFetch, { passive: true });
-installMessageListener();
+installBroadcastChannelListener();
--- a/web/src/service-worker/messaging.ts
+++ b/web/src/service-worker/messaging.ts
@@ -1,53 +0,0 @@
-/// <reference types="@sveltejs/kit" />
-/// <reference no-default-lib="true"/>
-/// <reference lib="esnext" />
-/// <reference lib="webworker" />
-
-import { handleCancel } from './request';
-
-const sw = globalThis as unknown as ServiceWorkerGlobalScope;
-
-/**
- * Send acknowledgment for a request
- */
-function sendAck(client: Client, requestId: string) {
-  client.postMessage({
-    type: 'ack',
-    requestId,
-  });
-}
-
-/**
- * Handle 'cancel' request: cancel a pending request
- */
-const handleCancelRequest = (client: Client, url: URL, requestId: string) => {
-  sendAck(client, requestId);
-  handleCancel(url);
-};
-
-export const installMessageListener = () => {
-  sw.addEventListener('message', (event) => {
-    if (!event.data?.requestId || !event.data?.type) {
-      return;
-    }
-
-    const requestId = event.data.requestId;
-
-    switch (event.data.type) {
-      case 'cancel': {
-        const url = event.data.url ? new URL(event.data.url, self.location.origin) : undefined;
-        if (!url) {
-          return;
-        }
-
-        const client = event.source;
-        if (!client) {
-          return;
-        }
-
-        handleCancelRequest(client, url, requestId);
-        break;
-      }
-    }
-  });
-};
--- a/web/src/service-worker/request.ts
+++ b/web/src/service-worker/request.ts
@@ -1,68 +1,73 @@
-/// <reference types="@sveltejs/kit" />
-/// <reference no-default-lib="true"/>
-/// <reference lib="esnext" />
-/// <reference lib="webworker" />
+import { get, put } from './cache';

-type PendingRequest = {
-  controller: AbortController;
-  promise: Promise<Response>;
-  cleanupTimeout?: ReturnType<typeof setTimeout>;
+const pendingRequests = new Map<string, AbortController>();
+
+const isURL = (request: URL | RequestInfo): request is URL => (request as URL).href !== undefined;
+const isRequest = (request: RequestInfo): request is Request => (request as Request).url !== undefined;
+
+const assertResponse = (response: Response) => {
+  if (!(response instanceof Response)) {
+    throw new TypeError('Fetch did not return a valid Response object');
+  }
 };

-const pendingRequests = new Map<string, PendingRequest>();
-
-const getRequestKey = (request: URL | Request): string => (request instanceof URL ? request.href : request.url);
-
-const CANCELATION_MESSAGE = 'Request canceled by application';
-const CLEANUP_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes
-
-export const handleFetch = (request: URL | Request): Promise<Response> => {
-  const requestKey = getRequestKey(request);
-  const existing = pendingRequests.get(requestKey);
-
-  if (existing) {
-    // Clone the response since response bodies can only be read once
-    // Each caller gets an independent clone they can consume
-    return existing.promise.then((response) => response.clone());
+const getCacheKey = (request: URL | Request) => {
+  if (isURL(request)) {
+    return request.toString();
  }

-  const pendingRequest: PendingRequest = {
-    controller: new AbortController(),
-    promise: undefined as unknown as Promise<Response>,
-  };
-  pendingRequests.set(requestKey, pendingRequest);
+  if (isRequest(request)) {
+    return request.url;
+  }

-  // NOTE: fetch returns after headers received, not the body
-  pendingRequest.promise = fetch(request, { signal: pendingRequest.controller.signal })
-    .catch((error: unknown) => {
-      const standardError = error instanceof Error ? error : new Error(String(error));
-      if (standardError.name === 'AbortError' || standardError.message === CANCELATION_MESSAGE) {
-        // dummy response avoids network errors in the console for these requests
-        return new Response(undefined, { status: 204 });
-      }
-      throw standardError;
-    })
-    .finally(() => {
-      // Schedule cleanup after timeout to allow response body streaming to complete
-      const cleanupTimeout = setTimeout(() => {
-        pendingRequests.delete(requestKey);
-      }, CLEANUP_TIMEOUT_MS);
-      pendingRequest.cleanupTimeout = cleanupTimeout;
-    });
+  throw new Error(`Invalid request: ${request}`);
+};

-  // Clone for the first caller to keep the original response unconsumed for future callers
-  return pendingRequest.promise.then((response) => response.clone());
+export const handlePreload = async (request: URL | Request) => {
+  try {
+    return await handleRequest(request);
+  } catch (error) {
+    console.error(`Preload failed: ${error}`);
+  }
+};
+
+export const handleRequest = async (request: URL | Request) => {
+  const cacheKey = getCacheKey(request);
+  const cachedResponse = await get(cacheKey);
+  if (cachedResponse) {
+    return cachedResponse;
+  }
+
+  try {
+    const cancelToken = new AbortController();
+    pendingRequests.set(cacheKey, cancelToken);
+    const response = await fetch(request, { signal: cancelToken.signal });
+
+    assertResponse(response);
+    put(cacheKey, response);
+
+    return response;
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      // dummy response avoids network errors in the console for these requests
+      return new Response(undefined, { status: 204 });
+    }
+
+    console.log('Not an abort error', error);
+
+    throw error;
+  } finally {
+    pendingRequests.delete(cacheKey);
+  }
 };

 export const handleCancel = (url: URL) => {
-  const requestKey = getRequestKey(url);
-
-  const pendingRequest = pendingRequests.get(requestKey);
-  if (pendingRequest) {
-    pendingRequest.controller.abort(CANCELATION_MESSAGE);
-    if (pendingRequest.cleanupTimeout) {
-      clearTimeout(pendingRequest.cleanupTimeout);
-    }
-    pendingRequests.delete(requestKey);
+  const cacheKey = getCacheKey(url);
+  const pendingRequest = pendingRequests.get(cacheKey);
+  if (!pendingRequest) {
+    return;
  }
+
+  pendingRequest.abort();
+  pendingRequests.delete(cacheKey);
 };