Merge branch 'main' of https://github.com/immich-app/immich into feat/crawl-wrapper

* filter by tags

* reset people search filter chip if no selections

.github/workflows/check-openapi.yml

@@ -5,11 +5,6 @@ on:
     paths:
       - 'open-api/**'
       - '.github/workflows/check-openapi.yml'
-  push:
-    branches: [main]
-    paths:
-      - 'open-api/**'
-      - '.github/workflows/check-openapi.yml'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/static_analysis.yml

@@ -69,6 +69,14 @@ jobs:
       - name: Install dependencies
         run: dart pub get
 
+      - name: Install dependencies for UI package
+        run: dart pub get
+        working-directory: ./mobile/packages/ui
+
+      - name: Install dependencies for UI Showcase
+        run: dart pub get
+        working-directory: ./mobile/packages/ui/showcase
+
       - name: Install DCM
         uses: CQLabs/setup-dcm@8697ae0790c0852e964a6ef1d768d62a6675481a # v2.0.1
         with:

docs/docs/features/supported-formats.md

@@ -38,6 +38,7 @@ For the full list, refer to the [Immich source code](https://github.com/immich-a
 | `MP2T`      | `.mts` `.m2ts` `.m2t` | :white_check_mark: |       |
 | `MP4`       | `.mp4` `.insv`        | :white_check_mark: |       |
 | `MPEG`      | `.mpg` `.mpe` `.mpeg` | :white_check_mark: |       |
+| `MXF`       | `.mxf`                | :white_check_mark: |       |
 | `QUICKTIME` | `.mov`                | :white_check_mark: |       |
 | `WEBM`      | `.webm`               | :white_check_mark: |       |
 | `WMV`       | `.wmv`                | :white_check_mark: |       |

i18n/en.json

@@ -561,8 +561,6 @@
   "asset_adding_to_album": "Adding to album…",
   "asset_created": "Asset created",
   "asset_description_updated": "Asset description has been updated",
-  "asset_edit_failed": "Asset edit failed",
-  "asset_edit_success": "Asset edited successfully",
   "asset_filename_is_offline": "Asset {filename} is offline",
   "asset_has_unassigned_faces": "Asset has unassigned faces",
   "asset_hashing": "Hashing…",
@@ -1009,12 +1007,9 @@
   "editor_discard_edits_title": "Discard edits?",
   "editor_edits_applied_error": "Failed to apply edits",
   "editor_edits_applied_success": "Edits applied successfully",
-  "editor_filters": "Filters",
   "editor_flip_horizontal": "Flip horizontal",
   "editor_flip_vertical": "Flip vertical",
   "editor_orientation": "Orientation",
-  "editor_panel_filter": "Filter",
-  "editor_panel_transform": "Transform",
   "editor_reset_all_changes": "Reset changes",
   "editor_rotate_left": "Rotate 90° counterclockwise",
   "editor_rotate_right": "Rotate 90° clockwise",

machine-learning/pyproject.toml

@@ -8,7 +8,6 @@ readme = "README.md"
 dependencies = [
     "aiocache>=0.12.1,<1.0",
     "fastapi>=0.95.2,<1.0",
-    "ftfy>=6.1.1",
     "gunicorn>=21.1.0",
     "huggingface-hub>=0.20.1,<1.0",
     "insightface>=0.7.3,<1.0",

mise.toml

@@ -37,13 +37,12 @@ run = "pnpm install --filter @immich/sdk --frozen-lockfile"
 
 [tasks."sdk:build"]
 dir = "open-api/typescript-sdk"
-env._.path = "./node_modules/.bin"
-run = "tsc"
+run = "pnpm run build"
 
 # i18n tasks
 [tasks."i18n:format"]
 dir = "i18n"
-run = { task = ":i18n:format-fix" }
+run = "pnpm run format"
 
 [tasks."i18n:format-fix"]
 dir = "i18n"

mobile/lib/constants/filters.dart

@@ -1,276 +1,52 @@
 import 'package:flutter/material.dart';
 
-class EditFilter {
-  final String name;
-  final double rrBias;
-  final double rgBias;
-  final double rbBias;
-  final double grBias;
-  final double ggBias;
-  final double gbBias;
-  final double brBias;
-  final double bgBias;
-  final double bbBias;
-  final double rOffset;
-  final double gOffset;
-  final double bOffset;
-
-  const EditFilter({
-    required this.name,
-    required this.rrBias,
-    required this.rgBias,
-    required this.rbBias,
-    required this.grBias,
-    required this.ggBias,
-    required this.gbBias,
-    required this.brBias,
-    required this.bgBias,
-    required this.bbBias,
-    required this.rOffset,
-    required this.gOffset,
-    required this.bOffset,
-  });
-
-  bool get isIdentity =>
-      rrBias == 1 &&
-      rgBias == 0 &&
-      rbBias == 0 &&
-      grBias == 0 &&
-      ggBias == 1 &&
-      gbBias == 0 &&
-      brBias == 0 &&
-      bgBias == 0 &&
-      bbBias == 1 &&
-      rOffset == 0 &&
-      gOffset == 0 &&
-      bOffset == 0;
-
-  factory EditFilter.fromMatrix(List<double> matrix, String name) {
-    if (matrix.length != 20) {
-      throw ArgumentError('Color filter matrix must have 20 elements');
-    }
-
-    return EditFilter(
-      name: name,
-      rrBias: matrix[0],
-      rgBias: matrix[1],
-      rbBias: matrix[2],
-      grBias: matrix[5],
-      ggBias: matrix[6],
-      gbBias: matrix[7],
-      brBias: matrix[10],
-      bgBias: matrix[11],
-      bbBias: matrix[12],
-      rOffset: matrix[4],
-      gOffset: matrix[9],
-      bOffset: matrix[14],
-    );
-  }
-
-  factory EditFilter.fromDtoParams(Map<String, dynamic> params, String name) {
-    return EditFilter(
-      name: name,
-      rrBias: (params['rrBias'] as num).toDouble(),
-      rgBias: (params['rgBias'] as num).toDouble(),
-      rbBias: (params['rbBias'] as num).toDouble(),
-      grBias: (params['grBias'] as num).toDouble(),
-      ggBias: (params['ggBias'] as num).toDouble(),
-      gbBias: (params['gbBias'] as num).toDouble(),
-      brBias: (params['brBias'] as num).toDouble(),
-      bgBias: (params['bgBias'] as num).toDouble(),
-      bbBias: (params['bbBias'] as num).toDouble(),
-      rOffset: (params['rOffset'] as num).toDouble(),
-      gOffset: (params['gOffset'] as num).toDouble(),
-      bOffset: (params['bOffset'] as num).toDouble(),
-    );
-  }
-
-  ColorFilter get colorFilter {
-    final colorMatrix = <double>[
-      rrBias,
-      rgBias,
-      rbBias,
-      0,
-      rOffset,
-      grBias,
-      ggBias,
-      gbBias,
-      0,
-      gOffset,
-      brBias,
-      bgBias,
-      bbBias,
-      0,
-      bOffset,
-      0,
-      0,
-      0,
-      1,
-      0,
-    ];
-
-    return ColorFilter.matrix(colorMatrix);
-  }
-
-  Map<String, dynamic> get dtoParameters {
-    return {
-      "rrBias": rrBias,
-      "rgBias": rgBias,
-      "rbBias": rbBias,
-      "grBias": grBias,
-      "ggBias": ggBias,
-      "gbBias": gbBias,
-      "brBias": brBias,
-      "bgBias": bgBias,
-      "bbBias": bbBias,
-      "rOffset": rOffset,
-      "gOffset": gOffset,
-      "bOffset": bOffset,
-    };
-  }
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-    if (other is! EditFilter) return false;
-
-    return rrBias == other.rrBias &&
-        rgBias == other.rgBias &&
-        rbBias == other.rbBias &&
-        grBias == other.grBias &&
-        ggBias == other.ggBias &&
-        gbBias == other.gbBias &&
-        brBias == other.brBias &&
-        bgBias == other.bgBias &&
-        bbBias == other.bbBias &&
-        rOffset == other.rOffset &&
-        gOffset == other.gOffset &&
-        bOffset == other.bOffset;
-  }
-
-  @override
-  int get hashCode =>
-      name.hashCode ^
-      rrBias.hashCode ^
-      rgBias.hashCode ^
-      rbBias.hashCode ^
-      grBias.hashCode ^
-      ggBias.hashCode ^
-      gbBias.hashCode ^
-      brBias.hashCode ^
-      bgBias.hashCode ^
-      bbBias.hashCode ^
-      rOffset.hashCode ^
-      gOffset.hashCode ^
-      bOffset.hashCode;
-}
-
-final List<EditFilter> filters = [
+const List<ColorFilter> filters = [
   //Original
-  EditFilter.fromMatrix([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0], "Original"),
+  ColorFilter.matrix([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]),
   //Vintage
-  EditFilter.fromMatrix([0.8, 0.1, 0.1, 0, 20, 0.1, 0.8, 0.1, 0, 20, 0.1, 0.1, 0.8, 0, 20, 0, 0, 0, 1, 0], "Vintage"),
+  ColorFilter.matrix([0.8, 0.1, 0.1, 0, 20, 0.1, 0.8, 0.1, 0, 20, 0.1, 0.1, 0.8, 0, 20, 0, 0, 0, 1, 0]),
   //Mood
-  EditFilter.fromMatrix([1.2, 0.1, 0.1, 0, 10, 0.1, 1, 0.1, 0, 10, 0.1, 0.1, 1, 0, 10, 0, 0, 0, 1, 0], "Mood"),
+  ColorFilter.matrix([1.2, 0.1, 0.1, 0, 10, 0.1, 1, 0.1, 0, 10, 0.1, 0.1, 1, 0, 10, 0, 0, 0, 1, 0]),
   //Crisp
-  EditFilter.fromMatrix([1.2, 0, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 0, 1, 0], "Crisp"),
+  ColorFilter.matrix([1.2, 0, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 0, 1, 0]),
   //Cool
-  EditFilter.fromMatrix([0.9, 0, 0.2, 0, 0, 0, 1, 0.1, 0, 0, 0.1, 0, 1.2, 0, 0, 0, 0, 0, 1, 0], "Cool"),
+  ColorFilter.matrix([0.9, 0, 0.2, 0, 0, 0, 1, 0.1, 0, 0, 0.1, 0, 1.2, 0, 0, 0, 0, 0, 1, 0]),
   //Blush
-  EditFilter.fromMatrix([1.1, 0.1, 0.1, 0, 10, 0.1, 1, 0.1, 0, 10, 0.1, 0.1, 1, 0, 5, 0, 0, 0, 1, 0], "Blush"),
+  ColorFilter.matrix([1.1, 0.1, 0.1, 0, 10, 0.1, 1, 0.1, 0, 10, 0.1, 0.1, 1, 0, 5, 0, 0, 0, 1, 0]),
   //Sunkissed
-  EditFilter.fromMatrix([1.3, 0, 0.1, 0, 15, 0, 1.1, 0.1, 0, 10, 0, 0, 0.9, 0, 5, 0, 0, 0, 1, 0], "Sunkissed"),
+  ColorFilter.matrix([1.3, 0, 0.1, 0, 15, 0, 1.1, 0.1, 0, 10, 0, 0, 0.9, 0, 5, 0, 0, 0, 1, 0]),
   //Fresh
-  EditFilter.fromMatrix([1.2, 0, 0, 0, 20, 0, 1.2, 0, 0, 20, 0, 0, 1.1, 0, 20, 0, 0, 0, 1, 0], "Fresh"),
+  ColorFilter.matrix([1.2, 0, 0, 0, 20, 0, 1.2, 0, 0, 20, 0, 0, 1.1, 0, 20, 0, 0, 0, 1, 0]),
   //Classic
-  EditFilter.fromMatrix([1.1, 0, -0.1, 0, 10, -0.1, 1.1, 0.1, 0, 5, 0, -0.1, 1.1, 0, 0, 0, 0, 0, 1, 0], "Classic"),
+  ColorFilter.matrix([1.1, 0, -0.1, 0, 10, -0.1, 1.1, 0.1, 0, 5, 0, -0.1, 1.1, 0, 0, 0, 0, 0, 1, 0]),
   //Lomo-ish
-  EditFilter.fromMatrix([1.5, 0, 0.1, 0, 0, 0, 1.45, 0, 0, 0, 0.1, 0, 1.3, 0, 0, 0, 0, 0, 1, 0], "Lomo-ish"),
+  ColorFilter.matrix([1.5, 0, 0.1, 0, 0, 0, 1.45, 0, 0, 0, 0.1, 0, 1.3, 0, 0, 0, 0, 0, 1, 0]),
   //Nashville
-  EditFilter.fromMatrix([
-    1.2,
-    0.15,
-    -0.15,
-    0,
-    15,
-    0.1,
-    1.1,
-    0.1,
-    0,
-    10,
-    -0.05,
-    0.2,
-    1.25,
-    0,
-    5,
-    0,
-    0,
-    0,
-    1,
-    0,
-  ], "Nashville"),
+  ColorFilter.matrix([1.2, 0.15, -0.15, 0, 15, 0.1, 1.1, 0.1, 0, 10, -0.05, 0.2, 1.25, 0, 5, 0, 0, 0, 1, 0]),
   //Valencia
-  EditFilter.fromMatrix([1.15, 0.1, 0.1, 0, 20, 0.1, 1.1, 0, 0, 10, 0.1, 0.1, 1.2, 0, 5, 0, 0, 0, 1, 0], "Valencia"),
+  ColorFilter.matrix([1.15, 0.1, 0.1, 0, 20, 0.1, 1.1, 0, 0, 10, 0.1, 0.1, 1.2, 0, 5, 0, 0, 0, 1, 0]),
   //Clarendon
-  EditFilter.fromMatrix([1.2, 0, 0, 0, 10, 0, 1.25, 0, 0, 10, 0, 0, 1.3, 0, 10, 0, 0, 0, 1, 0], "Clarendon"),
+  ColorFilter.matrix([1.2, 0, 0, 0, 10, 0, 1.25, 0, 0, 10, 0, 0, 1.3, 0, 10, 0, 0, 0, 1, 0]),
   //Moon
-  EditFilter.fromMatrix([
-    0.33,
-    0.33,
-    0.33,
-    0,
-    0,
-    0.33,
-    0.33,
-    0.33,
-    0,
-    0,
-    0.33,
-    0.33,
-    0.33,
-    0,
-    0,
-    0,
-    0,
-    0,
-    1,
-    0,
-  ], "Moon"),
+  ColorFilter.matrix([0.33, 0.33, 0.33, 0, 0, 0.33, 0.33, 0.33, 0, 0, 0.33, 0.33, 0.33, 0, 0, 0, 0, 0, 1, 0]),
   //Willow
-  EditFilter.fromMatrix([0.5, 0.5, 0.5, 0, 20, 0.5, 0.5, 0.5, 0, 20, 0.5, 0.5, 0.5, 0, 20, 0, 0, 0, 1, 0], "Willow"),
+  ColorFilter.matrix([0.5, 0.5, 0.5, 0, 20, 0.5, 0.5, 0.5, 0, 20, 0.5, 0.5, 0.5, 0, 20, 0, 0, 0, 1, 0]),
   //Kodak
-  EditFilter.fromMatrix([1.3, 0.1, -0.1, 0, 10, 0, 1.25, 0.1, 0, 10, 0, -0.1, 1.1, 0, 5, 0, 0, 0, 1, 0], "Kodak"),
+  ColorFilter.matrix([1.3, 0.1, -0.1, 0, 10, 0, 1.25, 0.1, 0, 10, 0, -0.1, 1.1, 0, 5, 0, 0, 0, 1, 0]),
+  //Frost
+  ColorFilter.matrix([0.8, 0.2, 0.1, 0, 0, 0.2, 1.1, 0.1, 0, 0, 0.1, 0.1, 1.2, 0, 10, 0, 0, 0, 1, 0]),
+  //Night Vision
+  ColorFilter.matrix([0.1, 0.95, 0.2, 0, 0, 0.1, 1.5, 0.1, 0, 0, 0.2, 0.7, 0, 0, 0, 0, 0, 0, 1, 0]),
   //Sunset
-  EditFilter.fromMatrix([1.5, 0.2, 0, 0, 0, 0.1, 0.9, 0.1, 0, 0, -0.1, -0.2, 1.3, 0, 0, 0, 0, 0, 1, 0], "Sunset"),
+  ColorFilter.matrix([1.5, 0.2, 0, 0, 0, 0.1, 0.9, 0.1, 0, 0, -0.1, -0.2, 1.3, 0, 0, 0, 0, 0, 1, 0]),
   //Noir
-  EditFilter.fromMatrix([1.3, -0.3, 0.1, 0, 0, -0.1, 1.2, -0.1, 0, 0, 0.1, -0.2, 1.3, 0, 0, 0, 0, 0, 1, 0], "Noir"),
+  ColorFilter.matrix([1.3, -0.3, 0.1, 0, 0, -0.1, 1.2, -0.1, 0, 0, 0.1, -0.2, 1.3, 0, 0, 0, 0, 0, 1, 0]),
   //Dreamy
-  EditFilter.fromMatrix([1.1, 0.1, 0.1, 0, 0, 0.1, 1.1, 0.1, 0, 0, 0.1, 0.1, 1.1, 0, 15, 0, 0, 0, 1, 0], "Dreamy"),
+  ColorFilter.matrix([1.1, 0.1, 0.1, 0, 0, 0.1, 1.1, 0.1, 0, 0, 0.1, 0.1, 1.1, 0, 15, 0, 0, 0, 1, 0]),
   //Sepia
-  EditFilter.fromMatrix([
-    0.393,
-    0.769,
-    0.189,
-    0,
-    0,
-    0.349,
-    0.686,
-    0.168,
-    0,
-    0,
-    0.272,
-    0.534,
-    0.131,
-    0,
-    0,
-    0,
-    0,
-    0,
-    1,
-    0,
-  ], "Sepia"),
+  ColorFilter.matrix([0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131, 0, 0, 0, 0, 0, 1, 0]),
   //Radium
-  EditFilter.fromMatrix([
+  ColorFilter.matrix([
     1.438,
     -0.062,
     -0.062,
@@ -291,9 +67,9 @@ final List<EditFilter> filters = [
     0,
     1,
     0,
-  ], "Radium"),
+  ]),
   //Aqua
-  EditFilter.fromMatrix([
+  ColorFilter.matrix([
     0.2126,
     0.7152,
     0.0722,
@@ -314,23 +90,59 @@ final List<EditFilter> filters = [
     0,
     1,
     0,
-  ], "Aqua"),
+  ]),
   //Purple Haze
-  EditFilter.fromMatrix([1.3, 0, 1.2, 0, 0, 0, 1.1, 0, 0, 0, 0.2, 0, 1.3, 0, 0, 0, 0, 0, 1, 0], "Purple Haze"),
+  ColorFilter.matrix([1.3, 0, 1.2, 0, 0, 0, 1.1, 0, 0, 0, 0.2, 0, 1.3, 0, 0, 0, 0, 0, 1, 0]),
   //Lemonade
-  EditFilter.fromMatrix([1.2, 0.1, 0, 0, 0, 0, 1.1, 0.2, 0, 0, 0.1, 0, 0.7, 0, 0, 0, 0, 0, 1, 0], "Lemonade"),
+  ColorFilter.matrix([1.2, 0.1, 0, 0, 0, 0, 1.1, 0.2, 0, 0, 0.1, 0, 0.7, 0, 0, 0, 0, 0, 1, 0]),
   //Caramel
-  EditFilter.fromMatrix([1.6, 0.2, 0, 0, 0, 0.1, 1.3, 0.1, 0, 0, 0, 0.1, 0.9, 0, 0, 0, 0, 0, 1, 0], "Caramel"),
+  ColorFilter.matrix([1.6, 0.2, 0, 0, 0, 0.1, 1.3, 0.1, 0, 0, 0, 0.1, 0.9, 0, 0, 0, 0, 0, 1, 0]),
   //Peachy
-  EditFilter.fromMatrix([1.3, 0.5, 0, 0, 0, 0.2, 1.1, 0.3, 0, 0, 0.1, 0.1, 1.2, 0, 0, 0, 0, 0, 1, 0], "Peachy"),
+  ColorFilter.matrix([1.3, 0.5, 0, 0, 0, 0.2, 1.1, 0.3, 0, 0, 0.1, 0.1, 1.2, 0, 0, 0, 0, 0, 1, 0]),
   //Neon
-  EditFilter.fromMatrix([1, 0, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 1, 0], "Neon"),
+  ColorFilter.matrix([1, 0, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 1, 0]),
   //Cold Morning
-  EditFilter.fromMatrix([0.9, 0.1, 0.2, 0, 0, 0, 1, 0.1, 0, 0, 0.1, 0, 1.2, 0, 0, 0, 0, 0, 1, 0], "Cold Morning"),
+  ColorFilter.matrix([0.9, 0.1, 0.2, 0, 0, 0, 1, 0.1, 0, 0, 0.1, 0, 1.2, 0, 0, 0, 0, 0, 1, 0]),
   //Lush
-  EditFilter.fromMatrix([0.9, 0.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 0, 1, 0], "Lush"),
+  ColorFilter.matrix([0.9, 0.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 0, 1, 0]),
   //Urban Neon
-  EditFilter.fromMatrix([1.1, 0, 0.3, 0, 0, 0, 0.9, 0.3, 0, 0, 0.3, 0.1, 1.2, 0, 0, 0, 0, 0, 1, 0], "Urban Neon"),
+  ColorFilter.matrix([1.1, 0, 0.3, 0, 0, 0, 0.9, 0.3, 0, 0, 0.3, 0.1, 1.2, 0, 0, 0, 0, 0, 1, 0]),
   //Monochrome
-  EditFilter.fromMatrix([0.6, 0.2, 0.2, 0, 0, 0.2, 0.6, 0.2, 0, 0, 0.2, 0.2, 0.7, 0, 0, 0, 0, 0, 1, 0], "Monochrome"),
+  ColorFilter.matrix([0.6, 0.2, 0.2, 0, 0, 0.2, 0.6, 0.2, 0, 0, 0.2, 0.2, 0.7, 0, 0, 0, 0, 0, 1, 0]),
+];
+
+const List<String> filterNames = [
+  'Original',
+  'Vintage',
+  'Mood',
+  'Crisp',
+  'Cool',
+  'Blush',
+  'Sunkissed',
+  'Fresh',
+  'Classic',
+  'Lomo-ish',
+  'Nashville',
+  'Valencia',
+  'Clarendon',
+  'Moon',
+  'Willow',
+  'Kodak',
+  'Frost',
+  'Night Vision',
+  'Sunset',
+  'Noir',
+  'Dreamy',
+  'Sepia',
+  'Radium',
+  'Aqua',
+  'Purple Haze',
+  'Lemonade',
+  'Caramel',
+  'Peachy',
+  'Neon',
+  'Cold Morning',
+  'Lush',
+  'Urban Neon',
+  'Monochrome',
 ];

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

@@ -56,8 +56,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/asset_edit.model.dart

@@ -1,22 +0,0 @@
-import "package:openapi/api.dart" as api show AssetEditAction;
-
-enum AssetEditAction { rotate, crop, mirror, filter, other }
-
-extension AssetEditActionExtension on AssetEditAction {
-  api.AssetEditAction? toDto() {
-    return switch (this) {
-      AssetEditAction.rotate => api.AssetEditAction.rotate,
-      AssetEditAction.crop => api.AssetEditAction.crop,
-      AssetEditAction.mirror => api.AssetEditAction.mirror,
-      AssetEditAction.filter => api.AssetEditAction.filter,
-      AssetEditAction.other => null,
-    };
-  }
-}
-
-class AssetEdit {
-  final AssetEditAction action;
-  final Map<String, dynamic> parameters;
-
-  const AssetEdit({required this.action, required this.parameters});
-}

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/domain/services/sync_stream.service.dart

@@ -201,10 +201,6 @@ class SyncStreamService {
         return _syncStreamRepository.deleteAssetsV1(data.cast());
       case SyncEntityType.assetExifV1:
         return _syncStreamRepository.updateAssetsExifV1(data.cast());
-      case SyncEntityType.assetEditV1:
-        return _syncStreamRepository.updateAssetEditsV1(data.cast());
-      case SyncEntityType.assetEditDeleteV1:
-        return _syncStreamRepository.deleteAssetEditsV1(data.cast());
       case SyncEntityType.assetMetadataV1:
         return _syncStreamRepository.updateAssetsMetadataV1(data.cast());
       case SyncEntityType.assetMetadataDeleteV1:
@@ -340,7 +336,6 @@ class SyncStreamService {
     _logger.info('Processing batch of ${batchData.length} AssetEditReadyV1 events');
 
     final List<SyncAssetV1> assets = [];
-    final List<SyncAssetEditV1> assetEdits = [];
 
     try {
       for (final data in batchData) {
@@ -350,7 +345,6 @@ class SyncStreamService {
 
         final payload = data;
         final assetData = payload['asset'];
-        final editData = payload['edit'];
 
         if (assetData == null) {
           continue;
@@ -360,28 +354,11 @@ class SyncStreamService {
 
         if (asset != null) {
           assets.add(asset);
-
-          // Edits are only send on v2.6.0+
-          if (editData != null) {
-            final edits = (editData as List<dynamic>)
-                .map((e) => SyncAssetEditV1.fromJson(e))
-                .whereType<SyncAssetEditV1>()
-                .toList();
-
-            assetEdits.addAll(edits);
-          }
         }
       }
 
       if (assets.isNotEmpty) {
         await _syncStreamRepository.updateAssetsV1(assets, debugLabel: 'websocket-edit');
-
-        // edits that are sent replace previous edits, so we delete existing ones first
-        await _syncStreamRepository.deleteAssetEditsV1(
-          assets.map((asset) => SyncAssetEditDeleteV1(assetId: asset.id)).toList(),
-          debugLabel: 'websocket-edit',
-        );
-        await _syncStreamRepository.updateAssetEditsV1(assetEdits, debugLabel: 'websocket-edit');
         _logger.info('Successfully processed ${assets.length} edited assets');
       }
     } catch (error, stackTrace) {

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

@@ -1,33 +0,0 @@
-import 'package:drift/drift.dart';
-import 'package:immich_mobile/domain/models/asset_edit.model.dart';
-import 'package:immich_mobile/infrastructure/entities/asset_edit.entity.drift.dart';
-import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.dart';
-import 'package:immich_mobile/infrastructure/utils/drift_default.mixin.dart';
-
-@TableIndex.sql('CREATE INDEX IF NOT EXISTS idx_asset_edit_asset_id ON asset_edit_entity (asset_id)')
-class AssetEditEntity extends Table with DriftDefaultsMixin {
-  const AssetEditEntity();
-
-  TextColumn get id => text()();
-
-  TextColumn get assetId => text().references(RemoteAssetEntity, #id, onDelete: KeyAction.cascade)();
-
-  IntColumn get action => intEnum<AssetEditAction>()();
-
-  BlobColumn get parameters => blob().map(editParameterConverter)();
-
-  IntColumn get sequence => integer()();
-
-  @override
-  Set<Column> get primaryKey => {id};
-}
-
-final JsonTypeConverter2<Map<String, Object?>, Uint8List, Object?> editParameterConverter = TypeConverter.jsonb(
-  fromJson: (json) => json as Map<String, Object?>,
-);
-
-extension AssetEditEntityDataDomainEx on AssetEditEntityData {
-  AssetEdit toDto() {
-    return AssetEdit(action: action, parameters: parameters);
-  }
-}

mobile/lib/infrastructure/entities/asset_edit.entity.drift.dart

@@ -1,752 +0,0 @@
-// dart format width=80
-// ignore_for_file: type=lint
-import 'package:drift/drift.dart' as i0;
-import 'package:immich_mobile/infrastructure/entities/asset_edit.entity.drift.dart'
-    as i1;
-import 'package:immich_mobile/domain/models/asset_edit.model.dart' as i2;
-import 'dart:typed_data' as i3;
-import 'package:immich_mobile/infrastructure/entities/asset_edit.entity.dart'
-    as i4;
-import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.drift.dart'
-    as i5;
-import 'package:drift/internal/modular.dart' as i6;
-
-typedef $$AssetEditEntityTableCreateCompanionBuilder =
-    i1.AssetEditEntityCompanion Function({
-      required String id,
-      required String assetId,
-      required i2.AssetEditAction action,
-      required Map<String, Object?> parameters,
-      required int sequence,
-    });
-typedef $$AssetEditEntityTableUpdateCompanionBuilder =
-    i1.AssetEditEntityCompanion Function({
-      i0.Value<String> id,
-      i0.Value<String> assetId,
-      i0.Value<i2.AssetEditAction> action,
-      i0.Value<Map<String, Object?>> parameters,
-      i0.Value<int> sequence,
-    });
-
-final class $$AssetEditEntityTableReferences
-    extends
-        i0.BaseReferences<
-          i0.GeneratedDatabase,
-          i1.$AssetEditEntityTable,
-          i1.AssetEditEntityData
-        > {
-  $$AssetEditEntityTableReferences(
-    super.$_db,
-    super.$_table,
-    super.$_typedResult,
-  );
-
-  static i5.$RemoteAssetEntityTable _assetIdTable(i0.GeneratedDatabase db) =>
-      i6.ReadDatabaseContainer(db)
-          .resultSet<i5.$RemoteAssetEntityTable>('remote_asset_entity')
-          .createAlias(
-            i0.$_aliasNameGenerator(
-              i6.ReadDatabaseContainer(db)
-                  .resultSet<i1.$AssetEditEntityTable>('asset_edit_entity')
-                  .assetId,
-              i6.ReadDatabaseContainer(
-                db,
-              ).resultSet<i5.$RemoteAssetEntityTable>('remote_asset_entity').id,
-            ),
-          );
-
-  i5.$$RemoteAssetEntityTableProcessedTableManager get assetId {
-    final $_column = $_itemColumn<String>('asset_id')!;
-
-    final manager = i5
-        .$$RemoteAssetEntityTableTableManager(
-          $_db,
-          i6.ReadDatabaseContainer(
-            $_db,
-          ).resultSet<i5.$RemoteAssetEntityTable>('remote_asset_entity'),
-        )
-        .filter((f) => f.id.sqlEquals($_column));
-    final item = $_typedResult.readTableOrNull(_assetIdTable($_db));
-    if (item == null) return manager;
-    return i0.ProcessedTableManager(
-      manager.$state.copyWith(prefetchedData: [item]),
-    );
-  }
-}
-
-class $$AssetEditEntityTableFilterComposer
-    extends i0.Composer<i0.GeneratedDatabase, i1.$AssetEditEntityTable> {
-  $$AssetEditEntityTableFilterComposer({
-    required super.$db,
-    required super.$table,
-    super.joinBuilder,
-    super.$addJoinBuilderToRootComposer,
-    super.$removeJoinBuilderFromRootComposer,
-  });
-  i0.ColumnFilters<String> get id => $composableBuilder(
-    column: $table.id,
-    builder: (column) => i0.ColumnFilters(column),
-  );
-
-  i0.ColumnWithTypeConverterFilters<i2.AssetEditAction, i2.AssetEditAction, int>
-  get action => $composableBuilder(
-    column: $table.action,
-    builder: (column) => i0.ColumnWithTypeConverterFilters(column),
-  );
-
-  i0.ColumnWithTypeConverterFilters<
-    Map<String, Object?>,
-    Map<String, Object>,
-    i3.Uint8List
-  >
-  get parameters => $composableBuilder(
-    column: $table.parameters,
-    builder: (column) => i0.ColumnWithTypeConverterFilters(column),
-  );
-
-  i0.ColumnFilters<int> get sequence => $composableBuilder(
-    column: $table.sequence,
-    builder: (column) => i0.ColumnFilters(column),
-  );
-
-  i5.$$RemoteAssetEntityTableFilterComposer get assetId {
-    final i5.$$RemoteAssetEntityTableFilterComposer composer = $composerBuilder(
-      composer: this,
-      getCurrentColumn: (t) => t.assetId,
-      referencedTable: i6.ReadDatabaseContainer(
-        $db,
-      ).resultSet<i5.$RemoteAssetEntityTable>('remote_asset_entity'),
-      getReferencedColumn: (t) => t.id,
-      builder:
-          (
-            joinBuilder, {
-            $addJoinBuilderToRootComposer,
-            $removeJoinBuilderFromRootComposer,
-          }) => i5.$$RemoteAssetEntityTableFilterComposer(
-            $db: $db,
-            $table: i6.ReadDatabaseContainer(
-              $db,
-            ).resultSet<i5.$RemoteAssetEntityTable>('remote_asset_entity'),
-            $addJoinBuilderToRootComposer: $addJoinBuilderToRootComposer,
-            joinBuilder: joinBuilder,
-            $removeJoinBuilderFromRootComposer:
-                $removeJoinBuilderFromRootComposer,
-          ),
-    );
-    return composer;
-  }
-}
-
-class $$AssetEditEntityTableOrderingComposer
-    extends i0.Composer<i0.GeneratedDatabase, i1.$AssetEditEntityTable> {
-  $$AssetEditEntityTableOrderingComposer({
-    required super.$db,
-    required super.$table,
-    super.joinBuilder,
-    super.$addJoinBuilderToRootComposer,
-    super.$removeJoinBuilderFromRootComposer,
-  });
-  i0.ColumnOrderings<String> get id => $composableBuilder(
-    column: $table.id,
-    builder: (column) => i0.ColumnOrderings(column),
-  );
-
-  i0.ColumnOrderings<int> get action => $composableBuilder(
-    column: $table.action,
-    builder: (column) => i0.ColumnOrderings(column),
-  );
-
-  i0.ColumnOrderings<i3.Uint8List> get parameters => $composableBuilder(
-    column: $table.parameters,
-    builder: (column) => i0.ColumnOrderings(column),
-  );
-
-  i0.ColumnOrderings<int> get sequence => $composableBuilder(
-    column: $table.sequence,
-    builder: (column) => i0.ColumnOrderings(column),
-  );
-
-  i5.$$RemoteAssetEntityTableOrderingComposer get assetId {
-    final i5.$$RemoteAssetEntityTableOrderingComposer composer =
-        $composerBuilder(
-          composer: this,
-          getCurrentColumn: (t) => t.assetId,
-          referencedTable: i6.ReadDatabaseContainer(
-            $db,
-          ).resultSet<i5.$RemoteAssetEntityTable>('remote_asset_entity'),
-          getReferencedColumn: (t) => t.id,
-          builder:
-              (
-                joinBuilder, {
-                $addJoinBuilderToRootComposer,
-                $removeJoinBuilderFromRootComposer,
-              }) => i5.$$RemoteAssetEntityTableOrderingComposer(
-                $db: $db,
-                $table: i6.ReadDatabaseContainer(
-                  $db,
-                ).resultSet<i5.$RemoteAssetEntityTable>('remote_asset_entity'),
-                $addJoinBuilderToRootComposer: $addJoinBuilderToRootComposer,
-                joinBuilder: joinBuilder,
-                $removeJoinBuilderFromRootComposer:
-                    $removeJoinBuilderFromRootComposer,
-              ),
-        );
-    return composer;
-  }
-}
-
-class $$AssetEditEntityTableAnnotationComposer
-    extends i0.Composer<i0.GeneratedDatabase, i1.$AssetEditEntityTable> {
-  $$AssetEditEntityTableAnnotationComposer({
-    required super.$db,
-    required super.$table,
-    super.joinBuilder,
-    super.$addJoinBuilderToRootComposer,
-    super.$removeJoinBuilderFromRootComposer,
-  });
-  i0.GeneratedColumn<String> get id =>
-      $composableBuilder(column: $table.id, builder: (column) => column);
-
-  i0.GeneratedColumnWithTypeConverter<i2.AssetEditAction, int> get action =>
-      $composableBuilder(column: $table.action, builder: (column) => column);
-
-  i0.GeneratedColumnWithTypeConverter<Map<String, Object?>, i3.Uint8List>
-  get parameters => $composableBuilder(
-    column: $table.parameters,
-    builder: (column) => column,
-  );
-
-  i0.GeneratedColumn<int> get sequence =>
-      $composableBuilder(column: $table.sequence, builder: (column) => column);
-
-  i5.$$RemoteAssetEntityTableAnnotationComposer get assetId {
-    final i5.$$RemoteAssetEntityTableAnnotationComposer composer =
-        $composerBuilder(
-          composer: this,
-          getCurrentColumn: (t) => t.assetId,
-          referencedTable: i6.ReadDatabaseContainer(
-            $db,
-          ).resultSet<i5.$RemoteAssetEntityTable>('remote_asset_entity'),
-          getReferencedColumn: (t) => t.id,
-          builder:
-              (
-                joinBuilder, {
-                $addJoinBuilderToRootComposer,
-                $removeJoinBuilderFromRootComposer,
-              }) => i5.$$RemoteAssetEntityTableAnnotationComposer(
-                $db: $db,
-                $table: i6.ReadDatabaseContainer(
-                  $db,
-                ).resultSet<i5.$RemoteAssetEntityTable>('remote_asset_entity'),
-                $addJoinBuilderToRootComposer: $addJoinBuilderToRootComposer,
-                joinBuilder: joinBuilder,
-                $removeJoinBuilderFromRootComposer:
-                    $removeJoinBuilderFromRootComposer,
-              ),
-        );
-    return composer;
-  }
-}
-
-class $$AssetEditEntityTableTableManager
-    extends
-        i0.RootTableManager<
-          i0.GeneratedDatabase,
-          i1.$AssetEditEntityTable,
-          i1.AssetEditEntityData,
-          i1.$$AssetEditEntityTableFilterComposer,
-          i1.$$AssetEditEntityTableOrderingComposer,
-          i1.$$AssetEditEntityTableAnnotationComposer,
-          $$AssetEditEntityTableCreateCompanionBuilder,
-          $$AssetEditEntityTableUpdateCompanionBuilder,
-          (i1.AssetEditEntityData, i1.$$AssetEditEntityTableReferences),
-          i1.AssetEditEntityData,
-          i0.PrefetchHooks Function({bool assetId})
-        > {
-  $$AssetEditEntityTableTableManager(
-    i0.GeneratedDatabase db,
-    i1.$AssetEditEntityTable table,
-  ) : super(
-        i0.TableManagerState(
-          db: db,
-          table: table,
-          createFilteringComposer: () =>
-              i1.$$AssetEditEntityTableFilterComposer($db: db, $table: table),
-          createOrderingComposer: () =>
-              i1.$$AssetEditEntityTableOrderingComposer($db: db, $table: table),
-          createComputedFieldComposer: () => i1
-              .$$AssetEditEntityTableAnnotationComposer($db: db, $table: table),
-          updateCompanionCallback:
-              ({
-                i0.Value<String> id = const i0.Value.absent(),
-                i0.Value<String> assetId = const i0.Value.absent(),
-                i0.Value<i2.AssetEditAction> action = const i0.Value.absent(),
-                i0.Value<Map<String, Object?>> parameters =
-                    const i0.Value.absent(),
-                i0.Value<int> sequence = const i0.Value.absent(),
-              }) => i1.AssetEditEntityCompanion(
-                id: id,
-                assetId: assetId,
-                action: action,
-                parameters: parameters,
-                sequence: sequence,
-              ),
-          createCompanionCallback:
-              ({
-                required String id,
-                required String assetId,
-                required i2.AssetEditAction action,
-                required Map<String, Object?> parameters,
-                required int sequence,
-              }) => i1.AssetEditEntityCompanion.insert(
-                id: id,
-                assetId: assetId,
-                action: action,
-                parameters: parameters,
-                sequence: sequence,
-              ),
-          withReferenceMapper: (p0) => p0
-              .map(
-                (e) => (
-                  e.readTable(table),
-                  i1.$$AssetEditEntityTableReferences(db, table, e),
-                ),
-              )
-              .toList(),
-          prefetchHooksCallback: ({assetId = false}) {
-            return i0.PrefetchHooks(
-              db: db,
-              explicitlyWatchedTables: [],
-              addJoins:
-                  <
-                    T extends i0.TableManagerState<
-                      dynamic,
-                      dynamic,
-                      dynamic,
-                      dynamic,
-                      dynamic,
-                      dynamic,
-                      dynamic,
-                      dynamic,
-                      dynamic,
-                      dynamic,
-                      dynamic
-                    >
-                  >(state) {
-                    if (assetId) {
-                      state =
-                          state.withJoin(
-                                currentTable: table,
-                                currentColumn: table.assetId,
-                                referencedTable: i1
-                                    .$$AssetEditEntityTableReferences
-                                    ._assetIdTable(db),
-                                referencedColumn: i1
-                                    .$$AssetEditEntityTableReferences
-                                    ._assetIdTable(db)
-                                    .id,
-                              )
-                              as T;
-                    }
-
-                    return state;
-                  },
-              getPrefetchedDataCallback: (items) async {
-                return [];
-              },
-            );
-          },
-        ),
-      );
-}
-
-typedef $$AssetEditEntityTableProcessedTableManager =
-    i0.ProcessedTableManager<
-      i0.GeneratedDatabase,
-      i1.$AssetEditEntityTable,
-      i1.AssetEditEntityData,
-      i1.$$AssetEditEntityTableFilterComposer,
-      i1.$$AssetEditEntityTableOrderingComposer,
-      i1.$$AssetEditEntityTableAnnotationComposer,
-      $$AssetEditEntityTableCreateCompanionBuilder,
-      $$AssetEditEntityTableUpdateCompanionBuilder,
-      (i1.AssetEditEntityData, i1.$$AssetEditEntityTableReferences),
-      i1.AssetEditEntityData,
-      i0.PrefetchHooks Function({bool assetId})
-    >;
-i0.Index get idxAssetEditAssetId => i0.Index(
-  'idx_asset_edit_asset_id',
-  'CREATE INDEX IF NOT EXISTS idx_asset_edit_asset_id ON asset_edit_entity (asset_id)',
-);
-
-class $AssetEditEntityTable extends i4.AssetEditEntity
-    with i0.TableInfo<$AssetEditEntityTable, i1.AssetEditEntityData> {
-  @override
-  final i0.GeneratedDatabase attachedDatabase;
-  final String? _alias;
-  $AssetEditEntityTable(this.attachedDatabase, [this._alias]);
-  static const i0.VerificationMeta _idMeta = const i0.VerificationMeta('id');
-  @override
-  late final i0.GeneratedColumn<String> id = i0.GeneratedColumn<String>(
-    'id',
-    aliasedName,
-    false,
-    type: i0.DriftSqlType.string,
-    requiredDuringInsert: true,
-  );
-  static const i0.VerificationMeta _assetIdMeta = const i0.VerificationMeta(
-    'assetId',
-  );
-  @override
-  late final i0.GeneratedColumn<String> assetId = i0.GeneratedColumn<String>(
-    'asset_id',
-    aliasedName,
-    false,
-    type: i0.DriftSqlType.string,
-    requiredDuringInsert: true,
-    defaultConstraints: i0.GeneratedColumn.constraintIsAlways(
-      'REFERENCES remote_asset_entity (id) ON DELETE CASCADE',
-    ),
-  );
-  @override
-  late final i0.GeneratedColumnWithTypeConverter<i2.AssetEditAction, int>
-  action =
-      i0.GeneratedColumn<int>(
-        'action',
-        aliasedName,
-        false,
-        type: i0.DriftSqlType.int,
-        requiredDuringInsert: true,
-      ).withConverter<i2.AssetEditAction>(
-        i1.$AssetEditEntityTable.$converteraction,
-      );
-  @override
-  late final i0.GeneratedColumnWithTypeConverter<
-    Map<String, Object?>,
-    i3.Uint8List
-  >
-  parameters =
-      i0.GeneratedColumn<i3.Uint8List>(
-        'parameters',
-        aliasedName,
-        false,
-        type: i0.DriftSqlType.blob,
-        requiredDuringInsert: true,
-      ).withConverter<Map<String, Object?>>(
-        i1.$AssetEditEntityTable.$converterparameters,
-      );
-  static const i0.VerificationMeta _sequenceMeta = const i0.VerificationMeta(
-    'sequence',
-  );
-  @override
-  late final i0.GeneratedColumn<int> sequence = i0.GeneratedColumn<int>(
-    'sequence',
-    aliasedName,
-    false,
-    type: i0.DriftSqlType.int,
-    requiredDuringInsert: true,
-  );
-  @override
-  List<i0.GeneratedColumn> get $columns => [
-    id,
-    assetId,
-    action,
-    parameters,
-    sequence,
-  ];
-  @override
-  String get aliasedName => _alias ?? actualTableName;
-  @override
-  String get actualTableName => $name;
-  static const String $name = 'asset_edit_entity';
-  @override
-  i0.VerificationContext validateIntegrity(
-    i0.Insertable<i1.AssetEditEntityData> instance, {
-    bool isInserting = false,
-  }) {
-    final context = i0.VerificationContext();
-    final data = instance.toColumns(true);
-    if (data.containsKey('id')) {
-      context.handle(_idMeta, id.isAcceptableOrUnknown(data['id']!, _idMeta));
-    } else if (isInserting) {
-      context.missing(_idMeta);
-    }
-    if (data.containsKey('asset_id')) {
-      context.handle(
-        _assetIdMeta,
-        assetId.isAcceptableOrUnknown(data['asset_id']!, _assetIdMeta),
-      );
-    } else if (isInserting) {
-      context.missing(_assetIdMeta);
-    }
-    if (data.containsKey('sequence')) {
-      context.handle(
-        _sequenceMeta,
-        sequence.isAcceptableOrUnknown(data['sequence']!, _sequenceMeta),
-      );
-    } else if (isInserting) {
-      context.missing(_sequenceMeta);
-    }
-    return context;
-  }
-
-  @override
-  Set<i0.GeneratedColumn> get $primaryKey => {id};
-  @override
-  i1.AssetEditEntityData map(Map<String, dynamic> data, {String? tablePrefix}) {
-    final effectivePrefix = tablePrefix != null ? '$tablePrefix.' : '';
-    return i1.AssetEditEntityData(
-      id: attachedDatabase.typeMapping.read(
-        i0.DriftSqlType.string,
-        data['${effectivePrefix}id'],
-      )!,
-      assetId: attachedDatabase.typeMapping.read(
-        i0.DriftSqlType.string,
-        data['${effectivePrefix}asset_id'],
-      )!,
-      action: i1.$AssetEditEntityTable.$converteraction.fromSql(
-        attachedDatabase.typeMapping.read(
-          i0.DriftSqlType.int,
-          data['${effectivePrefix}action'],
-        )!,
-      ),
-      parameters: i1.$AssetEditEntityTable.$converterparameters.fromSql(
-        attachedDatabase.typeMapping.read(
-          i0.DriftSqlType.blob,
-          data['${effectivePrefix}parameters'],
-        )!,
-      ),
-      sequence: attachedDatabase.typeMapping.read(
-        i0.DriftSqlType.int,
-        data['${effectivePrefix}sequence'],
-      )!,
-    );
-  }
-
-  @override
-  $AssetEditEntityTable createAlias(String alias) {
-    return $AssetEditEntityTable(attachedDatabase, alias);
-  }
-
-  static i0.JsonTypeConverter2<i2.AssetEditAction, int, int> $converteraction =
-      const i0.EnumIndexConverter<i2.AssetEditAction>(
-        i2.AssetEditAction.values,
-      );
-  static i0.JsonTypeConverter2<Map<String, Object?>, i3.Uint8List, Object?>
-  $converterparameters = i4.editParameterConverter;
-  @override
-  bool get withoutRowId => true;
-  @override
-  bool get isStrict => true;
-}
-
-class AssetEditEntityData extends i0.DataClass
-    implements i0.Insertable<i1.AssetEditEntityData> {
-  final String id;
-  final String assetId;
-  final i2.AssetEditAction action;
-  final Map<String, Object?> parameters;
-  final int sequence;
-  const AssetEditEntityData({
-    required this.id,
-    required this.assetId,
-    required this.action,
-    required this.parameters,
-    required this.sequence,
-  });
-  @override
-  Map<String, i0.Expression> toColumns(bool nullToAbsent) {
-    final map = <String, i0.Expression>{};
-    map['id'] = i0.Variable<String>(id);
-    map['asset_id'] = i0.Variable<String>(assetId);
-    {
-      map['action'] = i0.Variable<int>(
-        i1.$AssetEditEntityTable.$converteraction.toSql(action),
-      );
-    }
-    {
-      map['parameters'] = i0.Variable<i3.Uint8List>(
-        i1.$AssetEditEntityTable.$converterparameters.toSql(parameters),
-      );
-    }
-    map['sequence'] = i0.Variable<int>(sequence);
-    return map;
-  }
-
-  factory AssetEditEntityData.fromJson(
-    Map<String, dynamic> json, {
-    i0.ValueSerializer? serializer,
-  }) {
-    serializer ??= i0.driftRuntimeOptions.defaultSerializer;
-    return AssetEditEntityData(
-      id: serializer.fromJson<String>(json['id']),
-      assetId: serializer.fromJson<String>(json['assetId']),
-      action: i1.$AssetEditEntityTable.$converteraction.fromJson(
-        serializer.fromJson<int>(json['action']),
-      ),
-      parameters: i1.$AssetEditEntityTable.$converterparameters.fromJson(
-        serializer.fromJson<Object?>(json['parameters']),
-      ),
-      sequence: serializer.fromJson<int>(json['sequence']),
-    );
-  }
-  @override
-  Map<String, dynamic> toJson({i0.ValueSerializer? serializer}) {
-    serializer ??= i0.driftRuntimeOptions.defaultSerializer;
-    return <String, dynamic>{
-      'id': serializer.toJson<String>(id),
-      'assetId': serializer.toJson<String>(assetId),
-      'action': serializer.toJson<int>(
-        i1.$AssetEditEntityTable.$converteraction.toJson(action),
-      ),
-      'parameters': serializer.toJson<Object?>(
-        i1.$AssetEditEntityTable.$converterparameters.toJson(parameters),
-      ),
-      'sequence': serializer.toJson<int>(sequence),
-    };
-  }
-
-  i1.AssetEditEntityData copyWith({
-    String? id,
-    String? assetId,
-    i2.AssetEditAction? action,
-    Map<String, Object?>? parameters,
-    int? sequence,
-  }) => i1.AssetEditEntityData(
-    id: id ?? this.id,
-    assetId: assetId ?? this.assetId,
-    action: action ?? this.action,
-    parameters: parameters ?? this.parameters,
-    sequence: sequence ?? this.sequence,
-  );
-  AssetEditEntityData copyWithCompanion(i1.AssetEditEntityCompanion data) {
-    return AssetEditEntityData(
-      id: data.id.present ? data.id.value : this.id,
-      assetId: data.assetId.present ? data.assetId.value : this.assetId,
-      action: data.action.present ? data.action.value : this.action,
-      parameters: data.parameters.present
-          ? data.parameters.value
-          : this.parameters,
-      sequence: data.sequence.present ? data.sequence.value : this.sequence,
-    );
-  }
-
-  @override
-  String toString() {
-    return (StringBuffer('AssetEditEntityData(')
-          ..write('id: $id, ')
-          ..write('assetId: $assetId, ')
-          ..write('action: $action, ')
-          ..write('parameters: $parameters, ')
-          ..write('sequence: $sequence')
-          ..write(')'))
-        .toString();
-  }
-
-  @override
-  int get hashCode => Object.hash(id, assetId, action, parameters, sequence);
-  @override
-  bool operator ==(Object other) =>
-      identical(this, other) ||
-      (other is i1.AssetEditEntityData &&
-          other.id == this.id &&
-          other.assetId == this.assetId &&
-          other.action == this.action &&
-          other.parameters == this.parameters &&
-          other.sequence == this.sequence);
-}
-
-class AssetEditEntityCompanion
-    extends i0.UpdateCompanion<i1.AssetEditEntityData> {
-  final i0.Value<String> id;
-  final i0.Value<String> assetId;
-  final i0.Value<i2.AssetEditAction> action;
-  final i0.Value<Map<String, Object?>> parameters;
-  final i0.Value<int> sequence;
-  const AssetEditEntityCompanion({
-    this.id = const i0.Value.absent(),
-    this.assetId = const i0.Value.absent(),
-    this.action = const i0.Value.absent(),
-    this.parameters = const i0.Value.absent(),
-    this.sequence = const i0.Value.absent(),
-  });
-  AssetEditEntityCompanion.insert({
-    required String id,
-    required String assetId,
-    required i2.AssetEditAction action,
-    required Map<String, Object?> parameters,
-    required int sequence,
-  }) : id = i0.Value(id),
-       assetId = i0.Value(assetId),
-       action = i0.Value(action),
-       parameters = i0.Value(parameters),
-       sequence = i0.Value(sequence);
-  static i0.Insertable<i1.AssetEditEntityData> custom({
-    i0.Expression<String>? id,
-    i0.Expression<String>? assetId,
-    i0.Expression<int>? action,
-    i0.Expression<i3.Uint8List>? parameters,
-    i0.Expression<int>? sequence,
-  }) {
-    return i0.RawValuesInsertable({
-      if (id != null) 'id': id,
-      if (assetId != null) 'asset_id': assetId,
-      if (action != null) 'action': action,
-      if (parameters != null) 'parameters': parameters,
-      if (sequence != null) 'sequence': sequence,
-    });
-  }
-
-  i1.AssetEditEntityCompanion copyWith({
-    i0.Value<String>? id,
-    i0.Value<String>? assetId,
-    i0.Value<i2.AssetEditAction>? action,
-    i0.Value<Map<String, Object?>>? parameters,
-    i0.Value<int>? sequence,
-  }) {
-    return i1.AssetEditEntityCompanion(
-      id: id ?? this.id,
-      assetId: assetId ?? this.assetId,
-      action: action ?? this.action,
-      parameters: parameters ?? this.parameters,
-      sequence: sequence ?? this.sequence,
-    );
-  }
-
-  @override
-  Map<String, i0.Expression> toColumns(bool nullToAbsent) {
-    final map = <String, i0.Expression>{};
-    if (id.present) {
-      map['id'] = i0.Variable<String>(id.value);
-    }
-    if (assetId.present) {
-      map['asset_id'] = i0.Variable<String>(assetId.value);
-    }
-    if (action.present) {
-      map['action'] = i0.Variable<int>(
-        i1.$AssetEditEntityTable.$converteraction.toSql(action.value),
-      );
-    }
-    if (parameters.present) {
-      map['parameters'] = i0.Variable<i3.Uint8List>(
-        i1.$AssetEditEntityTable.$converterparameters.toSql(parameters.value),
-      );
-    }
-    if (sequence.present) {
-      map['sequence'] = i0.Variable<int>(sequence.value);
-    }
-    return map;
-  }
-
-  @override
-  String toString() {
-    return (StringBuffer('AssetEditEntityCompanion(')
-          ..write('id: $id, ')
-          ..write('assetId: $assetId, ')
-          ..write('action: $action, ')
-          ..write('parameters: $parameters, ')
-          ..write('sequence: $sequence')
-          ..write(')'))
-        .toString();
-  }
-}

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/db.repository.dart

@@ -4,7 +4,6 @@ import 'package:drift/drift.dart';
 import 'package:drift_flutter/drift_flutter.dart';
 import 'package:flutter/foundation.dart';
 import 'package:immich_mobile/domain/interfaces/db.interface.dart';
-import 'package:immich_mobile/infrastructure/entities/asset_edit.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/asset_face.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/auth_user.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/exif.entity.dart';
@@ -67,7 +66,6 @@ class IsarDatabaseRepository implements IDatabaseRepository {
     AssetFaceEntity,
     StoreEntity,
     TrashedLocalAssetEntity,
-    AssetEditEntity,
   ],
   include: {'package:immich_mobile/infrastructure/entities/merged_asset.drift'},
 )
@@ -99,7 +97,7 @@ class Drift extends $Drift implements IDatabaseRepository {
   }
 
   @override
-  int get schemaVersion => 20;
+  int get schemaVersion => 19;
 
   @override
   MigrationStrategy get migration => MigrationStrategy(
@@ -228,10 +226,6 @@ class Drift extends $Drift implements IDatabaseRepository {
             await m.createIndex(v19.idxRemoteAssetLocalDateTimeMonth);
             await m.createIndex(v19.idxStackPrimaryAssetId);
           },
-          from19To20: (m, v20) async {
-            await m.createTable(v20.assetEditEntity);
-            await m.createIndex(v20.idxAssetEditAssetId);
-          },
         ),
       );
 

mobile/lib/infrastructure/repositories/db.repository.drift.dart

@@ -41,11 +41,9 @@ import 'package:immich_mobile/infrastructure/entities/store.entity.drift.dart'
     as i19;
 import 'package:immich_mobile/infrastructure/entities/trashed_local_asset.entity.drift.dart'
     as i20;
-import 'package:immich_mobile/infrastructure/entities/asset_edit.entity.drift.dart'
-    as i21;
 import 'package:immich_mobile/infrastructure/entities/merged_asset.drift.dart'
-    as i22;
-import 'package:drift/internal/modular.dart' as i23;
+    as i21;
+import 'package:drift/internal/modular.dart' as i22;
 
 abstract class $Drift extends i0.GeneratedDatabase {
   $Drift(i0.QueryExecutor e) : super(e);
@@ -87,11 +85,9 @@ abstract class $Drift extends i0.GeneratedDatabase {
   late final i19.$StoreEntityTable storeEntity = i19.$StoreEntityTable(this);
   late final i20.$TrashedLocalAssetEntityTable trashedLocalAssetEntity = i20
       .$TrashedLocalAssetEntityTable(this);
-  late final i21.$AssetEditEntityTable assetEditEntity = i21
-      .$AssetEditEntityTable(this);
-  i22.MergedAssetDrift get mergedAssetDrift => i23.ReadDatabaseContainer(
+  i21.MergedAssetDrift get mergedAssetDrift => i22.ReadDatabaseContainer(
     this,
-  ).accessor<i22.MergedAssetDrift>(i22.MergedAssetDrift.new);
+  ).accessor<i21.MergedAssetDrift>(i21.MergedAssetDrift.new);
   @override
   Iterable<i0.TableInfo<i0.Table, Object?>> get allTables =>
       allSchemaEntities.whereType<i0.TableInfo<i0.Table, Object?>>();
@@ -129,7 +125,6 @@ abstract class $Drift extends i0.GeneratedDatabase {
     assetFaceEntity,
     storeEntity,
     trashedLocalAssetEntity,
-    assetEditEntity,
     i10.idxPartnerSharedWithId,
     i11.idxLatLng,
     i12.idxRemoteAlbumAssetAlbumAsset,
@@ -139,7 +134,6 @@ abstract class $Drift extends i0.GeneratedDatabase {
     i18.idxAssetFaceAssetId,
     i20.idxTrashedLocalAssetChecksum,
     i20.idxTrashedLocalAssetAlbum,
-    i21.idxAssetEditAssetId,
   ];
   @override
   i0.StreamQueryUpdateRules
@@ -331,13 +325,6 @@ abstract class $Drift extends i0.GeneratedDatabase {
       ),
       result: [i0.TableUpdate('asset_face_entity', kind: i0.UpdateKind.update)],
     ),
-    i0.WritePropagation(
-      on: i0.TableUpdateQuery.onTableName(
-        'remote_asset_entity',
-        limitUpdateKind: i0.UpdateKind.delete,
-      ),
-      result: [i0.TableUpdate('asset_edit_entity', kind: i0.UpdateKind.delete)],
-    ),
   ]);
   @override
   i0.DriftDatabaseOptions get options =>
@@ -397,6 +384,4 @@ class $DriftManager {
         _db,
         _db.trashedLocalAssetEntity,
       );
-  i21.$$AssetEditEntityTableTableManager get assetEditEntity =>
-      i21.$$AssetEditEntityTableTableManager(_db, _db.assetEditEntity);
 }

mobile/lib/infrastructure/repositories/db.repository.steps.dart

@@ -8360,561 +8360,6 @@ final class Schema19 extends i0.VersionedSchema {
   );
 }
 
-final class Schema20 extends i0.VersionedSchema {
-  Schema20({required super.database}) : super(version: 20);
-  @override
-  late final List<i1.DatabaseSchemaEntity> entities = [
-    userEntity,
-    remoteAssetEntity,
-    stackEntity,
-    localAssetEntity,
-    remoteAlbumEntity,
-    localAlbumEntity,
-    localAlbumAssetEntity,
-    idxLocalAlbumAssetAlbumAsset,
-    idxRemoteAlbumOwnerId,
-    idxLocalAssetChecksum,
-    idxLocalAssetCloudId,
-    idxStackPrimaryAssetId,
-    idxRemoteAssetOwnerChecksum,
-    uQRemoteAssetsOwnerChecksum,
-    uQRemoteAssetsOwnerLibraryChecksum,
-    idxRemoteAssetChecksum,
-    idxRemoteAssetStackId,
-    idxRemoteAssetLocalDateTimeDay,
-    idxRemoteAssetLocalDateTimeMonth,
-    authUserEntity,
-    userMetadataEntity,
-    partnerEntity,
-    remoteExifEntity,
-    remoteAlbumAssetEntity,
-    remoteAlbumUserEntity,
-    remoteAssetCloudIdEntity,
-    memoryEntity,
-    memoryAssetEntity,
-    personEntity,
-    assetFaceEntity,
-    storeEntity,
-    trashedLocalAssetEntity,
-    assetEditEntity,
-    idxPartnerSharedWithId,
-    idxLatLng,
-    idxRemoteAlbumAssetAlbumAsset,
-    idxRemoteAssetCloudId,
-    idxPersonOwnerId,
-    idxAssetFacePersonId,
-    idxAssetFaceAssetId,
-    idxTrashedLocalAssetChecksum,
-    idxTrashedLocalAssetAlbum,
-    idxAssetEditAssetId,
-  ];
-  late final Shape20 userEntity = Shape20(
-    source: i0.VersionedTable(
-      entityName: 'user_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [
-        _column_0,
-        _column_1,
-        _column_3,
-        _column_84,
-        _column_85,
-        _column_91,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape28 remoteAssetEntity = Shape28(
-    source: i0.VersionedTable(
-      entityName: 'remote_asset_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [
-        _column_1,
-        _column_8,
-        _column_9,
-        _column_5,
-        _column_10,
-        _column_11,
-        _column_12,
-        _column_0,
-        _column_13,
-        _column_14,
-        _column_15,
-        _column_16,
-        _column_17,
-        _column_18,
-        _column_19,
-        _column_20,
-        _column_21,
-        _column_86,
-        _column_101,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape3 stackEntity = Shape3(
-    source: i0.VersionedTable(
-      entityName: 'stack_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [_column_0, _column_9, _column_5, _column_15, _column_75],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape26 localAssetEntity = Shape26(
-    source: i0.VersionedTable(
-      entityName: 'local_asset_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [
-        _column_1,
-        _column_8,
-        _column_9,
-        _column_5,
-        _column_10,
-        _column_11,
-        _column_12,
-        _column_0,
-        _column_22,
-        _column_14,
-        _column_23,
-        _column_98,
-        _column_96,
-        _column_46,
-        _column_47,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape9 remoteAlbumEntity = Shape9(
-    source: i0.VersionedTable(
-      entityName: 'remote_album_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [
-        _column_0,
-        _column_1,
-        _column_56,
-        _column_9,
-        _column_5,
-        _column_15,
-        _column_57,
-        _column_58,
-        _column_59,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape19 localAlbumEntity = Shape19(
-    source: i0.VersionedTable(
-      entityName: 'local_album_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [
-        _column_0,
-        _column_1,
-        _column_5,
-        _column_31,
-        _column_32,
-        _column_90,
-        _column_33,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape22 localAlbumAssetEntity = Shape22(
-    source: i0.VersionedTable(
-      entityName: 'local_album_asset_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(asset_id, album_id)'],
-      columns: [_column_34, _column_35, _column_33],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  final i1.Index idxLocalAlbumAssetAlbumAsset = i1.Index(
-    'idx_local_album_asset_album_asset',
-    'CREATE INDEX IF NOT EXISTS idx_local_album_asset_album_asset ON local_album_asset_entity (album_id, asset_id)',
-  );
-  final i1.Index idxRemoteAlbumOwnerId = i1.Index(
-    'idx_remote_album_owner_id',
-    'CREATE INDEX IF NOT EXISTS idx_remote_album_owner_id ON remote_album_entity (owner_id)',
-  );
-  final i1.Index idxLocalAssetChecksum = i1.Index(
-    'idx_local_asset_checksum',
-    'CREATE INDEX IF NOT EXISTS idx_local_asset_checksum ON local_asset_entity (checksum)',
-  );
-  final i1.Index idxLocalAssetCloudId = i1.Index(
-    'idx_local_asset_cloud_id',
-    'CREATE INDEX IF NOT EXISTS idx_local_asset_cloud_id ON local_asset_entity (i_cloud_id)',
-  );
-  final i1.Index idxStackPrimaryAssetId = i1.Index(
-    'idx_stack_primary_asset_id',
-    'CREATE INDEX IF NOT EXISTS idx_stack_primary_asset_id ON stack_entity (primary_asset_id)',
-  );
-  final i1.Index idxRemoteAssetOwnerChecksum = i1.Index(
-    'idx_remote_asset_owner_checksum',
-    'CREATE INDEX IF NOT EXISTS idx_remote_asset_owner_checksum ON remote_asset_entity (owner_id, checksum)',
-  );
-  final i1.Index uQRemoteAssetsOwnerChecksum = i1.Index(
-    'UQ_remote_assets_owner_checksum',
-    'CREATE UNIQUE INDEX IF NOT EXISTS UQ_remote_assets_owner_checksum ON remote_asset_entity (owner_id, checksum) WHERE(library_id IS NULL)',
-  );
-  final i1.Index uQRemoteAssetsOwnerLibraryChecksum = i1.Index(
-    'UQ_remote_assets_owner_library_checksum',
-    'CREATE UNIQUE INDEX IF NOT EXISTS UQ_remote_assets_owner_library_checksum ON remote_asset_entity (owner_id, library_id, checksum) WHERE(library_id IS NOT NULL)',
-  );
-  final i1.Index idxRemoteAssetChecksum = i1.Index(
-    'idx_remote_asset_checksum',
-    'CREATE INDEX IF NOT EXISTS idx_remote_asset_checksum ON remote_asset_entity (checksum)',
-  );
-  final i1.Index idxRemoteAssetStackId = i1.Index(
-    'idx_remote_asset_stack_id',
-    'CREATE INDEX IF NOT EXISTS idx_remote_asset_stack_id ON remote_asset_entity (stack_id)',
-  );
-  final i1.Index idxRemoteAssetLocalDateTimeDay = i1.Index(
-    'idx_remote_asset_local_date_time_day',
-    'CREATE INDEX IF NOT EXISTS idx_remote_asset_local_date_time_day ON remote_asset_entity (STRFTIME(\'%Y-%m-%d\', local_date_time))',
-  );
-  final i1.Index idxRemoteAssetLocalDateTimeMonth = i1.Index(
-    'idx_remote_asset_local_date_time_month',
-    'CREATE INDEX IF NOT EXISTS idx_remote_asset_local_date_time_month ON remote_asset_entity (STRFTIME(\'%Y-%m\', local_date_time))',
-  );
-  late final Shape21 authUserEntity = Shape21(
-    source: i0.VersionedTable(
-      entityName: 'auth_user_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [
-        _column_0,
-        _column_1,
-        _column_3,
-        _column_2,
-        _column_84,
-        _column_85,
-        _column_92,
-        _column_93,
-        _column_7,
-        _column_94,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape4 userMetadataEntity = Shape4(
-    source: i0.VersionedTable(
-      entityName: 'user_metadata_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(user_id, "key")'],
-      columns: [_column_25, _column_26, _column_27],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape5 partnerEntity = Shape5(
-    source: i0.VersionedTable(
-      entityName: 'partner_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(shared_by_id, shared_with_id)'],
-      columns: [_column_28, _column_29, _column_30],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape8 remoteExifEntity = Shape8(
-    source: i0.VersionedTable(
-      entityName: 'remote_exif_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(asset_id)'],
-      columns: [
-        _column_36,
-        _column_37,
-        _column_38,
-        _column_39,
-        _column_40,
-        _column_41,
-        _column_11,
-        _column_10,
-        _column_42,
-        _column_43,
-        _column_44,
-        _column_45,
-        _column_46,
-        _column_47,
-        _column_48,
-        _column_49,
-        _column_50,
-        _column_51,
-        _column_52,
-        _column_53,
-        _column_54,
-        _column_55,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape7 remoteAlbumAssetEntity = Shape7(
-    source: i0.VersionedTable(
-      entityName: 'remote_album_asset_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(asset_id, album_id)'],
-      columns: [_column_36, _column_60],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape10 remoteAlbumUserEntity = Shape10(
-    source: i0.VersionedTable(
-      entityName: 'remote_album_user_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(album_id, user_id)'],
-      columns: [_column_60, _column_25, _column_61],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape27 remoteAssetCloudIdEntity = Shape27(
-    source: i0.VersionedTable(
-      entityName: 'remote_asset_cloud_id_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(asset_id)'],
-      columns: [
-        _column_36,
-        _column_99,
-        _column_100,
-        _column_96,
-        _column_46,
-        _column_47,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape11 memoryEntity = Shape11(
-    source: i0.VersionedTable(
-      entityName: 'memory_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [
-        _column_0,
-        _column_9,
-        _column_5,
-        _column_18,
-        _column_15,
-        _column_8,
-        _column_62,
-        _column_63,
-        _column_64,
-        _column_65,
-        _column_66,
-        _column_67,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape12 memoryAssetEntity = Shape12(
-    source: i0.VersionedTable(
-      entityName: 'memory_asset_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(asset_id, memory_id)'],
-      columns: [_column_36, _column_68],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape14 personEntity = Shape14(
-    source: i0.VersionedTable(
-      entityName: 'person_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [
-        _column_0,
-        _column_9,
-        _column_5,
-        _column_15,
-        _column_1,
-        _column_69,
-        _column_71,
-        _column_72,
-        _column_73,
-        _column_74,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape15 assetFaceEntity = Shape15(
-    source: i0.VersionedTable(
-      entityName: 'asset_face_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [
-        _column_0,
-        _column_36,
-        _column_76,
-        _column_77,
-        _column_78,
-        _column_79,
-        _column_80,
-        _column_81,
-        _column_82,
-        _column_83,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape18 storeEntity = Shape18(
-    source: i0.VersionedTable(
-      entityName: 'store_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [_column_87, _column_88, _column_89],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape25 trashedLocalAssetEntity = Shape25(
-    source: i0.VersionedTable(
-      entityName: 'trashed_local_asset_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id, album_id)'],
-      columns: [
-        _column_1,
-        _column_8,
-        _column_9,
-        _column_5,
-        _column_10,
-        _column_11,
-        _column_12,
-        _column_0,
-        _column_95,
-        _column_22,
-        _column_14,
-        _column_23,
-        _column_97,
-      ],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  late final Shape29 assetEditEntity = Shape29(
-    source: i0.VersionedTable(
-      entityName: 'asset_edit_entity',
-      withoutRowId: true,
-      isStrict: true,
-      tableConstraints: ['PRIMARY KEY(id)'],
-      columns: [_column_0, _column_36, _column_102, _column_103, _column_104],
-      attachedDatabase: database,
-    ),
-    alias: null,
-  );
-  final i1.Index idxPartnerSharedWithId = i1.Index(
-    'idx_partner_shared_with_id',
-    'CREATE INDEX IF NOT EXISTS idx_partner_shared_with_id ON partner_entity (shared_with_id)',
-  );
-  final i1.Index idxLatLng = i1.Index(
-    'idx_lat_lng',
-    'CREATE INDEX IF NOT EXISTS idx_lat_lng ON remote_exif_entity (latitude, longitude)',
-  );
-  final i1.Index idxRemoteAlbumAssetAlbumAsset = i1.Index(
-    'idx_remote_album_asset_album_asset',
-    'CREATE INDEX IF NOT EXISTS idx_remote_album_asset_album_asset ON remote_album_asset_entity (album_id, asset_id)',
-  );
-  final i1.Index idxRemoteAssetCloudId = i1.Index(
-    'idx_remote_asset_cloud_id',
-    'CREATE INDEX IF NOT EXISTS idx_remote_asset_cloud_id ON remote_asset_cloud_id_entity (cloud_id)',
-  );
-  final i1.Index idxPersonOwnerId = i1.Index(
-    'idx_person_owner_id',
-    'CREATE INDEX IF NOT EXISTS idx_person_owner_id ON person_entity (owner_id)',
-  );
-  final i1.Index idxAssetFacePersonId = i1.Index(
-    'idx_asset_face_person_id',
-    'CREATE INDEX IF NOT EXISTS idx_asset_face_person_id ON asset_face_entity (person_id)',
-  );
-  final i1.Index idxAssetFaceAssetId = i1.Index(
-    'idx_asset_face_asset_id',
-    'CREATE INDEX IF NOT EXISTS idx_asset_face_asset_id ON asset_face_entity (asset_id)',
-  );
-  final i1.Index idxTrashedLocalAssetChecksum = i1.Index(
-    'idx_trashed_local_asset_checksum',
-    'CREATE INDEX IF NOT EXISTS idx_trashed_local_asset_checksum ON trashed_local_asset_entity (checksum)',
-  );
-  final i1.Index idxTrashedLocalAssetAlbum = i1.Index(
-    'idx_trashed_local_asset_album',
-    'CREATE INDEX IF NOT EXISTS idx_trashed_local_asset_album ON trashed_local_asset_entity (album_id)',
-  );
-  final i1.Index idxAssetEditAssetId = i1.Index(
-    'idx_asset_edit_asset_id',
-    'CREATE INDEX IF NOT EXISTS idx_asset_edit_asset_id ON asset_edit_entity (asset_id)',
-  );
-}
-
-class Shape29 extends i0.VersionedTable {
-  Shape29({required super.source, required super.alias}) : super.aliased();
-  i1.GeneratedColumn<String> get id =>
-      columnsByName['id']! as i1.GeneratedColumn<String>;
-  i1.GeneratedColumn<String> get assetId =>
-      columnsByName['asset_id']! as i1.GeneratedColumn<String>;
-  i1.GeneratedColumn<int> get action =>
-      columnsByName['action']! as i1.GeneratedColumn<int>;
-  i1.GeneratedColumn<i2.Uint8List> get parameters =>
-      columnsByName['parameters']! as i1.GeneratedColumn<i2.Uint8List>;
-  i1.GeneratedColumn<int> get sequence =>
-      columnsByName['sequence']! as i1.GeneratedColumn<int>;
-}
-
-i1.GeneratedColumn<int> _column_102(String aliasedName) =>
-    i1.GeneratedColumn<int>(
-      'action',
-      aliasedName,
-      false,
-      type: i1.DriftSqlType.int,
-    );
-i1.GeneratedColumn<i2.Uint8List> _column_103(String aliasedName) =>
-    i1.GeneratedColumn<i2.Uint8List>(
-      'parameters',
-      aliasedName,
-      false,
-      type: i1.DriftSqlType.blob,
-    );
-i1.GeneratedColumn<int> _column_104(String aliasedName) =>
-    i1.GeneratedColumn<int>(
-      'sequence',
-      aliasedName,
-      false,
-      type: i1.DriftSqlType.int,
-    );
 i0.MigrationStepWithVersion migrationSteps({
   required Future<void> Function(i1.Migrator m, Schema2 schema) from1To2,
   required Future<void> Function(i1.Migrator m, Schema3 schema) from2To3,
@@ -8934,7 +8379,6 @@ i0.MigrationStepWithVersion migrationSteps({
   required Future<void> Function(i1.Migrator m, Schema17 schema) from16To17,
   required Future<void> Function(i1.Migrator m, Schema18 schema) from17To18,
   required Future<void> Function(i1.Migrator m, Schema19 schema) from18To19,
-  required Future<void> Function(i1.Migrator m, Schema20 schema) from19To20,
 }) {
   return (currentVersion, database) async {
     switch (currentVersion) {
@@ -9028,11 +8472,6 @@ i0.MigrationStepWithVersion migrationSteps({
         final migrator = i1.Migrator(database, schema);
         await from18To19(migrator, schema);
         return 19;
-      case 19:
-        final schema = Schema20(database: database);
-        final migrator = i1.Migrator(database, schema);
-        await from19To20(migrator, schema);
-        return 20;
       default:
         throw ArgumentError.value('Unknown migration from $currentVersion');
     }
@@ -9058,7 +8497,6 @@ i1.OnUpgrade stepByStep({
   required Future<void> Function(i1.Migrator m, Schema17 schema) from16To17,
   required Future<void> Function(i1.Migrator m, Schema18 schema) from17To18,
   required Future<void> Function(i1.Migrator m, Schema19 schema) from18To19,
-  required Future<void> Function(i1.Migrator m, Schema20 schema) from19To20,
 }) => i0.VersionedSchema.stepByStepHelper(
   step: migrationSteps(
     from1To2: from1To2,
@@ -9079,6 +8517,5 @@ i1.OnUpgrade stepByStep({
     from16To17: from16To17,
     from17To18: from17To18,
     from18To19: from18To19,
-    from19To20: from19To20,
   ),
 );

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/infrastructure/repositories/sync_api.repository.dart

@@ -49,7 +49,6 @@ class SyncApiRepository {
           SyncRequestType.usersV1,
           SyncRequestType.assetsV1,
           SyncRequestType.assetExifsV1,
-          SyncRequestType.assetEditsV1,
           SyncRequestType.assetMetadataV1,
           SyncRequestType.partnersV1,
           SyncRequestType.partnerAssetsV1,
@@ -154,8 +153,6 @@ const _kResponseMap = <SyncEntityType, Function(Object)>{
   SyncEntityType.assetV1: SyncAssetV1.fromJson,
   SyncEntityType.assetDeleteV1: SyncAssetDeleteV1.fromJson,
   SyncEntityType.assetExifV1: SyncAssetExifV1.fromJson,
-  SyncEntityType.assetEditV1: SyncAssetEditV1.fromJson,
-  SyncEntityType.assetEditDeleteV1: SyncAssetEditDeleteV1.fromJson,
   SyncEntityType.assetMetadataV1: SyncAssetMetadataV1.fromJson,
   SyncEntityType.assetMetadataDeleteV1: SyncAssetMetadataDeleteV1.fromJson,
   SyncEntityType.partnerAssetV1: SyncAssetV1.fromJson,

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

@@ -5,11 +5,9 @@ import 'package:drift/drift.dart';
 import 'package:immich_mobile/constants/constants.dart';
 import 'package:immich_mobile/domain/models/album/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/memory.model.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/domain/models/user_metadata.model.dart';
-import 'package:immich_mobile/infrastructure/entities/asset_edit.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/entities/asset_face.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/entities/auth_user.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/entities/exif.entity.drift.dart';
@@ -28,8 +26,8 @@ import 'package:immich_mobile/infrastructure/entities/user_metadata.entity.drift
 import 'package:immich_mobile/infrastructure/repositories/db.repository.dart';
 import 'package:immich_mobile/infrastructure/utils/exif.converter.dart';
 import 'package:logging/logging.dart';
-import 'package:openapi/api.dart' as api show AssetVisibility, AlbumUserRole, UserMetadataKey, AssetEditAction;
-import 'package:openapi/api.dart' hide AssetVisibility, AlbumUserRole, UserMetadataKey, AssetEditAction;
+import 'package:openapi/api.dart' as api show AssetVisibility, AlbumUserRole, UserMetadataKey;
+import 'package:openapi/api.dart' hide AssetVisibility, AlbumUserRole, UserMetadataKey;
 
 class SyncStreamRepository extends DriftDatabaseRepository {
   final Logger _logger = Logger('DriftSyncStreamRepository');
@@ -60,7 +58,6 @@ class SyncStreamRepository extends DriftDatabaseRepository {
           await _db.userEntity.deleteAll();
           await _db.userMetadataEntity.deleteAll();
           await _db.remoteAssetCloudIdEntity.deleteAll();
-          await _db.assetEditEntity.deleteAll();
         });
         await _db.customStatement('PRAGMA foreign_keys = ON');
       });
@@ -281,40 +278,6 @@ class SyncStreamRepository extends DriftDatabaseRepository {
     }
   }
 
-  Future<void> updateAssetEditsV1(Iterable<SyncAssetEditV1> data, {String debugLabel = 'user'}) async {
-    try {
-      await _db.batch((batch) {
-        for (final edit in data) {
-          final companion = AssetEditEntityCompanion(
-            id: Value(edit.id),
-            assetId: Value(edit.assetId),
-            action: Value(edit.action.toAssetEditAction()),
-            parameters: Value(edit.parameters as Map<String, Object?>),
-            sequence: Value(edit.sequence),
-          );
-
-          batch.insert(_db.assetEditEntity, companion, onConflict: DoUpdate((_) => companion));
-        }
-      });
-    } catch (error, stack) {
-      _logger.severe('Error: updateAssetEditsV1 - $debugLabel', error, stack);
-      rethrow;
-    }
-  }
-
-  Future<void> deleteAssetEditsV1(Iterable<SyncAssetEditDeleteV1> data, {String debugLabel = 'user'}) async {
-    try {
-      await _db.batch((batch) {
-        for (final edit in data) {
-          batch.deleteWhere(_db.assetEditEntity, (row) => row.assetId.equals(edit.assetId));
-        }
-      });
-    } catch (error, stack) {
-      _logger.severe('Error: deleteAssetEditsV1 - $debugLabel', error, stack);
-      rethrow;
-    }
-  }
-
   Future<void> deleteAssetsMetadataV1(Iterable<SyncAssetMetadataDeleteV1> data) async {
     try {
       await _db.batch((batch) {
@@ -804,13 +767,3 @@ extension on String {
 extension on UserAvatarColor {
   AvatarColor? toAvatarColor() => AvatarColor.values.firstWhereOrNull((c) => c.name == value);
 }
-
-extension on api.AssetEditAction {
-  AssetEditAction toAssetEditAction() => switch (this) {
-    api.AssetEditAction.crop => AssetEditAction.crop,
-    api.AssetEditAction.rotate => AssetEditAction.rotate,
-    api.AssetEditAction.mirror => AssetEditAction.mirror,
-    api.AssetEditAction.filter => AssetEditAction.filter,
-    _ => AssetEditAction.other,
-  };
-}

mobile/lib/pages/editing/filter.page.dart

@@ -23,7 +23,7 @@ class FilterImagePage extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    final colorFilter = useState<EditFilter>(filters[0]);
+    final colorFilter = useState<ColorFilter>(filters[0]);
     final selectedFilterIndex = useState<int>(0);
 
     Future<ui.Image> createFilteredImage(ui.Image inputImage, ColorFilter filter) {
@@ -42,12 +42,12 @@ class FilterImagePage extends HookWidget {
       return completer.future;
     }
 
-    void applyFilter(EditFilter filter, int index) {
+    void applyFilter(ColorFilter filter, int index) {
       colorFilter.value = filter;
       selectedFilterIndex.value = index;
     }
 
-    Future<Image> applyFilterAndConvert(EditFilter filter) async {
+    Future<Image> applyFilterAndConvert(ColorFilter filter) async {
       final completer = Completer<ui.Image>();
       image.image
           .resolve(ImageConfiguration.empty)
@@ -58,7 +58,7 @@ class FilterImagePage extends HookWidget {
           );
       final uiImage = await completer.future;
 
-      final filteredUiImage = await createFilteredImage(uiImage, filter.colorFilter);
+      final filteredUiImage = await createFilteredImage(uiImage, filter);
       final byteData = await filteredUiImage.toByteData(format: ui.ImageByteFormat.png);
       final pngBytes = byteData!.buffer.asUint8List();
 
@@ -86,7 +86,7 @@ class FilterImagePage extends HookWidget {
           SizedBox(
             height: context.height * 0.7,
             child: Center(
-              child: ColorFiltered(colorFilter: colorFilter.value.colorFilter, child: image),
+              child: ColorFiltered(colorFilter: colorFilter.value, child: image),
             ),
           ),
           SizedBox(
@@ -99,7 +99,7 @@ class FilterImagePage extends HookWidget {
                   padding: const EdgeInsets.symmetric(horizontal: 8.0),
                   child: _FilterButton(
                     image: image,
-                    label: filters[index].name,
+                    label: filterNames[index],
                     filter: filters[index],
                     isSelected: selectedFilterIndex.value == index,
                     onTap: () => applyFilter(filters[index], index),
@@ -117,7 +117,7 @@ class FilterImagePage extends HookWidget {
 class _FilterButton extends StatelessWidget {
   final Image image;
   final String label;
-  final EditFilter filter;
+  final ColorFilter filter;
   final bool isSelected;
   final VoidCallback onTap;
 
@@ -145,7 +145,7 @@ class _FilterButton extends StatelessWidget {
             child: ClipRRect(
               borderRadius: const BorderRadius.all(Radius.circular(10)),
               child: ColorFiltered(
-                colorFilter: filter.colorFilter,
+                colorFilter: filter,
                 child: FittedBox(fit: BoxFit.cover, child: image),
               ),
             ),

mobile/lib/presentation/pages/dev/ui_showcase.page.dart

@@ -1,100 +0,0 @@
-import 'package:auto_route/auto_route.dart';
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_ui/immich_ui.dart';
-
-List<Widget> _showcaseBuilder(Function(ImmichVariant variant, ImmichColor color) builder) {
-  final children = <Widget>[];
-
-  final items = [
-    (variant: ImmichVariant.filled, title: "Filled Variant"),
-    (variant: ImmichVariant.ghost, title: "Ghost Variant"),
-  ];
-
-  for (final (:variant, :title) in items) {
-    children.add(Text(title));
-    children.add(Row(spacing: 10, children: [for (var color in ImmichColor.values) builder(variant, color)]));
-  }
-
-  return children;
-}
-
-class _ComponentTitle extends StatelessWidget {
-  final String title;
-
-  const _ComponentTitle(this.title);
-
-  @override
-  Widget build(BuildContext context) {
-    return Text(title, style: context.textTheme.titleLarge);
-  }
-}
-
-@RoutePage()
-class ImmichUIShowcasePage extends StatelessWidget {
-  const ImmichUIShowcasePage({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: const Text('Immich UI Showcase')),
-      body: Padding(
-        padding: const EdgeInsets.all(20),
-        child: SingleChildScrollView(
-          child: Column(
-            spacing: 10,
-            mainAxisAlignment: MainAxisAlignment.start,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              const _ComponentTitle("IconButton"),
-              ..._showcaseBuilder(
-                (variant, color) =>
-                    ImmichIconButton(icon: Icons.favorite, color: color, variant: variant, onPressed: () {}),
-              ),
-              const _ComponentTitle("CloseButton"),
-              ..._showcaseBuilder(
-                (variant, color) => ImmichCloseButton(color: color, variant: variant, onPressed: () {}),
-              ),
-              const _ComponentTitle("TextButton"),
-
-              ImmichTextButton(
-                labelText: "Text Button",
-                onPressed: () {},
-                variant: ImmichVariant.filled,
-                color: ImmichColor.primary,
-              ),
-              ImmichTextButton(
-                labelText: "Text Button",
-                onPressed: () {},
-                variant: ImmichVariant.filled,
-                color: ImmichColor.primary,
-                loading: true,
-              ),
-              ImmichTextButton(
-                labelText: "Text Button",
-                onPressed: () {},
-                variant: ImmichVariant.ghost,
-                color: ImmichColor.primary,
-              ),
-              ImmichTextButton(
-                labelText: "Text Button",
-                onPressed: () {},
-                variant: ImmichVariant.ghost,
-                color: ImmichColor.primary,
-                loading: true,
-              ),
-              const _ComponentTitle("Form"),
-              ImmichForm(
-                onSubmit: () {},
-                child: const Column(
-                  spacing: 10,
-                  children: [ImmichTextInput(label: "Title", hintText: "Enter a title")],
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}

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

@@ -1,618 +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/constants/filters.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;
-  EditFilter? _filter;
-  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 isEditing = false;
-  String selectedSegment = 'transform';
-
-  List<AspectRatio> aspectRatios = const [
-    (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);
-
-    final existingFilter = widget.edits.firstWhereOrNull((edit) => edit.action == AssetEditAction.filter);
-    if (existingFilter != null) {
-      final parsedFilter = EditFilter.fromDtoParams(existingFilter.parameters, 'Custom');
-      _filter = filters.firstWhereOrNull((filter) => filter == parsedFilter);
-    }
-
-    // dont animate to initial rotation
-    _rotationAnimationDuration = const Duration(milliseconds: 0);
-    _rotationAngle = transform.rotation.toInt();
-
-    _flipHorizontal = transform.mirrorHorizontal;
-    _flipVertical = transform.mirrorVertical;
-  }
-
-  Future<void> _saveEditedImage() async {
-    setState(() {
-      isEditing = 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(),
-        ),
-      );
-    }
-
-    if (_filter != null && !_filter!.isIdentity) {
-      edits.add(AssetEdit(action: AssetEditAction.filter, parameters: _filter!.dtoParameters));
-    }
-
-    await widget.applyEdits(edits);
-
-    setState(() {
-      isEditing = false;
-    });
-  }
-
-  @override
-  void initState() {
-    super.initState();
-    initEditor();
-  }
-
-  @override
-  void dispose() {
-    cropController.dispose();
-    super.dispose();
-  }
-
-  void _rotateLeft() {
-    setState(() {
-      _rotationAnimationDuration = const Duration(milliseconds: 150);
-      _rotationAngle -= 90;
-    });
-  }
-
-  void _rotateRight() {
-    setState(() {
-      _rotationAnimationDuration = const Duration(milliseconds: 150);
-      _rotationAngle += 90;
-    });
-  }
-
-  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;
-      }
-    });
-  }
-
-  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;
-      }
-    });
-  }
-
-  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 _applyFilter(EditFilter? filter) {
-    setState(() {
-      _filter = filter;
-    });
-  }
-
-  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;
-      _filter = null;
-      _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;
-    final isFiltered = _filter != null && !_filter!.isIdentity;
-
-    return isCropped || isRotated || isFlipped || isFiltered;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Theme(
-      data: getThemeData(colorScheme: ref.watch(immichThemeProvider).dark, locale: context.locale),
-      child: Scaffold(
-        appBar: AppBar(
-          backgroundColor: Colors.black,
-          title: Text("edit".tr()),
-          leading: const ImmichCloseButton(),
-          actions: [
-            isEditing
-                ? 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,
-                                  overlayPainter: MatrixAdjustmentPainter(
-                                    image: data.data!,
-                                    filter: _filter?.colorFilter,
-                                  ),
-                                );
-                              },
-                            ),
-                          ),
-                        ),
-                      ),
-                    );
-                  },
-                ),
-              ),
-              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,
-                        ),
-                        secondChild: _FilterControls(
-                          currentFilter: _filter,
-                          previewImage: widget.image,
-                          onApplyFilter: _applyFilter,
-                        ),
-                      ),
-                      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",
-                              onPressed: _resetEdits,
-                              variant: ImmichVariant.filled,
-                              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),
-      ],
-    );
-  }
-}
-
-class _FilterControls extends StatelessWidget {
-  final EditFilter? currentFilter;
-  final Image previewImage;
-  final void Function(EditFilter?) onApplyFilter;
-
-  const _FilterControls({required this.currentFilter, required this.previewImage, required this.onApplyFilter});
-
-  @override
-  Widget build(BuildContext context) {
-    return SizedBox(
-      width: double.infinity,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 24),
-        child: SingleChildScrollView(
-          scrollDirection: Axis.horizontal,
-          child: Row(
-            children: filters.map((filter) {
-              return Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                child: _FilterButton(
-                  image: previewImage,
-                  filter: filter,
-                  isSelected: currentFilter == filter,
-                  onTap: () => onApplyFilter(filter),
-                ),
-              );
-            }).toList(),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-class _FilterButton extends StatelessWidget {
-  final Image image;
-  final EditFilter filter;
-  final bool isSelected;
-  final VoidCallback onTap;
-
-  const _FilterButton({required this.image, 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(12)),
-              border: isSelected ? Border.all(color: context.primaryColor, width: 3) : null,
-            ),
-            child: ClipRRect(
-              borderRadius: BorderRadius.all(isSelected ? const Radius.circular(9) : const Radius.circular(12)),
-              child: ColorFiltered(
-                colorFilter: filter.colorFilter,
-                child: Image(image: image.image, fit: BoxFit.cover),
-              ),
-            ),
-          ),
-        ),
-        const SizedBox(height: 10),
-        Text(filter.name, style: context.themeData.textTheme.bodyMedium),
-      ],
-    );
-  }
-}

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,171 @@
+import 'dart:async';
+import 'dart:ui';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:cancellation_token_http/http.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/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});
+  Future<Uint8List> _imageToUint8List(Image image) async {
+    final Completer<Uint8List> completer = Completer();
+    image.image
+        .resolve(const ImageConfiguration())
+        .addListener(
+          ImageStreamListener((ImageInfo info, bool _) {
+            info.image.toByteData(format: ImageByteFormat.png).then((byteData) {
+              if (byteData != null) {
+                completer.complete(byteData.buffer.asUint8List());
+              } else {
+                completer.completeError('Failed to convert image to bytes');
+              }
+            });
+          }, onError: (exception, stackTrace) => completer.completeError(exception)),
+        );
+    return completer.future;
+  }
+
+  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], CancellationToken());
+    } 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

@@ -150,10 +150,12 @@ class DriftSearchPage extends HookConsumerWidget {
       handleOnSelect(Set<PersonDto> value) {
         filter.value = filter.value.copyWith(people: value);
 
-        peopleCurrentFilterWidget.value = Text(
-          value.map((e) => e.name != '' ? e.name : 'no_name'.t(context: context)).join(', '),
-          style: context.textTheme.labelLarge,
-        );
+        final label = value.map((e) => e.name != '' ? e.name : 'no_name'.t(context: context)).join(', ');
+        if (label.isNotEmpty) {
+          peopleCurrentFilterWidget.value = Text(label, style: context.textTheme.labelLarge);
+        } else {
+          peopleCurrentFilterWidget.value = null;
+        }
       }
 
       handleClear() {

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/infrastructure/action.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/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(currentAssetNotifier);
 
-    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: 'asset_edit_success'.tr(), toastType: ToastType.success);
-
-        context.pop();
-      } catch (e) {
-        ImmichToast.show(context: context, msg: 'asset_edit_failed'.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/asset_viewer/asset_page.widget.dart

@@ -45,7 +45,6 @@ class _AssetPageState extends ConsumerState<AssetPage> {
 
   late PhotoViewControllerValue _initialPhotoViewState;
 
-  bool _blockGestures = false;
   bool _showingDetails = false;
   bool _isZoomed = false;
 
@@ -58,7 +57,6 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   DragStartDetails? _dragStart;
   _DragIntent _dragIntent = _DragIntent.none;
   Drag? _drag;
-  bool _dragInProgress = false;
   bool _shouldPopOnDrag = false;
 
   @override
@@ -137,14 +135,12 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   }
 
   void _updateDrag(DragUpdateDetails details) {
-    if (_blockGestures) return;
-
-    _dragInProgress = true;
+    if (_dragStart == null) return;
 
     if (_dragIntent == _DragIntent.none) {
       _dragIntent = switch ((details.globalPosition - _dragStart!.globalPosition).dy) {
-        < -kTouchSlop => _DragIntent.scroll,
-        > kTouchSlop => _DragIntent.dismiss,
+        < 0 => _DragIntent.scroll,
+        > 0 => _DragIntent.dismiss,
         _ => _DragIntent.none,
       };
     }
@@ -160,16 +156,12 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   }
 
   void _endDrag(DragEndDetails details) {
-    _dragInProgress = false;
+    if (_dragStart == null) return;
 
-    if (_blockGestures) {
-      _blockGestures = false;
-      return;
-    }
+    _dragStart = null;
 
     final intent = _dragIntent;
     _dragIntent = _DragIntent.none;
-    _dragStart = null;
 
     switch (intent) {
       case _DragIntent.none:
@@ -201,10 +193,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
     PhotoViewScaleStateController scaleStateController,
   ) {
     _viewController = controller;
-    if (!_showingDetails && _isZoomed) {
-      _blockGestures = true;
-      return;
-    }
+    if (!_showingDetails && _isZoomed) return;
     _beginDrag(details);
   }
 
@@ -235,7 +224,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   }
 
   void _onTapUp(BuildContext context, TapUpDetails details, PhotoViewControllerValue controllerValue) {
-    if (!_showingDetails && !_dragInProgress) _viewer.toggleControls();
+    if (!_showingDetails && _dragStart == null) _viewer.toggleControls();
   }
 
   void _onLongPress(BuildContext context, LongPressStartDetails details, PhotoViewControllerValue controllerValue) =>
@@ -249,7 +238,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
     _viewer.setZoomed(_isZoomed);
 
     if (scaleState != PhotoViewScaleState.initial) {
-      if (!_dragInProgress) _viewer.setControls(false);
+      if (_dragStart == null) _viewer.setControls(false);
 
       ref.read(videoPlayerControlsProvider.notifier).pause();
       return;
@@ -382,9 +371,10 @@ class _AssetPageState extends ConsumerState<AssetPage> {
     final viewportHeight = MediaQuery.heightOf(context);
     final imageHeight = _getImageHeight(viewportWidth, viewportHeight, displayAsset);
 
-    final margin = (viewportHeight - imageHeight) / 2;
-    final overflowBoxHeight = margin + imageHeight - (kMinInteractiveDimension / 2);
-    _snapOffset = (margin + imageHeight) - (viewportHeight / 4);
+    final detailsOffset = (viewportHeight + imageHeight - kMinInteractiveDimension) / 2;
+    final snapTarget = viewportHeight / 3;
+
+    _snapOffset = detailsOffset - snapTarget;
 
     if (_proxyScrollController.hasClients) {
       _proxyScrollController.snapPosition.snapOffset = _snapOffset;
@@ -429,7 +419,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
                   ignoring: !_showingDetails,
                   child: Column(
                     children: [
-                      SizedBox(height: overflowBoxHeight),
+                      SizedBox(height: detailsOffset),
                       GestureDetector(
                         onVerticalDragStart: _beginDrag,
                         onVerticalDragUpdate: _updateDrag,
@@ -438,7 +428,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
                         child: AnimatedOpacity(
                           opacity: _showingDetails ? 1.0 : 0.0,
                           duration: Durations.short2,
-                          child: AssetDetails(minHeight: _snapOffset + viewportHeight - overflowBoxHeight),
+                          child: AssetDetails(minHeight: viewportHeight - snapTarget),
                         ),
                       ),
                     ],

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

@@ -87,39 +87,37 @@ class AssetViewer extends ConsumerStatefulWidget {
 }
 
 class _AssetViewerState extends ConsumerState<AssetViewer> {
-  late PageController pageController;
+  late final _heroOffset = widget.heroOffset ?? TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
+  late final _pageController = PageController(initialPage: widget.initialIndex);
+  late final _preloader = AssetPreloader(timelineService: ref.read(timelineServiceProvider), mounted: () => mounted);
 
   StreamSubscription? _reloadSubscription;
-
-  late final int heroOffset;
-  bool _assetReloadRequested = false;
-  int _totalAssets = 0;
-
-  late final AssetPreloader _preloader;
   KeepAliveLink? _stackChildrenKeepAlive;
 
+  bool _assetReloadRequested = false;
+
   @override
   void initState() {
     super.initState();
-    assert(ref.read(currentAssetNotifier) != null, "Current asset should not be null when opening the AssetViewer");
-    pageController = PageController(initialPage: widget.initialIndex);
-    final timelineService = ref.read(timelineServiceProvider);
-    _totalAssets = timelineService.totalAssets;
-    _preloader = AssetPreloader(timelineService: timelineService, mounted: () => mounted);
-    WidgetsBinding.instance.addPostFrameCallback(_onAssetInit);
-    _reloadSubscription = EventStream.shared.listen(_onEvent);
-    heroOffset = widget.heroOffset ?? TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
+
     final asset = ref.read(currentAssetNotifier);
+    assert(asset != null, "Current asset should not be null when opening the AssetViewer");
     if (asset != null) _stackChildrenKeepAlive = ref.read(stackChildrenNotifier(asset).notifier).ref.keepAlive();
+
+    _reloadSubscription = EventStream.shared.listen(_onEvent);
+
+    WidgetsBinding.instance.addPostFrameCallback(_onAssetInit);
   }
 
   @override
   void dispose() {
-    pageController.dispose();
+    _pageController.dispose();
     _preloader.dispose();
     _reloadSubscription?.cancel();
     _stackChildrenKeepAlive?.close();
+
     SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+
     super.dispose();
   }
 
@@ -176,26 +174,26 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
   void _onTimelineReloadEvent() {
     final timelineService = ref.read(timelineServiceProvider);
-    _totalAssets = timelineService.totalAssets;
+    final totalAssets = timelineService.totalAssets;
 
-    if (_totalAssets == 0) {
+    if (totalAssets == 0) {
       context.maybePop();
       return;
     }
 
-    var index = pageController.page?.round() ?? 0;
+    var index = _pageController.page?.round() ?? 0;
     final currentAsset = ref.read(currentAssetNotifier);
     if (currentAsset != null) {
       final newIndex = timelineService.getIndex(currentAsset.heroTag);
       if (newIndex != null && newIndex != index) {
         index = newIndex;
-        pageController.jumpToPage(index);
+        _pageController.jumpToPage(index);
       }
     }
 
-    if (index >= _totalAssets) {
-      index = _totalAssets - 1;
-      pageController.jumpToPage(index);
+    if (index >= totalAssets) {
+      index = totalAssets - 1;
+      _pageController.jumpToPage(index);
     }
 
     if (_assetReloadRequested) {
@@ -264,15 +262,15 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
             PhotoViewGestureDetectorScope(
               axis: Axis.horizontal,
               child: PageView.builder(
-                controller: pageController,
+                controller: _pageController,
                 physics: isZoomed
                     ? const NeverScrollableScrollPhysics()
                     : CurrentPlatform.isIOS
                     ? const FastScrollPhysics()
                     : const FastClampingScrollPhysics(),
-                itemCount: _totalAssets,
+                itemCount: ref.read(timelineServiceProvider).totalAssets,
                 onPageChanged: (index) => _onAssetChanged(index),
-                itemBuilder: (context, index) => AssetPage(index: index, heroOffset: heroOffset),
+                itemBuilder: (context, index) => AssetPage(index: index, heroOffset: _heroOffset),
               ),
             ),
             if (!CurrentPlatform.isIOS)

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

@@ -3,12 +3,12 @@ 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/presentation/widgets/asset_viewer/asset_viewer.state.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
@@ -39,7 +39,7 @@ class ViewerBottomBar extends ConsumerWidget {
 
       if (!isInLockedView) ...[
         if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
-        if (asset.isEditable) const EditImageActionButton(),
+        if (asset.type == AssetType.image) const EditImageActionButton(),
         if (asset.hasRemote) AddActionButton(originalTheme: originalTheme),
 
         if (isOwner) ...[

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

@@ -105,7 +105,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)) {
@@ -123,13 +123,13 @@ ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080
     } else {
       throw ArgumentError("Unsupported asset type: ${asset.runtimeType}");
     }
-    provider = RemoteFullImageProvider(assetId: assetId, thumbhash: thumbhash, assetType: asset.type, edited: edited);
+    provider = RemoteFullImageProvider(assetId: assetId, thumbhash: thumbhash, assetType: asset.type);
   }
 
   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);
@@ -137,7 +137,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/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) {
@@ -59,14 +59,8 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
   final String assetId;
   final String thumbhash;
   final AssetType assetType;
-  final bool edited;
 
-  RemoteFullImageProvider({
-    required this.assetId,
-    required this.thumbhash,
-    required this.assetType,
-    this.edited = true,
-  });
+  RemoteFullImageProvider({required this.assetId, required this.thumbhash, required this.assetType});
 
   @override
   Future<RemoteFullImageProvider> obtainKey(ImageConfiguration configuration) {
@@ -77,9 +71,7 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
   ImageStreamCompleter loadImage(RemoteFullImageProvider key, ImageDecoderCallback decode) {
     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),
@@ -98,12 +90,7 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
 
     final headers = ApiService.getRequestHeaders();
     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),
       headers: headers,
     );
     yield* loadRequest(previewRequest, decode);
@@ -117,10 +104,7 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
       return;
     }
 
-    final originalRequest = request = RemoteImageRequest(
-      uri: getOriginalUrlForRemoteId(key.assetId, edited: key.edited),
-      headers: headers,
-    );
+    final originalRequest = request = RemoteImageRequest(uri: getOriginalUrlForRemoteId(key.assetId), headers: headers);
     yield* loadRequest(originalRequest, decode);
   }
 
@@ -128,12 +112,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 && edited == other.edited;
+      return assetId == other.assetId && thumbhash == other.thumbhash;
     }
 
     return false;
   }
 
   @override
-  int get hashCode => assetId.hashCode ^ thumbhash.hashCode ^ edited.hashCode;
+  int get hashCode => assetId.hashCode ^ thumbhash.hashCode;
 }

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

@@ -6,20 +6,19 @@ import 'package:cancellation_token_http/http.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/presentation/widgets/asset_viewer/asset_viewer.state.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';
 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';
@@ -474,23 +473,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

@@ -206,27 +206,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 AssetEditActionListDtoEditsInner(action: edit.action.toDto()!, parameters: edit.parameters);
-        })
-        .whereType<AssetEditActionListDtoEditsInner>()
-        .toList();
-
-    await _api.editAsset(assetId, AssetEditActionListDto(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';
@@ -83,7 +81,6 @@ import 'package:immich_mobile/pages/share_intent/share_intent.page.dart';
 import 'package:immich_mobile/presentation/pages/cleanup_preview.page.dart';
 import 'package:immich_mobile/presentation/pages/dev/main_timeline.page.dart';
 import 'package:immich_mobile/presentation/pages/dev/media_stat.page.dart';
-import 'package:immich_mobile/presentation/pages/dev/ui_showcase.page.dart';
 import 'package:immich_mobile/presentation/pages/download_info.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_activities.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_album.page.dart';
@@ -92,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';
@@ -109,6 +105,9 @@ 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/editing/drift_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';
@@ -332,11 +331,12 @@ 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]),
     AutoRoute(page: DownloadInfoRoute.page, guards: [_authGuard, _duplicateGuard]),
-    AutoRoute(page: ImmichUIShowcaseRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: CleanupPreviewRoute.page, guards: [_authGuard, _duplicateGuard]),
     // required to handle all deeplinks in deep_link.service.dart
     // auto_route_library#1722

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> {
@@ -1789,22 +1873,6 @@ class HeaderSettingsRoute extends PageRouteInfo<void> {
   );
 }
 
-/// generated route for
-/// [ImmichUIShowcasePage]
-class ImmichUIShowcaseRoute extends PageRouteInfo<void> {
-  const ImmichUIShowcaseRoute({List<PageRouteInfo>? children})
-    : super(ImmichUIShowcaseRoute.name, initialChildren: children);
-
-  static const String name = 'ImmichUIShowcaseRoute';
-
-  static PageInfo page = PageInfo(
-    name,
-    builder: (data) {
-      return const ImmichUIShowcasePage();
-    },
-  );
-}
-
 /// generated route for
 /// [LibraryPage]
 class LibraryRoute 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';
@@ -241,16 +240,6 @@ class ActionService {
     return _downloadRepository.downloadAllAssets(assets);
   }
 
-  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,119 +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,
-  );
-}
-
-class MatrixAdjustmentPainter extends CustomPainter {
-  final ui.Image image;
-  final ColorFilter? filter;
-
-  const MatrixAdjustmentPainter({required this.image, this.filter});
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint = Paint()..colorFilter = filter;
-
-    final srcRect = Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble());
-    final dstRect = Rect.fromLTWH(0, 0, size.width, size.height);
-
-    canvas.drawImageRect(image, srcRect, dstRect, paint);
-  }
-
-  @override
-  bool shouldRepaint(covariant MatrixAdjustmentPainter oldDelegate) {
-    return oldDelegate.image != image || oldDelegate.filter != filter;
-  }
-}
-
-/// 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/common/immich_app_bar.dart

@@ -1,6 +1,5 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -153,11 +152,6 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
       actions: [
         if (actions != null)
           ...actions!.map((action) => Padding(padding: const EdgeInsets.only(right: 16), child: action)),
-        if (kDebugMode || kProfileMode)
-          IconButton(
-            icon: const Icon(Icons.palette_rounded),
-            onPressed: () => context.pushRoute(const ImmichUIShowcaseRoute()),
-          ),
         if (isCasting)
           Padding(
             padding: const EdgeInsets.only(right: 12),

mobile/lib/widgets/common/immich_sliver_app_bar.dart

@@ -74,11 +74,6 @@ class ImmichSliverAppBar extends ConsumerWidget {
                 icon: Icon(isCasting ? Icons.cast_connected_rounded : Icons.cast_rounded),
               ),
             if (actions != null) ...actions!,
-            if ((kDebugMode || kProfileMode) && !isReadonlyModeEnabled)
-              IconButton(
-                onPressed: () => context.pushRoute(const ImmichUIShowcaseRoute()),
-                icon: const Icon(Icons.palette_rounded),
-              ),
             if (showUploadButton && !isReadonlyModeEnabled) const _BackupIndicator(),
             const _ProfileIndicator(),
             const SizedBox(width: 8),

mobile/openapi/README.md

@@ -359,7 +359,6 @@ Class | Method | HTTP request | Description
  - [AssetDeltaSyncResponseDto](doc//AssetDeltaSyncResponseDto.md)
  - [AssetEditAction](doc//AssetEditAction.md)
  - [AssetEditActionCrop](doc//AssetEditActionCrop.md)
- - [AssetEditActionFilter](doc//AssetEditActionFilter.md)
  - [AssetEditActionListDto](doc//AssetEditActionListDto.md)
  - [AssetEditActionListDtoEditsInner](doc//AssetEditActionListDtoEditsInner.md)
  - [AssetEditActionMirror](doc//AssetEditActionMirror.md)
@@ -430,7 +429,6 @@ Class | Method | HTTP request | Description
  - [ExifResponseDto](doc//ExifResponseDto.md)
  - [FaceDto](doc//FaceDto.md)
  - [FacialRecognitionConfig](doc//FacialRecognitionConfig.md)
- - [FilterParameters](doc//FilterParameters.md)
  - [FoldersResponse](doc//FoldersResponse.md)
  - [FoldersUpdate](doc//FoldersUpdate.md)
  - [ImageFormat](doc//ImageFormat.md)
@@ -579,8 +577,6 @@ Class | Method | HTTP request | Description
  - [SyncAlbumUserV1](doc//SyncAlbumUserV1.md)
  - [SyncAlbumV1](doc//SyncAlbumV1.md)
  - [SyncAssetDeleteV1](doc//SyncAssetDeleteV1.md)
- - [SyncAssetEditDeleteV1](doc//SyncAssetEditDeleteV1.md)
- - [SyncAssetEditV1](doc//SyncAssetEditV1.md)
  - [SyncAssetExifV1](doc//SyncAssetExifV1.md)
  - [SyncAssetFaceDeleteV1](doc//SyncAssetFaceDeleteV1.md)
  - [SyncAssetFaceV1](doc//SyncAssetFaceV1.md)

mobile/openapi/lib/api.dart

@@ -98,7 +98,6 @@ part 'model/asset_delta_sync_dto.dart';
 part 'model/asset_delta_sync_response_dto.dart';
 part 'model/asset_edit_action.dart';
 part 'model/asset_edit_action_crop.dart';
-part 'model/asset_edit_action_filter.dart';
 part 'model/asset_edit_action_list_dto.dart';
 part 'model/asset_edit_action_list_dto_edits_inner.dart';
 part 'model/asset_edit_action_mirror.dart';
@@ -169,7 +168,6 @@ part 'model/email_notifications_update.dart';
 part 'model/exif_response_dto.dart';
 part 'model/face_dto.dart';
 part 'model/facial_recognition_config.dart';
-part 'model/filter_parameters.dart';
 part 'model/folders_response.dart';
 part 'model/folders_update.dart';
 part 'model/image_format.dart';
@@ -318,8 +316,6 @@ part 'model/sync_album_user_delete_v1.dart';
 part 'model/sync_album_user_v1.dart';
 part 'model/sync_album_v1.dart';
 part 'model/sync_asset_delete_v1.dart';
-part 'model/sync_asset_edit_delete_v1.dart';
-part 'model/sync_asset_edit_v1.dart';
 part 'model/sync_asset_exif_v1.dart';
 part 'model/sync_asset_face_delete_v1.dart';
 part 'model/sync_asset_face_v1.dart';

mobile/openapi/lib/api_client.dart

@@ -242,8 +242,6 @@ class ApiClient {
           return AssetEditActionTypeTransformer().decode(value);
         case 'AssetEditActionCrop':
           return AssetEditActionCrop.fromJson(value);
-        case 'AssetEditActionFilter':
-          return AssetEditActionFilter.fromJson(value);
         case 'AssetEditActionListDto':
           return AssetEditActionListDto.fromJson(value);
         case 'AssetEditActionListDtoEditsInner':
@@ -384,8 +382,6 @@ class ApiClient {
           return FaceDto.fromJson(value);
         case 'FacialRecognitionConfig':
           return FacialRecognitionConfig.fromJson(value);
-        case 'FilterParameters':
-          return FilterParameters.fromJson(value);
         case 'FoldersResponse':
           return FoldersResponse.fromJson(value);
         case 'FoldersUpdate':
@@ -682,10 +678,6 @@ class ApiClient {
           return SyncAlbumV1.fromJson(value);
         case 'SyncAssetDeleteV1':
           return SyncAssetDeleteV1.fromJson(value);
-        case 'SyncAssetEditDeleteV1':
-          return SyncAssetEditDeleteV1.fromJson(value);
-        case 'SyncAssetEditV1':
-          return SyncAssetEditV1.fromJson(value);
         case 'SyncAssetExifV1':
           return SyncAssetExifV1.fromJson(value);
         case 'SyncAssetFaceDeleteV1':

mobile/openapi/lib/model/asset_edit_action.dart

@@ -26,14 +26,12 @@ class AssetEditAction {
   static const crop = AssetEditAction._(r'crop');
   static const rotate = AssetEditAction._(r'rotate');
   static const mirror = AssetEditAction._(r'mirror');
-  static const filter = AssetEditAction._(r'filter');
 
   /// List of all possible values in this [enum][AssetEditAction].
   static const values = <AssetEditAction>[
     crop,
     rotate,
     mirror,
-    filter,
   ];
 
   static AssetEditAction? fromJson(dynamic value) => AssetEditActionTypeTransformer().decode(value);
@@ -75,7 +73,6 @@ class AssetEditActionTypeTransformer {
         case r'crop': return AssetEditAction.crop;
         case r'rotate': return AssetEditAction.rotate;
         case r'mirror': return AssetEditAction.mirror;
-        case r'filter': return AssetEditAction.filter;
         default:
           if (!allowNull) {
             throw ArgumentError('Unknown enum value to decode: $data');

mobile/openapi/lib/model/asset_edit_action_filter.dart

@@ -1,108 +0,0 @@
-//
-// AUTO-GENERATED FILE, DO NOT MODIFY!
-//
-// @dart=2.18
-
-// ignore_for_file: unused_element, unused_import
-// ignore_for_file: always_put_required_named_parameters_first
-// ignore_for_file: constant_identifier_names
-// ignore_for_file: lines_longer_than_80_chars
-
-part of openapi.api;
-
-class AssetEditActionFilter {
-  /// Returns a new [AssetEditActionFilter] instance.
-  AssetEditActionFilter({
-    required this.action,
-    required this.parameters,
-  });
-
-  /// Type of edit action to perform
-  AssetEditAction action;
-
-  FilterParameters parameters;
-
-  @override
-  bool operator ==(Object other) => identical(this, other) || other is AssetEditActionFilter &&
-    other.action == action &&
-    other.parameters == parameters;
-
-  @override
-  int get hashCode =>
-    // ignore: unnecessary_parenthesis
-    (action.hashCode) +
-    (parameters.hashCode);
-
-  @override
-  String toString() => 'AssetEditActionFilter[action=$action, parameters=$parameters]';
-
-  Map<String, dynamic> toJson() {
-    final json = <String, dynamic>{};
-      json[r'action'] = this.action;
-      json[r'parameters'] = this.parameters;
-    return json;
-  }
-
-  /// Returns a new [AssetEditActionFilter] instance and imports its values from
-  /// [value] if it's a [Map], null otherwise.
-  // ignore: prefer_constructors_over_static_methods
-  static AssetEditActionFilter? fromJson(dynamic value) {
-    upgradeDto(value, "AssetEditActionFilter");
-    if (value is Map) {
-      final json = value.cast<String, dynamic>();
-
-      return AssetEditActionFilter(
-        action: AssetEditAction.fromJson(json[r'action'])!,
-        parameters: FilterParameters.fromJson(json[r'parameters'])!,
-      );
-    }
-    return null;
-  }
-
-  static List<AssetEditActionFilter> listFromJson(dynamic json, {bool growable = false,}) {
-    final result = <AssetEditActionFilter>[];
-    if (json is List && json.isNotEmpty) {
-      for (final row in json) {
-        final value = AssetEditActionFilter.fromJson(row);
-        if (value != null) {
-          result.add(value);
-        }
-      }
-    }
-    return result.toList(growable: growable);
-  }
-
-  static Map<String, AssetEditActionFilter> mapFromJson(dynamic json) {
-    final map = <String, AssetEditActionFilter>{};
-    if (json is Map && json.isNotEmpty) {
-      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
-      for (final entry in json.entries) {
-        final value = AssetEditActionFilter.fromJson(entry.value);
-        if (value != null) {
-          map[entry.key] = value;
-        }
-      }
-    }
-    return map;
-  }
-
-  // maps a json object with a list of AssetEditActionFilter-objects as value to a dart map
-  static Map<String, List<AssetEditActionFilter>> mapListFromJson(dynamic json, {bool growable = false,}) {
-    final map = <String, List<AssetEditActionFilter>>{};
-    if (json is Map && json.isNotEmpty) {
-      // ignore: parameter_assignments
-      json = json.cast<String, dynamic>();
-      for (final entry in json.entries) {
-        map[entry.key] = AssetEditActionFilter.listFromJson(entry.value, growable: growable,);
-      }
-    }
-    return map;
-  }
-
-  /// The list of required keys that must be present in a JSON.
-  static const requiredKeys = <String>{
-    'action',
-    'parameters',
-  };
-}
-

mobile/openapi/lib/model/asset_edit_action_list_dto_edits_inner.dart

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

mobile/openapi/lib/model/filter_parameters.dart

@@ -1,208 +0,0 @@
-//
-// AUTO-GENERATED FILE, DO NOT MODIFY!
-//
-// @dart=2.18
-
-// ignore_for_file: unused_element, unused_import
-// ignore_for_file: always_put_required_named_parameters_first
-// ignore_for_file: constant_identifier_names
-// ignore_for_file: lines_longer_than_80_chars
-
-part of openapi.api;
-
-class FilterParameters {
-  /// Returns a new [FilterParameters] instance.
-  FilterParameters({
-    required this.bOffset,
-    required this.bbBias,
-    required this.bgBias,
-    required this.brBias,
-    required this.gOffset,
-    required this.gbBias,
-    required this.ggBias,
-    required this.grBias,
-    required this.rOffset,
-    required this.rbBias,
-    required this.rgBias,
-    required this.rrBias,
-  });
-
-  /// B Offset (-255 -> 255)
-  ///
-  /// Minimum value: -255
-  /// Maximum value: 255
-  num bOffset;
-
-  /// BB Bias
-  num bbBias;
-
-  /// BG Bias
-  num bgBias;
-
-  /// BR Bias
-  num brBias;
-
-  /// G Offset (-255 -> 255)
-  ///
-  /// Minimum value: -255
-  /// Maximum value: 255
-  num gOffset;
-
-  /// GB Bias
-  num gbBias;
-
-  /// GG Bias
-  num ggBias;
-
-  /// GR Bias
-  num grBias;
-
-  /// R Offset (-255 -> 255)
-  ///
-  /// Minimum value: -255
-  /// Maximum value: 255
-  num rOffset;
-
-  /// RB Bias
-  num rbBias;
-
-  /// RG Bias
-  num rgBias;
-
-  /// RR Bias
-  num rrBias;
-
-  @override
-  bool operator ==(Object other) => identical(this, other) || other is FilterParameters &&
-    other.bOffset == bOffset &&
-    other.bbBias == bbBias &&
-    other.bgBias == bgBias &&
-    other.brBias == brBias &&
-    other.gOffset == gOffset &&
-    other.gbBias == gbBias &&
-    other.ggBias == ggBias &&
-    other.grBias == grBias &&
-    other.rOffset == rOffset &&
-    other.rbBias == rbBias &&
-    other.rgBias == rgBias &&
-    other.rrBias == rrBias;
-
-  @override
-  int get hashCode =>
-    // ignore: unnecessary_parenthesis
-    (bOffset.hashCode) +
-    (bbBias.hashCode) +
-    (bgBias.hashCode) +
-    (brBias.hashCode) +
-    (gOffset.hashCode) +
-    (gbBias.hashCode) +
-    (ggBias.hashCode) +
-    (grBias.hashCode) +
-    (rOffset.hashCode) +
-    (rbBias.hashCode) +
-    (rgBias.hashCode) +
-    (rrBias.hashCode);
-
-  @override
-  String toString() => 'FilterParameters[bOffset=$bOffset, bbBias=$bbBias, bgBias=$bgBias, brBias=$brBias, gOffset=$gOffset, gbBias=$gbBias, ggBias=$ggBias, grBias=$grBias, rOffset=$rOffset, rbBias=$rbBias, rgBias=$rgBias, rrBias=$rrBias]';
-
-  Map<String, dynamic> toJson() {
-    final json = <String, dynamic>{};
-      json[r'bOffset'] = this.bOffset;
-      json[r'bbBias'] = this.bbBias;
-      json[r'bgBias'] = this.bgBias;
-      json[r'brBias'] = this.brBias;
-      json[r'gOffset'] = this.gOffset;
-      json[r'gbBias'] = this.gbBias;
-      json[r'ggBias'] = this.ggBias;
-      json[r'grBias'] = this.grBias;
-      json[r'rOffset'] = this.rOffset;
-      json[r'rbBias'] = this.rbBias;
-      json[r'rgBias'] = this.rgBias;
-      json[r'rrBias'] = this.rrBias;
-    return json;
-  }
-
-  /// Returns a new [FilterParameters] instance and imports its values from
-  /// [value] if it's a [Map], null otherwise.
-  // ignore: prefer_constructors_over_static_methods
-  static FilterParameters? fromJson(dynamic value) {
-    upgradeDto(value, "FilterParameters");
-    if (value is Map) {
-      final json = value.cast<String, dynamic>();
-
-      return FilterParameters(
-        bOffset: num.parse('${json[r'bOffset']}'),
-        bbBias: num.parse('${json[r'bbBias']}'),
-        bgBias: num.parse('${json[r'bgBias']}'),
-        brBias: num.parse('${json[r'brBias']}'),
-        gOffset: num.parse('${json[r'gOffset']}'),
-        gbBias: num.parse('${json[r'gbBias']}'),
-        ggBias: num.parse('${json[r'ggBias']}'),
-        grBias: num.parse('${json[r'grBias']}'),
-        rOffset: num.parse('${json[r'rOffset']}'),
-        rbBias: num.parse('${json[r'rbBias']}'),
-        rgBias: num.parse('${json[r'rgBias']}'),
-        rrBias: num.parse('${json[r'rrBias']}'),
-      );
-    }
-    return null;
-  }
-
-  static List<FilterParameters> listFromJson(dynamic json, {bool growable = false,}) {
-    final result = <FilterParameters>[];
-    if (json is List && json.isNotEmpty) {
-      for (final row in json) {
-        final value = FilterParameters.fromJson(row);
-        if (value != null) {
-          result.add(value);
-        }
-      }
-    }
-    return result.toList(growable: growable);
-  }
-
-  static Map<String, FilterParameters> mapFromJson(dynamic json) {
-    final map = <String, FilterParameters>{};
-    if (json is Map && json.isNotEmpty) {
-      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
-      for (final entry in json.entries) {
-        final value = FilterParameters.fromJson(entry.value);
-        if (value != null) {
-          map[entry.key] = value;
-        }
-      }
-    }
-    return map;
-  }
-
-  // maps a json object with a list of FilterParameters-objects as value to a dart map
-  static Map<String, List<FilterParameters>> mapListFromJson(dynamic json, {bool growable = false,}) {
-    final map = <String, List<FilterParameters>>{};
-    if (json is Map && json.isNotEmpty) {
-      // ignore: parameter_assignments
-      json = json.cast<String, dynamic>();
-      for (final entry in json.entries) {
-        map[entry.key] = FilterParameters.listFromJson(entry.value, growable: growable,);
-      }
-    }
-    return map;
-  }
-
-  /// The list of required keys that must be present in a JSON.
-  static const requiredKeys = <String>{
-    'bOffset',
-    'bbBias',
-    'bgBias',
-    'brBias',
-    'gOffset',
-    'gbBias',
-    'ggBias',
-    'grBias',
-    'rOffset',
-    'rbBias',
-    'rgBias',
-    'rrBias',
-  };
-}
-

mobile/openapi/lib/model/sync_asset_edit_delete_v1.dart

@@ -1,99 +0,0 @@
-//
-// AUTO-GENERATED FILE, DO NOT MODIFY!
-//
-// @dart=2.18
-
-// ignore_for_file: unused_element, unused_import
-// ignore_for_file: always_put_required_named_parameters_first
-// ignore_for_file: constant_identifier_names
-// ignore_for_file: lines_longer_than_80_chars
-
-part of openapi.api;
-
-class SyncAssetEditDeleteV1 {
-  /// Returns a new [SyncAssetEditDeleteV1] instance.
-  SyncAssetEditDeleteV1({
-    required this.assetId,
-  });
-
-  String assetId;
-
-  @override
-  bool operator ==(Object other) => identical(this, other) || other is SyncAssetEditDeleteV1 &&
-    other.assetId == assetId;
-
-  @override
-  int get hashCode =>
-    // ignore: unnecessary_parenthesis
-    (assetId.hashCode);
-
-  @override
-  String toString() => 'SyncAssetEditDeleteV1[assetId=$assetId]';
-
-  Map<String, dynamic> toJson() {
-    final json = <String, dynamic>{};
-      json[r'assetId'] = this.assetId;
-    return json;
-  }
-
-  /// Returns a new [SyncAssetEditDeleteV1] instance and imports its values from
-  /// [value] if it's a [Map], null otherwise.
-  // ignore: prefer_constructors_over_static_methods
-  static SyncAssetEditDeleteV1? fromJson(dynamic value) {
-    upgradeDto(value, "SyncAssetEditDeleteV1");
-    if (value is Map) {
-      final json = value.cast<String, dynamic>();
-
-      return SyncAssetEditDeleteV1(
-        assetId: mapValueOfType<String>(json, r'assetId')!,
-      );
-    }
-    return null;
-  }
-
-  static List<SyncAssetEditDeleteV1> listFromJson(dynamic json, {bool growable = false,}) {
-    final result = <SyncAssetEditDeleteV1>[];
-    if (json is List && json.isNotEmpty) {
-      for (final row in json) {
-        final value = SyncAssetEditDeleteV1.fromJson(row);
-        if (value != null) {
-          result.add(value);
-        }
-      }
-    }
-    return result.toList(growable: growable);
-  }
-
-  static Map<String, SyncAssetEditDeleteV1> mapFromJson(dynamic json) {
-    final map = <String, SyncAssetEditDeleteV1>{};
-    if (json is Map && json.isNotEmpty) {
-      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
-      for (final entry in json.entries) {
-        final value = SyncAssetEditDeleteV1.fromJson(entry.value);
-        if (value != null) {
-          map[entry.key] = value;
-        }
-      }
-    }
-    return map;
-  }
-
-  // maps a json object with a list of SyncAssetEditDeleteV1-objects as value to a dart map
-  static Map<String, List<SyncAssetEditDeleteV1>> mapListFromJson(dynamic json, {bool growable = false,}) {
-    final map = <String, List<SyncAssetEditDeleteV1>>{};
-    if (json is Map && json.isNotEmpty) {
-      // ignore: parameter_assignments
-      json = json.cast<String, dynamic>();
-      for (final entry in json.entries) {
-        map[entry.key] = SyncAssetEditDeleteV1.listFromJson(entry.value, growable: growable,);
-      }
-    }
-    return map;
-  }
-
-  /// The list of required keys that must be present in a JSON.
-  static const requiredKeys = <String>{
-    'assetId',
-  };
-}
-

mobile/openapi/lib/model/sync_asset_edit_v1.dart

@@ -1,131 +0,0 @@
-//
-// AUTO-GENERATED FILE, DO NOT MODIFY!
-//
-// @dart=2.18
-
-// ignore_for_file: unused_element, unused_import
-// ignore_for_file: always_put_required_named_parameters_first
-// ignore_for_file: constant_identifier_names
-// ignore_for_file: lines_longer_than_80_chars
-
-part of openapi.api;
-
-class SyncAssetEditV1 {
-  /// Returns a new [SyncAssetEditV1] instance.
-  SyncAssetEditV1({
-    required this.action,
-    required this.assetId,
-    required this.id,
-    required this.parameters,
-    required this.sequence,
-  });
-
-  AssetEditAction action;
-
-  String assetId;
-
-  String id;
-
-  Object parameters;
-
-  int sequence;
-
-  @override
-  bool operator ==(Object other) => identical(this, other) || other is SyncAssetEditV1 &&
-    other.action == action &&
-    other.assetId == assetId &&
-    other.id == id &&
-    other.parameters == parameters &&
-    other.sequence == sequence;
-
-  @override
-  int get hashCode =>
-    // ignore: unnecessary_parenthesis
-    (action.hashCode) +
-    (assetId.hashCode) +
-    (id.hashCode) +
-    (parameters.hashCode) +
-    (sequence.hashCode);
-
-  @override
-  String toString() => 'SyncAssetEditV1[action=$action, assetId=$assetId, id=$id, parameters=$parameters, sequence=$sequence]';
-
-  Map<String, dynamic> toJson() {
-    final json = <String, dynamic>{};
-      json[r'action'] = this.action;
-      json[r'assetId'] = this.assetId;
-      json[r'id'] = this.id;
-      json[r'parameters'] = this.parameters;
-      json[r'sequence'] = this.sequence;
-    return json;
-  }
-
-  /// Returns a new [SyncAssetEditV1] instance and imports its values from
-  /// [value] if it's a [Map], null otherwise.
-  // ignore: prefer_constructors_over_static_methods
-  static SyncAssetEditV1? fromJson(dynamic value) {
-    upgradeDto(value, "SyncAssetEditV1");
-    if (value is Map) {
-      final json = value.cast<String, dynamic>();
-
-      return SyncAssetEditV1(
-        action: AssetEditAction.fromJson(json[r'action'])!,
-        assetId: mapValueOfType<String>(json, r'assetId')!,
-        id: mapValueOfType<String>(json, r'id')!,
-        parameters: mapValueOfType<Object>(json, r'parameters')!,
-        sequence: mapValueOfType<int>(json, r'sequence')!,
-      );
-    }
-    return null;
-  }
-
-  static List<SyncAssetEditV1> listFromJson(dynamic json, {bool growable = false,}) {
-    final result = <SyncAssetEditV1>[];
-    if (json is List && json.isNotEmpty) {
-      for (final row in json) {
-        final value = SyncAssetEditV1.fromJson(row);
-        if (value != null) {
-          result.add(value);
-        }
-      }
-    }
-    return result.toList(growable: growable);
-  }
-
-  static Map<String, SyncAssetEditV1> mapFromJson(dynamic json) {
-    final map = <String, SyncAssetEditV1>{};
-    if (json is Map && json.isNotEmpty) {
-      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
-      for (final entry in json.entries) {
-        final value = SyncAssetEditV1.fromJson(entry.value);
-        if (value != null) {
-          map[entry.key] = value;
-        }
-      }
-    }
-    return map;
-  }
-
-  // maps a json object with a list of SyncAssetEditV1-objects as value to a dart map
-  static Map<String, List<SyncAssetEditV1>> mapListFromJson(dynamic json, {bool growable = false,}) {
-    final map = <String, List<SyncAssetEditV1>>{};
-    if (json is Map && json.isNotEmpty) {
-      // ignore: parameter_assignments
-      json = json.cast<String, dynamic>();
-      for (final entry in json.entries) {
-        map[entry.key] = SyncAssetEditV1.listFromJson(entry.value, growable: growable,);
-      }
-    }
-    return map;
-  }
-
-  /// The list of required keys that must be present in a JSON.
-  static const requiredKeys = <String>{
-    'action',
-    'assetId',
-    'id',
-    'parameters',
-    'sequence',
-  };
-}
-

mobile/openapi/lib/model/sync_entity_type.dart

@@ -29,8 +29,6 @@ class SyncEntityType {
   static const assetV1 = SyncEntityType._(r'AssetV1');
   static const assetDeleteV1 = SyncEntityType._(r'AssetDeleteV1');
   static const assetExifV1 = SyncEntityType._(r'AssetExifV1');
-  static const assetEditV1 = SyncEntityType._(r'AssetEditV1');
-  static const assetEditDeleteV1 = SyncEntityType._(r'AssetEditDeleteV1');
   static const assetMetadataV1 = SyncEntityType._(r'AssetMetadataV1');
   static const assetMetadataDeleteV1 = SyncEntityType._(r'AssetMetadataDeleteV1');
   static const partnerV1 = SyncEntityType._(r'PartnerV1');
@@ -81,8 +79,6 @@ class SyncEntityType {
     assetV1,
     assetDeleteV1,
     assetExifV1,
-    assetEditV1,
-    assetEditDeleteV1,
     assetMetadataV1,
     assetMetadataDeleteV1,
     partnerV1,
@@ -168,8 +164,6 @@ class SyncEntityTypeTypeTransformer {
         case r'AssetV1': return SyncEntityType.assetV1;
         case r'AssetDeleteV1': return SyncEntityType.assetDeleteV1;
         case r'AssetExifV1': return SyncEntityType.assetExifV1;
-        case r'AssetEditV1': return SyncEntityType.assetEditV1;
-        case r'AssetEditDeleteV1': return SyncEntityType.assetEditDeleteV1;
         case r'AssetMetadataV1': return SyncEntityType.assetMetadataV1;
         case r'AssetMetadataDeleteV1': return SyncEntityType.assetMetadataDeleteV1;
         case r'PartnerV1': return SyncEntityType.partnerV1;

mobile/openapi/lib/model/sync_request_type.dart

@@ -30,7 +30,6 @@ class SyncRequestType {
   static const albumAssetExifsV1 = SyncRequestType._(r'AlbumAssetExifsV1');
   static const assetsV1 = SyncRequestType._(r'AssetsV1');
   static const assetExifsV1 = SyncRequestType._(r'AssetExifsV1');
-  static const assetEditsV1 = SyncRequestType._(r'AssetEditsV1');
   static const assetMetadataV1 = SyncRequestType._(r'AssetMetadataV1');
   static const authUsersV1 = SyncRequestType._(r'AuthUsersV1');
   static const memoriesV1 = SyncRequestType._(r'MemoriesV1');
@@ -54,7 +53,6 @@ class SyncRequestType {
     albumAssetExifsV1,
     assetsV1,
     assetExifsV1,
-    assetEditsV1,
     assetMetadataV1,
     authUsersV1,
     memoriesV1,
@@ -113,7 +111,6 @@ class SyncRequestTypeTypeTransformer {
         case r'AlbumAssetExifsV1': return SyncRequestType.albumAssetExifsV1;
         case r'AssetsV1': return SyncRequestType.assetsV1;
         case r'AssetExifsV1': return SyncRequestType.assetExifsV1;
-        case r'AssetEditsV1': return SyncRequestType.assetEditsV1;
         case r'AssetMetadataV1': return SyncRequestType.assetMetadataV1;
         case r'AuthUsersV1': return SyncRequestType.authUsersV1;
         case r'MemoriesV1': return SyncRequestType.memoriesV1;

mobile/packages/ui/.gitignore

@@ -0,0 +1,15 @@
+# Build artifacts
+build/
+
+# Platform-specific files are not needed as this is a Flutter UI package
+android/
+ios/
+
+# Test cache and generated files
+.dart_tool/
+.packages
+.flutter-plugins
+.flutter-plugins-dependencies
+
+# Fonts copied by build process
+fonts/

mobile/packages/ui/lib/immich_ui.dart

@@ -1,5 +1,6 @@
 export 'src/components/close_button.dart';
 export 'src/components/form.dart';
+export 'src/components/html_text.dart';
 export 'src/components/icon_button.dart';
 export 'src/components/password_input.dart';
 export 'src/components/text_button.dart';

mobile/packages/ui/lib/src/components/html_text.dart

@@ -0,0 +1,189 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:html/dom.dart' as dom;
+import 'package:html/parser.dart' as html_parser;
+
+enum _HtmlTagType {
+  bold,
+  link,
+  unsupported,
+}
+
+class _HtmlTag {
+  final _HtmlTagType type;
+  final String tagName;
+
+  const _HtmlTag._({required this.type, required this.tagName});
+
+  static const unsupported = _HtmlTag._(type: _HtmlTagType.unsupported, tagName: 'unsupported');
+
+  static _HtmlTag? fromString(dom.Node node) {
+    final tagName = (node is dom.Element) ? node.localName : null;
+    if (tagName == null) {
+      return null;
+    }
+
+    final tag = tagName.toLowerCase();
+    return switch (tag) {
+      'b' || 'strong' => _HtmlTag._(type: _HtmlTagType.bold, tagName: tag),
+      // Convert <a> back to 'link' for handler lookup
+      'a' => const _HtmlTag._(type: _HtmlTagType.link, tagName: 'link'),
+      _ when tag.endsWith('-link') => _HtmlTag._(type: _HtmlTagType.link, tagName: tag),
+      _ => _HtmlTag.unsupported,
+    };
+  }
+}
+
+/// A widget that renders text with optional HTML-style formatting.
+///
+/// Supports the following tags:
+/// - `<b>` or `<strong>` for bold text
+/// - `<link>` or any tag ending with `-link` for tappable links
+///
+/// Example:
+/// ```dart
+/// ImmichHtmlText(
+///   'Refer to <link>docs</link> and <other-link>other</other-link>',
+///   linkHandlers: {
+///     'link': () => launchUrl(docsUrl),
+///     'other-link': () => launchUrl(otherUrl),
+///   },
+/// )
+/// ```
+class ImmichHtmlText extends StatefulWidget {
+  final String text;
+  final TextStyle? style;
+  final TextAlign? textAlign;
+  final TextOverflow? overflow;
+  final int? maxLines;
+  final bool? softWrap;
+  final Map<String, VoidCallback>? linkHandlers;
+  final TextStyle? linkStyle;
+
+  const ImmichHtmlText(
+    this.text, {
+    super.key,
+    this.style,
+    this.textAlign,
+    this.overflow,
+    this.maxLines,
+    this.softWrap,
+    this.linkHandlers,
+    this.linkStyle,
+  });
+
+  @override
+  State<ImmichHtmlText> createState() => _ImmichHtmlTextState();
+}
+
+class _ImmichHtmlTextState extends State<ImmichHtmlText> {
+  final _recognizers = <GestureRecognizer>[];
+  dom.DocumentFragment _document = dom.DocumentFragment();
+
+  @override
+  void initState() {
+    super.initState();
+    _document = html_parser.parseFragment(_preprocessHtml(widget.text));
+  }
+
+  @override
+  void didUpdateWidget(covariant ImmichHtmlText oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.text != widget.text) {
+      _document = html_parser.parseFragment(_preprocessHtml(widget.text));
+    }
+  }
+
+  /// `<link>` tags are preprocessed to `<a>` tags because `<link>` is a
+  /// void element in HTML5 and cannot have children. The linkHandlers still use
+  /// 'link' as the key.
+  String _preprocessHtml(String html) {
+    return html
+        .replaceAllMapped(
+          RegExp(r'<(link)>(.*?)</\1>', caseSensitive: false),
+          (match) => '<a>${match.group(2)}</a>',
+        )
+        .replaceAllMapped(
+          RegExp(r'<(link)\s*/>', caseSensitive: false),
+          (match) => '<a></a>',
+        );
+  }
+
+  @override
+  void dispose() {
+    _disposeRecognizers();
+    super.dispose();
+  }
+
+  void _disposeRecognizers() {
+    for (final recognizer in _recognizers) {
+      recognizer.dispose();
+    }
+    _recognizers.clear();
+  }
+
+  List<InlineSpan> _buildSpans() {
+    _disposeRecognizers();
+
+    return _document.nodes.expand((node) => _buildNode(node, null, null)).toList();
+  }
+
+  Iterable<InlineSpan> _buildNode(
+    dom.Node node,
+    TextStyle? style,
+    _HtmlTag? parentTag,
+  ) sync* {
+    if (node is dom.Text) {
+      if (node.text.isEmpty) {
+        return;
+      }
+
+      GestureRecognizer? recognizer;
+      if (parentTag?.type == _HtmlTagType.link) {
+        final handler = widget.linkHandlers?[parentTag?.tagName];
+        if (handler != null) {
+          recognizer = TapGestureRecognizer()..onTap = handler;
+          _recognizers.add(recognizer);
+        }
+      }
+
+      yield TextSpan(text: node.text, style: style, recognizer: recognizer);
+    } else if (node is dom.Element) {
+      final htmlTag = _HtmlTag.fromString(node);
+      final tagStyle = _styleForTag(htmlTag);
+      final mergedStyle = style?.merge(tagStyle) ?? tagStyle;
+      final newParentTag = htmlTag?.type == _HtmlTagType.link ? htmlTag : parentTag;
+
+      for (final child in node.nodes) {
+        yield* _buildNode(child, mergedStyle, newParentTag);
+      }
+    }
+  }
+
+  TextStyle? _styleForTag(_HtmlTag? tag) {
+    if (tag == null) {
+      return null;
+    }
+
+    return switch (tag.type) {
+      _HtmlTagType.bold => const TextStyle(fontWeight: FontWeight.bold),
+      _HtmlTagType.link => widget.linkStyle ??
+          TextStyle(
+            color: Theme.of(context).colorScheme.primary,
+            decoration: TextDecoration.underline,
+          ),
+      _HtmlTagType.unsupported => null,
+    };
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Text.rich(
+      TextSpan(style: widget.style, children: _buildSpans()),
+      textAlign: widget.textAlign,
+      overflow: widget.overflow,
+      maxLines: widget.maxLines,
+      softWrap: widget.softWrap,
+    );
+  }
+}

mobile/packages/ui/pubspec.lock

@@ -1,6 +1,22 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  async:
+    dependency: transitive
+    description:
+      name: async
+      sha256: "758e6d74e971c3e5aceb4110bfd6698efc7f501675bcfe0c775459a8140750eb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.13.0"
+  boolean_selector:
+    dependency: transitive
+    description:
+      name: boolean_selector
+      sha256: "8aab1771e1243a5063b8b0ff68042d67334e3feab9e95b9490f9a6ebf73b42ea"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
   characters:
     dependency: transitive
     description:
@@ -9,6 +25,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      sha256: fddb70d9b5277016c77a80201021d40a2247104d9f4aa7bab7157b7e3f05b84b
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.2"
   collection:
     dependency: transitive
     description:
@@ -17,11 +41,72 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.19.1"
+  csslib:
+    dependency: transitive
+    description:
+      name: csslib
+      sha256: "09bad715f418841f976c77db72d5398dc1253c21fb9c0c7f0b0b985860b2d58e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.2"
+  fake_async:
+    dependency: transitive
+    description:
+      name: fake_async
+      sha256: "5368f224a74523e8d2e7399ea1638b37aecfca824a3cc4dfdf77bf1fa905ac44"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.3"
   flutter:
     dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_test:
+    dependency: "direct dev"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  html:
+    dependency: "direct main"
+    description:
+      name: html
+      sha256: "6d1264f2dffa1b1101c25a91dff0dc2daee4c18e87cd8538729773c073dbf602"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.15.6"
+  leak_tracker:
+    dependency: transitive
+    description:
+      name: leak_tracker
+      sha256: "33e2e26bdd85a0112ec15400c8cbffea70d0f9c3407491f672a2fad47915e2de"
+      url: "https://pub.dev"
+    source: hosted
+    version: "11.0.2"
+  leak_tracker_flutter_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_flutter_testing
+      sha256: "1dbc140bb5a23c75ea9c4811222756104fbcd1a27173f0c34ca01e16bea473c1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.10"
+  leak_tracker_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_testing
+      sha256: "8d5a2d49f4a66b49744b23b018848400d23e54caf9463f4eb20df3eb8acb2eb1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.2"
+  matcher:
+    dependency: transitive
+    description:
+      name: matcher
+      sha256: dc58c723c3c24bf8d3e2d3ad3f2f9d7bd9cf43ec6feaa64181775e60190153f2
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.12.17"
   material_color_utilities:
     dependency: transitive
     description:
@@ -34,15 +119,71 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
+      sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
       url: "https://pub.dev"
     source: hosted
-    version: "1.17.0"
+    version: "1.16.0"
+  path:
+    dependency: transitive
+    description:
+      name: path
+      sha256: "75cca69d1490965be98c73ceaea117e8a04dd21217b37b292c9ddbec0d955bc5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.9.1"
   sky_engine:
     dependency: transitive
     description: flutter
     source: sdk
     version: "0.0.0"
+  source_span:
+    dependency: transitive
+    description:
+      name: source_span
+      sha256: "254ee5351d6cb365c859e20ee823c3bb479bf4a293c22d17a9f1bf144ce86f7c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.10.1"
+  stack_trace:
+    dependency: transitive
+    description:
+      name: stack_trace
+      sha256: "8b27215b45d22309b5cddda1aa2b19bdfec9df0e765f2de506401c071d38d1b1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.12.1"
+  stream_channel:
+    dependency: transitive
+    description:
+      name: stream_channel
+      sha256: "969e04c80b8bcdf826f8f16579c7b14d780458bd97f56d107d3950fdbeef059d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
+  string_scanner:
+    dependency: transitive
+    description:
+      name: string_scanner
+      sha256: "921cd31725b72fe181906c6a94d987c78e3b98c2e205b397ea399d4054872b43"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.1"
+  term_glyph:
+    dependency: transitive
+    description:
+      name: term_glyph
+      sha256: "7f554798625ea768a7518313e58f83891c7f5024f88e46e7182a4558850a4b8e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.2"
+  test_api:
+    dependency: transitive
+    description:
+      name: test_api
+      sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.6"
   vector_math:
     dependency: transitive
     description:
@@ -51,5 +192,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.2.0"
+  vm_service:
+    dependency: transitive
+    description:
+      name: vm_service
+      sha256: "45caa6c5917fa127b5dbcfbd1fa60b14e583afdc08bfc96dda38886ca252eb60"
+      url: "https://pub.dev"
+    source: hosted
+    version: "15.0.2"
 sdks:
   dart: ">=3.8.0-0 <4.0.0"
+  flutter: ">=3.18.0-18.0.pre.54"

mobile/packages/ui/pubspec.yaml

@@ -7,6 +7,11 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  html: ^0.15.6
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
 
 flutter:
   uses-material-design: true

mobile/packages/ui/showcase/.gitignore

@@ -0,0 +1,11 @@
+# Build artifacts
+build/
+
+# Test cache and generated files
+.dart_tool/
+.packages
+.flutter-plugins
+.flutter-plugins-dependencies
+
+# IDE-specific files
+.vscode/

mobile/packages/ui/showcase/.metadata

@@ -0,0 +1,30 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: "adc901062556672b4138e18a4dc62a4be8f4b3c2"
+  channel: "stable"
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+      base_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+    - platform: web
+      create_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+      base_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'

mobile/packages/ui/showcase/analysis_options.yaml

@@ -0,0 +1 @@
+include: package:flutter_lints/flutter.yaml

mobile/packages/ui/showcase/assets/themes/github_dark.json

@@ -0,0 +1,339 @@
+{
+  "name": "GitHub Dark",
+  "settings": [
+    {
+      "settings": {
+        "foreground": "#e1e4e8",
+        "background": "#24292e"
+      }
+    },
+    {
+      "scope": [
+        "comment",
+        "punctuation.definition.comment",
+        "string.comment"
+      ],
+      "settings": {
+        "foreground": "#6a737d"
+      }
+    },
+    {
+      "scope": [
+        "constant",
+        "entity.name.constant",
+        "variable.other.constant",
+        "variable.other.enummember",
+        "variable.language"
+      ],
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "entity",
+        "entity.name"
+      ],
+      "settings": {
+        "foreground": "#b392f0"
+      }
+    },
+    {
+      "scope": "variable.parameter.function",
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "entity.name.tag",
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#f97583"
+      }
+    },
+    {
+      "scope": [
+        "storage",
+        "storage.type"
+      ],
+      "settings": {
+        "foreground": "#f97583"
+      }
+    },
+    {
+      "scope": [
+        "storage.modifier.package",
+        "storage.modifier.import",
+        "storage.type.java"
+      ],
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": [
+        "string",
+        "punctuation.definition.string",
+        "string punctuation.section.embedded source"
+      ],
+      "settings": {
+        "foreground": "#9ecbff"
+      }
+    },
+    {
+      "scope": "support",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.property-name",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "variable",
+      "settings": {
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": "variable.other",
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "invalid.broken",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.deprecated",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.illegal",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.unimplemented",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "message.error",
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "string variable",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "source.regexp",
+        "string.regexp"
+      ],
+      "settings": {
+        "foreground": "#dbedff"
+      }
+    },
+    {
+      "scope": [
+        "string.regexp.character-class",
+        "string.regexp constant.character.escape",
+        "string.regexp source.ruby.embedded",
+        "string.regexp string.regexp.arbitrary-repitition"
+      ],
+      "settings": {
+        "foreground": "#dbedff"
+      }
+    },
+    {
+      "scope": "string.regexp constant.character.escape",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "support.constant",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "support.variable",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.module-reference",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "punctuation.definition.list.begin.markdown",
+      "settings": {
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": [
+        "markup.heading",
+        "markup.heading entity.name"
+      ],
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "markup.quote",
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "markup.underline",
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "markup.deleted",
+        "meta.diff.header.from-file",
+        "punctuation.definition.deleted"
+      ],
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": [
+        "markup.inserted",
+        "meta.diff.header.to-file",
+        "punctuation.definition.inserted"
+      ],
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": [
+        "markup.changed",
+        "punctuation.definition.changed"
+      ],
+      "settings": {
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": [
+        "markup.ignored",
+        "markup.untracked"
+      ],
+      "settings": {
+        "foreground": "#2f363d"
+      }
+    },
+    {
+      "scope": "meta.diff.range",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#b392f0"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.separator",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.output",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "brackethighlighter.tag",
+        "brackethighlighter.curly",
+        "brackethighlighter.round",
+        "brackethighlighter.square",
+        "brackethighlighter.angle",
+        "brackethighlighter.quote"
+      ],
+      "settings": {
+        "foreground": "#d1d5da"
+      }
+    },
+    {
+      "scope": "brackethighlighter.unmatched",
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": [
+        "constant.other.reference.link",
+        "string.other.link"
+      ],
+      "settings": {
+        "fontStyle": "underline",
+        "foreground": "#dbedff"
+      }
+    }
+  ]
+}

mobile/packages/ui/showcase/lib/app_theme.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+
+class AppTheme {
+  // Light theme colors
+  static const _primary500 = Color(0xFF4250AF);
+  static const _primary100 = Color(0xFFD4D6F0);
+  static const _primary900 = Color(0xFF181E44);
+  static const _danger500 = Color(0xFFE53E3E);
+  static const _light50 = Color(0xFFFAFAFA);
+  static const _light300 = Color(0xFFD4D4D4);
+  static const _light500 = Color(0xFF737373);
+
+  // Dark theme colors
+  static const _darkPrimary500 = Color(0xFFACCBFA);
+  static const _darkPrimary300 = Color(0xFF616D94);
+  static const _darkDanger500 = Color(0xFFE88080);
+  static const _darkLight50 = Color(0xFF0A0A0A);
+  static const _darkLight100 = Color(0xFF171717);
+  static const _darkLight200 = Color(0xFF262626);
+
+  static ThemeData get lightTheme {
+    return ThemeData(
+      colorScheme: const ColorScheme.light(
+        primary: _primary500,
+        onPrimary: Colors.white,
+        primaryContainer: _primary100,
+        onPrimaryContainer: _primary900,
+        secondary: _light500,
+        onSecondary: Colors.white,
+        error: _danger500,
+        onError: Colors.white,
+        surface: _light50,
+        onSurface: Color(0xFF1A1C1E),
+        surfaceContainerHighest: Color(0xFFE3E4E8),
+        outline: Color(0xFFD1D3D9),
+        outlineVariant: _light300,
+      ),
+      useMaterial3: true,
+      fontFamily: 'GoogleSans',
+      scaffoldBackgroundColor: _light50,
+      cardTheme: const CardThemeData(
+        elevation: 0,
+        color: Colors.white,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(12)),
+          side: BorderSide(color: _light300, width: 1),
+        ),
+      ),
+      appBarTheme: const AppBarTheme(
+        centerTitle: false,
+        elevation: 0,
+        backgroundColor: Colors.white,
+        surfaceTintColor: Colors.transparent,
+        foregroundColor: Color(0xFF1A1C1E),
+      ),
+    );
+  }
+
+  static ThemeData get darkTheme {
+    return ThemeData(
+      colorScheme: const ColorScheme.dark(
+        primary: _darkPrimary500,
+        onPrimary: Color(0xFF0F1433),
+        primaryContainer: _darkPrimary300,
+        onPrimaryContainer: _primary100,
+        secondary: Color(0xFFC4C6D0),
+        onSecondary: Color(0xFF2E3042),
+        error: _darkDanger500,
+        onError: Color(0xFF0F1433),
+        surface: _darkLight50,
+        onSurface: Color(0xFFE3E3E6),
+        surfaceContainerHighest: _darkLight200,
+        outline: Color(0xFF8E9099),
+        outlineVariant: Color(0xFF43464F),
+      ),
+      useMaterial3: true,
+      fontFamily: 'GoogleSans',
+      scaffoldBackgroundColor: _darkLight50,
+      cardTheme: const CardThemeData(
+        elevation: 0,
+        color: _darkLight100,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(12)),
+          side: BorderSide(color: _darkLight200, width: 1),
+        ),
+      ),
+      appBarTheme: const AppBarTheme(
+        centerTitle: false,
+        elevation: 0,
+        backgroundColor: _darkLight50,
+        surfaceTintColor: Colors.transparent,
+        foregroundColor: Color(0xFFE3E3E6),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/constants.dart

@@ -0,0 +1,16 @@
+const String appTitle = '@immich/ui';
+
+class LayoutConstants {
+  static const double sidebarWidth = 220.0;
+
+  static const double gridSpacing = 16.0;
+  static const double gridAspectRatio = 2.5;
+
+  static const double borderRadiusSmall = 6.0;
+  static const double borderRadiusMedium = 8.0;
+  static const double borderRadiusLarge = 12.0;
+
+  static const double iconSizeSmall = 16.0;
+  static const double iconSizeMedium = 18.0;
+  static const double iconSizeLarge = 20.0;
+}

mobile/packages/ui/showcase/lib/main.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/app_theme.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/router.dart';
+import 'package:showcase/widgets/example_card.dart';
+
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+  await initializeCodeHighlighter();
+  runApp(const ShowcaseApp());
+}
+
+class ShowcaseApp extends StatefulWidget {
+  const ShowcaseApp({super.key});
+
+  @override
+  State<ShowcaseApp> createState() => _ShowcaseAppState();
+}
+
+class _ShowcaseAppState extends State<ShowcaseApp> {
+  ThemeMode _themeMode = ThemeMode.light;
+  late final GoRouter _router;
+
+  @override
+  void initState() {
+    super.initState();
+    _router = AppRouter.createRouter(_toggleTheme);
+  }
+
+  void _toggleTheme() {
+    setState(() {
+      _themeMode = _themeMode == ThemeMode.light
+          ? ThemeMode.dark
+          : ThemeMode.light;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      title: appTitle,
+      themeMode: _themeMode,
+      routerConfig: _router,
+      theme: AppTheme.lightTheme,
+      darkTheme: AppTheme.darkTheme,
+      debugShowCheckedModeBanner: false,
+      builder: (context, child) => ImmichThemeProvider(
+        colorScheme: Theme.of(context).colorScheme,
+        child: child!,
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/close_button_page.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class CloseButtonPage extends StatelessWidget {
+  const CloseButtonPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.closeButton.name,
+      child: ComponentExamples(
+        title: 'ImmichCloseButton',
+        subtitle: 'Pre-configured close button for dialogs and sheets.',
+        examples: [
+          ExampleCard(
+            title: 'Default & Custom',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichCloseButton(onPressed: () {}),
+                ImmichCloseButton(
+                  variant: ImmichVariant.filled,
+                  onPressed: () {},
+                ),
+                ImmichCloseButton(
+                  color: ImmichColor.secondary,
+                  onPressed: () {},
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/examples/html_text_bold_text.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class HtmlTextBoldText extends StatelessWidget {
+  const HtmlTextBoldText({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichHtmlText(
+      'This is <b>bold text</b> and <strong>strong text</strong>.',
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/examples/html_text_links.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class HtmlTextLinks extends StatelessWidget {
+  const HtmlTextLinks({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichHtmlText(
+      'Read the <docs-link>documentation</docs-link> or visit <github-link>GitHub</github-link>.',
+      linkHandlers: {
+        'docs-link': () {
+          ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('Docs link clicked!')));
+        },
+        'github-link': () {
+          ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('GitHub link clicked!')));
+        },
+      },
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/examples/html_text_nested_tags.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class HtmlTextNestedTags extends StatelessWidget {
+  const HtmlTextNestedTags({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichHtmlText(
+      'You can <b>combine <link>bold and links</link></b> together.',
+      linkHandlers: {
+        'link': () {
+          ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('Nested link clicked!')));
+        },
+      },
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/form_page.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class FormPage extends StatefulWidget {
+  const FormPage({super.key});
+
+  @override
+  State<FormPage> createState() => _FormPageState();
+}
+
+class _FormPageState extends State<FormPage> {
+  final _emailController = TextEditingController();
+  final _passwordController = TextEditingController();
+  String _result = '';
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.form.name,
+      child: ComponentExamples(
+        title: 'ImmichForm',
+        subtitle:
+            'Form container with built-in validation and submit handling.',
+        examples: [
+          ExampleCard(
+            title: 'Login Form',
+            preview: Column(
+              children: [
+                ImmichForm(
+                  submitText: 'Login',
+                  submitIcon: Icons.login,
+                  onSubmit: () async {
+                    await Future.delayed(const Duration(seconds: 1));
+                    setState(() {
+                      _result = 'Form submitted!';
+                    });
+                  },
+                  child: Column(
+                    spacing: 10,
+                    children: [
+                      ImmichTextInput(
+                        label: 'Email',
+                        controller: _emailController,
+                        keyboardType: TextInputType.emailAddress,
+                        validator: (value) =>
+                            value?.isEmpty ?? true ? 'Required' : null,
+                      ),
+                      ImmichPasswordInput(
+                        label: 'Password',
+                        controller: _passwordController,
+                        validator: (value) =>
+                            value?.isEmpty ?? true ? 'Required' : null,
+                      ),
+                    ],
+                  ),
+                ),
+                if (_result.isNotEmpty) ...[
+                  const SizedBox(height: 16),
+                  Text(_result, style: const TextStyle(color: Colors.green)),
+                ],
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _emailController.dispose();
+    _passwordController.dispose();
+    super.dispose();
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/html_text_page.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:showcase/pages/components/examples/html_text_bold_text.dart';
+import 'package:showcase/pages/components/examples/html_text_links.dart';
+import 'package:showcase/pages/components/examples/html_text_nested_tags.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class HtmlTextPage extends StatelessWidget {
+  const HtmlTextPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.htmlText.name,
+      child: ComponentExamples(
+        title: 'ImmichHtmlText',
+        subtitle: 'Render text with HTML formatting (bold, links).',
+        examples: [
+          ExampleCard(
+            title: 'Bold Text',
+            preview: const HtmlTextBoldText(),
+            code: 'html_text_bold_text.dart',
+          ),
+          ExampleCard(
+            title: 'Links',
+            preview: const HtmlTextLinks(),
+            code: 'html_text_links.dart',
+          ),
+          ExampleCard(
+            title: 'Nested Tags',
+            preview: const HtmlTextNestedTags(),
+            code: 'html_text_nested_tags.dart',
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/icon_button_page.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class IconButtonPage extends StatelessWidget {
+  const IconButtonPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.iconButton.name,
+      child: ComponentExamples(
+        title: 'ImmichIconButton',
+        subtitle: 'Icon-only button with customizable styling.',
+        examples: [
+          ExampleCard(
+            title: 'Variants & Colors',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichIconButton(
+                  icon: Icons.add,
+                  onPressed: () {},
+                  variant: ImmichVariant.filled,
+                ),
+                ImmichIconButton(
+                  icon: Icons.edit,
+                  onPressed: () {},
+                  variant: ImmichVariant.ghost,
+                ),
+                ImmichIconButton(
+                  icon: Icons.delete,
+                  onPressed: () {},
+                  color: ImmichColor.secondary,
+                ),
+                ImmichIconButton(
+                  icon: Icons.settings,
+                  onPressed: () {},
+                  disabled: true,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/password_input_page.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class PasswordInputPage extends StatelessWidget {
+  const PasswordInputPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.passwordInput.name,
+      child: ComponentExamples(
+        title: 'ImmichPasswordInput',
+        subtitle: 'Password field with visibility toggle.',
+        examples: [
+          ExampleCard(
+            title: 'Password Input',
+            preview: ImmichPasswordInput(
+              label: 'Password',
+              hintText: 'Enter your password',
+              validator: (value) {
+                if (value == null || value.isEmpty) {
+                  return 'Password is required';
+                }
+                if (value.length < 8) {
+                  return 'Password must be at least 8 characters';
+                }
+                return null;
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/text_button_page.dart

@@ -0,0 +1,140 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class TextButtonPage extends StatefulWidget {
+  const TextButtonPage({super.key});
+
+  @override
+  State<TextButtonPage> createState() => _TextButtonPageState();
+}
+
+class _TextButtonPageState extends State<TextButtonPage> {
+  bool _isLoading = false;
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.textButton.name,
+      child: ComponentExamples(
+        title: 'ImmichTextButton',
+        subtitle:
+            'A versatile button component with multiple variants and color options.',
+        examples: [
+          ExampleCard(
+            title: 'Variants',
+            description:
+                'Filled and ghost variants for different visual hierarchy',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Filled',
+                  variant: ImmichVariant.filled,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Ghost',
+                  variant: ImmichVariant.ghost,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'Colors',
+            description: 'Primary and secondary color options',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Primary',
+                  color: ImmichColor.primary,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Secondary',
+                  color: ImmichColor.secondary,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'With Icons',
+            description: 'Add leading icons',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'With Icon',
+                  icon: Icons.add,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Download',
+                  icon: Icons.download,
+                  variant: ImmichVariant.ghost,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'Loading State',
+            description: 'Shows loading indicator during async operations',
+            preview: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                ImmichTextButton(
+                  onPressed: () async {
+                    setState(() => _isLoading = true);
+                    await Future.delayed(const Duration(seconds: 2));
+                    if (mounted) setState(() => _isLoading = false);
+                  },
+                  labelText: _isLoading ? 'Loading...' : 'Click Me',
+                  loading: _isLoading,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'Disabled State',
+            description: 'Buttons can be disabled',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Disabled',
+                  disabled: true,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Disabled Ghost',
+                  variant: ImmichVariant.ghost,
+                  disabled: true,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/text_input_page.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class TextInputPage extends StatefulWidget {
+  const TextInputPage({super.key});
+
+  @override
+  State<TextInputPage> createState() => _TextInputPageState();
+}
+
+class _TextInputPageState extends State<TextInputPage> {
+  final _controller1 = TextEditingController();
+  final _controller2 = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.textInput.name,
+      child: ComponentExamples(
+        title: 'ImmichTextInput',
+        subtitle: 'Text field with validation support.',
+        examples: [
+          ExampleCard(
+            title: 'Basic Usage',
+            preview: Column(
+              children: [
+                ImmichTextInput(
+                  label: 'Email',
+                  hintText: 'Enter your email',
+                  controller: _controller1,
+                  keyboardType: TextInputType.emailAddress,
+                ),
+                const SizedBox(height: 16),
+                ImmichTextInput(
+                  label: 'Username',
+                  controller: _controller2,
+                  validator: (value) {
+                    if (value == null || value.isEmpty) {
+                      return 'Username is required';
+                    }
+                    if (value.length < 3) {
+                      return 'Username must be at least 3 characters';
+                    }
+                    return null;
+                  },
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller1.dispose();
+    _controller2.dispose();
+    super.dispose();
+  }
+}

mobile/packages/ui/showcase/lib/pages/design_system/constants_page.dart

@@ -0,0 +1,396 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class ConstantsPage extends StatefulWidget {
+  const ConstantsPage({super.key});
+
+  @override
+  State<ConstantsPage> createState() => _ConstantsPageState();
+}
+
+class _ConstantsPageState extends State<ConstantsPage> {
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.constants.name,
+      child: ComponentExamples(
+        title: 'Constants',
+        subtitle: 'Consistent spacing, sizing, and styling constants.',
+        expand: true,
+        examples: [
+          const ExampleCard(
+            title: 'Spacing',
+            description: 'ImmichSpacing (4.0 → 48.0)',
+            preview: Column(
+              children: [
+                _SpacingBox(label: 'xs', size: ImmichSpacing.xs),
+                _SpacingBox(label: 'sm', size: ImmichSpacing.sm),
+                _SpacingBox(label: 'md', size: ImmichSpacing.md),
+                _SpacingBox(label: 'lg', size: ImmichSpacing.lg),
+                _SpacingBox(label: 'xl', size: ImmichSpacing.xl),
+                _SpacingBox(label: 'xxl', size: ImmichSpacing.xxl),
+                _SpacingBox(label: 'xxxl', size: ImmichSpacing.xxxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Border Radius',
+            description: 'ImmichRadius (0.0 → 24.0)',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                _RadiusBox(label: 'none', radius: ImmichRadius.none),
+                _RadiusBox(label: 'xs', radius: ImmichRadius.xs),
+                _RadiusBox(label: 'sm', radius: ImmichRadius.sm),
+                _RadiusBox(label: 'md', radius: ImmichRadius.md),
+                _RadiusBox(label: 'lg', radius: ImmichRadius.lg),
+                _RadiusBox(label: 'xl', radius: ImmichRadius.xl),
+                _RadiusBox(label: 'xxl', radius: ImmichRadius.xxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Icon Sizes',
+            description: 'ImmichIconSize (16.0 → 48.0)',
+            preview: Wrap(
+              spacing: 16,
+              runSpacing: 16,
+              alignment: WrapAlignment.start,
+              children: [
+                _IconSizeBox(label: 'xs', size: ImmichIconSize.xs),
+                _IconSizeBox(label: 'sm', size: ImmichIconSize.sm),
+                _IconSizeBox(label: 'md', size: ImmichIconSize.md),
+                _IconSizeBox(label: 'lg', size: ImmichIconSize.lg),
+                _IconSizeBox(label: 'xl', size: ImmichIconSize.xl),
+                _IconSizeBox(label: 'xxl', size: ImmichIconSize.xxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Text Sizes',
+            description: 'ImmichTextSize (10.0 → 60.0)',
+            preview: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Caption',
+                  style: TextStyle(fontSize: ImmichTextSize.caption),
+                ),
+                Text('Label', style: TextStyle(fontSize: ImmichTextSize.label)),
+                Text('Body', style: TextStyle(fontSize: ImmichTextSize.body)),
+                Text('H6', style: TextStyle(fontSize: ImmichTextSize.h6)),
+                Text('H5', style: TextStyle(fontSize: ImmichTextSize.h5)),
+                Text('H4', style: TextStyle(fontSize: ImmichTextSize.h4)),
+                Text('H3', style: TextStyle(fontSize: ImmichTextSize.h3)),
+                Text('H2', style: TextStyle(fontSize: ImmichTextSize.h2)),
+                Text('H1', style: TextStyle(fontSize: ImmichTextSize.h1)),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Elevation',
+            description: 'ImmichElevation (0.0 → 16.0)',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                _ElevationBox(label: 'none', elevation: ImmichElevation.none),
+                _ElevationBox(label: 'xs', elevation: ImmichElevation.xs),
+                _ElevationBox(label: 'sm', elevation: ImmichElevation.sm),
+                _ElevationBox(label: 'md', elevation: ImmichElevation.md),
+                _ElevationBox(label: 'lg', elevation: ImmichElevation.lg),
+                _ElevationBox(label: 'xl', elevation: ImmichElevation.xl),
+                _ElevationBox(label: 'xxl', elevation: ImmichElevation.xxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Border Width',
+            description: 'ImmichBorderWidth (0.5 → 4.0)',
+            preview: Column(
+              children: [
+                _BorderBox(
+                  label: 'hairline',
+                  borderWidth: ImmichBorderWidth.hairline,
+                ),
+                _BorderBox(label: 'base', borderWidth: ImmichBorderWidth.base),
+                _BorderBox(label: 'md', borderWidth: ImmichBorderWidth.md),
+                _BorderBox(label: 'lg', borderWidth: ImmichBorderWidth.lg),
+                _BorderBox(label: 'xl', borderWidth: ImmichBorderWidth.xl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Animation Durations',
+            description: 'ImmichDuration (100ms → 700ms)',
+            preview: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              spacing: 8,
+              children: [
+                _AnimatedDurationBox(
+                  label: 'Extra Fast',
+                  duration: ImmichDuration.extraFast,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Fast',
+                  duration: ImmichDuration.fast,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Normal',
+                  duration: ImmichDuration.normal,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Slow',
+                  duration: ImmichDuration.slow,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Extra Slow',
+                  duration: ImmichDuration.extraSlow,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _SpacingBox extends StatelessWidget {
+  final String label;
+  final double size;
+
+  const _SpacingBox({required this.label, required this.size});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 4),
+      child: Row(
+        children: [
+          SizedBox(
+            width: 60,
+            child: Text(
+              label,
+              style: const TextStyle(fontFamily: 'GoogleSansCode'),
+            ),
+          ),
+          Container(
+            width: size,
+            height: 24,
+            color: Theme.of(context).colorScheme.primary,
+          ),
+          const SizedBox(width: 8),
+          Text('${size.toStringAsFixed(1)}px'),
+        ],
+      ),
+    );
+  }
+}
+
+class _RadiusBox extends StatelessWidget {
+  final String label;
+  final double radius;
+
+  const _RadiusBox({required this.label, required this.radius});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Container(
+          width: 60,
+          height: 60,
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.primary,
+            borderRadius: BorderRadius.circular(radius),
+          ),
+        ),
+        const SizedBox(height: 4),
+        Text(label, style: const TextStyle(fontSize: 12)),
+      ],
+    );
+  }
+}
+
+class _IconSizeBox extends StatelessWidget {
+  final String label;
+  final double size;
+
+  const _IconSizeBox({required this.label, required this.size});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Icon(Icons.palette_rounded, size: size),
+        const SizedBox(height: 4),
+        Text(label, style: const TextStyle(fontSize: 12)),
+        Text(
+          '${size.toStringAsFixed(0)}px',
+          style: const TextStyle(fontSize: 10, color: Colors.grey),
+        ),
+      ],
+    );
+  }
+}
+
+class _ElevationBox extends StatelessWidget {
+  final String label;
+  final double elevation;
+
+  const _ElevationBox({required this.label, required this.elevation});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Material(
+          elevation: elevation,
+          borderRadius: const BorderRadius.all(Radius.circular(8)),
+          child: Container(
+            width: 60,
+            height: 60,
+            alignment: Alignment.center,
+            child: Text(label, style: const TextStyle(fontSize: 12)),
+          ),
+        ),
+        const SizedBox(height: 4),
+        Text(
+          elevation.toStringAsFixed(1),
+          style: const TextStyle(fontSize: 10),
+        ),
+      ],
+    );
+  }
+}
+
+class _BorderBox extends StatelessWidget {
+  final String label;
+  final double borderWidth;
+
+  const _BorderBox({required this.label, required this.borderWidth});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 4),
+      child: Row(
+        children: [
+          SizedBox(
+            width: 80,
+            child: Text(
+              label,
+              style: const TextStyle(fontFamily: 'GoogleSansCode'),
+            ),
+          ),
+          Expanded(
+            child: Container(
+              height: 40,
+              decoration: BoxDecoration(
+                border: Border.all(
+                  color: Theme.of(context).colorScheme.primary,
+                  width: borderWidth,
+                ),
+                borderRadius: const BorderRadius.all(Radius.circular(4)),
+              ),
+            ),
+          ),
+          const SizedBox(width: 8),
+          Text('${borderWidth.toStringAsFixed(1)}px'),
+        ],
+      ),
+    );
+  }
+}
+
+class _AnimatedDurationBox extends StatefulWidget {
+  final String label;
+  final Duration duration;
+
+  const _AnimatedDurationBox({required this.label, required this.duration});
+
+  @override
+  State<_AnimatedDurationBox> createState() => _AnimatedDurationBoxState();
+}
+
+class _AnimatedDurationBoxState extends State<_AnimatedDurationBox> {
+  bool _atEnd = false;
+  bool _isAnimating = false;
+
+  void _playAnimation() async {
+    if (_isAnimating) return;
+    setState(() => _isAnimating = true);
+    setState(() => _atEnd = true);
+    await Future.delayed(widget.duration);
+    if (!mounted) return;
+    setState(() => _atEnd = false);
+    await Future.delayed(widget.duration);
+    if (!mounted) return;
+    setState(() => _isAnimating = false);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return Row(
+      children: [
+        SizedBox(
+          width: 90,
+          child: Text(
+            widget.label,
+            style: const TextStyle(fontFamily: 'GoogleSansCode', fontSize: 12),
+          ),
+        ),
+        Expanded(
+          child: Container(
+            height: 32,
+            decoration: BoxDecoration(
+              color: colorScheme.surfaceContainerHighest.withValues(alpha: 0.5),
+              borderRadius: BorderRadius.circular(6),
+            ),
+            child: AnimatedAlign(
+              duration: widget.duration,
+              curve: Curves.easeInOut,
+              alignment: _atEnd ? Alignment.centerRight : Alignment.centerLeft,
+              child: Container(
+                width: 60,
+                height: 28,
+                margin: const EdgeInsets.symmetric(horizontal: 2),
+                decoration: BoxDecoration(
+                  color: colorScheme.primary,
+                  borderRadius: BorderRadius.circular(4),
+                ),
+                alignment: Alignment.center,
+                child: Text(
+                  '${widget.duration.inMilliseconds}ms',
+                  style: TextStyle(
+                    fontSize: 11,
+                    color: colorScheme.onPrimary,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+        const SizedBox(width: 8),
+        IconButton(
+          onPressed: _isAnimating ? null : _playAnimation,
+          icon: Icon(
+            Icons.play_arrow_rounded,
+            color: _isAnimating ? colorScheme.outline : colorScheme.primary,
+          ),
+          iconSize: 24,
+          padding: EdgeInsets.zero,
+          constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
+        ),
+      ],
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/home_page.dart

@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/routes.dart';
+
+class HomePage extends StatelessWidget {
+  final VoidCallback onThemeToggle;
+
+  const HomePage({super.key, required this.onThemeToggle});
+
+  @override
+  Widget build(BuildContext context) {
+    return Title(
+      title: appTitle,
+      color: Theme.of(context).colorScheme.primary,
+      child: ListView(
+        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
+        children: [
+          Text(
+            appTitle,
+            style: Theme.of(context).textTheme.displaySmall?.copyWith(
+              fontWeight: FontWeight.bold,
+              color: Theme.of(context).colorScheme.onSurface,
+            ),
+          ),
+          const SizedBox(height: 12),
+          Text(
+            'A collection of Flutter components that are shared across all Immich projects',
+            style: Theme.of(context).textTheme.titleMedium?.copyWith(
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
+              fontWeight: FontWeight.w400,
+              height: 1.5,
+            ),
+          ),
+          const SizedBox(height: 48),
+          ...routesByCategory.entries.map((entry) {
+            if (entry.key == AppRouteCategory.root) {
+              return const SizedBox.shrink();
+            }
+
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  entry.key.displayName,
+                  style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                    fontWeight: FontWeight.w600,
+                    color: Theme.of(context).colorScheme.onSurface,
+                  ),
+                ),
+                const SizedBox(height: 16),
+                GridView.builder(
+                  shrinkWrap: true,
+                  physics: const NeverScrollableScrollPhysics(),
+                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                    crossAxisCount: 3,
+                    crossAxisSpacing: LayoutConstants.gridSpacing,
+                    mainAxisSpacing: LayoutConstants.gridSpacing,
+                    childAspectRatio: LayoutConstants.gridAspectRatio,
+                  ),
+                  itemCount: entry.value.length,
+                  itemBuilder: (context, index) {
+                    return _ComponentCard(route: entry.value[index]);
+                  },
+                ),
+                const SizedBox(height: 48),
+              ],
+            );
+          }),
+        ],
+      ),
+    );
+  }
+}
+
+class _ComponentCard extends StatelessWidget {
+  final AppRoute route;
+
+  const _ComponentCard({required this.route});
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: () => context.go(route.path),
+      borderRadius: const BorderRadius.all(Radius.circular(LayoutConstants.borderRadiusLarge)),
+      child: Card(
+        child: Padding(
+          padding: const EdgeInsets.all(20),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(route.icon, size: 32, color: Theme.of(context).colorScheme.primary),
+              const SizedBox(height: 16),
+              Text(
+                route.name,
+                style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                  fontWeight: FontWeight.w600,
+                  color: Theme.of(context).colorScheme.onSurface,
+                ),
+              ),
+
+              const SizedBox(height: 8),
+              Text(
+                route.description,
+                style: Theme.of(
+                  context,
+                ).textTheme.bodyMedium?.copyWith(color: Theme.of(context).colorScheme.onSurfaceVariant, height: 1.4),
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/router.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:showcase/pages/components/close_button_page.dart';
+import 'package:showcase/pages/components/form_page.dart';
+import 'package:showcase/pages/components/html_text_page.dart';
+import 'package:showcase/pages/components/icon_button_page.dart';
+import 'package:showcase/pages/components/password_input_page.dart';
+import 'package:showcase/pages/components/text_button_page.dart';
+import 'package:showcase/pages/components/text_input_page.dart';
+import 'package:showcase/pages/design_system/constants_page.dart';
+import 'package:showcase/pages/home_page.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/shell_layout.dart';
+
+class AppRouter {
+  static GoRouter createRouter(VoidCallback onThemeToggle) {
+    return GoRouter(
+      initialLocation: AppRoute.home.path,
+      routes: [
+        ShellRoute(
+          builder: (context, state, child) =>
+              ShellLayout(onThemeToggle: onThemeToggle, child: child),
+          routes: AppRoute.values
+              .map(
+                (route) => GoRoute(
+                  path: route.path,
+                  pageBuilder: (context, state) => NoTransitionPage(
+                    key: state.pageKey,
+                    child: switch (route) {
+                      AppRoute.home => HomePage(onThemeToggle: onThemeToggle),
+                      AppRoute.textButton => const TextButtonPage(),
+                      AppRoute.iconButton => const IconButtonPage(),
+                      AppRoute.closeButton => const CloseButtonPage(),
+                      AppRoute.textInput => const TextInputPage(),
+                      AppRoute.passwordInput => const PasswordInputPage(),
+                      AppRoute.form => const FormPage(),
+                      AppRoute.htmlText => const HtmlTextPage(),
+                      AppRoute.constants => const ConstantsPage(),
+                    },
+                  ),
+                ),
+              )
+              .toList(),
+        ),
+      ],
+    );
+  }
+}

mobile/packages/ui/showcase/lib/routes.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+
+enum AppRouteCategory {
+  root(''),
+  forms('Forms'),
+  buttons('Buttons'),
+  designSystem('Design System');
+
+  final String displayName;
+  const AppRouteCategory(this.displayName);
+}
+
+enum AppRoute {
+  home(
+    name: 'Home',
+    description: 'Home page',
+    path: '/',
+    category: AppRouteCategory.root,
+    icon: Icons.home_outlined,
+  ),
+  textButton(
+    name: 'Text Button',
+    description: 'Versatile button with filled and ghost variants',
+    path: '/text-button',
+    category: AppRouteCategory.buttons,
+    icon: Icons.smart_button_rounded,
+  ),
+  iconButton(
+    name: 'Icon Button',
+    description: 'Icon-only button with customizable styling',
+    path: '/icon-button',
+    category: AppRouteCategory.buttons,
+    icon: Icons.radio_button_unchecked_rounded,
+  ),
+  closeButton(
+    name: 'Close Button',
+    description: 'Pre-configured close button for dialogs',
+    path: '/close-button',
+    category: AppRouteCategory.buttons,
+    icon: Icons.close_rounded,
+  ),
+  textInput(
+    name: 'Text Input',
+    description: 'Text field with validation support',
+    path: '/text-input',
+    category: AppRouteCategory.forms,
+    icon: Icons.text_fields_outlined,
+  ),
+  passwordInput(
+    name: 'Password Input',
+    description: 'Password field with visibility toggle',
+    path: '/password-input',
+    category: AppRouteCategory.forms,
+    icon: Icons.password_outlined,
+  ),
+  form(
+    name: 'Form',
+    description: 'Form container with built-in validation',
+    path: '/form',
+    category: AppRouteCategory.forms,
+    icon: Icons.description_outlined,
+  ),
+  htmlText(
+    name: 'Html Text',
+    description: 'Render text with HTML formatting',
+    path: '/html-text',
+    category: AppRouteCategory.forms,
+    icon: Icons.code_rounded,
+  ),
+  constants(
+    name: 'Constants',
+    description: 'Spacing, colors, typography, and more',
+    path: '/constants',
+    category: AppRouteCategory.designSystem,
+    icon: Icons.palette_outlined,
+  );
+
+  final String name;
+  final String description;
+  final String path;
+  final AppRouteCategory category;
+  final IconData icon;
+
+  const AppRoute({
+    required this.name,
+    required this.description,
+    required this.path,
+    required this.category,
+    required this.icon,
+  });
+}
+
+final routesByCategory = AppRoute.values
+    .fold<Map<AppRouteCategory, List<AppRoute>>>({}, (map, route) {
+      map.putIfAbsent(route.category, () => []).add(route);
+      return map;
+    });

mobile/packages/ui/showcase/lib/widgets/component_examples.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+
+class ComponentExamples extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final List<Widget> examples;
+  final bool expand;
+
+  const ComponentExamples({
+    super.key,
+    required this.title,
+    this.subtitle,
+    required this.examples,
+    this.expand = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(10, 24, 24, 24),
+      child: CustomScrollView(
+        slivers: [
+          SliverToBoxAdapter(
+            child: _PageHeader(title: title, subtitle: subtitle),
+          ),
+          const SliverPadding(padding: EdgeInsets.only(top: 24)),
+          if (expand)
+            SliverList.builder(
+              itemCount: examples.length,
+              itemBuilder: (context, index) => examples[index],
+            )
+          else
+            SliverLayoutBuilder(
+              builder: (context, constraints) {
+                return SliverList.builder(
+                  itemCount: examples.length,
+                  itemBuilder: (context, index) => Align(
+                    alignment: Alignment.centerLeft,
+                    child: ConstrainedBox(
+                      constraints: BoxConstraints(
+                        minWidth: constraints.crossAxisExtent * 0.6,
+                        maxWidth: constraints.crossAxisExtent,
+                      ),
+                      child: IntrinsicWidth(child: examples[index]),
+                    ),
+                  ),
+                );
+              },
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _PageHeader extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+
+  const _PageHeader({required this.title, this.subtitle});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          title,
+          style: Theme.of(
+            context,
+          ).textTheme.headlineLarge?.copyWith(fontWeight: FontWeight.bold),
+        ),
+        if (subtitle != null) ...[
+          const SizedBox(height: 8),
+          Text(
+            subtitle!,
+            style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
+            ),
+          ),
+        ],
+      ],
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/example_card.dart

@@ -0,0 +1,237 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:showcase/constants.dart';
+import 'package:syntax_highlight/syntax_highlight.dart';
+
+late final Highlighter _codeHighlighter;
+
+Future<void> initializeCodeHighlighter() async {
+  await Highlighter.initialize(['dart']);
+  final darkTheme = await HighlighterTheme.loadFromAssets([
+    'assets/themes/github_dark.json',
+  ], const TextStyle(color: Color(0xFFe1e4e8)));
+
+  _codeHighlighter = Highlighter(language: 'dart', theme: darkTheme);
+}
+
+class ExampleCard extends StatefulWidget {
+  final String title;
+  final String? description;
+  final Widget preview;
+  final String? code;
+
+  const ExampleCard({
+    super.key,
+    required this.title,
+    this.description,
+    required this.preview,
+    this.code,
+  });
+
+  @override
+  State<ExampleCard> createState() => _ExampleCardState();
+}
+
+class _ExampleCardState extends State<ExampleCard> {
+  bool _showPreview = true;
+  String? code;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.code != null) {
+      rootBundle
+          .loadString('lib/pages/components/examples/${widget.code!}')
+          .then((value) {
+            setState(() {
+              code = value;
+            });
+          });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      elevation: 1,
+      margin: const EdgeInsets.only(bottom: 16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Row(
+              children: [
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        widget.title,
+                        style: Theme.of(context).textTheme.titleMedium
+                            ?.copyWith(fontWeight: FontWeight.bold),
+                      ),
+                      const SizedBox(height: 4),
+                      if (widget.description != null)
+                        Text(
+                          widget.description!,
+                          style: Theme.of(context).textTheme.bodyMedium
+                              ?.copyWith(
+                                color: Theme.of(
+                                  context,
+                                ).colorScheme.onSurfaceVariant,
+                              ),
+                        ),
+                    ],
+                  ),
+                ),
+                if (code != null) ...[
+                  const SizedBox(width: 16),
+                  Row(
+                    children: [
+                      _ToggleButton(
+                        icon: Icons.visibility_rounded,
+                        label: 'Preview',
+                        isSelected: _showPreview,
+                        onTap: () => setState(() => _showPreview = true),
+                      ),
+                      const SizedBox(width: 8),
+                      _ToggleButton(
+                        icon: Icons.code_rounded,
+                        label: 'Code',
+                        isSelected: !_showPreview,
+                        onTap: () => setState(() => _showPreview = false),
+                      ),
+                    ],
+                  ),
+                ],
+              ],
+            ),
+          ),
+          const Divider(height: 1),
+          if (_showPreview)
+            Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: SizedBox(width: double.infinity, child: widget.preview),
+            )
+          else
+            Container(
+              width: double.infinity,
+              decoration: const BoxDecoration(
+                color: Color(0xFF24292e),
+                borderRadius: BorderRadius.only(
+                  bottomLeft: Radius.circular(
+                    LayoutConstants.borderRadiusMedium,
+                  ),
+                  bottomRight: Radius.circular(
+                    LayoutConstants.borderRadiusMedium,
+                  ),
+                ),
+              ),
+              child: _CodeCard(code: code!),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _ToggleButton extends StatelessWidget {
+  final IconData icon;
+  final String label;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const _ToggleButton({
+    required this.icon,
+    required this.label,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      borderRadius: const BorderRadius.all(Radius.circular(24)),
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+        decoration: BoxDecoration(
+          color: isSelected
+              ? Theme.of(context).colorScheme.primary.withValues(alpha: 0.7)
+              : Theme.of(context).colorScheme.primary,
+          borderRadius: const BorderRadius.all(Radius.circular(24)),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              icon,
+              size: 16,
+              color: Theme.of(context).colorScheme.onPrimary,
+            ),
+            const SizedBox(width: 6),
+            Text(
+              label,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                color: Theme.of(context).colorScheme.onPrimary,
+                fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _CodeCard extends StatelessWidget {
+  final String code;
+
+  const _CodeCard({required this.code});
+
+  @override
+  Widget build(BuildContext context) {
+    final lines = code.split('\n');
+    final lineNumberColor = Colors.white.withValues(alpha: 0.4);
+
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Padding(
+        padding: const EdgeInsets.only(left: 12, top: 8, bottom: 8),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: List.generate(
+                lines.length,
+                (index) => SizedBox(
+                  height: 20,
+                  child: Text(
+                    '${index + 1}',
+                    style: TextStyle(
+                      fontFamily: 'GoogleSansCode',
+                      fontSize: 13,
+                      color: lineNumberColor,
+                      height: 1.5,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(width: 16),
+            SelectableText.rich(
+              _codeHighlighter.highlight(code),
+              style: const TextStyle(
+                fontFamily: 'GoogleSansCode',
+                fontSize: 13,
+                height: 1.54,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/page_title.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class PageTitle extends StatelessWidget {
+  final String title;
+  final Widget child;
+
+  const PageTitle({super.key, required this.title, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Title(
+      title: '$title | @immich/ui',
+      color: Theme.of(context).colorScheme.primary,
+      child: child,
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/shell_layout.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/widgets/sidebar_navigation.dart';
+
+class ShellLayout extends StatelessWidget {
+  final Widget child;
+  final VoidCallback onThemeToggle;
+
+  const ShellLayout({
+    super.key,
+    required this.child,
+    required this.onThemeToggle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Image.asset('assets/immich_logo.png', height: 32, width: 32),
+            const SizedBox(width: 8),
+            Image.asset(
+              isDark
+                  ? 'assets/immich-text-dark.png'
+                  : 'assets/immich-text-light.png',
+              height: 24,
+              filterQuality: FilterQuality.none,
+              isAntiAlias: true,
+            ),
+          ],
+        ),
+        actions: [
+          IconButton(
+            icon: Icon(
+              isDark ? Icons.light_mode_outlined : Icons.dark_mode_outlined,
+              size: LayoutConstants.iconSizeLarge,
+            ),
+            onPressed: onThemeToggle,
+            tooltip: 'Toggle theme',
+          ),
+        ],
+        shape: Border(
+          bottom: BorderSide(color: Theme.of(context).dividerColor, width: 1),
+        ),
+      ),
+      body: Row(
+        children: [
+          const SidebarNavigation(),
+          const VerticalDivider(),
+          Expanded(child: child),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/sidebar_navigation.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/routes.dart';
+
+class SidebarNavigation extends StatelessWidget {
+  const SidebarNavigation({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: LayoutConstants.sidebarWidth,
+      decoration: BoxDecoration(color: Theme.of(context).colorScheme.surface),
+      child: ListView(
+        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
+        children: [
+          ...routesByCategory.entries.expand((entry) {
+            final category = entry.key;
+            final routes = entry.value;
+            return [
+              if (category != AppRouteCategory.root) _CategoryHeader(category),
+              ...routes.map((route) => _NavItem(route)),
+              const SizedBox(height: 24),
+            ];
+          }),
+        ],
+      ),
+    );
+  }
+}
+
+class _CategoryHeader extends StatelessWidget {
+  final AppRouteCategory category;
+
+  const _CategoryHeader(this.category);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 12, top: 8, bottom: 8),
+      child: Text(
+        category.displayName,
+        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+          color: Theme.of(context).colorScheme.onSurfaceVariant,
+          fontWeight: FontWeight.w600,
+          letterSpacing: 0.5,
+        ),
+      ),
+    );
+  }
+}
+
+class _NavItem extends StatelessWidget {
+  final AppRoute route;
+
+  const _NavItem(this.route);
+
+  @override
+  Widget build(BuildContext context) {
+    final currentRoute = GoRouterState.of(context).uri.toString();
+    final isSelected = currentRoute == route.path;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 4),
+      child: Material(
+        color: Colors.transparent,
+        child: InkWell(
+          onTap: () {
+            context.go(route.path);
+          },
+          borderRadius: BorderRadius.circular(
+            LayoutConstants.borderRadiusMedium,
+          ),
+          child: Container(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+            decoration: BoxDecoration(
+              color: isSelected
+                  ? (isDark
+                        ? Colors.white.withValues(alpha: 0.1)
+                        : Theme.of(
+                            context,
+                          ).colorScheme.primaryContainer.withValues(alpha: 0.5))
+                  : Colors.transparent,
+              borderRadius: BorderRadius.circular(
+                LayoutConstants.borderRadiusMedium,
+              ),
+            ),
+            child: Row(
+              children: [
+                Icon(
+                  route.icon,
+                  size: 20,
+                  color: isSelected
+                      ? Theme.of(context).colorScheme.primary
+                      : Theme.of(context).colorScheme.onSurfaceVariant,
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: Text(
+                    route.name,
+                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                      color: isSelected
+                          ? Theme.of(context).colorScheme.primary
+                          : Theme.of(context).colorScheme.onSurface,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/pubspec.lock

@@ -0,0 +1,393 @@
+# Generated by pub
+# See https://dart.dev/tools/pub/glossary#lockfile
+packages:
+  async:
+    dependency: transitive
+    description:
+      name: async
+      sha256: "758e6d74e971c3e5aceb4110bfd6698efc7f501675bcfe0c775459a8140750eb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.13.0"
+  boolean_selector:
+    dependency: transitive
+    description:
+      name: boolean_selector
+      sha256: "8aab1771e1243a5063b8b0ff68042d67334e3feab9e95b9490f9a6ebf73b42ea"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
+  characters:
+    dependency: transitive
+    description:
+      name: characters
+      sha256: f71061c654a3380576a52b451dd5532377954cf9dbd272a78fc8479606670803
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      sha256: fddb70d9b5277016c77a80201021d40a2247104d9f4aa7bab7157b7e3f05b84b
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.2"
+  collection:
+    dependency: transitive
+    description:
+      name: collection
+      sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.19.1"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      sha256: c8ea0233063ba03258fbcf2ca4d6dadfefe14f02fab57702265467a19f27fadf
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.7"
+  csslib:
+    dependency: transitive
+    description:
+      name: csslib
+      sha256: "09bad715f418841f976c77db72d5398dc1253c21fb9c0c7f0b0b985860b2d58e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.2"
+  device_info_plus:
+    dependency: transitive
+    description:
+      name: device_info_plus
+      sha256: "98f28b42168cc509abc92f88518882fd58061ea372d7999aecc424345c7bff6a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "11.5.0"
+  device_info_plus_platform_interface:
+    dependency: transitive
+    description:
+      name: device_info_plus_platform_interface
+      sha256: e1ea89119e34903dca74b883d0dd78eb762814f97fb6c76f35e9ff74d261a18f
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.3"
+  fake_async:
+    dependency: transitive
+    description:
+      name: fake_async
+      sha256: "5368f224a74523e8d2e7399ea1638b37aecfca824a3cc4dfdf77bf1fa905ac44"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.3"
+  ffi:
+    dependency: transitive
+    description:
+      name: ffi
+      sha256: d07d37192dbf97461359c1518788f203b0c9102cfd2c35a716b823741219542c
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.5"
+  file:
+    dependency: transitive
+    description:
+      name: file
+      sha256: a3b4f84adafef897088c160faf7dfffb7696046cb13ae90b508c2cbc95d3b8d4
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.1"
+  fixnum:
+    dependency: transitive
+    description:
+      name: fixnum
+      sha256: b6dc7065e46c974bc7c5f143080a6764ec7a4be6da1285ececdc37be96de53be
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
+  flutter:
+    dependency: "direct main"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  flutter_lints:
+    dependency: "direct dev"
+    description:
+      name: flutter_lints
+      sha256: "3105dc8492f6183fb076ccf1f351ac3d60564bff92e20bfc4af9cc1651f4e7e1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.0"
+  flutter_test:
+    dependency: "direct dev"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  go_router:
+    dependency: "direct main"
+    description:
+      name: go_router
+      sha256: eff94d2a6fc79fa8b811dde79c7549808c2346037ee107a1121b4a644c745f2a
+      url: "https://pub.dev"
+    source: hosted
+    version: "17.0.1"
+  html:
+    dependency: transitive
+    description:
+      name: html
+      sha256: "6d1264f2dffa1b1101c25a91dff0dc2daee4c18e87cd8538729773c073dbf602"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.15.6"
+  immich_ui:
+    dependency: "direct main"
+    description:
+      path: ".."
+      relative: true
+    source: path
+    version: "0.0.0"
+  irondash_engine_context:
+    dependency: transitive
+    description:
+      name: irondash_engine_context
+      sha256: "2bb0bc13dfda9f5aaef8dde06ecc5feb1379f5bb387d59716d799554f3f305d7"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.5"
+  irondash_message_channel:
+    dependency: transitive
+    description:
+      name: irondash_message_channel
+      sha256: b4101669776509c76133b8917ab8cfc704d3ad92a8c450b92934dd8884a2f060
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.0"
+  leak_tracker:
+    dependency: transitive
+    description:
+      name: leak_tracker
+      sha256: "33e2e26bdd85a0112ec15400c8cbffea70d0f9c3407491f672a2fad47915e2de"
+      url: "https://pub.dev"
+    source: hosted
+    version: "11.0.2"
+  leak_tracker_flutter_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_flutter_testing
+      sha256: "1dbc140bb5a23c75ea9c4811222756104fbcd1a27173f0c34ca01e16bea473c1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.10"
+  leak_tracker_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_testing
+      sha256: "8d5a2d49f4a66b49744b23b018848400d23e54caf9463f4eb20df3eb8acb2eb1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.2"
+  lints:
+    dependency: transitive
+    description:
+      name: lints
+      sha256: "12f842a479589fea194fe5c5a3095abc7be0c1f2ddfa9a0e76aed1dbd26a87df"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.1.0"
+  logging:
+    dependency: transitive
+    description:
+      name: logging
+      sha256: c8245ada5f1717ed44271ed1c26b8ce85ca3228fd2ffdb75468ab01979309d61
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.0"
+  matcher:
+    dependency: transitive
+    description:
+      name: matcher
+      sha256: dc58c723c3c24bf8d3e2d3ad3f2f9d7bd9cf43ec6feaa64181775e60190153f2
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.12.17"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.11.1"
+  meta:
+    dependency: transitive
+    description:
+      name: meta
+      sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.16.0"
+  path:
+    dependency: transitive
+    description:
+      name: path
+      sha256: "75cca69d1490965be98c73ceaea117e8a04dd21217b37b292c9ddbec0d955bc5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.9.1"
+  pixel_snap:
+    dependency: transitive
+    description:
+      name: pixel_snap
+      sha256: "677410ea37b07cd37ecb6d5e6c0d8d7615a7cf3bd92ba406fd1ac57e937d1fb0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.5"
+  plugin_platform_interface:
+    dependency: transitive
+    description:
+      name: plugin_platform_interface
+      sha256: "4820fbfdb9478b1ebae27888254d445073732dae3d6ea81f0b7e06d5dedc3f02"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.8"
+  sky_engine:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  source_span:
+    dependency: transitive
+    description:
+      name: source_span
+      sha256: "254ee5351d6cb365c859e20ee823c3bb479bf4a293c22d17a9f1bf144ce86f7c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.10.1"
+  stack_trace:
+    dependency: transitive
+    description:
+      name: stack_trace
+      sha256: "8b27215b45d22309b5cddda1aa2b19bdfec9df0e765f2de506401c071d38d1b1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.12.1"
+  stream_channel:
+    dependency: transitive
+    description:
+      name: stream_channel
+      sha256: "969e04c80b8bcdf826f8f16579c7b14d780458bd97f56d107d3950fdbeef059d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
+  string_scanner:
+    dependency: transitive
+    description:
+      name: string_scanner
+      sha256: "921cd31725b72fe181906c6a94d987c78e3b98c2e205b397ea399d4054872b43"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.1"
+  super_clipboard:
+    dependency: transitive
+    description:
+      name: super_clipboard
+      sha256: e73f3bb7e66cc9260efa1dc507f979138e7e106c3521e2dda2d0311f6d728a16
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.9.1"
+  super_native_extensions:
+    dependency: transitive
+    description:
+      name: super_native_extensions
+      sha256: b9611dcb68f1047d6f3ef11af25e4e68a21b1a705bbcc3eb8cb4e9f5c3148569
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.9.1"
+  syntax_highlight:
+    dependency: "direct main"
+    description:
+      name: syntax_highlight
+      sha256: "4d3ba40658cadba6ba55d697f29f00b43538ebb6eb4a0ca0e895c568eaced138"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.0"
+  term_glyph:
+    dependency: transitive
+    description:
+      name: term_glyph
+      sha256: "7f554798625ea768a7518313e58f83891c7f5024f88e46e7182a4558850a4b8e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.2"
+  test_api:
+    dependency: transitive
+    description:
+      name: test_api
+      sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.6"
+  typed_data:
+    dependency: transitive
+    description:
+      name: typed_data
+      sha256: f9049c039ebfeb4cf7a7104a675823cd72dba8297f264b6637062516699fa006
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
+  uuid:
+    dependency: transitive
+    description:
+      name: uuid
+      sha256: a11b666489b1954e01d992f3d601b1804a33937b5a8fe677bd26b8a9f96f96e8
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.2"
+  vector_math:
+    dependency: transitive
+    description:
+      name: vector_math
+      sha256: d530bd74fea330e6e364cda7a85019c434070188383e1cd8d9777ee586914c5b
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
+  vm_service:
+    dependency: transitive
+    description:
+      name: vm_service
+      sha256: "45caa6c5917fa127b5dbcfbd1fa60b14e583afdc08bfc96dda38886ca252eb60"
+      url: "https://pub.dev"
+    source: hosted
+    version: "15.0.2"
+  web:
+    dependency: transitive
+    description:
+      name: web
+      sha256: "868d88a33d8a87b18ffc05f9f030ba328ffefba92d6c127917a2ba740f9cfe4a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
+  win32:
+    dependency: transitive
+    description:
+      name: win32
+      sha256: d7cb55e04cd34096cd3a79b3330245f54cb96a370a1c27adb3c84b917de8b08e
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.15.0"
+  win32_registry:
+    dependency: transitive
+    description:
+      name: win32_registry
+      sha256: "6f1b564492d0147b330dd794fee8f512cec4977957f310f9951b5f9d83618dae"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
+sdks:
+  dart: ">=3.9.2 <4.0.0"
+  flutter: ">=3.35.0"

mobile/packages/ui/showcase/pubspec.yaml

@@ -0,0 +1,47 @@
+name: showcase
+publish_to: 'none'
+
+version: 1.0.0+1
+
+environment:
+  sdk: ^3.9.2
+
+dependencies:
+  flutter:
+    sdk: flutter
+  immich_ui:
+    path: ../
+  go_router: ^17.0.1
+  syntax_highlight: ^0.5.0
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^6.0.0
+
+flutter:
+  uses-material-design: true
+  assets:
+    - assets/
+    - assets/themes/
+    - lib/pages/components/examples/
+
+  fonts:
+    - family: GoogleSans
+      fonts:
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Regular.ttf
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Italic.ttf
+          style: italic
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Medium.ttf
+          weight: 500
+        - asset: ../../../fonts/GoogleSans/GoogleSans-SemiBold.ttf
+          weight: 600
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Bold.ttf
+          weight: 700
+    - family: GoogleSansCode
+      fonts:
+        - asset: ../../../fonts/GoogleSansCode/GoogleSansCode-Regular.ttf
+        - asset: ../../../fonts/GoogleSansCode/GoogleSansCode-Medium.ttf
+          weight: 500
+        - asset: ../../../fonts/GoogleSansCode/GoogleSansCode-SemiBold.ttf
+          weight: 600

mobile/packages/ui/showcase/web/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="Immich UI component library showcase and documentation">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="@immich/ui">
+  <link rel="apple-touch-icon" href="icons/apple-icon-180.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
+
+  <title>@immich/ui</title>
+  <link rel="manifest" href="manifest.json">
+</head>
+<body>
+  <script src="flutter_bootstrap.js" async></script>
+</body>
+</html>

mobile/packages/ui/showcase/web/manifest.json

@@ -0,0 +1,37 @@
+{
+    "name": "@immich/ui Showcase",
+    "short_name": "@immich/ui",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#FCFCFD",
+    "theme_color": "#4250AF",
+    "description": "Immich UI component library showcase and documentation",
+    "orientation": "landscape",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}

mobile/packages/ui/test/html_test.dart

@@ -0,0 +1,266 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:immich_ui/src/components/html_text.dart';
+
+import 'test_utils.dart';
+
+/// Text.rich creates a nested structure: root -> wrapper -> actual children
+List<InlineSpan> _getContentSpans(WidgetTester tester) {
+  final richText = tester.widget<RichText>(find.byType(RichText));
+  final root = richText.text as TextSpan;
+
+  if (root.children?.isNotEmpty ?? false) {
+    final wrapper = root.children!.first;
+    if (wrapper is TextSpan && wrapper.children != null) {
+      return wrapper.children!;
+    }
+  }
+  return [];
+}
+
+TextSpan _findSpan(List<InlineSpan> spans, String text) {
+  return spans.firstWhere(
+    (span) => span is TextSpan && span.text == text,
+    orElse: () => throw StateError('No span found with text: "$text"'),
+  ) as TextSpan;
+}
+
+String _concatenateText(List<InlineSpan> spans) {
+  return spans.whereType<TextSpan>().map((s) => s.text ?? '').join();
+}
+
+void _triggerTap(TextSpan span) {
+  final recognizer = span.recognizer;
+  if (recognizer is TapGestureRecognizer) {
+    recognizer.onTap?.call();
+  }
+}
+
+void main() {
+  group('ImmichHtmlText', () {
+    testWidgets('renders plain text without HTML tags', (tester) async {
+      await tester.pumpTestWidget(
+        const ImmichHtmlText('This is plain text'),
+      );
+
+      expect(find.text('This is plain text'), findsOneWidget);
+    });
+
+    testWidgets('handles mixed content with bold and links', (tester) async {
+      await tester.pumpTestWidget(
+        ImmichHtmlText(
+          'This is an <b>example</b> of <b><link>HTML text</link></b> with <b>bold</b>.',
+          linkHandlers: {'link': () {}},
+        ),
+      );
+
+      final spans = _getContentSpans(tester);
+
+      final exampleSpan = _findSpan(spans, 'example');
+      expect(exampleSpan.style?.fontWeight, FontWeight.bold);
+
+      final boldSpan = _findSpan(spans, 'bold');
+      expect(boldSpan.style?.fontWeight, FontWeight.bold);
+
+      final linkSpan = _findSpan(spans, 'HTML text');
+      expect(linkSpan.style?.decoration, TextDecoration.underline);
+      expect(linkSpan.style?.fontWeight, FontWeight.bold);
+      expect(linkSpan.recognizer, isA<TapGestureRecognizer>());
+
+      expect(_concatenateText(spans), 'This is an example of HTML text with bold.');
+    });
+
+    testWidgets('applies text style properties', (tester) async {
+      await tester.pumpTestWidget(
+        const ImmichHtmlText(
+          'Test text',
+          style: TextStyle(
+            fontSize: 16,
+            color: Colors.purple,
+          ),
+          textAlign: TextAlign.center,
+          maxLines: 2,
+          overflow: TextOverflow.ellipsis,
+        ),
+      );
+
+      final text = tester.widget<Text>(find.byType(Text));
+      final richText = text.textSpan as TextSpan;
+
+      expect(richText.style?.fontSize, 16);
+      expect(richText.style?.color, Colors.purple);
+      expect(text.textAlign, TextAlign.center);
+      expect(text.maxLines, 2);
+      expect(text.overflow, TextOverflow.ellipsis);
+    });
+
+    testWidgets('handles text with special characters', (tester) async {
+      await tester.pumpTestWidget(
+        const ImmichHtmlText('Text with & < > " \' characters'),
+      );
+
+      expect(find.byType(RichText), findsOneWidget);
+
+      final spans = _getContentSpans(tester);
+      expect(_concatenateText(spans), 'Text with & < > " \' characters');
+    });
+
+    group('bold', () {
+      testWidgets('renders bold text with <b> tag', (tester) async {
+        await tester.pumpTestWidget(
+          const ImmichHtmlText('This is <b>bold</b> text'),
+        );
+
+        final spans = _getContentSpans(tester);
+        final boldSpan = _findSpan(spans, 'bold');
+
+        expect(boldSpan.style?.fontWeight, FontWeight.bold);
+        expect(_concatenateText(spans), 'This is bold text');
+      });
+
+      testWidgets('renders bold text with <strong> tag', (tester) async {
+        await tester.pumpTestWidget(
+          const ImmichHtmlText('This is <strong>strong</strong> text'),
+        );
+
+        final spans = _getContentSpans(tester);
+        final strongSpan = _findSpan(spans, 'strong');
+
+        expect(strongSpan.style?.fontWeight, FontWeight.bold);
+      });
+
+      testWidgets('handles nested bold tags', (tester) async {
+        await tester.pumpTestWidget(
+          const ImmichHtmlText('Text with <b>bold and <strong>nested</strong></b>'),
+        );
+
+        final spans = _getContentSpans(tester);
+
+        final nestedSpan = _findSpan(spans, 'nested');
+        expect(nestedSpan.style?.fontWeight, FontWeight.bold);
+
+        final boldSpan = _findSpan(spans, 'bold and ');
+        expect(boldSpan.style?.fontWeight, FontWeight.bold);
+
+        expect(_concatenateText(spans), 'Text with bold and nested');
+      });
+    });
+
+    group('link', () {
+      testWidgets('renders link text with <link> tag', (tester) async {
+        await tester.pumpTestWidget(
+          ImmichHtmlText(
+            'This is a <link>custom link</link> text',
+            linkHandlers: {'link': () {}},
+          ),
+        );
+
+        final spans = _getContentSpans(tester);
+        final linkSpan = _findSpan(spans, 'custom link');
+
+        expect(linkSpan.style?.decoration, TextDecoration.underline);
+        expect(linkSpan.recognizer, isA<TapGestureRecognizer>());
+      });
+
+      testWidgets('handles link tap with callback', (tester) async {
+        var linkTapped = false;
+
+        await tester.pumpTestWidget(
+          ImmichHtmlText(
+            'Tap <link>here</link>',
+            linkHandlers: {'link': () => linkTapped = true},
+          ),
+        );
+
+        final spans = _getContentSpans(tester);
+        final linkSpan = _findSpan(spans, 'here');
+        expect(linkSpan.recognizer, isA<TapGestureRecognizer>());
+
+        _triggerTap(linkSpan);
+        expect(linkTapped, isTrue);
+      });
+
+      testWidgets('handles custom prefixed link tags', (tester) async {
+        await tester.pumpTestWidget(
+          ImmichHtmlText(
+            'Refer to <docs-link>docs</docs-link> and <other-link>other</other-link>',
+            linkHandlers: {
+              'docs-link': () {},
+              'other-link': () {},
+            },
+          ),
+        );
+
+        final spans = _getContentSpans(tester);
+        final docsSpan = _findSpan(spans, 'docs');
+        final otherSpan = _findSpan(spans, 'other');
+
+        expect(docsSpan.style?.decoration, TextDecoration.underline);
+        expect(otherSpan.style?.decoration, TextDecoration.underline);
+      });
+
+      testWidgets('applies custom link style', (tester) async {
+        const customLinkStyle = TextStyle(
+          color: Colors.red,
+          decoration: TextDecoration.overline,
+        );
+
+        await tester.pumpTestWidget(
+          ImmichHtmlText(
+            'Click <link>here</link>',
+            linkStyle: customLinkStyle,
+            linkHandlers: {'link': () {}},
+          ),
+        );
+
+        final spans = _getContentSpans(tester);
+        final linkSpan = _findSpan(spans, 'here');
+
+        expect(linkSpan.style?.color, Colors.red);
+        expect(linkSpan.style?.decoration, TextDecoration.overline);
+      });
+
+      testWidgets('link without handler renders but is not tappable', (tester) async {
+        await tester.pumpTestWidget(
+          ImmichHtmlText(
+            'Link without handler: <link>click me</link>',
+            linkHandlers: {'other-link': () {}},
+          ),
+        );
+
+        final spans = _getContentSpans(tester);
+        final linkSpan = _findSpan(spans, 'click me');
+
+        expect(linkSpan.style?.decoration, TextDecoration.underline);
+        expect(linkSpan.recognizer, isNull);
+      });
+
+      testWidgets('handles multiple links with different handlers', (tester) async {
+        var firstLinkTapped = false;
+        var secondLinkTapped = false;
+
+        await tester.pumpTestWidget(
+          ImmichHtmlText(
+            'Go to <docs-link>docs</docs-link> or <help-link>help</help-link>',
+            linkHandlers: {
+              'docs-link': () => firstLinkTapped = true,
+              'help-link': () => secondLinkTapped = true,
+            },
+          ),
+        );
+
+        final spans = _getContentSpans(tester);
+        final docsSpan = _findSpan(spans, 'docs');
+        final helpSpan = _findSpan(spans, 'help');
+
+        _triggerTap(docsSpan);
+        expect(firstLinkTapped, isTrue);
+        expect(secondLinkTapped, isFalse);
+
+        _triggerTap(helpSpan);
+        expect(secondLinkTapped, isTrue);
+      });
+    });
+  });
+}