refactor: actionable toasts

mobile(fix): add keys to people list

.github/workflows/auto-close.yml

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

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

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

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

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

cli/package.json

@@ -35,8 +35,7 @@
     "prettier-plugin-organize-imports": "^4.0.0",
     "typescript": "^5.3.3",
     "typescript-eslint": "^8.28.0",
-    "vite": "^7.0.0",
-    "vite-tsconfig-paths": "^6.0.0",
+    "vite": "^8.0.0",
     "vitest": "^4.0.0",
     "vitest-fetch-mock": "^0.4.0",
     "yaml": "^2.3.1"

cli/vite.config.ts

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

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

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

mobile/lib/domain/models/asset/base_asset.model.dart

@@ -69,8 +69,6 @@ sealed class BaseAsset {
   bool get isLocalOnly => storage == AssetState.local;
   bool get isRemoteOnly => storage == AssetState.remote;
 
-  bool get isEditable => isImage && !isMotionPhoto && this is RemoteAsset;
-
   // Overridden in subclasses
   AssetState get storage;
   String? get localId;

mobile/lib/domain/models/exif.model.dart

@@ -7,8 +7,6 @@ class ExifInfo {
   final String? timeZone;
   final DateTime? dateTimeOriginal;
   final int? rating;
-  final int? width;
-  final int? height;
 
   // GPS
   final double? latitude;
@@ -50,8 +48,6 @@ class ExifInfo {
     this.timeZone,
     this.dateTimeOriginal,
     this.rating,
-    this.width,
-    this.height,
     this.isFlipped = false,
     this.latitude,
     this.longitude,
@@ -78,8 +74,6 @@ class ExifInfo {
         other.timeZone == timeZone &&
         other.dateTimeOriginal == dateTimeOriginal &&
         other.rating == rating &&
-        other.width == width &&
-        other.height == height &&
         other.latitude == latitude &&
         other.longitude == longitude &&
         other.city == city &&
@@ -104,8 +98,6 @@ class ExifInfo {
         timeZone.hashCode ^
         dateTimeOriginal.hashCode ^
         rating.hashCode ^
-        width.hashCode ^
-        height.hashCode ^
         latitude.hashCode ^
         longitude.hashCode ^
         city.hashCode ^
@@ -131,8 +123,6 @@ isFlipped: $isFlipped,
 timeZone: ${timeZone ?? 'NA'},
 dateTimeOriginal: ${dateTimeOriginal ?? 'NA'},
 rating: ${rating ?? 'NA'},
-width: ${width ?? 'NA'},
-height: ${height ?? 'NA'},
 latitude: ${latitude ?? 'NA'},
 longitude: ${longitude ?? 'NA'},
 city: ${city ?? 'NA'},
@@ -156,8 +146,6 @@ exposureSeconds: ${exposureSeconds ?? 'NA'},
     String? timeZone,
     DateTime? dateTimeOriginal,
     int? rating,
-    int? width,
-    int? height,
     double? latitude,
     double? longitude,
     String? city,
@@ -180,8 +168,6 @@ exposureSeconds: ${exposureSeconds ?? 'NA'},
       timeZone: timeZone ?? this.timeZone,
       dateTimeOriginal: dateTimeOriginal ?? this.dateTimeOriginal,
       rating: rating ?? this.rating,
-      width: width ?? this.width,
-      height: height ?? this.height,
       isFlipped: isFlipped ?? this.isFlipped,
       latitude: latitude ?? this.latitude,
       longitude: longitude ?? this.longitude,

mobile/lib/domain/services/asset.service.dart

@@ -1,6 +1,5 @@
 import 'package:immich_mobile/domain/models/album/local_album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/models/asset_edit.model.dart';
 import 'package:immich_mobile/domain/models/exif.model.dart';
 import 'package:immich_mobile/extensions/platform_extensions.dart';
 import 'package:immich_mobile/infrastructure/repositories/local_asset.repository.dart';
@@ -117,12 +116,4 @@ class AssetService {
   Future<List<LocalAlbum>> getSourceAlbums(String localAssetId, {BackupSelection? backupSelection}) {
     return _localAssetRepository.getSourceAlbums(localAssetId, backupSelection: backupSelection);
   }
-
-  Future<List<AssetEdit>> getAssetEdits(String assetId) {
-    return _remoteAssetRepository.getAssetEdits(assetId);
-  }
-
-  Future<void> editAsset(String assetId, List<AssetEdit> edits) {
-    return _remoteAssetRepository.editAsset(assetId, edits);
-  }
 }

mobile/lib/infrastructure/entities/exif.entity.dart

@@ -152,8 +152,6 @@ extension RemoteExifEntityDataDomainEx on RemoteExifEntityData {
     fileSize: fileSize,
     dateTimeOriginal: dateTimeOriginal,
     rating: rating,
-    width: width,
-    height: height,
     timeZone: timeZone,
     make: make,
     model: model,

mobile/lib/infrastructure/repositories/remote_asset.repository.dart

@@ -1,10 +1,7 @@
 import 'package:drift/drift.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/models/asset_edit.model.dart';
 import 'package:immich_mobile/domain/models/exif.model.dart';
 import 'package:immich_mobile/domain/models/stack.model.dart';
-import 'package:immich_mobile/infrastructure/entities/asset_edit.entity.dart';
-import 'package:immich_mobile/infrastructure/entities/asset_edit.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/entities/exif.entity.dart' hide ExifInfo;
 import 'package:immich_mobile/infrastructure/entities/exif.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.dart';
@@ -12,7 +9,6 @@ import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.drift.
 import 'package:immich_mobile/infrastructure/entities/stack.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/repositories/db.repository.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
-import 'package:uuid/uuid.dart';
 
 class RemoteAssetRepository extends DriftDatabaseRepository {
   final Drift _db;
@@ -268,35 +264,4 @@ class RemoteAssetRepository extends DriftDatabaseRepository {
   Future<int> getCount() {
     return _db.managers.remoteAssetEntity.count();
   }
-
-  Future<List<AssetEdit>> getAssetEdits(String assetId) async {
-    final query = _db.assetEditEntity.select()
-      ..where((row) => row.assetId.equals(assetId))
-      ..orderBy([(row) => OrderingTerm.asc(row.sequence)]);
-
-    return query.map((row) => row.toDto()).get();
-  }
-
-  Future<void> editAsset(String assetId, List<AssetEdit> edits) async {
-    await _db.transaction(() async {
-      await _db.batch((batch) async {
-        // delete existing edits
-        batch.deleteWhere(_db.assetEditEntity, (row) => row.assetId.equals(assetId));
-
-        // insert new edits
-        for (var i = 0; i < edits.length; i++) {
-          final edit = edits[i];
-          final companion = AssetEditEntityCompanion(
-            id: Value(const Uuid().v4()),
-            assetId: Value(assetId),
-            action: Value(edit.action),
-            parameters: Value(edit.parameters),
-            sequence: Value(i),
-          );
-
-          batch.insert(_db.assetEditEntity, companion);
-        }
-      });
-    });
-  }
 }

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

@@ -1,578 +0,0 @@
-import 'dart:async';
-import 'dart:math';
-
-import 'package:auto_route/auto_route.dart';
-import 'package:collection/collection.dart';
-import 'package:crop_image/crop_image.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/models/asset_edit.model.dart';
-import 'package:immich_mobile/domain/models/exif.model.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/providers/theme.provider.dart';
-import 'package:immich_mobile/theme/theme_data.dart';
-import 'package:immich_mobile/utils/editor.utils.dart';
-import 'package:immich_ui/immich_ui.dart';
-import 'package:openapi/api.dart' show CropParameters, RotateParameters, MirrorParameters, MirrorAxis;
-
-@RoutePage()
-class DriftEditImagePage extends ConsumerStatefulWidget {
-  final Image image;
-  final BaseAsset asset;
-  final List<AssetEdit> edits;
-  final ExifInfo exifInfo;
-  final Future<void> Function(List<AssetEdit> edits) applyEdits;
-
-  const DriftEditImagePage({
-    super.key,
-    required this.image,
-    required this.asset,
-    required this.edits,
-    required this.exifInfo,
-    required this.applyEdits,
-  });
-
-  @override
-  ConsumerState<DriftEditImagePage> createState() => _DriftEditImagePageState();
-}
-
-typedef AspectRatio = ({double? ratio, String label});
-
-class _DriftEditImagePageState extends ConsumerState<DriftEditImagePage> with TickerProviderStateMixin {
-  late final CropController cropController;
-
-  Duration _rotationAnimationDuration = const Duration(milliseconds: 250);
-
-  int _rotationAngle = 0;
-  bool _flipHorizontal = false;
-  bool _flipVertical = false;
-  double? _aspectRatio;
-
-  late final originalWidth = widget.exifInfo.isFlipped ? widget.exifInfo.height : widget.exifInfo.width;
-  late final originalHeight = widget.exifInfo.isFlipped ? widget.exifInfo.width : widget.exifInfo.height;
-
-  bool _isApplyingEdits = false;
-  bool _hasSheetChanges = false;
-  late final Rect _initialCrop;
-  final String _selectedSegment = 'transform';
-
-  List<AspectRatio> aspectRatios = [
-    (ratio: null, label: 'Free'),
-    (ratio: 1.0, label: '1:1'),
-    (ratio: 16.0 / 9.0, label: '16:9'),
-    (ratio: 3.0 / 2.0, label: '3:2'),
-    (ratio: 7.0 / 5.0, label: '7:5'),
-    (ratio: 9.0 / 16.0, label: '9:16'),
-    (ratio: 2.0 / 3.0, label: '2:3'),
-    (ratio: 5.0 / 7.0, label: '5:7'),
-  ];
-
-  void initEditor() {
-    final existingCrop = widget.edits.firstWhereOrNull((edit) => edit.action == AssetEditAction.crop);
-
-    Rect crop = existingCrop != null && originalWidth != null && originalHeight != null
-        ? convertCropParametersToRect(
-            CropParameters.fromJson(existingCrop.parameters)!,
-            originalWidth!,
-            originalHeight!,
-          )
-        : const Rect.fromLTRB(0, 0, 1, 1);
-
-    cropController = CropController(defaultCrop: crop);
-
-    final transform = normalizeTransformEdits(widget.edits);
-
-    // dont animate to initial rotation
-    _rotationAnimationDuration = const Duration(milliseconds: 0);
-    _rotationAngle = transform.rotation.toInt();
-
-    _flipHorizontal = transform.mirrorHorizontal;
-    _flipVertical = transform.mirrorVertical;
-
-    _initialCrop = cropController.crop;
-  }
-
-  bool get hasUnsavedChanges {
-    final isCropChanged = cropController.crop != _initialCrop;
-    return isCropChanged || _hasSheetChanges;
-  }
-
-  Future<void> _saveEditedImage() async {
-    setState(() {
-      _isApplyingEdits = true;
-    });
-
-    final cropParameters = convertRectToCropParameters(cropController.crop, originalWidth ?? 0, originalHeight ?? 0);
-    final normalizedRotation = (_rotationAngle % 360 + 360) % 360;
-    final edits = <AssetEdit>[];
-
-    if (cropParameters.width != originalWidth || cropParameters.height != originalHeight) {
-      edits.add(AssetEdit(action: AssetEditAction.crop, parameters: cropParameters.toJson()));
-    }
-
-    if (_flipHorizontal) {
-      edits.add(
-        AssetEdit(
-          action: AssetEditAction.mirror,
-          parameters: MirrorParameters(axis: MirrorAxis.horizontal).toJson(),
-        ),
-      );
-    }
-
-    if (_flipVertical) {
-      edits.add(
-        AssetEdit(
-          action: AssetEditAction.mirror,
-          parameters: MirrorParameters(axis: MirrorAxis.vertical).toJson(),
-        ),
-      );
-    }
-
-    if (normalizedRotation != 0) {
-      edits.add(
-        AssetEdit(
-          action: AssetEditAction.rotate,
-          parameters: RotateParameters(angle: normalizedRotation).toJson(),
-        ),
-      );
-    }
-
-    await widget.applyEdits(edits);
-
-    setState(() {
-      _isApplyingEdits = false;
-    });
-  }
-
-  @override
-  void initState() {
-    super.initState();
-    initEditor();
-  }
-
-  @override
-  void dispose() {
-    cropController.dispose();
-    super.dispose();
-  }
-
-  void _rotateLeft() {
-    setState(() {
-      _rotationAnimationDuration = const Duration(milliseconds: 150);
-      _rotationAngle -= 90;
-      _hasSheetChanges = true;
-    });
-  }
-
-  void _rotateRight() {
-    setState(() {
-      _rotationAnimationDuration = const Duration(milliseconds: 150);
-      _rotationAngle += 90;
-      _hasSheetChanges = true;
-    });
-  }
-
-  void _flipHorizontally() {
-    setState(() {
-      if (_rotationAngle % 180 != 0) {
-        // When rotated 90 or 270 degrees, flipping horizontally is equivalent to flipping vertically
-        _flipVertical = !_flipVertical;
-      } else {
-        _flipHorizontal = !_flipHorizontal;
-      }
-      _hasSheetChanges = true;
-    });
-  }
-
-  void _flipVertically() {
-    setState(() {
-      if (_rotationAngle % 180 != 0) {
-        // When rotated 90 or 270 degrees, flipping vertically is equivalent to flipping horizontally
-        _flipHorizontal = !_flipHorizontal;
-      } else {
-        _flipVertical = !_flipVertical;
-      }
-      _hasSheetChanges = true;
-    });
-  }
-
-  void _applyAspectRatio(double? ratio) {
-    setState(() {
-      if (ratio != null && _rotationAngle % 180 != 0) {
-        // When rotated 90 or 270 degrees, swap width and height for aspect ratio calculations
-        ratio = 1 / ratio!;
-      }
-
-      cropController.aspectRatio = ratio;
-      _aspectRatio = ratio;
-    });
-  }
-
-  void _resetEdits() {
-    setState(() {
-      cropController.aspectRatio = null;
-      cropController.crop = const Rect.fromLTRB(0, 0, 1, 1);
-      _rotationAnimationDuration = const Duration(milliseconds: 250);
-      _rotationAngle = 0;
-      _flipHorizontal = false;
-      _flipVertical = false;
-      _aspectRatio = null;
-    });
-  }
-
-  bool get hasEdits {
-    final isCropped = cropController.crop != const Rect.fromLTRB(0, 0, 1, 1);
-    final isRotated = (_rotationAngle % 360 + 360) % 360 != 0;
-    final isFlipped = _flipHorizontal || _flipVertical;
-
-    return isCropped || isRotated || isFlipped;
-  }
-
-  Future<bool> _showDiscardChangesDialog() async {
-    return await showDialog<bool>(
-          context: context,
-          builder: (context) => AlertDialog(
-            title: Text('editor_discard_edits_title'.tr()),
-            content: Text('editor_discard_edits_prompt'.tr()),
-            actions: [
-              TextButton(
-                onPressed: () => Navigator.of(context).pop(false),
-                style: ButtonStyle(
-                  foregroundColor: WidgetStateProperty.all(context.themeData.colorScheme.onSurfaceVariant),
-                ),
-                child: Text('cancel'.tr()),
-              ),
-              TextButton(onPressed: () => Navigator.of(context).pop(true), child: Text('confirm'.tr())),
-            ],
-          ),
-        ) ??
-        false;
-  }
-
-  Future<void> _handleClose() async {
-    if (hasUnsavedChanges) {
-      final shouldDiscard = await _showDiscardChangesDialog();
-      if (shouldDiscard && mounted) {
-        Navigator.of(context).pop();
-      }
-    } else {
-      Navigator.of(context).pop();
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return PopScope(
-      canPop: !hasUnsavedChanges,
-      onPopInvokedWithResult: (didPop, result) async {
-        if (didPop) return;
-        final shouldDiscard = await _showDiscardChangesDialog();
-        if (shouldDiscard && mounted) {
-          Navigator.of(context).pop();
-        }
-      },
-      child: Theme(
-        data: getThemeData(colorScheme: ref.watch(immichThemeProvider).dark, locale: context.locale),
-        child: Scaffold(
-          appBar: AppBar(
-            backgroundColor: Colors.black,
-            title: Text("edit".tr()),
-            leading: ImmichCloseButton(onPressed: _handleClose),
-            actions: [
-              _isApplyingEdits
-                  ? const Padding(
-                      padding: EdgeInsets.all(8.0),
-                      child: SizedBox(width: 28, height: 28, child: CircularProgressIndicator(strokeWidth: 2.5)),
-                    )
-                  : ImmichIconButton(
-                      icon: Icons.done_rounded,
-                      color: ImmichColor.primary,
-                      variant: ImmichVariant.ghost,
-                      onPressed: _saveEditedImage,
-                    ),
-            ],
-          ),
-          backgroundColor: Colors.black,
-          body: SafeArea(
-            bottom: false,
-            child: Column(
-              children: [
-                Expanded(
-                  child: LayoutBuilder(
-                    builder: (BuildContext context, BoxConstraints constraints) {
-                      // Calculate the bounding box size needed for the rotated container
-                      final baseWidth = constraints.maxWidth * 0.9;
-                      final baseHeight = constraints.maxHeight * 0.95;
-
-                      return Center(
-                        child: AnimatedRotation(
-                          turns: _rotationAngle / 360,
-                          duration: _rotationAnimationDuration,
-                          curve: Curves.easeInOut,
-                          child: Transform(
-                            alignment: Alignment.center,
-                            transform: Matrix4.identity()
-                              ..scaleByDouble(_flipHorizontal ? -1.0 : 1.0, _flipVertical ? -1.0 : 1.0, 1.0, 1.0),
-                            child: Container(
-                              padding: const EdgeInsets.all(10),
-                              width: (_rotationAngle % 180 == 0) ? baseWidth : baseHeight,
-                              height: (_rotationAngle % 180 == 0) ? baseHeight : baseWidth,
-                              child: FutureBuilder(
-                                future: resolveImage(widget.image.image),
-                                builder: (context, data) {
-                                  if (!data.hasData) {
-                                    return const Center(child: CircularProgressIndicator());
-                                  }
-
-                                  return CropImage(
-                                    controller: cropController,
-                                    image: widget.image,
-                                    gridColor: Colors.white,
-                                  );
-                                },
-                              ),
-                            ),
-                          ),
-                        ),
-                      );
-                    },
-                  ),
-                ),
-                AnimatedSize(
-                  duration: const Duration(milliseconds: 250),
-                  curve: Curves.easeInOut,
-                  alignment: Alignment.bottomCenter,
-                  clipBehavior: Clip.none,
-                  child: Container(
-                    width: double.infinity,
-                    decoration: BoxDecoration(
-                      color: ref.watch(immichThemeProvider).dark.surface,
-                      borderRadius: const BorderRadius.only(
-                        topLeft: Radius.circular(20),
-                        topRight: Radius.circular(20),
-                      ),
-                    ),
-                    child: Column(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        AnimatedCrossFade(
-                          duration: const Duration(milliseconds: 250),
-                          firstCurve: Curves.easeInOut,
-                          secondCurve: Curves.easeInOut,
-                          sizeCurve: Curves.easeInOut,
-                          crossFadeState: _selectedSegment == 'transform'
-                              ? CrossFadeState.showFirst
-                              : CrossFadeState.showSecond,
-                          firstChild: _TransformControls(
-                            onRotateLeft: _rotateLeft,
-                            onRotateRight: _rotateRight,
-                            onFlipHorizontal: _flipHorizontally,
-                            onFlipVertical: _flipVertically,
-                            onAspectRatioSelected: _applyAspectRatio,
-                            aspectRatio: _aspectRatio,
-                          ),
-                          // this will never show since the segmented button is not shown yet
-                          secondChild: const Text("Filters coming soon!"),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.only(bottom: 36, left: 24, right: 24),
-                          child: Row(
-                            children: [
-                              // SegmentedButton(
-                              //   segments: [
-                              //     const ButtonSegment<String>(
-                              //       value: 'transform',
-                              //       label: Text('Transform'),
-                              //       icon: Icon(Icons.transform),
-                              //     ),
-                              //     const ButtonSegment<String>(
-                              //       value: 'filters',
-                              //       label: Text('Filters'),
-                              //       icon: Icon(Icons.color_lens),
-                              //     ),
-                              //   ],
-                              //   selected: {selectedSegment},
-                              //   onSelectionChanged: (value) => setState(() {
-                              //     selectedSegment = value.first;
-                              //   }),
-                              //   showSelectedIcon: false,
-                              // ),
-                              const Spacer(),
-                              ImmichTextButton(
-                                labelText: 'reset'.tr(),
-                                onPressed: _resetEdits,
-                                variant: ImmichVariant.ghost,
-                                expanded: false,
-                                disabled: !hasEdits,
-                              ),
-                            ],
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
-                ),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-class _AspectRatioButton extends StatelessWidget {
-  final double? currentAspectRatio;
-  final double? ratio;
-  final String label;
-  final VoidCallback onPressed;
-
-  const _AspectRatioButton({
-    required this.currentAspectRatio,
-    required this.ratio,
-    required this.label,
-    required this.onPressed,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      mainAxisSize: MainAxisSize.max,
-      children: [
-        IconButton(
-          iconSize: 36,
-          icon: Transform.rotate(
-            angle: (ratio ?? 1.0) < 1.0 ? pi / 2 : 0,
-            child: Icon(switch (label) {
-              'Free' => Icons.crop_free_rounded,
-              '1:1' => Icons.crop_square_rounded,
-              '16:9' => Icons.crop_16_9_rounded,
-              '3:2' => Icons.crop_3_2_rounded,
-              '7:5' => Icons.crop_7_5_rounded,
-              '9:16' => Icons.crop_16_9_rounded,
-              '2:3' => Icons.crop_3_2_rounded,
-              '5:7' => Icons.crop_7_5_rounded,
-              _ => Icons.crop_free_rounded,
-            }, color: currentAspectRatio == ratio ? context.primaryColor : context.themeData.iconTheme.color),
-          ),
-          onPressed: onPressed,
-        ),
-        Text(label, style: context.textTheme.displayMedium),
-      ],
-    );
-  }
-}
-
-class _AspectRatioSelector extends StatelessWidget {
-  final double? currentAspectRatio;
-  final void Function(double?) onAspectRatioSelected;
-
-  const _AspectRatioSelector({required this.currentAspectRatio, required this.onAspectRatioSelected});
-
-  @override
-  Widget build(BuildContext context) {
-    final aspectRatios = <String, double?>{
-      'Free': null,
-      '1:1': 1.0,
-      '16:9': 16 / 9,
-      '3:2': 3 / 2,
-      '7:5': 7 / 5,
-      '9:16': 9 / 16,
-      '2:3': 2 / 3,
-      '5:7': 5 / 7,
-    };
-
-    return SingleChildScrollView(
-      scrollDirection: Axis.horizontal,
-      child: Row(
-        children: aspectRatios.entries.map((entry) {
-          return Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 8.0),
-            child: _AspectRatioButton(
-              currentAspectRatio: currentAspectRatio,
-              ratio: entry.value,
-              label: entry.key,
-              onPressed: () => onAspectRatioSelected(entry.value),
-            ),
-          );
-        }).toList(),
-      ),
-    );
-  }
-}
-
-class _TransformControls extends StatelessWidget {
-  final VoidCallback onRotateLeft;
-  final VoidCallback onRotateRight;
-  final VoidCallback onFlipHorizontal;
-  final VoidCallback onFlipVertical;
-  final void Function(double?) onAspectRatioSelected;
-  final double? aspectRatio;
-
-  const _TransformControls({
-    required this.onRotateLeft,
-    required this.onRotateRight,
-    required this.onFlipHorizontal,
-    required this.onFlipVertical,
-    required this.onAspectRatioSelected,
-    required this.aspectRatio,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        Padding(
-          padding: const EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 10),
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Row(
-                children: [
-                  ImmichIconButton(
-                    icon: Icons.rotate_left,
-                    variant: ImmichVariant.ghost,
-                    color: ImmichColor.secondary,
-                    onPressed: onRotateLeft,
-                  ),
-                  const SizedBox(width: 8),
-                  ImmichIconButton(
-                    icon: Icons.rotate_right,
-                    variant: ImmichVariant.ghost,
-                    color: ImmichColor.secondary,
-                    onPressed: onRotateRight,
-                  ),
-                ],
-              ),
-              Row(
-                children: [
-                  ImmichIconButton(
-                    icon: Icons.flip,
-                    variant: ImmichVariant.ghost,
-                    color: ImmichColor.secondary,
-                    onPressed: onFlipHorizontal,
-                  ),
-                  const SizedBox(width: 8),
-                  Transform.rotate(
-                    angle: pi / 2,
-                    child: ImmichIconButton(
-                      icon: Icons.flip,
-                      variant: ImmichVariant.ghost,
-                      color: ImmichColor.secondary,
-                      onPressed: onFlipVertical,
-                    ),
-                  ),
-                ],
-              ),
-            ],
-          ),
-        ),
-        _AspectRatioSelector(currentAspectRatio: aspectRatio, onAspectRatioSelected: onAspectRatioSelected),
-        const SizedBox(height: 32),
-      ],
-    );
-  }
-}

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

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

mobile/lib/presentation/pages/editing/drift_crop.page.dart

@@ -0,0 +1,179 @@
+import 'dart:async';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:crop_image/crop_image.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/utils/hooks/crop_controller_hook.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+/// A widget for cropping an image.
+/// This widget uses [HookWidget] to manage its lifecycle and state. It allows
+/// users to crop an image and then navigate to the [EditImagePage] with the
+/// cropped image.
+
+@RoutePage()
+class DriftCropImagePage extends HookWidget {
+  final Image image;
+  final BaseAsset asset;
+  const DriftCropImagePage({super.key, required this.image, required this.asset});
+
+  @override
+  Widget build(BuildContext context) {
+    final cropController = useCropController();
+    final aspectRatio = useState<double?>(null);
+
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: context.scaffoldBackgroundColor,
+        title: Text("crop".tr()),
+        leading: const ImmichCloseButton(),
+        actions: [
+          ImmichIconButton(
+            icon: Icons.done_rounded,
+            color: ImmichColor.primary,
+            variant: ImmichVariant.ghost,
+            onPressed: () async {
+              final croppedImage = await cropController.croppedImage();
+              unawaited(context.pushRoute(DriftEditImageRoute(asset: asset, image: croppedImage, isEdited: true)));
+            },
+          ),
+        ],
+      ),
+      backgroundColor: context.scaffoldBackgroundColor,
+      body: SafeArea(
+        child: LayoutBuilder(
+          builder: (BuildContext context, BoxConstraints constraints) {
+            return Column(
+              children: [
+                Container(
+                  padding: const EdgeInsets.only(top: 20),
+                  width: constraints.maxWidth * 0.9,
+                  height: constraints.maxHeight * 0.6,
+                  child: CropImage(controller: cropController, image: image, gridColor: Colors.white),
+                ),
+                Expanded(
+                  child: Container(
+                    width: double.infinity,
+                    decoration: BoxDecoration(
+                      color: context.scaffoldBackgroundColor,
+                      borderRadius: const BorderRadius.only(
+                        topLeft: Radius.circular(20),
+                        topRight: Radius.circular(20),
+                      ),
+                    ),
+                    child: Center(
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Padding(
+                            padding: const EdgeInsets.only(left: 20, right: 20, bottom: 10),
+                            child: Row(
+                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                              children: [
+                                ImmichIconButton(
+                                  icon: Icons.rotate_left,
+                                  variant: ImmichVariant.ghost,
+                                  color: ImmichColor.secondary,
+                                  onPressed: () => cropController.rotateLeft(),
+                                ),
+                                ImmichIconButton(
+                                  icon: Icons.rotate_right,
+                                  variant: ImmichVariant.ghost,
+                                  color: ImmichColor.secondary,
+                                  onPressed: () => cropController.rotateRight(),
+                                ),
+                              ],
+                            ),
+                          ),
+                          Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                            children: <Widget>[
+                              _AspectRatioButton(
+                                cropController: cropController,
+                                aspectRatio: aspectRatio,
+                                ratio: null,
+                                label: 'Free',
+                              ),
+                              _AspectRatioButton(
+                                cropController: cropController,
+                                aspectRatio: aspectRatio,
+                                ratio: 1.0,
+                                label: '1:1',
+                              ),
+                              _AspectRatioButton(
+                                cropController: cropController,
+                                aspectRatio: aspectRatio,
+                                ratio: 16.0 / 9.0,
+                                label: '16:9',
+                              ),
+                              _AspectRatioButton(
+                                cropController: cropController,
+                                aspectRatio: aspectRatio,
+                                ratio: 3.0 / 2.0,
+                                label: '3:2',
+                              ),
+                              _AspectRatioButton(
+                                cropController: cropController,
+                                aspectRatio: aspectRatio,
+                                ratio: 7.0 / 5.0,
+                                label: '7:5',
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            );
+          },
+        ),
+      ),
+    );
+  }
+}
+
+class _AspectRatioButton extends StatelessWidget {
+  final CropController cropController;
+  final ValueNotifier<double?> aspectRatio;
+  final double? ratio;
+  final String label;
+
+  const _AspectRatioButton({
+    required this.cropController,
+    required this.aspectRatio,
+    required this.ratio,
+    required this.label,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        IconButton(
+          icon: Icon(switch (label) {
+            'Free' => Icons.crop_free_rounded,
+            '1:1' => Icons.crop_square_rounded,
+            '16:9' => Icons.crop_16_9_rounded,
+            '3:2' => Icons.crop_3_2_rounded,
+            '7:5' => Icons.crop_7_5_rounded,
+            _ => Icons.crop_free_rounded,
+          }, color: aspectRatio.value == ratio ? context.primaryColor : context.themeData.iconTheme.color),
+          onPressed: () {
+            cropController.crop = const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9);
+            aspectRatio.value = ratio;
+            cropController.aspectRatio = ratio;
+          },
+        ),
+        Text(label, style: context.textTheme.displayMedium),
+      ],
+    );
+  }
+}

mobile/lib/presentation/pages/editing/drift_edit.page.dart

@@ -0,0 +1,153 @@
+import 'dart:async';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/background_sync.provider.dart';
+import 'package:immich_mobile/repositories/file_media.repository.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/foreground_upload.service.dart';
+import 'package:immich_mobile/utils/image_converter.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:logging/logging.dart';
+import 'package:path/path.dart' as p;
+
+/// A stateless widget that provides functionality for editing an image.
+///
+/// This widget allows users to edit an image provided either as an [Asset] or
+/// directly as an [Image]. It ensures that exactly one of these is provided.
+///
+/// It also includes a conversion method to convert an [Image] to a [Uint8List] to save the image on the user's phone
+/// They automatically navigate to the [HomePage] with the edited image saved and they eventually get backed up to the server.
+@immutable
+@RoutePage()
+class DriftEditImagePage extends ConsumerWidget {
+  final BaseAsset asset;
+  final Image image;
+  final bool isEdited;
+
+  const DriftEditImagePage({super.key, required this.asset, required this.image, required this.isEdited});
+
+  void _exitEditing(BuildContext context) {
+    // this assumes that the only way to get to this page is from the AssetViewerRoute
+    context.navigator.popUntil((route) => route.data?.name == AssetViewerRoute.name);
+  }
+
+  Future<void> _saveEditedImage(BuildContext context, BaseAsset asset, Image image, WidgetRef ref) async {
+    try {
+      final Uint8List imageData = await imageToUint8List(image);
+      LocalAsset? localAsset;
+
+      try {
+        localAsset = await ref
+            .read(fileMediaRepositoryProvider)
+            .saveLocalAsset(imageData, title: "${p.withoutExtension(asset.name)}_edited.jpg");
+      } on PlatformException catch (e) {
+        // OS might not return the saved image back, so we handle that gracefully
+        // This can happen if app does not have full library access
+        Logger("SaveEditedImage").warning("Failed to retrieve the saved image back from OS", e);
+      }
+
+      unawaited(ref.read(backgroundSyncProvider).syncLocal(full: true));
+      _exitEditing(context);
+      ImmichToast.show(durationInSecond: 3, context: context, msg: 'Image Saved!');
+
+      if (localAsset == null) {
+        return;
+      }
+
+      await ref.read(foregroundUploadServiceProvider).uploadManual([localAsset]);
+    } catch (e) {
+      ImmichToast.show(
+        durationInSecond: 6,
+        context: context,
+        msg: "error_saving_image".tr(namedArgs: {'error': e.toString()}),
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("edit".tr()),
+        backgroundColor: context.scaffoldBackgroundColor,
+        leading: IconButton(
+          icon: Icon(Icons.close_rounded, color: context.primaryColor, size: 24),
+          onPressed: () => _exitEditing(context),
+        ),
+        actions: <Widget>[
+          TextButton(
+            onPressed: isEdited ? () => _saveEditedImage(context, asset, image, ref) : null,
+            child: Text("save_to_gallery".tr(), style: TextStyle(color: isEdited ? context.primaryColor : Colors.grey)),
+          ),
+        ],
+      ),
+      backgroundColor: context.scaffoldBackgroundColor,
+      body: Center(
+        child: ConstrainedBox(
+          constraints: BoxConstraints(maxHeight: context.height * 0.7, maxWidth: context.width * 0.9),
+          child: Container(
+            decoration: BoxDecoration(
+              borderRadius: const BorderRadius.all(Radius.circular(7)),
+              boxShadow: [
+                BoxShadow(
+                  color: Colors.black.withValues(alpha: 0.2),
+                  spreadRadius: 2,
+                  blurRadius: 10,
+                  offset: const Offset(0, 3),
+                ),
+              ],
+            ),
+            child: ClipRRect(
+              borderRadius: const BorderRadius.all(Radius.circular(7)),
+              child: Image(image: image.image, fit: BoxFit.contain),
+            ),
+          ),
+        ),
+      ),
+      bottomNavigationBar: Container(
+        height: 70,
+        margin: const EdgeInsets.only(bottom: 60, right: 10, left: 10, top: 10),
+        decoration: BoxDecoration(
+          color: context.scaffoldBackgroundColor,
+          borderRadius: const BorderRadius.all(Radius.circular(30)),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: <Widget>[
+            Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                IconButton(
+                  icon: Icon(Icons.crop_rotate_rounded, color: context.themeData.iconTheme.color, size: 25),
+                  onPressed: () {
+                    context.pushRoute(DriftCropImageRoute(asset: asset, image: image));
+                  },
+                ),
+                Text("crop".tr(), style: context.textTheme.displayMedium),
+              ],
+            ),
+            Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                IconButton(
+                  icon: Icon(Icons.filter, color: context.themeData.iconTheme.color, size: 25),
+                  onPressed: () {
+                    context.pushRoute(DriftFilterImageRoute(asset: asset, image: image));
+                  },
+                ),
+                Text("filter".tr(), style: context.textTheme.displayMedium),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/pages/editing/drift_filter.page.dart

@@ -0,0 +1,159 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:immich_mobile/constants/filters.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+/// A widget for filtering an image.
+/// This widget uses [HookWidget] to manage its lifecycle and state. It allows
+/// users to add filters to an image and then navigate to the [EditImagePage] with the
+/// final composition.'
+@RoutePage()
+class DriftFilterImagePage extends HookWidget {
+  final Image image;
+  final BaseAsset asset;
+
+  const DriftFilterImagePage({super.key, required this.image, required this.asset});
+
+  @override
+  Widget build(BuildContext context) {
+    final colorFilter = useState<ColorFilter>(filters[0]);
+    final selectedFilterIndex = useState<int>(0);
+
+    Future<ui.Image> createFilteredImage(ui.Image inputImage, ColorFilter filter) {
+      final completer = Completer<ui.Image>();
+      final size = Size(inputImage.width.toDouble(), inputImage.height.toDouble());
+      final recorder = ui.PictureRecorder();
+      final canvas = Canvas(recorder);
+
+      final paint = Paint()..colorFilter = filter;
+      canvas.drawImage(inputImage, Offset.zero, paint);
+
+      recorder.endRecording().toImage(size.width.round(), size.height.round()).then((image) {
+        completer.complete(image);
+      });
+
+      return completer.future;
+    }
+
+    void applyFilter(ColorFilter filter, int index) {
+      colorFilter.value = filter;
+      selectedFilterIndex.value = index;
+    }
+
+    Future<Image> applyFilterAndConvert(ColorFilter filter) async {
+      final completer = Completer<ui.Image>();
+      image.image
+          .resolve(ImageConfiguration.empty)
+          .addListener(
+            ImageStreamListener((ImageInfo info, bool _) {
+              completer.complete(info.image);
+            }),
+          );
+      final uiImage = await completer.future;
+
+      final filteredUiImage = await createFilteredImage(uiImage, filter);
+      final byteData = await filteredUiImage.toByteData(format: ui.ImageByteFormat.png);
+      final pngBytes = byteData!.buffer.asUint8List();
+
+      return Image.memory(pngBytes, fit: BoxFit.contain);
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: context.scaffoldBackgroundColor,
+        title: Text("filter".tr()),
+        leading: CloseButton(color: context.primaryColor),
+        actions: [
+          IconButton(
+            icon: Icon(Icons.done_rounded, color: context.primaryColor, size: 24),
+            onPressed: () async {
+              final filteredImage = await applyFilterAndConvert(colorFilter.value);
+              unawaited(context.pushRoute(DriftEditImageRoute(asset: asset, image: filteredImage, isEdited: true)));
+            },
+          ),
+        ],
+      ),
+      backgroundColor: context.scaffoldBackgroundColor,
+      body: Column(
+        children: [
+          SizedBox(
+            height: context.height * 0.7,
+            child: Center(
+              child: ColorFiltered(colorFilter: colorFilter.value, child: image),
+            ),
+          ),
+          SizedBox(
+            height: 120,
+            child: ListView.builder(
+              scrollDirection: Axis.horizontal,
+              itemCount: filters.length,
+              itemBuilder: (context, index) {
+                return Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                  child: _FilterButton(
+                    image: image,
+                    label: filterNames[index],
+                    filter: filters[index],
+                    isSelected: selectedFilterIndex.value == index,
+                    onTap: () => applyFilter(filters[index], index),
+                  ),
+                );
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _FilterButton extends StatelessWidget {
+  final Image image;
+  final String label;
+  final ColorFilter filter;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const _FilterButton({
+    required this.image,
+    required this.label,
+    required this.filter,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        GestureDetector(
+          onTap: onTap,
+          child: Container(
+            width: 80,
+            height: 80,
+            decoration: BoxDecoration(
+              borderRadius: const BorderRadius.all(Radius.circular(10)),
+              border: isSelected ? Border.all(color: context.primaryColor, width: 3) : null,
+            ),
+            child: ClipRRect(
+              borderRadius: const BorderRadius.all(Radius.circular(10)),
+              child: ColorFiltered(
+                colorFilter: filter,
+                child: FittedBox(fit: BoxFit.cover, child: image),
+              ),
+            ),
+          ),
+        ),
+        const SizedBox(height: 10),
+        Text(label, style: context.themeData.textTheme.bodyMedium),
+      ],
+    );
+  }
+}

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

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

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

@@ -1,21 +1,11 @@
-import 'dart:async';
-
 import 'package:auto_route/auto_route.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/constants/enums.dart';
-import 'package:immich_mobile/domain/models/asset_edit.model.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
-import 'package:immich_mobile/providers/websocket.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 class EditImageActionButton extends ConsumerWidget {
   const EditImageActionButton({super.key});
@@ -24,47 +14,13 @@ class EditImageActionButton extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final currentAsset = ref.watch(assetViewerProvider.select((s) => s.currentAsset));
 
-    Future<void> editImage(List<AssetEdit> edits) async {
-      if (currentAsset == null || currentAsset.remoteId == null) {
+    onPress() {
+      if (currentAsset == null) {
         return;
       }
 
-      try {
-        final completer = ref.read(websocketProvider.notifier).waitForEvent("AssetEditReadyV1", (dynamic data) {
-          final eventData = data as Map<String, dynamic>;
-          return eventData["asset"]['id'] == currentAsset.remoteId;
-        }, const Duration(seconds: 10));
-
-        await ref.read(actionProvider.notifier).applyEdits(ActionSource.viewer, edits);
-        await completer;
-
-        ImmichToast.show(context: context, msg: 'success'.tr(), toastType: ToastType.success);
-
-        context.pop();
-      } catch (e) {
-        ImmichToast.show(context: context, msg: 'error_title'.tr(), toastType: ToastType.error);
-        return;
-      }
-    }
-
-    Future<void> onPress() async {
-      if (currentAsset == null || currentAsset.remoteId == null) {
-        return;
-      }
-
-      final imageProvider = getFullImageProvider(currentAsset, edited: false);
-
-      final image = Image(image: imageProvider);
-      final edits = await ref.read(remoteAssetRepositoryProvider).getAssetEdits(currentAsset.remoteId!);
-      final exifInfo = await ref.read(remoteAssetRepositoryProvider).getExif(currentAsset.remoteId!);
-
-      if (exifInfo == null) {
-        return;
-      }
-
-      await context.pushRoute(
-        DriftEditImageRoute(asset: currentAsset, image: image, edits: edits, exifInfo: exifInfo, applyEdits: editImage),
-      );
+      final image = Image(image: getFullImageProvider(currentAsset));
+      context.pushRoute(DriftEditImageRoute(asset: currentAsset, image: image, isEdited: false));
     }
 
     return BaseActionButton(

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

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

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

@@ -3,18 +3,16 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/add_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/edit_image_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/add_action_button.widget.dart';
 import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
 import 'package:immich_mobile/providers/routes.provider.dart';
-import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
-import 'package:immich_mobile/utils/semver.dart';
 import 'package:immich_mobile/widgets/asset_viewer/video_controls.dart';
 
 class ViewerBottomBar extends ConsumerWidget {
@@ -32,7 +30,6 @@ class ViewerBottomBar extends ConsumerWidget {
     final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
     final showingDetails = ref.watch(assetViewerProvider.select((s) => s.showingDetails));
     final isInLockedView = ref.watch(inLockedViewProvider);
-    final serverInfo = ref.watch(serverInfoProvider);
 
     final originalTheme = context.themeData;
 
@@ -41,9 +38,7 @@ class ViewerBottomBar extends ConsumerWidget {
 
       if (!isInLockedView) ...[
         if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
-        // edit sync was added in 2.6.0
-        if (asset.isEditable && serverInfo.serverVersion >= const SemVer(major: 2, minor: 6, patch: 0))
-          const EditImageActionButton(),
+        if (asset.type == AssetType.image) const EditImageActionButton(),
         if (asset.hasRemote) AddActionButton(originalTheme: originalTheme),
 
         if (isOwner) ...[

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

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

mobile/lib/presentation/widgets/images/image_provider.dart

@@ -135,7 +135,7 @@ mixin CancellableImageProviderMixin<T extends Object> on CancellableImageProvide
   }
 }
 
-ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080, 1920), bool edited = true}) {
+ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080, 1920)}) {
   // Create new provider and cache it
   final ImageProvider provider;
   if (_shouldUseLocalAsset(asset)) {
@@ -158,14 +158,13 @@ ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080
       thumbhash: thumbhash,
       assetType: asset.type,
       isAnimated: asset.isAnimatedImage,
-      edited: edited,
     );
   }
 
   return provider;
 }
 
-ImageProvider? getThumbnailImageProvider(BaseAsset asset, {Size size = kThumbnailResolution, bool edited = true}) {
+ImageProvider? getThumbnailImageProvider(BaseAsset asset, {Size size = kThumbnailResolution}) {
   if (_shouldUseLocalAsset(asset)) {
     final id = asset is LocalAsset ? asset.id : (asset as RemoteAsset).localId!;
     return LocalThumbProvider(id: id, size: size, assetType: asset.type);
@@ -173,7 +172,7 @@ ImageProvider? getThumbnailImageProvider(BaseAsset asset, {Size size = kThumbnai
 
   final assetId = asset is RemoteAsset ? asset.id : (asset as LocalAsset).remoteId;
   final thumbhash = asset is RemoteAsset ? asset.thumbHash ?? "" : "";
-  return assetId != null ? RemoteImageProvider.thumbnail(assetId: assetId, thumbhash: thumbhash, edited: edited) : null;
+  return assetId != null ? RemoteImageProvider.thumbnail(assetId: assetId, thumbhash: thumbhash) : null;
 }
 
 bool _shouldUseLocalAsset(BaseAsset asset) =>

mobile/lib/presentation/widgets/images/local_image_provider.dart

@@ -68,8 +68,6 @@ class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProv
 
   @override
   ImageStreamCompleter loadImage(LocalFullImageProvider key, ImageDecoderCallback decode) {
-    isCancelled = false;
-
     if (key.isAnimated) {
       return AnimatedImageStreamCompleter(
         stream: _animatedCodec(key, decode),

mobile/lib/presentation/widgets/images/remote_image_provider.dart

@@ -16,8 +16,8 @@ class RemoteImageProvider extends CancellableImageProvider<RemoteImageProvider>
 
   RemoteImageProvider({required this.url});
 
-  RemoteImageProvider.thumbnail({required String assetId, required String thumbhash, bool edited = true})
-    : url = getThumbnailUrlForRemoteId(assetId, thumbhash: thumbhash, edited: edited);
+  RemoteImageProvider.thumbnail({required String assetId, required String thumbhash})
+    : url = getThumbnailUrlForRemoteId(assetId, thumbhash: thumbhash);
 
   @override
   Future<RemoteImageProvider> obtainKey(ImageConfiguration configuration) {
@@ -60,14 +60,12 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
   final String thumbhash;
   final AssetType assetType;
   final bool isAnimated;
-  final bool edited;
 
   RemoteFullImageProvider({
     required this.assetId,
     required this.thumbhash,
     required this.assetType,
     required this.isAnimated,
-    this.edited = true,
   });
 
   @override
@@ -77,8 +75,6 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
 
   @override
   ImageStreamCompleter loadImage(RemoteFullImageProvider key, ImageDecoderCallback decode) {
-    isCancelled = false;
-
     if (key.isAnimated) {
       return AnimatedImageStreamCompleter(
         stream: _animatedCodec(key, decode),
@@ -95,9 +91,7 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
 
     return OneFramePlaceholderImageStreamCompleter(
       _codec(key, decode),
-      initialImage: getInitialImage(
-        RemoteImageProvider.thumbnail(assetId: key.assetId, thumbhash: key.thumbhash, edited: key.edited),
-      ),
+      initialImage: getInitialImage(RemoteImageProvider.thumbnail(assetId: key.assetId, thumbhash: key.thumbhash)),
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Asset Id', key.assetId),
@@ -116,12 +110,7 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
     }
 
     final previewRequest = request = RemoteImageRequest(
-      uri: getThumbnailUrlForRemoteId(
-        key.assetId,
-        type: AssetMediaSize.preview,
-        thumbhash: key.thumbhash,
-        edited: key.edited,
-      ),
+      uri: getThumbnailUrlForRemoteId(key.assetId, type: AssetMediaSize.preview, thumbhash: key.thumbhash),
     );
     final loadOriginal = assetType == AssetType.image && AppSetting.get(Setting.loadOriginal);
     yield* loadRequest(previewRequest, decode, evictOnError: !loadOriginal);
@@ -135,9 +124,7 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
       return;
     }
 
-    final originalRequest = request = RemoteImageRequest(
-      uri: getOriginalUrlForRemoteId(key.assetId, edited: key.edited),
-    );
+    final originalRequest = request = RemoteImageRequest(uri: getOriginalUrlForRemoteId(key.assetId));
     yield* loadRequest(originalRequest, decode);
   }
 
@@ -172,15 +159,12 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
     if (other is RemoteFullImageProvider) {
-      return assetId == other.assetId &&
-          thumbhash == other.thumbhash &&
-          isAnimated == other.isAnimated &&
-          edited == other.edited;
+      return assetId == other.assetId && thumbhash == other.thumbhash && isAnimated == other.isAnimated;
     }
 
     return false;
   }
 
   @override
-  int get hashCode => assetId.hashCode ^ thumbhash.hashCode ^ isAnimated.hashCode ^ edited.hashCode;
+  int get hashCode => assetId.hashCode ^ thumbhash.hashCode ^ isAnimated.hashCode;
 }

mobile/lib/providers/infrastructure/action.provider.dart

@@ -5,20 +5,19 @@ import 'package:background_downloader/background_downloader.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/models/asset_edit.model.dart';
 import 'package:immich_mobile/domain/services/asset.service.dart';
 import 'package:immich_mobile/models/download/livephotos_medatada.model.dart';
 import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
-import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart' show assetExifProvider;
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.dart';
 import 'package:immich_mobile/services/action.service.dart';
 import 'package:immich_mobile/services/download.service.dart';
-import 'package:immich_mobile/services/foreground_upload.service.dart';
 import 'package:immich_mobile/services/timeline.service.dart';
+import 'package:immich_mobile/services/foreground_upload.service.dart';
 import 'package:immich_mobile/widgets/asset_grid/delete_dialog.dart';
 import 'package:logging/logging.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
@@ -491,23 +490,6 @@ class ActionNotifier extends Notifier<void> {
       });
     }
   }
-
-  Future<ActionResult> applyEdits(ActionSource source, List<AssetEdit> edits) async {
-    final ids = _getOwnedRemoteIdsForSource(source);
-
-    if (ids.length != 1) {
-      _logger.warning('applyEdits called with multiple assets, expected single asset');
-      return ActionResult(count: ids.length, success: false, error: 'Expected single asset for applying edits');
-    }
-
-    try {
-      await _service.applyEdits(ids.first, edits);
-      return const ActionResult(count: 1, success: true);
-    } catch (error, stack) {
-      _logger.severe('Failed to apply edits to assets', error, stack);
-      return ActionResult(count: ids.length, success: false, error: error.toString());
-    }
-  }
 }
 
 extension on Iterable<RemoteAsset> {

mobile/lib/providers/websocket.provider.dart

@@ -197,27 +197,6 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
     state.socket?.on('on_upload_success', _handleOnUploadSuccess);
   }
 
-  Future<void> waitForEvent(String event, bool Function(dynamic)? predicate, Duration timeout) {
-    final completer = Completer<void>();
-
-    void handler(dynamic data) {
-      if (predicate == null || predicate(data)) {
-        completer.complete();
-        state.socket?.off(event, handler);
-      }
-    }
-
-    state.socket?.on(event, handler);
-
-    return completer.future.timeout(
-      timeout,
-      onTimeout: () {
-        state.socket?.off(event, handler);
-        throw TimeoutException("Timeout waiting for event: $event");
-      },
-    );
-  }
-
   void addPendingChange(PendingAction action, dynamic value) {
     final now = DateTime.now();
     state = state.copyWith(

mobile/lib/repositories/asset_api.repository.dart

@@ -1,13 +1,12 @@
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:http/http.dart';
 import 'package:immich_mobile/constants/enums.dart';
-import 'package:immich_mobile/domain/models/asset_edit.model.dart';
 import 'package:immich_mobile/domain/models/stack.model.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/providers/api.provider.dart';
 import 'package:immich_mobile/repositories/api.repository.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
-import 'package:openapi/api.dart' hide AssetEditAction;
+import 'package:openapi/api.dart';
 
 final assetApiRepositoryProvider = Provider(
   (ref) => AssetApiRepository(
@@ -106,25 +105,6 @@ class AssetApiRepository extends ApiRepository {
   Future<void> updateRating(String assetId, int rating) {
     return _api.updateAsset(assetId, UpdateAssetDto(rating: rating));
   }
-
-  Future<void> editAsset(String assetId, List<AssetEdit> edits) async {
-    final editDtos = edits
-        .map((edit) {
-          if (edit.action == AssetEditAction.other) {
-            return null;
-          }
-
-          return AssetEditActionItemDto(action: edit.action.toDto()!, parameters: edit.parameters);
-        })
-        .whereType<AssetEditActionItemDto>()
-        .toList();
-
-    await _api.editAsset(assetId, AssetEditsCreateDto(edits: editDtos));
-  }
-
-  Future<void> removeEdits(String assetId) async {
-    await _api.removeAssetEdits(assetId);
-  }
 }
 
 extension on StackResponseDto {

mobile/lib/routing/router.dart

@@ -4,8 +4,6 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/domain/models/album/local_album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/models/asset_edit.model.dart';
-import 'package:immich_mobile/domain/models/exif.model.dart';
 import 'package:immich_mobile/domain/models/log.model.dart';
 import 'package:immich_mobile/domain/models/memory.model.dart';
 import 'package:immich_mobile/domain/models/person.model.dart';
@@ -91,7 +89,6 @@ import 'package:immich_mobile/presentation/pages/drift_archive.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_asset_selection_timeline.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_asset_troubleshoot.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_create_album.page.dart';
-import 'package:immich_mobile/presentation/pages/drift_edit.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_favorite.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_library.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_local_album.page.dart';
@@ -108,8 +105,11 @@ import 'package:immich_mobile/presentation/pages/drift_remote_album.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_trash.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_user_selection.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_video.page.dart';
-import 'package:immich_mobile/presentation/pages/local_timeline.page.dart';
+import 'package:immich_mobile/presentation/pages/editing/drift_crop.page.dart';
 import 'package:immich_mobile/presentation/pages/profile/profile_picture_crop.page.dart';
+import 'package:immich_mobile/presentation/pages/editing/drift_edit.page.dart';
+import 'package:immich_mobile/presentation/pages/editing/drift_filter.page.dart';
+import 'package:immich_mobile/presentation/pages/local_timeline.page.dart';
 import 'package:immich_mobile/presentation/pages/search/drift_search.page.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.page.dart';
 import 'package:immich_mobile/providers/api.provider.dart';
@@ -333,6 +333,8 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: DriftAlbumOptionsRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: DriftMapRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: DriftEditImageRoute.page),
+    AutoRoute(page: DriftCropImageRoute.page),
+    AutoRoute(page: DriftFilterImageRoute.page),
     AutoRoute(page: DriftActivitiesRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: DriftBackupAssetDetailRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: AssetTroubleshootRoute.page, guards: [_authGuard, _duplicateGuard]),

mobile/lib/routing/router.gr.dart

@@ -1003,26 +1003,70 @@ class DriftCreateAlbumRoute extends PageRouteInfo<void> {
   );
 }
 
+/// generated route for
+/// [DriftCropImagePage]
+class DriftCropImageRoute extends PageRouteInfo<DriftCropImageRouteArgs> {
+  DriftCropImageRoute({
+    Key? key,
+    required Image image,
+    required BaseAsset asset,
+    List<PageRouteInfo>? children,
+  }) : super(
+         DriftCropImageRoute.name,
+         args: DriftCropImageRouteArgs(key: key, image: image, asset: asset),
+         initialChildren: children,
+       );
+
+  static const String name = 'DriftCropImageRoute';
+
+  static PageInfo page = PageInfo(
+    name,
+    builder: (data) {
+      final args = data.argsAs<DriftCropImageRouteArgs>();
+      return DriftCropImagePage(
+        key: args.key,
+        image: args.image,
+        asset: args.asset,
+      );
+    },
+  );
+}
+
+class DriftCropImageRouteArgs {
+  const DriftCropImageRouteArgs({
+    this.key,
+    required this.image,
+    required this.asset,
+  });
+
+  final Key? key;
+
+  final Image image;
+
+  final BaseAsset asset;
+
+  @override
+  String toString() {
+    return 'DriftCropImageRouteArgs{key: $key, image: $image, asset: $asset}';
+  }
+}
+
 /// generated route for
 /// [DriftEditImagePage]
 class DriftEditImageRoute extends PageRouteInfo<DriftEditImageRouteArgs> {
   DriftEditImageRoute({
     Key? key,
-    required Image image,
     required BaseAsset asset,
-    required List<AssetEdit> edits,
-    required ExifInfo exifInfo,
-    required Future<void> Function(List<AssetEdit>) applyEdits,
+    required Image image,
+    required bool isEdited,
     List<PageRouteInfo>? children,
   }) : super(
          DriftEditImageRoute.name,
          args: DriftEditImageRouteArgs(
            key: key,
-           image: image,
            asset: asset,
-           edits: edits,
-           exifInfo: exifInfo,
-           applyEdits: applyEdits,
+           image: image,
+           isEdited: isEdited,
          ),
          initialChildren: children,
        );
@@ -1035,11 +1079,9 @@ class DriftEditImageRoute extends PageRouteInfo<DriftEditImageRouteArgs> {
       final args = data.argsAs<DriftEditImageRouteArgs>();
       return DriftEditImagePage(
         key: args.key,
-        image: args.image,
         asset: args.asset,
-        edits: args.edits,
-        exifInfo: args.exifInfo,
-        applyEdits: args.applyEdits,
+        image: args.image,
+        isEdited: args.isEdited,
       );
     },
   );
@@ -1048,28 +1090,22 @@ class DriftEditImageRoute extends PageRouteInfo<DriftEditImageRouteArgs> {
 class DriftEditImageRouteArgs {
   const DriftEditImageRouteArgs({
     this.key,
-    required this.image,
     required this.asset,
-    required this.edits,
-    required this.exifInfo,
-    required this.applyEdits,
+    required this.image,
+    required this.isEdited,
   });
 
   final Key? key;
 
-  final Image image;
-
   final BaseAsset asset;
 
-  final List<AssetEdit> edits;
+  final Image image;
 
-  final ExifInfo exifInfo;
-
-  final Future<void> Function(List<AssetEdit>) applyEdits;
+  final bool isEdited;
 
   @override
   String toString() {
-    return 'DriftEditImageRouteArgs{key: $key, image: $image, asset: $asset, edits: $edits, exifInfo: $exifInfo, applyEdits: $applyEdits}';
+    return 'DriftEditImageRouteArgs{key: $key, asset: $asset, image: $image, isEdited: $isEdited}';
   }
 }
 
@@ -1089,6 +1125,54 @@ class DriftFavoriteRoute extends PageRouteInfo<void> {
   );
 }
 
+/// generated route for
+/// [DriftFilterImagePage]
+class DriftFilterImageRoute extends PageRouteInfo<DriftFilterImageRouteArgs> {
+  DriftFilterImageRoute({
+    Key? key,
+    required Image image,
+    required BaseAsset asset,
+    List<PageRouteInfo>? children,
+  }) : super(
+         DriftFilterImageRoute.name,
+         args: DriftFilterImageRouteArgs(key: key, image: image, asset: asset),
+         initialChildren: children,
+       );
+
+  static const String name = 'DriftFilterImageRoute';
+
+  static PageInfo page = PageInfo(
+    name,
+    builder: (data) {
+      final args = data.argsAs<DriftFilterImageRouteArgs>();
+      return DriftFilterImagePage(
+        key: args.key,
+        image: args.image,
+        asset: args.asset,
+      );
+    },
+  );
+}
+
+class DriftFilterImageRouteArgs {
+  const DriftFilterImageRouteArgs({
+    this.key,
+    required this.image,
+    required this.asset,
+  });
+
+  final Key? key;
+
+  final Image image;
+
+  final BaseAsset asset;
+
+  @override
+  String toString() {
+    return 'DriftFilterImageRouteArgs{key: $key, image: $image, asset: $asset}';
+  }
+}
+
 /// generated route for
 /// [DriftLibraryPage]
 class DriftLibraryRoute extends PageRouteInfo<void> {

mobile/lib/services/action.service.dart

@@ -5,7 +5,6 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/models/asset_edit.model.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/platform_extensions.dart';
@@ -247,16 +246,6 @@ class ActionService {
     return true;
   }
 
-  Future<void> applyEdits(String remoteId, List<AssetEdit> edits) async {
-    if (edits.isEmpty) {
-      await _assetApiRepository.removeEdits(remoteId);
-    } else {
-      await _assetApiRepository.editAsset(remoteId, edits);
-    }
-
-    await _remoteAssetRepository.editAsset(remoteId, edits);
-  }
-
   Future<int> _deleteLocalAssets(List<String> localIds) async {
     final deletedIds = await _assetMediaRepository.deleteAll(localIds);
     if (deletedIds.isEmpty) {

mobile/lib/utils/editor.utils.dart

@@ -1,97 +0,0 @@
-import 'dart:async';
-import 'dart:math';
-import 'dart:ui' as ui;
-
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/domain/models/asset_edit.model.dart';
-import 'package:immich_mobile/utils/matrix.utils.dart';
-import 'package:openapi/api.dart' hide AssetEditAction;
-
-Rect convertCropParametersToRect(CropParameters parameters, int originalWidth, int originalHeight) {
-  return Rect.fromLTWH(
-    parameters.x.toDouble() / originalWidth,
-    parameters.y.toDouble() / originalHeight,
-    parameters.width.toDouble() / originalWidth,
-    parameters.height.toDouble() / originalHeight,
-  );
-}
-
-CropParameters convertRectToCropParameters(Rect rect, int originalWidth, int originalHeight) {
-  final x = (rect.left * originalWidth).round();
-  final y = (rect.top * originalHeight).round();
-  final width = (rect.width * originalWidth).round();
-  final height = (rect.height * originalHeight).round();
-
-  return CropParameters(
-    x: max(x, 0).clamp(0, originalWidth),
-    y: max(y, 0).clamp(0, originalHeight),
-    width: max(width, 0).clamp(0, originalWidth - x),
-    height: max(height, 0).clamp(0, originalHeight - y),
-  );
-}
-
-AffineMatrix buildAffineFromEdits(List<AssetEdit> edits) {
-  return AffineMatrix.compose(
-    edits.map<AffineMatrix>((edit) {
-      switch (edit.action) {
-        case AssetEditAction.rotate:
-          final angleInDegrees = edit.parameters["angle"] as num;
-          final angleInRadians = angleInDegrees * pi / 180;
-          return AffineMatrix.rotate(angleInRadians);
-        case AssetEditAction.mirror:
-          final axis = edit.parameters["axis"] as String;
-          return axis == "horizontal" ? AffineMatrix.flipY() : AffineMatrix.flipX();
-        default:
-          return AffineMatrix.identity();
-      }
-    }).toList(),
-  );
-}
-
-bool isCloseToZero(double value, [double epsilon = 1e-15]) {
-  return value.abs() < epsilon;
-}
-
-typedef NormalizedTransform = ({double rotation, bool mirrorHorizontal, bool mirrorVertical});
-
-NormalizedTransform normalizeTransformEdits(List<AssetEdit> edits) {
-  final matrix = buildAffineFromEdits(edits);
-
-  double a = matrix.a;
-  double b = matrix.b;
-  double c = matrix.c;
-  double d = matrix.d;
-
-  final rotation = ((isCloseToZero(a) ? asin(c) : acos(a)) * 180) / pi;
-
-  return (
-    rotation: rotation < 0 ? 360 + rotation : rotation,
-    mirrorHorizontal: false,
-    mirrorVertical: isCloseToZero(a) ? b == c : a == -d,
-  );
-}
-
-/// Helper to resolve an ImageProvider to a ui.Image
-Future<ui.Image> resolveImage(ImageProvider provider) {
-  final completer = Completer<ui.Image>();
-  final stream = provider.resolve(const ImageConfiguration());
-
-  late final ImageStreamListener listener;
-  listener = ImageStreamListener(
-    (ImageInfo info, bool sync) {
-      if (!completer.isCompleted) {
-        completer.complete(info.image);
-      }
-      stream.removeListener(listener);
-    },
-    onError: (error, stackTrace) {
-      if (!completer.isCompleted) {
-        completer.completeError(error, stackTrace);
-      }
-      stream.removeListener(listener);
-    },
-  );
-
-  stream.addListener(listener);
-  return completer.future;
-}

mobile/lib/utils/hooks/crop_controller_hook.dart

@@ -1,14 +1,8 @@
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:crop_image/crop_image.dart';
 import 'dart:ui'; // Import the dart:ui library for Rect
 
-import 'package:crop_image/crop_image.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-
 /// A hook that provides a [CropController] instance.
-CropController useCropController({Rect? initialCrop, CropRotation? initialRotation}) {
-  return useMemoized(
-    () => CropController(
-      defaultCrop: initialCrop ?? const Rect.fromLTRB(0, 0, 1, 1),
-      rotation: initialRotation ?? CropRotation.up,
-    ),
-  );
+CropController useCropController() {
+  return useMemoized(() => CropController(defaultCrop: const Rect.fromLTRB(0, 0, 1, 1)));
 }

mobile/lib/utils/matrix.utils.dart

@@ -1,50 +0,0 @@
-import 'dart:math';
-
-class AffineMatrix {
-  final double a;
-  final double b;
-  final double c;
-  final double d;
-  final double e;
-  final double f;
-
-  const AffineMatrix(this.a, this.b, this.c, this.d, this.e, this.f);
-
-  @override
-  String toString() {
-    return 'AffineMatrix(a: $a, b: $b, c: $c, d: $d, e: $e, f: $f)';
-  }
-
-  factory AffineMatrix.identity() {
-    return const AffineMatrix(1, 0, 0, 1, 0, 0);
-  }
-
-  AffineMatrix multiply(AffineMatrix other) {
-    return AffineMatrix(
-      a * other.a + c * other.b,
-      b * other.a + d * other.b,
-      a * other.c + c * other.d,
-      b * other.c + d * other.d,
-      a * other.e + c * other.f + e,
-      b * other.e + d * other.f + f,
-    );
-  }
-
-  factory AffineMatrix.compose([List<AffineMatrix> transformations = const []]) {
-    return transformations.fold<AffineMatrix>(AffineMatrix.identity(), (acc, matrix) => acc.multiply(matrix));
-  }
-
-  factory AffineMatrix.rotate(double angle) {
-    final cosAngle = cos(angle);
-    final sinAngle = sin(angle);
-    return AffineMatrix(cosAngle, -sinAngle, sinAngle, cosAngle, 0, 0);
-  }
-
-  factory AffineMatrix.flipY() {
-    return const AffineMatrix(-1, 0, 0, 1, 0, 0);
-  }
-
-  factory AffineMatrix.flipX() {
-    return const AffineMatrix(1, 0, 0, -1, 0, 0);
-  }
-}

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

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

mobile/openapi/lib/model/asset_edit_action_item_dto.dart

@@ -20,7 +20,7 @@ class AssetEditActionItemDto {
   /// Type of edit action to perform
   AssetEditAction action;
 
-  Map<String, dynamic> parameters;
+  AssetEditActionItemDtoParameters parameters;
 
   @override
   bool operator ==(Object other) => identical(this, other) || other is AssetEditActionItemDto &&
@@ -53,7 +53,7 @@ class AssetEditActionItemDto {
 
       return AssetEditActionItemDto(
         action: AssetEditAction.fromJson(json[r'action'])!,
-        parameters: json[r'parameters'],
+        parameters: AssetEditActionItemDtoParameters.fromJson(json[r'parameters'])!,
       );
     }
     return null;

mobile/test/utils/editor_test.dart

@@ -1,321 +0,0 @@
-import 'package:flutter_test/flutter_test.dart';
-import 'package:immich_mobile/domain/models/asset_edit.model.dart';
-import 'package:immich_mobile/utils/editor.utils.dart';
-
-List<AssetEdit> normalizedToEdits(NormalizedTransform transform) {
-  List<AssetEdit> edits = [];
-
-  if (transform.mirrorHorizontal) {
-    edits.add(const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}));
-  }
-
-  if (transform.mirrorVertical) {
-    edits.add(const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}));
-  }
-
-  if (transform.rotation != 0) {
-    edits.add(AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": transform.rotation}));
-  }
-
-  return edits;
-}
-
-bool compareEditAffines(List<AssetEdit> editsA, List<AssetEdit> editsB) {
-  final normA = buildAffineFromEdits(editsA);
-  final normB = buildAffineFromEdits(editsB);
-
-  return ((normA.a - normB.a).abs() < 0.0001 &&
-      (normA.b - normB.b).abs() < 0.0001 &&
-      (normA.c - normB.c).abs() < 0.0001 &&
-      (normA.d - normB.d).abs() < 0.0001);
-}
-
-void main() {
-  group('normalizeEdits', () {
-    test('should handle no edits', () {
-      final edits = <AssetEdit>[];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle a single 90° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 90}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle a single 180° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 180}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle a single 270° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 270}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle a single horizontal mirror', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle a single vertical mirror', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle 90° rotation + horizontal mirror', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 90}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle 90° rotation + vertical mirror', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 90}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle 90° rotation + both mirrors', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 90}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle 180° rotation + horizontal mirror', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 180}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle 180° rotation + vertical mirror', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 180}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle 180° rotation + both mirrors', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 180}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle 270° rotation + horizontal mirror', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 270}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle 270° rotation + vertical mirror', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 270}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle 270° rotation + both mirrors', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 270}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle horizontal mirror + 90° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 90}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle horizontal mirror + 180° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 180}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle horizontal mirror + 270° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 270}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle vertical mirror + 90° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 90}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle vertical mirror + 180° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 180}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle vertical mirror + 270° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 270}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle both mirrors + 90° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 90}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle both mirrors + 180° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 180}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-
-    test('should handle both mirrors + 270° rotation', () {
-      final edits = <AssetEdit>[
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "horizontal"}),
-        const AssetEdit(action: AssetEditAction.mirror, parameters: {"axis": "vertical"}),
-        const AssetEdit(action: AssetEditAction.rotate, parameters: {"angle": 270}),
-      ];
-
-      final result = normalizeTransformEdits(edits);
-      final normalizedEdits = normalizedToEdits(result);
-
-      expect(compareEditAffines(normalizedEdits, edits), true);
-    });
-  });
-}

open-api/bin/generate-open-api.sh

@@ -21,7 +21,6 @@ function dart {
   patch --no-backup-if-mismatch -u ../mobile/openapi/lib/api_client.dart <./patch/api_client.dart.patch
   patch --no-backup-if-mismatch -u ../mobile/openapi/lib/api.dart <./patch/api.dart.patch
   patch --no-backup-if-mismatch -u ../mobile/openapi/pubspec.yaml <./patch/pubspec_immich_mobile.yaml.patch
-  patch --no-backup-if-mismatch -u ../mobile/openapi/lib/model/asset_edit_action_item_dto.dart <./patch/asset_edit_action_item_dto.dart.patch
   # Don't include analysis_options.yaml for the generated openapi files
   # so that language servers can properly exclude the mobile/openapi directory
   rm ../mobile/openapi/analysis_options.yaml

open-api/patch/asset_edit_action_item_dto.dart.patch

@@ -1,18 +0,0 @@
-@@ -20,7 +20,7 @@ class AssetEditActionItemDto {
-   /// Type of edit action to perform
-   AssetEditAction action;
- 
--  AssetEditActionItemDtoParameters parameters;
-+  Map<String, dynamic> parameters;
- 
-   @override
-   bool operator ==(Object other) => identical(this, other) || other is AssetEditActionItemDto &&
-@@ -53,7 +53,7 @@ class AssetEditActionItemDto {
- 
-       return AssetEditActionItemDto(
-         action: AssetEditAction.fromJson(json[r'action'])!,
--        parameters: AssetEditActionItemDtoParameters.fromJson(json[r'parameters'])!,
-+        parameters: json[r'parameters'],
-       );
-     }
-     return null;

web/package.json

@@ -27,7 +27,7 @@
     "@formatjs/icu-messageformat-parser": "^3.0.0",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "workspace:*",
-    "@immich/ui": "^0.65.3",
+    "@immich/ui": "^0.67.2",
     "@mapbox/mapbox-gl-rtl-text": "0.3.0",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",
@@ -72,10 +72,10 @@
     "@koddsson/eslint-plugin-tscompat": "^0.2.0",
     "@socket.io/component-emitter": "^3.1.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/enhanced-img": "^0.10.0",
+    "@sveltejs/enhanced-img": "^0.10.4",
     "@sveltejs/kit": "^2.27.1",
-    "@sveltejs/vite-plugin-svelte": "6.2.4",
-    "@tailwindcss/vite": "^4.1.7",
+    "@sveltejs/vite-plugin-svelte": "7.0.0",
+    "@tailwindcss/vite": "^4.2.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.5.2",
@@ -103,10 +103,10 @@
     "svelte": "5.53.13",
     "svelte-check": "^4.1.5",
     "svelte-eslint-parser": "^1.3.3",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.2",
+    "vite": "^8.0.0",
     "vitest": "^4.0.0"
   },
   "volta": {

web/src/lib/components/ToastAction.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { Button, ToastContainer, ToastContent, type Color, type IconLike } from '@immich/ui';
-
-  type Props = {
-    onClose?: () => void;
-    color?: Color;
-    title: string;
-    icon?: IconLike | false;
-    description: string;
-    button?: {
-      text: string;
-      color?: Color;
-      onClick: () => void;
-    };
-  };
-
-  const { onClose, title, description, color, icon, button }: Props = $props();
-
-  const onClick = () => {
-    button?.onClick();
-    onClose?.();
-  };
-</script>
-
-<ToastContainer {color}>
-  <ToastContent {color} {title} {description} {onClose} {icon}>
-    {#if button}
-      <div class="flex justify-end gap-2 px-2 pb-2 me-3 mt-2">
-        <Button color={button.color ?? 'secondary'} size="small" onclick={onClick}>{button.text}</Button>
-      </div>
-    {/if}
-  </ToastContent>
-</ToastContainer>

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

@@ -1,5 +1,4 @@
 import { goto } from '$app/navigation';
-import ToastAction from '$lib/components/ToastAction.svelte';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
@@ -138,16 +137,8 @@ const notifyAddToAlbum = ($t: MessageFormatter, albumId: string, assetIds: strin
     description = $t('assets_were_part_of_album_count', { values: { count: duplicateCount } });
   }
 
-  toastManager.custom(
-    {
-      component: ToastAction,
-      props: {
-        title: $t('info'),
-        color: 'primary',
-        description,
-        button: { text: $t('view_album'), color: 'primary', onClick: () => goto(Route.viewAlbum({ id: albumId })) },
-      },
-    },
+  toastManager.primary(
+    { description, button: { label: $t('view_album'), onclick: () => goto(Route.viewAlbum({ id: albumId })) } },
     { timeout: 5000 },
   );
 };
@@ -229,18 +220,9 @@ export const handleUpdateAlbum = async ({ id }: { id: string }, dto: UpdateAlbum
   try {
     const response = await updateAlbumInfo({ id, updateAlbumDto: dto });
     eventManager.emit('AlbumUpdate', response);
-    toastManager.custom({
-      component: ToastAction,
-      props: {
-        color: 'primary',
-        title: $t('success'),
-        description: $t('album_info_updated'),
-        button: {
-          text: $t('view_album'),
-          color: 'primary',
-          onClick: () => goto(Route.viewAlbum({ id })),
-        },
-      },
+    toastManager.primary({
+      description: $t('album_info_updated'),
+      button: { label: $t('view_album'), onclick: () => goto(Route.viewAlbum({ id })) },
     });
 
     return true;

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

@@ -8,17 +8,16 @@ import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
 import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
 import { user as authUser, preferences } from '$lib/stores/user.store';
 import type { AssetControlContext } from '$lib/types';
-import { getSharedLink, sleep } from '$lib/utils';
+import { getAssetMediaUrl, getSharedLink, sleep } from '$lib/utils';
 import { downloadUrl } from '$lib/utils/asset-utils';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
-import { asQueryString } from '$lib/utils/shared-links';
 import {
   AssetJobName,
+  AssetMediaSize,
   AssetTypeEnum,
   AssetVisibility,
   getAssetInfo,
-  getBaseUrl,
   runAssetJobs,
   updateAsset,
   type AssetJobsDto,
@@ -308,6 +307,7 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
     {
       filename: asset.originalFileName,
       id: asset.id,
+      cacheKey: asset.thumbhash,
     },
   ];
 
@@ -321,13 +321,12 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
       assets.push({
         filename: motionAsset.originalFileName,
         id: asset.livePhotoVideoId,
+        cacheKey: motionAsset.thumbhash,
       });
     }
   }
 
-  const queryParams = asQueryString(authManager.params);
-
-  for (const [i, { filename, id }] of assets.entries()) {
+  for (const [i, { filename, id, cacheKey }] of assets.entries()) {
     if (i !== 0) {
       // play nice with Safari
       await sleep(500);
@@ -335,12 +334,7 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
 
     try {
       toastManager.primary($t('downloading_asset_filename', { values: { filename } }));
-      downloadUrl(
-        getBaseUrl() +
-          `/assets/${id}/original` +
-          (queryParams ? `?${queryParams}&edited=${edited}` : `?edited=${edited}`),
-        filename,
-      );
+      downloadUrl(getAssetMediaUrl({ id, size: AssetMediaSize.Original, edited, cacheKey }), filename);
     } catch (error) {
       handleError(error, $t('errors.error_downloading', { values: { filename } }));
     }

web/src/lib/stores/upload.ts

@@ -80,7 +80,34 @@ function createUploadStore() {
   };
 
   const removeItem = (id: string) => {
-    uploadAssets.update((uploadingAsset) => uploadingAsset.filter((a) => a.id != id));
+    uploadAssets.update((uploadingAsset) => {
+      const assetToRemove = uploadingAsset.find((a) => a.id === id);
+      if (assetToRemove) {
+        stats.update((stats) => {
+          switch (assetToRemove.state) {
+            case UploadState.DONE: {
+              stats.success--;
+              break;
+            }
+
+            case UploadState.DUPLICATED: {
+              stats.duplicates--;
+              break;
+            }
+
+            case UploadState.ERROR: {
+              stats.errors--;
+              break;
+            }
+          }
+
+          stats.total--;
+          return stats;
+        });
+      }
+
+      return uploadingAsset.filter((a) => a.id != id);
+    });
   };
 
   const dismissErrors = () =>

web/src/lib/utils/actions.ts

@@ -1,4 +1,3 @@
-import ToastAction from '$lib/components/ToastAction.svelte';
 import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import type { StackResponse } from '$lib/utils/asset-utils';
@@ -32,24 +31,15 @@ export const deleteAssets = async (
     await deleteBulk({ assetBulkDeleteDto: { ids, force } });
     onAssetDelete(ids);
 
-    toastManager.custom(
+    toastManager.primary(
       {
-        component: ToastAction,
-        props: {
-          title: $t('success'),
-          description: force
-            ? $t('assets_permanently_deleted_count', { values: { count: ids.length } })
-            : $t('assets_trashed_count', { values: { count: ids.length } }),
-          color: 'success',
-          button:
-            onUndoDelete && !force
-              ? {
-                  color: 'secondary',
-                  text: $t('undo'),
-                  onClick: () => undoDeleteAssets(onUndoDelete, assets),
-                }
-              : undefined,
-        },
+        description: force
+          ? $t('assets_permanently_deleted_count', { values: { count: ids.length } })
+          : $t('assets_trashed_count', { values: { count: ids.length } }),
+        button:
+          onUndoDelete && !force
+            ? { label: $t('undo'), color: 'secondary', onclick: () => undoDeleteAssets(onUndoDelete, assets) }
+            : undefined,
       },
       { timeout: 5000 },
     );

web/src/lib/utils/asset-utils.ts

@@ -1,4 +1,3 @@
-import ToastAction from '$lib/components/ToastAction.svelte';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { downloadManager } from '$lib/managers/download-manager.svelte';
 import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
@@ -326,16 +325,11 @@ export const stackAssets = async (assets: { id: string }[], showNotification = t
   try {
     const stack = await createStack({ stackCreateDto: { assetIds: assets.map(({ id }) => id) } });
     if (showNotification) {
-      toastManager.custom({
-        component: ToastAction,
-        props: {
-          title: $t('success'),
-          description: $t('stacked_assets_count', { values: { count: stack.assets.length } }),
-          color: 'success',
-          button: {
-            text: $t('view_stack'),
-            onClick: () => navigate({ targetRoute: 'current', assetId: stack.primaryAssetId }),
-          },
+      toastManager.primary({
+        description: $t('stacked_assets_count', { values: { count: stack.assets.length } }),
+        button: {
+          label: $t('view_stack'),
+          onclick: () => navigate({ targetRoute: 'current', assetId: stack.primaryAssetId }),
         },
       });
     }

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

@@ -178,19 +178,7 @@
 
   const handleFirst = () => navigateToIndex(0);
   const handlePrevious = () => navigateToIndex(Math.max(duplicatesIndex - 1, 0));
-  const handlePreviousShortcut = async () => {
-    if ($showAssetViewer) {
-      return;
-    }
-    await handlePrevious();
-  };
   const handleNext = async () => navigateToIndex(Math.min(duplicatesIndex + 1, duplicates.length - 1));
-  const handleNextShortcut = async () => {
-    if ($showAssetViewer) {
-      return;
-    }
-    await handleNext();
-  };
   const handleLast = () => navigateToIndex(duplicates.length - 1);
 
   const navigateToIndex = async (index: number) =>
@@ -198,10 +186,12 @@
 </script>
 
 <svelte:document
-  use:shortcuts={[
-    { shortcut: { key: 'ArrowLeft' }, onShortcut: handlePreviousShortcut },
-    { shortcut: { key: 'ArrowRight' }, onShortcut: handleNextShortcut },
-  ]}
+  use:shortcuts={$showAssetViewer
+    ? []
+    : [
+        { shortcut: { key: 'ArrowLeft' }, onShortcut: handlePrevious },
+        { shortcut: { key: 'ArrowRight' }, onShortcut: handleNext },
+      ]}
 />
 
 <UserPageLayout title={data.meta.title + ` (${duplicates.length.toLocaleString($locale)})`} scrollbar={true}>