Inline, combine functions, lint

• Create dedicated Hmr component for hot module replacement handling
• Remove inline HMR code from base-timeline-viewer
• Simplify timeline viewer by delegating HMR concerns to specialized component

.devcontainer/server/container-compose-overrides.yml

@@ -26,7 +26,7 @@ services:
     env_file: !reset []
   init:
     env_file: !reset []
-    command: sh -c 'find /data -maxdepth 1 ! -path "/data/postgres" -type d -exec chown ${UID:-0}:${GID:-0} {} + 2>/dev/null || true; for path in /usr/src/app/.pnpm-store /usr/src/app/server/node_modules /usr/src/app/server/dist /usr/src/app/.github/node_modules /usr/src/app/cli/node_modules /usr/src/app/docs/node_modules /usr/src/app/e2e/node_modules /usr/src/app/open-api/typescript-sdk/node_modules /usr/src/app/web/.svelte-kit /usr/src/app/web/coverage /usr/src/app/node_modules /usr/src/app/web/node_modules; do [ -e "$$path" ] && chown -R ${UID:-0}:${GID:-0} "$$path" || true; done'
+    command: sh -c 'find /data -maxdepth 1 ! -path "/data/postgres" -type d -exec chown ${UID:-1000}:${GID:-1000} {} + 2>/dev/null || true; for path in /usr/src/app/.pnpm-store /usr/src/app/server/node_modules /usr/src/app/server/dist /usr/src/app/.github/node_modules /usr/src/app/cli/node_modules /usr/src/app/docs/node_modules /usr/src/app/e2e/node_modules /usr/src/app/open-api/typescript-sdk/node_modules /usr/src/app/web/.svelte-kit /usr/src/app/web/coverage /usr/src/app/node_modules /usr/src/app/web/node_modules; do [ -e "$$path" ] && chown -R ${UID:-1000}:${GID:-1000} "$$path" || true; done'
   immich-machine-learning:
     env_file: !reset []
   database:

.github/workflows/close-duplicates.yml

@@ -35,7 +35,7 @@ jobs:
     needs: [get_body, should_run]
     if: ${{ needs.should_run.outputs.should_run == 'true' }}
     container:
-      image: ghcr.io/immich-app/mdq:main@sha256:1669c75a5542333ff6b03c13d5fd259ea8d798188b84d5d99093d62e4542eb05
+      image: yshavit/mdq:0.9.0@sha256:4399483ca857fb1a7ed28a596f754c7373e358647de31ce14b79a27c91e1e35e
     outputs:
       checked: ${{ steps.get_checkbox.outputs.checked }}
     steps:

.vscode/settings.json

@@ -50,7 +50,7 @@
     "editor.formatOnSave": true,
     "editor.tabSize": 2
   },
-  "cSpell.words": ["immich"],
+  "cSpell.words": ["immich", "intersectable", "intersectables"],
   "editor.formatOnSave": true,
   "eslint.validate": ["javascript", "svelte"],
   "explorer.fileNesting.enabled": true,

Makefile

@@ -70,9 +70,11 @@ VOLUME_DIRS = \
 
 # Helper function to chown, on error suggest remediation and exit
 define safe_chown
-	CURRENT_OWNER=$$(stat -c '%u:%g' "$(1)" 2>/dev/null || echo "none"); \
+	if chown $(2) $(or $(UID),1000):$(or $(GID),1000) "$(1)" 2>/dev/null; then \
-	DESIRED_OWNER="$(or $(UID),0):$(or $(GID),0)"; \
+		true; \
-	if [ "$$CURRENT_OWNER" != "$$DESIRED_OWNER" ] && ! chown -v $(2) $$DESIRED_OWNER "$(1)" 2>/dev/null; then \
+	else \
+	  	STATUS=$$?; echo "Exit code: $$STATUS $(1)"; \
+		echo "$$STATUS $(1)"; \
 		echo "Permission denied when changing owner of volumes and upload location. Try running 'sudo make prepare-volumes' first."; \
 		exit 1; \
 	fi;

docker/docker-compose.dev.yml

@@ -21,7 +21,7 @@ services:
     # extends:
     #   file: hwaccel.transcoding.yml
     #   service: cpu # set to one of [nvenc, quicksync, rkmpp, vaapi, vaapi-wsl] for accelerated transcoding
-    user: '${UID:-0}:${GID:-0}'
+    user: '${UID:-1000}:${GID:-1000}'
     build:
       context: ../
       dockerfile: server/Dockerfile
@@ -82,7 +82,7 @@ services:
     image: immich-web-dev:latest
     # Needed for rootless docker setup, see https://github.com/moby/moby/issues/45919
     # user: 0:0
-    user: '${UID:-0}:${GID:-0}'
+    user: '${UID:-1000}:${GID:-1000}'
     build:
       context: ../
       dockerfile: server/Dockerfile
@@ -189,7 +189,7 @@ services:
     env_file:
       - .env
     user: 0:0
-    command: sh -c 'find /data -maxdepth 1 -type d -exec chown ${UID:-0}:${GID:-0} {} + 2>/dev/null || true; for path in /usr/src/app/.pnpm-store /usr/src/app/server/node_modules /usr/src/app/server/dist /usr/src/app/.github/node_modules /usr/src/app/cli/node_modules /usr/src/app/docs/node_modules /usr/src/app/e2e/node_modules /usr/src/app/open-api/typescript-sdk/node_modules /usr/src/app/web/.svelte-kit /usr/src/app/web/coverage /usr/src/app/node_modules /usr/src/app/web/node_modules; do [ -e "$$path" ] && chown -R ${UID:-0}:${GID:-0} "$$path" || true; done'
+    command: sh -c 'find /data -maxdepth 1 -type d -exec chown ${UID:-1000}:${GID:-1000} {} + 2>/dev/null || true; for path in /usr/src/app/.pnpm-store /usr/src/app/server/node_modules /usr/src/app/server/dist /usr/src/app/.github/node_modules /usr/src/app/cli/node_modules /usr/src/app/docs/node_modules /usr/src/app/e2e/node_modules /usr/src/app/open-api/typescript-sdk/node_modules /usr/src/app/web/.svelte-kit /usr/src/app/web/coverage /usr/src/app/node_modules /usr/src/app/web/node_modules; do [ -e "$$path" ] && chown -R ${UID:-1000}:${GID:-1000} "$$path" || true; done'
     volumes:
       - pnpm-store:/usr/src/app/.pnpm-store
       - server-node_modules:/usr/src/app/server/node_modules

i18n/en.json

@@ -1339,6 +1339,8 @@
   "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_updated": "Network requirements changed, resetting backup queue",

mobile/analysis_options.yaml

@@ -134,13 +134,6 @@ custom_lint:
 
 dart_code_metrics:
   rules:
-    - banned-usage:
-        entries:
-          - name: debugPrint
-            description: Use dPrint instead of debugPrint for proper tree-shaking in release builds.
-            exclude-paths:
-              - 'lib/utils/debug_print.dart'
-            severity: perf
     # All rules from "recommended" preset
     # Show potential errors
   #  - avoid-cascade-after-if-null

mobile/ios/Runner/Background/BackgroundWorker.swift

@@ -133,6 +133,7 @@ class BackgroundWorker: BackgroundWorkerBgHostApi {
       return
     }
 
+    isComplete = true
     flutterApi?.cancel { result in
       self.complete(success: false)
     }
@@ -173,7 +174,6 @@ class BackgroundWorker: BackgroundWorkerBgHostApi {
     
     isComplete = true
     engine.destroyContext()
-    flutterApi = nil
     completionHandler(success)
   }
 }

mobile/lib/constants/constants.dart

@@ -45,5 +45,3 @@ const List<(String, String)> kWidgetNames = [
 
 const double kUploadStatusFailed = -1.0;
 const double kUploadStatusCanceled = -2.0;
-
-const int kMinMonthsToEnableScrubberSnap = 12;

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

@@ -77,9 +77,7 @@ enum StoreKey<T> {
   enableBackup<bool>._(1003),
   useWifiForUploadVideos<bool>._(1004),
   useWifiForUploadPhotos<bool>._(1005),
-  needBetaMigration<bool>._(1006),
+  needBetaMigration<bool>._(1006);
-  // TODO: Remove this after patching open-api
-  shouldResetSync<bool>._(1007);
 
   const StoreKey._(this.id);
   final int id;

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

@@ -7,8 +7,6 @@ import 'package:cancellation_token_http/http.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/constants.dart';
-import 'package:immich_mobile/domain/services/log.service.dart';
-import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/network_capability_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/generated/intl_keys.g.dart';
@@ -29,7 +27,6 @@ import 'package:immich_mobile/services/localization.service.dart';
 import 'package:immich_mobile/services/server_info.service.dart';
 import 'package:immich_mobile/services/upload.service.dart';
 import 'package:immich_mobile/utils/bootstrap.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 import 'package:immich_mobile/utils/http_ssl_options.dart';
 import 'package:isar/isar.dart';
 import 'package:logging/logging.dart';
@@ -162,7 +159,7 @@ class BackgroundWorkerBgService extends BackgroundWorkerFlutterApi {
     try {
       await _cleanup();
     } catch (error, stack) {
-      dPrint(() => 'Failed to cleanup background worker: $error with stack: $stack');
+      debugPrint('Failed to cleanup background worker: $error with stack: $stack');
     }
   }
 
@@ -183,8 +180,6 @@ class BackgroundWorkerBgService extends BackgroundWorkerFlutterApi {
           // Discard any errors on the dispose call
           return;
         }),
-        LogService.I.dispose(),
-        Store.dispose(),
         _drift.close(),
         _driftLogger.close(),
         backgroundSyncManager.cancel(),
@@ -197,7 +192,7 @@ class BackgroundWorkerBgService extends BackgroundWorkerFlutterApi {
       await Future.wait(cleanupFutures);
       _logger.info("Background worker resources cleaned up");
     } catch (error, stack) {
-      dPrint(() => 'Failed to cleanup background worker: $error with stack: $stack');
+      debugPrint('Failed to cleanup background worker: $error with stack: $stack');
     }
   }
 
@@ -235,7 +230,7 @@ class BackgroundWorkerBgService extends BackgroundWorkerFlutterApi {
             .startBackupWithHttpClient(currentUser.id, networkCapabilities.hasWifi, _cancellationToken);
       },
       (error, stack) {
-        dPrint(() => "Error in backup zone $error, $stack");
+        debugPrint("Error in backup zone $error, $stack");
       },
     );
   }
@@ -273,6 +268,6 @@ Future<void> backgroundSyncNativeEntrypoint() async {
   DartPluginRegistrant.ensureInitialized();
 
   final (isar, drift, logDB) = await Bootstrap.initDB();
-  await Bootstrap.initDomain(isar, drift, logDB, shouldBufferLogs: false, listenStoreUpdates: false);
+  await Bootstrap.initDomain(isar, drift, logDB, shouldBufferLogs: false);
   await BackgroundWorkerBgService(isar: isar, drift: drift, driftLogger: logDB).init();
 }

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

@@ -1,11 +1,11 @@
 import 'dart:async';
 
+import 'package:flutter/foundation.dart';
 import 'package:immich_mobile/constants/constants.dart';
 import 'package:immich_mobile/domain/models/log.model.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/infrastructure/repositories/log.repository.dart';
 import 'package:immich_mobile/infrastructure/repositories/store.repository.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 import 'package:logging/logging.dart';
 
 /// Service responsible for handling application logging.
