tmp: build server image with lcms-enabled base

* fix(deps): update typescript-projects

* chore: downgrade dependencies

* chore: downgrade svelte-gestures

* fix: svelte/no-navigation-without-resolve

* fix: dumb test

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Zack Pollard <zack@futo.org>
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
Co-authored-by: Jason Rasmussen <jason@rasm.me>

.devcontainer/devcontainer.json

@@ -5,8 +5,7 @@
     "immich-server",
     "redis",
     "database",
-    "immich-machine-learning",
-    "init"
+    "immich-machine-learning"
   ],
   "dockerComposeFile": [
     "../docker/docker-compose.dev.yml",

.gitignore

@@ -18,6 +18,7 @@ mobile/libisar.dylib
 mobile/openapi/test
 mobile/openapi/doc
 mobile/openapi/.openapi-generator/FILES
+mobile/ios/build
 
 open-api/typescript-sdk/build
 mobile/android/fastlane/report.xml

docs/docs/install/environment-variables.md

@@ -169,8 +169,6 @@ Redis (Sentinel) URL example JSON before encoding:
 | `MACHINE_LEARNING_ANN_TUNING_LEVEL`                         | ARM-NN GPU tuning level (1: rapid, 2: normal, 3: exhaustive)                                        |               `2`               | machine learning |
 | `MACHINE_LEARNING_DEVICE_IDS`<sup>\*4</sup>                 | Device IDs to use in multi-GPU environments                                                         |               `0`               | machine learning |
 | `MACHINE_LEARNING_MAX_BATCH_SIZE__FACIAL_RECOGNITION`       | Set the maximum number of faces that will be processed at once by the facial recognition model      |  None (`1` if using OpenVINO)   | machine learning |
-| `MACHINE_LEARNING_PING_TIMEOUT`                             | How long (ms) to wait for a PING response when checking if an ML server is available                |             `2000`              | server           |
-| `MACHINE_LEARNING_AVAILABILITY_BACKOFF_TIME`                | How long to ignore ML servers that are offline before trying again                                  |             `30000`             | server           |
 | `MACHINE_LEARNING_RKNN`                                     | Enable RKNN hardware acceleration if supported                                                      |             `True`              | machine learning |
 | `MACHINE_LEARNING_RKNN_THREADS`                             | How many threads of RKNN runtime should be spinned up while inferencing.                            |               `1`               | machine learning |
 

i18n/en.json

@@ -123,6 +123,13 @@
     "logging_enable_description": "Enable logging",
     "logging_level_description": "When enabled, what log level to use.",
     "logging_settings": "Logging",
+    "machine_learning_availability_checks": "Availability checks",
+    "machine_learning_availability_checks_description": "Automatically detect and prefer available machine learning servers",
+    "machine_learning_availability_checks_enabled": "Enable availability checks",
+    "machine_learning_availability_checks_interval": "Check interval",
+    "machine_learning_availability_checks_interval_description": "Interval in milliseconds between availability checks",
+    "machine_learning_availability_checks_timeout": "Request timeout",
+    "machine_learning_availability_checks_timeout_description": "Timeout in milliseconds for availability checks",
     "machine_learning_clip_model": "CLIP model",
     "machine_learning_clip_model_description": "The name of a CLIP model listed <link>here</link>. Note that you must re-run the 'Smart Search' job for all images upon changing a model.",
     "machine_learning_duplicate_detection": "Duplicate Detection",
@@ -913,6 +920,7 @@
     "cant_get_number_of_comments": "Can't get number of comments",
     "cant_search_people": "Can't search people",
     "cant_search_places": "Can't search places",
+    "clipboard_unsupported_mime_type": "The system clipboard does not support copying this type of content: {mimeType}",
     "error_adding_assets_to_album": "Error adding assets to album",
     "error_adding_users_to_album": "Error adding users to album",
     "error_deleting_shared_user": "Error deleting shared user",
@@ -1353,8 +1361,6 @@
   "my_albums": "My albums",
   "name": "Name",
   "name_or_nickname": "Name or nickname",
-  "navigate": "Navigate",
-  "navigate_to_time": "Navigate to Time",
   "network_requirement_photos_upload": "Use cellular data to backup photos",
   "network_requirement_videos_upload": "Use cellular data to backup videos",
   "network_requirements": "Network Requirements",
@@ -1918,6 +1924,7 @@
   "stacktrace": "Stacktrace",
   "start": "Start",
   "start_date": "Start date",
+  "start_date_before_end_date": "Start date must be before end date",
   "state": "State",
   "status": "Status",
   "stop_casting": "Stop casting",

mise.toml

@@ -1,7 +1,7 @@
 [tools]
 node = "22.19.0"
 flutter = "3.35.4"
-pnpm = "10.14.0"
+pnpm = "10.15.1"
 dart = "3.8.2"
 
 [tools."github:CQLabs/homebrew-dcm"]

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

@@ -10,6 +10,9 @@ class LocalAlbumAssetEntity extends Table with DriftDefaultsMixin {
 
   TextColumn get albumId => text().references(LocalAlbumEntity, #id, onDelete: KeyAction.cascade)();
 
+  // Used for mark & sweep
+  BoolColumn get marker_ => boolean().nullable()();
+
   @override
   Set<Column> get primaryKey => {assetId, albumId};
 }

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

@@ -15,11 +15,13 @@ typedef $$LocalAlbumAssetEntityTableCreateCompanionBuilder =
     i1.LocalAlbumAssetEntityCompanion Function({
       required String assetId,
       required String albumId,
+      i0.Value<bool?> marker_,
     });
 typedef $$LocalAlbumAssetEntityTableUpdateCompanionBuilder =
     i1.LocalAlbumAssetEntityCompanion Function({
       i0.Value<String> assetId,
       i0.Value<String> albumId,
+      i0.Value<bool?> marker_,
     });
 
 final class $$LocalAlbumAssetEntityTableReferences
@@ -113,6 +115,11 @@ class $$LocalAlbumAssetEntityTableFilterComposer
     super.$addJoinBuilderToRootComposer,
     super.$removeJoinBuilderFromRootComposer,
   });
+  i0.ColumnFilters<bool> get marker_ => $composableBuilder(
+    column: $table.marker_,
+    builder: (column) => i0.ColumnFilters(column),
+  );
+
   i3.$$LocalAssetEntityTableFilterComposer get assetId {
     final i3.$$LocalAssetEntityTableFilterComposer composer = $composerBuilder(
       composer: this,
@@ -177,6 +184,11 @@ class $$LocalAlbumAssetEntityTableOrderingComposer
     super.$addJoinBuilderToRootComposer,
     super.$removeJoinBuilderFromRootComposer,
   });
+  i0.ColumnOrderings<bool> get marker_ => $composableBuilder(
+    column: $table.marker_,
+    builder: (column) => i0.ColumnOrderings(column),
+  );
+
   i3.$$LocalAssetEntityTableOrderingComposer get assetId {
     final i3.$$LocalAssetEntityTableOrderingComposer composer =
         $composerBuilder(
@@ -243,6 +255,9 @@ class $$LocalAlbumAssetEntityTableAnnotationComposer
     super.$addJoinBuilderToRootComposer,
     super.$removeJoinBuilderFromRootComposer,
   });
+  i0.GeneratedColumn<bool> get marker_ =>
+      $composableBuilder(column: $table.marker_, builder: (column) => column);
+
   i3.$$LocalAssetEntityTableAnnotationComposer get assetId {
     final i3.$$LocalAssetEntityTableAnnotationComposer composer =
         $composerBuilder(
@@ -344,16 +359,22 @@ class $$LocalAlbumAssetEntityTableTableManager
               ({
                 i0.Value<String> assetId = const i0.Value.absent(),
                 i0.Value<String> albumId = const i0.Value.absent(),
+                i0.Value<bool?> marker_ = const i0.Value.absent(),
               }) => i1.LocalAlbumAssetEntityCompanion(
                 assetId: assetId,
                 albumId: albumId,
+                marker_: marker_,
               ),
           createCompanionCallback:
-              ({required String assetId, required String albumId}) =>
-                  i1.LocalAlbumAssetEntityCompanion.insert(
-                    assetId: assetId,
-                    albumId: albumId,
-                  ),
+              ({
+                required String assetId,
+                required String albumId,
+                i0.Value<bool?> marker_ = const i0.Value.absent(),
+              }) => i1.LocalAlbumAssetEntityCompanion.insert(
+                assetId: assetId,
+                albumId: albumId,
+                marker_: marker_,
+              ),
           withReferenceMapper: (p0) => p0
               .map(
                 (e) => (
@@ -477,8 +498,22 @@ class $LocalAlbumAssetEntityTable extends i2.LocalAlbumAssetEntity
       'REFERENCES local_album_entity (id) ON DELETE CASCADE',
     ),
   );
+  static const i0.VerificationMeta _marker_Meta = const i0.VerificationMeta(
+    'marker_',
+  );
   @override
-  List<i0.GeneratedColumn> get $columns => [assetId, albumId];
+  late final i0.GeneratedColumn<bool> marker_ = i0.GeneratedColumn<bool>(
+    'marker',
+    aliasedName,
+    true,
+    type: i0.DriftSqlType.bool,
+    requiredDuringInsert: false,
+    defaultConstraints: i0.GeneratedColumn.constraintIsAlways(
+      'CHECK ("marker" IN (0, 1))',
+    ),
+  );
+  @override
+  List<i0.GeneratedColumn> get $columns => [assetId, albumId, marker_];
   @override
   String get aliasedName => _alias ?? actualTableName;
   @override
@@ -507,6 +542,12 @@ class $LocalAlbumAssetEntityTable extends i2.LocalAlbumAssetEntity
     } else if (isInserting) {
       context.missing(_albumIdMeta);
     }
+    if (data.containsKey('marker')) {
+      context.handle(
+        _marker_Meta,
+        marker_.isAcceptableOrUnknown(data['marker']!, _marker_Meta),
+      );
+    }
     return context;
   }
 
@@ -527,6 +568,10 @@ class $LocalAlbumAssetEntityTable extends i2.LocalAlbumAssetEntity
         i0.DriftSqlType.string,
         data['${effectivePrefix}album_id'],
       )!,
+      marker_: attachedDatabase.typeMapping.read(
+        i0.DriftSqlType.bool,
+        data['${effectivePrefix}marker'],
+      ),
     );
   }
 
@@ -545,15 +590,20 @@ class LocalAlbumAssetEntityData extends i0.DataClass
     implements i0.Insertable<i1.LocalAlbumAssetEntityData> {
   final String assetId;
   final String albumId;
+  final bool? marker_;
   const LocalAlbumAssetEntityData({
     required this.assetId,
     required this.albumId,
+    this.marker_,
   });
   @override
   Map<String, i0.Expression> toColumns(bool nullToAbsent) {
     final map = <String, i0.Expression>{};
     map['asset_id'] = i0.Variable<String>(assetId);
     map['album_id'] = i0.Variable<String>(albumId);
+    if (!nullToAbsent || marker_ != null) {
+      map['marker'] = i0.Variable<bool>(marker_);
+    }
     return map;
   }
 
@@ -565,6 +615,7 @@ class LocalAlbumAssetEntityData extends i0.DataClass
     return LocalAlbumAssetEntityData(
       assetId: serializer.fromJson<String>(json['assetId']),
       albumId: serializer.fromJson<String>(json['albumId']),
+      marker_: serializer.fromJson<bool?>(json['marker_']),
     );
   }
   @override
@@ -573,20 +624,26 @@ class LocalAlbumAssetEntityData extends i0.DataClass
     return <String, dynamic>{
       'assetId': serializer.toJson<String>(assetId),
       'albumId': serializer.toJson<String>(albumId),
+      'marker_': serializer.toJson<bool?>(marker_),
     };
   }
 
-  i1.LocalAlbumAssetEntityData copyWith({String? assetId, String? albumId}) =>
-      i1.LocalAlbumAssetEntityData(
-        assetId: assetId ?? this.assetId,
-        albumId: albumId ?? this.albumId,
-      );
+  i1.LocalAlbumAssetEntityData copyWith({
+    String? assetId,
+    String? albumId,
+    i0.Value<bool?> marker_ = const i0.Value.absent(),
+  }) => i1.LocalAlbumAssetEntityData(
+    assetId: assetId ?? this.assetId,
+    albumId: albumId ?? this.albumId,
+    marker_: marker_.present ? marker_.value : this.marker_,
+  );
   LocalAlbumAssetEntityData copyWithCompanion(
     i1.LocalAlbumAssetEntityCompanion data,
   ) {
     return LocalAlbumAssetEntityData(
       assetId: data.assetId.present ? data.assetId.value : this.assetId,
       albumId: data.albumId.present ? data.albumId.value : this.albumId,
+      marker_: data.marker_.present ? data.marker_.value : this.marker_,
     );
   }
 
@@ -594,51 +651,60 @@ class LocalAlbumAssetEntityData extends i0.DataClass
   String toString() {
     return (StringBuffer('LocalAlbumAssetEntityData(')
           ..write('assetId: $assetId, ')
-          ..write('albumId: $albumId')
+          ..write('albumId: $albumId, ')
+          ..write('marker_: $marker_')
           ..write(')'))
         .toString();
   }
 
   @override
-  int get hashCode => Object.hash(assetId, albumId);
+  int get hashCode => Object.hash(assetId, albumId, marker_);
   @override
   bool operator ==(Object other) =>
       identical(this, other) ||
       (other is i1.LocalAlbumAssetEntityData &&
           other.assetId == this.assetId &&
-          other.albumId == this.albumId);
+          other.albumId == this.albumId &&
+          other.marker_ == this.marker_);
 }
 
 class LocalAlbumAssetEntityCompanion
     extends i0.UpdateCompanion<i1.LocalAlbumAssetEntityData> {
   final i0.Value<String> assetId;
   final i0.Value<String> albumId;
+  final i0.Value<bool?> marker_;
   const LocalAlbumAssetEntityCompanion({
     this.assetId = const i0.Value.absent(),
     this.albumId = const i0.Value.absent(),
+    this.marker_ = const i0.Value.absent(),
   });
   LocalAlbumAssetEntityCompanion.insert({
     required String assetId,
     required String albumId,
+    this.marker_ = const i0.Value.absent(),
   }) : assetId = i0.Value(assetId),
        albumId = i0.Value(albumId);
   static i0.Insertable<i1.LocalAlbumAssetEntityData> custom({
     i0.Expression<String>? assetId,
     i0.Expression<String>? albumId,
+    i0.Expression<bool>? marker_,
   }) {
     return i0.RawValuesInsertable({
       if (assetId != null) 'asset_id': assetId,
       if (albumId != null) 'album_id': albumId,
+      if (marker_ != null) 'marker': marker_,
     });
   }
 
   i1.LocalAlbumAssetEntityCompanion copyWith({
     i0.Value<String>? assetId,
     i0.Value<String>? albumId,
+    i0.Value<bool?>? marker_,
   }) {
     return i1.LocalAlbumAssetEntityCompanion(
       assetId: assetId ?? this.assetId,
       albumId: albumId ?? this.albumId,
+      marker_: marker_ ?? this.marker_,
     );
   }
 
@@ -651,6 +717,9 @@ class LocalAlbumAssetEntityCompanion
     if (albumId.present) {
       map['album_id'] = i0.Variable<String>(albumId.value);
     }
+    if (marker_.present) {
+      map['marker'] = i0.Variable<bool>(marker_.value);
+    }
     return map;
   }
 
@@ -658,7 +727,8 @@ class LocalAlbumAssetEntityCompanion
   String toString() {
     return (StringBuffer('LocalAlbumAssetEntityCompanion(')
           ..write('assetId: $assetId, ')
-          ..write('albumId: $albumId')
+          ..write('albumId: $albumId, ')
+          ..write('marker_: $marker_')
           ..write(')'))
         .toString();
   }

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

@@ -93,7 +93,7 @@ class Drift extends $Drift implements IDatabaseRepository {
   }
 
   @override
-  int get schemaVersion => 10;
+  int get schemaVersion => 11;
 
   @override
   MigrationStrategy get migration => MigrationStrategy(
@@ -156,6 +156,9 @@ class Drift extends $Drift implements IDatabaseRepository {
             await m.addColumn(v10.userEntity, v10.userEntity.avatarColor);
             await m.alterTable(TableMigration(v10.userEntity));
           },
+          from10To11: (m, v11) async {
+            await m.addColumn(v11.localAlbumAssetEntity, v11.localAlbumAssetEntity.marker_);
+          },
         ),
       );
 

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

@@ -4270,6 +4270,395 @@ i1.GeneratedColumn<String> _column_94(String aliasedName) =>
       true,
       type: i1.DriftSqlType.string,
     );
