Merge branch 'main' into push-qolzzzzxrvvn

* feat(web): search type selection dropdown

* chore: implement suggestions

* lint

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

docs/docs/administration/backup-and-restore.md

@@ -41,7 +41,7 @@ By default, Immich will keep the last 14 database dumps and create a new dump ev
 
 #### Trigger Dump
 
-You are able to trigger a database dump in the [admin job status page](http://my.immich.app/admin/jobs-status).
+You are able to trigger a database dump in the [admin job status page](http://my.immich.app/admin/queues).
 Visit the page, open the "Create job" modal from the top right, select "Create Database Dump" and click "Confirm".
 A job will run and trigger a dump, you can verify this worked correctly by checking the logs or the `backups/` folder.
 This dumps will count towards the last `X` dumps that will be kept based on your settings.

docs/docs/administration/reverse-proxy.md

@@ -21,6 +21,9 @@ server {
     # allow large file uploads
     client_max_body_size 50000M;
 
+    # disable buffering uploads to prevent OOM on reverse proxy server and make uploads twice as fast (no pause)
+    proxy_request_buffering off;
+
     # Set headers
     proxy_set_header Host              $host;
     proxy_set_header X-Real-IP         $remote_addr;

docs/docs/developer/setup.md

@@ -48,7 +48,6 @@ You can access the web from `http://your-machine-ip:3000` or `http://localhost:3
 **Notes:**
 
 - The "web" development container runs with uid 1000. If that uid does not have read/write permissions on the mounted volumes, you may encounter errors
-- In case of rootless docker setup, you need to use root within the container, otherwise you will encounter read/write permission related errors, see comments in `docker/docker-compose.dev.yml`.
 
 #### Connect web to a remote backend
 

docs/docs/features/searching.md

@@ -1222,4 +1222,4 @@ Feel free to make a feature request if there's a model you want to use that we d
 [huggingface-clip]: https://huggingface.co/collections/immich-app/clip-654eaefb077425890874cd07
 [huggingface-multilingual-clip]: https://huggingface.co/collections/immich-app/multilingual-clip-654eb08c2382f591eeb8c2a7
 [smart-search-settings]: https://my.immich.app/admin/system-settings?isOpen=machine-learning+smart-search
-[job-status-page]: https://my.immich.app/admin/jobs-status
+[job-status-page]: https://my.immich.app/admin/queues

docs/docs/guides/remote-machine-learning.md

@@ -53,7 +53,7 @@ Version mismatches between both hosts may cause bugs and instability, so remembe
 
 Adding a new URL to the settings is recommended over replacing the existing URL. This is because it will allow machine learning tasks to be processed successfully when the remote server is down by falling back to the local machine learning container. If you do not want machine learning tasks to be processed locally when the remote server is not available, you can instead replace the existing URL and only provide the remote container's URL. If doing this, you can remove the `immich-machine-learning` section of the local `docker-compose.yml` file to save resources, as this service will never be used.
 
-Do note that this will mean that Smart Search and Face Detection jobs will fail to be processed when the remote instance is not available. This in turn means that tasks dependent on these features—Duplicate Detection and Facial Recognition—will not run for affected assets. If this occurs, you must manually click the _Missing_ button next to Smart Search and Face Detection in the [Job Status](http://my.immich.app/admin/jobs-status) page for the jobs to be retried.
+Do note that this will mean that Smart Search and Face Detection jobs will fail to be processed when the remote instance is not available. This in turn means that tasks dependent on these features—Duplicate Detection and Facial Recognition—will not run for affected assets. If this occurs, you must manually click the _Missing_ button next to Smart Search and Face Detection in the [Job Status](http://my.immich.app/admin/queues) page for the jobs to be retried.
 
 ## Load balancing
 

i18n/en.json

@@ -7,6 +7,7 @@
   "action_common_update": "Update",
   "actions": "Actions",
   "active": "Active",
+  "active_count": "Active: {count}",
   "activity": "Activity",
   "activity_changed": "Activity is {enabled, select, true {enabled} other {disabled}}",
   "add": "Add",
@@ -111,10 +112,9 @@
     "job_not_concurrency_safe": "This job is not concurrency-safe.",
     "job_settings": "Job Settings",
     "job_settings_description": "Manage job concurrency",
-    "job_status": "Job Status",
     "jobs_delayed": "{jobCount, plural, other {# delayed}}",
     "jobs_failed": "{jobCount, plural, other {# failed}}",
-    "jobs_page_description": "Admin jobs page",
+    "jobs_over_time": "Jobs over time",
     "library_created": "Created library: {library}",
     "library_deleted": "Library deleted",
     "library_details": "Library details",
@@ -277,10 +277,14 @@
     "password_settings_description": "Manage password login settings",
     "paths_validated_successfully": "All paths validated successfully",
     "person_cleanup_job": "Person cleanup",
+    "queue_details": "Queue Details",
+    "queues": "Job Queues",
+    "queues_page_description": "Admin job queues page",
     "quota_size_gib": "Quota Size (GiB)",
     "refreshing_all_libraries": "Refreshing all libraries",
     "registration": "Admin Registration",
     "registration_description": "Since you are the first user on the system, you will be assigned as the Admin and are responsible for administrative tasks, and additional users will be created by you.",
+    "remove_failed_jobs": "Remove failed jobs",
     "require_password_change_on_login": "Require user to change password on first login",
     "reset_settings_to_default": "Reset settings to default",
     "reset_settings_to_recent_saved": "Reset settings to the recent saved settings",
@@ -1102,6 +1106,7 @@
   "external_network_sheet_info": "When not on the preferred Wi-Fi network, the app will connect to the server through the first of the below URLs it can reach, starting from top to bottom",
   "face_unassigned": "Unassigned",
   "failed": "Failed",
+  "failed_count": "Failed: {count}",
   "failed_to_authenticate": "Failed to authenticate",
   "failed_to_load_assets": "Failed to load assets",
   "failed_to_load_folder": "Failed to load folder",
@@ -2209,6 +2214,7 @@
   "viewer_unstack": "Un-Stack",
   "visibility_changed": "Visibility changed for {count, plural, one {# person} other {# people}}",
   "waiting": "Waiting",
+  "waiting_count": "Waiting: {count}",
   "warning": "Warning",
   "week": "Week",
   "welcome": "Welcome",

mobile/android/app/src/main/kotlin/app/alextran/immich/sync/Messages.g.kt

@@ -89,7 +89,10 @@ data class PlatformAsset (
   val height: Long? = null,
   val durationInSeconds: Long,
   val orientation: Long,
-  val isFavorite: Boolean
+  val isFavorite: Boolean,
+  val adjustmentTime: Long? = null,
+  val latitude: Double? = null,
+  val longitude: Double? = null
 )
  {
   companion object {
@@ -104,7 +107,10 @@ data class PlatformAsset (
       val durationInSeconds = pigeonVar_list[7] as Long
       val orientation = pigeonVar_list[8] as Long
       val isFavorite = pigeonVar_list[9] as Boolean
-      return PlatformAsset(id, name, type, createdAt, updatedAt, width, height, durationInSeconds, orientation, isFavorite)
+      val adjustmentTime = pigeonVar_list[10] as Long?
+      val latitude = pigeonVar_list[11] as Double?
+      val longitude = pigeonVar_list[12] as Double?
+      return PlatformAsset(id, name, type, createdAt, updatedAt, width, height, durationInSeconds, orientation, isFavorite, adjustmentTime, latitude, longitude)
     }
   }
   fun toList(): List<Any?> {
@@ -119,6 +125,9 @@ data class PlatformAsset (
       durationInSeconds,
       orientation,
       isFavorite,
+      adjustmentTime,
+      latitude,
+      longitude,
     )
   }
   override fun equals(other: Any?): Boolean {

mobile/android/app/src/main/kotlin/app/alextran/immich/sync/MessagesImplBase.kt

@@ -4,7 +4,6 @@ import android.annotation.SuppressLint
 import android.content.ContentUris
 import android.content.Context
 import android.database.Cursor
-import android.net.Uri
 import android.os.Bundle
 import android.provider.MediaStore
 import android.util.Base64

mobile/ios/Runner/Sync/Messages.g.swift

@@ -140,6 +140,9 @@ struct PlatformAsset: Hashable {
   var durationInSeconds: Int64
   var orientation: Int64
   var isFavorite: Bool
+  var adjustmentTime: Int64? = nil
+  var latitude: Double? = nil
+  var longitude: Double? = nil
 
 
   // swift-format-ignore: AlwaysUseLowerCamelCase
@@ -154,6 +157,9 @@ struct PlatformAsset: Hashable {
     let durationInSeconds = pigeonVar_list[7] as! Int64
     let orientation = pigeonVar_list[8] as! Int64
     let isFavorite = pigeonVar_list[9] as! Bool
+    let adjustmentTime: Int64? = nilOrValue(pigeonVar_list[10])
+    let latitude: Double? = nilOrValue(pigeonVar_list[11])
+    let longitude: Double? = nilOrValue(pigeonVar_list[12])
 
     return PlatformAsset(
       id: id,
@@ -165,7 +171,10 @@ struct PlatformAsset: Hashable {
       height: height,
       durationInSeconds: durationInSeconds,
       orientation: orientation,
-      isFavorite: isFavorite
+      isFavorite: isFavorite,
+      adjustmentTime: adjustmentTime,
+      latitude: latitude,
+      longitude: longitude
     )
   }
   func toList() -> [Any?] {
@@ -180,6 +189,9 @@ struct PlatformAsset: Hashable {
       durationInSeconds,
       orientation,
       isFavorite,
+      adjustmentTime,
+      latitude,
+      longitude,
     ]
   }
   static func == (lhs: PlatformAsset, rhs: PlatformAsset) -> Bool {

mobile/ios/Runner/Sync/PHAssetExtensions.swift

@@ -12,7 +12,10 @@ extension PHAsset {
       height: Int64(pixelHeight),
       durationInSeconds: Int64(duration),
       orientation: 0,
-      isFavorite: isFavorite
+      isFavorite: isFavorite,
+      adjustmentTime: adjustmentTimestamp,
+      latitude: location?.coordinate.latitude,
+      longitude: location?.coordinate.longitude
     )
   }
 
@@ -23,6 +26,13 @@ extension PHAsset {
   var filename: String? {
     return value(forKey: "filename") as? String
   }
+  
+  var adjustmentTimestamp: Int64? {
+    if let date = value(forKey: "adjustmentTimestamp") as? Date {
+      return Int64(date.timeIntervalSince1970)
+    }
+    return nil
+  }
 
   // This method is expected to be slow as it goes through the asset resources to fetch the originalFilename
   var originalFilename: String? {

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

@@ -5,6 +5,10 @@ class LocalAsset extends BaseAsset {
   final String? remoteAssetId;
   final int orientation;
 
+  final DateTime? adjustmentTime;
+  final double? latitude;
+  final double? longitude;
+
   const LocalAsset({
     required this.id,
     String? remoteId,
@@ -19,6 +23,9 @@ class LocalAsset extends BaseAsset {
     super.isFavorite = false,
     super.livePhotoVideoId,
     this.orientation = 0,
+    this.adjustmentTime,
+    this.latitude,
+    this.longitude,
   }) : remoteAssetId = remoteId;
 
   @override
@@ -33,6 +40,8 @@ class LocalAsset extends BaseAsset {
   @override
   String get heroTag => '${id}_${remoteId ?? checksum}';
 
+  bool get hasCoordinates => latitude != null && longitude != null && latitude != 0 && longitude != 0;
+
   @override
   String toString() {
     return '''LocalAsset {
@@ -47,6 +56,9 @@ class LocalAsset extends BaseAsset {
    remoteId: ${remoteId ?? "<NA>"}
    isFavorite: $isFavorite,
   orientation: $orientation,
+  adjustmentTime: $adjustmentTime,
+  latitude: ${latitude ?? "<NA>"},
+  longitude: ${longitude ?? "<NA>"},
  }''';
   }
 
@@ -55,11 +67,23 @@ class LocalAsset extends BaseAsset {
   bool operator ==(Object other) {
     if (other is! LocalAsset) return false;
     if (identical(this, other)) return true;
-    return super == other && id == other.id && orientation == other.orientation;
+    return super == other &&
+        id == other.id &&
+        orientation == other.orientation &&
+        adjustmentTime == other.adjustmentTime &&
+        latitude == other.latitude &&
+        longitude == other.longitude;
   }
 
   @override
-  int get hashCode => super.hashCode ^ id.hashCode ^ remoteId.hashCode ^ orientation.hashCode;
+  int get hashCode =>
+      super.hashCode ^
+      id.hashCode ^
+      remoteId.hashCode ^
+      orientation.hashCode ^
+      adjustmentTime.hashCode ^
+      latitude.hashCode ^
+      longitude.hashCode;
 
   LocalAsset copyWith({
     String? id,
@@ -74,6 +98,9 @@ class LocalAsset extends BaseAsset {
     int? durationInSeconds,
     bool? isFavorite,
     int? orientation,
+    DateTime? adjustmentTime,
+    double? latitude,
+    double? longitude,
   }) {
     return LocalAsset(
       id: id ?? this.id,
@@ -88,6 +115,9 @@ class LocalAsset extends BaseAsset {
       durationInSeconds: durationInSeconds ?? this.durationInSeconds,
       isFavorite: isFavorite ?? this.isFavorite,
       orientation: orientation ?? this.orientation,
+      adjustmentTime: adjustmentTime ?? this.adjustmentTime,
+      latitude: latitude ?? this.latitude,
+      longitude: longitude ?? this.longitude,
     );
   }
 }

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

@@ -37,7 +37,7 @@ class ExifInfo {
 
   String get fNumber => f == null ? "" : f!.toStringAsFixed(1);
 
-  String get focalLength => mm == null ? "" : mm!.toStringAsFixed(1);
+  String get focalLength => mm == null ? "" : mm!.toStringAsFixed(3);
 
   const ExifInfo({
     this.assetId,

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

@@ -286,11 +286,23 @@ class LocalSyncService {
   }
 
   bool _assetsEqual(LocalAsset a, LocalAsset b) {
-    return a.updatedAt.isAtSameMomentAs(b.updatedAt) &&
+    if (CurrentPlatform.isAndroid) {
+      return a.updatedAt.isAtSameMomentAs(b.updatedAt) &&
+          a.createdAt.isAtSameMomentAs(b.createdAt) &&
+          a.width == b.width &&
+          a.height == b.height &&
+          a.durationInSeconds == b.durationInSeconds;
+    }
+
+    final firstAdjustment = a.adjustmentTime?.millisecondsSinceEpoch ?? 0;
+    final secondAdjustment = b.adjustmentTime?.millisecondsSinceEpoch ?? 0;
+    return firstAdjustment == secondAdjustment &&
         a.createdAt.isAtSameMomentAs(b.createdAt) &&
         a.width == b.width &&
         a.height == b.height &&
-        a.durationInSeconds == b.durationInSeconds;
+        a.durationInSeconds == b.durationInSeconds &&
+        a.latitude == b.latitude &&
+        a.longitude == b.longitude;
   }
 
   bool _albumsEqual(LocalAlbum a, LocalAlbum b) {
@@ -376,5 +388,8 @@ extension PlatformToLocalAsset on PlatformAsset {
     durationInSeconds: durationInSeconds,
     isFavorite: isFavorite,
     orientation: orientation,
+    adjustmentTime: tryFromSecondsSinceEpoch(adjustmentTime, isUtc: true),
+    latitude: latitude,
+    longitude: longitude,
   );
 }

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

@@ -166,5 +166,6 @@ extension RemoteExifEntityDataDomainEx on RemoteExifEntityData {
     mm: focalLength?.toDouble(),
     lens: lens,
     isFlipped: ExifDtoConverter.isOrientationFlipped(orientation),
+    exposureSeconds: ExifDtoConverter.exposureTimeToSeconds(exposureTime),
   );
 }

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

@@ -16,6 +16,12 @@ class LocalAssetEntity extends Table with DriftDefaultsMixin, AssetEntityMixin {
 
   IntColumn get orientation => integer().withDefault(const Constant(0))();
 
+  DateTimeColumn get adjustmentTime => dateTime().nullable()();
+
+  RealColumn get latitude => real().nullable()();
+
+  RealColumn get longitude => real().nullable()();
+
   @override
   Set<Column> get primaryKey => {id};
 }
@@ -34,5 +40,8 @@ extension LocalAssetEntityDataDomainExtension on LocalAssetEntityData {
     width: width,
     remoteId: remoteId,
     orientation: orientation,
+    adjustmentTime: adjustmentTime,
+    latitude: latitude,
+    longitude: longitude,
   );
 }

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

@@ -21,6 +21,9 @@ typedef $$LocalAssetEntityTableCreateCompanionBuilder =
       i0.Value<String?> checksum,
       i0.Value<bool> isFavorite,
       i0.Value<int> orientation,
+      i0.Value<DateTime?> adjustmentTime,
+      i0.Value<double?> latitude,
+      i0.Value<double?> longitude,
     });
 typedef $$LocalAssetEntityTableUpdateCompanionBuilder =
     i1.LocalAssetEntityCompanion Function({
@@ -35,6 +38,9 @@ typedef $$LocalAssetEntityTableUpdateCompanionBuilder =
       i0.Value<String?> checksum,
       i0.Value<bool> isFavorite,
       i0.Value<int> orientation,
+      i0.Value<DateTime?> adjustmentTime,
+      i0.Value<double?> latitude,
+      i0.Value<double?> longitude,
     });
 
 class $$LocalAssetEntityTableFilterComposer
@@ -101,6 +107,21 @@ class $$LocalAssetEntityTableFilterComposer
     column: $table.orientation,
     builder: (column) => i0.ColumnFilters(column),
   );
+
+  i0.ColumnFilters<DateTime> get adjustmentTime => $composableBuilder(
+    column: $table.adjustmentTime,
+    builder: (column) => i0.ColumnFilters(column),
+  );
+
+  i0.ColumnFilters<double> get latitude => $composableBuilder(
+    column: $table.latitude,
+    builder: (column) => i0.ColumnFilters(column),
+  );
+
+  i0.ColumnFilters<double> get longitude => $composableBuilder(
+    column: $table.longitude,
+    builder: (column) => i0.ColumnFilters(column),
+  );
 }
 
 class $$LocalAssetEntityTableOrderingComposer
@@ -166,6 +187,21 @@ class $$LocalAssetEntityTableOrderingComposer
     column: $table.orientation,
     builder: (column) => i0.ColumnOrderings(column),
   );
+
+  i0.ColumnOrderings<DateTime> get adjustmentTime => $composableBuilder(
+    column: $table.adjustmentTime,
+    builder: (column) => i0.ColumnOrderings(column),
+  );
+
+  i0.ColumnOrderings<double> get latitude => $composableBuilder(
+    column: $table.latitude,
+    builder: (column) => i0.ColumnOrderings(column),
+  );
+
+  i0.ColumnOrderings<double> get longitude => $composableBuilder(
+    column: $table.longitude,
+    builder: (column) => i0.ColumnOrderings(column),
+  );
 }
 
 class $$LocalAssetEntityTableAnnotationComposer
@@ -215,6 +251,17 @@ class $$LocalAssetEntityTableAnnotationComposer
     column: $table.orientation,
     builder: (column) => column,
   );
+
+  i0.GeneratedColumn<DateTime> get adjustmentTime => $composableBuilder(
+    column: $table.adjustmentTime,
+    builder: (column) => column,
+  );
+
+  i0.GeneratedColumn<double> get latitude =>
+      $composableBuilder(column: $table.latitude, builder: (column) => column);
+
+  i0.GeneratedColumn<double> get longitude =>
+      $composableBuilder(column: $table.longitude, builder: (column) => column);
 }
 
 class $$LocalAssetEntityTableTableManager
@@ -268,6 +315,9 @@ class $$LocalAssetEntityTableTableManager
                 i0.Value<String?> checksum = const i0.Value.absent(),
                 i0.Value<bool> isFavorite = const i0.Value.absent(),
                 i0.Value<int> orientation = const i0.Value.absent(),
+                i0.Value<DateTime?> adjustmentTime = const i0.Value.absent(),
+                i0.Value<double?> latitude = const i0.Value.absent(),
+                i0.Value<double?> longitude = const i0.Value.absent(),
               }) => i1.LocalAssetEntityCompanion(
                 name: name,
                 type: type,
@@ -280,6 +330,9 @@ class $$LocalAssetEntityTableTableManager
                 checksum: checksum,
                 isFavorite: isFavorite,
                 orientation: orientation,
+                adjustmentTime: adjustmentTime,
+                latitude: latitude,
+                longitude: longitude,
               ),
           createCompanionCallback:
               ({
@@ -294,6 +347,9 @@ class $$LocalAssetEntityTableTableManager
                 i0.Value<String?> checksum = const i0.Value.absent(),
                 i0.Value<bool> isFavorite = const i0.Value.absent(),
                 i0.Value<int> orientation = const i0.Value.absent(),
+                i0.Value<DateTime?> adjustmentTime = const i0.Value.absent(),
+                i0.Value<double?> latitude = const i0.Value.absent(),
+                i0.Value<double?> longitude = const i0.Value.absent(),
               }) => i1.LocalAssetEntityCompanion.insert(
                 name: name,
                 type: type,
@@ -306,6 +362,9 @@ class $$LocalAssetEntityTableTableManager
                 checksum: checksum,
                 isFavorite: isFavorite,
                 orientation: orientation,
+                adjustmentTime: adjustmentTime,
+                latitude: latitude,
+                longitude: longitude,
               ),
           withReferenceMapper: (p0) => p0
               .map((e) => (e.readTable(table), i0.BaseReferences(db, table, e)))
@@ -473,6 +532,39 @@ class $LocalAssetEntityTable extends i3.LocalAssetEntity
     requiredDuringInsert: false,
     defaultValue: const i4.Constant(0),
   );
+  static const i0.VerificationMeta _adjustmentTimeMeta =
+      const i0.VerificationMeta('adjustmentTime');
+  @override
+  late final i0.GeneratedColumn<DateTime> adjustmentTime =
+      i0.GeneratedColumn<DateTime>(
+        'adjustment_time',
+        aliasedName,
+        true,
+        type: i0.DriftSqlType.dateTime,
+        requiredDuringInsert: false,
+      );
+  static const i0.VerificationMeta _latitudeMeta = const i0.VerificationMeta(
+    'latitude',
+  );
+  @override
+  late final i0.GeneratedColumn<double> latitude = i0.GeneratedColumn<double>(
+    'latitude',
+    aliasedName,
+    true,
+    type: i0.DriftSqlType.double,
+    requiredDuringInsert: false,
+  );
+  static const i0.VerificationMeta _longitudeMeta = const i0.VerificationMeta(
+    'longitude',
+  );
+  @override
+  late final i0.GeneratedColumn<double> longitude = i0.GeneratedColumn<double>(
+    'longitude',
+    aliasedName,
+    true,
+    type: i0.DriftSqlType.double,
+    requiredDuringInsert: false,
+  );
   @override
   List<i0.GeneratedColumn> get $columns => [
     name,
@@ -486,6 +578,9 @@ class $LocalAssetEntityTable extends i3.LocalAssetEntity
     checksum,
     isFavorite,
     orientation,
+    adjustmentTime,
+    latitude,
+    longitude,
   ];
   @override
   String get aliasedName => _alias ?? actualTableName;
@@ -566,6 +661,27 @@ class $LocalAssetEntityTable extends i3.LocalAssetEntity
         ),
       );
     }
+    if (data.containsKey('adjustment_time')) {
+      context.handle(
+        _adjustmentTimeMeta,
+        adjustmentTime.isAcceptableOrUnknown(
+          data['adjustment_time']!,
+          _adjustmentTimeMeta,
+        ),
+      );
+    }
+    if (data.containsKey('latitude')) {
+      context.handle(
+        _latitudeMeta,
+        latitude.isAcceptableOrUnknown(data['latitude']!, _latitudeMeta),
+      );
+    }
+    if (data.containsKey('longitude')) {
+      context.handle(
+        _longitudeMeta,
+        longitude.isAcceptableOrUnknown(data['longitude']!, _longitudeMeta),
+      );
+    }
     return context;
   }
 
@@ -624,6 +740,18 @@ class $LocalAssetEntityTable extends i3.LocalAssetEntity
         i0.DriftSqlType.int,
         data['${effectivePrefix}orientation'],
       )!,
+      adjustmentTime: attachedDatabase.typeMapping.read(
+        i0.DriftSqlType.dateTime,
+        data['${effectivePrefix}adjustment_time'],
+      ),
+      latitude: attachedDatabase.typeMapping.read(
+        i0.DriftSqlType.double,
+        data['${effectivePrefix}latitude'],
+      ),
+      longitude: attachedDatabase.typeMapping.read(
+        i0.DriftSqlType.double,
+        data['${effectivePrefix}longitude'],
+      ),
     );
   }
 
@@ -653,6 +781,9 @@ class LocalAssetEntityData extends i0.DataClass
   final String? checksum;
   final bool isFavorite;
   final int orientation;
+  final DateTime? adjustmentTime;
+  final double? latitude;
+  final double? longitude;
   const LocalAssetEntityData({
     required this.name,
     required this.type,
@@ -665,6 +796,9 @@ class LocalAssetEntityData extends i0.DataClass
     this.checksum,
     required this.isFavorite,
     required this.orientation,
+    this.adjustmentTime,
+    this.latitude,
+    this.longitude,
   });
   @override
   Map<String, i0.Expression> toColumns(bool nullToAbsent) {
@@ -692,6 +826,15 @@ class LocalAssetEntityData extends i0.DataClass
     }
     map['is_favorite'] = i0.Variable<bool>(isFavorite);
     map['orientation'] = i0.Variable<int>(orientation);
+    if (!nullToAbsent || adjustmentTime != null) {
+      map['adjustment_time'] = i0.Variable<DateTime>(adjustmentTime);
+    }
+    if (!nullToAbsent || latitude != null) {
+      map['latitude'] = i0.Variable<double>(latitude);
+    }
+    if (!nullToAbsent || longitude != null) {
+      map['longitude'] = i0.Variable<double>(longitude);
+    }
     return map;
   }
 
@@ -714,6 +857,9 @@ class LocalAssetEntityData extends i0.DataClass
       checksum: serializer.fromJson<String?>(json['checksum']),
       isFavorite: serializer.fromJson<bool>(json['isFavorite']),
       orientation: serializer.fromJson<int>(json['orientation']),
+      adjustmentTime: serializer.fromJson<DateTime?>(json['adjustmentTime']),
+      latitude: serializer.fromJson<double?>(json['latitude']),
+      longitude: serializer.fromJson<double?>(json['longitude']),
     );
   }
   @override
@@ -733,6 +879,9 @@ class LocalAssetEntityData extends i0.DataClass
       'checksum': serializer.toJson<String?>(checksum),
       'isFavorite': serializer.toJson<bool>(isFavorite),
       'orientation': serializer.toJson<int>(orientation),
+      'adjustmentTime': serializer.toJson<DateTime?>(adjustmentTime),
+      'latitude': serializer.toJson<double?>(latitude),
+      'longitude': serializer.toJson<double?>(longitude),
     };
   }
 
@@ -748,6 +897,9 @@ class LocalAssetEntityData extends i0.DataClass
     i0.Value<String?> checksum = const i0.Value.absent(),
     bool? isFavorite,
     int? orientation,
+    i0.Value<DateTime?> adjustmentTime = const i0.Value.absent(),
+    i0.Value<double?> latitude = const i0.Value.absent(),
+    i0.Value<double?> longitude = const i0.Value.absent(),
   }) => i1.LocalAssetEntityData(
     name: name ?? this.name,
     type: type ?? this.type,
@@ -762,6 +914,11 @@ class LocalAssetEntityData extends i0.DataClass
     checksum: checksum.present ? checksum.value : this.checksum,
     isFavorite: isFavorite ?? this.isFavorite,
     orientation: orientation ?? this.orientation,
+    adjustmentTime: adjustmentTime.present
+        ? adjustmentTime.value
+        : this.adjustmentTime,
+    latitude: latitude.present ? latitude.value : this.latitude,
+    longitude: longitude.present ? longitude.value : this.longitude,
   );
   LocalAssetEntityData copyWithCompanion(i1.LocalAssetEntityCompanion data) {
     return LocalAssetEntityData(
@@ -782,6 +939,11 @@ class LocalAssetEntityData extends i0.DataClass
       orientation: data.orientation.present
           ? data.orientation.value
           : this.orientation,
+      adjustmentTime: data.adjustmentTime.present
+          ? data.adjustmentTime.value
+          : this.adjustmentTime,
+      latitude: data.latitude.present ? data.latitude.value : this.latitude,
+      longitude: data.longitude.present ? data.longitude.value : this.longitude,
     );
   }
 
@@ -798,7 +960,10 @@ class LocalAssetEntityData extends i0.DataClass
           ..write('id: $id, ')
           ..write('checksum: $checksum, ')
           ..write('isFavorite: $isFavorite, ')
-          ..write('orientation: $orientation')
+          ..write('orientation: $orientation, ')
+          ..write('adjustmentTime: $adjustmentTime, ')
+          ..write('latitude: $latitude, ')
+          ..write('longitude: $longitude')
           ..write(')'))
         .toString();
   }
@@ -816,6 +981,9 @@ class LocalAssetEntityData extends i0.DataClass
     checksum,
     isFavorite,
     orientation,
+    adjustmentTime,
+    latitude,
+    longitude,
   );
   @override
   bool operator ==(Object other) =>
@@ -831,7 +999,10 @@ class LocalAssetEntityData extends i0.DataClass
           other.id == this.id &&
           other.checksum == this.checksum &&
           other.isFavorite == this.isFavorite &&
-          other.orientation == this.orientation);
+          other.orientation == this.orientation &&
+          other.adjustmentTime == this.adjustmentTime &&
+          other.latitude == this.latitude &&
+          other.longitude == this.longitude);
 }
 
 class LocalAssetEntityCompanion
@@ -847,6 +1018,9 @@ class LocalAssetEntityCompanion
   final i0.Value<String?> checksum;
   final i0.Value<bool> isFavorite;
   final i0.Value<int> orientation;
+  final i0.Value<DateTime?> adjustmentTime;
+  final i0.Value<double?> latitude;
+  final i0.Value<double?> longitude;
   const LocalAssetEntityCompanion({
     this.name = const i0.Value.absent(),
     this.type = const i0.Value.absent(),
@@ -859,6 +1033,9 @@ class LocalAssetEntityCompanion
     this.checksum = const i0.Value.absent(),
     this.isFavorite = const i0.Value.absent(),
     this.orientation = const i0.Value.absent(),
+    this.adjustmentTime = const i0.Value.absent(),
+    this.latitude = const i0.Value.absent(),
+    this.longitude = const i0.Value.absent(),
   });
   LocalAssetEntityCompanion.insert({
     required String name,
@@ -872,6 +1049,9 @@ class LocalAssetEntityCompanion
     this.checksum = const i0.Value.absent(),
     this.isFavorite = const i0.Value.absent(),
     this.orientation = const i0.Value.absent(),
+    this.adjustmentTime = const i0.Value.absent(),
+    this.latitude = const i0.Value.absent(),
+    this.longitude = const i0.Value.absent(),
   }) : name = i0.Value(name),
        type = i0.Value(type),
        id = i0.Value(id);
@@ -887,6 +1067,9 @@ class LocalAssetEntityCompanion
     i0.Expression<String>? checksum,
     i0.Expression<bool>? isFavorite,
     i0.Expression<int>? orientation,
+    i0.Expression<DateTime>? adjustmentTime,
+    i0.Expression<double>? latitude,
+    i0.Expression<double>? longitude,
   }) {
     return i0.RawValuesInsertable({
       if (name != null) 'name': name,
@@ -900,6 +1083,9 @@ class LocalAssetEntityCompanion
       if (checksum != null) 'checksum': checksum,
       if (isFavorite != null) 'is_favorite': isFavorite,
       if (orientation != null) 'orientation': orientation,
+      if (adjustmentTime != null) 'adjustment_time': adjustmentTime,
+      if (latitude != null) 'latitude': latitude,
+      if (longitude != null) 'longitude': longitude,
     });
   }
 
@@ -915,6 +1101,9 @@ class LocalAssetEntityCompanion
     i0.Value<String?>? checksum,
     i0.Value<bool>? isFavorite,
     i0.Value<int>? orientation,
+    i0.Value<DateTime?>? adjustmentTime,
+    i0.Value<double?>? latitude,
+    i0.Value<double?>? longitude,
   }) {
     return i1.LocalAssetEntityCompanion(
       name: name ?? this.name,
@@ -928,6 +1117,9 @@ class LocalAssetEntityCompanion
       checksum: checksum ?? this.checksum,
       isFavorite: isFavorite ?? this.isFavorite,
       orientation: orientation ?? this.orientation,
+      adjustmentTime: adjustmentTime ?? this.adjustmentTime,
+      latitude: latitude ?? this.latitude,
+      longitude: longitude ?? this.longitude,
     );
   }
 
@@ -969,6 +1161,15 @@ class LocalAssetEntityCompanion
     if (orientation.present) {
       map['orientation'] = i0.Variable<int>(orientation.value);
     }
+    if (adjustmentTime.present) {
+      map['adjustment_time'] = i0.Variable<DateTime>(adjustmentTime.value);
+    }
+    if (latitude.present) {
+      map['latitude'] = i0.Variable<double>(latitude.value);
+    }
+    if (longitude.present) {
+      map['longitude'] = i0.Variable<double>(longitude.value);
+    }
     return map;
   }
 
@@ -985,7 +1186,10 @@ class LocalAssetEntityCompanion
           ..write('id: $id, ')
           ..write('checksum: $checksum, ')
           ..write('isFavorite: $isFavorite, ')
-          ..write('orientation: $orientation')
+          ..write('orientation: $orientation, ')
+          ..write('adjustmentTime: $adjustmentTime, ')
+          ..write('latitude: $latitude, ')
+          ..write('longitude: $longitude')
           ..write(')'))
         .toString();
   }

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

@@ -10,7 +10,6 @@ import 'package:immich_mobile/infrastructure/entities/exif.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/local_album.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/local_album_asset.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/local_asset.entity.dart';
-import 'package:immich_mobile/infrastructure/entities/trashed_local_asset.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/memory.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/memory_asset.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/partner.entity.dart';
@@ -21,6 +20,7 @@ import 'package:immich_mobile/infrastructure/entities/remote_album_user.entity.d
 import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/stack.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/store.entity.dart';
+import 'package:immich_mobile/infrastructure/entities/trashed_local_asset.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/user.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/user_metadata.entity.dart';
 import 'package:immich_mobile/infrastructure/repositories/db.repository.steps.dart';
@@ -95,7 +95,7 @@ class Drift extends $Drift implements IDatabaseRepository {
   }
 
   @override
-  int get schemaVersion => 13;
+  int get schemaVersion => 14;
 
   @override
   MigrationStrategy get migration => MigrationStrategy(
@@ -185,6 +185,11 @@ class Drift extends $Drift implements IDatabaseRepository {
             await m.createIndex(v13.idxTrashedLocalAssetChecksum);
             await m.createIndex(v13.idxTrashedLocalAssetAlbum);
           },
+          from13To14: (m, v14) async {
+            await m.addColumn(v14.localAssetEntity, v14.localAssetEntity.adjustmentTime);
+            await m.addColumn(v14.localAssetEntity, v14.localAssetEntity.latitude);
+            await m.addColumn(v14.localAssetEntity, v14.localAssetEntity.longitude);
+          },
         ),
       );
 

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

@@ -5485,6 +5485,462 @@ i1.GeneratedColumn<String> _column_95(String aliasedName) =>
       false,
       type: i1.DriftSqlType.string,
     );
+
+final class Schema14 extends i0.VersionedSchema {
+  Schema14({required super.database}) : super(version: 14);
+  @override
+  late final List<i1.DatabaseSchemaEntity> entities = [
+    userEntity,
+    remoteAssetEntity,
+    stackEntity,
+    localAssetEntity,
+    remoteAlbumEntity,
+    localAlbumEntity,
+    localAlbumAssetEntity,
+    idxLocalAssetChecksum,
+    idxRemoteAssetOwnerChecksum,
+    uQRemoteAssetsOwnerChecksum,
+    uQRemoteAssetsOwnerLibraryChecksum,
+    idxRemoteAssetChecksum,
+    authUserEntity,
+    userMetadataEntity,
+    partnerEntity,
+    remoteExifEntity,
+    remoteAlbumAssetEntity,
+    remoteAlbumUserEntity,
+    memoryEntity,
+    memoryAssetEntity,
+    personEntity,
+    assetFaceEntity,
+    storeEntity,
+    trashedLocalAssetEntity,
+    idxLatLng,
+    idxTrashedLocalAssetChecksum,
+    idxTrashedLocalAssetAlbum,
+  ];
+  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 Shape17 remoteAssetEntity = Shape17(
+    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,
+      ],
+      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 Shape24 localAssetEntity = Shape24(
+    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_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 idxLocalAssetChecksum = i1.Index(
+    'idx_local_asset_checksum',
+    'CREATE INDEX IF NOT EXISTS idx_local_asset_checksum ON local_asset_entity (checksum)',
+  );
+  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)',
+  );
+  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 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 Shape23 trashedLocalAssetEntity = Shape23(
+    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,
+      ],
+      attachedDatabase: database,
+    ),
+    alias: null,
+  );
+  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 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)',
+  );
+}
+
+class Shape24 extends i0.VersionedTable {
+  Shape24({required super.source, required super.alias}) : super.aliased();
+  i1.GeneratedColumn<String> get name =>
+      columnsByName['name']! as i1.GeneratedColumn<String>;
+  i1.GeneratedColumn<int> get type =>
+      columnsByName['type']! as i1.GeneratedColumn<int>;
+  i1.GeneratedColumn<DateTime> get createdAt =>
+      columnsByName['created_at']! as i1.GeneratedColumn<DateTime>;
+  i1.GeneratedColumn<DateTime> get updatedAt =>
+      columnsByName['updated_at']! as i1.GeneratedColumn<DateTime>;
+  i1.GeneratedColumn<int> get width =>
+      columnsByName['width']! as i1.GeneratedColumn<int>;
+  i1.GeneratedColumn<int> get height =>
+      columnsByName['height']! as i1.GeneratedColumn<int>;
+  i1.GeneratedColumn<int> get durationInSeconds =>
+      columnsByName['duration_in_seconds']! as i1.GeneratedColumn<int>;
+  i1.GeneratedColumn<String> get id =>
+      columnsByName['id']! as i1.GeneratedColumn<String>;
+  i1.GeneratedColumn<String> get checksum =>
+      columnsByName['checksum']! as i1.GeneratedColumn<String>;
+  i1.GeneratedColumn<bool> get isFavorite =>
+      columnsByName['is_favorite']! as i1.GeneratedColumn<bool>;
+  i1.GeneratedColumn<int> get orientation =>
+      columnsByName['orientation']! as i1.GeneratedColumn<int>;
+  i1.GeneratedColumn<DateTime> get adjustmentTime =>
+      columnsByName['adjustment_time']! as i1.GeneratedColumn<DateTime>;
+  i1.GeneratedColumn<double> get latitude =>
+      columnsByName['latitude']! as i1.GeneratedColumn<double>;
+  i1.GeneratedColumn<double> get longitude =>
+      columnsByName['longitude']! as i1.GeneratedColumn<double>;
+}
+
+i1.GeneratedColumn<DateTime> _column_96(String aliasedName) =>
+    i1.GeneratedColumn<DateTime>(
+      'adjustment_time',
+      aliasedName,
+      true,
+      type: i1.DriftSqlType.dateTime,
+    );
 i0.MigrationStepWithVersion migrationSteps({
   required Future<void> Function(i1.Migrator m, Schema2 schema) from1To2,
   required Future<void> Function(i1.Migrator m, Schema3 schema) from2To3,
@@ -5498,6 +5954,7 @@ i0.MigrationStepWithVersion migrationSteps({
   required Future<void> Function(i1.Migrator m, Schema11 schema) from10To11,
   required Future<void> Function(i1.Migrator m, Schema12 schema) from11To12,
   required Future<void> Function(i1.Migrator m, Schema13 schema) from12To13,
+  required Future<void> Function(i1.Migrator m, Schema14 schema) from13To14,
 }) {
   return (currentVersion, database) async {
     switch (currentVersion) {
@@ -5561,6 +6018,11 @@ i0.MigrationStepWithVersion migrationSteps({
         final migrator = i1.Migrator(database, schema);
         await from12To13(migrator, schema);
         return 13;
+      case 13:
+        final schema = Schema14(database: database);
+        final migrator = i1.Migrator(database, schema);
+        await from13To14(migrator, schema);
+        return 14;
       default:
         throw ArgumentError.value('Unknown migration from $currentVersion');
     }
@@ -5580,6 +6042,7 @@ i1.OnUpgrade stepByStep({
   required Future<void> Function(i1.Migrator m, Schema11 schema) from10To11,
   required Future<void> Function(i1.Migrator m, Schema12 schema) from11To12,
   required Future<void> Function(i1.Migrator m, Schema13 schema) from12To13,
+  required Future<void> Function(i1.Migrator m, Schema14 schema) from13To14,
 }) => i0.VersionedSchema.stepByStepHelper(
   step: migrationSteps(
     from1To2: from1To2,
@@ -5594,5 +6057,6 @@ i1.OnUpgrade stepByStep({
     from10To11: from10To11,
     from11To12: from11To12,
     from12To13: from12To13,
+    from13To14: from13To14,
   ),
 );

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

@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:drift/drift.dart';
 import 'package:immich_mobile/domain/models/album/local_album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
@@ -244,7 +246,56 @@ class DriftLocalAlbumRepository extends DriftDatabaseRepository {
     return query.map((row) => row.readTable(_db.localAssetEntity).toDto()).get();
   }
 
-  Future<void> _upsertAssets(Iterable<LocalAsset> localAssets) {
+  Future<void> Function(Iterable<LocalAsset>) get _upsertAssets =>
+      CurrentPlatform.isIOS ? _upsertAssetsDarwin : _upsertAssetsAndroid;
+
+  Future<void> _upsertAssetsDarwin(Iterable<LocalAsset> localAssets) async {
+    if (localAssets.isEmpty) {
+      return Future.value();
+    }
+
+    // Reset checksum if asset changed
+    await _db.batch((batch) async {
+      for (final asset in localAssets) {
+        final companion = LocalAssetEntityCompanion(
+          checksum: const Value(null),
+          adjustmentTime: Value(asset.adjustmentTime),
+        );
+        batch.update(
+          _db.localAssetEntity,
+          companion,
+          where: (row) => row.id.equals(asset.id) & row.adjustmentTime.isNotExp(Variable(asset.adjustmentTime)),
+        );
+      }
+    });
+
+    return _db.batch((batch) async {
+      for (final asset in localAssets) {
+        final companion = LocalAssetEntityCompanion.insert(
+          name: asset.name,
+          type: asset.type,
+          createdAt: Value(asset.createdAt),
+          updatedAt: Value(asset.updatedAt),
+          width: Value(asset.width),
+          height: Value(asset.height),
+          durationInSeconds: Value(asset.durationInSeconds),
+          id: asset.id,
+          orientation: Value(asset.orientation),
+          isFavorite: Value(asset.isFavorite),
+          latitude: Value(asset.latitude),
+          longitude: Value(asset.longitude),
+          adjustmentTime: Value(asset.adjustmentTime),
+        );
+        batch.insert<$LocalAssetEntityTable, LocalAssetEntityData>(
+          _db.localAssetEntity,
+          companion.copyWith(checksum: const Value(null)),
+          onConflict: DoUpdate((old) => companion),
+        );
+      }
+    });
+  }
+
+  Future<void> _upsertAssetsAndroid(Iterable<LocalAsset> localAssets) async {
     if (localAssets.isEmpty) {
       return Future.value();
     }
@@ -260,6 +311,7 @@ class DriftLocalAlbumRepository extends DriftDatabaseRepository {
           height: Value(asset.height),
           durationInSeconds: Value(asset.durationInSeconds),
           id: asset.id,
+          checksum: const Value(null),
           orientation: Value(asset.orientation),
           isFavorite: Value(asset.isFavorite),
         );

mobile/lib/infrastructure/utils/exif.converter.dart

@@ -22,7 +22,7 @@ abstract final class ExifDtoConverter {
       f: dto.fNumber?.toDouble(),
       mm: dto.focalLength?.toDouble(),
       iso: dto.iso?.toInt(),
-      exposureSeconds: _exposureTimeToSeconds(dto.exposureTime),
+      exposureSeconds: exposureTimeToSeconds(dto.exposureTime),
     );
   }
 
@@ -36,15 +36,15 @@ abstract final class ExifDtoConverter {
     return isRotated90CW || isRotated270CW;
   }
 
-  static double? _exposureTimeToSeconds(String? s) {
-    if (s == null) {
+  static double? exposureTimeToSeconds(String? second) {
+    if (second == null) {
       return null;
     }
-    double? value = double.tryParse(s);
+    double? value = double.tryParse(second);
     if (value != null) {
       return value;
     }
-    final parts = s.split("/");
+    final parts = second.split("/");
     if (parts.length == 2) {
       final numerator = double.tryParse(parts.firstOrNull ?? "-");
       final denominator = double.tryParse(parts.lastOrNull ?? "-");

mobile/lib/pages/search/map/map_location_picker.page.dart

@@ -49,7 +49,7 @@ class MapLocationPickerPage extends HookConsumerWidget {
 
       var currentLatLng = LatLng(currentLocation.latitude, currentLocation.longitude);
       selectedLatLng.value = currentLatLng;
-      await controller.value?.animateCamera(CameraUpdate.newLatLng(currentLatLng));
+      await controller.value?.animateCamera(CameraUpdate.newLatLngZoom(currentLatLng, 12));
     }
 
     return MapThemeOverride(
@@ -66,7 +66,10 @@ class MapLocationPickerPage extends HookConsumerWidget {
                 borderRadius: BorderRadius.only(bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)),
               ),
               child: MapLibreMap(
-                initialCameraPosition: CameraPosition(target: initialLatLng, zoom: 12),
+                initialCameraPosition: CameraPosition(
+                  target: initialLatLng,
+                  zoom: (initialLatLng.latitude == 0 && initialLatLng.longitude == 0) ? 1 : 12,
+                ),
                 styleString: style,
                 onMapCreated: (mapController) => controller.value = mapController,
                 onStyleLoadedCallback: onStyleLoaded,

mobile/lib/platform/native_sync_api.g.dart

@@ -41,6 +41,9 @@ class PlatformAsset {
     required this.durationInSeconds,
     required this.orientation,
     required this.isFavorite,
+    this.adjustmentTime,
+    this.latitude,
+    this.longitude,
   });
 
   String id;
@@ -63,8 +66,28 @@ class PlatformAsset {
 
   bool isFavorite;
 
+  int? adjustmentTime;
+
+  double? latitude;
+
+  double? longitude;
+
   List<Object?> _toList() {
-    return <Object?>[id, name, type, createdAt, updatedAt, width, height, durationInSeconds, orientation, isFavorite];
+    return <Object?>[
+      id,
+      name,
+      type,
+      createdAt,
+      updatedAt,
+      width,
+      height,
+      durationInSeconds,
+      orientation,
+      isFavorite,
+      adjustmentTime,
+      latitude,
+      longitude,
+    ];
   }
 
   Object encode() {
@@ -84,6 +107,9 @@ class PlatformAsset {
       durationInSeconds: result[7]! as int,
       orientation: result[8]! as int,
       isFavorite: result[9]! as bool,
+      adjustmentTime: result[10] as int?,
+      latitude: result[11] as double?,
+      longitude: result[12] as double?,
     );
   }
 

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

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/exif.model.dart';
+import 'package:immich_mobile/extensions/platform_extensions.dart';
 import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
 
 @RoutePage()
@@ -129,6 +130,15 @@ class _AssetPropertiesSectionState extends ConsumerState<_AssetPropertiesSection
     properties.insert(4, _PropertyItem(label: 'Orientation', value: asset.orientation.toString()));
     final albums = await ref.read(assetServiceProvider).getSourceAlbums(asset.id);
     properties.add(_PropertyItem(label: 'Album', value: albums.map((a) => a.name).join(', ')));
+    if (CurrentPlatform.isIOS) {
+      properties.add(_PropertyItem(label: 'Adjustment Time', value: asset.adjustmentTime?.toString()));
+    }
+    properties.add(
+      _PropertyItem(
+        label: 'GPS Coordinates',
+        value: asset.hasCoordinates ? '${asset.latitude}, ${asset.longitude}' : null,
+      ),
+    );
   }
 
   Future<void> _addRemoteAssetProperties(RemoteAsset asset) async {

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

@@ -251,8 +251,8 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
                 color: context.textTheme.labelLarge?.color,
               ),
               subtitle: _getFileInfo(asset, exifInfo),
-              subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-                color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+              subtitleStyle: context.textTheme.labelMedium?.copyWith(
+                color: context.textTheme.labelMedium?.color?.withAlpha(200),
               ),
             );
           },
@@ -268,8 +268,8 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
             color: context.textTheme.labelLarge?.color,
           ),
           subtitle: _getFileInfo(asset, exifInfo),
-          subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-            color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+          subtitleStyle: context.textTheme.labelMedium?.copyWith(
+            color: context.textTheme.labelMedium?.color?.withAlpha(200),
           ),
         );
       }
@@ -280,7 +280,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         // Asset Date and Time
         SheetTile(
           title: _getDateTime(context, asset, exifInfo),
-          titleStyle: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600),
+          titleStyle: context.textTheme.labelLarge,
           trailing: asset.hasRemote && isOwner ? const Icon(Icons.edit, size: 18) : null,
           onTap: asset.hasRemote && isOwner ? () async => await _editDateTime(context, ref) : null,
         ),
@@ -289,7 +289,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         const SheetLocationDetails(),
         // Details header
         SheetTile(
-          title: 'exif_bottom_sheet_details'.t(context: context),
+          title: 'details'.t(context: context).toUpperCase(),
           titleStyle: context.textTheme.labelMedium?.copyWith(
             color: context.textTheme.labelMedium?.color?.withAlpha(200),
             fontWeight: FontWeight.w600,
@@ -298,29 +298,33 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         // File info
         buildFileInfoTile(),
         // Camera info
-        if (cameraTitle != null)
+        if (cameraTitle != null) ...[
+          const SizedBox(height: 16),
           SheetTile(
             title: cameraTitle,
             titleStyle: context.textTheme.labelLarge,
             leading: Icon(Icons.camera_alt_outlined, size: 24, color: context.textTheme.labelLarge?.color),
             subtitle: _getCameraInfoSubtitle(exifInfo),
-            subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-              color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+            subtitleStyle: context.textTheme.labelMedium?.copyWith(
+              color: context.textTheme.labelMedium?.color?.withAlpha(200),
             ),
           ),
+        ],
         // Lens info
-        if (lensTitle != null)
+        if (lensTitle != null) ...[
+          const SizedBox(height: 16),
           SheetTile(
             title: lensTitle,
             titleStyle: context.textTheme.labelLarge,
             leading: Icon(Icons.camera_outlined, size: 24, color: context.textTheme.labelLarge?.color),
             subtitle: _getLensInfoSubtitle(exifInfo),
-            subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-              color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+            subtitleStyle: context.textTheme.labelMedium?.copyWith(
+              color: context.textTheme.labelMedium?.color?.withAlpha(200),
             ),
           ),
+        ],
         // Appears in (Albums)
-        _buildAppearsInList(ref, context),
+        Padding(padding: const EdgeInsets.only(top: 16.0), child: _buildAppearsInList(ref, context)),
         // padding at the bottom to avoid cut-off
         const SizedBox(height: 100),
       ],

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet/sheet_location_details.widget.dart

@@ -78,7 +78,7 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           SheetTile(
-            title: 'exif_bottom_sheet_location'.t(context: context),
+            title: 'location'.t(context: context).toUpperCase(),
             titleStyle: context.textTheme.labelMedium?.copyWith(
               color: context.textTheme.labelMedium?.color?.withAlpha(200),
               fontWeight: FontWeight.w600,
@@ -102,7 +102,7 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
                   Text(
                     coordinates,
                     style: context.textTheme.labelMedium?.copyWith(
-                      color: context.textTheme.labelMedium?.color?.withAlpha(150),
+                      color: context.textTheme.labelMedium?.color?.withAlpha(200),
                     ),
                   ),
                 ],

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

@@ -46,7 +46,7 @@ class SheetTile extends ConsumerWidget {
     } else {
       titleWidget = Container(
         width: double.infinity,
-        padding: const EdgeInsets.only(left: 15),
+        padding: const EdgeInsets.only(left: 15, right: 15),
         child: Text(title, style: titleStyle),
       );
     }

mobile/lib/providers/app_life_cycle.provider.dart

@@ -4,6 +4,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/services/log.service.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/platform_extensions.dart';
 import 'package:immich_mobile/models/backup/backup_state.model.dart';
 import 'package:immich_mobile/providers/album/album.provider.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
@@ -150,7 +151,7 @@ class AppLifeCycleNotifier extends StateNotifier<AppLifeCycleEnum> {
     try {
       bool syncSuccess = false;
       await Future.wait([
-        _safeRun(backgroundManager.syncLocal(), "syncLocal"),
+        _safeRun(backgroundManager.syncLocal(full: CurrentPlatform.isAndroid ? true : false), "syncLocal"),
         _safeRun(backgroundManager.syncRemote().then((success) => syncSuccess = success), "syncRemote"),
       ]);
       if (syncSuccess) {

mobile/lib/utils/migration.dart

@@ -81,7 +81,7 @@ Future<void> migrateDatabaseIfNeeded(Isar db, Drift drift) async {
   }
 
   if (version < 19 && Store.isBetaTimelineEnabled) {
-    if (!await _populateUpdatedAtTime(drift)) {
+    if (!await _populateLocalAssetTime(drift)) {
       return;
     }
   }
@@ -229,7 +229,7 @@ Future<void> _migrateDeviceAsset(Isar db) async {
   });
 }
 
-Future<bool> _populateUpdatedAtTime(Drift db) async {
+Future<bool> _populateLocalAssetTime(Drift db) async {
   try {
     final nativeApi = NativeSyncApi();
     final albums = await nativeApi.getAlbums();
@@ -240,6 +240,9 @@ Future<bool> _populateUpdatedAtTime(Drift db) async {
           batch.update(
             db.localAssetEntity,
             LocalAssetEntityCompanion(
+              longitude: Value(asset.longitude),
+              latitude: Value(asset.latitude),
+              adjustmentTime: Value(tryFromSecondsSinceEpoch(asset.adjustmentTime, isUtc: true)),
               updatedAt: Value(tryFromSecondsSinceEpoch(asset.updatedAt, isUtc: true) ?? DateTime.timestamp()),
             ),
             where: (t) => t.id.equals(asset.id),
@@ -250,7 +253,7 @@ Future<bool> _populateUpdatedAtTime(Drift db) async {
 
     return true;
   } catch (error) {
-    dPrint(() => "[MIGRATION] Error while populating updatedAt time: $error");
+    dPrint(() => "[MIGRATION] Error while populating asset time: $error");
     return false;
   }
 }

mobile/pigeon/native_sync_api.dart

@@ -27,6 +27,10 @@ class PlatformAsset {
   final int orientation;
   final bool isFavorite;
 
+  final int? adjustmentTime;
+  final double? latitude;
+  final double? longitude;
+
   const PlatformAsset({
     required this.id,
     required this.name,
@@ -38,6 +42,9 @@ class PlatformAsset {
     this.durationInSeconds = 0,
     this.orientation = 0,
     this.isFavorite = false,
+    this.adjustmentTime,
+    this.latitude,
+    this.longitude,
   });
 }
 

mobile/test/drift/main/generated/schema.dart

@@ -16,6 +16,7 @@ import 'schema_v10.dart' as v10;
 import 'schema_v11.dart' as v11;
 import 'schema_v12.dart' as v12;
 import 'schema_v13.dart' as v13;
+import 'schema_v14.dart' as v14;
 
 class GeneratedHelper implements SchemaInstantiationHelper {
   @override
@@ -47,10 +48,12 @@ class GeneratedHelper implements SchemaInstantiationHelper {
         return v12.DatabaseAtV12(db);
       case 13:
         return v13.DatabaseAtV13(db);
+      case 14:
+        return v14.DatabaseAtV14(db);
       default:
         throw MissingSchemaException(version, versions);
     }
   }
 
-  static const versions = const [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
+  static const versions = const [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
 }

pnpm-lock.yaml

@@ -815,9 +815,15 @@ importers:
       tabbable:
         specifier: ^6.2.0
         version: 6.3.0
+      three:
+        specifier: ^0.179.1
+        version: 0.179.1
       thumbhash:
         specifier: ^0.1.1
         version: 0.1.1
+      uplot:
+        specifier: ^1.6.32
+        version: 1.6.32
     devDependencies:
       '@eslint/js':
         specifier: ^9.36.0
@@ -873,6 +879,9 @@ importers:
       '@types/qrcode':
         specifier: ^1.5.5
         version: 1.5.6
+      '@types/three':
+        specifier: ^0.181.0
+        version: 0.181.0
       '@vitest/coverage-v8':
         specifier: ^3.0.0
         version: 3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.10.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@26.1.0(canvas@2.11.2))(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
@@ -2075,6 +2084,9 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
+  '@dimforge/rapier3d-compat@0.12.0':
+    resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
+
   '@discoveryjs/json-ext@0.5.7':
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
@@ -4637,6 +4649,9 @@ packages:
   '@turf/invariant@7.2.0':
     resolution: {integrity: sha512-kV4u8e7Gkpq+kPbAKNC21CmyrXzlbBgFjO1PhrHPgEdNqXqDawoZ3i6ivE3ULJj2rSesCjduUaC/wyvH/sNr2Q==}
 
+  '@tweenjs/tween.js@23.1.3':
+    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
+
   '@types/accepts@1.3.7':
     resolution: {integrity: sha512-Pay9fq2lM2wXPWbteBsRAGiWH2hig4ZE2asK+mm7kUzlxRTfL961rj89I6zV/E3PcIkDqyuBEcMxFT7rccugeQ==}
 
@@ -4957,6 +4972,9 @@ packages:
   '@types/ssh2@1.15.5':
     resolution: {integrity: sha512-N1ASjp/nXH3ovBHddRJpli4ozpk6UdDYIX4RJWFa9L1YKnzdhTlVmiGHm4DZnj/jLbqZpes4aeR30EFGQtvhQQ==}
 
+  '@types/stats.js@0.17.4':
+    resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
+
   '@types/superagent@8.1.9':
     resolution: {integrity: sha512-pTVjI73witn+9ILmoJdajHGW2jkSaOzhiFYF1Rd3EQ94kymLqB9PjD9ISg7WaALC7+dCHT0FGe9T2LktLq/3GQ==}
 
@@ -4966,6 +4984,9 @@ packages:
   '@types/supertest@6.0.3':
     resolution: {integrity: sha512-8WzXq62EXFhJ7QsH3Ocb/iKQ/Ty9ZVWnVzoTKc9tyyFRRF3a74Tk2+TLFgaFFw364Ere+npzHKEJ6ga2LzIL7w==}
 
+  '@types/three@0.181.0':
+    resolution: {integrity: sha512-MLF1ks8yRM2k71D7RprFpDb9DOX0p22DbdPqT/uAkc6AtQXjxWCVDjCy23G9t1o8HcQPk7woD2NIyiaWcWPYmA==}
+
   '@types/through@0.0.33':
     resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
 
@@ -4981,6 +5002,9 @@ packages:
   '@types/validator@13.15.10':
     resolution: {integrity: sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA==}
 
+  '@types/webxr@0.5.24':
+    resolution: {integrity: sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==}
+
   '@types/whatwg-mimetype@3.0.2':
     resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
 
@@ -5142,6 +5166,9 @@ packages:
   '@webassemblyjs/wast-printer@1.14.1':
     resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
 
+  '@webgpu/types@0.1.67':
+    resolution: {integrity: sha512-uk53+2ECGUkWoDFez/hymwpRfdgdIn6y1ref70fEecGMe5607f4sozNFgBk0oxlr7j2CRGWBEc3IBYMmFdGGTQ==}
+
   '@xtuc/ieee754@1.2.0':
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
 
@@ -8404,6 +8431,9 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  meshoptimizer@0.22.0:
+    resolution: {integrity: sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==}
+
   methods@1.1.2:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
     engines: {node: '>= 0.6'}
@@ -10931,9 +10961,6 @@ packages:
   three@0.179.1:
     resolution: {integrity: sha512-5y/elSIQbrvKOISxpwXCR4sQqHtGiOI+MKLc3SsBdDXA2hz3Mdp3X59aUp8DyybMa34aeBwbFTpdoLJaUDEWSw==}
 
-  three@0.180.0:
-    resolution: {integrity: sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w==}
-
   throttleit@2.1.0:
     resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==}
     engines: {node: '>=18'}
@@ -11276,6 +11303,9 @@ packages:
     resolution: {integrity: sha512-EDxhTEVPZZRLWYcJ4ZXjGFN0oP7qYvbXWzEgRm/Yql4dHX5wDbvh89YHP6PK1lzZJYrMtXUuZZz8XGK+U6U1og==}
     engines: {node: '>=14.16'}
 
+  uplot@1.6.32:
+    resolution: {integrity: sha512-KIMVnG68zvu5XXUbC4LQEPnhwOxBuLyW1AHtpm6IKTXImkbLgkMy+jabjLgSLMasNuGGzQm/ep3tOkyTxpiQIw==}
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -13452,6 +13482,8 @@ snapshots:
     dependencies:
       postcss: 8.5.6
 
+  '@dimforge/rapier3d-compat@0.12.0': {}
+
   '@discoveryjs/json-ext@0.5.7': {}
 
   '@docsearch/css@4.2.0': {}
@@ -15623,7 +15655,7 @@ snapshots:
     dependencies:
       '@photo-sphere-viewer/core': 5.14.0
       '@photo-sphere-viewer/video-plugin': 5.14.0(@photo-sphere-viewer/core@5.14.0)
-      three: 0.180.0
+      three: 0.179.1
 
   '@photo-sphere-viewer/markers-plugin@5.14.0(@photo-sphere-viewer/core@5.14.0)':
     dependencies:
@@ -15641,7 +15673,7 @@ snapshots:
   '@photo-sphere-viewer/video-plugin@5.14.0(@photo-sphere-viewer/core@5.14.0)':
     dependencies:
       '@photo-sphere-viewer/core': 5.14.0
-      three: 0.180.0
+      three: 0.179.1
 
   '@photostructure/tz-lookup@11.3.0': {}
 
@@ -16553,6 +16585,8 @@ snapshots:
       '@types/geojson': 7946.0.16
       tslib: 2.8.1
 
+  '@tweenjs/tween.js@23.1.3': {}
+
   '@types/accepts@1.3.7':
     dependencies:
       '@types/node': 24.10.1
@@ -16949,6 +16983,8 @@ snapshots:
     dependencies:
       '@types/node': 18.19.130
 
+  '@types/stats.js@0.17.4': {}
+
   '@types/superagent@8.1.9':
     dependencies:
       '@types/cookiejar': 2.1.5
@@ -16965,6 +17001,16 @@ snapshots:
       '@types/methods': 1.1.4
       '@types/superagent': 8.1.9
 
+  '@types/three@0.181.0':
+    dependencies:
+      '@dimforge/rapier3d-compat': 0.12.0
+      '@tweenjs/tween.js': 23.1.3
+      '@types/stats.js': 0.17.4
+      '@types/webxr': 0.5.24
+      '@webgpu/types': 0.1.67
+      fflate: 0.8.2
+      meshoptimizer: 0.22.0
+
   '@types/through@0.0.33':
     dependencies:
       '@types/node': 24.10.1
@@ -16977,6 +17023,8 @@ snapshots:
 
   '@types/validator@13.15.10': {}
 
+  '@types/webxr@0.5.24': {}
+
   '@types/whatwg-mimetype@3.0.2': {}
 
   '@types/ws@8.18.1':
@@ -17222,6 +17270,8 @@ snapshots:
       '@webassemblyjs/ast': 1.14.1
       '@xtuc/long': 4.2.2
 
+  '@webgpu/types@0.1.67': {}
+
   '@xtuc/ieee754@1.2.0': {}
 
   '@xtuc/long@4.2.2': {}
@@ -21115,6 +21165,8 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  meshoptimizer@0.22.0: {}
+
   methods@1.1.2: {}
 
   micromark-core-commonmark@2.0.3:
@@ -24188,8 +24240,6 @@ snapshots:
 
   three@0.179.1: {}
 
-  three@0.180.0: {}
-
   throttleit@2.1.0: {}
 
   through@2.3.8: {}
@@ -24536,6 +24586,8 @@ snapshots:
       semver-diff: 4.0.0
       xdg-basedir: 5.1.0
 
+  uplot@1.6.32: {}
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1

server/src/queries/asset.job.repository.sql

@@ -369,6 +369,7 @@ select
   "asset"."livePhotoVideoId",
   "asset"."encodedVideoPath",
   "asset"."originalPath",
+  "asset"."isOffline",
   to_json("asset_exif") as "exifInfo",
   (
     select

server/src/repositories/asset-job.repository.ts

@@ -232,6 +232,7 @@ export class AssetJobRepository {
         'asset.livePhotoVideoId',
         'asset.encodedVideoPath',
         'asset.originalPath',
+        'asset.isOffline',
       ])
       .$call(withExif)
       .select(withFacesAndPeople)

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

@@ -585,8 +585,6 @@ describe(AssetService.name, () => {
                 '/uploads/user-id/webp/path.ext',
                 '/uploads/user-id/thumbs/path.jpg',
                 '/uploads/user-id/fullsize/path.webp',
-                assetWithFace.encodedVideoPath, // this value is null
-                undefined, // no sidecar path
                 assetWithFace.originalPath,
               ],
             },
@@ -648,8 +646,6 @@ describe(AssetService.name, () => {
                 '/uploads/user-id/webp/path.ext',
                 '/uploads/user-id/thumbs/path.jpg',
                 '/uploads/user-id/fullsize/path.webp',
-                undefined,
-                undefined,
                 'fake_path/asset_1.jpeg',
               ],
             },
@@ -676,8 +672,6 @@ describe(AssetService.name, () => {
                 '/uploads/user-id/webp/path.ext',
                 '/uploads/user-id/thumbs/path.jpg',
                 '/uploads/user-id/fullsize/path.webp',
-                undefined,
-                undefined,
                 'fake_path/asset_1.jpeg',
               ],
             },

server/src/services/asset.service.ts

@@ -363,11 +363,11 @@ export class AssetService extends BaseService {
     const { fullsizeFile, previewFile, thumbnailFile, sidecarFile } = getAssetFiles(asset.files ?? []);
     const files = [thumbnailFile?.path, previewFile?.path, fullsizeFile?.path, asset.encodedVideoPath];
 
-    if (deleteOnDisk) {
+    if (deleteOnDisk && !asset.isOffline) {
       files.push(sidecarFile?.path, asset.originalPath);
     }
 
-    await this.jobRepository.queue({ name: JobName.FileDelete, data: { files } });
+    await this.jobRepository.queue({ name: JobName.FileDelete, data: { files: files.filter(Boolean) } });
 
     return JobStatus.Success;
   }

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

@@ -2,13 +2,16 @@ import { Kysely } from 'kysely';
 import { AssetFileType, JobName, SharedLinkType } from 'src/enum';
 import { AccessRepository } from 'src/repositories/access.repository';
 import { AlbumRepository } from 'src/repositories/album.repository';
+import { AssetJobRepository } from 'src/repositories/asset-job.repository';
 import { AssetRepository } from 'src/repositories/asset.repository';
+import { EventRepository } from 'src/repositories/event.repository';
 import { JobRepository } from 'src/repositories/job.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
 import { SharedLinkAssetRepository } from 'src/repositories/shared-link-asset.repository';
 import { SharedLinkRepository } from 'src/repositories/shared-link.repository';
 import { StackRepository } from 'src/repositories/stack.repository';
 import { StorageRepository } from 'src/repositories/storage.repository';
+import { UserRepository } from 'src/repositories/user.repository';
 import { DB } from 'src/schema';
 import { AssetService } from 'src/services/asset.service';
 import { newMediumService } from 'test/medium.factory';
@@ -20,8 +23,16 @@ let defaultDatabase: Kysely<DB>;
 const setup = (db?: Kysely<DB>) => {
   return newMediumService(AssetService, {
     database: db || defaultDatabase,
-    real: [AssetRepository, AlbumRepository, AccessRepository, SharedLinkAssetRepository, StackRepository],
-    mock: [LoggingRepository, JobRepository, StorageRepository],
+    real: [
+      AssetRepository,
+      AssetJobRepository,
+      AlbumRepository,
+      AccessRepository,
+      SharedLinkAssetRepository,
+      StackRepository,
+      UserRepository,
+    ],
+    mock: [EventRepository, LoggingRepository, JobRepository, StorageRepository],
   });
 };
 
@@ -210,4 +221,51 @@ describe(AssetService.name, () => {
       });
     });
   });
+
+  describe('delete', () => {
+    it('should delete asset', async () => {
+      const { sut, ctx } = setup();
+      ctx.getMock(EventRepository).emit.mockResolvedValue();
+      ctx.getMock(JobRepository).queue.mockResolvedValue();
+      const { user } = await ctx.newUser();
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      const thumbnailPath = '/path/to/thumbnail.jpg';
+      const previewPath = '/path/to/preview.jpg';
+      const sidecarPath = '/path/to/sidecar.xmp';
+      await Promise.all([
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Thumbnail, path: thumbnailPath }),
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Preview, path: previewPath }),
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Sidecar, path: sidecarPath }),
+      ]);
+
+      await sut.handleAssetDeletion({ id: asset.id, deleteOnDisk: true });
+
+      expect(ctx.getMock(JobRepository).queue).toHaveBeenCalledWith({
+        name: JobName.FileDelete,
+        data: { files: [thumbnailPath, previewPath, sidecarPath, asset.originalPath] },
+      });
+    });
+
+    it('should not delete offline assets', async () => {
+      const { sut, ctx } = setup();
+      ctx.getMock(EventRepository).emit.mockResolvedValue();
+      ctx.getMock(JobRepository).queue.mockResolvedValue();
+      const { user } = await ctx.newUser();
+      const { asset } = await ctx.newAsset({ ownerId: user.id, isOffline: true });
+      const thumbnailPath = '/path/to/thumbnail.jpg';
+      const previewPath = '/path/to/preview.jpg';
+      await Promise.all([
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Thumbnail, path: thumbnailPath }),
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Preview, path: previewPath }),
+        ctx.newAssetFile({ assetId: asset.id, type: AssetFileType.Sidecar, path: `/path/to/sidecar.xmp` }),
+      ]);
+
+      await sut.handleAssetDeletion({ id: asset.id, deleteOnDisk: true });
+
+      expect(ctx.getMock(JobRepository).queue).toHaveBeenCalledWith({
+        name: JobName.FileDelete,
+        data: { files: [thumbnailPath, previewPath] },
+      });
+    });
+  });
 });

web/package.json

@@ -61,7 +61,9 @@
     "svelte-maplibre": "^1.2.5",
     "svelte-persisted-store": "^0.12.0",
     "tabbable": "^6.2.0",
-    "thumbhash": "^0.1.1"
+    "three": "^0.179.1",
+    "thumbhash": "^0.1.1",
+    "uplot": "^1.6.32"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
@@ -82,6 +84,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/luxon": "^3.4.2",
     "@types/qrcode": "^1.5.5",
+    "@types/three": "^0.181.0",
     "@vitest/coverage-v8": "^3.0.0",
     "dotenv": "^17.0.0",
     "eslint": "^9.36.0",

web/src/lib/components/QueueCard.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+  import QueueCardBadge from '$lib/components/QueueCardBadge.svelte';
+  import QueueCardButton from '$lib/components/QueueCardButton.svelte';
   import Badge from '$lib/elements/Badge.svelte';
+  import { asQueueItem, getQueueDetailUrl } from '$lib/services/queue.service';
   import { locale } from '$lib/stores/preferences.store';
-  import { QueueCommand, type QueueCommandDto, type QueueStatisticsDto, type QueueStatusLegacyDto } from '@immich/sdk';
-  import { Icon, IconButton } from '@immich/ui';
+  import { QueueCommand, type QueueCommandDto, type QueueResponseDto } from '@immich/sdk';
+  import { Icon, IconButton, Link } from '@immich/ui';
   import {
     mdiAlertCircle,
     mdiAllInclusive,
+    mdiChartLine,
     mdiClose,
     mdiFastForward,
     mdiImageRefreshOutline,
@@ -15,39 +19,23 @@
   } from '@mdi/js';
   import { type Component } from 'svelte';
   import { t } from 'svelte-i18n';
-  import JobTileButton from './JobTileButton.svelte';
-  import JobTileStatus from './JobTileStatus.svelte';
 
   interface Props {
-    title: string;
-    subtitle: string | undefined;
-    description: Component | undefined;
-    statistics: QueueStatisticsDto;
-    queueStatus: QueueStatusLegacyDto;
-    icon: string;
+    queue: QueueResponseDto;
+    description?: Component;
     disabled?: boolean;
-    allText: string | undefined;
-    refreshText: string | undefined;
+    allText?: string;
+    refreshText?: string;
     missingText: string;
     onCommand: (command: QueueCommandDto) => void;
   }
 
-  let {
-    title,
-    subtitle,
-    description,
-    statistics,
-    queueStatus,
-    icon,
-    disabled = false,
-    allText,
-    refreshText,
-    missingText,
-    onCommand,
-  }: Props = $props();
+  let { queue, description, disabled = false, allText, refreshText, missingText, onCommand }: Props = $props();
 
+  const { icon, title, subtitle } = $derived(asQueueItem($t, queue));
+  const { statistics } = $derived(queue);
   let waitingCount = $derived(statistics.waiting + statistics.paused + statistics.delayed);
-  let isIdle = $derived(!queueStatus.isActive && !queueStatus.isPaused);
+  let isIdle = $derived(statistics.active + statistics.waiting === 0 && !queue.isPaused);
   let multipleButtons = $derived(allText || refreshText);
 
   const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pe-4 ps-6';
@@ -55,17 +43,25 @@
 
 <div class="flex flex-col overflow-hidden rounded-2xl bg-gray-100 dark:bg-immich-dark-gray sm:flex-row sm:rounded-9">
   <div class="flex w-full flex-col">
-    {#if queueStatus.isPaused}
-      <JobTileStatus color="warning">{$t('paused')}</JobTileStatus>
-    {:else if queueStatus.isActive}
-      <JobTileStatus color="success">{$t('active')}</JobTileStatus>
+    {#if queue.isPaused}
+      <QueueCardBadge color="warning">{$t('paused')}</QueueCardBadge>
+    {:else if statistics.active > 0}
+      <QueueCardBadge color="success">{$t('active')}</QueueCardBadge>
     {/if}
     <div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
-      <div class="flex items-center gap-4 text-xl font-semibold text-primary">
-        <span class="flex items-center gap-2">
+      <div class="flex items-center gap-2 text-xl font-semibold text-primary">
+        <Link class="flex items-center gap-2 hover:underline" href={getQueueDetailUrl(queue)} underline={false}>
           <Icon {icon} size="1.25em" class="hidden shrink-0 sm:block" />
           <span class="uppercase">{title}</span>
-        </span>
+        </Link>
+        <IconButton
+          color="primary"
+          icon={mdiChartLine}
+          aria-label={$t('view_details')}
+          size="small"
+          variant="ghost"
+          href={getQueueDetailUrl(queue)}
+        />
         <div class="flex gap-2">
           {#if statistics.failed > 0}
             <Badge>
@@ -128,62 +124,62 @@
   </div>
   <div class="flex w-full flex-row overflow-hidden sm:w-32 sm:flex-col">
     {#if disabled}
-      <JobTileButton
+      <QueueCardButton
         disabled={true}
         color="light-gray"
         onClick={() => onCommand({ command: QueueCommand.Start, force: false })}
       >
         <Icon icon={mdiAlertCircle} size="36" />
         <span class="uppercase">{$t('disabled')}</span>
-      </JobTileButton>
+      </QueueCardButton>
     {/if}
 
     {#if !disabled && !isIdle}
       {#if waitingCount > 0}
-        <JobTileButton color="gray" onClick={() => onCommand({ command: QueueCommand.Empty, force: false })}>
+        <QueueCardButton color="gray" onClick={() => onCommand({ command: QueueCommand.Empty, force: false })}>
           <Icon icon={mdiClose} size="24" />
           <span class="uppercase">{$t('clear')}</span>
-        </JobTileButton>
+        </QueueCardButton>
       {/if}
-      {#if queueStatus.isPaused}
+      {#if queue.isPaused}
         {@const size = waitingCount > 0 ? '24' : '48'}
-        <JobTileButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Resume, force: false })}>
+        <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Resume, force: false })}>
           <!-- size property is not reactive, so have to use width and height -->
           <Icon icon={mdiFastForward} {size} />
           <span class="uppercase">{$t('resume')}</span>
-        </JobTileButton>
+        </QueueCardButton>
       {:else}
-        <JobTileButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Pause, force: false })}>
+        <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Pause, force: false })}>
           <Icon icon={mdiPause} size="24" />
           <span class="uppercase">{$t('pause')}</span>
-        </JobTileButton>
+        </QueueCardButton>
       {/if}
     {/if}
 
     {#if !disabled && multipleButtons && isIdle}
       {#if allText}
-        <JobTileButton color="dark-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: true })}>
+        <QueueCardButton color="dark-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: true })}>
           <Icon icon={mdiAllInclusive} size="24" />
           <span class="uppercase">{allText}</span>
-        </JobTileButton>
+        </QueueCardButton>
       {/if}
       {#if refreshText}
-        <JobTileButton color="gray" onClick={() => onCommand({ command: QueueCommand.Start, force: undefined })}>
+        <QueueCardButton color="gray" onClick={() => onCommand({ command: QueueCommand.Start, force: undefined })}>
           <Icon icon={mdiImageRefreshOutline} size="24" />
           <span class="uppercase">{refreshText}</span>
-        </JobTileButton>
+        </QueueCardButton>
       {/if}
-      <JobTileButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
+      <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
         <Icon icon={mdiSelectionSearch} size="24" />
         <span class="uppercase">{missingText}</span>
-      </JobTileButton>
+      </QueueCardButton>
     {/if}
 
     {#if !disabled && !multipleButtons && isIdle}
-      <JobTileButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
+      <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
         <Icon icon={mdiPlay} size="48" />
         <span class="uppercase">{missingText}</span>
-      </JobTileButton>
+      </QueueCardButton>
     {/if}
   </div>
 </div>

web/src/lib/components/QueueGraph.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  import { queueManager } from '$lib/managers/queue-manager.svelte';
+  import type { QueueSnapshot } from '$lib/types';
+  import type { QueueResponseDto } from '@immich/sdk';
+  import { LoadingSpinner, Theme, theme } from '@immich/ui';
+  import { DateTime } from 'luxon';
+  import { onMount } from 'svelte';
+  import uPlot, { type AlignedData, type Axis } from 'uplot';
+  import 'uplot/dist/uPlot.min.css';
+
+  type Props = {
+    queue: QueueResponseDto;
+    class?: string;
+  };
+
+  const { queue, class: className = '' }: Props = $props();
+
+  type Data = number | null;
+  type NormalizedData = [
+    Data[], // timestamps
+    Data[], // failed counts
+    Data[], // active counts
+    Data[], // waiting counts
+  ];
+
+  const normalizeData = (snapshots: QueueSnapshot[]) => {
+    const items: NormalizedData = [[], [], [], []];
+
+    for (const { timestamp, snapshot } of snapshots) {
+      items[0].push(timestamp);
+
+      const statistics = (snapshot || []).find(({ name }) => name === queue.name)?.statistics;
+
+      if (statistics) {
+        items[1].push(statistics.failed);
+        items[2].push(statistics.active);
+        items[3].push(statistics.waiting + statistics.paused);
+      } else {
+        items[0].push(timestamp);
+        items[1].push(null);
+        items[2].push(null);
+        items[3].push(null);
+      }
+    }
+
+    items[0].push(Date.now() + 5000);
+    items[1].push(items[1].at(-1) ?? 0);
+    items[2].push(items[2].at(-1) ?? 0);
+    items[3].push(items[3].at(-1) ?? 0);
+
+    return items;
+  };
+
+  const data = $derived(normalizeData(queueManager.snapshots));
+
+  let chartElement: HTMLDivElement | undefined = $state();
+  let isDark = $derived(theme.value === Theme.Dark);
+  let plot: uPlot;
+
+  const axisOptions: Axis = {
+    stroke: () => (isDark ? '#ccc' : 'black'),
+    ticks: {
+      show: true,
+      stroke: () => (isDark ? '#444' : '#ddd'),
+    },
+    grid: {
+      show: true,
+      stroke: () => (isDark ? '#444' : '#ddd'),
+    },
+  };
+
+  const seriesOptions: uPlot.Series = {
+    spanGaps: false,
+    points: {
+      show: false,
+    },
+    width: 2,
+  };
+
+  const options: uPlot.Options = {
+    legend: {
+      show: false,
+    },
+    cursor: {
+      show: false,
+      lock: true,
+      drag: {
+        setScale: false,
+      },
+    },
+    width: 200,
+    height: 200,
+    ms: 1,
+    pxAlign: true,
+    scales: {
+      y: {
+        distr: 1,
+      },
+    },
+    series: [
+      {},
+      {
+        stroke: '#d94a4a',
+        ...seriesOptions,
+      },
+      {
+        stroke: '#4250af',
+        ...seriesOptions,
+      },
+      {
+        stroke: '#1075db',
+        ...seriesOptions,
+      },
+    ],
+
+    axes: [
+      {
+        ...axisOptions,
+        values: (plot, values) => {
+          return values.map((value) => {
+            if (!value) {
+              return '';
+            }
+            return DateTime.fromMillis(value).toFormat('hh:mm:ss');
+          });
+        },
+      },
+      axisOptions,
+    ],
+  };
+
+  const onThemeChange = () => plot?.redraw(false);
+
+  $effect(() => theme.value && onThemeChange());
+
+  onMount(() => {
+    plot = new uPlot(options, data as AlignedData, chartElement);
+  });
+
+  const update = () => {
+    if (plot && chartElement && data[0].length > 0) {
+      const now = Date.now();
+      const scale = { min: now - chartElement!.clientWidth * 100, max: now };
+
+      plot.setData(data as AlignedData, false);
+      plot.setScale('x', scale);
+      plot.setSize({ width: chartElement.clientWidth, height: chartElement.clientHeight });
+    }
+
+    requestAnimationFrame(update);
+  };
+
+  requestAnimationFrame(update);
+</script>
+
+<div class="w-full {className}" bind:this={chartElement}>
+  {#if data[0].length === 0}
+    <LoadingSpinner size="giant" />
+  {/if}
+</div>

web/src/lib/components/QueuePanel.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import QueueCard from '$lib/components/QueueCard.svelte';
+  import QueueStorageMigrationDescription from '$lib/components/QueueStorageMigrationDescription.svelte';
+  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { queueManager } from '$lib/managers/queue-manager.svelte';
+  import { asQueueItem } from '$lib/services/queue.service';
+  import { handleError } from '$lib/utils/handle-error';
+  import {
+    QueueCommand,
+    type QueueCommandDto,
+    QueueName,
+    type QueueResponseDto,
+    runQueueCommandLegacy,
+  } from '@immich/sdk';
+  import { modalManager, toastManager } from '@immich/ui';
+  import type { Component } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    queues: QueueResponseDto[];
+  };
+
+  let { queues }: Props = $props();
+  const featureFlags = featureFlagsManager.value;
+
+  type QueueDetails = {
+    description?: Component;
+    allText?: string;
+    refreshText?: string;
+    missingText: string;
+    disabled?: boolean;
+    handleCommand?: (jobId: QueueName, jobCommand: QueueCommandDto) => Promise<void>;
+  };
+
+  const queueDetails: Partial<Record<QueueName, QueueDetails>> = {
+    [QueueName.ThumbnailGeneration]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+    },
+    [QueueName.MetadataExtraction]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+    },
+    [QueueName.Library]: {
+      missingText: $t('rescan'),
+    },
+    [QueueName.Sidecar]: {
+      allText: $t('sync'),
+      missingText: $t('discover'),
+      disabled: !featureFlags.sidecar,
+    },
+    [QueueName.SmartSearch]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.smartSearch,
+    },
+    [QueueName.DuplicateDetection]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.duplicateDetection,
+    },
+    [QueueName.FaceDetection]: {
+      allText: $t('reset'),
+      refreshText: $t('refresh'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.facialRecognition,
+    },
+    [QueueName.FacialRecognition]: {
+      allText: $t('reset'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.facialRecognition,
+    },
+    [QueueName.Ocr]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.ocr,
+    },
+    [QueueName.VideoConversion]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+    },
+    [QueueName.StorageTemplateMigration]: {
+      missingText: $t('start'),
+      description: QueueStorageMigrationDescription,
+    },
+    [QueueName.Migration]: {
+      missingText: $t('start'),
+    },
+  };
+
+  let queueList = Object.entries(queueDetails) as [QueueName, QueueDetails][];
+
+  const handleCommand = async (name: QueueName, dto: QueueCommandDto) => {
+    const item = asQueueItem($t, { name });
+
+    switch (name) {
+      case QueueName.FaceDetection:
+      case QueueName.FacialRecognition: {
+        if (dto.force) {
+          const confirmed = await modalManager.showDialog({ prompt: $t('admin.confirm_reprocess_all_faces') });
+          if (!confirmed) {
+            return;
+          }
+          break;
+        }
+      }
+    }
+
+    try {
+      await runQueueCommandLegacy({ name, queueCommandDto: dto });
+      await queueManager.refresh();
+
+      switch (dto.command) {
+        case QueueCommand.Empty: {
+          toastManager.success($t('admin.cleared_jobs', { values: { job: item.title } }));
+          break;
+        }
+      }
+    } catch (error) {
+      handleError(error, $t('admin.failed_job_command', { values: { command: dto.command, job: item.title } }));
+    }
+  };
+</script>
+
+<div class="flex flex-col gap-7 mt-10">
+  {#each queueList as [queueName, props] (queueName)}
+    {@const queue = queues.find(({ name }) => name === queueName)}
+    {#if queue}
+      <QueueCard {queue} onCommand={(command) => handleCommand(queueName, command)} {...props} />
+    {/if}
+  {/each}
+</div>

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

@@ -254,7 +254,7 @@
                       values={{ job: $t('admin.storage_template_migration_job') }}
                     >
                       {#snippet children({ message })}
-                        <a href={resolve(AppRoute.ADMIN_JOBS)} class="text-primary">
+                        <a href={resolve(AppRoute.ADMIN_QUEUES)} class="text-primary">
                           {message}
                         </a>
                       {/snippet}

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

@@ -98,7 +98,7 @@
     <ControlAppBar showBackButton={false}>
       {#snippet leading()}
         <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
-          <Logo variant="inline" />
+          <Logo variant="inline" class="min-w-min" />
         </a>
       {/snippet}
 

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

@@ -0,0 +1,426 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import * as THREE from 'three';
+  import { MapControls } from 'three/addons/controls/MapControls.js';
+
+  interface Props {
+    // Props
+    imageUrl?: string;
+
+    // Exported variables for external access
+    imageWidth?: number;
+    imageHeight?: number;
+    zoomPercent?: number;
+    cameraX?: number;
+    cameraY?: number;
+  }
+
+  let {
+    imageUrl = '',
+
+    imageWidth = $bindable(0),
+    imageHeight = $bindable(0),
+    zoomPercent = $bindable(100),
+    cameraX = $bindable(0),
+    cameraY = $bindable(0),
+  }: Props = $props();
+
+  // Internal state
+  let container: HTMLDivElement = $state();
+  let canvas: HTMLCanvasElement = $state();
+  let scene: THREE.Scene = $state();
+  let camera: THREE.OrthographicCamera;
+  let renderer: THREE.WebGLRenderer = $state();
+  let controls: MapControls;
+  let imageMesh: THREE.Mesh | null = null;
+  let initialZoom: number = 1;
+  let currentZoom: number = 1;
+
+  // Reactive statements
+  let canvasSize = $derived(
+    container ? `${renderer?.domElement.width || 0} × ${renderer?.domElement.height || 0}` : 'Not initialized',
+  );
+  let imageDims = $derived(imageWidth && imageHeight ? `${imageWidth} × ${imageHeight}` : 'Not loaded');
+
+  function initThreeJS() {
+    if (!container || !canvas) {
+      return;
+    }
+
+    // Create scene
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x00_00_00);
+
+    // Get initial canvas display size
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+
+    // Create orthographic camera
+    const aspect = width / height;
+    const frustumSize = 1000;
+    camera = new THREE.OrthographicCamera(
+      (frustumSize * aspect) / -2,
+      (frustumSize * aspect) / 2,
+      frustumSize / 2,
+      frustumSize / -2,
+      0.1,
+      1000,
+    );
+    camera.position.z = 10;
+
+    // Create renderer
+    renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+    // Pass false to prevent setting inline styles - CSS handles display size
+    renderer.setSize(width, height, false);
+    // Cap pixel ratio at 2 for performance (most displays are 1x or 2x)
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    // Use sRGB color space for correct color rendering (matches browser's <img> behavior)
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+
+    // Initialize MapControls - handles all pan/zoom/touch interactions
+    controls = new MapControls(camera, canvas);
+    controls.enableRotate = false; // Disable rotation for 2D viewing
+    controls.zoomToCursor = true; // Zoom toward mouse cursor
+    controls.screenSpacePanning = true; // Pan in screen space
+    controls.minZoom = 0.1; // Will be updated after image loads
+    controls.maxZoom = 20;
+    controls.zoomSpeed = 3; // Faster zoom response (default is 1)
+    controls.panSpeed = 3;
+    controls.enableDamping = true; // Disable damping for instant response
+    controls.dampingFactor = 0.1;
+
+    // Configure mouse buttons - LEFT button only for panning
+    controls.mouseButtons = {
+      LEFT: THREE.MOUSE.PAN,
+      MIDDLE: THREE.MOUSE.DOLLY,
+      RIGHT: undefined, // Disable right-click to allow context menu
+    };
+
+    controls.addEventListener('change', () => {
+      constrainPan(); // Constrain panning to keep image in viewport
+      updateExportedVars();
+    });
+  }
+
+  function checkAndHandleResize() {
+    if (!canvas || !renderer || !camera) {
+      return false;
+    }
+
+    // Get the actual display size of the canvas
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+
+    // Check if the canvas drawing buffer size needs to be updated
+    const needsResize = canvas.width !== width || canvas.height !== height;
+
+    if (needsResize) {
+      // Update the drawing buffer size to match display size
+      // Pass false to prevent three.js from setting inline styles
+      renderer.setSize(width, height, false);
+
+      // Update camera aspect
+      const aspect = width / height;
+      const frustumSize = 1000;
+      camera.left = (frustumSize * aspect) / -2;
+      camera.right = (frustumSize * aspect) / 2;
+      camera.top = frustumSize / 2;
+      camera.bottom = frustumSize / -2;
+      camera.updateProjectionMatrix();
+
+      if (imageMesh && controls) {
+        // Preserve the user's zoom level during resize
+        const userZoomLevel = camera.zoom;
+
+        // Recalculate the mesh scale to fit the new frustum
+        const canvasAspect = width / height;
+        const imageAspect = imageWidth / imageHeight;
+        const newScale =
+          imageAspect > canvasAspect
+            ? (camera.right - camera.left) / imageWidth
+            : (camera.top - camera.bottom) / imageHeight;
+
+        // Update mesh scale to fit new viewport
+        imageMesh.scale.set(newScale, newScale, 1);
+
+        // Maintain user's zoom level
+        camera.zoom = userZoomLevel;
+        camera.updateProjectionMatrix();
+      }
+    }
+
+    return needsResize;
+  }
+
+  function constrainPan() {
+    if (!controls || !camera || !imageMesh) {
+      return;
+    }
+
+    // Get bounding box of the image mesh in world space
+    const bbox = new THREE.Box3().setFromObject(imageMesh);
+
+    // Calculate the visible area based on camera frustum (adjusted for zoom)
+    const viewWidth = (camera.right - camera.left) / camera.zoom;
+    const viewHeight = (camera.top - camera.bottom) / camera.zoom;
+
+    // Calculate image size in world space
+    const imageWidth = bbox.max.x - bbox.min.x;
+    const imageHeight = bbox.max.y - bbox.min.y;
+
+    // Calculate pan limits
+    // If image is smaller than view, center it (no panning)
+    // If image is larger than view, allow panning to see all parts
+    let minX, maxX, minY, maxY;
+
+    if (imageWidth <= viewWidth) {
+      // Image fits horizontally - center it
+      minX = maxX = 0;
+    } else {
+      // Image is larger - allow panning within bounds
+      const halfViewWidth = viewWidth / 2;
+      minX = bbox.min.x + halfViewWidth;
+      maxX = bbox.max.x - halfViewWidth;
+    }
+
+    if (imageHeight <= viewHeight) {
+      // Image fits vertically - center it
+      minY = maxY = 0;
+    } else {
+      // Image is larger - allow panning within bounds
+      const halfViewHeight = viewHeight / 2;
+      minY = bbox.min.y + halfViewHeight;
+      maxY = bbox.max.y - halfViewHeight;
+    }
+
+    // Clamp the camera position within bounds
+    camera.position.x = Math.max(minX, Math.min(maxX, camera.position.x));
+    camera.position.y = Math.max(minY, Math.min(maxY, camera.position.y));
+
+    // Clamp the controls target to match
+    controls.target.x = camera.position.x;
+    controls.target.y = camera.position.y;
+  }
+
+  function calculateInitialView() {
+    if (!imageMesh || !container || !camera || !controls) {
+      return;
+    }
+
+    const canvasAspect = container.clientWidth / container.clientHeight;
+    const imageAspect = imageWidth / imageHeight;
+
+    // Scale the mesh to fit within the frustum
+    // The frustum is 1000 units, so scale image to fit within that
+    let scale;
+    scale =
+      imageAspect > canvasAspect
+        ? (camera.right - camera.left) / imageWidth
+        : (camera.top - camera.bottom) / imageHeight;
+
+    // Apply scale to mesh so it fits in the viewport at zoom=1
+    imageMesh.scale.set(scale, scale, 1);
+
+    initialZoom = 1;
+    currentZoom = 1;
+
+    // Reset camera zoom to 1 (mesh is already scaled to fit)
+    camera.zoom = 1;
+    camera.updateProjectionMatrix();
+
+    // Center camera and controls target
+    camera.position.set(0, 0, 10);
+    controls.target.set(0, 0, 0);
+    controls.update();
+
+    // Set minimum zoom to prevent zooming out beyond initial fit
+    controls.minZoom = 1;
+
+    updateExportedVars();
+  }
+
+  function loadImage(url: string) {
+    if (!url || !scene) {
+      return;
+    }
+
+    const textureLoader = new THREE.TextureLoader();
+    textureLoader.setCrossOrigin('anonymous');
+
+    textureLoader.load(
+      url,
+      function (texture) {
+        imageWidth = texture.image.width;
+        imageHeight = texture.image.height;
+
+        // Configure texture for high quality zooming
+        texture.minFilter = THREE.LinearFilter; // Smooth when zoomed out
+        texture.magFilter = THREE.LinearFilter; // Smooth when zoomed in
+        texture.colorSpace = THREE.SRGBColorSpace; // Use sRGB color space to match browser rendering
+        texture.needsUpdate = true;
+
+        // Remove old mesh if exists
+        if (imageMesh) {
+          scene.remove(imageMesh);
+          imageMesh.geometry.dispose();
+          (imageMesh.material as THREE.Material).dispose();
+        }
+
+        // Create plane geometry with image dimensions
+        const geometry = new THREE.PlaneGeometry(imageWidth, imageHeight);
+        const material = new THREE.MeshBasicMaterial({
+          map: texture,
+          side: THREE.DoubleSide,
+        });
+
+        imageMesh = new THREE.Mesh(geometry, material);
+        scene.add(imageMesh);
+
+        calculateInitialView();
+      },
+      undefined,
+      function (error) {
+        console.error('Error loading image:', error);
+      },
+    );
+  }
+
+  function renderLoop() {
+    if (!renderer || !scene || !camera || !controls) {
+      return;
+    }
+
+    // Check and handle resize on every frame to prevent flickering
+    checkAndHandleResize();
+
+    // Update controls (handles damping/inertia)
+    controls.update();
+
+    // Render the scene
+    renderer.render(scene, camera);
+  }
+
+  function startRenderLoop() {
+    if (!renderer) {
+      return;
+    }
+    // Use Three.js's setAnimationLoop for better integration and XR support
+    renderer.setAnimationLoop(renderLoop);
+  }
+
+  function stopRenderLoop() {
+    if (!renderer) {
+      return;
+    }
+    // Pass null to stop the animation loop
+    renderer.setAnimationLoop(null);
+  }
+
+  function updateExportedVars() {
+    if (!camera) {
+      return;
+    }
+    // MapControls uses camera.zoom property
+    zoomPercent = Math.round((camera.zoom / initialZoom) * 100);
+    cameraX = Math.round(camera.position.x);
+    cameraY = Math.round(camera.position.y);
+  }
+
+  export function resetView() {
+    if (!camera || !controls) {
+      return;
+    }
+    // Reset camera zoom and position
+    camera.zoom = initialZoom;
+    camera.position.set(0, 0, 10);
+    camera.updateProjectionMatrix();
+    controls.target.set(0, 0, 0);
+    controls.update();
+  }
+
+  // Custom keyboard shortcuts (MapControls handles arrow keys, +/-, etc.)
+  function handleKeydown(e: KeyboardEvent) {
+    if (!camera || !controls) {
+      return;
+    }
+
+    switch (e.key) {
+      case 'r':
+      case 'R': {
+        e.preventDefault();
+        resetView();
+        break;
+      }
+      // MapControls automatically handles: arrow keys for pan, +/- for zoom
+    }
+  }
+
+  // Lifecycle
+  onMount(() => {
+    initThreeJS();
+
+    if (imageUrl) {
+      loadImage(imageUrl);
+    }
+
+    // Start the continuous render loop (handles resize checks automatically)
+    startRenderLoop();
+
+    // Keyboard events on document
+    document.addEventListener('keydown', handleKeydown);
+  });
+
+  onDestroy(() => {
+    // Cleanup
+    document.removeEventListener('keydown', handleKeydown);
+
+    // Stop the render loop
+    stopRenderLoop();
+
+    // Dispose controls
+    if (controls) {
+      controls.dispose();
+    }
+
+    if (imageMesh) {
+      imageMesh.geometry.dispose();
+      (imageMesh.material as THREE.Material).dispose();
+    }
+
+    if (renderer) {
+      renderer.dispose();
+    }
+  });
+
+  // Watch for imageUrl changes
+  $effect(() => {
+    if (imageUrl && scene) {
+      loadImage(imageUrl);
+    }
+  });
+</script>
+
+<div class="image-viewer-container h-full w-full" bind:this={container}>
+  <!-- MapControls handles all mouse/touch interactions automatically -->
+  <canvas bind:this={canvas}></canvas>
+</div>
+
+<style>
+  .image-viewer-container {
+    position: relative;
+    background: #222;
+    overflow: hidden;
+  }
+
+  canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+    cursor: grab;
+  }
+
+  canvas:active {
+    cursor: grabbing;
+  }
+</style>

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

@@ -2,6 +2,7 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import { zoomImageAction } from '$lib/actions/zoom-image';
   import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
+  import ImageViewer from '$lib/components/asset-viewer/image-viewer.svelte';
   import OcrBoundingBox from '$lib/components/asset-viewer/ocr-bounding-box.svelte';
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
   import { assetViewerFadeDuration } from '$lib/constants';
@@ -158,7 +159,8 @@
   // when true, will force loading of the original image
   let forceUseOriginal: boolean = $derived(
     (asset.type === AssetTypeEnum.Image && asset.duration && !asset.duration.includes('0:00:00.000')) ||
-      $photoZoomState.currentZoom > 1,
+      $photoZoomState.currentZoom > 1 ||
+      true,
   );
 
   const targetImageSize = $derived.by(() => {
@@ -250,42 +252,44 @@
       <LoadingSpinner />
     </div>
   {:else if !imageError}
-    <div
-      use:zoomImageAction={{ disabled: isOcrActive }}
-      {...useSwipe(onSwipe)}
-      class="h-full w-full"
-      transition:fade={{ duration: haveFadeTransition ? assetViewerFadeDuration : 0 }}
-    >
-      {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
+    <ImageViewer imageUrl={assetFileUrl}></ImageViewer>
+    <div style="display:none;">
+      <div
+        use:zoomImageAction={{ disabled: isOcrActive }}
+        {...useSwipe(onSwipe)}
+        class="h-full w-full"
+        transition:fade={{ duration: haveFadeTransition ? assetViewerFadeDuration : 0 }}
+      >
+        {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
+          <img
+            src={assetFileUrl}
+            alt=""
+            class="-z-1 absolute top-0 start-0 object-cover h-full w-full blur-lg"
+            draggable="false"
+          />
+        {/if}
         <img
+          bind:this={$photoViewerImgElement}
           src={assetFileUrl}
-          alt=""
-          class="-z-1 absolute top-0 start-0 object-cover h-full w-full blur-lg"
+          alt={$getAltText(toTimelineAsset(asset))}
+          class="h-full w-full {$slideshowState === SlideshowState.None
+            ? 'object-contain'
+            : slideshowLookCssMapping[$slideshowLook]}"
           draggable="false"
         />
-      {/if}
-      <img
-        bind:this={$photoViewerImgElement}
-        src={assetFileUrl}
-        alt={$getAltText(toTimelineAsset(asset))}
-        class="h-full w-full {$slideshowState === SlideshowState.None
-          ? 'object-contain'
-          : slideshowLookCssMapping[$slideshowLook]}"
-        draggable="false"
-      />
-      <!-- eslint-disable-next-line svelte/require-each-key -->
-      {#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewerImgElement) as boundingbox}
-        <div
-          class="absolute border-solid border-white border-3 rounded-lg"
-          style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
-        ></div>
-      {/each}
+        <!-- eslint-disable-next-line svelte/require-each-key -->
+        {#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewerImgElement) as boundingbox}
+          <div
+            class="absolute border-solid border-white border-3 rounded-lg"
+            style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
+          ></div>
+        {/each}
 
-      {#each ocrBoxes as ocrBox (ocrBox.id)}
-        <OcrBoundingBox {ocrBox} />
-      {/each}
+        {#each ocrBoxes as ocrBox (ocrBox.id)}
+          <OcrBoundingBox {ocrBox} />
+        {/each}
+      </div>
     </div>
-
     {#if isFaceEditMode.value}
       <FaceEditor htmlElement={$photoViewerImgElement} {containerWidth} {containerHeight} assetId={asset.id} />
     {/if}

web/src/lib/components/jobs/JobsPanel.svelte

@@ -1,197 +0,0 @@
-<script lang="ts">
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { getQueueName } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import {
-    QueueCommand,
-    type QueueCommandDto,
-    QueueName,
-    type QueuesResponseLegacyDto,
-    runQueueCommandLegacy,
-  } from '@immich/sdk';
-  import { modalManager, toastManager } from '@immich/ui';
-  import {
-    mdiContentDuplicate,
-    mdiFaceRecognition,
-    mdiFileJpgBox,
-    mdiFileXmlBox,
-    mdiFolderMove,
-    mdiImageSearch,
-    mdiLibraryShelves,
-    mdiOcr,
-    mdiTable,
-    mdiTagFaces,
-    mdiVideo,
-  } from '@mdi/js';
-  import type { Component } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import JobTile from './JobTile.svelte';
-  import StorageMigrationDescription from './StorageMigrationDescription.svelte';
-
-  interface Props {
-    jobs: QueuesResponseLegacyDto;
-  }
-
-  let { jobs = $bindable() }: Props = $props();
-  const featureFlags = featureFlagsManager.value;
-
-  type JobDetails = {
-    title: string;
-    subtitle?: string;
-    description?: Component;
-    allText?: string;
-    refreshText?: string;
-    missingText: string;
-    disabled?: boolean;
-    icon: string;
-    handleCommand?: (jobId: QueueName, jobCommand: QueueCommandDto) => Promise<void>;
-  };
-
-  const handleConfirmCommand = async (jobId: QueueName, dto: QueueCommandDto) => {
-    if (dto.force) {
-      const isConfirmed = await modalManager.showDialog({
-        prompt: $t('admin.confirm_reprocess_all_faces'),
-      });
-
-      if (isConfirmed) {
-        await handleCommand(jobId, { command: QueueCommand.Start, force: true });
-        return;
-      }
-
-      return;
-    }
-
-    await handleCommand(jobId, dto);
-  };
-
-  let jobDetails: Partial<Record<QueueName, JobDetails>> = {
-    [QueueName.ThumbnailGeneration]: {
-      icon: mdiFileJpgBox,
-      title: $getQueueName(QueueName.ThumbnailGeneration),
-      subtitle: $t('admin.thumbnail_generation_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-    },
-    [QueueName.MetadataExtraction]: {
-      icon: mdiTable,
-      title: $getQueueName(QueueName.MetadataExtraction),
-      subtitle: $t('admin.metadata_extraction_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-    },
-    [QueueName.Library]: {
-      icon: mdiLibraryShelves,
-      title: $getQueueName(QueueName.Library),
-      subtitle: $t('admin.library_tasks_description'),
-      missingText: $t('rescan'),
-    },
-    [QueueName.Sidecar]: {
-      title: $getQueueName(QueueName.Sidecar),
-      icon: mdiFileXmlBox,
-      subtitle: $t('admin.sidecar_job_description'),
-      allText: $t('sync'),
-      missingText: $t('discover'),
-      disabled: !featureFlags.sidecar,
-    },
-    [QueueName.SmartSearch]: {
-      icon: mdiImageSearch,
-      title: $getQueueName(QueueName.SmartSearch),
-      subtitle: $t('admin.smart_search_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-      disabled: !featureFlags.smartSearch,
-    },
-    [QueueName.DuplicateDetection]: {
-      icon: mdiContentDuplicate,
-      title: $getQueueName(QueueName.DuplicateDetection),
-      subtitle: $t('admin.duplicate_detection_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-      disabled: !featureFlags.duplicateDetection,
-    },
-    [QueueName.FaceDetection]: {
-      icon: mdiFaceRecognition,
-      title: $getQueueName(QueueName.FaceDetection),
-      subtitle: $t('admin.face_detection_description'),
-      allText: $t('reset'),
-      refreshText: $t('refresh'),
-      missingText: $t('missing'),
-      handleCommand: handleConfirmCommand,
-      disabled: !featureFlags.facialRecognition,
-    },
-    [QueueName.FacialRecognition]: {
-      icon: mdiTagFaces,
-      title: $getQueueName(QueueName.FacialRecognition),
-      subtitle: $t('admin.facial_recognition_job_description'),
-      allText: $t('reset'),
-      missingText: $t('missing'),
-      handleCommand: handleConfirmCommand,
-      disabled: !featureFlags.facialRecognition,
-    },
-    [QueueName.Ocr]: {
-      icon: mdiOcr,
-      title: $getQueueName(QueueName.Ocr),
-      subtitle: $t('admin.ocr_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-      disabled: !featureFlags.ocr,
-    },
-    [QueueName.VideoConversion]: {
-      icon: mdiVideo,
-      title: $getQueueName(QueueName.VideoConversion),
-      subtitle: $t('admin.video_conversion_job_description'),
-      allText: $t('all'),
-      missingText: $t('missing'),
-    },
-    [QueueName.StorageTemplateMigration]: {
-      icon: mdiFolderMove,
-      title: $getQueueName(QueueName.StorageTemplateMigration),
-      missingText: $t('start'),
-      description: StorageMigrationDescription,
-    },
-    [QueueName.Migration]: {
-      icon: mdiFolderMove,
-      title: $getQueueName(QueueName.Migration),
-      subtitle: $t('admin.migration_job_description'),
-      missingText: $t('start'),
-    },
-  };
-
-  let jobList = Object.entries(jobDetails) as [QueueName, JobDetails][];
-
-  async function handleCommand(name: QueueName, dto: QueueCommandDto) {
-    const title = jobDetails[name]?.title;
-
-    try {
-      jobs[name] = await runQueueCommandLegacy({ name, queueCommandDto: dto });
-
-      switch (dto.command) {
-        case QueueCommand.Empty: {
-          toastManager.success($t('admin.cleared_jobs', { values: { job: title } }));
-          break;
-        }
-      }
-    } catch (error) {
-      handleError(error, $t('admin.failed_job_command', { values: { command: dto.command, job: title } }));
-    }
-  }
-</script>
-
-<div class="flex flex-col gap-7">
-  {#each jobList as [jobName, { title, subtitle, description, disabled, allText, refreshText, missingText, icon, handleCommand: handleCommandOverride }] (jobName)}
-    {@const { jobCounts: statistics, queueStatus } = jobs[jobName]}
-    <JobTile
-      {icon}
-      {title}
-      {disabled}
-      {subtitle}
-      {description}
-      {allText}
-      {refreshText}
-      {missingText}
-      {statistics}
-      {queueStatus}
-      onCommand={(command) => (handleCommandOverride || handleCommand)(jobName, command)}
-    />
-  {/each}
-</div>

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

@@ -9,9 +9,9 @@
   import { generateId } from '$lib/utils/generate-id';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
-  import { IconButton, modalManager } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
   import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
-  import { onDestroy, tick } from 'svelte';
+  import { onDestroy, onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import SearchHistoryBox from './search-history-box.svelte';
 
@@ -31,6 +31,8 @@
   let isSearchSuggestions = $state(false);
   let selectedId: string | undefined = $state();
   let close: (() => Promise<void>) | undefined;
+  let showSearchTypeDropdown = $state(false);
+  let currentSearchType = $state('smart');
 
   const listboxId = generateId();
   const searchTypeId = generateId();
@@ -70,6 +72,7 @@
 
   const onFocusIn = () => {
     searchStore.isSearchEnabled = true;
+    getSearchType();
   };
 
   const onFocusOut = () => {
@@ -98,6 +101,9 @@
     const searchResult = await result.onClose;
     close = undefined;
 
+    // Refresh search type after modal closes
+    getSearchType();
+
     if (!searchResult) {
       return;
     }
@@ -139,6 +145,7 @@
 
   const onEscape = () => {
     closeDropdown();
+    closeSearchTypeDropdown();
   };
 
   const onArrow = async (direction: 1 | -1) => {
@@ -168,6 +175,20 @@
     searchHistoryBox?.clearSelection();
   };
 
+  const toggleSearchTypeDropdown = () => {
+    showSearchTypeDropdown = !showSearchTypeDropdown;
+  };
+
+  const closeSearchTypeDropdown = () => {
+    showSearchTypeDropdown = false;
+  };
+
+  const selectSearchType = (type: string) => {
+    localStorage.setItem('searchQueryType', type);
+    currentSearchType = type;
+    showSearchTypeDropdown = false;
+  };
+
   const onsubmit = (event: Event) => {
     event.preventDefault();
     onSubmit();
@@ -180,17 +201,18 @@
       case 'metadata':
       case 'description':
       case 'ocr': {
+        currentSearchType = searchType;
         return searchType;
       }
       default: {
+        currentSearchType = 'smart';
         return 'smart';
       }
     }
   }
 
   function getSearchTypeText(): string {
-    const searchType = getSearchType();
-    switch (searchType) {
+    switch (currentSearchType) {
       case 'smart': {
         return $t('context');
       }
@@ -203,8 +225,22 @@
       case 'ocr': {
         return $t('ocr');
       }
+      default: {
+        return $t('context');
+      }
     }
   }
+
+  onMount(() => {
+    getSearchType();
+  });
+
+  const searchTypes = [
+    { value: 'smart', label: () => $t('context') },
+    { value: 'metadata', label: () => $t('filename') },
+    { value: 'description', label: () => $t('description') },
+    { value: 'ocr', label: () => $t('ocr') },
+  ] as const;
 </script>
 
 <svelte:document
@@ -293,11 +329,34 @@
         class:max-md:hidden={value}
         class:end-28={value.length > 0}
       >
-        <p
-          class="bg-immich-primary text-white dark:bg-immich-dark-primary/90 dark:text-black/75 rounded-full px-3 py-1 text-xs"
-        >
-          {getSearchTypeText()}
-        </p>
+        <div class="relative">
+          <Button
+            class="bg-immich-primary text-white dark:bg-immich-dark-primary/90 dark:text-black/75 rounded-full px-3 py-1 text-xs hover:opacity-80 transition-opacity cursor-pointer"
+            onclick={toggleSearchTypeDropdown}
+            aria-expanded={showSearchTypeDropdown}
+            aria-haspopup="listbox"
+          >
+            {getSearchTypeText()}
+          </Button>
+
+          {#if showSearchTypeDropdown}
+            <div
+              class="absolute top-full right-0 mt-1 bg-white dark:bg-immich-dark-gray border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 min-w-32 z-9999"
+              use:focusOutside={{ onFocusOut: closeSearchTypeDropdown }}
+            >
+              {#each searchTypes as searchType (searchType.value)}
+                <button
+                  type="button"
+                  class="w-full text-left px-3 py-2 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors
+                         {currentSearchType === searchType.value ? 'bg-gray-100 dark:bg-gray-700' : ''}"
+                  onclick={() => selectSearchType(searchType.value)}
+                >
+                  {searchType.label()}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
       </div>
     {/if}
 

web/src/lib/constants.ts

@@ -23,7 +23,7 @@ export enum AppRoute {
   ADMIN_LIBRARY_MANAGEMENT = '/admin/library-management',
   ADMIN_SETTINGS = '/admin/system-settings',
   ADMIN_STATS = '/admin/server-status',
-  ADMIN_JOBS = '/admin/jobs-status',
+  ADMIN_QUEUES = '/admin/queues',
   ADMIN_REPAIR = '/admin/repair',
 
   ALBUMS = '/albums',

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

@@ -4,6 +4,7 @@ import type {
   AlbumResponseDto,
   LibraryResponseDto,
   LoginResponseDto,
+  QueueResponseDto,
   SharedLinkResponseDto,
   SystemConfigDto,
   UserAdminResponseDto,
@@ -21,6 +22,8 @@ export type Events = {
 
   AlbumDelete: [AlbumResponseDto];
 
+  QueueUpdate: [QueueResponseDto];
+
   SharedLinkCreate: [SharedLinkResponseDto];
   SharedLinkUpdate: [SharedLinkResponseDto];
   SharedLinkDelete: [SharedLinkResponseDto];

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

@@ -0,0 +1,45 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import type { QueueSnapshot } from '$lib/types';
+import { getQueues, type QueueResponseDto } from '@immich/sdk';
+import { DateTime } from 'luxon';
+
+export class QueueManager {
+  #snapshots = $state<QueueSnapshot[]>([]);
+  #queues: QueueResponseDto[] = $derived(this.#snapshots.at(-1)?.snapshot ?? []);
+
+  #interval?: ReturnType<typeof setInterval>;
+  #listenerCount = 0;
+
+  get snapshots() {
+    return this.#snapshots;
+  }
+
+  get queues() {
+    return this.#queues;
+  }
+
+  constructor() {
+    eventManager.on('QueueUpdate', () => void this.refresh());
+  }
+
+  listen() {
+    if (!this.#interval) {
+      this.#interval = setInterval(() => void this.refresh(true), 3000);
+    }
+
+    this.#listenerCount++;
+    void this.refresh();
+
+    return () => this.#listenerCount--;
+  }
+
+  async refresh(tick = false) {
+    this.#snapshots.push({
+      timestamp: DateTime.now().toMillis(),
+      snapshot: this.#listenerCount > 0 || !tick ? await getQueues().catch(() => undefined) : undefined,
+    });
+    this.#snapshots = this.#snapshots.slice(-30);
+  }
+}
+
+export const queueManager = new QueueManager();

web/src/lib/modals/UserEditModal.svelte

@@ -89,7 +89,7 @@
 
       <Text size="small" class="mt-2" color="muted">
         {$t('admin.note_apply_storage_label_previous_assets')}
-        <Link href={AppRoute.ADMIN_JOBS}>
+        <Link href={AppRoute.ADMIN_QUEUES}>
           {$t('admin.storage_template_migration_job')}
         </Link>
       </Text>

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

@@ -0,0 +1,246 @@
+import { goto } from '$app/navigation';
+import { AppRoute } from '$lib/constants';
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
+import { user } from '$lib/stores/user.store';
+import { handleError } from '$lib/utils/handle-error';
+import { getFormatter } from '$lib/utils/i18n';
+import { emptyQueue, getQueue, QueueName, updateQueue, type QueueResponseDto } from '@immich/sdk';
+import { modalManager, toastManager, type ActionItem, type IconLike } from '@immich/ui';
+import {
+  mdiClose,
+  mdiCog,
+  mdiContentDuplicate,
+  mdiDatabaseOutline,
+  mdiFaceRecognition,
+  mdiFileJpgBox,
+  mdiFileXmlBox,
+  mdiFolderMove,
+  mdiImageSearch,
+  mdiLibraryShelves,
+  mdiOcr,
+  mdiPause,
+  mdiPlay,
+  mdiPlus,
+  mdiStateMachine,
+  mdiSync,
+  mdiTable,
+  mdiTagFaces,
+  mdiTrashCanOutline,
+  mdiTrayFull,
+  mdiVideo,
+} from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+import { get } from 'svelte/store';
+
+type QueueItem = {
+  icon: IconLike;
+  title: string;
+  subtitle?: string;
+};
+
+export const getQueuesActions = ($t: MessageFormatter) => {
+  const ViewQueues: ActionItem = {
+    title: $t('admin.queues'),
+    description: $t('admin.queues_page_description'),
+    icon: mdiSync,
+    type: $t('page'),
+    isGlobal: true,
+    $if: () => get(user)?.isAdmin,
+    onAction: () => goto(AppRoute.ADMIN_QUEUES),
+  };
+
+  const CreateJob: ActionItem = {
+    icon: mdiPlus,
+    title: $t('admin.create_job'),
+    type: $t('command'),
+    shortcuts: { shift: true, key: 'n' },
+    onAction: async () => {
+      await modalManager.show(JobCreateModal, {});
+    },
+  };
+
+  const ManageConcurrency: ActionItem = {
+    icon: mdiCog,
+    title: $t('admin.manage_concurrency'),
+    description: $t('admin.manage_concurrency_description'),
+    type: $t('page'),
+    onAction: () => goto(`${AppRoute.ADMIN_SETTINGS}?isOpen=job`),
+  };
+
+  return { ViewQueues, ManageConcurrency, CreateJob };
+};
+
+export const getQueueActions = ($t: MessageFormatter, queue: QueueResponseDto) => {
+  const Pause: ActionItem = {
+    icon: mdiPause,
+    title: $t('pause'),
+    $if: () => !queue.isPaused,
+    onAction: () => handlePauseQueue(queue),
+  };
+
+  const Resume: ActionItem = {
+    icon: mdiPlay,
+    title: $t('resume'),
+    $if: () => queue.isPaused,
+    onAction: () => handleResumeQueue(queue),
+  };
+
+  const Empty: ActionItem = {
+    icon: mdiClose,
+    title: $t('clear'),
+    onAction: () => handleEmptyQueue(queue),
+  };
+
+  const RemoveFailedJobs: ActionItem = {
+    icon: mdiTrashCanOutline,
+    color: 'danger',
+    title: $t('admin.remove_failed_jobs'),
+    onAction: () => handleRemoveFailedJobs(queue),
+  };
+
+  return { Pause, Resume, Empty, RemoveFailedJobs };
+};
+
+export const handlePauseQueue = async (queue: QueueResponseDto) => {
+  const response = await updateQueue({ name: queue.name, queueUpdateDto: { isPaused: true } });
+  eventManager.emit('QueueUpdate', response);
+};
+
+export const handleResumeQueue = async (queue: QueueResponseDto) => {
+  const response = await updateQueue({ name: queue.name, queueUpdateDto: { isPaused: false } });
+  eventManager.emit('QueueUpdate', response);
+};
+
+export const handleEmptyQueue = async (queue: QueueResponseDto) => {
+  const $t = await getFormatter();
+  const item = asQueueItem($t, queue);
+
+  try {
+    await emptyQueue({ name: queue.name, queueDeleteDto: { failed: false } });
+    const response = await getQueue({ name: queue.name });
+    eventManager.emit('QueueUpdate', response);
+    toastManager.success($t('admin.cleared_jobs', { values: { job: item.title } }));
+  } catch (error) {
+    handleError(error, $t('errors.something_went_wrong'));
+  }
+};
+
+const handleRemoveFailedJobs = async (queue: QueueResponseDto) => {
+  const $t = await getFormatter();
+
+  try {
+    await emptyQueue({ name: queue.name, queueDeleteDto: { failed: true } });
+    const response = await getQueue({ name: queue.name });
+    eventManager.emit('QueueUpdate', response);
+    toastManager.success();
+  } catch (error) {
+    handleError(error, $t('errors.something_went_wrong'));
+  }
+};
+
+export const asQueueItem = ($t: MessageFormatter, queue: { name: QueueName }): QueueItem => {
+  // TODO merge this mapping with data from QueuePanel.svelte
+  const items: Record<QueueName, QueueItem> = {
+    [QueueName.ThumbnailGeneration]: {
+      icon: mdiFileJpgBox,
+      title: $t('admin.thumbnail_generation_job'),
+      subtitle: $t('admin.thumbnail_generation_job_description'),
+    },
+    [QueueName.MetadataExtraction]: {
+      icon: mdiTable,
+      title: $t('admin.metadata_extraction_job'),
+      subtitle: $t('admin.metadata_extraction_job_description'),
+    },
+    [QueueName.Library]: {
+      icon: mdiLibraryShelves,
+      title: $t('external_libraries'),
+      subtitle: $t('admin.library_tasks_description'),
+    },
+    [QueueName.Sidecar]: {
+      title: $t('admin.sidecar_job'),
+      icon: mdiFileXmlBox,
+      subtitle: $t('admin.sidecar_job_description'),
+    },
+    [QueueName.SmartSearch]: {
+      icon: mdiImageSearch,
+      title: $t('admin.machine_learning_smart_search'),
+      subtitle: $t('admin.smart_search_job_description'),
+    },
+    [QueueName.DuplicateDetection]: {
+      icon: mdiContentDuplicate,
+      title: $t('admin.machine_learning_duplicate_detection'),
+      subtitle: $t('admin.duplicate_detection_job_description'),
+    },
+    [QueueName.FaceDetection]: {
+      icon: mdiFaceRecognition,
+      title: $t('admin.face_detection'),
+      subtitle: $t('admin.face_detection_description'),
+    },
+    [QueueName.FacialRecognition]: {
+      icon: mdiTagFaces,
+      title: $t('admin.machine_learning_facial_recognition'),
+      subtitle: $t('admin.facial_recognition_job_description'),
+    },
+    [QueueName.Ocr]: {
+      icon: mdiOcr,
+      title: $t('admin.machine_learning_ocr'),
+      subtitle: $t('admin.ocr_job_description'),
+    },
+    [QueueName.VideoConversion]: {
+      icon: mdiVideo,
+      title: $t('admin.video_conversion_job'),
+      subtitle: $t('admin.video_conversion_job_description'),
+    },
+    [QueueName.StorageTemplateMigration]: {
+      icon: mdiFolderMove,
+      title: $t('admin.storage_template_migration'),
+    },
+    [QueueName.Migration]: {
+      icon: mdiFolderMove,
+      title: $t('admin.migration_job'),
+      subtitle: $t('admin.migration_job_description'),
+    },
+    [QueueName.BackgroundTask]: {
+      icon: mdiTrayFull,
+      title: $t('admin.background_task_job'),
+    },
+    [QueueName.Search]: {
+      icon: '',
+      title: $t('search'),
+    },
+    [QueueName.Notifications]: {
+      icon: '',
+      title: $t('notifications'),
+    },
+    [QueueName.BackupDatabase]: {
+      icon: mdiDatabaseOutline,
+      title: $t('admin.backup_database'),
+    },
+    [QueueName.Workflow]: {
+      icon: mdiStateMachine,
+      title: $t('workflow'),
+    },
+  };
+
+  return items[queue.name];
+};
+
+export const asQueueSlug = (name: QueueName) => {
+  return name.replaceAll(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+};
+
+export const fromQueueSlug = (slug: string): QueueName | undefined => {
+  const name = slug.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+  if (Object.values(QueueName).includes(name as QueueName)) {
+    return name as QueueName;
+  }
+};
+
+export const getQueueDetailUrl = (queue: QueueResponseDto) => {
+  return `${AppRoute.ADMIN_QUEUES}/${asQueueSlug(queue.name)}`;
+};
+
+export const handleViewQueue = (queue: QueueResponseDto) => {
+  return goto(getQueueDetailUrl(queue));
+};

web/src/lib/sidebars/AdminSidebar.svelte

@@ -2,16 +2,16 @@
   import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
   import { AppRoute } from '$lib/constants';
   import { NavbarItem } from '@immich/ui';
-  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync } from '@mdi/js';
+  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiTrayFull } from '@mdi/js';
   import { t } from 'svelte-i18n';
 </script>
 
 <div class="h-full flex flex-col justify-between gap-2">
   <div class="flex flex-col pt-8 pe-4 gap-1">
     <NavbarItem title={$t('users')} href={AppRoute.ADMIN_USERS} icon={mdiAccountMultipleOutline} />
-    <NavbarItem title={$t('jobs')} href={AppRoute.ADMIN_JOBS} icon={mdiSync} />
-    <NavbarItem title={$t('settings')} href={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
     <NavbarItem title={$t('external_libraries')} href={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
+    <NavbarItem title={$t('admin.queues')} href={AppRoute.ADMIN_QUEUES} icon={mdiTrayFull} />
+    <NavbarItem title={$t('settings')} href={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
     <NavbarItem title={$t('server_stats')} href={AppRoute.ADMIN_STATS} icon={mdiServer} />
   </div>
 

web/src/lib/types.ts

@@ -1,4 +1,4 @@
-import type { ServerVersionResponseDto } from '@immich/sdk';
+import type { QueueResponseDto, ServerVersionResponseDto } from '@immich/sdk';
 
 export interface ReleaseEvent {
   isAvailable: boolean;
@@ -7,3 +7,5 @@ export interface ReleaseEvent {
   serverVersion: ServerVersionResponseDto;
   releaseVersion: ServerVersionResponseDto;
 }
+
+export type QueueSnapshot = { timestamp: number; snapshot?: QueueResponseDto[] };

web/src/routes/+layout.svelte

@@ -14,6 +14,7 @@
   import { themeManager } from '$lib/managers/theme-manager.svelte';
   import ServerRestartingModal from '$lib/modals/ServerRestartingModal.svelte';
   import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
+  import { getQueuesActions } from '$lib/services/queue.service';
   import { user } from '$lib/stores/user.store';
   import { closeWebsocketConnection, openWebsocketConnection, websocketStore } from '$lib/stores/websocket';
   import type { ReleaseEvent } from '$lib/types';
@@ -21,7 +22,7 @@
   import { maintenanceShouldRedirect } from '$lib/utils/maintenance';
   import { isAssetViewerRoute } from '$lib/utils/navigation';
   import { CommandPaletteContext, modalManager, setTranslations, type ActionItem } from '@immich/ui';
-  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync, mdiThemeLightDark } from '@mdi/js';
+  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiThemeLightDark } from '@mdi/js';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import '../app.css';
@@ -142,15 +143,9 @@
       icon: mdiAccountMultipleOutline,
       onAction: () => goto(AppRoute.ADMIN_USERS),
     },
-    {
-      title: $t('jobs'),
-      description: $t('admin.jobs_page_description'),
-      icon: mdiSync,
-      onAction: () => goto(AppRoute.ADMIN_JOBS),
-    },
     {
       title: $t('settings'),
-      description: $t('admin.jobs_page_description'),
+      description: $t('admin.settings_page_description'),
       icon: mdiCog,
       onAction: () => goto(AppRoute.ADMIN_SETTINGS),
     },
@@ -168,7 +163,7 @@
     },
   ].map((route) => ({ ...route, type: $t('page'), isGlobal: true, $if: () => $user?.isAdmin }));
 
-  const commands = $derived([...userCommands, ...adminCommands]);
+  const commands = $derived([...userCommands, ...adminCommands, ...Object.values(getQueuesActions($t))]);
 </script>
 
 <OnEvents {onReleaseEvent} />

web/src/routes/admin/jobs-status/+page.svelte

@@ -1,116 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import JobsPanel from '$lib/components/jobs/JobsPanel.svelte';
-  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import { AppRoute } from '$lib/constants';
-  import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
-  import { asyncTimeout } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import {
-    getQueuesLegacy,
-    QueueCommand,
-    QueueName,
-    runQueueCommandLegacy,
-    type QueuesResponseLegacyDto,
-  } from '@immich/sdk';
-  import { Button, CommandPaletteContext, HStack, modalManager, Text, type ActionItem } from '@immich/ui';
-  import { mdiCog, mdiPlay, mdiPlus } from '@mdi/js';
-  import { onDestroy, onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import type { PageData } from './$types';
-
-  interface Props {
-    data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  let jobs: QueuesResponseLegacyDto | undefined = $state();
-
-  let running = true;
-
-  const pausedJobs = $derived(
-    Object.entries(jobs ?? {})
-      .filter(([_, queue]) => queue.queueStatus?.isPaused)
-      .map(([name]) => name as QueueName),
-  );
-
-  const handleResumePausedJobs = async () => {
-    try {
-      for (const name of pausedJobs) {
-        await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
-      }
-      // Refresh jobs status immediately after resuming
-      jobs = await getQueuesLegacy();
-    } catch (error) {
-      handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
-    }
-  };
-
-  const handleCreateJob = () => modalManager.show(JobCreateModal);
-
-  const jobConcurrencyLink = `${AppRoute.ADMIN_SETTINGS}?isOpen=job`;
-
-  const commands: ActionItem[] = [
-    {
-      title: $t('admin.create_job'),
-      type: $t('command'),
-      icon: mdiPlus,
-      onAction: () => void handleCreateJob(),
-      shortcuts: { shift: true, key: 'n' },
-    },
-    {
-      title: $t('admin.manage_concurrency'),
-      description: $t('admin.manage_concurrency_description'),
-      type: $t('page'),
-      icon: mdiCog,
-      onAction: () => goto(jobConcurrencyLink),
-    },
-  ];
-
-  onMount(async () => {
-    while (running) {
-      jobs = await getQueuesLegacy();
-      await asyncTimeout(5000);
-    }
-  });
-
-  onDestroy(() => {
-    running = false;
-  });
-</script>
-
-<CommandPaletteContext {commands} />
-
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={0}>
-      {#if pausedJobs.length > 0}
-        <Button
-          leadingIcon={mdiPlay}
-          onclick={handleResumePausedJobs}
-          size="small"
-          variant="ghost"
-          title={pausedJobs.join(', ')}
-        >
-          <Text class="hidden md:block">
-            {$t('resume_paused_jobs', { values: { count: pausedJobs.length } })}
-          </Text>
-        </Button>
-      {/if}
-      <Button leadingIcon={mdiPlus} onclick={handleCreateJob} size="small" variant="ghost" color="secondary">
-        <Text class="hidden md:block">{$t('admin.create_job')}</Text>
-      </Button>
-      <Button leadingIcon={mdiCog} href={jobConcurrencyLink} size="small" variant="ghost" color="secondary">
-        <Text class="hidden md:block">{$t('admin.manage_concurrency')}</Text>
-      </Button>
-    </HStack>
-  {/snippet}
-  <section id="setting-content" class="flex place-content-center sm:mx-4">
-    <section class="w-full pb-28 sm:w-5/6 md:w-212.5">
-      {#if jobs}
-        <JobsPanel {jobs} />
-      {/if}
-    </section>
-  </section>
-</AdminPageLayout>

web/src/routes/admin/jobs-status/+page.ts

@@ -1,18 +1,5 @@
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
-import { getQueuesLegacy } from '@immich/sdk';
+import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
-export const load = (async ({ url }) => {
-  await authenticate(url, { admin: true });
-
-  const jobs = await getQueuesLegacy();
-  const $t = await getFormatter();
-
-  return {
-    jobs,
-    meta: {
-      title: $t('admin.job_status'),
-    },
-  };
-}) satisfies PageLoad;
+export const load = (() => redirect(307, AppRoute.ADMIN_QUEUES)) satisfies PageLoad;

web/src/routes/admin/queues/+page.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
+  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
+  import JobsPanel from '$lib/components/QueuePanel.svelte';
+  import { queueManager } from '$lib/managers/queue-manager.svelte';
+  import { getQueuesActions } from '$lib/services/queue.service';
+  import { handleError } from '$lib/utils/handle-error';
+  import { QueueCommand, runQueueCommandLegacy, type QueueResponseDto } from '@immich/sdk';
+  import { Button, CommandPaletteContext, HStack, Text, type ActionItem } from '@immich/ui';
+  import { mdiPlay } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  const { data }: Props = $props();
+
+  onMount(() => queueManager.listen());
+
+  let queues = $derived<QueueResponseDto[]>(queueManager.queues);
+  const pausedQueues = $derived(queues.filter(({ isPaused }) => isPaused).map(({ name }) => name));
+
+  const handleResumePausedJobs = async () => {
+    try {
+      for (const name of pausedQueues) {
+        await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
+      }
+      await queueManager.refresh();
+    } catch (error) {
+      handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
+    }
+  };
+
+  const { CreateJob, ManageConcurrency } = $derived(getQueuesActions($t));
+  const commands: ActionItem[] = $derived([CreateJob, ManageConcurrency]);
+
+  const onQueueUpdate = (update: QueueResponseDto) => {
+    queues = queues.map((queue) => {
+      if (queue.name === update.name) {
+        return update;
+      }
+      return queue;
+    });
+  };
+</script>
+
+<CommandPaletteContext {commands} />
+
+<OnEvents {onQueueUpdate} />
+
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
+  {#snippet buttons()}
+    <HStack gap={0}>
+      {#if pausedQueues.length > 0}
+        <Button
+          leadingIcon={mdiPlay}
+          onclick={handleResumePausedJobs}
+          size="small"
+          variant="ghost"
+          title={pausedQueues.join(', ')}
+        >
+          <Text class="hidden md:block">
+            {$t('resume_paused_jobs', { values: { count: pausedQueues.length } })}
+          </Text>
+        </Button>
+      {/if}
+      <HeaderButton action={CreateJob} />
+      <HeaderButton action={ManageConcurrency} />
+    </HStack>
+  {/snippet}
+
+  <section id="setting-content" class="flex place-content-center sm:mx-4">
+    <section class="w-full pb-28 sm:w-5/6 md:w-212.5">
+      {#if queues}
+        <JobsPanel {queues} />
+      {/if}
+    </section>
+  </section>
+</AdminPageLayout>

web/src/routes/admin/queues/+page.ts

@@ -0,0 +1,18 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getQueues } from '@immich/sdk';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate(url, { admin: true });
+
+  const queues = await getQueues();
+  const $t = await getFormatter();
+
+  return {
+    queues,
+    meta: {
+      title: $t('admin.queues'),
+    },
+  };
+}) satisfies PageLoad;

web/src/routes/admin/queues/[name]/+page.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
+  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
+  import QueueGraph from '$lib/components/QueueGraph.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { queueManager } from '$lib/managers/queue-manager.svelte';
+  import { asQueueItem, getQueueActions } from '$lib/services/queue.service';
+  import { type QueueResponseDto } from '@immich/sdk';
+  import { Badge, Card, CardBody, CardHeader, CardTitle, Container, Heading, HStack, Icon, Text } from '@immich/ui';
+  import { mdiClockTimeTwoOutline } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  const { data }: Props = $props();
+
+  let queue = $derived(data.queue);
+
+  const { Pause, Resume, Empty, RemoveFailedJobs } = $derived(getQueueActions($t, queue));
+  const item = $derived(asQueueItem($t, queue));
+
+  onMount(() => queueManager.listen());
+
+  const onQueueUpdate = (update: QueueResponseDto) => {
+    if (update.name === queue.name) {
+      queue = update;
+    }
+  };
+</script>
+
+<OnEvents {onQueueUpdate} />
+
+<AdminPageLayout breadcrumbs={[{ title: $t('admin.queues'), href: AppRoute.ADMIN_QUEUES }, { title: item.title }]}>
+  {#snippet buttons()}
+    <HStack gap={0}>
+      <HeaderButton action={Pause} />
+      <HeaderButton action={Resume} />
+      <HeaderButton action={Empty} />
+      <HeaderButton action={RemoveFailedJobs} />
+    </HStack>
+  {/snippet}
+  <div>
+    <Container size="large" center>
+      <div class="mb-1 mt-4 flex items-center gap-2">
+        <Heading tag="h1" size="large">{item.title}</Heading>
+        {#if queue.isPaused}
+          <Badge color="warning">
+            {$t('paused')}
+          </Badge>
+        {/if}
+      </div>
+      <Text color="muted" class="mb-4">{item.subtitle}</Text>
+
+      <div class="flex gap-1 mb-4">
+        <Badge>{$t('active_count', { values: { count: queue.statistics.active } })}</Badge>
+        <Badge>{$t('waiting_count', { values: { count: queue.statistics.waiting } })}</Badge>
+        {#if queue.statistics.failed > 0}
+          <Badge color="danger">{$t('failed_count', { values: { count: queue.statistics.failed } })}</Badge>
+        {/if}
+      </div>
+
+      <div class="mt-8">
+        <Card color="secondary">
+          <CardHeader>
+            <div class="flex items-center gap-2 text-primary">
+              <Icon icon={mdiClockTimeTwoOutline} size="1.5rem" />
+              <CardTitle>{$t('admin.jobs_over_time')}</CardTitle>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <QueueGraph {queue} class="h-[300px]" />
+          </CardBody>
+        </Card>
+      </div>
+    </Container>
+  </div>
+</AdminPageLayout>

web/src/routes/admin/queues/[name]/+page.ts

@@ -0,0 +1,31 @@
+import { AppRoute } from '$lib/constants';
+import { fromQueueSlug } from '$lib/services/queue.service';
+import { authenticate, requestServerInfo } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getQueue, getQueueJobs, QueueJobStatus } from '@immich/sdk';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params, url }) => {
+  await authenticate(url, { admin: true });
+  await requestServerInfo();
+
+  const name = fromQueueSlug(params.name);
+  if (!name) {
+    redirect(302, AppRoute.ADMIN_QUEUES);
+  }
+
+  const [queue, failedJobs] = await Promise.all([
+    getQueue({ name }),
+    getQueueJobs({ name, status: [QueueJobStatus.Failed, QueueJobStatus.Paused] }),
+  ]);
+  const $t = await getFormatter();
+
+  return {
+    queue,
+    failedJobs,
+    meta: {
+      title: $t('admin.queue_details'),
+    },
+  };
+}) satisfies PageLoad;