@@ -66,12 +66,13 @@ class LogService {
   }
 
   void _handleLogRecord(LogRecord r) {
-    dPrint(
+    if (kDebugMode) {
-      () =>
+      debugPrint(
-          '[${r.level.name}] [${r.time}] [${r.loggerName}] ${r.message}'
+        '[${r.level.name}] [${r.time}] [${r.loggerName}] ${r.message}'
-          '${r.error == null ? '' : '\nError: ${r.error}'}'
+        '${r.error == null ? '' : '\nError: ${r.error}'}'
-          '${r.stackTrace == null ? '' : '\nStack: ${r.stackTrace}'}',
+        '${r.stackTrace == null ? '' : '\nStack: ${r.stackTrace}'}',
-    );
+      );
+    }
 
     final record = LogMessage(
       message: r.message,

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

@@ -1,7 +1,7 @@
+import 'package:flutter/foundation.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/infrastructure/repositories/partner.repository.dart';
 import 'package:immich_mobile/repositories/partner_api.repository.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 class DriftPartnerService {
   final DriftPartnerRepository _driftPartnerRepository;
@@ -30,7 +30,7 @@ class DriftPartnerService {
   Future<void> toggleShowInTimeline(String partnerId, String userId) async {
     final partner = await _driftPartnerRepository.getPartner(partnerId, userId);
     if (partner == null) {
-      dPrint(() => "Partner not found: $partnerId for user: $userId");
+      debugPrint("Partner not found: $partnerId for user: $userId");
       return;
     }
 

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

@@ -10,7 +10,7 @@ class StoreService {
 
   /// In-memory cache. Keys are [StoreKey.id]
   final Map<int, Object?> _cache = {};
-  StreamSubscription<List<StoreDto>>? _storeUpdateSubscription;
+  late final StreamSubscription<List<StoreDto>> _storeUpdateSubscription;
 
   StoreService._({required IStoreRepository isarStoreRepository}) : _storeRepository = isarStoreRepository;
 
@@ -24,17 +24,15 @@ class StoreService {
   }
 
   // TODO: Replace the implementation with the one from create after removing the typedef
-  static Future<StoreService> init({required IStoreRepository storeRepository, bool listenUpdates = true}) async {
+  static Future<StoreService> init({required IStoreRepository storeRepository}) async {
-    _instance ??= await create(storeRepository: storeRepository, listenUpdates: listenUpdates);
+    _instance ??= await create(storeRepository: storeRepository);
     return _instance!;
   }
 
-  static Future<StoreService> create({required IStoreRepository storeRepository, bool listenUpdates = true}) async {
+  static Future<StoreService> create({required IStoreRepository storeRepository}) async {
     final instance = StoreService._(isarStoreRepository: storeRepository);
     await instance.populateCache();
-    if (listenUpdates) {
+    instance._storeUpdateSubscription = instance._listenForChange();
-      instance._storeUpdateSubscription = instance._listenForChange();
-    }
     return instance;
   }
 
@@ -52,8 +50,8 @@ class StoreService {
   });
 
   /// Disposes the store and cancels the subscription. To reuse the store call init() again
-  Future<void> dispose() async {
+  void dispose() async {
-    await _storeUpdateSubscription?.cancel();
+    await _storeUpdateSubscription.cancel();
     _cache.clear();
   }
 

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

@@ -1,3 +1,4 @@
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/album/local_album.model.dart';
 import 'package:immich_mobile/infrastructure/repositories/local_album.repository.dart';
@@ -5,7 +6,6 @@ import 'package:immich_mobile/infrastructure/repositories/remote_album.repositor
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/repositories/drift_album_api_repository.dart';
 import 'package:logging/logging.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final syncLinkedAlbumServiceProvider = Provider(
   (ref) => SyncLinkedAlbumService(
@@ -100,7 +100,7 @@ class SyncLinkedAlbumService {
 
   /// Creates a new remote album and links it to the local album
   Future<void> _createAndLinkNewRemoteAlbum(LocalAlbum localAlbum) async {
-    dPrint(() => "Creating new remote album for local album: ${localAlbum.name}");
+    debugPrint("Creating new remote album for local album: ${localAlbum.name}");
     final newRemoteAlbum = await _albumApiRepository.createDriftAlbum(localAlbum.name, assetIds: []);
     await _remoteAlbumRepository.create(newRemoteAlbum, []);
     return _localAlbumRepository.linkRemoteAlbum(localAlbum.id, newRemoteAlbum.id);

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

@@ -29,7 +29,6 @@ class SyncStreamService {
     bool shouldReset = false;
     await _syncApiRepository.streamChanges(_handleEvents, onReset: () => shouldReset = true);
     if (shouldReset) {
-      _logger.info("Resetting sync state as requested by server");
       await _syncApiRepository.streamChanges(_handleEvents);
     }
   }

mobile/lib/domain/utils/background_sync.dart

@@ -100,14 +100,8 @@ class BackgroundSyncManager {
     // We use a ternary operator to avoid [_deviceAlbumSyncTask] from being
     // captured by the closure passed to [runInIsolateGentle].
     _deviceAlbumSyncTask = full
-        ? runInIsolateGentle(
+        ? runInIsolateGentle(computation: (ref) => ref.read(localSyncServiceProvider).sync(full: true))
-            computation: (ref) => ref.read(localSyncServiceProvider).sync(full: true),
+        : runInIsolateGentle(computation: (ref) => ref.read(localSyncServiceProvider).sync(full: false));
-            debugLabel: 'local-sync-full-true',
-          )
-        : runInIsolateGentle(
-            computation: (ref) => ref.read(localSyncServiceProvider).sync(full: false),
-            debugLabel: 'local-sync-full-false',
-          );
 
     return _deviceAlbumSyncTask!
         .whenComplete(() {
@@ -128,10 +122,7 @@ class BackgroundSyncManager {
 
     onHashingStart?.call();
 
-    _hashTask = runInIsolateGentle(
+    _hashTask = runInIsolateGentle(computation: (ref) => ref.read(hashServiceProvider).hashAssets());
-      computation: (ref) => ref.read(hashServiceProvider).hashAssets(),
-      debugLabel: 'hash-assets',
-    );
 
     return _hashTask!
         .whenComplete(() {
@@ -151,10 +142,7 @@ class BackgroundSyncManager {
 
     onRemoteSyncStart?.call();
 
-    _syncTask = runInIsolateGentle(
+    _syncTask = runInIsolateGentle(computation: (ref) => ref.read(syncStreamServiceProvider).sync());
-      computation: (ref) => ref.read(syncStreamServiceProvider).sync(),
-      debugLabel: 'remote-sync',
-    );
     return _syncTask!
         .whenComplete(() {
           onRemoteSyncComplete?.call();
@@ -181,7 +169,7 @@ class BackgroundSyncManager {
       return _linkedAlbumSyncTask!.future;
     }
 
-    _linkedAlbumSyncTask = runInIsolateGentle(computation: syncLinkedAlbumsIsolated, debugLabel: 'linked-album-sync');
+    _linkedAlbumSyncTask = runInIsolateGentle(computation: syncLinkedAlbumsIsolated);
     return _linkedAlbumSyncTask!.whenComplete(() {
       _linkedAlbumSyncTask = null;
     });
@@ -190,5 +178,4 @@ class BackgroundSyncManager {
 
 Cancelable<void> _handleWsAssetUploadReadyV1Batch(List<dynamic> batchData) => runInIsolateGentle(
   computation: (ref) => ref.read(syncStreamServiceProvider).handleWsAssetUploadReadyV1Batch(batchData),
-  debugLabel: 'websocket-batch',
 );

mobile/lib/extensions/translate_extensions.dart

@@ -1,7 +1,6 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:intl/message_format.dart';
 import 'package:flutter/material.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 extension StringTranslateExtension on String {
   String t({BuildContext? context, Map<String, Object>? args}) {
@@ -40,7 +39,7 @@ String _translateHelper(BuildContext? context, String key, [Map<String, Object>?
         ? MessageFormat(translatedMessage, locale: Intl.defaultLocale ?? 'en').format(args)
         : translatedMessage;
   } catch (e) {
-    dPrint(() => 'Translation failed for key "$key". Error: $e');
+    debugPrint('Translation failed for key "$key". Error: $e');
     return key;
   }
 }

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

@@ -69,29 +69,6 @@ class Drift extends $Drift implements IDatabaseRepository {
   Drift([QueryExecutor? executor])
     : super(executor ?? driftDatabase(name: 'immich', native: const DriftNativeOptions(shareAcrossIsolates: true)));
 
-  Future<void> reset() async {
-    // https://github.com/simolus3/drift/commit/bd80a46264b6dd833ef4fd87fffc03f5a832ab41#diff-3f879e03b4a35779344ef16170b9353608dd9c42385f5402ec6035aac4dd8a04R76-R94
-    await exclusively(() async {
-      // https://stackoverflow.com/a/65743498/25690041
-      await customStatement('PRAGMA writable_schema = 1;');
-      await customStatement('DELETE FROM sqlite_master;');
-      await customStatement('VACUUM;');
-      await customStatement('PRAGMA writable_schema = 0;');
-      await customStatement('PRAGMA integrity_check');
-
-      await customStatement('PRAGMA user_version = 0');
-      await beforeOpen(
-        // ignore: invalid_use_of_internal_member
-        resolvedEngine.executor,
-        OpeningDetails(null, schemaVersion),
-      );
-      await customStatement('PRAGMA user_version = $schemaVersion');
-
-      // Refresh all stream queries
-      notifyUpdates({for (final table in allTables) TableUpdate.onTable(table)});
-    });
-  }
-
   @override
   int get schemaVersion => 10;
 

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

@@ -3,9 +3,7 @@ import 'dart:convert';
 
 import 'package:http/http.dart' as http;
 import 'package:immich_mobile/constants/constants.dart';
-import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/models/sync_event.model.dart';
-import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/services/api.service.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
@@ -35,7 +33,6 @@ class SyncApiRepository {
     await _api.applyToParams([], headerParams);
     headers.addAll(headerParams);
 
-    final shouldReset = Store.get(StoreKey.shouldResetSync, false);
     final request = http.Request('POST', Uri.parse(endpoint));
     request.headers.addAll(headers);
     request.body = jsonEncode(
@@ -61,7 +58,6 @@ class SyncApiRepository {
           SyncRequestType.peopleV1,
           SyncRequestType.assetFacesV1,
         ],
-        reset: shouldReset,
       ).toJson(),
     );
 
@@ -85,9 +81,6 @@ class SyncApiRepository {
         throw ApiException(response.statusCode, 'Failed to get sync stream: $errorBody');
       }
 
-      // Reset after successful stream start
-      await Store.put(StoreKey.shouldResetSync, false);
-
       await for (final chunk in response.stream.transform(utf8.decoder)) {
         if (shouldAbort) {
           break;

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

@@ -42,10 +42,14 @@ class DriftTimelineRepository extends DriftDatabaseRepository {
       throw UnsupportedError("GroupAssetsBy.none is not supported for watchMainBucket");
     }
 
-    return _db.mergedAssetDrift.mergedBucket(userIds: userIds, groupBy: groupBy.index).map((row) {
+    return _db.mergedAssetDrift
-      final date = row.bucketDate.dateFmt(groupBy);
+        .mergedBucket(userIds: userIds, groupBy: groupBy.index)
-      return TimeBucket(date: date, assetCount: row.assetCount);
+        .map((row) {
-    }).watch();
+          final date = row.bucketDate.dateFmt(groupBy);
+          return TimeBucket(date: date, assetCount: row.assetCount);
+        })
+        .watch()
+        .throttle(const Duration(seconds: 3), trailing: true);
   }
 
   Future<List<BaseAsset>> _getMainBucketAssets(List<String> userIds, {required int offset, required int count}) {

mobile/lib/main.dart

@@ -39,7 +39,6 @@ import 'package:intl/date_symbol_data_local.dart';
 import 'package:logging/logging.dart';
 import 'package:timezone/data/latest.dart';
 import 'package:worker_manager/worker_manager.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 void main() async {
   ImmichWidgetsBinding();
@@ -70,9 +69,9 @@ Future<void> initApp() async {
   if (kReleaseMode && Platform.isAndroid) {
     try {
       await FlutterDisplayMode.setHighRefreshRate();
-      dPrint(() => "Enabled high refresh mode");
+      debugPrint("Enabled high refresh mode");
     } catch (e) {
-      dPrint(() => "Error setting high refresh rate: $e");
+      debugPrint("Error setting high refresh rate: $e");
     }
   }
 
@@ -127,23 +126,23 @@ class ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserve
   void didChangeAppLifecycleState(AppLifecycleState state) {
     switch (state) {
       case AppLifecycleState.resumed:
-        dPrint(() => "[APP STATE] resumed");
+        debugPrint("[APP STATE] resumed");
         ref.read(appStateProvider.notifier).handleAppResume();
         break;
       case AppLifecycleState.inactive:
-        dPrint(() => "[APP STATE] inactive");
+        debugPrint("[APP STATE] inactive");
         ref.read(appStateProvider.notifier).handleAppInactivity();
         break;
       case AppLifecycleState.paused:
-        dPrint(() => "[APP STATE] paused");
+        debugPrint("[APP STATE] paused");
         ref.read(appStateProvider.notifier).handleAppPause();
         break;
       case AppLifecycleState.detached:
-        dPrint(() => "[APP STATE] detached");
+        debugPrint("[APP STATE] detached");
         ref.read(appStateProvider.notifier).handleAppDetached();
         break;
       case AppLifecycleState.hidden:
-        dPrint(() => "[APP STATE] hidden");
+        debugPrint("[APP STATE] hidden");
         ref.read(appStateProvider.notifier).handleAppHidden();
         break;
     }
@@ -201,7 +200,7 @@ class ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserve
   @override
   initState() {
     super.initState();
-    initApp().then((_) => dPrint(() => "App Init Completed"));
+    initApp().then((_) => debugPrint("App Init Completed"));
     WidgetsBinding.instance.addPostFrameCallback((_) {
       // needs to be delayed so that EasyLocalization is working
       if (Store.isBetaTimelineEnabled) {
@@ -240,7 +239,7 @@ class ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserve
         theme: getThemeData(colorScheme: immichTheme.light, locale: context.locale),
         routerConfig: router.config(
           deepLinkBuilder: _deepLinkBuilder,
-          navigatorObservers: () => [AppNavigationObserver(ref: ref)],
+          navigatorObservers: () => [AppNavigationObserver(ref: ref), HeroController()],
         ),
       ),
     );

mobile/lib/pages/common/change_experience.page.dart

@@ -91,8 +91,6 @@ class _ChangeExperiencePageState extends ConsumerState<ChangeExperiencePage> {
       ref.read(websocketProvider.notifier).stopListenToOldEvents();
       ref.read(websocketProvider.notifier).startListeningToBetaEvents();
 
-      await ref.read(driftProvider).reset();
-      await Store.put(StoreKey.shouldResetSync, true);
       final permission = await ref.read(galleryPermissionNotifier.notifier).requestGalleryPermission();
 
       if (permission.isGranted) {

mobile/lib/pages/common/settings.page.dart

@@ -12,6 +12,7 @@ import 'package:immich_mobile/widgets/settings/asset_viewer_settings/asset_viewe
 import 'package:immich_mobile/widgets/settings/backup_settings/backup_settings.dart';
 import 'package:immich_mobile/widgets/settings/backup_settings/drift_backup_settings.dart';
 import 'package:immich_mobile/widgets/settings/beta_sync_settings/sync_status_and_actions.dart';
+import 'package:immich_mobile/widgets/settings/beta_timeline_list_tile.dart';
 import 'package:immich_mobile/widgets/settings/language_settings.dart';
 import 'package:immich_mobile/widgets/settings/networking_settings/networking_settings.dart';
 import 'package:immich_mobile/widgets/settings/notification_setting.dart';
@@ -19,6 +20,7 @@ import 'package:immich_mobile/widgets/settings/preference_settings/preference_se
 import 'package:immich_mobile/widgets/settings/settings_card.dart';
 
 enum SettingSection {
+  beta('sync_status', Icons.sync_outlined, "sync_status_subtitle"),
   advanced('advanced', Icons.build_outlined, "advanced_settings_tile_subtitle"),
   assetViewer('asset_viewer_settings_title', Icons.image_outlined, "asset_viewer_settings_subtitle"),
   backup('backup', Icons.cloud_upload_outlined, "backup_settings_subtitle"),
@@ -26,14 +28,14 @@ enum SettingSection {
   networking('networking_settings', Icons.wifi, "networking_subtitle"),
   notifications('notifications', Icons.notifications_none_rounded, "setting_notifications_subtitle"),
   preferences('preferences_settings_title', Icons.interests_outlined, "preferences_settings_subtitle"),
-  timeline('asset_list_settings_title', Icons.auto_awesome_mosaic_outlined, "asset_list_settings_subtitle"),
+  timeline('asset_list_settings_title', Icons.auto_awesome_mosaic_outlined, "asset_list_settings_subtitle");
-  beta('sync_status', Icons.sync_outlined, "sync_status_subtitle");
 
   final String title;
   final String subtitle;
   final IconData icon;
 
   Widget get widget => switch (this) {
+    SettingSection.beta => const _BetaLandscapeToggle(),
     SettingSection.advanced => const AdvancedSettings(),
     SettingSection.assetViewer => const AssetViewerSettings(),
     SettingSection.backup =>
@@ -43,7 +45,6 @@ enum SettingSection {
     SettingSection.notifications => const NotificationSetting(),
     SettingSection.preferences => const PreferenceSetting(),
     SettingSection.timeline => const AssetListSettings(),
-    SettingSection.beta => const SyncStatusAndActions(),
   };
 
   const SettingSection(this.title, this.icon, this.subtitle);
@@ -58,7 +59,7 @@ class SettingsPage extends StatelessWidget {
     context.locale;
     return Scaffold(
       appBar: AppBar(centerTitle: false, title: const Text('settings').tr()),
-      body: context.isMobile ? const SafeArea(child: _MobileLayout()) : const SafeArea(child: _TabletLayout()),
+      body: context.isMobile ? const _MobileLayout() : const _TabletLayout(),
     );
   }
 }
@@ -71,6 +72,7 @@ class _MobileLayout extends StatelessWidget {
         .expand(
           (setting) => setting == SettingSection.beta
               ? [
+                  const BetaTimelineListTile(),
                   if (Store.isBetaTimelineEnabled)
                     SettingsCard(
                       icon: Icons.sync_outlined,
@@ -91,7 +93,7 @@ class _MobileLayout extends StatelessWidget {
         .toList();
     return ListView(
       physics: const ClampingScrollPhysics(),
-      padding: const EdgeInsets.only(top: 10.0, bottom: 16),
+      padding: const EdgeInsets.only(top: 10.0, bottom: 56),
       children: [...settings],
     );
   }
@@ -132,6 +134,21 @@ class _TabletLayout extends HookWidget {
   }
 }
 
+class _BetaLandscapeToggle extends HookWidget {
+  const _BetaLandscapeToggle();
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: [
+        const SizedBox(height: 100, child: BetaTimelineListTile()),
+        if (Store.isBetaTimelineEnabled) const Expanded(child: SyncStatusAndActions()),
+      ],
+    );
+  }
+}
+
 @RoutePage()
 class SettingsSubPage extends StatelessWidget {
   const SettingsSubPage(this.section, {super.key});
@@ -141,14 +158,9 @@ class SettingsSubPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     context.locale;
-    return SafeArea(
+    return Scaffold(
-      bottom: true,
+      appBar: AppBar(centerTitle: false, title: Text(section.title).tr()),
-      top: false,
+      body: section.widget,
-      right: true,
-      child: Scaffold(
-        appBar: AppBar(centerTitle: false, title: Text(section.title).tr()),
-        body: section.widget,
-      ),
     );
   }
 }

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

@@ -10,7 +10,6 @@ import 'package:immich_mobile/providers/infrastructure/user.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
 import 'package:immich_mobile/widgets/common/mesmerizing_sliver_app_bar.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 @RoutePage()
 class DriftPartnerDetailPage extends StatelessWidget {
@@ -69,7 +68,7 @@ class _InfoBoxState extends ConsumerState<_InfoBox> {
         _inTimeline = !_inTimeline;
       });
     } catch (error, stack) {
-      dPrint(() => "Failed to toggle in timeline: $error $stack");
+      debugPrint("Failed to toggle in timeline: $error $stack");
       ImmichToast.show(
         context: context,
         toastType: ToastType.error,

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

@@ -14,10 +14,9 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_act
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
 import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/routes.provider.dart';
-import 'package:immich_mobile/providers/tab.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 
@@ -39,9 +38,8 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
     final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
 
     final previousRouteName = ref.watch(previousRouteNameProvider);
-    final tabRoute = ref.watch(tabProvider);
     final showViewInTimelineButton =
-        (previousRouteName != TabShellRoute.name || tabRoute == TabEnum.search) &&
+        previousRouteName != TabShellRoute.name &&
         previousRouteName != AssetViewerRoute.name &&
         previousRouteName != null;
 

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

@@ -43,7 +43,7 @@ class ArchiveBottomSheet extends ConsumerWidget {
           const EditDateTimeActionButton(source: ActionSource.timeline),
           const EditLocationActionButton(source: ActionSource.timeline),
           const MoveToLockFolderActionButton(source: ActionSource.timeline),
-          if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
+          const StackActionButton(source: ActionSource.timeline),
         ],
         if (multiselect.hasLocal) ...[
           const DeleteLocalActionButton(source: ActionSource.timeline),

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

@@ -2,8 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/edit_date_time_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/edit_location_action_button.widget.dart';
@@ -43,7 +43,7 @@ class FavoriteBottomSheet extends ConsumerWidget {
           const EditDateTimeActionButton(source: ActionSource.timeline),
           const EditLocationActionButton(source: ActionSource.timeline),
           const MoveToLockFolderActionButton(source: ActionSource.timeline),
-          if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
+          const StackActionButton(source: ActionSource.timeline),
         ],
         if (multiselect.hasLocal) ...[
           const DeleteLocalActionButton(source: ActionSource.timeline),

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

@@ -104,7 +104,7 @@ class _GeneralBottomSheetState extends ConsumerState<GeneralBottomSheet> {
           const EditDateTimeActionButton(source: ActionSource.timeline),
           const EditLocationActionButton(source: ActionSource.timeline),
           const MoveToLockFolderActionButton(source: ActionSource.timeline),
-          if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
+          const StackActionButton(source: ActionSource.timeline),
           isTrashEnable
               ? const TrashActionButton(source: ActionSource.timeline)
               : const DeletePermanentActionButton(source: ActionSource.timeline),

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

@@ -1,12 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/edit_date_time_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/edit_location_action_button.widget.dart';
@@ -100,7 +100,7 @@ class _RemoteAlbumBottomSheetState extends ConsumerState<RemoteAlbumBottomSheet>
           const EditDateTimeActionButton(source: ActionSource.timeline),
           const EditLocationActionButton(source: ActionSource.timeline),
           const MoveToLockFolderActionButton(source: ActionSource.timeline),
-          if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
+          const StackActionButton(source: ActionSource.timeline),
         ],
         if (multiselect.hasLocal) ...[
           const DeleteLocalActionButton(source: ActionSource.timeline),

mobile/lib/presentation/widgets/people/person_edit_birthday_modal.widget.dart

@@ -8,7 +8,6 @@ import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
 import 'package:scroll_date_picker/scroll_date_picker.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 class DriftPersonBirthdayEditForm extends ConsumerStatefulWidget {
   final DriftPerson person;
@@ -37,7 +36,7 @@ class _DriftPersonNameEditFormState extends ConsumerState<DriftPersonBirthdayEdi
         context.pop<DateTime>(_selectedDate);
       }
     } catch (error) {
-      dPrint(() => 'Error updating birthday: $error');
+      debugPrint('Error updating birthday: $error');
 
       if (!context.mounted) {
         return;

mobile/lib/presentation/widgets/people/person_edit_name_modal.widget.dart

@@ -7,7 +7,6 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 class DriftPersonNameEditForm extends ConsumerStatefulWidget {
   final DriftPerson person;
@@ -35,7 +34,7 @@ class _DriftPersonNameEditFormState extends ConsumerState<DriftPersonNameEditFor
         context.pop<String>(newName);
       }
     } catch (error) {
-      dPrint(() => 'Error updating name: $error');
+      debugPrint('Error updating name: $error');
 
       if (!context.mounted) {
         return;

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

@@ -3,15 +3,14 @@ import 'dart:async';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/constants/constants.dart';
 import 'package:immich_mobile/domain/models/timeline.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.state.dart';
-import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
 import 'package:intl/intl.dart' hide TextDirection;
+import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
 
 /// A widget that will display a BoxScrollView with a ScrollThumb that can be dragged
 /// for quick navigation of the BoxScrollView.
@@ -80,7 +79,6 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
   double _thumbTopOffset = 0.0;
   bool _isDragging = false;
   List<_Segment> _segments = [];
-  int _monthCount = 0;
 
   late AnimationController _thumbAnimationController;
   Timer? _fadeOutTimer;
@@ -107,7 +105,6 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
     _thumbAnimationController = AnimationController(vsync: this, duration: kTimelineScrubberFadeInDuration);
     _thumbAnimation = CurvedAnimation(parent: _thumbAnimationController, curve: Curves.fastEaseInToSlowEaseOut);
     _labelAnimationController = AnimationController(vsync: this, duration: kTimelineScrubberFadeInDuration);
-    _monthCount = getMonthCount();
 
     _labelAnimation = CurvedAnimation(parent: _labelAnimationController, curve: Curves.fastOutSlowIn);
   }
@@ -124,7 +121,6 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
 
     if (oldWidget.layoutSegments.lastOrNull?.endOffset != widget.layoutSegments.lastOrNull?.endOffset) {
       _segments = _buildSegments(layoutSegments: widget.layoutSegments, timelineHeight: _scrubberHeight);
-      _monthCount = getMonthCount();
     }
   }
 
@@ -144,10 +140,6 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
     });
   }
 
-  int getMonthCount() {
-    return _segments.map((e) => "${e.date.month}_${e.date.year}").toSet().length;
-  }
-
   bool _onScrollNotification(ScrollNotification notification) {
     if (_isDragging) {
       // If the user is dragging the thumb, we don't want to update the position
@@ -177,10 +169,7 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
   }
 
   void _onDragStart(DragStartDetails _) {
-    if (_monthCount >= kMinMonthsToEnableScrubberSnap) {
+    ref.read(timelineStateProvider.notifier).setScrubbing(true);
-      ref.read(timelineStateProvider.notifier).setScrubbing(true);
-    }
-
     setState(() {
       _isDragging = true;
       _labelAnimationController.forward();
@@ -202,22 +191,13 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
     final nearestMonthSegment = _findNearestMonthSegment(dragPosition);
 
     if (nearestMonthSegment != null) {
+      _snapToSegment(nearestMonthSegment);
       final label = nearestMonthSegment.scrollLabel;
       if (_lastLabel != label) {
         ref.read(hapticFeedbackProvider.notifier).selectionClick();
         _lastLabel = label;
       }
     }
-
-    if (_monthCount < kMinMonthsToEnableScrubberSnap) {
-      // If there are less than kMinMonthsToEnableScrubberSnap months, we don't need to snap to segments
-      setState(() {
-        _thumbTopOffset = dragPosition;
-        _scrollController.jumpTo((dragPosition / _scrubberHeight) * _scrollController.position.maxScrollExtent);
-      });
-    } else if (nearestMonthSegment != null) {
-      _snapToSegment(nearestMonthSegment);
-    }
   }
 
   /// Calculate the drag position relative to the scrubber area

mobile/lib/providers/asset.provider.dart

@@ -1,3 +1,4 @@
+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/store.model.dart';
@@ -12,7 +13,6 @@ import 'package:immich_mobile/services/etag.service.dart';
 import 'package:immich_mobile/services/exif.service.dart';
 import 'package:immich_mobile/services/sync.service.dart';
 import 'package:logging/logging.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final assetProvider = StateNotifierProvider<AssetNotifier, bool>((ref) {
   return AssetNotifier(
@@ -68,7 +68,7 @@ class AssetNotifier extends StateNotifier<bool> {
       }
       final bool newRemote = await _assetService.refreshRemoteAssets();
       final bool newLocal = await _albumService.refreshDeviceAlbums();
-      dPrint(() => "changedUsers: $changedUsers, newRemote: $newRemote, newLocal: $newLocal");
+      debugPrint("changedUsers: $changedUsers, newRemote: $newRemote, newLocal: $newLocal");
       if (newRemote) {
         _ref.invalidate(memoryFutureProvider);
       }

mobile/lib/providers/auth.provider.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter_udid/flutter_udid.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/constants.dart';
@@ -17,7 +18,6 @@ import 'package:immich_mobile/services/widget.service.dart';
 import 'package:immich_mobile/utils/hash.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final authProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
   return AuthNotifier(
@@ -150,7 +150,10 @@ class AuthNotifier extends StateNotifier<AuthState> {
       _log.severe("Error getting user information from the server [API EXCEPTION]", stackTrace);
     } catch (error, stackTrace) {
       _log.severe("Error getting user information from the server [CATCH ALL]", error, stackTrace);
-      dPrint(() => "Error getting user information from the server [CATCH ALL] $error $stackTrace");
+
+      if (kDebugMode) {
+        debugPrint("Error getting user information from the server [CATCH ALL] $error $stackTrace");
+      }
     }
 
     // If the user is null, the login was not successful

mobile/lib/providers/backup/backup.provider.dart

@@ -2,6 +2,8 @@ import 'dart:io';
 
 import 'package:cancellation_token_http/http.dart';
 import 'package:collection/collection.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/album.entity.dart';
@@ -31,7 +33,6 @@ import 'package:immich_mobile/utils/diff.dart';
 import 'package:logging/logging.dart';
 import 'package:permission_handler/permission_handler.dart';
 import 'package:photo_manager/photo_manager.dart' show PMProgressHandler;
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final backupProvider = StateNotifierProvider<BackupNotifier, BackUpState>((ref) {
   return BackupNotifier(
@@ -285,7 +286,7 @@ class BackupNotifier extends StateNotifier<BackUpState> {
     state = state.copyWith(selectedBackupAlbums: selectedAlbums, excludedBackupAlbums: excludedAlbums);
 
     log.info("_getBackupAlbumsInfo: Found ${availableAlbums.length} available albums");
-    dPrint(() => "_getBackupAlbumsInfo takes ${stopwatch.elapsedMilliseconds}ms");
+    debugPrint("_getBackupAlbumsInfo takes ${stopwatch.elapsedMilliseconds}ms");
   }
 
   ///
@@ -427,7 +428,7 @@ class BackupNotifier extends StateNotifier<BackUpState> {
 
   /// Invoke backup process
   Future<void> startBackupProcess() async {
-    dPrint(() => "Start backup process");
+    debugPrint("Start backup process");
     assert(state.backupProgress == BackUpProgressEnum.idle);
     state = state.copyWith(backupProgress: BackUpProgressEnum.inProgress);
 

mobile/lib/providers/backup/drift_backup.provider.dart

@@ -4,6 +4,7 @@ import 'dart:convert';
 
 import 'package:background_downloader/background_downloader.dart';
 import 'package:collection/collection.dart';
+import 'package:flutter/widgets.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/constants.dart';
 import 'package:immich_mobile/domain/models/album/local_album.model.dart';
@@ -13,7 +14,6 @@ import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/services/upload.service.dart';
 import 'package:logging/logging.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 class EnqueueStatus {
   final int enqueueCount;
@@ -329,16 +329,16 @@ class DriftBackupNotifier extends StateNotifier<DriftBackupState> {
   }
 
   Future<void> cancel() async {
-    dPrint(() => "Canceling backup tasks...");
+    debugPrint("Canceling backup tasks...");
     state = state.copyWith(enqueueCount: 0, enqueueTotalCount: 0, isCanceling: true);
 
     final activeTaskCount = await _uploadService.cancelBackup();
 
     if (activeTaskCount > 0) {
-      dPrint(() => "$activeTaskCount tasks left, continuing to cancel...");
+      debugPrint("$activeTaskCount tasks left, continuing to cancel...");
       await cancel();
     } else {
-      dPrint(() => "All tasks canceled successfully.");
+      debugPrint("All tasks canceled successfully.");
       // Clear all upload items when cancellation is complete
       state = state.copyWith(isCanceling: false, uploadItems: {});
     }

mobile/lib/providers/backup/manual_upload.provider.dart

@@ -30,7 +30,6 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 import 'package:logging/logging.dart';
 import 'package:permission_handler/permission_handler.dart';
 import 'package:photo_manager/photo_manager.dart' show PMProgressHandler;
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final manualUploadProvider = StateNotifierProvider<ManualUploadNotifier, ManualUploadState>((ref) {
   return ManualUploadNotifier(
@@ -217,7 +216,7 @@ class ManualUploadNotifier extends StateNotifier<ManualUploadState> {
         );
 
         if (uploadAssets.isEmpty) {
-          dPrint(() => "[_startUpload] No Assets to upload - Abort Process");
+          debugPrint("[_startUpload] No Assets to upload - Abort Process");
           _backupProvider.updateBackupProgress(BackUpProgressEnum.idle);
           return false;
         }
@@ -295,10 +294,10 @@ class ManualUploadNotifier extends StateNotifier<ManualUploadState> {
         }
       } else {
         openAppSettings();
-        dPrint(() => "[_startUpload] Do not have permission to the gallery");
+        debugPrint("[_startUpload] Do not have permission to the gallery");
       }
     } catch (e) {
-      dPrint(() => "ERROR _startUpload: ${e.toString()}");
+      debugPrint("ERROR _startUpload: ${e.toString()}");
       hasErrors = true;
     } finally {
       _backupProvider.updateBackupProgress(BackUpProgressEnum.idle);
@@ -341,7 +340,7 @@ class ManualUploadNotifier extends StateNotifier<ManualUploadState> {
     // waits until it has stopped to start the backup.
     final bool hasLock = await ref.read(backgroundServiceProvider).acquireLock();
     if (!hasLock) {
-      dPrint(() => "[uploadAssets] could not acquire lock, exiting");
+      debugPrint("[uploadAssets] could not acquire lock, exiting");
       ImmichToast.show(
         context: context,
         msg: "failed".tr(),
@@ -356,18 +355,18 @@ class ManualUploadNotifier extends StateNotifier<ManualUploadState> {
 
     // check if backup is already in process - then return
     if (_backupProvider.backupProgress == BackUpProgressEnum.manualInProgress) {
-      dPrint(() => "[uploadAssets] Manual upload is already running - abort");
+      debugPrint("[uploadAssets] Manual upload is already running - abort");
       showInProgress = true;
     }
 
     if (_backupProvider.backupProgress == BackUpProgressEnum.inProgress) {
-      dPrint(() => "[uploadAssets] Auto Backup is already in progress - abort");
+      debugPrint("[uploadAssets] Auto Backup is already in progress - abort");
       showInProgress = true;
       return false;
     }
 
     if (_backupProvider.backupProgress == BackUpProgressEnum.inBackground) {
-      dPrint(() => "[uploadAssets] Background backup is running - abort");
+      debugPrint("[uploadAssets] Background backup is running - abort");
       showInProgress = true;
     }
 

mobile/lib/providers/theme.provider.dart

@@ -7,12 +7,11 @@ import 'package:immich_mobile/theme/theme_data.dart';
 import 'package:immich_mobile/theme/dynamic_theme.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final immichThemeModeProvider = StateProvider<ThemeMode>((ref) {
   final themeMode = ref.watch(appSettingsServiceProvider).getSetting(AppSettingsEnum.themeMode);
 
-  dPrint(() => "Current themeMode $themeMode");
+  debugPrint("Current themeMode $themeMode");
 
   if (themeMode == ThemeMode.light.name) {
     return ThemeMode.light;
@@ -27,12 +26,12 @@ final immichThemePresetProvider = StateProvider<ImmichColorPreset>((ref) {
   final appSettingsProvider = ref.watch(appSettingsServiceProvider);
   final primaryColorPreset = appSettingsProvider.getSetting(AppSettingsEnum.primaryColor);
 
-  dPrint(() => "Current theme preset $primaryColorPreset");
+  debugPrint("Current theme preset $primaryColorPreset");
 
   try {
     return ImmichColorPreset.values.firstWhere((e) => e.name == primaryColorPreset);
   } catch (e) {
-    dPrint(() => "Theme preset $primaryColorPreset not found. Applying default preset.");
+    debugPrint("Theme preset $primaryColorPreset not found. Applying default preset.");
     appSettingsProvider.setSetting(AppSettingsEnum.primaryColor, defaultColorPresetName);
     return defaultColorPreset;
   }

mobile/lib/providers/upload_profile_image.provider.dart

@@ -1,10 +1,10 @@
 import 'dart:convert';
 
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:image_picker/image_picker.dart';
 import 'package:immich_mobile/domain/services/user.service.dart';
 import 'package:immich_mobile/providers/infrastructure/user.provider.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 enum UploadProfileStatus { idle, loading, success, failure }
 
@@ -67,7 +67,7 @@ class UploadProfileImageNotifier extends StateNotifier<UploadProfileImageState>
     var profileImagePath = await _userService.createProfileImage(file.name, await file.readAsBytes());
 
     if (profileImagePath != null) {
-      dPrint(() => "Successfully upload profile image");
+      debugPrint("Successfully upload profile image");
       state = state.copyWith(status: UploadProfileStatus.success, profileImagePath: profileImagePath);
       return true;
     }

mobile/lib/providers/websocket.provider.dart

@@ -2,6 +2,8 @@ import 'dart:async';
 import 'dart:convert';
 
 import 'package:collection/collection.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
@@ -18,7 +20,6 @@ import 'package:immich_mobile/utils/debounce.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
 import 'package:socket_io_client/socket_io_client.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 enum PendingAction { assetDelete, assetUploaded, assetHidden, assetTrash }
 
@@ -104,7 +105,7 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
           headers["Authorization"] = "Basic ${base64.encode(utf8.encode(endpoint.userInfo))}";
         }
 
-        dPrint(() => "Attempting to connect to websocket");
+        debugPrint("Attempting to connect to websocket");
         // Configure socket transports must be specified
         Socket socket = io(
           endpoint.origin,
@@ -120,12 +121,12 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
         );
 
         socket.onConnect((_) {
-          dPrint(() => "Established Websocket Connection");
+          debugPrint("Established Websocket Connection");
           state = WebsocketState(isConnected: true, socket: socket, pendingChanges: state.pendingChanges);
         });
 
         socket.onDisconnect((_) {
-          dPrint(() => "Disconnect to Websocket Connection");
+          debugPrint("Disconnect to Websocket Connection");
           state = WebsocketState(isConnected: false, socket: null, pendingChanges: state.pendingChanges);
         });
 
@@ -149,13 +150,13 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
         socket.on('on_config_update', _handleOnConfigUpdate);
         socket.on('on_new_release', _handleReleaseUpdates);
       } catch (e) {
-        dPrint(() => "[WEBSOCKET] Catch Websocket Error - ${e.toString()}");
+        debugPrint("[WEBSOCKET] Catch Websocket Error - ${e.toString()}");
       }
     }
   }
 
   void disconnect() {
-    dPrint(() => "Attempting to disconnect from websocket");
+    debugPrint("Attempting to disconnect from websocket");
 
     _batchedAssetUploadReady.clear();
 
@@ -199,7 +200,7 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
   }
 
   void listenUploadEvent() {
-    dPrint(() => "Start listening to event on_upload_success");
+    debugPrint("Start listening to event on_upload_success");
     state.socket?.on('on_upload_success', _handleOnUploadSuccess);
   }
 
@@ -320,13 +321,10 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
       return;
     }
 
-    final isSyncAlbumEnabled = Store.get(StoreKey.syncAlbums, false);
     try {
       unawaited(
         _ref.read(backgroundSyncProvider).syncWebsocketBatch(_batchedAssetUploadReady.toList()).then((_) {
-          if (isSyncAlbumEnabled) {
+          return _ref.read(backgroundSyncProvider).syncLinkedAlbum();
-            _ref.read(backgroundSyncProvider).syncLinkedAlbum();
-          }
         }),
       );
     } catch (error) {

mobile/lib/repositories/upload.repository.dart

@@ -3,12 +3,12 @@ import 'dart:io';
 
 import 'package:background_downloader/background_downloader.dart';
 import 'package:cancellation_token_http/http.dart';
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/constants.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:logging/logging.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 class UploadTaskWithFile {
   final File file;
@@ -79,17 +79,14 @@ class UploadRepository {
       FileDownloader().database.allRecordsWithStatus(TaskStatus.paused, group: kBackupGroup),
     ]);
 
-    dPrint(
+    debugPrint("""
-      () =>
-          """
       Upload Info:
       Enqueued: ${enqueuedTasks.length}
       Running: ${runningTasks.length}
       Canceled: ${canceledTasks.length}
       Waiting: ${waitingTasks.length}
       Paused: ${pausedTasks.length}
-    """,
+    """);
-    );
   }
 
   Future<void> backupWithDartClient(Iterable<UploadTaskWithFile> tasks, CancellationToken cancelToken) async {

mobile/lib/routing/duplicate_guard.dart

@@ -1,5 +1,5 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
+import 'package:flutter/foundation.dart';
 
 /// Guards against duplicate navigation to this route
 class DuplicateGuard extends AutoRouteGuard {
@@ -8,7 +8,7 @@ class DuplicateGuard extends AutoRouteGuard {
   void onNavigation(NavigationResolver resolver, StackRouter router) async {
     // Duplicate navigation
     if (resolver.route.name == router.current.name) {
-      dPrint(() => 'DuplicateGuard: Preventing duplicate route navigation for ${resolver.route.name}');
+      debugPrint('DuplicateGuard: Preventing duplicate route navigation for ${resolver.route.name}');
       resolver.next(false);
     } else {
       resolver.next(true);

mobile/lib/services/album.service.dart

@@ -3,6 +3,7 @@ import 'dart:collection';
 import 'dart:io';
 
 import 'package:collection/collection.dart';
+import 'package:flutter/foundation.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
@@ -23,7 +24,6 @@ import 'package:immich_mobile/services/entity.service.dart';
 import 'package:immich_mobile/services/sync.service.dart';
 import 'package:immich_mobile/utils/hash.dart';
 import 'package:logging/logging.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final albumServiceProvider = Provider(
   (ref) => AlbumService(
@@ -124,7 +124,7 @@ class AlbumService {
     } finally {
       _localCompleter.complete(changes);
     }
-    dPrint(() => "refreshDeviceAlbums took ${sw.elapsedMilliseconds}ms");
+    debugPrint("refreshDeviceAlbums took ${sw.elapsedMilliseconds}ms");
     return changes;
   }
 
@@ -172,7 +172,7 @@ class AlbumService {
     } finally {
       _remoteCompleter.complete(changes);
     }
-    dPrint(() => "refreshRemoteAlbums took ${sw.elapsedMilliseconds}ms");
+    debugPrint("refreshRemoteAlbums took ${sw.elapsedMilliseconds}ms");
     return changes;
   }
 
@@ -220,7 +220,7 @@ class AlbumService {
 
       return AlbumAddAssetsResponse(alreadyInAlbum: result.duplicates, successfullyAdded: addedAssets.length);
     } catch (e) {
-      dPrint(() => "Error addAssets  ${e.toString()}");
+      debugPrint("Error addAssets  ${e.toString()}");
     }
     return null;
   }
@@ -242,7 +242,7 @@ class AlbumService {
       await _albumRepository.update(album);
       return true;
     } catch (e) {
-      dPrint(() => "Error setActivityEnabled  ${e.toString()}");
+      debugPrint("Error setActivityEnabled  ${e.toString()}");
     }
     return false;
   }
@@ -271,7 +271,7 @@ class AlbumService {
       }
       return true;
     } catch (e) {
-      dPrint(() => "Error deleteAlbum  ${e.toString()}");
+      debugPrint("Error deleteAlbum  ${e.toString()}");
     }
     return false;
   }
@@ -281,7 +281,7 @@ class AlbumService {
       await _albumApiRepository.removeUser(album.remoteId!, userId: "me");
       return true;
     } catch (e) {
-      dPrint(() => "Error leaveAlbum ${e.toString()}");
+      debugPrint("Error leaveAlbum ${e.toString()}");
       return false;
     }
   }
@@ -293,7 +293,7 @@ class AlbumService {
       await _updateAssets(album.id, remove: toRemove.toList());
       return true;
     } catch (e) {
-      dPrint(() => "Error removeAssetFromAlbum ${e.toString()}");
+      debugPrint("Error removeAssetFromAlbum ${e.toString()}");
     }
     return false;
   }
@@ -310,7 +310,7 @@ class AlbumService {
 
       return true;
     } catch (error) {
-      dPrint(() => "Error removeUser  ${error.toString()}");
+      debugPrint("Error removeUser  ${error.toString()}");
       return false;
     }
   }
@@ -327,7 +327,7 @@ class AlbumService {
 
       return true;
     } catch (error) {
-      dPrint(() => "Error addUsers ${error.toString()}");
+      debugPrint("Error addUsers ${error.toString()}");
     }
     return false;
   }
@@ -340,7 +340,7 @@ class AlbumService {
       await _albumRepository.update(album);
       return true;
     } catch (e) {
-      dPrint(() => "Error changeTitleAlbum  ${e.toString()}");
+      debugPrint("Error changeTitleAlbum  ${e.toString()}");
       return false;
     }
   }
@@ -353,7 +353,7 @@ class AlbumService {
       await _albumRepository.update(album);
       return true;
     } catch (e) {
-      dPrint(() => "Error changeDescriptionAlbum  ${e.toString()}");
+      debugPrint("Error changeDescriptionAlbum  ${e.toString()}");
       return false;
     }
   }

mobile/lib/services/api.service.dart

@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'dart:io';
 
 import 'package:device_info_plus/device_info_plus.dart';
+import 'package:flutter/material.dart';
 import 'package:http/http.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
@@ -10,7 +11,6 @@ import 'package:immich_mobile/utils/url_helper.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
 import 'package:immich_mobile/utils/user_agent.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 class ApiService implements Authentication {
   late ApiClient _apiClient;
@@ -155,7 +155,7 @@ class ApiService implements Authentication {
         return endpoint;
       }
     } catch (e) {
-      dPrint(() => "Could not locate /.well-known/immich at $baseUrl");
+      debugPrint("Could not locate /.well-known/immich at $baseUrl");
     }
 
     return "";

mobile/lib/services/asset.service.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:collection/collection.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/user.model.dart';
@@ -25,7 +26,6 @@ import 'package:immich_mobile/services/sync.service.dart';
 import 'package:logging/logging.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 import 'package:openapi/api.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final assetServiceProvider = Provider(
   (ref) => AssetService(
@@ -87,7 +87,7 @@ class AssetService {
       getChangedAssets: _getRemoteAssetChanges,
       loadAssets: _getRemoteAssets,
     );
-    dPrint(() => "refreshRemoteAssets full took ${sw.elapsedMilliseconds}ms");
+    debugPrint("refreshRemoteAssets full took ${sw.elapsedMilliseconds}ms");
     return changes;
   }
 
@@ -156,7 +156,7 @@ class AssetService {
             if (a.isInDb) {
               await _assetRepository.transaction(() => _assetRepository.update(a));
             } else {
-              dPrint(() => "[loadExif] parameter Asset is not from DB!");
+              debugPrint("[loadExif] parameter Asset is not from DB!");
             }
           }
         }

mobile/lib/services/background.service.dart

@@ -7,6 +7,7 @@ import 'dart:ui' show DartPluginRegistrant, IsolateNameServer, PluginUtilities;
 import 'package:cancellation_token_http/http.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -28,7 +29,6 @@ import 'package:immich_mobile/services/backup.service.dart';
 import 'package:immich_mobile/services/localization.service.dart';
 import 'package:immich_mobile/utils/backup_progress.dart';
 import 'package:immich_mobile/utils/bootstrap.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 import 'package:immich_mobile/utils/diff.dart';
 import 'package:immich_mobile/utils/http_ssl_options.dart';
 import 'package:path_provider_foundation/path_provider_foundation.dart';
@@ -165,7 +165,7 @@ class BackgroundService {
         ]);
       }
     } catch (error) {
-      dPrint(() => "[_updateNotification] failed to communicate with plugin");
+      debugPrint("[_updateNotification] failed to communicate with plugin");
     }
     return false;
   }
@@ -177,7 +177,7 @@ class BackgroundService {
         return await _backgroundChannel.invokeMethod('showError', [title, content, individualTag]);
       }
     } catch (error) {
-      dPrint(() => "[_showErrorNotification] failed to communicate with plugin");
+      debugPrint("[_showErrorNotification] failed to communicate with plugin");
     }
     return false;
   }
@@ -188,7 +188,7 @@ class BackgroundService {
         return await _backgroundChannel.invokeMethod('clearErrorNotifications');
       }
     } catch (error) {
-      dPrint(() => "[_clearErrorNotifications] failed to communicate with plugin");
+      debugPrint("[_clearErrorNotifications] failed to communicate with plugin");
     }
     return false;
   }
@@ -196,7 +196,7 @@ class BackgroundService {
   /// await to ensure this thread (foreground or background) has exclusive access
   Future<bool> acquireLock() async {
     if (_hasLock) {
-      dPrint(() => "WARNING: [acquireLock] called more than once");
+      debugPrint("WARNING: [acquireLock] called more than once");
       return true;
     }
     final int lockTime = Timeline.now;
@@ -302,19 +302,19 @@ class BackgroundService {
 
           final bool hasAccess = await waitForLock;
           if (!hasAccess) {
-            dPrint(() => "[_callHandler] could not acquire lock, exiting");
+            debugPrint("[_callHandler] could not acquire lock, exiting");
             return false;
           }
 
           final translationsOk = await loadTranslations();
           if (!translationsOk) {
-            dPrint(() => "[_callHandler] could not load translations");
+            debugPrint("[_callHandler] could not load translations");
           }
 
           final bool ok = await _onAssetsChanged();
           return ok;
         } catch (error) {
-          dPrint(() => error.toString());
+          debugPrint(error.toString());
           return false;
         } finally {
           releaseLock();
@@ -324,14 +324,14 @@ class BackgroundService {
         _cancellationToken?.cancel();
         return true;
       default:
-        dPrint(() => "Unknown method ${call.method}");
+        debugPrint("Unknown method ${call.method}");
         return false;
     }
   }
 
   Future<bool> _onAssetsChanged() async {
     final (isar, drift, logDb) = await Bootstrap.initDB();
-    await Bootstrap.initDomain(isar, drift, logDb, shouldBufferLogs: false, listenStoreUpdates: false);
+    await Bootstrap.initDomain(isar, drift, logDb);
 
     final ref = ProviderContainer(
       overrides: [
@@ -344,7 +344,9 @@ class BackgroundService {
     HttpSSLOptions.apply();
     ref.read(apiServiceProvider).setAccessToken(Store.get(StoreKey.accessToken));
     await ref.read(authServiceProvider).setOpenApiServiceEndpoint();
-    dPrint(() => "[BG UPLOAD] Using endpoint: ${ref.read(apiServiceProvider).apiClient.basePath}");
+    if (kDebugMode) {
+      debugPrint("[BG UPLOAD] Using endpoint: ${ref.read(apiServiceProvider).apiClient.basePath}");
+    }
 
     final selectedAlbums = await ref.read(backupAlbumRepositoryProvider).getAllBySelection(BackupSelection.select);
     final excludedAlbums = await ref.read(backupAlbumRepositoryProvider).getAllBySelection(BackupSelection.exclude);

mobile/lib/services/backup.service.dart

@@ -4,6 +4,7 @@ import 'dart:io';
 
 import 'package:cancellation_token_http/http.dart' as http;
 import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/album.entity.dart';
@@ -28,7 +29,6 @@ import 'package:openapi/api.dart';
 import 'package:path/path.dart' as p;
 import 'package:permission_handler/permission_handler.dart' as pm;
 import 'package:photo_manager/photo_manager.dart' show PMProgressHandler;
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final backupServiceProvider = Provider(
   (ref) => BackupService(
@@ -69,7 +69,7 @@ class BackupService {
     try {
       return await _apiService.assetsApi.getAllUserAssetsByDeviceId(deviceId);
     } catch (e) {
-      dPrint(() => 'Error [getDeviceBackupAsset] ${e.toString()}');
+      debugPrint('Error [getDeviceBackupAsset] ${e.toString()}');
       return null;
     }
   }
@@ -356,9 +356,8 @@ class BackupService {
             final error = responseBody;
             final errorMessage = error['message'] ?? error['error'];
 
-            dPrint(
+            debugPrint(
-              () =>
+              "Error(${error['statusCode']}) uploading ${asset.localId} | $originalFileName | Created on ${asset.fileCreatedAt} | ${error['error']}",
-                  "Error(${error['statusCode']}) uploading ${asset.localId} | $originalFileName | Created on ${asset.fileCreatedAt} | ${error['error']}",
             );
 
             onError(
@@ -399,11 +398,11 @@ class BackupService {
           }
         }
       } on http.CancelledException {
-        dPrint(() => "Backup was cancelled by the user");
+        debugPrint("Backup was cancelled by the user");
         anyErrors = true;
         break;
       } catch (error, stackTrace) {
-        dPrint(() => "Error backup asset: ${error.toString()}: $stackTrace");
+        debugPrint("Error backup asset: ${error.toString()}: $stackTrace");
         anyErrors = true;
         continue;
       } finally {
@@ -412,7 +411,7 @@ class BackupService {
             await file?.delete();
             await livePhotoFile?.delete();
           } catch (e) {
-            dPrint(() => "ERROR deleting file: ${e.toString()}");
+            debugPrint("ERROR deleting file: ${e.toString()}");
           }
         }
       }
@@ -455,9 +454,7 @@ class BackupService {
     if (![200, 201].contains(response.statusCode)) {
       var error = responseBody;
 
-      dPrint(
+      debugPrint("Error(${error['statusCode']}) uploading livePhoto for assetId | $livePhotoTitle | ${error['error']}");
-        () => "Error(${error['statusCode']}) uploading livePhoto for assetId | $livePhotoTitle | ${error['error']}",
-      );
     }
 
     return responseBody.containsKey('id') ? responseBody['id'] : null;

mobile/lib/services/local_notification.service.dart

@@ -1,9 +1,9 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter_local_notifications/flutter_local_notifications.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/providers/backup/manual_upload.provider.dart';
 import 'package:immich_mobile/providers/notification_permission.provider.dart';
 import 'package:permission_handler/permission_handler.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final localNotificationService = Provider(
   (ref) => LocalNotificationService(ref.watch(notificationPermissionProvider), ref),
@@ -110,7 +110,7 @@ class LocalNotificationService {
     switch (notificationResponse.actionId) {
       case cancelUploadActionID:
         {
-          dPrint(() => "User cancelled manual upload operation");
+          debugPrint("User cancelled manual upload operation");
           ref.read(manualUploadProvider.notifier).cancelBackup();
         }
     }

mobile/lib/services/localization.service.dart

@@ -2,9 +2,9 @@
 
 import 'package:easy_localization/src/easy_localization_controller.dart';
 import 'package:easy_localization/src/localization.dart';
+import 'package:flutter/foundation.dart';
 import 'package:immich_mobile/constants/locales.dart';
 import 'package:immich_mobile/generated/codegen_loader.g.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 /// Workaround to manually load translations in another Isolate
 Future<bool> loadTranslations() async {
@@ -17,7 +17,7 @@ Future<bool> loadTranslations() async {
     assetLoader: const CodegenLoader(),
     path: translationsPath,
     useOnlyLangCode: false,
-    onLoadError: (e) => dPrint(() => e.toString()),
+    onLoadError: (e) => debugPrint(e.toString()),
     fallbackLocale: locales.values.first,
   );
 

mobile/lib/services/search.service.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/string_extensions.dart';
 import 'package:immich_mobile/infrastructure/repositories/search_api.repository.dart';
@@ -9,7 +10,6 @@ import 'package:immich_mobile/repositories/asset.repository.dart';
 import 'package:immich_mobile/services/api.service.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final searchServiceProvider = Provider(
   (ref) => SearchService(
@@ -43,7 +43,7 @@ class SearchService {
         model: model,
       );
     } catch (e) {
-      dPrint(() => "[ERROR] [getSearchSuggestions] ${e.toString()}");
+      debugPrint("[ERROR] [getSearchSuggestions] ${e.toString()}");
       return [];
     }
   }

mobile/lib/services/server_info.service.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/models/server_info/server_config.model.dart';
 import 'package:immich_mobile/models/server_info/server_disk_info.model.dart';
@@ -5,7 +6,6 @@ import 'package:immich_mobile/models/server_info/server_features.model.dart';
 import 'package:immich_mobile/models/server_info/server_version.model.dart';
 import 'package:immich_mobile/providers/api.provider.dart';
 import 'package:immich_mobile/services/api.service.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final serverInfoServiceProvider = Provider((ref) => ServerInfoService(ref.watch(apiServiceProvider)));
 
@@ -30,7 +30,7 @@ class ServerInfoService {
         return ServerDiskInfo.fromDto(dto);
       }
     } catch (e) {
-      dPrint(() => "Error [getDiskInfo] ${e.toString()}");
+      debugPrint("Error [getDiskInfo] ${e.toString()}");
     }
     return null;
   }
@@ -42,7 +42,7 @@ class ServerInfoService {
         return ServerVersion.fromDto(dto);
       }
     } catch (e) {
-      dPrint(() => "Error [getServerVersion] ${e.toString()}");
+      debugPrint("Error [getServerVersion] ${e.toString()}");
     }
     return null;
   }
@@ -54,7 +54,7 @@ class ServerInfoService {
         return ServerFeatures.fromDto(dto);
       }
     } catch (e) {
-      dPrint(() => "Error [getServerFeatures] ${e.toString()}");
+      debugPrint("Error [getServerFeatures] ${e.toString()}");
     }
     return null;
   }
@@ -66,7 +66,7 @@ class ServerInfoService {
         return ServerConfig.fromDto(dto);
       }
     } catch (e) {
-      dPrint(() => "Error [getServerConfig] ${e.toString()}");
+      debugPrint("Error [getServerConfig] ${e.toString()}");
     }
     return null;
   }

mobile/lib/services/stack.service.dart

@@ -1,10 +1,10 @@
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/providers/api.provider.dart';
 import 'package:immich_mobile/repositories/asset.repository.dart';
 import 'package:immich_mobile/services/api.service.dart';
 import 'package:openapi/api.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 class StackService {
   const StackService(this._api, this._assetRepository);
@@ -16,7 +16,7 @@ class StackService {
     try {
       return _api.stacksApi.getStack(stackId);
     } catch (error) {
-      dPrint(() => "Error while fetching stack: $error");
+      debugPrint("Error while fetching stack: $error");
     }
     return null;
   }
@@ -25,7 +25,7 @@ class StackService {
     try {
       return _api.stacksApi.createStack(StackCreateDto(assetIds: assetIds));
     } catch (error) {
-      dPrint(() => "Error while creating stack: $error");
+      debugPrint("Error while creating stack: $error");
     }
     return null;
   }
@@ -34,7 +34,7 @@ class StackService {
     try {
       return await _api.stacksApi.updateStack(stackId, StackUpdateDto(primaryAssetId: primaryAssetId));
     } catch (error) {
-      dPrint(() => "Error while updating stack children: $error");
+      debugPrint("Error while updating stack children: $error");
     }
     return null;
   }
@@ -54,7 +54,7 @@ class StackService {
       }
       await _assetRepository.transaction(() => _assetRepository.updateAll(removeAssets));
     } catch (error) {
-      dPrint(() => "Error while deleting stack: $error");
+      debugPrint("Error while deleting stack: $error");
     }
   }
 }

mobile/lib/services/upload.service.dart

@@ -4,6 +4,7 @@ import 'dart:io';
 
 import 'package:background_downloader/background_downloader.dart';
 import 'package:cancellation_token_http/http.dart';
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/constants.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
@@ -21,7 +22,6 @@ import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:logging/logging.dart';
 import 'package:path/path.dart' as p;
-import 'package:immich_mobile/utils/debug_print.dart';
 
 final uploadServiceProvider = Provider((ref) {
   final service = UploadService(
@@ -253,7 +253,7 @@ class UploadService {
 
       enqueueTasks([uploadTask]);
     } catch (error, stackTrace) {
-      dPrint(() => "Error handling live photo upload task: $error $stackTrace");
+      debugPrint("Error handling live photo upload task: $error $stackTrace");
     }
   }
 

mobile/lib/theme/dynamic_theme.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:dynamic_color/dynamic_color.dart';
 
 import 'package:immich_mobile/theme/theme_data.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 abstract final class DynamicTheme {
   const DynamicTheme._();
@@ -14,7 +13,7 @@ abstract final class DynamicTheme {
       final corePalette = await DynamicColorPlugin.getCorePalette();
       if (corePalette != null) {
         final primaryColor = corePalette.toColorScheme().primary;
-        dPrint(() => 'dynamic_color: Core palette detected.');
+        debugPrint('dynamic_color: Core palette detected.');
 
         // Some palettes do not generate surface container colors accurately,
         // so we regenerate all colors using the primary color
@@ -24,7 +23,7 @@ abstract final class DynamicTheme {
         );
       }
     } catch (error) {
-      dPrint(() => 'dynamic_color: Failed to obtain core palette: $error');
+      debugPrint('dynamic_color: Failed to obtain core palette: $error');
     }
   }
 

mobile/lib/utils/bootstrap.dart

@@ -89,17 +89,11 @@ abstract final class Bootstrap {
     return (isar, drift, logDb);
   }
 
-  static Future<void> initDomain(
+  static Future<void> initDomain(Isar db, Drift drift, DriftLogger logDb, {bool shouldBufferLogs = true}) async {
-    Isar db,
-    Drift drift,
-    DriftLogger logDb, {
-    bool listenStoreUpdates = true,
-    bool shouldBufferLogs = true,
-  }) async {
     final isBeta = await IsarStoreRepository(db).tryGet(StoreKey.betaTimeline) ?? true;
     final IStoreRepository storeRepo = isBeta ? DriftStoreRepository(drift) : IsarStoreRepository(db);
 
-    await StoreService.init(storeRepository: storeRepo, listenUpdates: listenStoreUpdates);
+    await StoreService.init(storeRepository: storeRepo);
 
     await LogService.init(
       logRepository: LogRepository(logDb),

mobile/lib/utils/debug_print.dart

@@ -1,8 +0,0 @@
-import 'package:flutter/foundation.dart';
-
-@pragma('vm:prefer-inline')
-void dPrint(String Function() message) {
-  if (kDebugMode) {
-    debugPrint(message());
-  }
-}

mobile/lib/utils/isolate.dart

@@ -1,15 +1,14 @@
 import 'dart:async';
 import 'dart:ui';
 
+import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/services/log.service.dart';
-import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/providers/db.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/cancel.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
 import 'package:immich_mobile/utils/bootstrap.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 import 'package:immich_mobile/utils/http_ssl_options.dart';
 import 'package:logging/logging.dart';
 import 'package:worker_manager/worker_manager.dart';
@@ -38,7 +37,7 @@ Cancelable<T?> runInIsolateGentle<T>({
         DartPluginRegistrant.ensureInitialized();
 
         final (isar, drift, logDb) = await Bootstrap.initDB();
-        await Bootstrap.initDomain(isar, drift, logDb, shouldBufferLogs: false, listenStoreUpdates: false);
+        await Bootstrap.initDomain(isar, drift, logDb, shouldBufferLogs: false);
         final ref = ProviderContainer(
           overrides: [
             // TODO: Remove once isar is removed
@@ -62,7 +61,6 @@ Cancelable<T?> runInIsolateGentle<T>({
           try {
             ref.dispose();
 
-            await Store.dispose();
             await LogService.I.dispose();
             await logDb.close();
             await drift.close();
@@ -73,10 +71,10 @@ Cancelable<T?> runInIsolateGentle<T>({
                 await isar.close();
               }
             } catch (e) {
-              dPrint(() => "Error closing Isar: $e");
+              debugPrint("Error closing Isar: $e");
             }
           } catch (error, stack) {
-            dPrint(() => "Error closing resources in isolate: $error, $stack");
+            debugPrint("Error closing resources in isolate: $error, $stack");
           } finally {
             ref.dispose();
             // Delay to ensure all resources are released
@@ -86,7 +84,7 @@ Cancelable<T?> runInIsolateGentle<T>({
         return null;
       },
       (error, stack) {
-        dPrint(() => "Error in isolate $debugLabel zone: $error, $stack");
+        debugPrint("Error in isolate zone: $error, $stack");
       },
     );
     return null;

mobile/lib/utils/migration.dart

@@ -4,6 +4,7 @@ import 'dart:io';
 
 import 'package:collection/collection.dart';
 import 'package:drift/drift.dart';
+import 'package:flutter/foundation.dart';
 import 'package:immich_mobile/domain/models/album/local_album.model.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/album.entity.dart';
@@ -21,14 +22,12 @@ import 'package:immich_mobile/infrastructure/entities/store.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/store.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/entities/user.entity.dart';
 import 'package:immich_mobile/infrastructure/repositories/db.repository.dart';
-import 'package:immich_mobile/infrastructure/repositories/sync_stream.repository.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 import 'package:immich_mobile/utils/diff.dart';
 import 'package:isar/isar.dart';
 // ignore: import_rule_photo_manager
 import 'package:photo_manager/photo_manager.dart';
 
-const int targetVersion = 16;
+const int targetVersion = 15;
 
 Future<void> migrateDatabaseIfNeeded(Isar db, Drift drift) async {
   final hasVersion = Store.tryGet(StoreKey.version) != null;
@@ -77,16 +76,11 @@ Future<void> migrateDatabaseIfNeeded(Isar db, Drift drift) async {
       await Store.put(StoreKey.needBetaMigration, false);
       await Store.put(StoreKey.betaTimeline, true);
     } else {
-      await drift.reset();
+      await resetDriftDatabase(drift);
       await Store.put(StoreKey.needBetaMigration, true);
     }
   }
 
-  if (version < 16) {
-    await SyncStreamRepository(drift).reset();
-    await Store.put(StoreKey.shouldResetSync, true);
-  }
-
   if (targetVersion >= 12) {
     await Store.put(StoreKey.version, targetVersion);
     return;
@@ -123,7 +117,7 @@ Future<bool> _isNewInstallation(Isar db, Drift drift) async {
 
     return true;
   } catch (error) {
-    dPrint(() => "[MIGRATION] Error checking if new installation: $error");
+    debugPrint("[MIGRATION] Error checking if new installation: $error");
     return false;
   }
 }
@@ -149,7 +143,10 @@ Future<void> _migrateDeviceAsset(Isar db) async {
 
   final PermissionState ps = await PhotoManager.requestPermissionExtend();
   if (!ps.hasAccess) {
-    dPrint(() => "[MIGRATION] Photo library permission not granted. Skipping device asset migration.");
+    if (kDebugMode) {
+      debugPrint("[MIGRATION] Photo library permission not granted. Skipping device asset migration.");
+    }
+
     return;
   }
 
@@ -169,8 +166,8 @@ Future<void> _migrateDeviceAsset(Isar db) async {
     localAssets = allDeviceAssets.map((a) => _DeviceAsset(assetId: a.id, dateTime: a.modifiedDateTime)).toList();
   }
 
-  dPrint(() => "[MIGRATION] Device Asset Ids length - ${ids.length}");
+  debugPrint("[MIGRATION] Device Asset Ids length - ${ids.length}");
-  dPrint(() => "[MIGRATION] Local Asset Ids length - ${localAssets.length}");
+  debugPrint("[MIGRATION] Local Asset Ids length - ${localAssets.length}");
   ids.sort((a, b) => a.assetId.compareTo(b.assetId));
   localAssets.sort((a, b) => a.assetId.compareTo(b.assetId));
   final List<DeviceAssetEntity> toAdd = [];
@@ -185,14 +182,20 @@ Future<void> _migrateDeviceAsset(Isar db) async {
       return false;
     },
     onlyFirst: (deviceAsset) {
-      dPrint(() => '[MIGRATION] Local asset not found in DeviceAsset: ${deviceAsset.assetId}');
+      if (kDebugMode) {
+        debugPrint('[MIGRATION] Local asset not found in DeviceAsset: ${deviceAsset.assetId}');
+      }
     },
     onlySecond: (asset) {
-      dPrint(() => '[MIGRATION] Local asset not found in DeviceAsset: ${asset.assetId}');
+      if (kDebugMode) {
+        debugPrint('[MIGRATION] Local asset not found in DeviceAsset: ${asset.assetId}');
+      }
     },
   );
 
-  dPrint(() => "[MIGRATION] Total number of device assets migrated - ${toAdd.length}");
+  if (kDebugMode) {
+    debugPrint("[MIGRATION] Total number of device assets migrated - ${toAdd.length}");
+  }
 
   await db.writeTxn(() async {
     await db.deviceAssetEntitys.putAll(toAdd);
@@ -212,7 +215,7 @@ Future<void> migrateDeviceAssetToSqlite(Isar db, Drift drift) async {
       }
     });
   } catch (error) {
-    dPrint(() => "[MIGRATION] Error while migrating device assets to SQLite: $error");
+    debugPrint("[MIGRATION] Error while migrating device assets to SQLite: $error");
   }
 }
 
@@ -260,7 +263,7 @@ Future<void> migrateBackupAlbumsToSqlite(Isar db, Drift drift) async {
       }
     });
   } catch (error) {
-    dPrint(() => "[MIGRATION] Error while migrating backup albums to SQLite: $error");
+    debugPrint("[MIGRATION] Error while migrating backup albums to SQLite: $error");
   }
 }
 
@@ -278,7 +281,7 @@ Future<void> migrateStoreToSqlite(Isar db, Drift drift) async {
       }
     });
   } catch (error) {
-    dPrint(() => "[MIGRATION] Error while migrating store values to SQLite: $error");
+    debugPrint("[MIGRATION] Error while migrating store values to SQLite: $error");
   }
 }
 
@@ -293,7 +296,7 @@ Future<void> migrateStoreToIsar(Isar db, Drift drift) async {
       await db.storeValues.putAll(driftStoreValues);
     });
   } catch (error) {
-    dPrint(() => "[MIGRATION] Error while migrating store values to Isar: $error");
+    debugPrint("[MIGRATION] Error while migrating store values to Isar: $error");
   }
 }
 
@@ -304,3 +307,27 @@ class _DeviceAsset {
 
   const _DeviceAsset({required this.assetId, this.hash, this.dateTime});
 }
+
+Future<void> resetDriftDatabase(Drift drift) async {
+  // https://github.com/simolus3/drift/commit/bd80a46264b6dd833ef4fd87fffc03f5a832ab41#diff-3f879e03b4a35779344ef16170b9353608dd9c42385f5402ec6035aac4dd8a04R76-R94
+  final database = drift.attachedDatabase;
+  await database.exclusively(() async {
+    // https://stackoverflow.com/a/65743498/25690041
+    await database.customStatement('PRAGMA writable_schema = 1;');
+    await database.customStatement('DELETE FROM sqlite_master;');
+    await database.customStatement('VACUUM;');
+    await database.customStatement('PRAGMA writable_schema = 0;');
+    await database.customStatement('PRAGMA integrity_check');
+
+    await database.customStatement('PRAGMA user_version = 0');
+    await database.beforeOpen(
+      // ignore: invalid_use_of_internal_member
+      database.resolvedEngine.executor,
+      OpeningDetails(null, database.schemaVersion),
+    );
+    await database.customStatement('PRAGMA user_version = ${database.schemaVersion}');
+
+    // Refresh all stream queries
+    database.notifyUpdates({for (final table in database.allTables) TableUpdate.onTable(table)});
+  });
+}

mobile/lib/widgets/asset_viewer/detail_panel/exif_map.dart

@@ -5,7 +5,6 @@ import 'package:immich_mobile/domain/models/exif.model.dart';
 import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 import 'package:url_launcher/url_launcher.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 class ExifMap extends StatelessWidget {
   final ExifInfo exifInfo;
@@ -67,7 +66,7 @@ class ExifMap extends StatelessWidget {
               return;
             }
 
-            dPrint(() => 'Opening Map Uri: $uri');
+            debugPrint('Opening Map Uri: $uri');
             launchUrl(uri);
           },
           onCreated: onMapCreated,

mobile/lib/widgets/settings/advanced_settings.dart

@@ -14,7 +14,6 @@ import 'package:immich_mobile/repositories/local_files_manager.repository.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
 import 'package:immich_mobile/utils/http_ssl_options.dart';
-import 'package:immich_mobile/widgets/settings/beta_timeline_list_tile.dart';
 import 'package:immich_mobile/widgets/settings/custom_proxy_headers_settings/custome_proxy_headers_settings.dart';
 import 'package:immich_mobile/widgets/settings/local_storage_settings.dart';
 import 'package:immich_mobile/widgets/settings/settings_slider_list_tile.dart';
@@ -92,7 +91,7 @@ class AdvancedSettings extends HookConsumerWidget {
         title: "advanced_settings_prefer_remote_title".tr(),
         subtitle: "advanced_settings_prefer_remote_subtitle".tr(),
       ),
-      if (!Store.isBetaTimelineEnabled) const LocalStorageSettings(),
+      const LocalStorageSettings(),
       SettingsSwitchListTile(
         enabled: !isLoggedIn,
         valueNotifier: allowSelfSignedSSLCert,
@@ -102,13 +101,12 @@ class AdvancedSettings extends HookConsumerWidget {
       ),
       const CustomeProxyHeaderSettings(),
       SslClientCertSettings(isLoggedIn: ref.read(currentUserProvider) != null),
-      if (!Store.isBetaTimelineEnabled)
+      SettingsSwitchListTile(
-        SettingsSwitchListTile(
+        valueNotifier: useAlternatePMFilter,
-          valueNotifier: useAlternatePMFilter,
+        title: "advanced_settings_enable_alternate_media_filter_title".tr(),
-          title: "advanced_settings_enable_alternate_media_filter_title".tr(),
+        subtitle: "advanced_settings_enable_alternate_media_filter_subtitle".tr(),
-          subtitle: "advanced_settings_enable_alternate_media_filter_subtitle".tr(),
+      ),
-        ),
+      // TODO: Remove this check when beta timeline goes stable
-      const BetaTimelineListTile(),
       if (Store.isBetaTimelineEnabled)
         SettingsSwitchListTile(
           valueNotifier: readonlyModeEnabled,

mobile/lib/widgets/settings/beta_sync_settings/sync_status_and_actions.dart

@@ -5,12 +5,13 @@ 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/providers/background_sync.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/memory.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/storage.provider.dart';
 import 'package:immich_mobile/providers/sync_status.provider.dart';
+import 'package:immich_mobile/utils/migration.dart';
 import 'package:immich_mobile/widgets/settings/beta_sync_settings/entity_count_tile.dart';
 import 'package:path/path.dart' as path;
 import 'package:path_provider/path_provider.dart';
@@ -82,7 +83,7 @@ class SyncStatusAndActions extends HookConsumerWidget {
               ),
               TextButton(
                 onPressed: () async {
-                  await ref.read(driftProvider).reset();
+                  await resetDriftDatabase(ref.read(driftProvider));
                   context.pop();
                   context.scaffoldMessenger.showSnackBar(
                     SnackBar(content: Text("reset_sqlite_success".t(context: context))),

mobile/lib/widgets/settings/beta_timeline_list_tile.dart

@@ -1,3 +1,5 @@
+import 'dart:math' as math;
+
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
@@ -10,11 +12,50 @@ import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
 
-class BetaTimelineListTile extends ConsumerWidget {
+class BetaTimelineListTile extends ConsumerStatefulWidget {
   const BetaTimelineListTile({super.key});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  ConsumerState<BetaTimelineListTile> createState() => _BetaTimelineListTileState();
+}
+
+class _BetaTimelineListTileState extends ConsumerState<BetaTimelineListTile> with SingleTickerProviderStateMixin {
+  late AnimationController _animationController;
+  late Animation<double> _rotationAnimation;
+  late Animation<double> _pulseAnimation;
+  late Animation<double> _gradientAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(duration: const Duration(seconds: 3), vsync: this);
+
+    _rotationAnimation = Tween<double>(
+      begin: 0,
+      end: 2 * math.pi,
+    ).animate(CurvedAnimation(parent: _animationController, curve: Curves.linear));
+
+    _pulseAnimation = Tween<double>(
+      begin: 1,
+      end: 1.1,
+    ).animate(CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
+
+    _gradientAnimation = Tween<double>(
+      begin: 0,
+      end: 1,
+    ).animate(CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
+
+    _animationController.repeat(reverse: true);
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
     final betaTimelineValue = ref.watch(appSettingsServiceProvider).getSetting<bool>(AppSettingsEnum.betaTimeline);
     final serverInfo = ref.watch(serverInfoProvider);
     final auth = ref.watch(authProvider);
@@ -23,50 +64,168 @@ class BetaTimelineListTile extends ConsumerWidget {
       return const SizedBox.shrink();
     }
 
-    void onSwitchChanged(bool value) {
+    return AnimatedBuilder(
-      showDialog(
+      animation: _animationController,
-        context: context,
+      builder: (context, child) {
-        builder: (context) {
+        void onSwitchChanged(bool value) {
-          return AlertDialog(
+          showDialog(
-            title: value ? const Text("Enable Beta Timeline") : const Text("Disable Beta Timeline"),
+            context: context,
-            content: value
+            builder: (context) {
-                ? const Text("Are you sure you want to enable the beta timeline?")
+              return AlertDialog(
-                : const Text("Are you sure you want to disable the beta timeline?"),
+                title: value ? const Text("Enable Beta Timeline") : const Text("Disable Beta Timeline"),
-            actions: [
+                content: value
-              TextButton(
+                    ? const Text("Are you sure you want to enable the beta timeline?")
-                onPressed: () {
+                    : const Text("Are you sure you want to disable the beta timeline?"),
-                  context.pop();
+                actions: [
-                },
+                  TextButton(
-                child: Text(
+                    onPressed: () {
-                  "cancel".t(context: context),
+                      context.pop();
-                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: context.colorScheme.outline),
+                    },
+                    child: Text(
+                      "cancel".t(context: context),
+                      style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: context.colorScheme.outline),
+                    ),
+                  ),
+                  ElevatedButton(
+                    onPressed: () async {
+                      Navigator.of(context).pop();
+                      context.router.replaceAll([ChangeExperienceRoute(switchingToBeta: value)]);
+                    },
+                    child: Text("ok".t(context: context)),
+                  ),
+                ],
+              );
+            },
+          );
+        }
+
+        final gradientColors = [
+          Color.lerp(
+            context.primaryColor.withValues(alpha: 0.5),
+            context.primaryColor.withValues(alpha: 0.3),
+            _gradientAnimation.value,
+          )!,
+          Color.lerp(
+            context.logoPink.withValues(alpha: 0.2),
+            context.logoPink.withValues(alpha: 0.4),
+            _gradientAnimation.value,
+          )!,
+          Color.lerp(
+            context.logoRed.withValues(alpha: 0.3),
+            context.logoRed.withValues(alpha: 0.5),
+            _gradientAnimation.value,
+          )!,
+        ];
+
+        return Container(
+          margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+          decoration: BoxDecoration(
+            borderRadius: const BorderRadius.all(Radius.circular(12)),
+            gradient: LinearGradient(
+              colors: gradientColors,
+              stops: const [0.0, 0.5, 1.0],
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+              transform: GradientRotation(_rotationAnimation.value * 0.5),
+            ),
+            boxShadow: [
+              BoxShadow(color: context.primaryColor.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2)),
+            ],
+          ),
+          child: Container(
+            margin: const EdgeInsets.all(2),
+            decoration: BoxDecoration(
+              borderRadius: const BorderRadius.all(Radius.circular(10.5)),
+              color: context.scaffoldBackgroundColor,
+            ),
+            child: Material(
+              borderRadius: const BorderRadius.all(Radius.circular(10.5)),
+              child: InkWell(
+                borderRadius: const BorderRadius.all(Radius.circular(10.5)),
+                onTap: () => onSwitchChanged(!betaTimelineValue),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
+                  child: Row(
+                    children: [
+                      Transform.scale(
+                        scale: _pulseAnimation.value,
+                        child: Transform.rotate(
+                          angle: _rotationAnimation.value * 0.02,
+                          child: Container(
+                            padding: const EdgeInsets.all(8),
+                            decoration: BoxDecoration(
+                              shape: BoxShape.circle,
+                              gradient: LinearGradient(
+                                colors: [
+                                  context.primaryColor.withValues(alpha: 0.2),
+                                  context.primaryColor.withValues(alpha: 0.1),
+                                ],
+                              ),
+                            ),
+                            child: Icon(Icons.auto_awesome, color: context.primaryColor, size: 20),
+                          ),
+                        ),
+                      ),
+                      const SizedBox(width: 28),
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Row(
+                              crossAxisAlignment: CrossAxisAlignment.center,
+                              children: [
+                                Text(
+                                  "advanced_settings_beta_timeline_title".t(context: context),
+                                  style: context.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w600),
+                                ),
+                                const SizedBox(width: 8),
+                                Container(
+                                  padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                                  decoration: BoxDecoration(
+                                    borderRadius: const BorderRadius.all(Radius.circular(8)),
+                                    gradient: LinearGradient(
+                                      colors: [
+                                        context.primaryColor.withValues(alpha: 0.8),
+                                        context.primaryColor.withValues(alpha: 0.6),
+                                      ],
+                                    ),
+                                  ),
+                                  child: Text(
+                                    'NEW',
+                                    style: context.textTheme.labelSmall?.copyWith(
+                                      color: Colors.white,
+                                      fontWeight: FontWeight.bold,
+                                      fontSize: 10,
+                                      height: 1.2,
+                                    ),
+                                  ),
+                                ),
+                              ],
+                            ),
+                            const SizedBox(height: 4),
+                            Text(
+                              "advanced_settings_beta_timeline_subtitle".t(context: context),
+                              style: context.textTheme.labelLarge?.copyWith(
+                                color: context.textTheme.labelLarge?.color?.withValues(alpha: 0.9),
+                              ),
+                              maxLines: 2,
+                            ),
+                          ],
+                        ),
+                      ),
+                      Switch.adaptive(
+                        value: betaTimelineValue,
+                        onChanged: onSwitchChanged,
+                        activeColor: context.primaryColor,
+                      ),
+                    ],
+                  ),
                 ),
               ),
-              ElevatedButton(
+            ),
-                onPressed: () async {
+          ),
-                  Navigator.of(context).pop();
+        );
-                  context.router.replaceAll([ChangeExperienceRoute(switchingToBeta: value)]);
+      },
-                },
-                child: Text("ok".t(context: context)),
-              ),
-            ],
-          );
-        },
-      );
-    }
-
-    return Padding(
-      padding: const EdgeInsets.only(left: 4.0),
-      child: ListTile(
-        title: Text("advanced_settings_beta_timeline_title".t(context: context)),
-        subtitle: Text("advanced_settings_beta_timeline_subtitle".t(context: context)),
-        trailing: Switch.adaptive(
-          value: betaTimelineValue,
-          onChanged: onSwitchChanged,
-          activeColor: context.primaryColor,
-        ),
-        onTap: () => onSwitchChanged(!betaTimelineValue),
-      ),
     );
   }
 }

mobile/lib/widgets/shared_link/shared_link_item.dart

@@ -16,7 +16,6 @@ import 'package:immich_mobile/utils/url_helper.dart';
 import 'package:immich_mobile/widgets/common/confirm_dialog.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
 import 'package:immich_mobile/widgets/search/thumbnail_with_info.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 class SharedLinkItem extends ConsumerWidget {
   final SharedLink sharedLink;
@@ -37,7 +36,7 @@ class SharedLinkItem extends ConsumerWidget {
         return Text("expired", style: TextStyle(color: Colors.red[300])).tr();
       }
       final difference = sharedLink.expiresAt!.difference(DateTime.now());
-      dPrint(() => "Difference: $difference");
+      debugPrint("Difference: $difference");
       if (difference.inDays > 0) {
         var dayDifference = difference.inDays;
         if (difference.inHours % 24 > 12) {

mobile/pubspec.lock

@@ -77,10 +77,10 @@ packages:
     dependency: "direct main"
     description:
       name: background_downloader
-      sha256: "9ed74c55750932178f6989ba8a659687c2a102e05b70f561a1b3f047a5dda790"
+      sha256: "2d4c2b7438e7643585880f9cc00ace16a52d778088751f1bfbf714627b315462"
       url: "https://pub.dev"
     source: hosted
-    version: "9.2.5"
+    version: "9.2.0"
   bonsoir:
     dependency: transitive
     description:

mobile/pubspec.yaml

@@ -16,7 +16,7 @@ dependencies:
 
   async: ^2.11.0
   auto_route: ^9.2.0
-  background_downloader: ^9.2.5
+  background_downloader: ^9.2.0
   cached_network_image: ^3.4.1
   cancellation_token_http: ^2.1.0
   cast: ^2.1.0

mobile/test/infrastructure/repositories/sync_api_repository_test.dart

@@ -4,15 +4,12 @@ import 'dart:convert';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:http/http.dart' as http;
 import 'package:immich_mobile/domain/models/sync_event.model.dart';
-import 'package:immich_mobile/domain/services/store.service.dart';
-import 'package:immich_mobile/infrastructure/repositories/store.repository.dart';
 import 'package:immich_mobile/infrastructure/repositories/sync_api.repository.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:openapi/api.dart';
 
 import '../../api.mocks.dart';
 import '../../service.mocks.dart';
-import '../../test_utils.dart';
 
 class MockHttpClient extends Mock implements http.Client {}
 
@@ -36,10 +33,6 @@ void main() {
   late StreamController<List<int>> responseStreamController;
   late int testBatchSize = 3;
 
-  setUpAll(() async {
-    await StoreService.init(storeRepository: IsarStoreRepository(await TestUtils.initIsar()));
-  });
-
   setUp(() {
     mockApiService = MockApiService();
     mockApiClient = MockApiClient();

mobile/test/modules/utils/throttler_test.dart

@@ -1,6 +1,6 @@
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:immich_mobile/utils/throttle.dart';
-import 'package:immich_mobile/utils/debug_print.dart';
 
 class _Counter {
   int _count = 0;
@@ -8,7 +8,7 @@ class _Counter {
 
   int get count => _count;
   void increment() {
-    dPrint(() => "Counter inside increment: $count");
+    debugPrint("Counter inside increment: $count");
     _count = _count + 1;
   }
 }

web/package.json

@@ -9,7 +9,7 @@
     "build:stats": "BUILD_STATS=true vite build",
     "package": "svelte-kit package",
     "preview": "vite preview",
-    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/photos-page/asset-grid.svelte",
+    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings",
     "check:typescript": "tsc --noEmit",
     "check:watch": "npm run check:svelte -- --watch",
     "check:code": "npm run format && npm run lint:p && npm run check:svelte && npm run check:typescript",

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

@@ -48,7 +48,7 @@
         aria-label={$t('show_album_options')}
         icon={mdiDotsVertical}
         shape="round"
-        variant="filled"
+        variant="ghost"
         size="medium"
         class="icon-white-drop-shadow"
         onclick={showAlbumContextMenu}

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

@@ -4,6 +4,7 @@
   import AlbumMap from '$lib/components/album-page/album-map.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import Timeline from '$lib/components/timeline/timeline.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -18,7 +19,6 @@
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import DownloadAction from '../photos-page/actions/download-action.svelte';
-  import AssetGrid from '../photos-page/asset-grid.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
@@ -61,7 +61,7 @@
 />
 
 <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-  <AssetGrid enableRouting={true} {album} {timelineManager} {assetInteraction}>
+  <Timeline enableRouting={true} {album} {timelineManager} {assetInteraction}>
     <section class="pt-8 md:pt-24 px-2 md:px-0">
       <!-- ALBUM TITLE -->
       <h1
@@ -83,7 +83,7 @@
         </p>
       {/if}
     </section>
-  </AssetGrid>
+  </Timeline>
 </main>
 
 <header>

web/src/lib/components/asset-viewer/actions/delete-action.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
-  import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
   import { AssetAction } from '$lib/constants';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { deleteAssets, type AssetResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction, PreAction } from './action';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     asset: AssetResponseDto;

web/src/lib/components/assets/thumbnail/__test__/thumbnail.spec.ts

@@ -45,4 +45,15 @@ describe('Thumbnail component', () => {
     const tabbables = getTabbable(container!);
     expect(tabbables.length).toBe(0);
   });
+
+  it('shows thumbhash while image is loading', () => {
+    const asset = assetFactory.build({ originalPath: 'image.jpg', originalMimeType: 'image/jpeg' });
+    const sut = render(Thumbnail, {
+      asset,
+      selected: true,
+    });
+
+    const thumbhash = sut.getByTestId('thumbhash');
+    expect(thumbhash).not.toBeFalsy();
+  });
 });

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -20,7 +20,6 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
-  import { isCached } from '$lib/utils/cache';
   import { moveFocus } from '$lib/utils/focus-util';
   import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
   import { TUNABLES } from '$lib/utils/tunables';
@@ -76,12 +75,6 @@
     IMAGE_THUMBNAIL: { THUMBHASH_FADE_DURATION },
   } = TUNABLES;
 
-  const thumbnailURL = getAssetThumbnailUrl({
-    id: asset.id,
-    size: AssetMediaSize.Thumbnail,
-    cacheKey: asset.thumbhash,
-  });
-
   let usingMobileDevice = $derived(mobileDevice.pointerCoarse);
   let element: HTMLElement | undefined = $state();
   let mouseOver = $state(false);
@@ -320,7 +313,7 @@
       <ImageThumbnail
         class={imageClass}
         {brokenAssetClass}
-        url={thumbnailURL}
+        url={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
         altText={$getAltText(asset)}
         widthStyle="{width}px"
         heightStyle="{height}px"
@@ -351,31 +344,17 @@
         </div>
       {/if}
 
-      {#if asset.thumbhash}
+      {#if (!loaded || thumbError) && asset.thumbhash}
-        {#await isCached(new Request(thumbnailURL))}
+        <canvas
-          <canvas
+          use:thumbhash={{ base64ThumbHash: asset.thumbhash }}
-            use:thumbhash={{ base64ThumbHash: asset.thumbhash }}
+          data-testid="thumbhash"
-            data-testid="thumbhash"
+          class="absolute top-0 object-cover"
-            class="absolute top-0 object-cover"
+          style:width="{width}px"
-            style:width="{width}px"
+          style:height="{height}px"
-            style:height="{height}px"
+          class:rounded-xl={selected}
-            class:rounded-xl={selected}
+          draggable="false"
-            draggable="false"
+          out:fade={{ duration: THUMBHASH_FADE_DURATION }}
-          ></canvas>
+        ></canvas>
-        {:then cached}
-          {#if !cached && !loaded && !thumbError}
-            <canvas
-              use:thumbhash={{ base64ThumbHash: asset.thumbhash }}
-              data-testid="thumbhash"
-              class="absolute top-0 object-cover"
-              style:width="{width}px"
-              style:height="{height}px"
-              class:rounded-xl={selected}
-              draggable="false"
-              out:fade={{ duration: THUMBHASH_FADE_DURATION }}
-            ></canvas>
-          {/if}
-        {/await}
       {/if}
     </div>
 

web/src/lib/components/faces-page/manage-people-visibility.svelte

@@ -110,7 +110,7 @@
 <svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onClose }} />
 
 <div
-  class="fixed top-0 z-1 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
+  class="fixed top-0 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
 >
   <div class="flex items-center">
     <IconButton

web/src/lib/components/faces-page/people-card.svelte

@@ -64,10 +64,9 @@
   {#if showVerticalDots}
     <div class="absolute top-2 end-2 z-1">
       <ButtonContextMenu
-        buttonClass="icon-white-drop-shadow"
+        buttonClass="icon-white-drop-shadow focus:opacity-100 {showVerticalDots ? 'opacity-100' : 'opacity-0'}"
-        color="secondary"
+        color="primary"
         size="medium"
-        variant="filled"
         icon={mdiDotsVertical}
         title={$t('show_person_options')}
       >

web/src/lib/components/layouts/user-page-layout.svelte

@@ -68,7 +68,7 @@
       <div class="absolute flex h-16 w-full place-items-center justify-between border-b p-2 text-dark">
         <div class="flex gap-2 items-center">
           {#if title}
-            <div class="font-medium outline-none pe-8" tabindex="-1" id={headerId}>{title}</div>
+            <div class="font-medium outline-none" tabindex="-1" id={headerId}>{title}</div>
           {/if}
           {#if description}
             <p class="text-sm text-gray-400 dark:text-gray-600">{description}</p>

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { featureFlags } from '$lib/stores/server-config.store';
   import { type OnDelete, type OnUndoDelete, deleteAssets } from '$lib/utils/actions';
+  import { IconButton } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import DeleteAssetDialog from '../../timeline/actions/delete-asset-dialog.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import DeleteAssetDialog from '../delete-asset-dialog.svelte';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     onAssetDelete: OnDelete;

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -1,254 +0,0 @@
-<script lang="ts">
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
-  import Icon from '$lib/components/elements/icon.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 { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
-  import { uploadAssetsStore } from '$lib/stores/upload';
-  import { navigate } from '$lib/utils/navigation';
-
-  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-
-  import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
-  import type { Snippet } from 'svelte';
-  import { flip } from 'svelte/animate';
-  import { scale } from 'svelte/transition';
-
-  let { isUploading } = uploadAssetsStore;
-
-  interface Props {
-    isSelectionMode: boolean;
-    singleSelect: boolean;
-    withStacked: boolean;
-    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    customLayout?: Snippet<[TimelineAsset]>;
-
-    onSelect: ({ title, assets }: { title: string; assets: TimelineAsset[] }) => void;
-    onSelectAssets: (asset: TimelineAsset) => void;
-    onSelectAssetCandidates: (asset: TimelineAsset | null) => void;
-    onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-    onThumbnailClick?: (
-      asset: TimelineAsset,
-      timelineManager: TimelineManager,
-      dayGroup: DayGroup,
-      onClick: (
-        timelineManager: TimelineManager,
-        assets: TimelineAsset[],
-        groupTitle: string,
-        asset: TimelineAsset,
-      ) => void,
-    ) => void;
-  }
-
-  let {
-    isSelectionMode,
-    singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup = $bindable(),
-    assetInteraction,
-    timelineManager,
-    customLayout,
-    onSelect,
-    onSelectAssets,
-    onSelectAssetCandidates,
-    onScrollCompensation,
-    onThumbnailClick,
-  }: 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);
-  const _onClick = (
-    timelineManager: TimelineManager,
-    assets: TimelineAsset[],
-    groupTitle: string,
-    asset: TimelineAsset,
-  ) => {
-    if (isSelectionMode || assetInteraction.selectionActive) {
-      assetSelectHandler(timelineManager, asset, assets, groupTitle);
-      return;
-    }
-    void navigate({ targetRoute: 'current', assetId: asset.id });
-  };
-
-  const handleSelectGroup = (title: string, assets: TimelineAsset[]) => onSelect({ title, assets });
-
-  const assetSelectHandler = (
-    timelineManager: TimelineManager,
-    asset: TimelineAsset,
-    assetsInDayGroup: TimelineAsset[],
-    groupTitle: string,
-  ) => {
-    onSelectAssets(asset);
-
-    // 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 assetMouseEventHandler = (groupTitle: string, asset: TimelineAsset | null) => {
-    // Show multi select icon on hover on date group
-    hoveredDayGroup = groupTitle;
-
-    if (assetInteraction.selectionActive) {
-      onSelectAssetCandidates(asset);
-    }
-  };
-
-  function filterIntersecting<R extends { intersecting: boolean }>(intersectable: R[]) {
-    return intersectable.filter((int) => int.intersecting);
-  }
-
-  const getDayGroupFullDate = (dayGroup: DayGroup): string => {
-    const { month, year } = dayGroup.monthGroup.yearMonth;
-    const date = fromTimelinePlainDate({
-      year,
-      month,
-      day: dayGroup.day,
-    });
-    return getDateLocaleString(date);
-  };
-
-  $effect.root(() => {
-    if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
-      onScrollCompensation(timelineManager.scrollCompensation);
-      timelineManager.clearScrollCompensation();
-    }
-  });
-</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;
-      assetMouseEventHandler(dayGroup.groupTitle, null);
-    }}
-    onmouseleave={() => {
-      isMouseOverGroup = false;
-      assetMouseEventHandler(dayGroup.groupTitle, 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}
-        <div
-          class="hover:cursor-pointer transition-all duration-200 ease-out overflow-hidden w-0"
-          class:w-8={(hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) ||
-            assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-          onclick={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
-          onkeydown={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
-        >
-          {#if assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-            <Icon path={mdiCheckCircle} size="24" class="text-primary" />
-          {:else}
-            <Icon path={mdiCircleOutline} size="24" color="#757575" />
-          {/if}
-        </div>
-      {/if}
-
-      <span class="w-full truncate first-letter:capitalize" title={getDayGroupFullDate(dayGroup)}>
-        {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!}
-
-        <!-- {#if viewerAsset.intersecting} -->
-        <!-- 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={(asset) => {
-              if (typeof onThumbnailClick === 'function') {
-                onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
-              } else {
-                _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
-              }
-            }}
-            onSelect={(asset) => assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle)}
-            onMouseEvent={() => assetMouseEventHandler(dayGroup.groupTitle, assetSnapshot(asset))}
-            selected={assetInteraction.hasSelectedAsset(asset.id) ||
-              dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
-            selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
-            disabled={dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
-            thumbnailWidth={position.width}
-            thumbnailHeight={position.height}
-          />
-          {#if customLayout}
-            {@render customLayout(asset)}
-          {/if}
-        </div>
-        <!-- {/if} -->
-      {/each}
-    </div>
-  </section>
-{/each}
-
-<style>
-  section {
-    contain: layout paint style;
-  }
-  [data-image-grid] {
-    user-select: none;
-  }
-</style>

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

@@ -0,0 +1,162 @@
+<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

@@ -0,0 +1,73 @@
+<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/change-date.spec.ts

@@ -8,6 +8,9 @@ import ChangeDate from './change-date.svelte';
 describe('ChangeDate component', () => {
   const initialDate = DateTime.fromISO('2024-01-01');
   const initialTimeZone = 'Europe/Berlin';
+  const targetDate = DateTime.fromISO('2024-01-01').setZone('UTC+1', {
+    keepLocalTime: true,
+  });
   const currentInterval = {
     start: DateTime.fromISO('2000-02-01T14:00:00+01:00'),
     end: DateTime.fromISO('2001-02-01T14:00:00+01:00'),
@@ -43,7 +46,11 @@ describe('ChangeDate component', () => {
 
     await fireEvent.click(getConfirmButton());
 
-    expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-01-01T00:00:00.000+01:00' });
+    expect(onConfirm).toHaveBeenCalledWith({
+      mode: 'absolute',
+      date: '2024-01-01T00:00:00.000+01:00',
+      dateTime: targetDate,
+    });
   });
 
   test('calls onCancel on cancel', async () => {
@@ -58,7 +65,9 @@ describe('ChangeDate component', () => {
 
   describe('when date is in daylight saving time', () => {
     const dstDate = DateTime.fromISO('2024-07-01');
-
+    const targetDate = DateTime.fromISO('2024-07-01').setZone('UTC+2', {
+      keepLocalTime: true,
+    });
     test('should render correct timezone with offset', () => {
       render(ChangeDate, { initialDate: dstDate, initialTimeZone, onCancel, onConfirm });
 
@@ -72,7 +81,11 @@ describe('ChangeDate component', () => {
 
       await fireEvent.click(getConfirmButton());
 
-      expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-07-01T00:00:00.000+02:00' });
+      expect(onConfirm).toHaveBeenCalledWith({
+        mode: 'absolute',
+        date: '2024-07-01T00:00:00.000+02:00',
+        dateTime: targetDate,
+      });
     });
   });
 

web/src/lib/components/shared-components/change-date.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
-  import { ConfirmModal } from '@immich/ui';
+  import { locale } from '$lib/stores/preferences.store';
-  import { mdiCalendarEditOutline } from '@mdi/js';
+  import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util.js';
+  import { ConfirmModal, Field, Switch } from '@immich/ui';
+  import { mdiCalendarEdit } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
-  import DateInput from '../elements/date-input.svelte';
-  import Combobox, { type ComboBoxOption } from './combobox.svelte';
-  import DurationInput from '../elements/duration-input.svelte';
-  import { Field, Switch } from '@immich/ui';
-  import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util.js';
-  import { locale } from '$lib/stores/preferences.store';
   import { get } from 'svelte/store';
+  import DateInput from '../elements/date-input.svelte';
+  import DurationInput from '../elements/duration-input.svelte';
+  import Combobox, { type ComboBoxOption } from './combobox.svelte';
 
   interface Props {
     title?: string;
@@ -18,6 +17,8 @@
     timezoneInput?: boolean;
     withDuration?: boolean;
     currentInterval?: { start: DateTime; end: DateTime };
+    icon?: string;
+    confirmText?: string;
     onCancel: () => void;
     onConfirm: (result: AbsoluteResult | RelativeResult) => void;
   }
@@ -29,6 +30,8 @@
     timezoneInput = true,
     withDuration = true,
     currentInterval = undefined,
+    icon = mdiCalendarEdit,
+    confirmText,
     onCancel,
     onConfirm,
   }: Props = $props();
@@ -36,6 +39,7 @@
   export type AbsoluteResult = {
     mode: 'absolute';
     date: string;
+    dateTime: DateTime<true>;
   };
 
   export type RelativeResult = {
@@ -192,9 +196,13 @@
       const fixedOffsetZone = `UTC${offsetMinutes >= 0 ? '+' : ''}${Duration.fromObject({ minutes: offsetMinutes }).toFormat('hh:mm')}`;
 
       // Create a DateTime object in this fixed-offset zone, preserving the local time.
-      const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone });
+      const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone }) as DateTime<true>;
 
-      onConfirm({ mode: 'absolute', date: finalDateTime.toISO({ includeOffset: true })! });
+      onConfirm({
+        mode: 'absolute',
+        date: finalDateTime.toISO({ includeOffset: true }),
+        dateTime: finalDateTime,
+      });
     }
 
     if (showRelative && (selectedDuration || selectedRelativeOption)) {
@@ -238,7 +246,8 @@
 <ConfirmModal
   confirmColor="primary"
   {title}
-  icon={mdiCalendarEditOutline}
+  {icon}
+  {confirmText}
   prompt="Please select a new date:"
   disabled={!date.isValid}
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}

web/src/lib/components/shared-components/context-menu/context-menu.svelte

@@ -40,8 +40,6 @@
   // of zero when starting the 'slide' animation.
   let height: number = $state(0);
 
-  let isTransitioned = $state(false);
-
   $effect(() => {
     if (menuElement) {
       let layoutDirection = direction;
@@ -66,12 +64,6 @@
   style:top="{top}px"
   transition:slide={{ duration: 250, easing: quintOut }}
   use:clickOutside={{ onOutclick: onClose }}
-  onintroend={() => {
-    isTransitioned = true;
-  }}
-  onoutrostart={() => {
-    isTransitioned = false;
-  }}
 >
   <ul
     {id}
@@ -81,9 +73,7 @@
     bind:this={menuElement}
     class="{isVisible
       ? 'max-h-dvh'
-      : 'max-h-0'} flex flex-col transition-all duration-250 ease-in-out outline-none {isTransitioned
+      : 'max-h-0'} flex flex-col transition-all duration-250 ease-in-out outline-none overflow-auto"
-      ? 'overflow-auto'
-      : ''}"
     role="menu"
     tabindex="-1"
   >

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -23,7 +23,8 @@
   import { debounce } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-  import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
+
+  import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
   import Portal from '../portal/portal.svelte';
 
   interface Props {

web/src/lib/components/shared-components/map/map.svelte

@@ -353,7 +353,7 @@
           <div
             class="rounded-full w-[40px] h-[40px] bg-immich-primary text-white flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
           >
-            {feature.properties?.point_count?.toLocaleString()}
+            {feature.properties?.point_count}
           </div>
         {/snippet}
       </MarkerLayer>

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

@@ -0,0 +1,225 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
+  import {
+    setFocusToAsset as setFocusAssetInit,
+    setFocusTo as setFocusToInit,
+  } from '$lib/components/photos-page/actions/focus-actions';
+  import ChangeDate, {
+    type AbsoluteResult,
+    type RelativeResult,
+  } from '$lib/components/shared-components/change-date.svelte';
+  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 { mdiCalendarBlankOutline } from '@mdi/js';
+  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}
+  <ChangeDate
+    withDuration={false}
+    icon={mdiCalendarBlankOutline}
+    confirmText={$t('navigate')}
+    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

@@ -0,0 +1,318 @@
+<script lang="ts">
+  import { afterNavigate, beforeNavigate } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
+  import Hmr from '$lib/components/timeline/base-components/hmr.svelte';
+  import Skeleton from '$lib/components/timeline/base-components/skeleton.svelte';
+  import SelectableTimelineMonth from '$lib/components/timeline/internal-components/selectable-timeline-month.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>
+
+<Hmr
+  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

@@ -0,0 +1,200 @@
+<script lang="ts">
+  import BaseTimelineViewer from '$lib/components/timeline/base-components/base-timeline-viewer.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';
+  import Scrubber from './scrubber.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
+  {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/hmr.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { UpdatePayload } from 'vite';
+
+  interface Props {
+    onAfterUpdate: (payload: UpdatePayload) => void;
+  }
+  let { onAfterUpdate }: Props = $props();
+
+  onMount(() => {
+    if (import.meta && import.meta.hot) {
+      import.meta.hot.on('vite:afterUpdate', onAfterUpdate);
+      return () => import.meta.hot && import.meta.hot.off('vite:afterUpdate', onAfterUpdate);
+    }
+  });
+</script>

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

@@ -4,25 +4,38 @@
   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 } from '$lib/utils/timeline-util';
+  import { type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
   import { mdiPlay } from '@mdi/js';
   import { clamp } from 'lodash-es';
   import { onMount } from 'svelte';
   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;
-    scrubOverallPercent?: number;
+    /** Overall scroll percentage through the entire timeline (0-1), used when no specific month is targeted */
-    scrubberMonthPercent?: number;
+    timelineScrollPercent?: number;
-    scrubberMonth?: { year: number; month: number };
+    /** The percentage of scroll through the month that is currently intersecting the top boundary of the viewport */
-    leadout?: boolean;
+    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) */
     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;
   }
 
@@ -31,10 +44,10 @@
     timelineBottomOffset = 0,
     height = 0,
     timelineManager,
-    scrubOverallPercent = 0,
+    timelineScrollPercent = 0,
-    scrubberMonthPercent = 0,
+    viewportTopMonthScrollPercent = 0,
-    scrubberMonth = undefined,
+    viewportTopMonth = undefined,
-    leadout = false,
+    isInLeadOutSection = false,
     onScrub = undefined,
     onScrubKeyDown = undefined,
     startScrub = undefined,
@@ -100,7 +113,7 @@
         offset += scrubberMonthPercent * relativeBottomOffset;
       }
       return offset;
-    } else if (leadout) {
+    } else if (isInLeadOutSection) {
       let offset = relativeTopOffset;
       for (const segment of segments) {
         offset += segment.height;
@@ -111,7 +124,9 @@
       return scrubOverallPercent * (height - (PADDING_TOP + PADDING_BOTTOM));
     }
   };
-  let scrollY = $derived(toScrollFromMonthGroupPercentage(scrubberMonth, scrubberMonthPercent, scrubOverallPercent));
+  let scrollY = $derived(
+    toScrollFromMonthGroupPercentage(viewportTopMonth, viewportTopMonthScrollPercent, timelineScrollPercent),
+  );
   let timelineFullHeight = $derived(timelineManager.scrubberTimelineHeight + timelineTopOffset + timelineBottomOffset);
   let relativeTopOffset = $derived(toScrollY(timelineTopOffset / timelineFullHeight));
   let relativeBottomOffset = $derived(toScrollY(timelineBottomOffset / timelineFullHeight));
@@ -295,12 +310,24 @@
 
     const scrollPercent = toTimelineY(hoverY);
     if (wasDragging === false && isDragging) {
-      void startScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
+      void startScrub?.({
-      void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
+        scrubberMonth: segmentDate!,
+        overallScrollPercent: scrollPercent,
+        scrubberMonthScrollPercent: monthGroupPercentY,
+      });
+      void onScrub?.({
+        scrubberMonth: segmentDate!,
+        overallScrollPercent: scrollPercent,
+        scrubberMonthScrollPercent: monthGroupPercentY,
+      });
     }
 
     if (wasDragging && !isDragging) {
-      void stopScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
+      void stopScrub?.({
+        scrubberMonth: segmentDate!,
+        overallScrollPercent: scrollPercent,
+        scrubberMonthScrollPercent: monthGroupPercentY,
+      });
       return;
     }
 
@@ -308,7 +335,11 @@
       return;
     }
 
-    void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
+    void onScrub?.({
+      scrubberMonth: segmentDate!,
+      overallScrollPercent: scrollPercent,
+      scrubberMonthScrollPercent: monthGroupPercentY,
+    });
   };
   /* eslint-disable tscompat/tscompat */
   const getTouch = (event: TouchEvent) => {
@@ -412,7 +443,11 @@
       }
       if (next) {
         event.preventDefault();
-        void onScrub?.({ year: next.year, month: next.month }, -1, 0);
+        void onScrub?.({
+          scrubberMonth: { year: next.year, month: next.month },
+          overallScrollPercent: -1,
+          scrubberMonthScrollPercent: 0,
+        });
         return true;
       }
     }
@@ -422,7 +457,11 @@
         const next = segments[idx + 1];
         if (next) {
           event.preventDefault();
-          void onScrub?.({ year: next.year, month: next.month }, -1, 0);
+          void onScrub?.({
+            scrubberMonth: { year: next.year, month: next.month },
+            overallScrollPercent: -1,
+            scrubberMonthScrollPercent: 0,
+          });
           return true;
         }
       }

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

@@ -13,11 +13,7 @@
   >
     {title}
   </div>
-  <div
+  <div class="animate-pulse absolute h-full w-full" data-skeleton="true"></div>
-    class="animate-pulse absolute h-full ms-[10px] me-[10px]"
-    style:width="calc(100% - 20px)"
-    data-skeleton="true"
-  ></div>
 </div>
 
 <style>

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

@@ -0,0 +1,181 @@
+<script lang="ts">
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import Icon from '$lib/components/elements/icon.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 { 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 path={mdiCheckCircle} size="24" class="text-primary" />
+          {:else}
+            <Icon path={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

@@ -0,0 +1,276 @@
+<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

@@ -0,0 +1,176 @@
+<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;
+  }
+
+  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/components/timeline/timeline.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import TimelineKeyboardActions from '$lib/components/timeline/actions/timeline-keyboard-actions.svelte';
+  import BaseTimeline from '$lib/components/timeline/base-components/base-timeline.svelte';
+  import TimelineAssetViewer from '$lib/components/timeline/internal-components/timeline-asset-viewer.svelte';
+  import type { AssetAction } from '$lib/constants';
+  import type { DayGroup } from '$lib/managers/timeline-manager/day-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 { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import type { AlbumResponseDto, PersonResponseDto } from '@immich/sdk';
+  import type { Snippet } from 'svelte';
+
+  let { isViewing: showAssetViewer } = assetViewingStore;
+
+  interface Props {
+    customThumbnailLayout?: Snippet<[TimelineAsset]>;
+    isSelectionMode?: boolean;
+    singleSelect?: boolean;
+    /** `true` if this asset grid is 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;
+    removeAction?:
+      | AssetAction.UNARCHIVE
+      | AssetAction.ARCHIVE
+      | AssetAction.FAVORITE
+      | AssetAction.UNFAVORITE
+      | AssetAction.SET_VISIBILITY_TIMELINE;
+    withStacked?: boolean;
+    showArchiveIcon?: boolean;
+    isShared?: boolean;
+    album?: AlbumResponseDto | null;
+    person?: PersonResponseDto | null;
+    isShowDeleteConfirmation?: boolean;
+    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
+    onSelect?: (asset: TimelineAsset) => void;
+    onEscape?: () => void;
+    children?: Snippet;
+    empty?: Snippet;
+  }
+
+  let {
+    customThumbnailLayout,
+    isSelectionMode = false,
+    singleSelect = false,
+    enableRouting,
+    timelineManager = $bindable(),
+    assetInteraction,
+    removeAction,
+    withStacked = false,
+    showArchiveIcon = false,
+    isShared = false,
+    album = null,
+    person = null,
+    isShowDeleteConfirmation = $bindable(false),
+    onAssetOpen,
+    onSelect = () => {},
+    onEscape = () => {},
+    children,
+    empty,
+  }: Props = $props();
+
+  let viewer: BaseTimeline | undefined = $state();
+  let showSkeleton: boolean = $state(true);
+</script>
+
+<BaseTimeline
+  bind:this={viewer}
+  {customThumbnailLayout}
+  {isSelectionMode}
+  {singleSelect}
+  {enableRouting}
+  {timelineManager}
+  {assetInteraction}
+  {withStacked}
+  {showArchiveIcon}
+  {isShowDeleteConfirmation}
+  {showSkeleton}
+  {onAssetOpen}
+  {onSelect}
+  {children}
+  {empty}
+/>
+
+<TimelineKeyboardActions
+  scrollToAsset={(asset) => viewer?.scrollToAsset(asset) ?? false}
+  {timelineManager}
+  {assetInteraction}
+  bind:isShowDeleteConfirmation
+  {onEscape}
+/>
+
+<Portal target="body">
+  {#if $showAssetViewer}
+    <TimelineAssetViewer bind:showSkeleton {timelineManager} {removeAction} {withStacked} {isShared} {album} {person} />
+  {/if}
+</Portal>

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

@@ -13,6 +13,7 @@ export class DayGroup {
   readonly monthGroup: MonthGroup;
   readonly index: number;
   readonly groupTitle: string;
+  readonly groupTitleFull: string;
   readonly day: number;
   viewerAssets: ViewerAsset[] = $state([]);
 
@@ -26,11 +27,12 @@ export class DayGroup {
   #col = $state(0);
   #deferredLayout = false;
 
-  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string) {
+  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string, groupTitleFull: 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,3 +143,24 @@ 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;
+}