+
+final class Schema11 extends i0.VersionedSchema {
+  Schema11({required super.database}) : super(version: 11);
+  @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,
+    idxLatLng,
+  ];
+  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 Shape2 localAssetEntity = Shape2(
+    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,
+      ],
+      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,
+  );
+  final i1.Index idxLatLng = i1.Index(
+    'idx_lat_lng',
+    'CREATE INDEX IF NOT EXISTS idx_lat_lng ON remote_exif_entity (latitude, longitude)',
+  );
+}
+
+class Shape22 extends i0.VersionedTable {
+  Shape22({required super.source, required super.alias}) : super.aliased();
+  i1.GeneratedColumn<String> get assetId =>
+      columnsByName['asset_id']! as i1.GeneratedColumn<String>;
+  i1.GeneratedColumn<String> get albumId =>
+      columnsByName['album_id']! as i1.GeneratedColumn<String>;
+  i1.GeneratedColumn<bool> get marker_ =>
+      columnsByName['marker']! as i1.GeneratedColumn<bool>;
+}
+
 i0.MigrationStepWithVersion migrationSteps({
   required Future<void> Function(i1.Migrator m, Schema2 schema) from1To2,
   required Future<void> Function(i1.Migrator m, Schema3 schema) from2To3,
@@ -4280,6 +4669,7 @@ i0.MigrationStepWithVersion migrationSteps({
   required Future<void> Function(i1.Migrator m, Schema8 schema) from7To8,
   required Future<void> Function(i1.Migrator m, Schema9 schema) from8To9,
   required Future<void> Function(i1.Migrator m, Schema10 schema) from9To10,
+  required Future<void> Function(i1.Migrator m, Schema11 schema) from10To11,
 }) {
   return (currentVersion, database) async {
     switch (currentVersion) {
@@ -4328,6 +4718,11 @@ i0.MigrationStepWithVersion migrationSteps({
         final migrator = i1.Migrator(database, schema);
         await from9To10(migrator, schema);
         return 10;
+      case 10:
+        final schema = Schema11(database: database);
+        final migrator = i1.Migrator(database, schema);
+        await from10To11(migrator, schema);
+        return 11;
       default:
         throw ArgumentError.value('Unknown migration from $currentVersion');
     }
@@ -4344,6 +4739,7 @@ i1.OnUpgrade stepByStep({
   required Future<void> Function(i1.Migrator m, Schema8 schema) from7To8,
   required Future<void> Function(i1.Migrator m, Schema9 schema) from8To9,
   required Future<void> Function(i1.Migrator m, Schema10 schema) from9To10,
+  required Future<void> Function(i1.Migrator m, Schema11 schema) from10To11,
 }) => i0.VersionedSchema.stepByStepHelper(
   step: migrationSteps(
     from1To2: from1To2,
@@ -4355,5 +4751,6 @@ i1.OnUpgrade stepByStep({
     from7To8: from7To8,
     from8To9: from8To9,
     from9To10: from9To10,
+    from10To11: from10To11,
   ),
 );

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

@@ -72,17 +72,33 @@ class DriftLocalAlbumRepository extends DriftDatabaseRepository {
       return Future.value();
     }
 
-    final deleteSmt = _db.localAssetEntity.delete();
-    deleteSmt.where((localAsset) {
-      final subQuery = _db.localAlbumAssetEntity.selectOnly()
-        ..addColumns([_db.localAlbumAssetEntity.assetId])
-        ..join([innerJoin(_db.localAlbumEntity, _db.localAlbumAssetEntity.albumId.equalsExp(_db.localAlbumEntity.id))]);
-      subQuery.where(
-        _db.localAlbumEntity.id.equals(albumId) & _db.localAlbumAssetEntity.assetId.isNotIn(assetIdsToKeep),
-      );
-      return localAsset.id.isInQuery(subQuery);
+    return _db.transaction(() async {
+      await _db.managers.localAlbumAssetEntity
+          .filter((row) => row.albumId.id.equals(albumId))
+          .update((album) => album(marker_: const Value(true)));
+
+      await _db.batch((batch) {
+        for (final assetId in assetIdsToKeep) {
+          batch.update(
+            _db.localAlbumAssetEntity,
+            const LocalAlbumAssetEntityCompanion(marker_: Value(null)),
+            where: (row) => row.assetId.equals(assetId) & row.albumId.equals(albumId),
+          );
+        }
+      });
+
+      final query = _db.localAssetEntity.delete()
+        ..where(
+          (row) => row.id.isInQuery(
+            _db.localAlbumAssetEntity.selectOnly()
+              ..addColumns([_db.localAlbumAssetEntity.assetId])
+              ..where(
+                _db.localAlbumAssetEntity.albumId.equals(albumId) & _db.localAlbumAssetEntity.marker_.isNotNull(),
+              ),
+          ),
+        );
+      await query.go();
     });
-    await deleteSmt.go();
   }
 
   Future<void> upsert(
@@ -198,10 +214,9 @@ class DriftLocalAlbumRepository extends DriftDatabaseRepository {
       // List<String>
       await _db.batch((batch) async {
         assetAlbums.cast<String, List<Object?>>().forEach((assetId, albumIds) {
-          batch.deleteWhere(
-            _db.localAlbumAssetEntity,
-            (f) => f.albumId.isNotIn(albumIds.cast<String?>().nonNulls) & f.assetId.equals(assetId),
-          );
+          for (final albumId in albumIds.cast<String?>().nonNulls) {
+            batch.deleteWhere(_db.localAlbumAssetEntity, (f) => f.albumId.equals(albumId) & f.assetId.equals(assetId));
+          }
         });
       });
       await _db.batch((batch) async {
@@ -288,12 +303,14 @@ class DriftLocalAlbumRepository extends DriftDatabaseRepository {
 
     return transaction(() async {
       if (assetsToUnLink.isNotEmpty) {
-        await _db.batch(
-          (batch) => batch.deleteWhere(
-            _db.localAlbumAssetEntity,
-            (f) => f.assetId.isIn(assetsToUnLink) & f.albumId.equals(albumId),
-          ),
-        );
+        await _db.batch((batch) {
+          for (final assetId in assetsToUnLink) {
+            batch.deleteWhere(
+              _db.localAlbumAssetEntity,
+              (row) => row.assetId.equals(assetId) & row.albumId.equals(albumId),
+            );
+          }
+        });
       }
 
       await _deleteAssets(assetsToDelete);
@@ -320,7 +337,9 @@ class DriftLocalAlbumRepository extends DriftDatabaseRepository {
     }
 
     return _db.batch((batch) {
-      batch.deleteWhere(_db.localAssetEntity, (f) => f.id.isIn(ids));
+      for (final id in ids) {
+        batch.deleteWhere(_db.localAssetEntity, (row) => row.id.equals(id));
+      }
     });
   }
 

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

@@ -1,4 +1,3 @@
-import 'package:collection/collection.dart';
 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';
@@ -58,8 +57,8 @@ class DriftLocalAssetRepository extends DriftDatabaseRepository {
     }
 
     return _db.batch((batch) {
-      for (final slice in ids.slices(32000)) {
-        batch.deleteWhere(_db.localAssetEntity, (e) => e.id.isIn(slice));
+      for (final id in ids) {
+        batch.deleteWhere(_db.localAssetEntity, (e) => e.id.equals(id));
       }
     });
   }

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

@@ -166,8 +166,15 @@ class DriftRemoteAlbumRepository extends DriftDatabaseRepository {
     );
   }
 
-  Future<int> removeAssets(String albumId, List<String> assetIds) {
-    return _db.remoteAlbumAssetEntity.deleteWhere((tbl) => tbl.albumId.equals(albumId) & tbl.assetId.isIn(assetIds));
+  Future<void> removeAssets(String albumId, List<String> assetIds) {
+    return _db.batch((batch) {
+      for (final assetId in assetIds) {
+        batch.deleteWhere(
+          _db.remoteAlbumAssetEntity,
+          (row) => row.albumId.equals(albumId) & row.assetId.equals(assetId),
+        );
+      }
+    });
   }
 
   FutureOr<(DateTime, DateTime)> getDateRange(String albumId) {

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

@@ -160,7 +160,11 @@ class RemoteAssetRepository extends DriftDatabaseRepository {
   }
 
   Future<void> delete(List<String> ids) {
-    return _db.remoteAssetEntity.deleteWhere((row) => row.id.isIn(ids));
+    return _db.batch((batch) {
+      for (final id in ids) {
+        batch.deleteWhere(_db.remoteAssetEntity, (row) => row.id.equals(id));
+      }
+    });
   }
 
   Future<void> updateLocation(List<String> ids, LatLng location) {
@@ -199,7 +203,11 @@ class RemoteAssetRepository extends DriftDatabaseRepository {
           .map((row) => row.id)
           .get();
 
-      await _db.stackEntity.deleteWhere((row) => row.id.isIn(stackIds));
+      await _db.batch((batch) {
+        for (final stackId in stackIds) {
+          batch.deleteWhere(_db.stackEntity, (row) => row.id.equals(stackId));
+        }
+      });
 
       await _db.batch((batch) {
         final companion = StackEntityCompanion(ownerId: Value(userId), primaryAssetId: Value(stack.primaryAssetId));
@@ -219,15 +227,21 @@ class RemoteAssetRepository extends DriftDatabaseRepository {
 
   Future<void> unStack(List<String> stackIds) {
     return _db.transaction(() async {
-      await _db.stackEntity.deleteWhere((row) => row.id.isIn(stackIds));
+      await _db.batch((batch) {
+        for (final stackId in stackIds) {
+          batch.deleteWhere(_db.stackEntity, (row) => row.id.equals(stackId));
+        }
+      });
 
       // TODO: delete this after adding foreign key on stackId
       await _db.batch((batch) {
-        batch.update(
-          _db.remoteAssetEntity,
-          const RemoteAssetEntityCompanion(stackId: Value(null)),
-          where: (e) => e.stackId.isIn(stackIds),
-        );
+        for (final stackId in stackIds) {
+          batch.update(
+            _db.remoteAssetEntity,
+            const RemoteAssetEntityCompanion(stackId: Value(null)),
+            where: (e) => e.stackId.equals(stackId),
+          );
+        }
       });
     });
   }

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

@@ -33,7 +33,7 @@ class SearchApiRepository extends ApiRepository {
           personIds: filter.people.map((e) => e.id).toList(),
           type: type,
           page: page,
-          size: 1000,
+          size: 100,
         ),
       );
     }

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

@@ -93,7 +93,11 @@ class SyncStreamRepository extends DriftDatabaseRepository {
 
   Future<void> deleteUsersV1(Iterable<SyncUserDeleteV1> data) async {
     try {
-      await _db.userEntity.deleteWhere((row) => row.id.isIn(data.map((e) => e.userId)));
+      await _db.batch((batch) {
+        for (final user in data) {
+          batch.deleteWhere(_db.userEntity, (row) => row.id.equals(user.userId));
+        }
+      });
     } catch (error, stack) {
       _logger.severe('Error: SyncUserDeleteV1', error, stack);
       rethrow;
@@ -158,7 +162,11 @@ class SyncStreamRepository extends DriftDatabaseRepository {
 
   Future<void> deleteAssetsV1(Iterable<SyncAssetDeleteV1> data, {String debugLabel = 'user'}) async {
     try {
-      await _db.remoteAssetEntity.deleteWhere((row) => row.id.isIn(data.map((e) => e.assetId)));
+      await _db.batch((batch) {
+        for (final asset in data) {
+          batch.deleteWhere(_db.remoteAssetEntity, (row) => row.id.equals(asset.assetId));
+        }
+      });
     } catch (error, stack) {
       _logger.severe('Error: deleteAssetsV1 - $debugLabel', error, stack);
       rethrow;
@@ -243,7 +251,11 @@ class SyncStreamRepository extends DriftDatabaseRepository {
 
   Future<void> deleteAlbumsV1(Iterable<SyncAlbumDeleteV1> data) async {
     try {
-      await _db.remoteAlbumEntity.deleteWhere((row) => row.id.isIn(data.map((e) => e.albumId)));
+      await _db.batch((batch) {
+        for (final album in data) {
+          batch.deleteWhere(_db.remoteAlbumEntity, (row) => row.id.equals(album.albumId));
+        }
+      });
     } catch (error, stack) {
       _logger.severe('Error: deleteAlbumsV1', error, stack);
       rethrow;
@@ -379,7 +391,11 @@ class SyncStreamRepository extends DriftDatabaseRepository {
 
   Future<void> deleteMemoriesV1(Iterable<SyncMemoryDeleteV1> data) async {
     try {
-      await _db.memoryEntity.deleteWhere((row) => row.id.isIn(data.map((e) => e.memoryId)));
+      await _db.batch((batch) {
+        for (final memory in data) {
+          batch.deleteWhere(_db.memoryEntity, (row) => row.id.equals(memory.memoryId));
+        }
+      });
     } catch (error, stack) {
       _logger.severe('Error: deleteMemoriesV1', error, stack);
       rethrow;
@@ -443,7 +459,11 @@ class SyncStreamRepository extends DriftDatabaseRepository {
 
   Future<void> deleteStacksV1(Iterable<SyncStackDeleteV1> data, {String debugLabel = 'user'}) async {
     try {
-      await _db.stackEntity.deleteWhere((row) => row.id.isIn(data.map((e) => e.stackId)));
+      await _db.batch((batch) {
+        for (final stack in data) {
+          batch.deleteWhere(_db.stackEntity, (row) => row.id.equals(stack.stackId));
+        }
+      });
     } catch (error, stack) {
       _logger.severe('Error: deleteStacksV1 - $debugLabel', error, stack);
       rethrow;

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

@@ -0,0 +1,57 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/pages/common/download_panel.dart';
+import 'package:immich_mobile/providers/asset_viewer/download.provider.dart';
+
+@RoutePage()
+class DownloadInfoPage extends ConsumerWidget {
+  const DownloadInfoPage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final tasks = ref.watch(downloadStateProvider.select((state) => state.taskProgress)).entries.toList();
+
+    onCancelDownload(String id) {
+      ref.watch(downloadStateProvider.notifier).cancelDownload(id);
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("download".t(context: context)),
+        actions: [],
+      ),
+      body: ListView.builder(
+        physics: const ClampingScrollPhysics(),
+        shrinkWrap: true,
+        itemCount: tasks.length,
+        itemBuilder: (context, index) {
+          final task = tasks[index];
+          return Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
+            child: DownloadTaskTile(
+              progress: task.value.progress,
+              fileName: task.value.fileName,
+              status: task.value.status,
+              onCancelDownload: () => onCancelDownload(task.key),
+            ),
+          );
+        },
+      ),
+      persistentFooterButtons: [
+        OutlinedButton(
+          onPressed: () {
+            tasks.map((e) => e.key).forEach(onCancelDownload);
+          },
+          style: OutlinedButton.styleFrom(side: BorderSide(color: context.colorScheme.primary)),
+          child: Text(
+            'clear_all'.t(context: context),
+            style: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.primary),
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -633,7 +633,7 @@ class _SearchResultGrid extends ConsumerWidget {
             groupBy: GroupAssetsBy.none,
             appBar: null,
             bottomSheet: const GeneralBottomSheet(minChildSize: 0.20),
-            withScrubber: false,
+            snapToMonth: false,
           ),
         ),
       ),

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

@@ -1,54 +1,45 @@
-import 'package:fluttertoast/fluttertoast.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/utils/background_sync.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/background_sync.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
-import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 class DownloadActionButton extends ConsumerWidget {
   final ActionSource source;
+  final bool menuItem;
+  const DownloadActionButton({super.key, required this.source, this.menuItem = false});
 
-  const DownloadActionButton({super.key, required this.source});
-
-  void _onTap(BuildContext context, WidgetRef ref) async {
+  void _onTap(BuildContext context, WidgetRef ref, BackgroundSyncManager backgroundSyncManager) async {
     if (!context.mounted) {
       return;
     }
 
-    final result = await ref.read(actionProvider.notifier).downloadAll(source);
-    ref.read(multiSelectProvider.notifier).reset();
+    try {
+      await ref.read(actionProvider.notifier).downloadAll(source);
 
-    if (!context.mounted) {
-      return;
-    }
-
-    if (!result.success) {
-      ImmichToast.show(
-        context: context,
-        msg: 'scaffold_body_error_occurred'.t(context: context),
-        gravity: ToastGravity.BOTTOM,
-        toastType: ToastType.error,
-      );
-    } else if (result.count > 0) {
-      ImmichToast.show(
-        context: context,
-        msg: 'download_action_prompt'.t(context: context, args: {'count': result.count.toString()}),
-        gravity: ToastGravity.BOTTOM,
-        toastType: ToastType.success,
-      );
+      Future.delayed(const Duration(seconds: 1), () async {
+        await backgroundSyncManager.syncLocal();
+        await backgroundSyncManager.hashAssets();
+      });
+    } finally {
+      ref.read(multiSelectProvider.notifier).reset();
     }
   }
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final backgroundManager = ref.watch(backgroundSyncProvider);
+
     return BaseActionButton(
       iconData: Icons.download,
       maxWidth: 95,
       label: "download".t(context: context),
-      onPressed: () => _onTap(context, ref),
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref, backgroundManager),
     );
   }
 }

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

@@ -0,0 +1,64 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/asset_viewer/download.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class DownloadStatusFloatingButton extends ConsumerWidget {
+  const DownloadStatusFloatingButton({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final shouldShow = ref.watch(downloadStateProvider.select((state) => state.showProgress));
+    final itemCount = ref.watch(downloadStateProvider.select((state) => state.taskProgress.length));
+    final isDownloading = ref
+        .watch(downloadStateProvider.select((state) => state.taskProgress))
+        .values
+        .where((element) => element.progress != 1)
+        .isNotEmpty;
+
+    return shouldShow
+        ? Badge.count(
+            count: itemCount,
+            textColor: context.colorScheme.onPrimary,
+            backgroundColor: context.colorScheme.primary,
+            child: FloatingActionButton(
+              shape: RoundedRectangleBorder(
+                borderRadius: const BorderRadius.all(Radius.circular(20)),
+                side: BorderSide(color: context.colorScheme.outlineVariant, width: 1),
+              ),
+              backgroundColor: context.isDarkTheme
+                  ? context.colorScheme.surfaceContainer
+                  : context.colorScheme.surfaceBright,
+              elevation: 2,
+              onPressed: () {
+                context.pushRoute(const DownloadInfoRoute());
+              },
+              child: Stack(
+                alignment: AlignmentDirectional.center,
+                children: [
+                  isDownloading
+                      ? Icon(Icons.downloading_rounded, color: context.colorScheme.primary, size: 28)
+                      : Icon(
+                          Icons.download_done,
+                          color: context.isDarkTheme ? Colors.green[200] : Colors.green[400],
+                          size: 28,
+                        ),
+                  if (isDownloading)
+                    const SizedBox(
+                      height: 31,
+                      width: 31,
+                      child: CircularProgressIndicator(
+                        strokeWidth: 2,
+                        backgroundColor: Colors.transparent,
+                        value: null, // Indeterminate progress
+                      ),
+                    ),
+                ],
+              ),
+            ),
+          )
+        : const SizedBox.shrink();
+  }
+}

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

@@ -12,6 +12,7 @@ import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/platform_extensions.dart';
 import 'package:immich_mobile/extensions/scroll_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_status_floating_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_stack.provider.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_stack.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
@@ -649,20 +650,25 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
         appBar: const ViewerTopAppBar(),
         extendBody: true,
         extendBodyBehindAppBar: true,
-        body: PhotoViewGallery.builder(
-          gaplessPlayback: true,
-          loadingBuilder: _placeholderBuilder,
-          pageController: pageController,
-          scrollPhysics: CurrentPlatform.isIOS
-              ? const FastScrollPhysics() // Use bouncing physics for iOS
-              : const FastClampingScrollPhysics(), // Use heavy physics for Android
-          itemCount: totalAssets,
-          onPageChanged: _onPageChanged,
-          onPageBuild: _onPageBuild,
-          scaleStateChangedCallback: _onScaleStateChanged,
-          builder: _assetBuilder,
-          backgroundDecoration: BoxDecoration(color: backgroundColor),
-          enablePanAlways: true,
+        floatingActionButton: const DownloadStatusFloatingButton(),
+        body: Stack(
+          children: [
+            PhotoViewGallery.builder(
+              gaplessPlayback: true,
+              loadingBuilder: _placeholderBuilder,
+              pageController: pageController,
+              scrollPhysics: CurrentPlatform.isIOS
+                  ? const FastScrollPhysics() // Use bouncing physics for iOS
+                  : const FastClampingScrollPhysics(), // Use heavy physics for Android
+              itemCount: totalAssets,
+              onPageChanged: _onPageChanged,
+              onPageBuild: _onPageBuild,
+              scaleStateChangedCallback: _onScaleStateChanged,
+              builder: _assetBuilder,
+              backgroundDecoration: BoxDecoration(color: backgroundColor),
+              enablePanAlways: true,
+            ),
+          ],
         ),
         bottomNavigationBar: showingBottomSheet
             ? const SizedBox.shrink()

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

@@ -8,6 +8,7 @@ import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/cast_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart';
@@ -56,6 +57,7 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
     final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
 
     final actions = <Widget>[
+      if (asset.hasRemote) const DownloadActionButton(source: ActionSource.viewer, menuItem: true),
       if (isCasting || (asset.hasRemote)) const CastActionButton(menuItem: true),
       if (album != null && album.isActivityEnabled && album.isShared)
         IconButton(

mobile/lib/presentation/widgets/timeline/scrubber.widget.dart

@@ -31,6 +31,11 @@ class Scrubber extends ConsumerStatefulWidget {
 
   final double? monthSegmentSnappingOffset;
 
+  final bool snapToMonth;
+
+  /// Whether an app bar is present, affects coordinate calculations
+  final bool hasAppBar;
+
   Scrubber({
     super.key,
     Key? scrollThumbKey,
@@ -39,6 +44,8 @@ class Scrubber extends ConsumerStatefulWidget {
     this.topPadding = 0,
     this.bottomPadding = 0,
     this.monthSegmentSnappingOffset,
+    this.snapToMonth = true,
+    this.hasAppBar = true,
     required this.child,
   }) : assert(child.scrollDirection == Axis.vertical);
 
@@ -232,7 +239,7 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
       }
     }
 
-    if (_monthCount < kMinMonthsToEnableScrubberSnap) {
+    if (_monthCount < kMinMonthsToEnableScrubberSnap || !widget.snapToMonth) {
       // If there are less than kMinMonthsToEnableScrubberSnap months, we don't need to snap to segments
       setState(() {
         _thumbTopOffset = dragPosition;
@@ -259,14 +266,28 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
   /// - If user drags to global Y position that's 100 pixels from the top
   /// - The relative position would be 100 - 50 = 50 (50 pixels into the scrubber area)
   double _calculateDragPosition(DragUpdateDetails details) {
+    if (widget.hasAppBar) {
+      final dragAreaTop = widget.topPadding;
+      final dragAreaBottom = widget.timelineHeight - widget.bottomPadding;
+      final dragAreaHeight = dragAreaBottom - dragAreaTop;
+
+      final relativePosition = details.globalPosition.dy - dragAreaTop;
+
+      // Make sure the position stays within the scrubber's bounds
+      return relativePosition.clamp(0.0, dragAreaHeight);
+    }
+
+    // Get the local position relative to the gesture detector
+    final RenderBox? renderBox = context.findRenderObject() as RenderBox?;
+    if (renderBox != null) {
+      final localPosition = renderBox.globalToLocal(details.globalPosition);
+      return localPosition.dy.clamp(0.0, _scrubberHeight);
+    }
+
+    // Fallback to current logic if render box is not available
     final dragAreaTop = widget.topPadding;
-    final dragAreaBottom = widget.timelineHeight - widget.bottomPadding;
-    final dragAreaHeight = dragAreaBottom - dragAreaTop;
-
     final relativePosition = details.globalPosition.dy - dragAreaTop;
-
-    // Make sure the position stays within the scrubber's bounds
-    return relativePosition.clamp(0.0, dragAreaHeight);
+    return relativePosition.clamp(0.0, _scrubberHeight);
   }
 
   /// Find the segment closest to the given position
@@ -322,6 +343,8 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
       _isDragging = false;
     });
 
+    ref.read(timelineStateProvider.notifier).setScrubbing(false);
+
     // Reset scrubber tracking when drag ends
     _currentScrubberDate = null;
     _scrubberDebouncer?.dispose();

mobile/lib/presentation/widgets/timeline/timeline.widget.dart

@@ -14,6 +14,7 @@ import 'package:immich_mobile/domain/models/timeline.model.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_status_floating_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/general_bottom_sheet.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/scrubber.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
@@ -38,6 +39,7 @@ class Timeline extends StatelessWidget {
     this.bottomSheet = const GeneralBottomSheet(minChildSize: 0.18),
     this.groupBy,
     this.withScrubber = true,
+    this.snapToMonth = true,
   });
 
   final Widget? topSliverWidget;
@@ -48,11 +50,13 @@ class Timeline extends StatelessWidget {
   final bool withStack;
   final GroupAssetsBy? groupBy;
   final bool withScrubber;
+  final bool snapToMonth;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       resizeToAvoidBottomInset: false,
+      floatingActionButton: const DownloadStatusFloatingButton(),
       body: LayoutBuilder(
         builder: (_, constraints) => ProviderScope(
           overrides: [
@@ -73,6 +77,7 @@ class Timeline extends StatelessWidget {
             appBar: appBar,
             bottomSheet: bottomSheet,
             withScrubber: withScrubber,
+            snapToMonth: snapToMonth,
           ),
         ),
       ),
@@ -87,6 +92,7 @@ class _SliverTimeline extends ConsumerStatefulWidget {
     this.appBar,
     this.bottomSheet,
     this.withScrubber = true,
+    this.snapToMonth = true,
   });
 
   final Widget? topSliverWidget;
@@ -94,6 +100,7 @@ class _SliverTimeline extends ConsumerStatefulWidget {
   final Widget? appBar;
   final Widget? bottomSheet;
   final bool withScrubber;
+  final bool snapToMonth;
 
   @override
   ConsumerState createState() => _SliverTimelineState();
@@ -309,11 +316,13 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
           final Widget timeline;
           if (widget.withScrubber) {
             timeline = Scrubber(
+              snapToMonth: widget.snapToMonth,
               layoutSegments: segments,
               timelineHeight: maxHeight,
               topPadding: topPadding,
               bottomPadding: bottomPadding,
               monthSegmentSnappingOffset: widget.topSliverWidgetHeight ?? 0 + appBarExpandedHeight,
+              hasAppBar: widget.appBar != null,
               child: grid,
             );
           } else {

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

@@ -356,7 +356,6 @@ class ActionNotifier extends Notifier<void> {
 
   Future<ActionResult> downloadAll(ActionSource source) async {
     final assets = _getAssets(source).whereType<RemoteAsset>().toList(growable: false);
-
     try {
       final didEnqueue = await _service.downloadAll(assets);
       final enqueueCount = didEnqueue.where((e) => e).length;

mobile/lib/repositories/download.repository.dart

@@ -90,7 +90,11 @@ class DownloadRepository {
       final isVideo = asset.isVideo;
       final url = getOriginalUrlForRemoteId(id);
 
-      if (Platform.isAndroid || livePhotoVideoId == null || isVideo) {
+      // on iOS it cannot link the image, check if the filename has .MP extension
+      // to avoid downloading the video part
+      final isAndroidMotionPhoto = asset.name.contains(".MP");
+
+      if (Platform.isAndroid || livePhotoVideoId == null || isVideo || isAndroidMotionPhoto) {
         tasks[taskIndex++] = DownloadTask(
           taskId: id,
           url: url,

mobile/lib/routing/router.dart

@@ -81,6 +81,7 @@ import 'package:immich_mobile/pages/share_intent/share_intent.page.dart';
 import 'package:immich_mobile/presentation/pages/dev/feat_in_development.page.dart';
 import 'package:immich_mobile/presentation/pages/dev/main_timeline.page.dart';
 import 'package:immich_mobile/presentation/pages/dev/media_stat.page.dart';
+import 'package:immich_mobile/presentation/pages/download_info.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_activities.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_album.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_album_options.page.dart';
@@ -345,6 +346,7 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: DriftActivitiesRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: DriftBackupAssetDetailRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: AssetTroubleshootRoute.page, guards: [_authGuard, _duplicateGuard]),
+    AutoRoute(page: DownloadInfoRoute.page, guards: [_authGuard, _duplicateGuard]),
     // required to handle all deeplinks in deep_link.service.dart
     // auto_route_library#1722
     RedirectRoute(path: '*', redirectTo: '/'),

mobile/lib/routing/router.gr.dart

@@ -688,6 +688,22 @@ class CropImageRouteArgs {
   }
 }
 
+/// generated route for
+/// [DownloadInfoPage]
+class DownloadInfoRoute extends PageRouteInfo<void> {
+  const DownloadInfoRoute({List<PageRouteInfo>? children})
+    : super(DownloadInfoRoute.name, initialChildren: children);
+
+  static const String name = 'DownloadInfoRoute';
+
+  static PageInfo page = PageInfo(
+    name,
+    builder: (data) {
+      return const DownloadInfoPage();
+    },
+  );
+}
+
 /// generated route for
 /// [DriftActivitiesPage]
 class DriftActivitiesRoute extends PageRouteInfo<void> {

mobile/lib/services/action.service.dart

@@ -1,7 +1,6 @@
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/repositories/download.repository.dart';
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/infrastructure/repositories/local_asset.repository.dart';
@@ -11,6 +10,7 @@ import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
 import 'package:immich_mobile/repositories/asset_api.repository.dart';
 import 'package:immich_mobile/repositories/asset_media.repository.dart';
+import 'package:immich_mobile/repositories/download.repository.dart';
 import 'package:immich_mobile/repositories/drift_album_api_repository.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/widgets/common/date_time_picker.dart';
@@ -199,14 +199,11 @@ class ActionService {
   }
 
   Future<int> removeFromAlbum(List<String> remoteIds, String albumId) async {
-    int removedCount = 0;
     final result = await _albumApiRepository.removeAssets(albumId, remoteIds);
-
     if (result.removed.isNotEmpty) {
-      removedCount = await _remoteAlbumRepository.removeAssets(albumId, result.removed);
+      await _remoteAlbumRepository.removeAssets(albumId, result.removed);
     }
-
-    return removedCount;
+    return result.removed.length;
   }
 
   Future<bool> updateDescription(String assetId, String description) async {

mobile/openapi/README.md

@@ -393,6 +393,7 @@ Class | Method | HTTP request | Description
  - [LoginCredentialDto](doc//LoginCredentialDto.md)
  - [LoginResponseDto](doc//LoginResponseDto.md)
  - [LogoutResponseDto](doc//LogoutResponseDto.md)
+ - [MachineLearningAvailabilityChecksDto](doc//MachineLearningAvailabilityChecksDto.md)
  - [ManualJobName](doc//ManualJobName.md)
  - [MapMarkerResponseDto](doc//MapMarkerResponseDto.md)
  - [MapReverseGeocodeResponseDto](doc//MapReverseGeocodeResponseDto.md)

mobile/openapi/lib/api.dart

@@ -164,6 +164,7 @@ part 'model/log_level.dart';
 part 'model/login_credential_dto.dart';
 part 'model/login_response_dto.dart';
 part 'model/logout_response_dto.dart';
+part 'model/machine_learning_availability_checks_dto.dart';
 part 'model/manual_job_name.dart';
 part 'model/map_marker_response_dto.dart';
 part 'model/map_reverse_geocode_response_dto.dart';

mobile/openapi/lib/api_client.dart

@@ -382,6 +382,8 @@ class ApiClient {
           return LoginResponseDto.fromJson(value);
         case 'LogoutResponseDto':
           return LogoutResponseDto.fromJson(value);
+        case 'MachineLearningAvailabilityChecksDto':
+          return MachineLearningAvailabilityChecksDto.fromJson(value);
         case 'ManualJobName':
           return ManualJobNameTypeTransformer().decode(value);
         case 'MapMarkerResponseDto':

mobile/openapi/lib/model/machine_learning_availability_checks_dto.dart

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

mobile/openapi/lib/model/system_config_machine_learning_dto.dart

@@ -13,14 +13,16 @@ part of openapi.api;
 class SystemConfigMachineLearningDto {
   /// Returns a new [SystemConfigMachineLearningDto] instance.
   SystemConfigMachineLearningDto({
+    required this.availabilityChecks,
     required this.clip,
     required this.duplicateDetection,
     required this.enabled,
     required this.facialRecognition,
-    this.url,
     this.urls = const [],
   });
 
+  MachineLearningAvailabilityChecksDto availabilityChecks;
+
   CLIPConfig clip;
 
   DuplicateDetectionConfig duplicateDetection;
@@ -29,50 +31,37 @@ class SystemConfigMachineLearningDto {
 
   FacialRecognitionConfig facialRecognition;
 
-  /// This property was deprecated in v1.122.0
-  ///
-  /// Please note: This property should have been non-nullable! Since the specification file
-  /// does not include a default value (using the "default:" property), however, the generated
-  /// source code must fall back to having a nullable type.
-  /// Consider adding a "default:" property in the specification file to hide this note.
-  ///
-  String? url;
-
   List<String> urls;
 
   @override
   bool operator ==(Object other) => identical(this, other) || other is SystemConfigMachineLearningDto &&
+    other.availabilityChecks == availabilityChecks &&
     other.clip == clip &&
     other.duplicateDetection == duplicateDetection &&
     other.enabled == enabled &&
     other.facialRecognition == facialRecognition &&
-    other.url == url &&
     _deepEquality.equals(other.urls, urls);
 
   @override
   int get hashCode =>
     // ignore: unnecessary_parenthesis
+    (availabilityChecks.hashCode) +
     (clip.hashCode) +
     (duplicateDetection.hashCode) +
     (enabled.hashCode) +
     (facialRecognition.hashCode) +
-    (url == null ? 0 : url!.hashCode) +
     (urls.hashCode);
 
   @override
-  String toString() => 'SystemConfigMachineLearningDto[clip=$clip, duplicateDetection=$duplicateDetection, enabled=$enabled, facialRecognition=$facialRecognition, url=$url, urls=$urls]';
+  String toString() => 'SystemConfigMachineLearningDto[availabilityChecks=$availabilityChecks, clip=$clip, duplicateDetection=$duplicateDetection, enabled=$enabled, facialRecognition=$facialRecognition, urls=$urls]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
+      json[r'availabilityChecks'] = this.availabilityChecks;
       json[r'clip'] = this.clip;
       json[r'duplicateDetection'] = this.duplicateDetection;
       json[r'enabled'] = this.enabled;
       json[r'facialRecognition'] = this.facialRecognition;
-    if (this.url != null) {
-      json[r'url'] = this.url;
-    } else {
-    //  json[r'url'] = null;
-    }
       json[r'urls'] = this.urls;
     return json;
   }
@@ -86,11 +75,11 @@ class SystemConfigMachineLearningDto {
       final json = value.cast<String, dynamic>();
 
       return SystemConfigMachineLearningDto(
+        availabilityChecks: MachineLearningAvailabilityChecksDto.fromJson(json[r'availabilityChecks'])!,
         clip: CLIPConfig.fromJson(json[r'clip'])!,
         duplicateDetection: DuplicateDetectionConfig.fromJson(json[r'duplicateDetection'])!,
         enabled: mapValueOfType<bool>(json, r'enabled')!,
         facialRecognition: FacialRecognitionConfig.fromJson(json[r'facialRecognition'])!,
-        url: mapValueOfType<String>(json, r'url'),
         urls: json[r'urls'] is Iterable
             ? (json[r'urls'] as Iterable).cast<String>().toList(growable: false)
             : const [],
@@ -141,6 +130,7 @@ class SystemConfigMachineLearningDto {
 
   /// The list of required keys that must be present in a JSON.
   static const requiredKeys = <String>{
+    'availabilityChecks',
     'clip',
     'duplicateDetection',
     'enabled',

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

@@ -13,6 +13,7 @@ import 'schema_v7.dart' as v7;
 import 'schema_v8.dart' as v8;
 import 'schema_v9.dart' as v9;
 import 'schema_v10.dart' as v10;
+import 'schema_v11.dart' as v11;
 
 class GeneratedHelper implements SchemaInstantiationHelper {
   @override
@@ -38,10 +39,12 @@ class GeneratedHelper implements SchemaInstantiationHelper {
         return v9.DatabaseAtV9(db);
       case 10:
         return v10.DatabaseAtV10(db);
+      case 11:
+        return v11.DatabaseAtV11(db);
       default:
         throw MissingSchemaException(version, versions);
     }
   }
 
-  static const versions = const [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  static const versions = const [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 }

open-api/immich-openapi-specs.json

@@ -12259,6 +12259,25 @@
         ],
         "type": "object"
       },
+      "MachineLearningAvailabilityChecksDto": {
+        "properties": {
+          "enabled": {
+            "type": "boolean"
+          },
+          "interval": {
+            "type": "number"
+          },
+          "timeout": {
+            "type": "number"
+          }
+        },
+        "required": [
+          "enabled",
+          "interval",
+          "timeout"
+        ],
+        "type": "object"
+      },
       "ManualJobName": {
         "enum": [
           "person-cleanup",
@@ -16395,6 +16414,9 @@
       },
       "SystemConfigMachineLearningDto": {
         "properties": {
+          "availabilityChecks": {
+            "$ref": "#/components/schemas/MachineLearningAvailabilityChecksDto"
+          },
           "clip": {
             "$ref": "#/components/schemas/CLIPConfig"
           },
@@ -16407,11 +16429,6 @@
           "facialRecognition": {
             "$ref": "#/components/schemas/FacialRecognitionConfig"
           },
-          "url": {
-            "deprecated": true,
-            "description": "This property was deprecated in v1.122.0",
-            "type": "string"
-          },
           "urls": {
             "format": "uri",
             "items": {
@@ -16423,6 +16440,7 @@
           }
         },
         "required": [
+          "availabilityChecks",
           "clip",
           "duplicateDetection",
           "enabled",

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

@@ -1383,6 +1383,11 @@ export type SystemConfigLoggingDto = {
     enabled: boolean;
     level: LogLevel;
 };
+export type MachineLearningAvailabilityChecksDto = {
+    enabled: boolean;
+    interval: number;
+    timeout: number;
+};
 export type ClipConfig = {
     enabled: boolean;
     modelName: string;
@@ -1399,12 +1404,11 @@ export type FacialRecognitionConfig = {
     modelName: string;
 };
 export type SystemConfigMachineLearningDto = {
+    availabilityChecks: MachineLearningAvailabilityChecksDto;
     clip: ClipConfig;
     duplicateDetection: DuplicateDetectionConfig;
     enabled: boolean;
     facialRecognition: FacialRecognitionConfig;
-    /** This property was deprecated in v1.122.0 */
-    url?: string;
     urls: string[];
 };
 export type SystemConfigMapDto = {

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "description": "Monorepo for Immich",
   "private": true,
-  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
+  "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67",
   "engines": {
     "pnpm": ">=10.0.0"
   }

server/Dockerfile

@@ -1,4 +1,4 @@
-FROM ghcr.io/immich-app/base-server-dev:202509091104@sha256:4f9275330f1e49e7ce9840758ea91839052fe6ed40972d5bb97a9af857fa956a AS builder
+FROM ghcr.io/immich-app/base-server-dev:pr-272 AS builder
 ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0 \
   CI=1 \
   COREPACK_HOME=/tmp
@@ -33,7 +33,7 @@ RUN pnpm --filter @immich/sdk --filter @immich/cli --frozen-lockfile install &&
   pnpm --filter @immich/sdk --filter @immich/cli build && \
   pnpm --filter @immich/cli --prod --no-optional deploy /output/cli-pruned
 
-FROM ghcr.io/immich-app/base-server-prod:202509091104@sha256:d1ccbac24c84f2f8277cf85281edfca62d85d7daed6a62b8efd3a81bcd3c5e0e
+FROM ghcr.io/immich-app/base-server-prod:pr-272
 
 WORKDIR /usr/src/app
 ENV NODE_ENV=production \

server/package.json

@@ -44,14 +44,14 @@
     "@nestjs/websockets": "^11.0.4",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-async-hooks": "^2.0.0",
-    "@opentelemetry/exporter-prometheus": "^0.203.0",
-    "@opentelemetry/instrumentation-http": "^0.203.0",
-    "@opentelemetry/instrumentation-ioredis": "^0.51.0",
-    "@opentelemetry/instrumentation-nestjs-core": "^0.49.0",
-    "@opentelemetry/instrumentation-pg": "^0.56.0",
+    "@opentelemetry/exporter-prometheus": "^0.205.0",
+    "@opentelemetry/instrumentation-http": "^0.205.0",
+    "@opentelemetry/instrumentation-ioredis": "^0.53.0",
+    "@opentelemetry/instrumentation-nestjs-core": "^0.51.0",
+    "@opentelemetry/instrumentation-pg": "^0.58.0",
     "@opentelemetry/resources": "^2.0.1",
     "@opentelemetry/sdk-metrics": "^2.0.1",
-    "@opentelemetry/sdk-node": "^0.203.0",
+    "@opentelemetry/sdk-node": "^0.205.0",
     "@opentelemetry/semantic-conventions": "^1.34.0",
     "@react-email/components": "^0.5.0",
     "@react-email/render": "^1.1.2",

server/src/bin/sync-sql.ts

@@ -15,6 +15,7 @@ import { repositories } from 'src/repositories';
 import { AccessRepository } from 'src/repositories/access.repository';
 import { ConfigRepository } from 'src/repositories/config.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
+import { MachineLearningRepository } from 'src/repositories/machine-learning.repository';
 import { SyncRepository } from 'src/repositories/sync.repository';
 import { AuthService } from 'src/services/auth.service';
 import { getKyselyConfig } from 'src/utils/database';
@@ -57,7 +58,7 @@ class SqlGenerator {
     try {
       await this.setup();
       for (const Repository of repositories) {
-        if (Repository === LoggingRepository) {
+        if (Repository === LoggingRepository || Repository === MachineLearningRepository) {
           continue;
         }
         await this.process(Repository);

server/src/config.ts

@@ -54,6 +54,11 @@ export interface SystemConfig {
   machineLearning: {
     enabled: boolean;
     urls: string[];
+    availabilityChecks: {
+      enabled: boolean;
+      timeout: number;
+      interval: number;
+    };
     clip: {
       enabled: boolean;
       modelName: string;
@@ -176,6 +181,8 @@ export interface SystemConfig {
   };
 }
 
+export type MachineLearningConfig = SystemConfig['machineLearning'];
+
 export const defaults = Object.freeze<SystemConfig>({
   backup: {
     database: {
@@ -227,6 +234,11 @@ export const defaults = Object.freeze<SystemConfig>({
   machineLearning: {
     enabled: process.env.IMMICH_MACHINE_LEARNING_ENABLED !== 'false',
     urls: [process.env.IMMICH_MACHINE_LEARNING_URL || 'http://immich-machine-learning:3003'],
+    availabilityChecks: {
+      enabled: true,
+      timeout: Number(process.env.IMMICH_MACHINE_LEARNING_PING_TIMEOUT) || 2000,
+      interval: 30_000,
+    },
     clip: {
       enabled: true,
       modelName: 'ViT-B-32__openai',

server/src/constants.ts

@@ -51,11 +51,6 @@ export const serverVersion = new SemVer(version);
 export const AUDIT_LOG_MAX_DURATION = Duration.fromObject({ days: 100 });
 export const ONE_HOUR = Duration.fromObject({ hours: 1 });
 
-export const MACHINE_LEARNING_PING_TIMEOUT = Number(process.env.MACHINE_LEARNING_PING_TIMEOUT || 2000);
-export const MACHINE_LEARNING_AVAILABILITY_BACKOFF_TIME = Number(
-  process.env.MACHINE_LEARNING_AVAILABILITY_BACKOFF_TIME || 30_000,
-);
-
 export const citiesFile = 'cities500.txt';
 export const reverseGeocodeMaxDistance = 25_000;
 

server/src/dtos/search.dto.ts

@@ -6,7 +6,7 @@ import { PropertyLifecycle } from 'src/decorators';
 import { AlbumResponseDto } from 'src/dtos/album.dto';
 import { AssetResponseDto } from 'src/dtos/asset-response.dto';
 import { AssetOrder, AssetType, AssetVisibility } from 'src/enum';
-import { Optional, ValidateBoolean, ValidateDate, ValidateEnum, ValidateUUID } from 'src/validation';
+import { Optional, ValidateBoolean, ValidateDate, ValidateEnum, ValidateString, ValidateUUID } from 'src/validation';
 
 class BaseSearchDto {
   @ValidateUUID({ optional: true, nullable: true })
@@ -144,9 +144,7 @@ export class MetadataSearchDto extends RandomSearchDto {
   @Optional()
   deviceAssetId?: string;
 
-  @IsString()
-  @IsNotEmpty()
-  @Optional()
+  @ValidateString({ optional: true, trim: true })
   description?: string;
 
   @IsString()
@@ -154,9 +152,7 @@ export class MetadataSearchDto extends RandomSearchDto {
   @Optional()
   checksum?: string;
 
-  @IsString()
-  @IsNotEmpty()
-  @Optional()
+  @ValidateString({ optional: true, trim: true })
   originalFileName?: string;
 
   @IsString()
@@ -190,16 +186,12 @@ export class MetadataSearchDto extends RandomSearchDto {
 }
 
 export class StatisticsSearchDto extends BaseSearchDto {
-  @IsString()
-  @IsNotEmpty()
-  @Optional()
+  @ValidateString({ optional: true, trim: true })
   description?: string;
 }
 
 export class SmartSearchDto extends BaseSearchWithResultsDto {
-  @IsString()
-  @IsNotEmpty()
-  @Optional()
+  @ValidateString({ optional: true, trim: true })
   query?: string;
 
   @ValidateUUID({ optional: true })

server/src/dtos/system-config.dto.ts

@@ -1,5 +1,5 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { Exclude, Transform, Type } from 'class-transformer';
+import { Type } from 'class-transformer';
 import {
   ArrayMinSize,
   IsInt,
@@ -15,7 +15,6 @@ import {
   ValidateNested,
 } from 'class-validator';
 import { SystemConfig } from 'src/config';
-import { PropertyLifecycle } from 'src/decorators';
 import { CLIPConfig, DuplicateDetectionConfig, FacialRecognitionConfig } from 'src/dtos/model-config.dto';
 import {
   AudioCodec,
@@ -257,21 +256,32 @@ class SystemConfigLoggingDto {
   level!: LogLevel;
 }
 
+class MachineLearningAvailabilityChecksDto {
+  @ValidateBoolean()
+  enabled!: boolean;
+
+  @IsInt()
+  timeout!: number;
+
+  @IsInt()
+  interval!: number;
+}
+
 class SystemConfigMachineLearningDto {
   @ValidateBoolean()
   enabled!: boolean;
 
-  @PropertyLifecycle({ deprecatedAt: 'v1.122.0' })
-  @Exclude()
-  url?: string;
-
   @IsUrl({ require_tld: false, allow_underscores: true }, { each: true })
   @ArrayMinSize(1)
-  @Transform(({ obj, value }) => (obj.url ? [obj.url] : value))
   @ValidateIf((dto) => dto.enabled)
   @ApiProperty({ type: 'array', items: { type: 'string', format: 'uri' }, minItems: 1 })
   urls!: string[];
 
+  @Type(() => MachineLearningAvailabilityChecksDto)
+  @ValidateNested()
+  @IsObject()
+  availabilityChecks!: MachineLearningAvailabilityChecksDto;
+
   @Type(() => CLIPConfig)
   @ValidateNested()
   @IsObject()

server/src/repositories/logging.repository.ts

@@ -142,6 +142,10 @@ export class LoggingRepository {
     this.handleMessage(LogLevel.Fatal, message, details);
   }
 
+  deprecate(message: string) {
+    this.warn(`[Deprecated] ${message}`);
+  }
+
   private handleFunction(level: LogLevel, message: LogFunction, details: LogDetails[]) {
     if (this.logger.isLevelEnabled(level)) {
       this.handleMessage(level, message(), details);

server/src/repositories/machine-learning.repository.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@nestjs/common';
+import { Duration } from 'luxon';
 import { readFile } from 'node:fs/promises';
-import { MACHINE_LEARNING_AVAILABILITY_BACKOFF_TIME, MACHINE_LEARNING_PING_TIMEOUT } from 'src/constants';
+import { MachineLearningConfig } from 'src/config';
 import { CLIPConfig } from 'src/dtos/model-config.dto';
 import { LoggingRepository } from 'src/repositories/logging.repository';
 
@@ -57,82 +58,100 @@ export type TextEncodingOptions = ModelOptions & { language?: string };
 
 @Injectable()
 export class MachineLearningRepository {
-  // Note that deleted URL's are not removed from this map (ie: they're leaked)
-  // Cleaning them up is low priority since there should be very few over a
-  // typical server uptime cycle
-  private urlAvailability: {
-    [url: string]:
-      | {
-          active: boolean;
-          lastChecked: number;
-        }
-      | undefined;
-  };
+  private healthyMap: Record<string, boolean> = {};
+  private interval?: ReturnType<typeof setInterval>;
+  private _config?: MachineLearningConfig;
+
+  private get config(): MachineLearningConfig {
+    if (!this._config) {
+      throw new Error('Machine learning repository not been setup');
+    }
+
+    return this._config;
+  }
 
   constructor(private logger: LoggingRepository) {
     this.logger.setContext(MachineLearningRepository.name);
-    this.urlAvailability = {};
   }
 
-  private setUrlAvailability(url: string, active: boolean) {
-    const current = this.urlAvailability[url];
-    if (current?.active !== active) {
-      this.logger.verbose(`Setting ${url} ML server to ${active ? 'active' : 'inactive'}.`);
+  setup(config: MachineLearningConfig) {
+    this._config = config;
+    this.teardown();
+
+    // delete old servers
+    for (const url of Object.keys(this.healthyMap)) {
+      if (!config.urls.includes(url)) {
+        delete this.healthyMap[url];
+      }
     }
-    this.urlAvailability[url] = {
-      active,
-      lastChecked: Date.now(),
-    };
+
+    if (!config.availabilityChecks.enabled) {
+      return;
+    }
+
+    this.tick();
+    this.interval = setInterval(
+      () => this.tick(),
+      Duration.fromObject({ milliseconds: config.availabilityChecks.interval }).as('milliseconds'),
+    );
   }
 
-  private async checkAvailability(url: string) {
-    let active = false;
+  teardown() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  }
+
+  private tick() {
+    for (const url of this.config.urls) {
+      void this.check(url);
+    }
+  }
+
+  private async check(url: string) {
+    let healthy = false;
     try {
       const response = await fetch(new URL('/ping', url), {
-        signal: AbortSignal.timeout(MACHINE_LEARNING_PING_TIMEOUT),
+        signal: AbortSignal.timeout(this.config.availabilityChecks.timeout),
       });
-      active = response.ok;
+      if (response.ok) {
+        healthy = true;
+      }
     } catch {
       // nothing to do here
     }
-    this.setUrlAvailability(url, active);
-    return active;
+
+    this.setHealthy(url, healthy);
   }
 
-  private async shouldSkipUrl(url: string) {
-    const availability = this.urlAvailability[url];
-    if (availability === undefined) {
-      // If this is a new endpoint, then check inline and skip if it fails
-      if (!(await this.checkAvailability(url))) {
-        return true;
-      }
-      return false;
+  private setHealthy(url: string, healthy: boolean) {
+    if (this.healthyMap[url] !== healthy) {
+      this.logger.log(`Machine learning server became ${healthy ? 'healthy' : 'unhealthy'} (${url}).`);
     }
-    if (!availability.active && Date.now() - availability.lastChecked < MACHINE_LEARNING_AVAILABILITY_BACKOFF_TIME) {
-      // If this is an old inactive endpoint that hasn't been checked in a
-      // while then check but don't wait for the result, just skip it
-      // This avoids delays on every search whilst allowing higher priority
-      // ML servers to recover over time.
-      void this.checkAvailability(url);
+
+    this.healthyMap[url] = healthy;
+  }
+
+  private isHealthy(url: string) {
+    if (!this.config.availabilityChecks.enabled) {
       return true;
     }
-    return false;
+
+    return this.healthyMap[url];
   }
 
-  private async predict<T>(urls: string[], payload: ModelPayload, config: MachineLearningRequest): Promise<T> {
+  private async predict<T>(payload: ModelPayload, config: MachineLearningRequest): Promise<T> {
     const formData = await this.getFormData(payload, config);
-    let urlCounter = 0;
-    for (const url of urls) {
-      urlCounter++;
-      const isLast = urlCounter >= urls.length;
-      if (!isLast && (await this.shouldSkipUrl(url))) {
-        continue;
-      }
 
+    for (const url of [
+      // try healthy servers first
+      ...this.config.urls.filter((url) => this.isHealthy(url)),
+      ...this.config.urls.filter((url) => !this.isHealthy(url)),
+    ]) {
       try {
         const response = await fetch(new URL('/predict', url), { method: 'POST', body: formData });
         if (response.ok) {
-          this.setUrlAvailability(url, true);
+          this.setHealthy(url, true);
           return response.json();
         }
 
@@ -144,20 +163,21 @@ export class MachineLearningRepository {
           `Machine learning request to "${url}" failed: ${error instanceof Error ? error.message : error}`,
         );
       }
-      this.setUrlAvailability(url, false);
+
+      this.setHealthy(url, false);
     }
 
     throw new Error(`Machine learning request '${JSON.stringify(config)}' failed for all URLs`);
   }
 
-  async detectFaces(urls: string[], imagePath: string, { modelName, minScore }: FaceDetectionOptions) {
+  async detectFaces(imagePath: string, { modelName, minScore }: FaceDetectionOptions) {
     const request = {
       [ModelTask.FACIAL_RECOGNITION]: {
         [ModelType.DETECTION]: { modelName, options: { minScore } },
         [ModelType.RECOGNITION]: { modelName },
       },
     };
-    const response = await this.predict<FacialRecognitionResponse>(urls, { imagePath }, request);
+    const response = await this.predict<FacialRecognitionResponse>({ imagePath }, request);
     return {
       imageHeight: response.imageHeight,
       imageWidth: response.imageWidth,
@@ -165,15 +185,15 @@ export class MachineLearningRepository {
     };
   }
 
-  async encodeImage(urls: string[], imagePath: string, { modelName }: CLIPConfig) {
+  async encodeImage(imagePath: string, { modelName }: CLIPConfig) {
     const request = { [ModelTask.SEARCH]: { [ModelType.VISUAL]: { modelName } } };
-    const response = await this.predict<ClipVisualResponse>(urls, { imagePath }, request);
+    const response = await this.predict<ClipVisualResponse>({ imagePath }, request);
     return response[ModelTask.SEARCH];
   }
 
-  async encodeText(urls: string[], text: string, { language, modelName }: TextEncodingOptions) {
+  async encodeText(text: string, { language, modelName }: TextEncodingOptions) {
     const request = { [ModelTask.SEARCH]: { [ModelType.TEXTUAL]: { modelName, options: { language } } } };
-    const response = await this.predict<ClipTextualResponse>(urls, { text }, request);
+    const response = await this.predict<ClipTextualResponse>({ text }, request);
     return response[ModelTask.SEARCH];
   }
 

server/src/repositories/media.repository.ts

@@ -57,28 +57,28 @@ export class MediaRepository {
       const buffer = await exiftool.extractBinaryTagToBuffer('JpgFromRaw2', input);
       return { buffer, format: RawExtractedFormat.Jpeg };
     } catch (error: any) {
-      this.logger.debug('Could not extract JpgFromRaw2 buffer from image, trying JPEG from RAW next', error.message);
+      this.logger.debug(`Could not extract JpgFromRaw2 buffer from image, trying JPEG from RAW next: ${error}`);
     }
 
     try {
       const buffer = await exiftool.extractBinaryTagToBuffer('JpgFromRaw', input);
       return { buffer, format: RawExtractedFormat.Jpeg };
     } catch (error: any) {
-      this.logger.debug('Could not extract JPEG buffer from image, trying PreviewJXL next', error.message);
+      this.logger.debug(`Could not extract JPEG buffer from image, trying PreviewJXL next: ${error}`);
     }
 
     try {
       const buffer = await exiftool.extractBinaryTagToBuffer('PreviewJXL', input);
       return { buffer, format: RawExtractedFormat.Jxl };
     } catch (error: any) {
-      this.logger.debug('Could not extract PreviewJXL buffer from image, trying PreviewImage next', error.message);
+      this.logger.debug(`Could not extract PreviewJXL buffer from image, trying PreviewImage next: ${error}`);
     }
 
     try {
       const buffer = await exiftool.extractBinaryTagToBuffer('PreviewImage', input);
       return { buffer, format: RawExtractedFormat.Jpeg };
     } catch (error: any) {
-      this.logger.debug('Could not extract preview buffer from image', error.message);
+      this.logger.debug(`Could not extract preview buffer from image: ${error}`);
       return null;
     }
   }

server/src/repositories/metadata.repository.ts

@@ -103,7 +103,7 @@ export class MetadataRepository {
 
   readTags(path: string): Promise<ImmichTags> {
     return this.exiftool.read(path).catch((error) => {
-      this.logger.warn(`Error reading exif data (${path}): ${error}`, error?.stack);
+      this.logger.warn(`Error reading exif data (${path}): ${error}\n${error?.stack}`);
       return {};
     }) as Promise<ImmichTags>;
   }

server/src/services/auth.service.ts

@@ -344,7 +344,7 @@ export class AuthService extends BaseService {
         await this.jobRepository.queue({ name: JobName.FileDelete, data: { files: [oldPath] } });
       }
     } catch (error: Error | any) {
-      this.logger.warn(`Unable to sync oauth profile picture: ${error}`, error?.stack);
+      this.logger.warn(`Unable to sync oauth profile picture: ${error}\n${error?.stack}`);
     }
   }
 

server/src/services/backup.service.ts

@@ -132,12 +132,12 @@ export class BackupService extends BaseService {
         gzip.stdout.pipe(fileStream);
 
         pgdump.on('error', (err) => {
-          this.logger.error('Backup failed with error', err);
+          this.logger.error(`Backup failed with error: ${err}`);
           reject(err);
         });
 
         gzip.on('error', (err) => {
-          this.logger.error('Gzip failed with error', err);
+          this.logger.error(`Gzip failed with error: ${err}`);
           reject(err);
         });
 
@@ -175,10 +175,10 @@ export class BackupService extends BaseService {
       });
       await this.storageRepository.rename(backupFilePath, backupFilePath.replace('.tmp', ''));
     } catch (error) {
-      this.logger.error('Database Backup Failure', error);
+      this.logger.error(`Database Backup Failure: ${error}`);
       await this.storageRepository
         .unlink(backupFilePath)
-        .catch((error) => this.logger.error('Failed to delete failed backup file', error));
+        .catch((error) => this.logger.error(`Failed to delete failed backup file: ${error}`));
       throw error;
     }
 

server/src/services/library.service.ts

@@ -245,7 +245,7 @@ export class LibraryService extends BaseService {
       job.paths.map((path) =>
         this.processEntity(path, library.ownerId, job.libraryId)
           .then((asset) => assetImports.push(asset))
-          .catch((error: any) => this.logger.error(`Error processing ${path} for library ${job.libraryId}`, error)),
+          .catch((error: any) => this.logger.error(`Error processing ${path} for library ${job.libraryId}: ${error}`)),
       ),
     );
 

server/src/services/memory.service.ts

@@ -40,7 +40,7 @@ export class MemoryService extends BaseService {
         try {
           await Promise.all(users.map((owner, i) => this.createOnThisDayMemories(owner.id, usersIds[i], target)));
         } catch (error) {
-          this.logger.error(`Failed to create memories for ${target.toISO()}`, error);
+          this.logger.error(`Failed to create memories for ${target.toISO()}: ${error}`);
         }
         // update system metadata even when there is an error to minimize the chance of duplicates
         await this.systemMetadataRepository.set(SystemMetadataKey.MemoriesState, {

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

@@ -729,7 +729,6 @@ describe(PersonService.name, () => {
       mocks.assetJob.getForDetectFacesJob.mockResolvedValue({ ...assetStub.image, files: [assetStub.image.files[1]] });
       await sut.handleDetectFaces({ id: assetStub.image.id });
       expect(mocks.machineLearning.detectFaces).toHaveBeenCalledWith(
-        ['http://immich-machine-learning:3003'],
         '/uploads/user-id/thumbs/path.jpg',
         expect.objectContaining({ minScore: 0.7, modelName: 'buffalo_l' }),
       );

server/src/services/person.service.ts

@@ -316,7 +316,6 @@ export class PersonService extends BaseService {
     }
 
     const { imageHeight, imageWidth, faces } = await this.machineLearningRepository.detectFaces(
-      machineLearning.urls,
       previewFile.path,
       machineLearning.facialRecognition,
     );

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

@@ -211,7 +211,6 @@ describe(SearchService.name, () => {
       await sut.searchSmart(authStub.user1, { query: 'test' });
 
       expect(mocks.machineLearning.encodeText).toHaveBeenCalledWith(
-        [expect.any(String)],
         'test',
         expect.objectContaining({ modelName: expect.any(String) }),
       );
@@ -225,7 +224,6 @@ describe(SearchService.name, () => {
       await sut.searchSmart(authStub.user1, { query: 'test', page: 2, size: 50 });
 
       expect(mocks.machineLearning.encodeText).toHaveBeenCalledWith(
-        [expect.any(String)],
         'test',
         expect.objectContaining({ modelName: expect.any(String) }),
       );
@@ -243,7 +241,6 @@ describe(SearchService.name, () => {
       await sut.searchSmart(authStub.user1, { query: 'test' });
 
       expect(mocks.machineLearning.encodeText).toHaveBeenCalledWith(
-        [expect.any(String)],
         'test',
         expect.objectContaining({ modelName: 'ViT-B-16-SigLIP__webli' }),
       );
@@ -253,7 +250,6 @@ describe(SearchService.name, () => {
       await sut.searchSmart(authStub.user1, { query: 'test', language: 'de' });
 
       expect(mocks.machineLearning.encodeText).toHaveBeenCalledWith(
-        [expect.any(String)],
         'test',
         expect.objectContaining({ language: 'de' }),
       );

server/src/services/search.service.ts

@@ -118,7 +118,7 @@ export class SearchService extends BaseService {
       const key = machineLearning.clip.modelName + dto.query + dto.language;
       embedding = this.embeddingCache.get(key);
       if (!embedding) {
-        embedding = await this.machineLearningRepository.encodeText(machineLearning.urls, dto.query, {
+        embedding = await this.machineLearningRepository.encodeText(dto.query, {
           modelName: machineLearning.clip.modelName,
           language: dto.language,
         });

server/src/services/smart-info.service.spec.ts

@@ -205,7 +205,6 @@ describe(SmartInfoService.name, () => {
       expect(await sut.handleEncodeClip({ id: assetStub.image.id })).toEqual(JobStatus.Success);
 
       expect(mocks.machineLearning.encodeImage).toHaveBeenCalledWith(
-        ['http://immich-machine-learning:3003'],
         '/uploads/user-id/thumbs/path.jpg',
         expect.objectContaining({ modelName: 'ViT-B-32__openai' }),
       );
@@ -242,7 +241,6 @@ describe(SmartInfoService.name, () => {
 
       expect(mocks.database.wait).toHaveBeenCalledWith(512);
       expect(mocks.machineLearning.encodeImage).toHaveBeenCalledWith(
-        ['http://immich-machine-learning:3003'],
         '/uploads/user-id/thumbs/path.jpg',
         expect.objectContaining({ modelName: 'ViT-B-32__openai' }),
       );

server/src/services/smart-info.service.ts

@@ -108,11 +108,7 @@ export class SmartInfoService extends BaseService {
       return JobStatus.Skipped;
     }
 
-    const embedding = await this.machineLearningRepository.encodeImage(
-      machineLearning.urls,
-      asset.files[0].path,
-      machineLearning.clip,
-    );
+    const embedding = await this.machineLearningRepository.encodeImage(asset.files[0].path, machineLearning.clip);
 
     if (this.databaseRepository.isBusy(DatabaseLock.CLIPDimSize)) {
       this.logger.verbose(`Waiting for CLIP dimension size to be updated`);

server/src/services/storage-template.service.ts

@@ -338,7 +338,7 @@ export class StorageTemplateService extends BaseService {
 
       return destination;
     } catch (error: any) {
-      this.logger.error(`Unable to get template path for ${filename}`, error);
+      this.logger.error(`Unable to get template path for ${filename}: ${error}`);
       return asset.originalPath;
     }
   }

server/src/services/system-config.service.spec.ts

@@ -82,6 +82,11 @@ const updatedConfig = Object.freeze<SystemConfig>({
   machineLearning: {
     enabled: true,
     urls: ['http://immich-machine-learning:3003'],
+    availabilityChecks: {
+      enabled: true,
+      interval: 30_000,
+      timeout: 2000,
+    },
     clip: {
       enabled: true,
       modelName: 'ViT-B-32__openai',

server/src/services/system-config.service.ts

@@ -16,6 +16,20 @@ export class SystemConfigService extends BaseService {
   async onBootstrap() {
     const config = await this.getConfig({ withCache: false });
     await this.eventRepository.emit('ConfigInit', { newConfig: config });
+
+    if (
+      process.env.IMMICH_MACHINE_LEARNING_PING_TIMEOUT ||
+      process.env.IMMICH_MACHINE_LEARNING_AVAILABILITY_BACKOFF_TIME
+    ) {
+      this.logger.deprecate(
+        'IMMICH_MACHINE_LEARNING_PING_TIMEOUT and MACHINE_LEARNING_AVAILABILITY_BACKOFF_TIME have been moved to system config(`machineLearning.availabilityChecks`) and will be removed in a future release.',
+      );
+    }
+  }
+
+  @OnEvent({ name: 'AppShutdown' })
+  onShutdown() {
+    this.machineLearningRepository.teardown();
   }
 
   async getSystemConfig(): Promise<SystemConfigDto> {
@@ -28,12 +42,14 @@ export class SystemConfigService extends BaseService {
   }
 
   @OnEvent({ name: 'ConfigInit', priority: -100 })
-  onConfigInit({ newConfig: { logging } }: ArgOf<'ConfigInit'>) {
+  onConfigInit({ newConfig: { logging, machineLearning } }: ArgOf<'ConfigInit'>) {
     const { logLevel: envLevel } = this.configRepository.getEnv();
     const configLevel = logging.enabled ? logging.level : false;
     const level = envLevel ?? configLevel;
     this.logger.setLogLevel(level);
     this.logger.log(`LogLevel=${level} ${envLevel ? '(set via IMMICH_LOG_LEVEL)' : '(set via system config)'}`);
+
+    this.machineLearningRepository.setup(machineLearning);
   }
 
   @OnEvent({ name: 'ConfigUpdate', server: true })

server/src/services/version.service.ts

@@ -95,7 +95,7 @@ export class VersionService extends BaseService {
         this.eventRepository.clientBroadcast('on_new_release', asNotification(metadata));
       }
     } catch (error: Error | any) {
-      this.logger.warn(`Unable to run version check: ${error}`, error?.stack);
+      this.logger.warn(`Unable to run version check: ${error}\n${error?.stack}`);
       return JobStatus.Failed;
     }
 

server/src/utils/file.ts

@@ -73,7 +73,7 @@ export const sendFile = async (
 
     // log non-http errors
     if (error instanceof HttpException === false) {
-      logger.error(`Unable to send file: ${error.name}`, error.stack);
+      logger.error(`Unable to send file: ${error}`, error.stack);
     }
 
     res.header('Cache-Control', 'none');

server/src/validation.ts

@@ -211,6 +211,18 @@ export const ValidateDate = (options?: DateOptions & ApiPropertyOptions) => {
   return applyDecorators(...decorators);
 };
 
+type StringOptions = { optional?: boolean; nullable?: boolean; trim?: boolean };
+export const ValidateString = (options?: StringOptions & ApiPropertyOptions) => {
+  const { optional, nullable, trim, ...apiPropertyOptions } = options || {};
+  const decorators = [ApiProperty(apiPropertyOptions), IsString(), optional ? Optional({ nullable }) : IsNotEmpty()];
+
+  if (trim) {
+    decorators.push(Transform(({ value }: { value: string }) => value?.trim()));
+  }
+
+  return applyDecorators(...decorators);
+};
+
 type BooleanOptions = { optional?: boolean; nullable?: boolean };
 export const ValidateBoolean = (options?: BooleanOptions & ApiPropertyOptions) => {
   const { optional, nullable, ...apiPropertyOptions } = options || {};

web/eslint.config.js

@@ -127,6 +127,7 @@ export default typescriptEslint.config(
       '@typescript-eslint/no-misused-promises': 'error',
       '@typescript-eslint/require-await': 'error',
       'object-shorthand': ['error', 'always'],
+      'svelte/no-navigation-without-resolve': 'off',
     },
   },
   {

web/package.json

@@ -55,7 +55,7 @@
     "qrcode": "^1.5.4",
     "simple-icons": "^15.15.0",
     "socket.io-client": "~4.8.0",
-    "svelte-gestures": "^5.1.3",
+    "svelte-gestures": "5.1.4",
     "svelte-i18n": "^4.0.1",
     "svelte-maplibre": "^1.2.0",
     "svelte-persisted-store": "^0.12.0",
@@ -70,7 +70,7 @@
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/enhanced-img": "^0.8.0",
     "@sveltejs/kit": "^2.27.1",
-    "@sveltejs/vite-plugin-svelte": "6.1.2",
+    "@sveltejs/vite-plugin-svelte": "6.2.0",
     "@tailwindcss/vite": "^4.1.7",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/svelte": "^5.2.8",
@@ -85,7 +85,7 @@
     "dotenv": "^17.0.0",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-p": "^0.25.0",
+    "eslint-p": "^0.26.0",
     "eslint-plugin-compat": "^6.0.2",
     "eslint-plugin-svelte": "^3.9.0",
     "eslint-plugin-unicorn": "^60.0.0",
@@ -97,7 +97,7 @@
     "prettier-plugin-sort-json": "^4.1.1",
     "prettier-plugin-svelte": "^3.3.3",
     "rollup-plugin-visualizer": "^6.0.0",
-    "svelte": "5.35.5",
+    "svelte": "5.38.10",
     "svelte-check": "^4.1.5",
     "svelte-eslint-parser": "^1.2.0",
     "tailwindcss": "^4.1.7",

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

@@ -9,7 +9,7 @@
   import { featureFlags } from '$lib/stores/server-config.store';
   import type { SystemConfigDto } from '@immich/sdk';
   import { Button, IconButton } from '@immich/ui';
-  import { mdiMinusCircle } from '@mdi/js';
+  import { mdiPlus, mdiTrashCanOutline } from '@mdi/js';
   import { isEqual } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -46,19 +46,6 @@
 
         <div>
           {#each config.machineLearning.urls as _, i (i)}
-            {#snippet removeButton()}
-              {#if config.machineLearning.urls.length > 1}
-                <IconButton
-                  size="large"
-                  shape="round"
-                  color="danger"
-                  aria-label=""
-                  onclick={() => config.machineLearning.urls.splice(i, 1)}
-                  icon={mdiMinusCircle}
-                />
-              {/if}
-            {/snippet}
-
             <SettingInputField
               inputType={SettingInputFieldType.TEXT}
               label={i === 0 ? $t('url') : undefined}
@@ -67,20 +54,69 @@
               required={i === 0}
               disabled={disabled || !config.machineLearning.enabled}
               isEdited={i === 0 && !isEqual(config.machineLearning.urls, savedConfig.machineLearning.urls)}
-              trailingSnippet={removeButton}
-            />
+            >
+              {#snippet trailingSnippet()}
+                {#if config.machineLearning.urls.length > 1}
+                  <IconButton
+                    aria-label=""
+                    onclick={() => config.machineLearning.urls.splice(i, 1)}
+                    icon={mdiTrashCanOutline}
+                    color="danger"
+                  />
+                {/if}
+              {/snippet}
+            </SettingInputField>
           {/each}
         </div>
 
-        <Button
-          class="mb-2"
-          size="small"
-          shape="round"
-          onclick={() => config.machineLearning.urls.splice(0, 0, '')}
-          disabled={disabled || !config.machineLearning.enabled}>{$t('add_url')}</Button
-        >
+        <div class="flex justify-end">
+          <Button
+            class="mb-2"
+            size="small"
+            shape="round"
+            leadingIcon={mdiPlus}
+            onclick={() => config.machineLearning.urls.push('')}
+            disabled={disabled || !config.machineLearning.enabled}>{$t('add_url')}</Button
+          >
+        </div>
       </div>
 
+      <SettingAccordion
+        key="availability-checks"
+        title={$t('admin.machine_learning_availability_checks')}
+        subtitle={$t('admin.machine_learning_availability_checks_description')}
+      >
+        <div class="ms-4 mt-4 flex flex-col gap-4">
+          <SettingSwitch
+            title={$t('admin.machine_learning_availability_checks_enabled')}
+            bind:checked={config.machineLearning.availabilityChecks.enabled}
+            disabled={disabled || !config.machineLearning.enabled}
+          />
+
+          <hr />
+
+          <SettingInputField
+            inputType={SettingInputFieldType.NUMBER}
+            label={$t('admin.machine_learning_availability_checks_interval')}
+            bind:value={config.machineLearning.availabilityChecks.interval}
+            description={$t('admin.machine_learning_availability_checks_interval_description')}
+            disabled={disabled || !config.machineLearning.enabled || !config.machineLearning.availabilityChecks.enabled}
+            isEdited={config.machineLearning.availabilityChecks.interval !==
+              savedConfig.machineLearning.availabilityChecks.interval}
+          />
+
+          <SettingInputField
+            inputType={SettingInputFieldType.NUMBER}
+            label={$t('admin.machine_learning_availability_checks_timeout')}
+            bind:value={config.machineLearning.availabilityChecks.timeout}
+            description={$t('admin.machine_learning_availability_checks_timeout_description')}
+            disabled={disabled || !config.machineLearning.enabled || !config.machineLearning.availabilityChecks.enabled}
+            isEdited={config.machineLearning.availabilityChecks.timeout !==
+              savedConfig.machineLearning.availabilityChecks.timeout}
+          />
+        </div>
+      </SettingAccordion>
+
       <SettingAccordion
         key="smart-search"
         title={$t('admin.machine_learning_smart_search')}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { resolve } from '$app/paths';
   import SupportedDatetimePanel from '$lib/components/admin-settings/SupportedDatetimePanel.svelte';
   import SupportedVariablesPanel from '$lib/components/admin-settings/SupportedVariablesPanel.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
@@ -262,7 +263,7 @@
                       values={{ job: $t('admin.storage_template_migration_job') }}
                     >
                       {#snippet children({ message })}
-                        <a href={AppRoute.ADMIN_JOBS} class="text-primary">
+                        <a href={resolve(AppRoute.ADMIN_JOBS)} class="text-primary">
                           {message}
                         </a>
                       {/snippet}

web/src/lib/components/album-page/album-card-group.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { resolve } from '$app/paths';
   import AlbumCard from '$lib/components/album-page/album-card.svelte';
   import { AppRoute } from '$lib/constants';
   import { albumViewSettings } from '$lib/stores/preferences.store';
@@ -65,7 +66,7 @@
       {#each albums as album, index (album.id)}
         <a
           data-sveltekit-preload-data="hover"
-          href="{AppRoute.ALBUMS}/{album.id}"
+          href={resolve(`${AppRoute.ALBUMS}/${album.id}`)}
           animate:flip={{ duration: 400 }}
           oncontextmenu={(event) => oncontextmenu(event, album)}
         >

web/src/lib/components/album-page/albums-list.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
   import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
   import AlbumsTable from '$lib/components/album-page/albums-table.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
@@ -315,7 +316,7 @@
       button: {
         text: $t('view_album'),
         onClick() {
-          return goto(`${AppRoute.ALBUMS}/${album.id}`);
+          return goto(resolve(`${AppRoute.ALBUMS}/${album.id}`));
         },
       },
     });

web/src/lib/components/album-page/albums-table-row.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
   import { AppRoute, dateFormats } from '$lib/constants';
   import { locale } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
@@ -32,7 +33,7 @@
 
 <tr
   class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-2 text-center even:bg-subtle/20 odd:bg-subtle/80 hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
-  onclick={() => goto(`${AppRoute.ALBUMS}/${album.id}`)}
+  onclick={() => goto(resolve(`${AppRoute.ALBUMS}/${album.id}`))}
   {oncontextmenu}
 >
   <td class="text-md text-ellipsis text-start w-8/12 sm:w-4/12 md:w-4/12 xl:w-[30%] 2xl:w-[40%] items-center">

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { resolve } from '$app/paths';
   import { autoGrowHeight } from '$lib/actions/autogrow';
   import { shortcut } from '$lib/actions/shortcut';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
@@ -146,7 +147,10 @@
 
               <div class="w-full leading-4 overflow-hidden self-center break-words text-sm">{reaction.comment}</div>
               {#if assetId === undefined && reaction.assetId}
-                <a class="aspect-square w-[75px] h-[75px]" href="{AppRoute.ALBUMS}/{albumId}/photos/{reaction.assetId}">
+                <a
+                  class="aspect-square w-[75px] h-[75px]"
+                  href={resolve(`${AppRoute.ALBUMS}/${albumId}/photos/${reaction.assetId}`)}
+                >
                   <img
                     class="rounded-lg w-[75px] h-[75px] object-cover"
                     src={getAssetThumbnailUrl(reaction.assetId)}
@@ -198,7 +202,7 @@
                 {#if assetId === undefined && reaction.assetId}
                   <a
                     class="aspect-square w-[75px] h-[75px]"
-                    href="{AppRoute.ALBUMS}/{albumId}/photos/{reaction.assetId}"
+                    href={resolve(`${AppRoute.ALBUMS}/${albumId}/photos/${reaction.assetId}`)}
                   >
                     <img
                       class="rounded-lg w-[75px] h-[75px] object-cover"

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
   import CastButton from '$lib/cast/cast-button.svelte';
   import type { OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
   import AddToAlbumAction from '$lib/components/asset-viewer/actions/add-to-album-action.svelte';
@@ -224,14 +225,15 @@
             {#if !asset.isArchived && !asset.isTrashed}
               <MenuOption
                 icon={mdiImageSearch}
-                onClick={() => goto(`${AppRoute.PHOTOS}?at=${stack?.primaryAssetId ?? asset.id}`)}
+                onClick={() => goto(resolve(`${AppRoute.PHOTOS}?at=${stack?.primaryAssetId ?? asset.id}`))}
                 text={$t('view_in_timeline')}
               />
             {/if}
             {#if !asset.isArchived && !asset.isTrashed && smartSearchEnabled}
               <MenuOption
                 icon={mdiCompare}
-                onClick={() => goto(`${AppRoute.SEARCH}?query={"queryAssetId":"${stack?.primaryAssetId ?? asset.id}"}`)}
+                onClick={() =>
+                  goto(resolve(`${AppRoute.SEARCH}?query={"queryAssetId":"${stack?.primaryAssetId ?? asset.id}"}`))}
                 text={$t('view_similar_photos')}
               />
             {/if}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { resolve } from '$app/paths';
   import { shortcut } from '$lib/actions/shortcut';
   import { AppRoute } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
@@ -45,7 +46,7 @@
         <div class="flex group transition-all">
           <a
             class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-primary rounded-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-            href={encodeURI(`${AppRoute.TAGS}/?path=${tag.value}`)}
+            href={resolve(`${AppRoute.TAGS}/?path=${encodeURI(tag.value)}`)}
           >
             <p class="text-sm">
               {tag.value}

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
   import DetailPanelDescription from '$lib/components/asset-viewer/detail-panel-description.svelte';
   import DetailPanelLocation from '$lib/components/asset-viewer/detail-panel-location.svelte';
   import DetailPanelRating from '$lib/components/asset-viewer/detail-panel-star-rating.svelte';
@@ -208,9 +209,11 @@
           {#if showingHiddenPeople || !person.isHidden}
             <a
               class="w-[90px]"
-              href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={currentAlbum?.id
-                ? `${AppRoute.ALBUMS}/${currentAlbum?.id}`
-                : AppRoute.PHOTOS}"
+              href={resolve(
+                `${AppRoute.PEOPLE}/${person.id}?${QueryParameter.PREVIOUS_ROUTE}=${
+                  currentAlbum?.id ? `${AppRoute.ALBUMS}/${currentAlbum?.id}` : AppRoute.PHOTOS
+                }`,
+              )}
               onfocus={() => ($boundingBoxesArray = people[index].faces)}
               onblur={() => ($boundingBoxesArray = [])}
               onmouseover={() => ($boundingBoxesArray = people[index].faces)}
@@ -362,6 +365,7 @@
         </p>
         {#if showAssetPath}
           <p class="text-xs opacity-50 break-all pb-2 hover:text-primary" transition:slide={{ duration: 250 }}>
+            <!-- eslint-disable-next-line svelte/no-navigation-without-resolve this is supposed to be treated as an absolute/external link -->
             <a href={getAssetFolderHref(asset)} title={$t('go_to_folder')} class="whitespace-pre-wrap">
               {asset.originalPath}
             </a>
@@ -394,10 +398,12 @@
           {#if asset.exifInfo?.make || asset.exifInfo?.model}
             <p>
               <a
-                href="{AppRoute.SEARCH}?{getMetadataSearchQuery({
-                  ...(asset.exifInfo?.make ? { make: asset.exifInfo.make } : {}),
-                  ...(asset.exifInfo?.model ? { model: asset.exifInfo.model } : {}),
-                })}"
+                href={resolve(
+                  `${AppRoute.SEARCH}?${getMetadataSearchQuery({
+                    ...(asset.exifInfo?.make ? { make: asset.exifInfo.make } : {}),
+                    ...(asset.exifInfo?.model ? { model: asset.exifInfo.model } : {}),
+                  })}`,
+                )}
                 title="{$t('search_for')} {asset.exifInfo.make || ''} {asset.exifInfo.model || ''}"
                 class="hover:text-primary"
               >
@@ -411,7 +417,9 @@
             <div class="flex gap-2 text-sm">
               <p>
                 <a
-                  href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ lensModel: asset.exifInfo.lensModel })}"
+                  href={resolve(
+                    `${AppRoute.SEARCH}?${getMetadataSearchQuery({ lensModel: asset.exifInfo.lensModel })}`,
+                  )}
                   title="{$t('search_for')} {asset.exifInfo.lensModel}"
                   class="hover:text-primary line-clamp-1"
                 >
@@ -475,7 +483,7 @@
         simplified
         useLocationPin
         showSimpleControls={!showEditFaces}
-        onOpenInMapView={() => goto(`${AppRoute.MAP}#12.5/${latlng.lat}/${latlng.lng}`)}
+        onOpenInMapView={() => goto(resolve(`${AppRoute.MAP}#12.5/${latlng.lat}/${latlng.lng}`))}
       >
         {#snippet popup({ marker })}
           {@const { lat, lon } = marker}
@@ -516,7 +524,7 @@
   <section class="px-6 pt-6 dark:text-immich-dark-fg">
     <p class="uppercase pb-4 text-sm">{$t('appears_in')}</p>
     {#each albums as album (album.id)}
-      <a href="{AppRoute.ALBUMS}/{album.id}">
+      <a href={resolve(`${AppRoute.ALBUMS}/${album.id}`)}>
         <div class="flex gap-4 pt-2 hover:cursor-pointer items-center">
           <div>
             <img

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

@@ -97,12 +97,15 @@
     }
 
     try {
-      await copyImageToClipboard($photoViewerImgElement ?? assetFileUrl);
-      notificationController.show({
-        type: NotificationType.Info,
-        message: $t('copied_image_to_clipboard'),
-        timeout: 3000,
-      });
+      const result = await copyImageToClipboard($photoViewerImgElement ?? assetFileUrl);
+      if (result.success) {
+        notificationController.show({ type: NotificationType.Info, message: $t('copied_image_to_clipboard') });
+      } else {
+        notificationController.show({
+          type: NotificationType.Error,
+          message: $t('errors.clipboard_unsupported_mime_type', { values: { mimeType: result.mimeType } }),
+        });
+      }
     } catch (error) {
       handleError(error, $t('copy_error'));
     }
@@ -240,7 +243,7 @@
       use:zoomImageAction
       use:swipe={() => ({})}
       onswipe={onSwipe}
-      class="h-full w-full"
+      class="h-full w-full flex"
       transition:fade={{ duration: haveFadeTransition ? assetViewerFadeDuration : 0 }}
     >
       {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
@@ -255,7 +258,7 @@
         bind:this={$photoViewerImgElement}
         src={assetFileUrl}
         alt={$getAltText(toTimelineAsset(asset))}
-        class="h-full w-full {$slideshowState === SlideshowState.None
+        class="max-h-full max-w-full h-auto w-auto mx-auto my-auto {$slideshowState === SlideshowState.None
           ? 'object-contain'
           : slideshowLookCssMapping[$slideshowLook]}"
         draggable="false"

web/src/lib/components/photos-page/asset-viewer-actions.svelte

@@ -1,162 +0,0 @@
-<script lang="ts">
-  import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import { AssetAction } from '$lib/constants';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
-  import { navigate } from '$lib/utils/navigation';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
-
-  let { asset: viewingAsset, gridScrollTarget, mutex } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    showSkeleton: boolean;
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE;
-    handlePreAction?: (action: Action) => Promise<void>;
-    handleAction?: (action: Action) => void;
-    handleNext?: () => Promise<boolean>;
-    handlePrevious?: () => Promise<boolean>;
-    handleRandom?: () => Promise<AssetResponseDto | undefined>;
-    handleClose?: (asset: { id: string }) => Promise<void>;
-  }
-
-  let {
-    timelineManager = $bindable(),
-    showSkeleton = $bindable(false),
-    removeAction,
-    handlePreAction = $bindable(),
-    handleAction = $bindable(),
-    handleNext = $bindable(),
-    handlePrevious = $bindable(),
-    handleRandom = $bindable(),
-    handleClose = $bindable(),
-  }: Props = $props();
-
-  handlePrevious = async () => {
-    const release = await mutex.acquire();
-    const laterAsset = await timelineManager.getLaterAsset($viewingAsset);
-
-    if (laterAsset) {
-      const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: laterAsset.id });
-    }
-
-    release();
-    return !!laterAsset;
-  };
-
-  handleNext = async () => {
-    const release = await mutex.acquire();
-    const earlierAsset = await timelineManager.getEarlierAsset($viewingAsset);
-
-    if (earlierAsset) {
-      const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
-    }
-
-    release();
-    return !!earlierAsset;
-  };
-
-  handleRandom = async () => {
-    const randomAsset = await timelineManager.getRandomAsset();
-
-    if (randomAsset) {
-      const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
-      assetViewingStore.setAsset(asset);
-      await navigate({ targetRoute: 'current', assetId: randomAsset.id });
-      return asset;
-    }
-  };
-
-  handleClose = async (asset: { id: string }) => {
-    assetViewingStore.showAssetViewer(false);
-    showSkeleton = true;
-    $gridScrollTarget = { at: asset.id };
-    await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
-  };
-
-  handlePreAction = async (action: Action) => {
-    switch (action.type) {
-      case removeAction:
-      case AssetAction.TRASH:
-      case AssetAction.RESTORE:
-      case AssetAction.DELETE:
-      case AssetAction.ARCHIVE:
-      case AssetAction.SET_VISIBILITY_LOCKED:
-      case AssetAction.SET_VISIBILITY_TIMELINE: {
-        // find the next asset to show or close the viewer
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));
-
-        // delete after find the next one
-        timelineManager.removeAssets([action.asset.id]);
-        break;
-      }
-    }
-  };
-  handleAction = (action: Action) => {
-    switch (action.type) {
-      case AssetAction.ARCHIVE:
-      case AssetAction.UNARCHIVE:
-      case AssetAction.FAVORITE:
-      case AssetAction.UNFAVORITE: {
-        timelineManager.updateAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.ADD: {
-        timelineManager.addAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.UNSTACK: {
-        updateUnstackedAssetInTimeline(timelineManager, action.assets);
-        break;
-      }
-      case AssetAction.REMOVE_ASSET_FROM_STACK: {
-        timelineManager.addAssets([toTimelineAsset(action.asset)]);
-        if (action.stack) {
-          //Have to unstack then restack assets in timeline in order to update the stack count in the timeline.
-          updateUnstackedAssetInTimeline(
-            timelineManager,
-            action.stack.assets.map((asset) => toTimelineAsset(asset)),
-          );
-          updateStackedAssetInTimeline(timelineManager, {
-            stack: action.stack,
-            toDeleteIds: action.stack.assets
-              .filter((asset) => asset.id !== action.stack?.primaryAssetId)
-              .map((asset) => asset.id),
-          });
-        }
-        break;
-      }
-      case AssetAction.SET_STACK_PRIMARY_ASSET: {
-        //Have to unstack then restack assets in timeline in order for the currently removed new primary asset to be made visible.
-        updateUnstackedAssetInTimeline(
-          timelineManager,
-          action.stack.assets.map((asset) => toTimelineAsset(asset)),
-        );
-        updateStackedAssetInTimeline(timelineManager, {
-          stack: action.stack,
-          toDeleteIds: action.stack.assets
-            .filter((asset) => asset.id !== action.stack.primaryAssetId)
-            .map((asset) => asset.id),
-        });
-        break;
-      }
-    }
-  };
-</script>

web/src/lib/components/photos-page/asset-viewer-and-actions.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import AssetViewerActions from '$lib/components/photos-page/asset-viewer-actions.svelte';
-  import { AssetAction } from '$lib/constants';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';
-
-  let { asset: viewingAsset, preloadAssets } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    showSkeleton: boolean;
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE;
-    withStacked?: boolean;
-    isShared?: boolean;
-    album?: AlbumResponseDto | null;
-    person?: PersonResponseDto | null;
-    isShowDeleteConfirmation?: boolean;
-  }
-
-  let {
-    timelineManager = $bindable(),
-    showSkeleton = $bindable(false),
-    removeAction,
-    withStacked = false,
-    isShared = false,
-    album = null,
-    person = null,
-    isShowDeleteConfirmation = $bindable(false),
-  }: Props = $props();
-
-  let handlePreAction = <(action: Action) => Promise<void>>$state();
-  let handleAction = <(action: Action) => void>$state();
-  let handleNext = <() => Promise<boolean>>$state();
-  let handlePrevious = <() => Promise<boolean>>$state();
-  let handleRandom = <() => Promise<AssetResponseDto | undefined>>$state();
-  let handleClose = <(asset: { id: string }) => Promise<void>>$state();
-</script>
-
-<AssetViewerActions
-  {timelineManager}
-  {removeAction}
-  bind:showSkeleton
-  bind:handlePreAction
-  bind:handleAction
-  bind:handleNext
-  bind:handlePrevious
-  bind:handleRandom
-  bind:handleClose
-></AssetViewerActions>
-
-{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
-  <AssetViewer
-    {withStacked}
-    asset={$viewingAsset}
-    preloadAssets={$preloadAssets}
-    {isShared}
-    {album}
-    {person}
-    preAction={handlePreAction}
-    onAction={handleAction}
-    onPrevious={handlePrevious}
-    onNext={handleNext}
-    onRandom={handleRandom}
-    onClose={handleClose}
-  />
-{/await}

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

@@ -7,6 +7,7 @@
 
 <script lang="ts">
   import DateInput from '$lib/elements/DateInput.svelte';
+  import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -14,31 +15,27 @@
   }
 
   let { filters = $bindable() }: Props = $props();
+
+  let invalid = $derived(filters.takenAfter && filters.takenBefore && filters.takenAfter > filters.takenBefore);
+
+  const inputClasses = $derived(
+    `immich-form-input w-full mt-1 hover:cursor-pointer ${invalid ? 'border border-danger' : ''}`,
+  );
 </script>
 
-<div id="date-range-selection" class="grid grid-auto-fit-40 gap-5">
-  <label class="immich-form-label" for="start-date">
-    <span class="uppercase">{$t('start_date')}</span>
-    <DateInput
-      class="immich-form-input w-full mt-1 hover:cursor-pointer"
-      type="date"
-      id="start-date"
-      name="start-date"
-      max={filters.takenBefore}
-      bind:value={filters.takenAfter}
-    />
-  </label>
+<div class="flex flex-col gap-1">
+  <div id="date-range-selection" class="grid grid-auto-fit-40 gap-5">
+    <label class="immich-form-label" for="start-date">
+      <span class="uppercase">{$t('start_date')}</span>
+      <DateInput class={inputClasses} type="date" id="start-date" name="start-date" bind:value={filters.takenAfter} />
+    </label>
 
-  <label class="immich-form-label" for="end-date">
-    <span class="uppercase">{$t('end_date')}</span>
-    <DateInput
-      class="immich-form-input w-full mt-1 hover:cursor-pointer"
-      type="date"
-      id="end-date"
-      name="end-date"
-      placeholder=""
-      min={filters.takenAfter}
-      bind:value={filters.takenBefore}
-    />
-  </label>
+    <label class="immich-form-label" for="end-date">
+      <span class="uppercase">{$t('end_date')}</span>
+      <DateInput class={inputClasses} type="date" id="end-date" name="end-date" bind:value={filters.takenBefore} />
+    </label>
+  </div>
+  {#if invalid}
+    <Text color="danger">{$t('start_date_before_end_date')}</Text>
+  {/if}
 </div>

web/src/lib/components/shared-components/settings/setting-input-field.svelte

@@ -105,7 +105,7 @@
   {/if}
 
   {#if inputType !== SettingInputFieldType.PASSWORD}
-    <div class="flex place-items-center place-content-center">
+    <div class="flex place-items-center place-content-center gap-2">
       {#if inputType === SettingInputFieldType.COLOR}
         <input
           bind:this={input}

web/src/lib/components/shared-components/side-bar/recent-albums.spec.ts

@@ -17,6 +17,9 @@ describe('RecentAlbums component', () => {
     render(RecentAlbums);
 
     expect(sdkMock.getAllAlbums).toBeCalledTimes(1);
+
+    // wtf
+    await tick();
     await tick();
 
     const links = screen.getAllByRole('link');

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

@@ -3,7 +3,7 @@
   import type { ScrubberMonth } from '$lib/managers/timeline-manager/types';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { getTabbable } from '$lib/utils/focus-util';
-  import { type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
+  import { type ScrubberListener } from '$lib/utils/timeline-util';
   import { Icon } from '@immich/ui';
   import { mdiPlay } from '@mdi/js';
   import { clamp } from 'lodash-es';
@@ -11,31 +11,18 @@
   import { fade, fly } from 'svelte/transition';
 
   interface Props {
-    /** Offset from the top of the timeline (e.g., for headers) */
     timelineTopOffset?: number;
-    /** Offset from the bottom of the timeline (e.g., for footers) */
     timelineBottomOffset?: number;
-    /** Total height of the scrubber component */
     height?: number;
-    /** Timeline manager instance that controls the timeline state */
     timelineManager: TimelineManager;
-    /** Overall scroll percentage through the entire timeline (0-1), used when no specific month is targeted */
-    timelineScrollPercent?: number;
-    /** The percentage of scroll through the month that is currently intersecting the top boundary of the viewport */
-    viewportTopMonthScrollPercent?: number;
-    /** The year/month of the timeline month at the top of the viewport */
-    viewportTopMonth?: TimelineYearMonth;
-    /** Indicates whether the viewport is currently in the lead-out section (after all months) */
-    isInLeadOutSection?: boolean;
-    /** Width of the scrubber component in pixels (bindable for parent component margin adjustments) */
+    scrubOverallPercent?: number;
+    scrubberMonthPercent?: number;
+    scrubberMonth?: { year: number; month: number };
+    leadout?: boolean;
     scrubberWidth?: number;
-    /** Callback fired when user interacts with the scrubber to navigate */
     onScrub?: ScrubberListener;
-    /** Callback fired when keyboard events occur on the scrubber */
     onScrubKeyDown?: (event: KeyboardEvent, element: HTMLElement) => void;
-    /** Callback fired when scrubbing starts */
     startScrub?: ScrubberListener;
-    /** Callback fired when scrubbing stops */
     stopScrub?: ScrubberListener;
   }
 
@@ -44,10 +31,10 @@
     timelineBottomOffset = 0,
     height = 0,
     timelineManager,
-    timelineScrollPercent = 0,
-    viewportTopMonthScrollPercent = 0,
-    viewportTopMonth = undefined,
-    isInLeadOutSection = false,
+    scrubOverallPercent = 0,
+    scrubberMonthPercent = 0,
+    scrubberMonth = undefined,
+    leadout = false,
     onScrub = undefined,
     onScrubKeyDown = undefined,
     startScrub = undefined,
@@ -113,7 +100,7 @@
         offset += scrubberMonthPercent * relativeBottomOffset;
       }
       return offset;
-    } else if (isInLeadOutSection) {
+    } else if (leadout) {
       let offset = relativeTopOffset;
       for (const segment of segments) {
         offset += segment.height;
@@ -124,9 +111,7 @@
       return scrubOverallPercent * (height - (PADDING_TOP + PADDING_BOTTOM));
     }
   };
-  let scrollY = $derived(
-    toScrollFromMonthGroupPercentage(viewportTopMonth, viewportTopMonthScrollPercent, timelineScrollPercent),
-  );
+  let scrollY = $derived(toScrollFromMonthGroupPercentage(scrubberMonth, scrubberMonthPercent, scrubOverallPercent));
   let timelineFullHeight = $derived(timelineManager.scrubberTimelineHeight + timelineTopOffset + timelineBottomOffset);
   let relativeTopOffset = $derived(toScrollY(timelineTopOffset / timelineFullHeight));
   let relativeBottomOffset = $derived(toScrollY(timelineBottomOffset / timelineFullHeight));
@@ -310,24 +295,12 @@
 
     const scrollPercent = toTimelineY(hoverY);
     if (wasDragging === false && isDragging) {
-      void startScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
-      void onScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
+      void startScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
+      void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
     }
 
     if (wasDragging && !isDragging) {
-      void stopScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
+      void stopScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
       return;
     }
 
@@ -335,11 +308,7 @@
       return;
     }
 
-    void onScrub?.({
-      scrubberMonth: segmentDate!,
-      overallScrollPercent: scrollPercent,
-      scrubberMonthScrollPercent: monthGroupPercentY,
-    });
+    void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
   };
   /* eslint-disable tscompat/tscompat */
   const getTouch = (event: TouchEvent) => {
@@ -443,11 +412,7 @@
       }
       if (next) {
         event.preventDefault();
-        void onScrub?.({
-          scrubberMonth: { year: next.year, month: next.month },
-          overallScrollPercent: -1,
-          scrubberMonthScrollPercent: 0,
-        });
+        void onScrub?.({ year: next.year, month: next.month }, -1, 0);
         return true;
       }
     }
@@ -457,11 +422,7 @@
         const next = segments[idx + 1];
         if (next) {
           event.preventDefault();
-          void onScrub?.({
-            scrubberMonth: { year: next.year, month: next.month },
-            overallScrollPercent: -1,
-            scrubberMonthScrollPercent: 0,
-          });
+          void onScrub?.({ year: next.year, month: next.month }, -1, 0);
           return true;
         }
       }

web/src/lib/components/timeline/actions/delete-asset-dialog.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { Checkbox, ConfirmModal, Label } from '@immich/ui';
-  import { mdiDeleteForeverOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    size: number;
-    onConfirm: () => void;
-    onCancel: () => void;
-  }
-
-  let { size, onConfirm, onCancel }: Props = $props();
-
-  let checked = $state(false);
-
-  const handleConfirm = () => {
-    if (checked) {
-      $showDeleteModal = false;
-    }
-    onConfirm();
-  };
-</script>
-
-<ConfirmModal
-  title={$t('permanently_delete_assets_count', { values: { count: size } })}
-  confirmText={$t('delete')}
-  icon={mdiDeleteForeverOutline}
-  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
->
-  {#snippet promptSnippet()}
-    <p>
-      <FormatMessage key="permanently_delete_assets_prompt" values={{ count: size }}>
-        {#snippet children({ message })}
-          <b>{message}</b>
-        {/snippet}
-      </FormatMessage>
-    </p>
-    <p><b>{$t('cannot_undo_this_action')}</b></p>
-
-    <div class="pt-4 flex justify-center items-center gap-2">
-      <Checkbox id="confirm-deletion-input" bind:checked color="secondary" />
-      <Label label={$t('do_not_show_again')} for="confirm-deletion-input" />
-    </div>
-  {/snippet}
-</ConfirmModal>

web/src/lib/components/timeline/actions/timeline-keyboard-actions.svelte

@@ -1,223 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
-  import ChangeDate, {
-    type AbsoluteResult,
-    type RelativeResult,
-  } from '$lib/components/shared-components/change-date.svelte';
-  import {
-    setFocusToAsset as setFocusAssetInit,
-    setFocusTo as setFocusToInit,
-  } from '$lib/components/timeline/actions/focus-actions';
-  import { AppRoute } from '$lib/constants';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { searchStore } from '$lib/stores/search.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
-  import { handlePromiseError } from '$lib/utils';
-  import { deleteAssets, updateStackedAssetInTimeline } from '$lib/utils/actions';
-  import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
-  import { AssetVisibility } from '@immich/sdk';
-  import { modalManager } from '@immich/ui';
-  import { DateTime } from 'luxon';
-  import { t } from 'svelte-i18n';
-  import DeleteAssetDialog from './delete-asset-dialog.svelte';
-  let { isViewing: showAssetViewer } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    isShowDeleteConfirmation: boolean;
-    onEscape?: () => void;
-    scrollToAsset: (asset: TimelineAsset) => boolean;
-  }
-
-  let {
-    timelineManager = $bindable(),
-    assetInteraction,
-    isShowDeleteConfirmation = $bindable(false),
-    onEscape,
-    scrollToAsset,
-  }: Props = $props();
-
-  let isShowSelectDate = $state(false);
-
-  const trashOrDelete = async (force: boolean = false) => {
-    isShowDeleteConfirmation = false;
-    await deleteAssets(
-      !(isTrashEnabled && !force),
-      (assetIds) => timelineManager.removeAssets(assetIds),
-      assetInteraction.selectedAssets,
-      !isTrashEnabled || force ? undefined : (assets) => timelineManager.addAssets(assets),
-    );
-    assetInteraction.clearMultiselect();
-  };
-
-  const onDelete = () => {
-    const hasTrashedAsset = assetInteraction.selectedAssets.some((asset) => asset.isTrashed);
-
-    if ($showDeleteModal && (!isTrashEnabled || hasTrashedAsset)) {
-      isShowDeleteConfirmation = true;
-      return;
-    }
-    handlePromiseError(trashOrDelete(hasTrashedAsset));
-  };
-
-  const onForceDelete = () => {
-    if ($showDeleteModal) {
-      isShowDeleteConfirmation = true;
-      return;
-    }
-    handlePromiseError(trashOrDelete(true));
-  };
-
-  const onStackAssets = async () => {
-    const result = await stackAssets(assetInteraction.selectedAssets);
-
-    updateStackedAssetInTimeline(timelineManager, result);
-
-    onEscape?.();
-  };
-
-  const toggleArchive = async () => {
-    const visibility = assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive;
-    const ids = await archiveAssets(assetInteraction.selectedAssets, visibility);
-    timelineManager.updateAssetOperation(ids, (asset) => {
-      asset.visibility = visibility;
-      return { remove: false };
-    });
-    deselectAllAssets();
-  };
-
-  let shiftKeyIsDown = $state(false);
-
-  const deselectAllAssets = () => {
-    cancelMultiselect(assetInteraction);
-  };
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = true;
-    }
-  };
-
-  const onKeyUp = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = false;
-    }
-  };
-
-  const onSelectStart = (e: Event) => {
-    if (assetInteraction.selectionActive && shiftKeyIsDown) {
-      e.preventDefault();
-    }
-  };
-
-  const isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
-  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-  const idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id));
-  let isShortcutModalOpen = false;
-
-  const handleOpenShortcutModal = async () => {
-    if (isShortcutModalOpen) {
-      return;
-    }
-
-    isShortcutModalOpen = true;
-    await modalManager.show(ShortcutsModal, {});
-    isShortcutModalOpen = false;
-  };
-
-  $effect(() => {
-    if (isEmpty) {
-      assetInteraction.clearMultiselect();
-    }
-  });
-
-  const setFocusTo = setFocusToInit.bind(undefined, scrollToAsset, timelineManager);
-  const setFocusAsset = setFocusAssetInit.bind(undefined, scrollToAsset);
-
-  let shortcutList = $derived(
-    (() => {
-      if (searchStore.isSearchEnabled || $showAssetViewer) {
-        return [];
-      }
-
-      const shortcuts: ShortcutOptions[] = [
-        { shortcut: { key: '?', shift: true }, onShortcut: handleOpenShortcutModal },
-        { shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
-        { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(timelineManager, assetInteraction) },
-        { shortcut: { key: 'ArrowRight' }, onShortcut: () => setFocusTo('earlier', 'asset') },
-        { shortcut: { key: 'ArrowLeft' }, onShortcut: () => setFocusTo('later', 'asset') },
-        { shortcut: { key: 'D' }, onShortcut: () => setFocusTo('earlier', 'day') },
-        { shortcut: { key: 'D', shift: true }, onShortcut: () => setFocusTo('later', 'day') },
-        { shortcut: { key: 'M' }, onShortcut: () => setFocusTo('earlier', 'month') },
-        { shortcut: { key: 'M', shift: true }, onShortcut: () => setFocusTo('later', 'month') },
-        { shortcut: { key: 'Y' }, onShortcut: () => setFocusTo('earlier', 'year') },
-        { shortcut: { key: 'Y', shift: true }, onShortcut: () => setFocusTo('later', 'year') },
-        { shortcut: { key: 'G' }, onShortcut: () => (isShowSelectDate = true) },
-      ];
-      if (onEscape) {
-        shortcuts.push({ shortcut: { key: 'Escape' }, onShortcut: onEscape });
-      }
-
-      if (assetInteraction.selectionActive) {
-        shortcuts.push(
-          { shortcut: { key: 'Delete' }, onShortcut: onDelete },
-          { shortcut: { key: 'Delete', shift: true }, onShortcut: onForceDelete },
-          { shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
-          { shortcut: { key: 's' }, onShortcut: () => onStackAssets() },
-          { shortcut: { key: 'a', shift: true }, onShortcut: toggleArchive },
-        );
-      }
-
-      return shortcuts;
-    })(),
-  );
-</script>
-
-<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} onselectstart={onSelectStart} use:shortcuts={shortcutList} />
-
-{#if isShowDeleteConfirmation}
-  <DeleteAssetDialog
-    size={idsSelectedAssets.length}
-    onCancel={() => (isShowDeleteConfirmation = false)}
-    onConfirm={() => handlePromiseError(trashOrDelete(true))}
-  />
-{/if}
-
-{#if isShowSelectDate}
-  <!-- remove for now confirmText={$t('navigate')} -->
-  <ChangeDate
-    withDuration={false}
-    title={$t('navigate_to_time')}
-    initialDate={DateTime.now()}
-    timezoneInput={false}
-    onConfirm={async (result: AbsoluteResult | RelativeResult) => {
-      isShowSelectDate = false;
-      if (result.mode === 'absolute') {
-        const asset = await timelineManager.getClosestAssetToDate(
-          (DateTime.fromISO(result.date) as DateTime<true>).toObject(),
-        );
-        if (asset) {
-          setFocusAsset(asset);
-        }
-      }
-    }}
-    onCancel={() => (isShowSelectDate = false)}
-  />
-{/if}

web/src/lib/components/timeline/base-components/base-timeline-viewer.svelte

@@ -1,318 +0,0 @@
-<script lang="ts">
-  import { afterNavigate, beforeNavigate } from '$app/navigation';
-  import { page } from '$app/stores';
-  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
-  import Skeleton from '$lib/components/timeline/base-components/skeleton.svelte';
-  import SelectableTimelineMonth from '$lib/components/timeline/internal-components/selectable-timeline-month.svelte';
-  import HotModuleReload from '$lib/elements/HotModuleReload.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
-  import { onMount, type Snippet } from 'svelte';
-  import type { UpdatePayload } from 'vite';
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
-    /** `true` if this asset grid responds to navigation events; if `true`, then look at the
-     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
-     additionally, update the page location/url with the asset as the asset-grid is scrolled */
-    enableRouting: boolean;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
-    showSkeleton?: boolean;
-    isShowDeleteConfirmation?: boolean;
-    styleMarginRightOverride?: string;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
-    header?: Snippet<[scrollToFunction: (top: number) => void]>;
-    children?: Snippet;
-    empty?: Snippet;
-    handleTimelineScroll?: () => void;
-  }
-
-  let {
-    customThumbnailLayout,
-
-    isSelectionMode = false,
-    singleSelect = false,
-    enableRouting,
-    timelineManager = $bindable(),
-    assetInteraction,
-    withStacked = false,
-    showSkeleton = $bindable(true),
-    showArchiveIcon = false,
-    styleMarginRightOverride,
-    isShowDeleteConfirmation = $bindable(false),
-
-    onAssetOpen,
-    onSelect,
-    children,
-    empty,
-    header,
-    handleTimelineScroll = () => {},
-  }: Props = $props();
-
-  let { gridScrollTarget } = assetViewingStore;
-
-  let element: HTMLElement | undefined = $state();
-  let timelineElement: HTMLElement | undefined = $state();
-
-  const maxMd = $derived(mobileDevice.maxMd);
-  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-
-  $effect(() => {
-    const layoutOptions = maxMd
-      ? {
-          rowHeight: 100,
-          headerHeight: 32,
-        }
-      : {
-          rowHeight: 235,
-          headerHeight: 48,
-        };
-    timelineManager.setLayoutOptions(layoutOptions);
-  });
-
-  const scrollTo = (top: number) => {
-    if (element) {
-      element.scrollTo({ top });
-    }
-    updateSlidingWindow();
-  };
-
-  const scrollBy = (y: number) => {
-    if (element) {
-      element.scrollBy(0, y);
-    }
-    updateSlidingWindow();
-  };
-
-  const scrollCompensation = (compensation: { heightDelta?: number; scrollTop?: number }) => {
-    const { heightDelta, scrollTop } = compensation;
-    if (heightDelta !== undefined) {
-      scrollBy(heightDelta);
-    } else if (scrollTop !== undefined) {
-      scrollTo(scrollTop);
-    }
-    timelineManager.clearScrollCompensation();
-  };
-
-  const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => {
-    // the following method may trigger any layouts, so need to
-    // handle any scroll compensation that may have been set
-    const height = monthGroup!.findAssetAbsolutePosition(assetId);
-
-    // this is in a while loop, since scrollCompensations invoke scrolls
-    // which may load months, triggering more scrollCompensations. Call
-    // this in a loop, until no more layouts occur.
-    while (timelineManager.scrollCompensation.monthGroup) {
-      scrollCompensation(timelineManager.scrollCompensation);
-    }
-    return height;
-  };
-
-  const assetIsVisible = (assetTop: number): boolean => {
-    if (!element) {
-      return false;
-    }
-
-    const { clientHeight, scrollTop } = element;
-    return assetTop >= scrollTop && assetTop < scrollTop + clientHeight;
-  };
-
-  const scrollToAssetId = async (assetId: string) => {
-    const monthGroup = await timelineManager.findMonthGroupForAsset(assetId);
-    if (!monthGroup) {
-      return false;
-    }
-    const height = getAssetHeight(assetId, monthGroup);
-
-    // If the asset is already visible, then don't scroll.
-    if (assetIsVisible(height)) {
-      return true;
-    }
-
-    scrollTo(height);
-    return true;
-  };
-
-  export const scrollToAsset = (asset: TimelineAsset) => {
-    const monthGroup = timelineManager.getMonthGroupByAssetId(asset.id);
-    if (!monthGroup) {
-      return false;
-    }
-    const height = getAssetHeight(asset.id, monthGroup);
-    scrollTo(height);
-    return true;
-  };
-
-  const completeNav = async () => {
-    const scrollTarget = $gridScrollTarget?.at;
-    let scrolled = false;
-    if (scrollTarget) {
-      scrolled = await scrollToAssetId(scrollTarget);
-    }
-    if (!scrolled) {
-      // if the asset is not found, scroll to the top
-      scrollTo(0);
-    }
-    showSkeleton = false;
-  };
-
-  beforeNavigate(() => (timelineManager.suspendTransitions = true));
-
-  afterNavigate((nav) => {
-    const { complete } = nav;
-    complete.then(completeNav, completeNav);
-  });
-
-  const updateIsScrolling = () => (timelineManager.scrolling = true);
-  // Yes, updateSlideWindow() is called by the onScroll event. However, if you also just scrolled
-  // by explicitly invoking element.scrollX functions, there may be a delay with enough time to
-  // set the intersecting property of the monthGroup to false, then true, which causes the DOM
-  // nodes to be recreated, causing bad perf, and also, disrupting focus of those elements.
-  // Also note: don't throttle, debounce, or otherwise do this function async - it causes flicker
-  const updateSlidingWindow = () => timelineManager.updateSlidingWindow(element?.scrollTop || 0);
-
-  const topSectionResizeObserver: OnResizeCallback = ({ height }) => (timelineManager.topSectionHeight = height);
-
-  onMount(() => {
-    if (!enableRouting) {
-      showSkeleton = false;
-    }
-  });
-</script>
-
-<HotModuleReload
-  onAfterUpdate={(payload: UpdatePayload) => {
-    // when hmr happens, skeleton is initialized to true by default
-    // normally, loading asset-grid is part of a navigation event, and the completion of
-    // that event triggers a scroll-to-asset, if necessary, when then clears the skeleton.
-    // this handler will run the navigation/scroll-to-asset handler when hmr is performed,
-    // preventing skeleton from showing after hmr
-    const finishHmr = () => {
-      const asset = $page.url.searchParams.get('at');
-      if (asset) {
-        $gridScrollTarget = { at: asset };
-      }
-      void completeNav();
-    };
-    const assetGridUpdate = payload.updates.some((update) => update.path.endsWith('base-timeline-viewer.svelte'));
-    if (assetGridUpdate) {
-      // wait 500ms for the update to be fully swapped in
-      setTimeout(finishHmr, 500);
-    }
-  }}
-/>
-
-{@render header?.(scrollTo)}
-
-<!-- Right margin MUST be equal to the width of scrubber -->
-<section
-  id="asset-grid"
-  class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
-  style:margin-right={styleMarginRightOverride}
-  tabindex="-1"
-  bind:clientHeight={timelineManager.viewportHeight}
-  bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
-  bind:this={element}
-  onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
->
-  <section
-    bind:this={timelineElement}
-    id="virtual-timeline"
-    class:invisible={showSkeleton}
-    style:height={timelineManager.timelineHeight + 'px'}
-  >
-    <section
-      use:resizeObserver={topSectionResizeObserver}
-      class:invisible={showSkeleton}
-      style:position="absolute"
-      style:left="0"
-      style:right="0"
-    >
-      {@render children?.()}
-      {#if isEmpty}
-        <!-- (optional) empty placeholder -->
-        {@render empty?.()}
-      {/if}
-    </section>
-
-    {#each timelineManager.months as monthGroup (monthGroup.viewId)}
-      {@const display = monthGroup.intersecting}
-      {@const absoluteHeight = monthGroup.top}
-
-      {#if !monthGroup.isLoaded}
-        <div
-          style:height={monthGroup.height + 'px'}
-          style:position="absolute"
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
-          style:width="100%"
-        >
-          <Skeleton
-            height={monthGroup.height - monthGroup.timelineManager.headerHeight}
-            title={monthGroup.monthGroupTitle}
-          />
-        </div>
-      {:else if display}
-        <div
-          class="month-group"
-          style:height={monthGroup.height + 'px'}
-          style:position="absolute"
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
-          style:width="100%"
-        >
-          <SelectableTimelineMonth
-            {customThumbnailLayout}
-            {withStacked}
-            {showArchiveIcon}
-            {assetInteraction}
-            {timelineManager}
-            {isSelectionMode}
-            {singleSelect}
-            {monthGroup}
-            {onAssetOpen}
-            onSelect={(isSingleSelect: boolean, asset: TimelineAsset) => {
-              if (isSingleSelect) {
-                scrollTo(0);
-              }
-              onSelect?.(asset);
-            }}
-            onScrollCompensationMonthInDOM={scrollCompensation}
-          />
-        </div>
-      {/if}
-    {/each}
-    <!-- spacer for lead-out -->
-    <div
-      class="h-[60px]"
-      style:position="absolute"
-      style:left="0"
-      style:right="0"
-      style:transform={`translate3d(0,${timelineManager.timelineHeight}px,0)`}
-    ></div>
-  </section>
-</section>
-
-<style>
-  #asset-grid {
-    contain: strict;
-    scrollbar-width: none;
-  }
-
-  .month-group {
-    contain: layout size paint;
-    transform-style: flat;
-    backface-visibility: hidden;
-    transform-origin: center center;
-  }
-</style>

web/src/lib/components/timeline/base-components/base-timeline.svelte

@@ -1,201 +0,0 @@
-<script lang="ts">
-  import BaseTimelineViewer from '$lib/components/timeline/base-components/base-timeline-viewer.svelte';
-  import Scrubber from '$lib/components/timeline/Scrubber.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { findMonthAtScrollPosition, type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
-    /** `true` if this timeline responds to navigation events; if `true`, then look at the
-     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
-     additionally, update the page location/url with the asset as the asset-grid is scrolled */
-    enableRouting: boolean;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
-    showSkeleton?: boolean;
-
-    isShowDeleteConfirmation?: boolean;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
-
-    children?: Snippet;
-    empty?: Snippet;
-  }
-
-  let {
-    customThumbnailLayout,
-    isSelectionMode = false,
-    singleSelect = false,
-    enableRouting,
-    timelineManager = $bindable(),
-    assetInteraction,
-
-    withStacked = false,
-    showArchiveIcon = false,
-    showSkeleton = $bindable(true),
-    isShowDeleteConfirmation = $bindable(false),
-    onAssetOpen,
-    onSelect = () => {},
-    children,
-    empty,
-  }: Props = $props();
-
-  const VIEWPORT_MULTIPLIER = 2; // Used to determine if timeline is "small"
-
-  // The percentage of scroll through the month that is currently intersecting the top boundary of the viewport.
-  // Note: There may be multiple months visible within the viewport at any given time.
-  let viewportTopMonthScrollPercent = $state(0);
-  // The timeline month intersecting the top position of the viewport
-  let viewportTopMonth: TimelineYearMonth | undefined = $state(undefined);
-  // Overall scroll percentage through the entire timeline (0-1)
-  let timelineScrollPercent: number = $state(0);
-  // Indicates whether the viewport is currently in the lead-out section (after all months)
-  let isInLeadOutSection = $state(false);
-  // Width of the scrubber component in pixels, used to adjust timeline margins
-  let scrubberWidth: number = $state(0);
-
-  // note: don't throttle, debounce, or otherwise make this function async - it causes flicker
-  // this function updates the scrubber position based on the current scroll position in the timeline
-  const handleTimelineScroll = () => {
-    isInLeadOutSection = false;
-
-    // Handle edge cases: small timeline (limited scroll) or lead-in area scrolling
-    const top = timelineManager.visibleWindow.top;
-    if (isSmallTimeline() || top < timelineManager.topSectionHeight) {
-      calculateTimelineScrollPercent();
-      return;
-    }
-
-    // Handle normal month scrolling
-    handleMonthScroll();
-  };
-
-  const handleMonthScroll = () => {
-    const scrollPosition = timelineManager.visibleWindow.top;
-    const months = timelineManager.months;
-    const maxScrollPercent = timelineManager.getMaxScrollPercent();
-
-    // Find the month at the current scroll position
-    const searchResult = findMonthAtScrollPosition(months, scrollPosition, maxScrollPercent);
-
-    if (searchResult) {
-      viewportTopMonth = searchResult.month;
-      viewportTopMonthScrollPercent = searchResult.monthScrollPercent;
-      isInLeadOutSection = false;
-      return;
-    }
-
-    // We're in lead-out section
-    isInLeadOutSection = true;
-    timelineScrollPercent = 1;
-    resetScrubberMonth();
-  };
-
-  const resetScrubberMonth = () => {
-    viewportTopMonth = undefined;
-    viewportTopMonthScrollPercent = 0;
-  };
-
-  const calculateTimelineScrollPercent = () => {
-    const maxScroll = timelineManager.getMaxScroll();
-    timelineScrollPercent = Math.min(1, timelineManager.visibleWindow.top / maxScroll);
-    resetScrubberMonth();
-  };
-
-  const handleOverallPercentScroll = (percent: number, scrollTo?: (offset: number) => void) => {
-    const maxScroll = timelineManager.getMaxScroll();
-    const offset = maxScroll * percent;
-    scrollTo?.(offset);
-  };
-
-  const findMonthGroup = (target: TimelineYearMonth) => {
-    return timelineManager.months.find(
-      ({ yearMonth }) => yearMonth.year === target.year && yearMonth.month === target.month,
-    );
-  };
-
-  const isSmallTimeline = () => {
-    return timelineManager.timelineHeight < timelineManager.viewportHeight * VIEWPORT_MULTIPLIER;
-  };
-
-  // note: don't throttle, debounce, or otherwise make this function async - it causes flicker
-  // this function scrolls the timeline to the specified month group and offset, based on scrubber interaction
-  const onScrub: ScrubberListener = (scrubberData) => {
-    const { scrubberMonth, overallScrollPercent, scrubberMonthScrollPercent, scrollToFunction } = scrubberData;
-
-    // Handle edge case or no month selected
-    if (!scrubberMonth || isSmallTimeline()) {
-      handleOverallPercentScroll(overallScrollPercent, scrollToFunction);
-      return;
-    }
-
-    // Find and scroll to the selected month
-    const monthGroup = findMonthGroup(scrubberMonth);
-    if (monthGroup) {
-      scrollToPositionWithinMonth(monthGroup, scrubberMonthScrollPercent, scrollToFunction);
-    }
-  };
-
-  const scrollToPositionWithinMonth = (
-    monthGroup: MonthGroup,
-    monthGroupScrollPercent: number,
-    handleScrollTop?: (top: number) => void,
-  ) => {
-    const topOffset = monthGroup.top;
-    const maxScrollPercent = timelineManager.getMaxScrollPercent();
-    const delta = monthGroup.height * monthGroupScrollPercent;
-    const scrollToTop = (topOffset + delta) * maxScrollPercent;
-
-    handleScrollTop?.(scrollToTop);
-  };
-  let baseTimelineViewer: BaseTimelineViewer | undefined = $state();
-  export const scrollToAsset = (asset: TimelineAsset) => baseTimelineViewer?.scrollToAsset(asset) ?? false;
-</script>
-
-<BaseTimelineViewer
-  bind:this={baseTimelineViewer}
-  {customThumbnailLayout}
-  {isSelectionMode}
-  {singleSelect}
-  {enableRouting}
-  {timelineManager}
-  {assetInteraction}
-  {withStacked}
-  {showArchiveIcon}
-  {showSkeleton}
-  {isShowDeleteConfirmation}
-  styleMarginRightOverride={scrubberWidth + 'px'}
-  {onAssetOpen}
-  {onSelect}
-  {children}
-  {empty}
-  {handleTimelineScroll}
->
-  {#snippet header(scrollToFunction)}
-    {#if timelineManager.months.length > 0}
-      <Scrubber
-        {timelineManager}
-        height={timelineManager.viewportHeight}
-        timelineTopOffset={timelineManager.topSectionHeight}
-        timelineBottomOffset={timelineManager.bottomSectionHeight}
-        {isInLeadOutSection}
-        {timelineScrollPercent}
-        {viewportTopMonthScrollPercent}
-        {viewportTopMonth}
-        onScrub={(scrubberData) => onScrub({ ...scrubberData, scrollToFunction })}
-        bind:scrubberWidth
-      />
-    {/if}
-  {/snippet}
-</BaseTimelineViewer>

web/src/lib/components/timeline/base-components/skeleton.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  interface Props {
-    height: number;
-    title: string;
-  }
-
-  let { height = 0, title }: Props = $props();
-</script>
-
-<div class="overflow-clip" style:height={height + 'px'}>
-  <div
-    class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
-  >
-    {title}
-  </div>
-  <div class="animate-pulse absolute h-full w-full" data-skeleton="true"></div>
-</div>
-
-<style>
-  [data-skeleton] {
-    background-image: url('/light_skeleton.png');
-    background-repeat: repeat;
-    background-size: 235px, 235px;
-  }
-  @media (max-width: 767px) {
-    [data-skeleton] {
-      background-size: 100px, 100px;
-    }
-  }
-  :global(.dark) [data-skeleton] {
-    background-image: url('/dark_skeleton.png');
-  }
-  @keyframes delayedVisibility {
-    to {
-      visibility: visible;
-    }
-  }
-  [data-skeleton] {
-    visibility: hidden;
-    animation:
-      0s linear 0.1s forwards delayedVisibility,
-      pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-</style>

web/src/lib/components/timeline/base-components/timeline-month.svelte

@@ -1,181 +0,0 @@
-<script lang="ts">
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import { uploadAssetsStore } from '$lib/stores/upload';
-  import { Icon } from '@immich/ui';
-
-  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-
-  import { flip } from 'svelte/animate';
-  import { fly, scale } from 'svelte/transition';
-
-  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { Snippet } from 'svelte';
-
-  let { isUploading } = uploadAssetsStore;
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    singleSelect: boolean;
-    withStacked: boolean;
-    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
-    timelineManager: TimelineManager;
-
-    onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-
-    onHover: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onAssetSelect: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onDayGroupSelect: (dayGroup: DayGroup, assets: TimelineAsset[]) => void;
-
-    // these should be replaced with reactive properties in timeline-manager.svelte.ts
-    isDayGroupSelected: (dayGroup: DayGroup) => boolean;
-    isAssetSelected: (asset: TimelineAsset) => boolean;
-    isAssetSelectionCandidate: (asset: TimelineAsset) => boolean;
-    isAssetDisabled: (asset: TimelineAsset) => boolean;
-  }
-
-  let {
-    customThumbnailLayout,
-
-    singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup,
-    timelineManager,
-    onScrollCompensationMonthInDOM,
-
-    onHover,
-    onAssetOpen,
-    onAssetSelect,
-    onDayGroupSelect,
-
-    isDayGroupSelected,
-    isAssetSelected,
-    isAssetSelectionCandidate,
-    isAssetDisabled,
-  }: Props = $props();
-
-  let isMouseOverGroup = $state(false);
-  let hoveredDayGroup = $state();
-
-  const transitionDuration = $derived.by(() =>
-    monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
-  );
-  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-
-  function filterIntersecting<R extends { intersecting: boolean }>(intersectables: R[]) {
-    return intersectables.filter((intersectable) => intersectable.intersecting);
-  }
-
-  $effect.root(() => {
-    if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
-      onScrollCompensationMonthInDOM(timelineManager.scrollCompensation);
-    }
-  });
-</script>
-
-{#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
-  {@const absoluteWidth = dayGroup.left}
-
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <section
-    class={[
-      { 'transition-all': !monthGroup.timelineManager.suspendTransitions },
-      !monthGroup.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
-    ]}
-    data-group
-    style:position="absolute"
-    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
-    onmouseenter={() => {
-      isMouseOverGroup = true;
-      hoveredDayGroup = dayGroup.groupTitle;
-    }}
-    onmouseleave={() => {
-      isMouseOverGroup = false;
-      hoveredDayGroup = null;
-    }}
-  >
-    <!-- Date group title -->
-    <div
-      class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
-      style:width={dayGroup.width + 'px'}
-    >
-      {#if !singleSelect && ((hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) || isDayGroupSelected(dayGroup))}
-        <div
-          transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
-          class="inline-block pe-2 hover:cursor-pointer"
-          onclick={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
-          onkeydown={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
-        >
-          {#if isDayGroupSelected(dayGroup)}
-            <Icon icon={mdiCheckCircle} size="24" class="text-primary" />
-          {:else}
-            <Icon icon={mdiCircleOutline} size="24" color="#757575" />
-          {/if}
-        </div>
-      {/if}
-
-      <span class="w-full truncate first-letter:capitalize" title={dayGroup.groupTitleFull}>
-        {dayGroup.groupTitle}
-      </span>
-    </div>
-
-    <!-- Image grid -->
-    <div
-      data-image-grid
-      class="relative overflow-clip"
-      style:height={dayGroup.height + 'px'}
-      style:width={dayGroup.width + 'px'}
-    >
-      {#each filterIntersecting(dayGroup.viewerAssets) as viewerAsset (viewerAsset.id)}
-        {@const position = viewerAsset.position!}
-        {@const asset = viewerAsset.asset!}
-
-        <!-- note: don't remove data-asset-id - its used by web e2e tests -->
-        <div
-          data-asset-id={asset.id}
-          class="absolute"
-          style:top={position.top + 'px'}
-          style:left={position.left + 'px'}
-          style:width={position.width + 'px'}
-          style:height={position.height + 'px'}
-          out:scale|global={{ start: 0.1, duration: scaleDuration }}
-          animate:flip={{ duration: transitionDuration }}
-        >
-          <Thumbnail
-            showStackedIcon={withStacked}
-            {showArchiveIcon}
-            {asset}
-            {groupIndex}
-            onClick={() => onAssetOpen?.(dayGroup, assetSnapshot(asset))}
-            onSelect={() => onAssetSelect(dayGroup, assetSnapshot(asset))}
-            onMouseEvent={() => onHover(dayGroup, assetSnapshot(asset))}
-            selected={isAssetSelected(asset)}
-            selectionCandidate={isAssetSelectionCandidate(asset)}
-            disabled={isAssetDisabled(asset)}
-            thumbnailWidth={position.width}
-            thumbnailHeight={position.height}
-          />
-          {#if customThumbnailLayout}
-            {@render customThumbnailLayout(asset)}
-          {/if}
-        </div>
-      {/each}
-    </div>
-  </section>
-{/each}
-
-<style>
-  section {
-    contain: layout paint style;
-  }
-  [data-image-grid] {
-    user-select: none;
-  }
-</style>

web/src/lib/components/timeline/internal-components/selectable-timeline-month.svelte

@@ -1,276 +0,0 @@
-<script lang="ts">
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
-  import { navigate } from '$lib/utils/navigation';
-
-  import TimelineMonth from '$lib/components/timeline/base-components/timeline-month.svelte';
-  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import { searchStore } from '$lib/stores/search.svelte';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    isSelectionMode: boolean;
-    singleSelect: boolean;
-    withStacked: boolean;
-    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (isSingleSelect: boolean, asset: TimelineAsset) => void;
-    onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-  }
-
-  let {
-    customThumbnailLayout,
-    isSelectionMode,
-    singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup = $bindable(),
-    assetInteraction,
-    timelineManager,
-    onAssetOpen,
-    onSelect,
-    onScrollCompensationMonthInDOM,
-  }: Props = $props();
-
-  let lastAssetMouseEvent: TimelineAsset | null = $state(null);
-  let shiftKeyIsDown = $state(false);
-  let isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-
-  $effect(() => {
-    if (!lastAssetMouseEvent || !lastAssetMouseEvent) {
-      assetInteraction.clearAssetSelectionCandidates();
-    }
-    if (shiftKeyIsDown && lastAssetMouseEvent) {
-      void selectAssetCandidates(lastAssetMouseEvent);
-    }
-    if (isEmpty) {
-      assetInteraction.clearMultiselect();
-    }
-  });
-
-  const defaultAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (isSelectionMode || assetInteraction.selectionActive) {
-      handleAssetSelect(dayGroup, asset);
-      return;
-    }
-    void navigate({ targetRoute: 'current', assetId: asset.id });
-  };
-
-  const handleOnAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (onAssetOpen) {
-      onAssetOpen(dayGroup, asset, () => defaultAssetOpen(dayGroup, asset));
-      return;
-    }
-    defaultAssetOpen(dayGroup, asset);
-  };
-
-  // called when clicking asset with shift key pressed or with mouse
-  const handleAssetSelect = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    void onSelectAssets(asset);
-
-    const assetsInDayGroup = dayGroup.getAssets();
-    const groupTitle = dayGroup.groupTitle;
-    // Check if all assets are selected in a group to toggle the group selection's icon
-    let selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
-      assetInteraction.hasSelectedAsset(asset.id),
-    ).length;
-
-    // if all assets are selected in a group, add the group to selected group
-    if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
-      assetInteraction.addGroupToMultiselectGroup(groupTitle);
-    } else {
-      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
-    }
-
-    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
-      isSelectingAllAssets.set(true);
-    } else {
-      isSelectingAllAssets.set(false);
-    }
-  };
-
-  const handleSelectAsset = (asset: TimelineAsset) => {
-    if (!timelineManager.albumAssets.has(asset.id)) {
-      assetInteraction.selectAsset(asset);
-    }
-  };
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = true;
-    }
-  };
-
-  const onKeyUp = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = false;
-    }
-  };
-
-  const handleOnHover = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (assetInteraction.selectionActive) {
-      void selectAssetCandidates(asset);
-    }
-    lastAssetMouseEvent = asset;
-  };
-
-  const handleDayGroupSelect = (dayGroup: DayGroup, assets: TimelineAsset[]) => {
-    const group = dayGroup.groupTitle;
-    if (assetInteraction.selectedGroup.has(group)) {
-      assetInteraction.removeGroupFromMultiselectGroup(group);
-      for (const asset of assets) {
-        assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-      }
-    } else {
-      assetInteraction.addGroupToMultiselectGroup(group);
-      for (const asset of assets) {
-        handleSelectAsset(asset);
-      }
-    }
-
-    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
-      isSelectingAllAssets.set(true);
-    } else {
-      isSelectingAllAssets.set(false);
-    }
-  };
-
-  const onSelectAssets = async (asset: TimelineAsset) => {
-    if (!asset) {
-      return;
-    }
-    onSelect?.(singleSelect, asset);
-
-    if (singleSelect) {
-      // onScrollToTop();
-
-      return;
-    }
-
-    const rangeSelection = assetInteraction.assetSelectionCandidates.length > 0;
-    const deselect = assetInteraction.hasSelectedAsset(asset.id);
-
-    // Select/deselect already loaded assets
-    if (deselect) {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
-        assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
-      }
-      assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-    } else {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
-        handleSelectAsset(candidate);
-      }
-      handleSelectAsset(asset);
-    }
-
-    assetInteraction.clearAssetSelectionCandidates();
-
-    if (assetInteraction.assetSelectionStart && rangeSelection) {
-      let startBucket = timelineManager.getMonthGroupByAssetId(assetInteraction.assetSelectionStart.id);
-      let endBucket = timelineManager.getMonthGroupByAssetId(asset.id);
-
-      if (startBucket === null || endBucket === null) {
-        return;
-      }
-
-      // Select/deselect assets in range (start,end)
-      let started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === endBucket) {
-          break;
-        }
-        if (started) {
-          await timelineManager.loadMonthGroup(monthGroup.yearMonth);
-          for (const asset of monthGroup.assetsIterator()) {
-            if (deselect) {
-              assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-            } else {
-              handleSelectAsset(asset);
-            }
-          }
-        }
-        if (monthGroup === startBucket) {
-          started = true;
-        }
-      }
-
-      // Update date group selection in range [start,end]
-      started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === startBucket) {
-          started = true;
-        }
-        if (started) {
-          // Split month group into day groups and check each group
-          for (const dayGroup of monthGroup.dayGroups) {
-            const dayGroupTitle = dayGroup.groupTitle;
-            if (dayGroup.getAssets().every((a) => assetInteraction.hasSelectedAsset(a.id))) {
-              assetInteraction.addGroupToMultiselectGroup(dayGroupTitle);
-            } else {
-              assetInteraction.removeGroupFromMultiselectGroup(dayGroupTitle);
-            }
-          }
-        }
-        if (monthGroup === endBucket) {
-          break;
-        }
-      }
-    }
-
-    assetInteraction.setAssetSelectionStart(deselect ? null : asset);
-  };
-
-  const selectAssetCandidates = async (endAsset: TimelineAsset) => {
-    if (!shiftKeyIsDown) {
-      return;
-    }
-
-    const startAsset = assetInteraction.assetSelectionStart;
-    if (!startAsset) {
-      return;
-    }
-
-    const assets = assetsSnapshot(await timelineManager.retrieveRange(startAsset, endAsset));
-    assetInteraction.setAssetSelectionCandidates(assets);
-  };
-</script>
-
-<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
-
-<TimelineMonth
-  {customThumbnailLayout}
-  {singleSelect}
-  {withStacked}
-  {showArchiveIcon}
-  {monthGroup}
-  {timelineManager}
-  {onScrollCompensationMonthInDOM}
-  onHover={handleOnHover}
-  onAssetOpen={handleOnAssetOpen}
-  onAssetSelect={handleAssetSelect}
-  onDayGroupSelect={handleDayGroupSelect}
-  isDayGroupSelected={(dayGroup: DayGroup) => assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-  isAssetSelected={(asset) => assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)}
-  isAssetSelectionCandidate={(asset) => assetInteraction.hasSelectionCandidate(asset.id)}
-  isAssetDisabled={(asset) => timelineManager.albumAssets.has(asset.id)}
-/>

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

@@ -1,177 +0,0 @@
-<script lang="ts">
-  import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import { AssetAction } from '$lib/constants';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
-  import { navigate } from '$lib/utils/navigation';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
-
-  let { asset: viewingAsset, gridScrollTarget, mutex, preloadAssets } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    showSkeleton: boolean;
-    withStacked?: boolean;
-    isShared?: boolean;
-    album?: AlbumResponseDto | null;
-    person?: PersonResponseDto | null;
-
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE
-      | null;
-  }
-
-  let {
-    timelineManager,
-    showSkeleton = $bindable(false),
-    removeAction,
-    withStacked = false,
-    isShared = false,
-    album = null,
-    person = null,
-  }: Props = $props();
-
-  const handlePrevious = async () => {
-    const release = await mutex.acquire();
-    const laterAsset = await timelineManager.getLaterAsset($viewingAsset);
-
-    if (laterAsset) {
-      const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: laterAsset.id });
-    }
-
-    release();
-    return !!laterAsset;
-  };
-
-  const handleNext = async () => {
-    const release = await mutex.acquire();
-    const earlierAsset = await timelineManager.getEarlierAsset($viewingAsset);
-
-    if (earlierAsset) {
-      const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
-    }
-
-    release();
-    return !!earlierAsset;
-  };
-
-  const handleRandom = async () => {
-    const randomAsset = await timelineManager.getRandomAsset();
-
-    if (randomAsset) {
-      const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
-      assetViewingStore.setAsset(asset);
-      await navigate({ targetRoute: 'current', assetId: randomAsset.id });
-      return asset;
-    }
-  };
-
-  const handleClose = async (asset: { id: string }) => {
-    assetViewingStore.showAssetViewer(false);
-    showSkeleton = true;
-    $gridScrollTarget = { at: asset.id };
-    await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
-  };
-
-  const handlePreAction = async (action: Action) => {
-    switch (action.type) {
-      case removeAction:
-      case AssetAction.TRASH:
-      case AssetAction.RESTORE:
-      case AssetAction.DELETE:
-      case AssetAction.ARCHIVE:
-      case AssetAction.SET_VISIBILITY_LOCKED:
-      case AssetAction.SET_VISIBILITY_TIMELINE: {
-        // find the next asset to show or close the viewer
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));
-
-        // delete after find the next one
-        timelineManager.removeAssets([action.asset.id]);
-        break;
-      }
-    }
-  };
-  const handleAction = (action: Action) => {
-    switch (action.type) {
-      case AssetAction.ARCHIVE:
-      case AssetAction.UNARCHIVE:
-      case AssetAction.FAVORITE:
-      case AssetAction.UNFAVORITE: {
-        timelineManager.updateAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.ADD: {
-        timelineManager.addAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.UNSTACK: {
-        updateUnstackedAssetInTimeline(timelineManager, action.assets);
-        break;
-      }
-      case AssetAction.REMOVE_ASSET_FROM_STACK: {
-        timelineManager.addAssets([toTimelineAsset(action.asset)]);
-        if (action.stack) {
-          //Have to unstack then restack assets in timeline in order to update the stack count in the timeline.
-          updateUnstackedAssetInTimeline(
-            timelineManager,
-            action.stack.assets.map((asset) => toTimelineAsset(asset)),
-          );
-          updateStackedAssetInTimeline(timelineManager, {
-            stack: action.stack,
-            toDeleteIds: action.stack.assets
-              .filter((asset) => asset.id !== action.stack?.primaryAssetId)
-              .map((asset) => asset.id),
-          });
-        }
-        break;
-      }
-      case AssetAction.SET_STACK_PRIMARY_ASSET: {
-        //Have to unstack then restack assets in timeline in order for the currently removed new primary asset to be made visible.
-        updateUnstackedAssetInTimeline(
-          timelineManager,
-          action.stack.assets.map((asset) => toTimelineAsset(asset)),
-        );
-        updateStackedAssetInTimeline(timelineManager, {
-          stack: action.stack,
-          toDeleteIds: action.stack.assets
-            .filter((asset) => asset.id !== action.stack.primaryAssetId)
-            .map((asset) => asset.id),
-        });
-        break;
-      }
-    }
-  };
-</script>
-
-{#await import('../../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
-  <AssetViewer
-    {withStacked}
-    asset={$viewingAsset}
-    preloadAssets={$preloadAssets}
-    {isShared}
-    {album}
-    {person}
-    preAction={handlePreAction}
-    onAction={handleAction}
-    onPrevious={handlePrevious}
-    onNext={handleNext}
-    onRandom={handleRandom}
-    onClose={handleClose}
-  />
-{/await}

web/src/lib/elements/HotModuleReload.svelte

@@ -1,18 +1,36 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import type { UpdatePayload } from 'vite';
 
-  interface Props {
-    onAfterUpdate: (payload: UpdatePayload) => void;
-  }
+  type Props = {
+    onBeforeUpdate?: (payload: UpdatePayload) => void;
+    onAfterUpdate?: (payload: UpdatePayload) => void;
+  };
 
-  let { onAfterUpdate }: Props = $props();
+  let { onBeforeUpdate, onAfterUpdate }: Props = $props();
+
+  const unsubscribes: (() => void)[] = [];
 
   onMount(() => {
     const hot = import.meta.hot;
-    if (hot) {
+    if (!hot) {
+      return;
+    }
+
+    if (onBeforeUpdate) {
+      hot.on('vite:beforeUpdate', onBeforeUpdate);
+      unsubscribes.push(() => hot.off('vite:beforeUpdate', onBeforeUpdate));
+    }
+
+    if (onAfterUpdate) {
       hot.on('vite:afterUpdate', onAfterUpdate);
-      return () => hot.off('vite:afterUpdate', onAfterUpdate);
+      unsubscribes.push(() => hot.off('vite:afterUpdate', onAfterUpdate));
+    }
+  });
+
+  onDestroy(() => {
+    for (const unsubscribe of unsubscribes) {
+      unsubscribe();
     }
   });
 </script>

web/src/lib/managers/timeline-manager/day-group.svelte.ts

@@ -13,7 +13,6 @@ export class DayGroup {
   readonly monthGroup: MonthGroup;
   readonly index: number;
   readonly groupTitle: string;
-  readonly groupTitleFull: string;
   readonly day: number;
   viewerAssets: ViewerAsset[] = $state([]);
 
@@ -27,12 +26,11 @@ export class DayGroup {
   #col = $state(0);
   #deferredLayout = false;
 
-  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string, groupTitleFull: string) {
+  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string) {
     this.index = index;
     this.monthGroup = monthGroup;
     this.day = day;
     this.groupTitle = groupTitle;
-    this.groupTitleFull = groupTitleFull;
   }
 
   get top() {

web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts

@@ -143,24 +143,3 @@ export function findMonthGroupForDate(timelineManager: TimelineManager, targetYe
     }
   }
 }
-
-export function findClosestGroupForDate(timelineManager: TimelineManager, targetYearMonth: TimelineYearMonth) {
-  let closestMonth: MonthGroup | undefined;
-  let minDifference = Number.MAX_SAFE_INTEGER;
-
-  for (const month of timelineManager.months) {
-    const { year, month: monthNum } = month.yearMonth;
-
-    // Calculate the absolute difference in months
-    const yearDiff = Math.abs(year - targetYearMonth.year);
-    const monthDiff = Math.abs(monthNum - targetYearMonth.month);
-    const totalDiff = yearDiff * 12 + monthDiff;
-
-    if (totalDiff < minDifference) {
-      minDifference = totalDiff;
-      closestMonth = month;
-    }
-  }
-
-  return closestMonth;
-}

web/src/lib/managers/timeline-manager/month-group.svelte.ts

@@ -4,7 +4,6 @@ import { CancellableTask } from '$lib/utils/cancellable-task';
 import { handleError } from '$lib/utils/handle-error';
 import {
   formatGroupTitle,
-  formatGroupTitleFull,
   formatMonthGroupTitle,
   fromTimelinePlainDate,
   fromTimelinePlainDateTime,
@@ -223,8 +222,7 @@ export class MonthGroup {
       addContext.setDayGroup(dayGroup, localDateTime);
     } else {
       const groupTitle = formatGroupTitle(fromTimelinePlainDate(localDateTime));
-      const groupTitleFull = formatGroupTitleFull(fromTimelinePlainDate(localDateTime));
-      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle, groupTitleFull);
+      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle);
       this.dayGroups.push(dayGroup);
       addContext.setDayGroup(dayGroup, localDateTime);
       addContext.newDayGroups.add(dayGroup);

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

@@ -41,7 +41,6 @@ export class TimelineManager {
   isInitialized = $state(false);
   months: MonthGroup[] = $state([]);
   topSectionHeight = $state(0);
-  bottomSectionHeight = $state(60);
   timelineHeight = $derived(this.months.reduce((accumulator, b) => accumulator + b.height, 0) + this.topSectionHeight);
   assetCount = $derived(this.months.reduce((accumulator, b) => accumulator + b.assetsCount, 0));
 
@@ -553,13 +552,4 @@ export class TimelineManager {
   getAssetOrder() {
     return this.#options.order ?? AssetOrder.Desc;
   }
-
-  getMaxScrollPercent() {
-    const totalHeight = this.timelineHeight + this.bottomSectionHeight + this.topSectionHeight;
-    return (totalHeight - this.viewportHeight) / totalHeight;
-  }
-
-  getMaxScroll() {
-    return this.topSectionHeight + this.bottomSectionHeight + (this.timelineHeight - this.viewportHeight);
-  }
 }

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

@@ -625,7 +625,21 @@ const urlToBlob = async (imageSource: string) => {
   return await response.blob();
 };
 
-export const copyImageToClipboard = async (source: HTMLImageElement | string) => {
-  const blob = source instanceof HTMLImageElement ? await imgToBlob(source) : await urlToBlob(source);
+export const copyImageToClipboard = async (
+  source: HTMLImageElement | string,
+): Promise<{ success: true } | { success: false; mimeType: string }> => {
+  if (source instanceof HTMLImageElement) {
+    // do not await, so the Safari clipboard write happens in the context of the user gesture
+    await navigator.clipboard.write([new ClipboardItem({ ['image/png']: imgToBlob(source) })]);
+    return { success: true };
+  }
+
+  // if we had a way to get the mime type synchronously, we could do the same thing here
+  const blob = await urlToBlob(source);
+  if (!ClipboardItem.supports(blob.type)) {
+    return { success: false, mimeType: blob.type };
+  }
+
   await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+  return { success: true };
 };