feat: remove Cache API, rework preload(), cancel() and fetch()

perf - replace broadcast channel with direct postMessage

.github/workflows/docs-deploy.yml

@@ -131,7 +131,7 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup Mise
-        uses: immich-app/devtools/actions/use-mise@b868e6e7c8cc212beec876330b4059e661ee44bb # use-mise-action-v1.1.1
+        uses: immich-app/devtools/actions/use-mise@cd24790a7f5f6439ac32cc94f5523cb2de8bfa8c # use-mise-action-v1.1.0
 
       - name: Load parameters
         id: parameters

.github/workflows/docs-destroy.yml

@@ -29,7 +29,7 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup Mise
-        uses: immich-app/devtools/actions/use-mise@b868e6e7c8cc212beec876330b4059e661ee44bb # use-mise-action-v1.1.1
+        uses: immich-app/devtools/actions/use-mise@cd24790a7f5f6439ac32cc94f5523cb2de8bfa8c # use-mise-action-v1.1.0
 
       - name: Destroy Docs Subdomain
         env:

.github/workflows/test.yml

@@ -502,7 +502,12 @@ jobs:
       - name: Run e2e tests (web)
         env:
           CI: true
-        run: npx playwright test
+        run: npx playwright test --project=chromium
+        if: ${{ !cancelled() }}
+      - name: Run ui tests (web)
+        env:
+          CI: true
+        run: npx playwright test --project=ui
         if: ${{ !cancelled() }}
       - name: Archive test results
         uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0

e2e/playwright.config.ts

@@ -39,13 +39,13 @@ const config: PlaywrightTestConfig = {
       testMatch: /.*\.e2e-spec\.ts/,
       workers: 1,
     },
-    // {
-    //   name: 'parallel tests',
-    //   use: { ...devices['Desktop Chrome'] },
-    //   testMatch: /.*\.parallel-e2e-spec\.ts/,
-    //   fullyParallel: true,
-    //   workers: process.env.CI ? 3 : Math.max(1, Math.round(cpus().length * 0.75) - 1),
-    // },
+    {
+      name: 'ui',
+      use: { ...devices['Desktop Chrome'] },
+      testMatch: /.*\.ui-spec\.ts/,
+      fullyParallel: true,
+      workers: process.env.CI ? 3 : Math.max(1, Math.round(cpus().length * 0.75) - 1),
+    },
 
     // {
     //   name: 'firefox',

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

@@ -30,3 +30,8 @@ class MultiSelectToggleEvent extends Event {
   final bool isEnabled;
   const MultiSelectToggleEvent(this.isEnabled);
 }
+
+// Map Events
+class MapMarkerReloadEvent extends Event {
+  const MapMarkerReloadEvent();
+}

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

@@ -1,5 +1,6 @@
 import 'package:immich_mobile/domain/models/map.model.dart';
 import 'package:immich_mobile/infrastructure/repositories/map.repository.dart';
+import 'package:immich_mobile/infrastructure/repositories/timeline.repository.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 
 typedef MapMarkerSource = Future<List<Marker>> Function(LatLngBounds? bounds);
@@ -11,7 +12,8 @@ class MapFactory {
 
   const MapFactory({required DriftMapRepository mapRepository}) : _mapRepository = mapRepository;
 
-  MapService remote(String ownerId) => MapService(_mapRepository.remote(ownerId));
+  MapService remote(List<String> ownerIds, TimelineMapOptions options) =>
+      MapService(_mapRepository.remote(ownerIds, options));
 }
 
 class MapService {

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

@@ -11,7 +11,6 @@ import 'package:immich_mobile/domain/services/setting.service.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/infrastructure/repositories/timeline.repository.dart';
 import 'package:immich_mobile/utils/async_mutex.dart';
-import 'package:maplibre_gl/maplibre_gl.dart';
 
 typedef TimelineAssetSource = Future<List<BaseAsset>> Function(int index, int count);
 
@@ -82,8 +81,8 @@ class TimelineFactory {
   TimelineService fromAssetsWithBuckets(List<BaseAsset> assets, TimelineOrigin type) =>
       TimelineService(_timelineRepository.fromAssetsWithBuckets(assets, type));
 
-  TimelineService map(String userId, LatLngBounds bounds) =>
-      TimelineService(_timelineRepository.map(userId, bounds, groupBy));
+  TimelineService map(List<String> userIds, TimelineMapOptions options) =>
+      TimelineService(_timelineRepository.map(userIds, options, groupBy));
 }
 
 class TimelineService {

mobile/lib/domain/utils/background_sync.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 
+import 'package:immich_mobile/domain/utils/migrate_cloud_ids.dart' as m;
 import 'package:immich_mobile/domain/utils/sync_linked_album.dart';
 import 'package:immich_mobile/providers/infrastructure/sync.provider.dart';
 import 'package:immich_mobile/utils/isolate.dart';
@@ -22,8 +23,13 @@ class BackgroundSyncManager {
   final SyncCallback? onHashingComplete;
   final SyncErrorCallback? onHashingError;
 
+  final SyncCallback? onCloudIdSyncStart;
+  final SyncCallback? onCloudIdSyncComplete;
+  final SyncErrorCallback? onCloudIdSyncError;
+
   Cancelable<bool?>? _syncTask;
   Cancelable<void>? _syncWebsocketTask;
+  Cancelable<void>? _cloudIdSyncTask;
   Cancelable<void>? _deviceAlbumSyncTask;
   Cancelable<void>? _linkedAlbumSyncTask;
   Cancelable<void>? _hashTask;
@@ -38,6 +44,9 @@ class BackgroundSyncManager {
     this.onHashingStart,
     this.onHashingComplete,
     this.onHashingError,
+    this.onCloudIdSyncStart,
+    this.onCloudIdSyncComplete,
+    this.onCloudIdSyncError,
   });
 
   Future<void> cancel() async {
@@ -55,6 +64,12 @@ class BackgroundSyncManager {
     _syncWebsocketTask?.cancel();
     _syncWebsocketTask = null;
 
+    if (_cloudIdSyncTask != null) {
+      futures.add(_cloudIdSyncTask!.future);
+    }
+    _cloudIdSyncTask?.cancel();
+    _cloudIdSyncTask = null;
+
     if (_linkedAlbumSyncTask != null) {
       futures.add(_linkedAlbumSyncTask!.future);
     }
@@ -201,6 +216,25 @@ class BackgroundSyncManager {
       _linkedAlbumSyncTask = null;
     });
   }
+
+  Future<void> syncCloudIds() {
+    if (_cloudIdSyncTask != null) {
+      return _cloudIdSyncTask!.future;
+    }
+
+    onCloudIdSyncStart?.call();
+
+    _cloudIdSyncTask = runInIsolateGentle(computation: m.syncCloudIds);
+    return _cloudIdSyncTask!
+        .whenComplete(() {
+          onCloudIdSyncComplete?.call();
+          _cloudIdSyncTask = null;
+        })
+        .catchError((error) {
+          onCloudIdSyncError?.call(error.toString());
+          _cloudIdSyncTask = null;
+        });
+  }
 }
 
 Cancelable<void> _handleWsAssetUploadReadyV1Batch(List<dynamic> batchData) => runInIsolateGentle(

mobile/lib/domain/utils/migrate_cloud_ids.dart

@@ -10,13 +10,14 @@ import 'package:immich_mobile/infrastructure/repositories/local_album.repository
 import 'package:immich_mobile/platform/native_sync_api.g.dart';
 import 'package:immich_mobile/providers/api.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/sync.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:logging/logging.dart';
 // ignore: import_rule_openapi
 import 'package:openapi/api.dart' hide AssetVisibility;
 
-Future<void> syncCloudIds(Ref ref) async {
+Future<void> syncCloudIds(ProviderContainer ref) async {
   if (!CurrentPlatform.isIOS) {
     return;
   }
@@ -34,6 +35,14 @@ Future<void> syncCloudIds(Ref ref) async {
   }
   final canBulkUpdateMetadata = serverInfo.serverVersion.isAtLeast(major: 2, minor: 5);
 
+  // Wait for remote sync to complete, so we have up-to-date asset metadata entries
+  try {
+    await ref.read(syncStreamServiceProvider).sync();
+  } catch (e, s) {
+    logger.fine('Failed to complete remote sync before cloudId migration.', e, s);
+    return;
+  }
+
   // Fetch the mapping for backed up assets that have a cloud ID locally but do not have a cloud ID on the server
   final currentUser = ref.read(currentUserProvider);
   if (currentUser == null) {

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

@@ -5,6 +5,7 @@ import 'package:immich_mobile/domain/services/map.service.dart';
 import 'package:immich_mobile/infrastructure/entities/exif.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/repositories/db.repository.dart';
+import 'package:immich_mobile/infrastructure/repositories/timeline.repository.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 
 class DriftMapRepository extends DriftDatabaseRepository {
@@ -12,9 +13,27 @@ class DriftMapRepository extends DriftDatabaseRepository {
 
   const DriftMapRepository(super._db) : _db = _db;
 
-  MapQuery remote(String ownerId) => _mapQueryBuilder(
-    assetFilter: (row) =>
-        row.deletedAt.isNull() & row.visibility.equalsValue(AssetVisibility.timeline) & row.ownerId.equals(ownerId),
+  MapQuery remote(List<String> ownerIds, TimelineMapOptions options) => _mapQueryBuilder(
+    assetFilter: (row) {
+      Expression<bool> condition =
+          row.deletedAt.isNull() &
+          row.ownerId.isIn(ownerIds) &
+          _db.remoteAssetEntity.visibility.isIn([
+            AssetVisibility.timeline.index,
+            if (options.includeArchived) AssetVisibility.archive.index,
+          ]);
+
+      if (options.onlyFavorites) {
+        condition = condition & _db.remoteAssetEntity.isFavorite.equals(true);
+      }
+
+      if (options.relativeDays != 0) {
+        final cutoffDate = DateTime.now().toUtc().subtract(Duration(days: options.relativeDays));
+        condition = condition & _db.remoteAssetEntity.createdAt.isBiggerOrEqualValue(cutoffDate);
+      }
+
+      return condition;
+    },
   );
 
   MapQuery _mapQueryBuilder({Expression<bool> Function($RemoteAssetEntityTable row)? assetFilter}) {

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

@@ -15,6 +15,22 @@ import 'package:immich_mobile/infrastructure/repositories/map.repository.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 import 'package:stream_transform/stream_transform.dart';
 
+class TimelineMapOptions {
+  final LatLngBounds bounds;
+  final bool onlyFavorites;
+  final bool includeArchived;
+  final bool withPartners;
+  final int relativeDays;
+
+  const TimelineMapOptions({
+    required this.bounds,
+    this.onlyFavorites = false,
+    this.includeArchived = false,
+    this.withPartners = false,
+    this.relativeDays = 0,
+  });
+}
+
 class DriftTimelineRepository extends DriftDatabaseRepository {
   final Drift _db;
 
@@ -467,15 +483,15 @@ class DriftTimelineRepository extends DriftDatabaseRepository {
     return query.map((row) => row.readTable(_db.remoteAssetEntity).toDto()).get();
   }
 
-  TimelineQuery map(String userId, LatLngBounds bounds, GroupAssetsBy groupBy) => (
-    bucketSource: () => _watchMapBucket(userId, bounds, groupBy: groupBy),
-    assetSource: (offset, count) => _getMapBucketAssets(userId, bounds, offset: offset, count: count),
+  TimelineQuery map(List<String> userIds, TimelineMapOptions options, GroupAssetsBy groupBy) => (
+    bucketSource: () => _watchMapBucket(userIds, options, groupBy: groupBy),
+    assetSource: (offset, count) => _getMapBucketAssets(userIds, options, offset: offset, count: count),
     origin: TimelineOrigin.map,
   );
 
   Stream<List<Bucket>> _watchMapBucket(
-    String userId,
-    LatLngBounds bounds, {
+    List<String> userId,
+    TimelineMapOptions options, {
     GroupAssetsBy groupBy = GroupAssetsBy.day,
   }) {
     if (groupBy == GroupAssetsBy.none) {
@@ -496,14 +512,26 @@ class DriftTimelineRepository extends DriftDatabaseRepository {
         ),
       ])
       ..where(
-        _db.remoteAssetEntity.ownerId.equals(userId) &
-            _db.remoteExifEntity.inBounds(bounds) &
-            _db.remoteAssetEntity.visibility.equalsValue(AssetVisibility.timeline) &
+        _db.remoteAssetEntity.ownerId.isIn(userId) &
+            _db.remoteExifEntity.inBounds(options.bounds) &
+            _db.remoteAssetEntity.visibility.isIn([
+              AssetVisibility.timeline.index,
+              if (options.includeArchived) AssetVisibility.archive.index,
+            ]) &
             _db.remoteAssetEntity.deletedAt.isNull(),
       )
       ..groupBy([dateExp])
       ..orderBy([OrderingTerm.desc(dateExp)]);
 
+    if (options.onlyFavorites) {
+      query.where(_db.remoteAssetEntity.isFavorite.equals(true));
+    }
+
+    if (options.relativeDays != 0) {
+      final cutoffDate = DateTime.now().toUtc().subtract(Duration(days: options.relativeDays));
+      query.where(_db.remoteAssetEntity.createdAt.isBiggerOrEqualValue(cutoffDate));
+    }
+
     return query.map((row) {
       final timeline = row.read(dateExp)!.truncateDate(groupBy);
       final assetCount = row.read(assetCountExp)!;
@@ -512,8 +540,8 @@ class DriftTimelineRepository extends DriftDatabaseRepository {
   }
 
   Future<List<BaseAsset>> _getMapBucketAssets(
-    String userId,
-    LatLngBounds bounds, {
+    List<String> userId,
+    TimelineMapOptions options, {
     required int offset,
     required int count,
   }) {
@@ -526,13 +554,26 @@ class DriftTimelineRepository extends DriftDatabaseRepository {
             ),
           ])
           ..where(
-            _db.remoteAssetEntity.ownerId.equals(userId) &
-                _db.remoteExifEntity.inBounds(bounds) &
-                _db.remoteAssetEntity.visibility.equalsValue(AssetVisibility.timeline) &
+            _db.remoteAssetEntity.ownerId.isIn(userId) &
+                _db.remoteExifEntity.inBounds(options.bounds) &
+                _db.remoteAssetEntity.visibility.isIn([
+                  AssetVisibility.timeline.index,
+                  if (options.includeArchived) AssetVisibility.archive.index,
+                ]) &
                 _db.remoteAssetEntity.deletedAt.isNull(),
           )
           ..orderBy([OrderingTerm.desc(_db.remoteAssetEntity.createdAt)])
           ..limit(count, offset: offset);
+
+    if (options.onlyFavorites) {
+      query.where(_db.remoteAssetEntity.isFavorite.equals(true));
+    }
+
+    if (options.relativeDays != 0) {
+      final cutoffDate = DateTime.now().toUtc().subtract(Duration(days: options.relativeDays));
+      query.where(_db.remoteAssetEntity.createdAt.isBiggerOrEqualValue(cutoffDate));
+    }
+
     return query.map((row) => row.readTable(_db.remoteAssetEntity).toDto()).get();
   }
 

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

@@ -75,6 +75,7 @@ class SplashScreenPageState extends ConsumerState<SplashScreenPage> {
                       _resumeBackup(backupProvider);
                     }),
                     _resumeBackup(backupProvider),
+                    backgroundManager.syncCloudIds(),
                   ]);
                 } else {
                   await backgroundManager.hashAssets();

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

@@ -2,6 +2,7 @@ import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/map/map.widget.dart';
+import 'package:immich_mobile/presentation/widgets/map/map_settings_sheet.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 
 @RoutePage()
@@ -10,6 +11,16 @@ class DriftMapPage extends StatelessWidget {
 
   const DriftMapPage({super.key, this.initialLocation});
 
+  void onSettingsPressed(BuildContext context) {
+    showModalBottomSheet(
+      elevation: 0.0,
+      showDragHandle: true,
+      isScrollControlled: true,
+      context: context,
+      builder: (_) => const DriftMapSettingsSheet(),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -18,8 +29,8 @@ class DriftMapPage extends StatelessWidget {
         children: [
           DriftMap(initialLocation: initialLocation),
           Positioned(
-            left: 16,
-            top: 60,
+            left: 20,
+            top: 70,
             child: IconButton.filled(
               color: Colors.white,
               onPressed: () => context.pop(),
@@ -32,6 +43,21 @@ class DriftMapPage extends StatelessWidget {
               ),
             ),
           ),
+          Positioned(
+            right: 20,
+            top: 70,
+            child: IconButton.filled(
+              color: Colors.white,
+              onPressed: () => onSettingsPressed(context),
+              icon: const Icon(Icons.more_vert_rounded),
+              style: IconButton.styleFrom(
+                padding: const EdgeInsets.all(8),
+                backgroundColor: Colors.indigo,
+                shadowColor: Colors.black26,
+                elevation: 4,
+              ),
+            ),
+          ),
         ],
       ),
     );

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

@@ -118,7 +118,6 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   bool dragInProgress = false;
   bool shouldPopOnDrag = false;
   bool assetReloadRequested = false;
-  double? initialScale;
   double previousExtent = _kBottomSheetMinimumExtent;
   Offset dragDownPosition = Offset.zero;
   int totalAssets = 0;
@@ -264,7 +263,6 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
           (context.height * bottomSheetController.size) - (context.height * _kBottomSheetMinimumExtent);
       controller.position = Offset(0, -verticalOffset);
       // Apply the zoom effect when the bottom sheet is showing
-      initialScale = controller.scale;
       controller.scale = (controller.scale ?? 1.0) + 0.01;
     }
   }
@@ -316,7 +314,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     hasDraggedDown = null;
     viewController?.animateMultiple(
       position: initialPhotoViewState.position,
-      scale: initialPhotoViewState.scale,
+      scale: viewController?.initialScale ?? initialPhotoViewState.scale,
       rotation: initialPhotoViewState.rotation,
     );
     ref.read(assetViewerProvider.notifier).setOpacity(255);
@@ -366,8 +364,9 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     final maxScaleDistance = ctx.height * 0.5;
     final scaleReduction = (distance / maxScaleDistance).clamp(0.0, dragRatio);
     double? updatedScale;
-    if (initialPhotoViewState.scale != null) {
-      updatedScale = initialPhotoViewState.scale! * (1.0 - scaleReduction);
+    double? initialScale = viewController?.initialScale ?? initialPhotoViewState.scale;
+    if (initialScale != null) {
+      updatedScale = initialScale * (1.0 - scaleReduction);
     }
 
     final backgroundOpacity = (255 * (1.0 - (scaleReduction / dragRatio))).round();
@@ -481,8 +480,6 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
   void _openBottomSheet(BuildContext ctx, {double extent = _kBottomSheetMinimumExtent, bool activitiesMode = false}) {
     ref.read(assetViewerProvider.notifier).setBottomSheet(true);
-    initialScale = viewController?.scale;
-    // viewController?.updateMultiple(scale: (viewController?.scale ?? 1.0) + 0.01);
     previousExtent = _kBottomSheetMinimumExtent;
     sheetCloseController = showBottomSheet(
       context: ctx,
@@ -504,7 +501,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
   void _handleSheetClose() {
     viewController?.animateMultiple(position: Offset.zero);
-    viewController?.updateMultiple(scale: initialScale);
+    viewController?.updateMultiple(scale: viewController?.initialScale);
     ref.read(assetViewerProvider.notifier).setBottomSheet(false);
     sheetCloseController = null;
     shouldPopOnDrag = false;

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

@@ -14,7 +14,7 @@ class MapBottomSheet extends StatelessWidget {
   Widget build(BuildContext context) {
     return BaseBottomSheet(
       initialChildSize: 0.25,
-      maxChildSize: 0.9,
+      maxChildSize: 0.75,
       shouldCloseOnMinExtent: false,
       resizeOnScroll: false,
       actions: [],
@@ -38,8 +38,13 @@ class _ScopedMapTimeline extends StatelessWidget {
             throw Exception('User must be logged in to access archive');
           }
 
-          final bounds = ref.watch(mapStateProvider).bounds;
-          final timelineService = ref.watch(timelineFactoryProvider).map(user.id, bounds);
+          final users = ref.watch(mapStateProvider).withPartners
+              ? ref.watch(timelineUsersProvider).valueOrNull ?? [user.id]
+              : [user.id];
+
+          final timelineService = ref
+              .watch(timelineFactoryProvider)
+              .map(users, ref.watch(mapStateProvider).toOptions());
           ref.onDispose(timelineService.dispose);
           return timelineService;
         }),

mobile/lib/presentation/widgets/map/map.state.dart

@@ -1,11 +1,30 @@
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/infrastructure/repositories/timeline.repository.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/map.provider.dart';
+import 'package:immich_mobile/providers/map/map_state.provider.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 
 class MapState {
+  final ThemeMode themeMode;
   final LatLngBounds bounds;
+  final bool onlyFavorites;
+  final bool includeArchived;
+  final bool withPartners;
+  final int relativeDays;
 
-  const MapState({required this.bounds});
+  const MapState({
+    this.themeMode = ThemeMode.system,
+    required this.bounds,
+    this.onlyFavorites = false,
+    this.includeArchived = false,
+    this.withPartners = false,
+    this.relativeDays = 0,
+  });
 
   @override
   bool operator ==(covariant MapState other) {
@@ -15,9 +34,31 @@ class MapState {
   @override
   int get hashCode => bounds.hashCode;
 
-  MapState copyWith({LatLngBounds? bounds}) {
-    return MapState(bounds: bounds ?? this.bounds);
+  MapState copyWith({
+    LatLngBounds? bounds,
+    ThemeMode? themeMode,
+    bool? onlyFavorites,
+    bool? includeArchived,
+    bool? withPartners,
+    int? relativeDays,
+  }) {
+    return MapState(
+      bounds: bounds ?? this.bounds,
+      themeMode: themeMode ?? this.themeMode,
+      onlyFavorites: onlyFavorites ?? this.onlyFavorites,
+      includeArchived: includeArchived ?? this.includeArchived,
+      withPartners: withPartners ?? this.withPartners,
+      relativeDays: relativeDays ?? this.relativeDays,
+    );
   }
+
+  TimelineMapOptions toOptions() => TimelineMapOptions(
+    bounds: bounds,
+    onlyFavorites: onlyFavorites,
+    includeArchived: includeArchived,
+    withPartners: withPartners,
+    relativeDays: relativeDays,
+  );
 }
 
 class MapStateNotifier extends Notifier<MapState> {
@@ -31,11 +72,50 @@ class MapStateNotifier extends Notifier<MapState> {
     return true;
   }
 
+  void switchTheme(ThemeMode mode) {
+    // TODO: Remove this line when map theme provider is removed
+    // Until then, keep both in sync as MapThemeOverride uses map state provider
+    // ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.mapThemeMode, mode.index);
+    ref.read(mapStateNotifierProvider.notifier).switchTheme(mode);
+    state = state.copyWith(themeMode: mode);
+  }
+
+  void switchFavoriteOnly(bool isFavoriteOnly) {
+    ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.mapShowFavoriteOnly, isFavoriteOnly);
+    state = state.copyWith(onlyFavorites: isFavoriteOnly);
+    EventStream.shared.emit(const MapMarkerReloadEvent());
+  }
+
+  void switchIncludeArchived(bool isIncludeArchived) {
+    ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.mapIncludeArchived, isIncludeArchived);
+    state = state.copyWith(includeArchived: isIncludeArchived);
+    EventStream.shared.emit(const MapMarkerReloadEvent());
+  }
+
+  void switchWithPartners(bool isWithPartners) {
+    ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.mapwithPartners, isWithPartners);
+    state = state.copyWith(withPartners: isWithPartners);
+    EventStream.shared.emit(const MapMarkerReloadEvent());
+  }
+
+  void setRelativeTime(int relativeDays) {
+    ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.mapRelativeDate, relativeDays);
+    state = state.copyWith(relativeDays: relativeDays);
+    EventStream.shared.emit(const MapMarkerReloadEvent());
+  }
+
   @override
-  MapState build() => MapState(
-    // TODO: set default bounds
-    bounds: LatLngBounds(northeast: const LatLng(0, 0), southwest: const LatLng(0, 0)),
-  );
+  MapState build() {
+    final appSettingsService = ref.read(appSettingsServiceProvider);
+    return MapState(
+      themeMode: ThemeMode.values[appSettingsService.getSetting(AppSettingsEnum.mapThemeMode)],
+      onlyFavorites: appSettingsService.getSetting(AppSettingsEnum.mapShowFavoriteOnly),
+      includeArchived: appSettingsService.getSetting(AppSettingsEnum.mapIncludeArchived),
+      withPartners: appSettingsService.getSetting(AppSettingsEnum.mapwithPartners),
+      relativeDays: appSettingsService.getSetting(AppSettingsEnum.mapRelativeDate),
+      bounds: LatLngBounds(northeast: const LatLng(0, 0), southwest: const LatLng(0, 0)),
+    );
+  }
 }
 
 // This provider watches the markers from the map service and serves the markers.

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

@@ -6,6 +6,8 @@ import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:geolocator/geolocator.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
@@ -51,11 +53,19 @@ class _DriftMapState extends ConsumerState<DriftMap> {
   final _reloadMutex = AsyncMutex();
   final _debouncer = Debouncer(interval: const Duration(milliseconds: 500), maxWaitTime: const Duration(seconds: 2));
   final ValueNotifier<double> bottomSheetOffset = ValueNotifier(0.25);
+  StreamSubscription? _eventSubscription;
+
+  @override
+  void initState() {
+    super.initState();
+    _eventSubscription = EventStream.shared.listen<MapMarkerReloadEvent>(_onEvent);
+  }
 
   @override
   void dispose() {
     _debouncer.dispose();
     bottomSheetOffset.dispose();
+    _eventSubscription?.cancel();
     super.dispose();
   }
 
@@ -63,6 +73,8 @@ class _DriftMapState extends ConsumerState<DriftMap> {
     mapController = controller;
   }
 
+  void _onEvent(_) => _debouncer.run(() => setBounds(forceReload: true));
+
   Future<void> onMapReady() async {
     final controller = mapController;
     if (controller == null) {
@@ -98,7 +110,7 @@ class _DriftMapState extends ConsumerState<DriftMap> {
       );
     }
 
-    _debouncer.run(setBounds);
+    _debouncer.run(() => setBounds(forceReload: true));
     controller.addListener(onMapMoved);
   }
 
@@ -110,7 +122,7 @@ class _DriftMapState extends ConsumerState<DriftMap> {
     _debouncer.run(setBounds);
   }
 
-  Future<void> setBounds() async {
+  Future<void> setBounds({bool forceReload = false}) async {
     final controller = mapController;
     if (controller == null || !mounted) {
       return;
@@ -127,7 +139,7 @@ class _DriftMapState extends ConsumerState<DriftMap> {
     final bounds = await controller.getVisibleRegion();
     unawaited(
       _reloadMutex.run(() async {
-        if (mounted && ref.read(mapStateProvider.notifier).setBounds(bounds)) {
+        if (mounted && (ref.read(mapStateProvider.notifier).setBounds(bounds) || forceReload)) {
           final markers = await ref.read(mapMarkerProvider(bounds).future);
           await reloadMarkers(markers);
         }
@@ -203,7 +215,7 @@ class _Map extends StatelessWidget {
           onMapCreated: onMapCreated,
           onStyleLoadedCallback: onMapReady,
           attributionButtonPosition: AttributionButtonPosition.topRight,
-          attributionButtonMargins: Platform.isIOS ? const Point(40, 12) : const Point(40, 72),
+          attributionButtonMargins: const Point(8, kToolbarHeight),
         ),
       ),
     );
@@ -244,7 +256,7 @@ class _DynamicMyLocationButton extends StatelessWidget {
       valueListenable: bottomSheetOffset,
       builder: (context, offset, child) {
         return Positioned(
-          right: 16,
+          right: 20,
           bottom: context.height * (offset - 0.02) + context.padding.bottom,
           child: AnimatedOpacity(
             opacity: offset < 0.8 ? 1 : 0,

mobile/lib/presentation/widgets/map/map_settings_sheet.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
+import 'package:immich_mobile/widgets/map/map_settings/map_settings_list_tile.dart';
+import 'package:immich_mobile/widgets/map/map_settings/map_settings_time_dropdown.dart';
+import 'package:immich_mobile/widgets/map/map_settings/map_theme_picker.dart';
+
+class DriftMapSettingsSheet extends HookConsumerWidget {
+  const DriftMapSettingsSheet({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final mapState = ref.watch(mapStateProvider);
+
+    return DraggableScrollableSheet(
+      expand: false,
+      initialChildSize: 0.6,
+      builder: (ctx, scrollController) => SingleChildScrollView(
+        controller: scrollController,
+        child: Card(
+          elevation: 0.0,
+          shadowColor: Colors.transparent,
+          color: Colors.transparent,
+          margin: EdgeInsets.zero,
+          child: Column(
+            mainAxisSize: MainAxisSize.max,
+            children: [
+              MapThemePicker(
+                themeMode: mapState.themeMode,
+                onThemeChange: (mode) => ref.read(mapStateProvider.notifier).switchTheme(mode),
+              ),
+              const Divider(height: 30, thickness: 1),
+              MapSettingsListTile(
+                title: "map_settings_only_show_favorites".t(context: context),
+                selected: mapState.onlyFavorites,
+                onChanged: (favoriteOnly) => ref.read(mapStateProvider.notifier).switchFavoriteOnly(favoriteOnly),
+              ),
+              MapSettingsListTile(
+                title: "map_settings_include_show_archived".t(context: context),
+                selected: mapState.includeArchived,
+                onChanged: (includeArchive) =>
+                    ref.read(mapStateProvider.notifier).switchIncludeArchived(includeArchive),
+              ),
+              MapSettingsListTile(
+                title: "map_settings_include_show_partners".t(context: context),
+                selected: mapState.withPartners,
+                onChanged: (withPartners) => ref.read(mapStateProvider.notifier).switchWithPartners(withPartners),
+              ),
+              MapTimeDropDown(
+                relativeTime: mapState.relativeDays,
+                onTimeChange: (time) => ref.read(mapStateProvider.notifier).setRelativeTime(time),
+              ),
+              const SizedBox(height: 20),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/providers/app_life_cycle.provider.dart

@@ -3,7 +3,6 @@ import 'dart:async';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/services/log.service.dart';
-import 'package:immich_mobile/domain/utils/migrate_cloud_ids.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/platform_extensions.dart';
 import 'package:immich_mobile/models/backup/backup_state.model.dart';
@@ -157,11 +156,11 @@ class AppLifeCycleNotifier extends StateNotifier<AppLifeCycleEnum> {
       ]);
       if (syncSuccess) {
         await Future.wait([
-          _safeRun(syncCloudIds(_ref), "syncCloudIds"),
           _safeRun(backgroundManager.hashAssets(), "hashAssets").then((_) {
             _resumeBackup();
           }),
           _resumeBackup(),
+          _safeRun(backgroundManager.syncCloudIds(), "syncCloudIds"),
         ]);
       } else {
         await _safeRun(backgroundManager.hashAssets(), "hashAssets");

mobile/lib/providers/auth.provider.dart

@@ -1,23 +1,19 @@
-import 'dart:async';
-
 import 'package:flutter_udid/flutter_udid.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/domain/models/user.model.dart';
 import 'package:immich_mobile/domain/services/user.service.dart';
-import 'package:immich_mobile/domain/utils/migrate_cloud_ids.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/models/auth/auth_state.model.dart';
 import 'package:immich_mobile/models/auth/login_response.model.dart';
 import 'package:immich_mobile/providers/api.provider.dart';
-import 'package:immich_mobile/providers/background_sync.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/user.provider.dart';
 import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/services/auth.service.dart';
-import 'package:immich_mobile/services/background_upload.service.dart';
 import 'package:immich_mobile/services/foreground_upload.service.dart';
 import 'package:immich_mobile/services/secure_storage.service.dart';
+import 'package:immich_mobile/services/background_upload.service.dart';
 import 'package:immich_mobile/services/widget.service.dart';
 import 'package:immich_mobile/utils/debug_print.dart';
 import 'package:immich_mobile/utils/hash.dart';
@@ -176,15 +172,6 @@ class AuthNotifier extends StateNotifier<AuthState> {
       isAdmin: user.isAdmin,
     );
 
-    // TODO: Temporarily run cloud Id sync here until we have a better place to do it
-    unawaited(
-      _ref.read(backgroundSyncProvider).syncRemote().then((success) {
-        if (success) {
-          return syncCloudIds(_ref);
-        }
-      }),
-    );
-
     return true;
   }
 

mobile/lib/providers/background_sync.provider.dart

@@ -28,6 +28,9 @@ final backgroundSyncProvider = Provider<BackgroundSyncManager>((ref) {
     onHashingStart: syncStatusNotifier.startHashJob,
     onHashingComplete: syncStatusNotifier.completeHashJob,
     onHashingError: syncStatusNotifier.errorHashJob,
+    onCloudIdSyncStart: syncStatusNotifier.startCloudIdSync,
+    onCloudIdSyncComplete: syncStatusNotifier.completeCloudIdSync,
+    onCloudIdSyncError: syncStatusNotifier.errorCloudIdSync,
   );
   ref.onDispose(manager.cancel);
   return manager;

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

@@ -1,7 +1,9 @@
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/infrastructure/repositories/map.repository.dart';
-import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
 import 'package:immich_mobile/domain/services/map.service.dart';
+import 'package:immich_mobile/infrastructure/repositories/map.repository.dart';
+import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
+import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 
 final mapRepositoryProvider = Provider<DriftMapRepository>((ref) => DriftMapRepository(ref.watch(driftProvider)));
@@ -13,7 +15,11 @@ final mapServiceProvider = Provider<MapService>(
       throw Exception('User must be logged in to access map');
     }
 
-    final mapService = ref.watch(mapFactoryProvider).remote(user.id);
+    final users = ref.watch(mapStateProvider).withPartners
+        ? ref.watch(timelineUsersProvider).valueOrNull ?? [user.id]
+        : [user.id];
+
+    final mapService = ref.watch(mapFactoryProvider).remote(users, ref.watch(mapStateProvider).toOptions());
     return mapService;
   },
   // Empty dependencies to inform the framework that this provider

mobile/lib/providers/sync_status.provider.dart

@@ -21,6 +21,7 @@ class SyncStatusState {
   final SyncStatus remoteSyncStatus;
   final SyncStatus localSyncStatus;
   final SyncStatus hashJobStatus;
+  final SyncStatus cloudIdSyncStatus;
 
   final String? errorMessage;
 
@@ -28,6 +29,7 @@ class SyncStatusState {
     this.remoteSyncStatus = SyncStatus.idle,
     this.localSyncStatus = SyncStatus.idle,
     this.hashJobStatus = SyncStatus.idle,
+    this.cloudIdSyncStatus = SyncStatus.idle,
     this.errorMessage,
   });
 
@@ -35,12 +37,14 @@ class SyncStatusState {
     SyncStatus? remoteSyncStatus,
     SyncStatus? localSyncStatus,
     SyncStatus? hashJobStatus,
+    SyncStatus? cloudIdSyncStatus,
     String? errorMessage,
   }) {
     return SyncStatusState(
       remoteSyncStatus: remoteSyncStatus ?? this.remoteSyncStatus,
       localSyncStatus: localSyncStatus ?? this.localSyncStatus,
       hashJobStatus: hashJobStatus ?? this.hashJobStatus,
+      cloudIdSyncStatus: cloudIdSyncStatus ?? this.cloudIdSyncStatus,
       errorMessage: errorMessage ?? this.errorMessage,
     );
   }
@@ -48,6 +52,7 @@ class SyncStatusState {
   bool get isRemoteSyncing => remoteSyncStatus == SyncStatus.syncing;
   bool get isLocalSyncing => localSyncStatus == SyncStatus.syncing;
   bool get isHashing => hashJobStatus == SyncStatus.syncing;
+  bool get isCloudIdSyncing => cloudIdSyncStatus == SyncStatus.syncing;
 
   @override
   bool operator ==(Object other) {
@@ -56,11 +61,12 @@ class SyncStatusState {
         other.remoteSyncStatus == remoteSyncStatus &&
         other.localSyncStatus == localSyncStatus &&
         other.hashJobStatus == hashJobStatus &&
+        other.cloudIdSyncStatus == cloudIdSyncStatus &&
         other.errorMessage == errorMessage;
   }
 
   @override
-  int get hashCode => Object.hash(remoteSyncStatus, localSyncStatus, hashJobStatus, errorMessage);
+  int get hashCode => Object.hash(remoteSyncStatus, localSyncStatus, hashJobStatus, cloudIdSyncStatus, errorMessage);
 }
 
 class SyncStatusNotifier extends Notifier<SyncStatusState> {
@@ -71,6 +77,7 @@ class SyncStatusNotifier extends Notifier<SyncStatusState> {
       remoteSyncStatus: SyncStatus.idle,
       localSyncStatus: SyncStatus.idle,
       hashJobStatus: SyncStatus.idle,
+      cloudIdSyncStatus: SyncStatus.idle,
     );
   }
 
@@ -109,6 +116,18 @@ class SyncStatusNotifier extends Notifier<SyncStatusState> {
   void startHashJob() => setHashJobStatus(SyncStatus.syncing);
   void completeHashJob() => setHashJobStatus(SyncStatus.success);
   void errorHashJob(String error) => setHashJobStatus(SyncStatus.error, error);
+
+  ///
+  /// Cloud ID Sync Job
+  ///
+
+  void setCloudIdSyncStatus(SyncStatus status, [String? errorMessage]) {
+    state = state.copyWith(cloudIdSyncStatus: status, errorMessage: status == SyncStatus.error ? errorMessage : null);
+  }
+
+  void startCloudIdSync() => setCloudIdSyncStatus(SyncStatus.syncing);
+  void completeCloudIdSync() => setCloudIdSyncStatus(SyncStatus.success);
+  void errorCloudIdSync(String error) => setCloudIdSyncStatus(SyncStatus.error, error);
 }
 
 final syncStatusProvider = NotifierProvider<SyncStatusNotifier, SyncStatusState>(SyncStatusNotifier.new);

mobile/lib/widgets/map/map_settings/map_settings_list_tile.dart

@@ -1,4 +1,3 @@
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
@@ -14,7 +13,7 @@ class MapSettingsListTile extends StatelessWidget {
   Widget build(BuildContext context) {
     return SwitchListTile.adaptive(
       activeThumbColor: context.primaryColor,
-      title: Text(title, style: context.textTheme.labelLarge?.copyWith(fontWeight: FontWeight.bold)).tr(),
+      title: Text(title, style: context.textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w500, height: 1.5)),
       value: selected,
       onChanged: onChanged,
     );

mobile/lib/widgets/map/map_settings/map_settings_time_dropdown.dart

@@ -1,5 +1,7 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 
 class MapTimeDropDown extends StatelessWidget {
   final int relativeTime;
@@ -11,41 +13,47 @@ class MapTimeDropDown extends StatelessWidget {
   Widget build(BuildContext context) {
     final now = DateTime.now();
 
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.center,
-      children: [
-        Padding(
-          padding: const EdgeInsets.only(bottom: 20),
-          child: Text("date_range".tr(), style: const TextStyle(fontWeight: FontWeight.bold)),
-        ),
-        LayoutBuilder(
-          builder: (_, constraints) => DropdownMenu(
-            width: constraints.maxWidth * 0.9,
-            enableSearch: false,
-            enableFilter: false,
-            initialSelection: relativeTime,
-            onSelected: (value) => onTimeChange(value!),
-            dropdownMenuEntries: [
-              DropdownMenuEntry(value: 0, label: "all".tr()),
-              DropdownMenuEntry(value: 1, label: "map_settings_date_range_option_day".tr()),
-              DropdownMenuEntry(value: 7, label: "map_settings_date_range_option_days".tr(namedArgs: {'days': "7"})),
-              DropdownMenuEntry(value: 30, label: "map_settings_date_range_option_days".tr(namedArgs: {'days': "30"})),
-              DropdownMenuEntry(
-                value: now
-                    .difference(DateTime(now.year - 1, now.month, now.day, now.hour, now.minute, now.second))
-                    .inDays,
-                label: "map_settings_date_range_option_year".tr(),
-              ),
-              DropdownMenuEntry(
-                value: now
-                    .difference(DateTime(now.year - 3, now.month, now.day, now.hour, now.minute, now.second))
-                    .inDays,
-                label: "map_settings_date_range_option_years".tr(namedArgs: {'years': "3"}),
-              ),
-            ],
+    return Padding(
+      padding: const EdgeInsets.only(left: 16, right: 28.0),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            "date_range".t(context: context),
+            style: context.textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w500, height: 1.5),
           ),
-        ),
-      ],
+          Flexible(
+            child: DropdownMenu(
+              enableSearch: false,
+              enableFilter: false,
+              initialSelection: relativeTime,
+              onSelected: (value) => onTimeChange(value!),
+              dropdownMenuEntries: [
+                DropdownMenuEntry(value: 0, label: "all".t(context: context)),
+                DropdownMenuEntry(value: 1, label: "map_settings_date_range_option_day".t(context: context)),
+                DropdownMenuEntry(value: 7, label: "map_settings_date_range_option_days".tr(namedArgs: {'days': "7"})),
+                DropdownMenuEntry(
+                  value: 30,
+                  label: "map_settings_date_range_option_days".tr(namedArgs: {'days': "30"}),
+                ),
+                DropdownMenuEntry(
+                  value: now
+                      .difference(DateTime(now.year - 1, now.month, now.day, now.hour, now.minute, now.second))
+                      .inDays,
+                  label: "map_settings_date_range_option_year".t(context: context),
+                ),
+                DropdownMenuEntry(
+                  value: now
+                      .difference(DateTime(now.year - 3, now.month, now.day, now.hour, now.minute, now.second))
+                      .inDays,
+                  label: "map_settings_date_range_option_years".t(args: {'years': "3"}),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
     );
   }
 }

mobile/lib/widgets/map/map_settings/map_theme_picker.dart

@@ -1,6 +1,6 @@
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 
@@ -18,9 +18,9 @@ class MapThemePicker extends StatelessWidget {
           padding: const EdgeInsets.only(bottom: 20),
           child: Center(
             child: Text(
-              "map_settings_theme_settings",
-              style: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
-            ).tr(),
+              "map_settings_theme_settings".t(context: context),
+              style: context.textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w500, height: 1.5),
+            ),
           ),
         ),
         Row(

mobile/lib/widgets/photo_view/src/controller/photo_view_controller.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 
 import 'package:flutter/widgets.dart';
 import 'package:immich_mobile/widgets/photo_view/src/utils/ignorable_change_notifier.dart';
+import 'package:immich_mobile/widgets/photo_view/src/utils/photo_view_utils.dart';
 
 /// The interface in which controllers will be implemented.
 ///
@@ -62,6 +63,9 @@ abstract class PhotoViewControllerBase<T extends PhotoViewControllerValue> {
   /// The scale factor to transform the child (image or a customChild).
   late double? scale;
 
+  double? get initialScale;
+  ScaleBoundaries? scaleBoundaries;
+
   /// Nevermind this method :D, look away
   void setScaleInvisibly(double? scale);
 
@@ -141,6 +145,9 @@ class PhotoViewController implements PhotoViewControllerBase<PhotoViewController
 
   late StreamController<PhotoViewControllerValue> _outputCtrl;
 
+  @override
+  ScaleBoundaries? scaleBoundaries;
+
   late void Function(Offset)? _animatePosition;
   late void Function(double)? _animateScale;
   late void Function(double)? _animateRotation;
@@ -311,4 +318,7 @@ class PhotoViewController implements PhotoViewControllerBase<PhotoViewController
     }
     _valueNotifier.value = newValue;
   }
+
+  @override
+  double? get initialScale => scaleBoundaries?.initialScale ?? initial.scale;
 }

mobile/lib/widgets/photo_view/src/photo_view_wrappers.dart

@@ -108,6 +108,17 @@ class _ImageWrapperState extends State<ImageWrapper> {
     }
   }
 
+  // Should be called only when _imageSize is not null
+  ScaleBoundaries get scaleBoundaries {
+    return ScaleBoundaries(
+      widget.minScale ?? 0.0,
+      widget.maxScale ?? double.infinity,
+      widget.initialScale ?? PhotoViewComputedScale.contained,
+      widget.outerSize,
+      _imageSize!,
+    );
+  }
+
   // retrieve image from the provider
   void _resolveImage() {
     final ImageStream newStream = widget.imageProvider.resolve(const ImageConfiguration());
@@ -133,6 +144,7 @@ class _ImageWrapperState extends State<ImageWrapper> {
         _lastStack = null;
 
         _didLoadSynchronously = synchronousCall;
+        widget.controller.scaleBoundaries = scaleBoundaries;
       }
 
       synchronousCall && !_didLoadSynchronously ? setupCB() : setState(setupCB);
@@ -204,14 +216,6 @@ class _ImageWrapperState extends State<ImageWrapper> {
       );
     }
 
-    final scaleBoundaries = ScaleBoundaries(
-      widget.minScale ?? 0.0,
-      widget.maxScale ?? double.infinity,
-      widget.initialScale ?? PhotoViewComputedScale.contained,
-      widget.outerSize,
-      _imageSize!,
-    );
-
     return PhotoViewCore(
       imageProvider: widget.imageProvider,
       backgroundDecoration: widget.backgroundDecoration,

pnpm-lock.yaml

@@ -36,7 +36,7 @@ importers:
         version: 1.20.1
       lodash-es:
         specifier: ^4.17.21
-        version: 4.17.22
+        version: 4.17.23
       micromatch:
         specifier: ^4.0.8
         version: 4.0.8
@@ -802,7 +802,7 @@ importers:
         version: 4.1.0
       lodash-es:
         specifier: ^4.17.21
-        version: 4.17.22
+        version: 4.17.23
       luxon:
         specifier: ^3.4.4
         version: 3.7.2
@@ -8916,8 +8916,8 @@ packages:
   lodash-es@4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
 
-  lodash-es@4.17.22:
-    resolution: {integrity: sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==}
+  lodash-es@4.17.23:
+    resolution: {integrity: sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==}
 
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
@@ -19332,7 +19332,7 @@ snapshots:
   chevrotain-allstar@0.3.1(chevrotain@11.0.3):
     dependencies:
       chevrotain: 11.0.3
-      lodash-es: 4.17.22
+      lodash-es: 4.17.23
 
   chevrotain@11.0.3:
     dependencies:
@@ -20027,7 +20027,7 @@ snapshots:
   dagre-d3-es@7.0.13:
     dependencies:
       d3: 7.9.0
-      lodash-es: 4.17.22
+      lodash-es: 4.17.23
 
   data-urls@3.0.2:
     dependencies:
@@ -22376,7 +22376,7 @@ snapshots:
 
   lodash-es@4.17.21: {}
 
-  lodash-es@4.17.22: {}
+  lodash-es@4.17.23: {}
 
   lodash.camelcase@4.3.0: {}
 
@@ -22810,7 +22810,7 @@ snapshots:
       dompurify: 3.3.1
       katex: 0.16.27
       khroma: 2.1.0
-      lodash-es: 4.17.22
+      lodash-es: 4.17.23
       marked: 16.4.2
       roughjs: 4.6.6
       stylis: 4.3.6
@@ -25714,7 +25714,7 @@ snapshots:
       json-source-map: 0.6.1
       jsonpath-plus: 10.3.0
       jsonrepair: 3.13.1
-      lodash-es: 4.17.22
+      lodash-es: 4.17.23
       memoize-one: 6.0.0
       natural-compare-lite: 1.4.0
       sass: 1.97.1

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

@@ -15,3 +15,5 @@ from
   "asset_edit"
 where
   "assetId" = $1
+order by
+  "sequence" asc

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

@@ -12,14 +12,14 @@ export class AssetEditRepository {
   @GenerateSql({
     params: [DummyValue.UUID],
   })
-  async replaceAll(assetId: string, edits: AssetEditActionItem[]): Promise<AssetEditActionItem[]> {
-    return await this.db.transaction().execute(async (trx) => {
+  replaceAll(assetId: string, edits: AssetEditActionItem[]): Promise<AssetEditActionItem[]> {
+    return this.db.transaction().execute(async (trx) => {
       await trx.deleteFrom('asset_edit').where('assetId', '=', assetId).execute();
 
       if (edits.length > 0) {
         return trx
           .insertInto('asset_edit')
-          .values(edits.map((edit) => ({ assetId, ...edit })))
+          .values(edits.map((edit, i) => ({ assetId, sequence: i, ...edit })))
           .returning(['action', 'parameters'])
           .execute() as Promise<AssetEditActionItem[]>;
       }
@@ -31,11 +31,12 @@ export class AssetEditRepository {
   @GenerateSql({
     params: [DummyValue.UUID],
   })
-  async getAll(assetId: string): Promise<AssetEditActionItem[]> {
+  getAll(assetId: string): Promise<AssetEditActionItem[]> {
     return this.db
       .selectFrom('asset_edit')
       .select(['action', 'parameters'])
       .where('assetId', '=', assetId)
+      .orderBy('sequence', 'asc')
       .execute() as Promise<AssetEditActionItem[]>;
   }
 }

server/src/schema/migrations/1769105700133-AddAssetEditSequence.ts

@@ -0,0 +1,14 @@
+import { Kysely, sql } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await sql`DELETE FROM "asset_edit";`.execute(db);
+  await sql`ALTER TABLE "asset_edit" ADD "sequence" integer NOT NULL;`.execute(db);
+  await sql`ALTER TABLE "asset_edit" ADD CONSTRAINT "asset_edit_assetId_sequence_uq" UNIQUE ("assetId", "sequence");`.execute(
+    db,
+  );
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await sql`ALTER TABLE "asset_edit" DROP CONSTRAINT "asset_edit_assetId_sequence_uq";`.execute(db);
+  await sql`ALTER TABLE "asset_edit" DROP COLUMN "sequence";`.execute(db);
+}

server/src/schema/tables/asset-edit.table.ts

@@ -9,6 +9,7 @@ import {
   Generated,
   PrimaryGeneratedColumn,
   Table,
+  Unique,
 } from 'src/sql-tools';
 
 @Table('asset_edit')
@@ -19,6 +20,7 @@ import {
   referencingOldTableAs: 'deleted_edit',
   when: 'pg_trigger_depth() = 0',
 })
+@Unique({ columns: ['assetId', 'sequence'] })
 export class AssetEditTable<T extends AssetEditAction = AssetEditAction> {
   @PrimaryGeneratedColumn()
   id!: Generated<string>;
@@ -31,4 +33,7 @@ export class AssetEditTable<T extends AssetEditAction = AssetEditAction> {
 
   @Column({ type: 'jsonb' })
   parameters!: AssetEditActionParameter[T];
+
+  @Column({ type: 'integer' })
+  sequence!: number;
 }

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

@@ -19,13 +19,12 @@
   import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
-  import { getAssetUrl, getSharedLink, handlePromiseError } from '$lib/utils';
+  import { getSharedLink, handlePromiseError } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
   import { navigateToAsset } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { InvocationTracker } from '$lib/utils/invocationTracker';
   import { SlideshowHistory } from '$lib/utils/slideshow-history';
-  import { preloadImageUrl } from '$lib/utils/sw-messaging';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import {
     AssetTypeEnum,
@@ -133,9 +132,7 @@
     }
 
     untrack(() => {
-      if (stack && stack?.assets.length > 1) {
-        preloadImageUrl(getAssetUrl({ asset: stack.assets[1] }));
-      }
+      preloadManager.preload(stack?.assets[1]);
     });
   };
 
@@ -431,6 +428,7 @@
   const showOcrButton = $derived(
     $slideshowState === SlideshowState.None &&
       asset.type === AssetTypeEnum.Image &&
+      !(asset.exifInfo?.projectionType === 'EQUIRECTANGULAR') &&
       !isShowEditor &&
       ocrManager.hasOcrData,
   );

web/src/lib/managers/PreloadManager.svelte.ts

@@ -1,13 +1,9 @@
 import { getAssetUrl } from '$lib/utils';
-import { cancelImageUrl, preloadImageUrl } from '$lib/utils/sw-messaging';
+import { cancelImageUrl } from '$lib/utils/sw-messaging';
 import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
 
 class PreloadManager {
   preload(asset: AssetResponseDto | undefined) {
-    if (globalThis.isSecureContext) {
-      preloadImageUrl(getAssetUrl({ asset }));
-      return;
-    }
     if (!asset || asset.type !== AssetTypeEnum.Image) {
       return;
     }

web/src/lib/utils/sw-messaging.ts

@@ -1,14 +1,24 @@
-const broadcast = new BroadcastChannel('immich');
+import { ServiceWorkerMessenger } from './sw-messenger';
+
+const messenger = new ServiceWorkerMessenger();
+
+let isServiceWorkerEnabled = true;
+
+messenger.onAckTimeout(() => {
+  if (!isServiceWorkerEnabled) {
+    return;
+  }
+  console.error('[ServiceWorker] No communication detected. Auto-disabled service worker.');
+  isServiceWorkerEnabled = false;
+});
+
+const isValidSwContext = (url: string | undefined | null): url is string => {
+  return globalThis.isSecureContext && isServiceWorkerEnabled && !!url;
+};
 
 export function cancelImageUrl(url: string | undefined | null) {
-  if (!url) {
+  if (!isValidSwContext(url)) {
     return;
   }
-  broadcast.postMessage({ type: 'cancel', url });
-}
-export function preloadImageUrl(url: string | undefined | null) {
-  if (!url) {
-    return;
-  }
-  broadcast.postMessage({ type: 'preload', url });
+  void messenger.send('cancel', { url });
 }

web/src/lib/utils/sw-messenger.ts

@@ -0,0 +1,157 @@
+/**
+ * Low-level protocol for communicating with the service worker via postMessage.
+ *
+ * Protocol:
+ * 1. Main thread sends request: { type: string, requestId: string, ...data }
+ * 2. SW sends ack: { type: 'ack', requestId: string }
+ * 3. SW sends response (optional): { type: 'response', requestId: string, result?: any, error?: string }
+ */
+
+interface PendingRequest {
+  resolveAck: () => void;
+  resolveResponse?: (result: unknown) => void;
+  rejectResponse?: (error: Error) => void;
+  ackTimeout: ReturnType<typeof setTimeout>;
+  ackReceived: boolean;
+}
+
+export class ServiceWorkerMessenger {
+  readonly #pendingRequests = new Map<string, PendingRequest>();
+  readonly #ackTimeoutMs: number;
+  #requestCounter = 0;
+  #onTimeout?: (type: string, data: Record<string, unknown>) => void;
+  #messageHandler?: (event: MessageEvent) => void;
+
+  constructor(ackTimeoutMs = 5000) {
+    this.#ackTimeoutMs = ackTimeoutMs;
+
+    // Listen for messages from the service worker
+    if ('serviceWorker' in navigator) {
+      this.#messageHandler = (event) => {
+        this.#handleMessage(event.data);
+      };
+      navigator.serviceWorker.addEventListener('message', this.#messageHandler);
+    }
+  }
+
+  #handleMessage(data: unknown) {
+    if (typeof data !== 'object' || data === null) {
+      return;
+    }
+
+    const message = data as { requestId?: string; type?: string; error?: string; result?: unknown };
+    const requestId = message.requestId;
+    if (!requestId) {
+      return;
+    }
+
+    const pending = this.#pendingRequests.get(requestId);
+    if (!pending) {
+      return;
+    }
+
+    if (message.type === 'ack') {
+      pending.ackReceived = true;
+      clearTimeout(pending.ackTimeout);
+      pending.resolveAck();
+      return;
+    }
+
+    if (message.type === 'response') {
+      clearTimeout(pending.ackTimeout);
+      this.#pendingRequests.delete(requestId);
+
+      if (message.error) {
+        pending.rejectResponse?.(new Error(message.error));
+        return;
+      }
+
+      pending.resolveResponse?.(message.result);
+    }
+  }
+
+  /**
+   * Set a callback to be invoked when an ack timeout occurs.
+   * This can be used to detect and disable faulty service workers.
+   */
+  onAckTimeout(callback: (type: string, data: Record<string, unknown>) => void): void {
+    this.#onTimeout = callback;
+  }
+
+  /**
+   * Send a message to the service worker.
+   * - send(): waits for ack, resolves when acknowledged
+   * - request(): waits for response, throws on error/timeout
+   */
+  #sendInternal<T>(type: string, data: Record<string, unknown>, waitForResponse: boolean): Promise<T> {
+    const requestId = `${type}-${++this.#requestCounter}-${Date.now()}`;
+
+    const promise = new Promise<T>((resolve, reject) => {
+      const ackTimeout = setTimeout(() => {
+        const pending = this.#pendingRequests.get(requestId);
+        if (pending && !pending.ackReceived) {
+          this.#pendingRequests.delete(requestId);
+          console.warn(`[ServiceWorker] ${type} request not acknowledged:`, data);
+          this.#onTimeout?.(type, data);
+          // Only reject if we're waiting for a response
+          if (waitForResponse) {
+            reject(new Error(`Service worker did not acknowledge ${type} request`));
+          } else {
+            resolve(undefined as T);
+          }
+        }
+      }, this.#ackTimeoutMs);
+
+      this.#pendingRequests.set(requestId, {
+        resolveAck: waitForResponse ? () => {} : () => resolve(undefined as T),
+        resolveResponse: waitForResponse ? (result: unknown) => resolve(result as T) : undefined,
+        rejectResponse: waitForResponse ? reject : undefined,
+        ackTimeout,
+        ackReceived: false,
+      });
+
+      // Send message to the active service worker
+      // Feature detection is done in constructor and at call sites (sw-messaging.ts:isValidSwContext)
+      // eslint-disable-next-line compat/compat
+      navigator.serviceWorker.controller?.postMessage({
+        type,
+        requestId,
+        ...data,
+      });
+    });
+
+    return promise;
+  }
+
+  /**
+   * Send a one-way message to the service worker.
+   * Returns a promise that resolves after the service worker acknowledges receipt.
+   * Resolves even if no ack is received within the timeout period.
+   */
+  send(type: string, data: Record<string, unknown>): Promise<void> {
+    return this.#sendInternal<void>(type, data, false);
+  }
+
+  /**
+   * Send a request and wait for ack + response.
+   * Returns a promise that resolves with the response data or rejects on error/timeout.
+   */
+  request<T = void>(type: string, data: Record<string, unknown>): Promise<T> {
+    return this.#sendInternal<T>(type, data, true);
+  }
+
+  /**
+   * Clean up pending requests and remove event listener
+   */
+  close(): void {
+    for (const pending of this.#pendingRequests.values()) {
+      clearTimeout(pending.ackTimeout);
+    }
+    this.#pendingRequests.clear();
+
+    if (this.#messageHandler && 'serviceWorker' in navigator) {
+      navigator.serviceWorker.removeEventListener('message', this.#messageHandler);
+      this.#messageHandler = undefined;
+    }
+  }
+}

web/src/service-worker/broadcast-channel.ts

@@ -1,25 +0,0 @@
-import { handleCancel, handlePreload } from './request';
-
-export const installBroadcastChannelListener = () => {
-  const broadcast = new BroadcastChannel('immich');
-  // eslint-disable-next-line  unicorn/prefer-add-event-listener
-  broadcast.onmessage = (event) => {
-    if (!event.data) {
-      return;
-    }
-
-    const url = new URL(event.data.url, event.origin);
-
-    switch (event.data.type) {
-      case 'preload': {
-        handlePreload(url);
-        break;
-      }
-
-      case 'cancel': {
-        handleCancel(url);
-        break;
-      }
-    }
-  };
-};

web/src/service-worker/cache.ts

@@ -1,42 +0,0 @@
-import { version } from '$service-worker';
-
-const CACHE = `cache-${version}`;
-
-let _cache: Cache | undefined;
-const getCache = async () => {
-  if (_cache) {
-    return _cache;
-  }
-  _cache = await caches.open(CACHE);
-  return _cache;
-};
-
-export const get = async (key: string) => {
-  const cache = await getCache();
-  if (!cache) {
-    return;
-  }
-
-  return cache.match(key);
-};
-
-export const put = async (key: string, response: Response) => {
-  if (response.status !== 200) {
-    return;
-  }
-
-  const cache = await getCache();
-  if (!cache) {
-    return;
-  }
-
-  cache.put(key, response.clone());
-};
-
-export const prune = async () => {
-  for (const key of await caches.keys()) {
-    if (key !== CACHE) {
-      await caches.delete(key);
-    }
-  }
-};

web/src/service-worker/index.ts

@@ -2,9 +2,9 @@
 /// <reference no-default-lib="true"/>
 /// <reference lib="esnext" />
 /// <reference lib="webworker" />
-import { installBroadcastChannelListener } from './broadcast-channel';
-import { prune } from './cache';
-import { handleRequest } from './request';
+
+import { installMessageListener } from './messaging';
+import { handleFetch as handleAssetFetch } from './request';
 
 const ASSET_REQUEST_REGEX = /^\/api\/assets\/[a-f0-9-]+\/(original|thumbnail)/;
 
@@ -12,12 +12,10 @@ const sw = globalThis as unknown as ServiceWorkerGlobalScope;
 
 const handleActivate = (event: ExtendableEvent) => {
   event.waitUntil(sw.clients.claim());
-  event.waitUntil(prune());
 };
 
 const handleInstall = (event: ExtendableEvent) => {
   event.waitUntil(sw.skipWaiting());
-  // do not preload app resources
 };
 
 const handleFetch = (event: FetchEvent): void => {
@@ -28,7 +26,7 @@ const handleFetch = (event: FetchEvent): void => {
   // Cache requests for thumbnails
   const url = new URL(event.request.url);
   if (url.origin === self.location.origin && ASSET_REQUEST_REGEX.test(url.pathname)) {
-    event.respondWith(handleRequest(event.request));
+    event.respondWith(handleAssetFetch(event.request));
     return;
   }
 };
@@ -36,4 +34,4 @@ const handleFetch = (event: FetchEvent): void => {
 sw.addEventListener('install', handleInstall, { passive: true });
 sw.addEventListener('activate', handleActivate, { passive: true });
 sw.addEventListener('fetch', handleFetch, { passive: true });
-installBroadcastChannelListener();
+installMessageListener();

web/src/service-worker/messaging.ts

@@ -0,0 +1,53 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
+/// <reference lib="webworker" />
+
+import { handleCancel } from './request';
+
+const sw = globalThis as unknown as ServiceWorkerGlobalScope;
+
+/**
+ * Send acknowledgment for a request
+ */
+function sendAck(client: Client, requestId: string) {
+  client.postMessage({
+    type: 'ack',
+    requestId,
+  });
+}
+
+/**
+ * Handle 'cancel' request: cancel a pending request
+ */
+const handleCancelRequest = (client: Client, url: URL, requestId: string) => {
+  sendAck(client, requestId);
+  handleCancel(url);
+};
+
+export const installMessageListener = () => {
+  sw.addEventListener('message', (event) => {
+    if (!event.data?.requestId || !event.data?.type) {
+      return;
+    }
+
+    const requestId = event.data.requestId;
+
+    switch (event.data.type) {
+      case 'cancel': {
+        const url = event.data.url ? new URL(event.data.url, self.location.origin) : undefined;
+        if (!url) {
+          return;
+        }
+
+        const client = event.source;
+        if (!client) {
+          return;
+        }
+
+        handleCancelRequest(client, url, requestId);
+        break;
+      }
+    }
+  });
+};

web/src/service-worker/request.ts

@@ -1,73 +1,68 @@
-import { get, put } from './cache';
+/// <reference types="@sveltejs/kit" />
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
+/// <reference lib="webworker" />
 
-const pendingRequests = new Map<string, AbortController>();
-
-const isURL = (request: URL | RequestInfo): request is URL => (request as URL).href !== undefined;
-const isRequest = (request: RequestInfo): request is Request => (request as Request).url !== undefined;
-
-const assertResponse = (response: Response) => {
-  if (!(response instanceof Response)) {
-    throw new TypeError('Fetch did not return a valid Response object');
-  }
+type PendingRequest = {
+  controller: AbortController;
+  promise: Promise<Response>;
+  cleanupTimeout?: ReturnType<typeof setTimeout>;
 };
 
-const getCacheKey = (request: URL | Request) => {
-  if (isURL(request)) {
-    return request.toString();
+const pendingRequests = new Map<string, PendingRequest>();
+
+const getRequestKey = (request: URL | Request): string => (request instanceof URL ? request.href : request.url);
+
+const CANCELATION_MESSAGE = 'Request canceled by application';
+const CLEANUP_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes
+
+export const handleFetch = (request: URL | Request): Promise<Response> => {
+  const requestKey = getRequestKey(request);
+  const existing = pendingRequests.get(requestKey);
+
+  if (existing) {
+    // Clone the response since response bodies can only be read once
+    // Each caller gets an independent clone they can consume
+    return existing.promise.then((response) => response.clone());
   }
 
-  if (isRequest(request)) {
-    return request.url;
-  }
+  const pendingRequest: PendingRequest = {
+    controller: new AbortController(),
+    promise: undefined as unknown as Promise<Response>,
+  };
+  pendingRequests.set(requestKey, pendingRequest);
 
-  throw new Error(`Invalid request: ${request}`);
-};
+  // NOTE: fetch returns after headers received, not the body
+  pendingRequest.promise = fetch(request, { signal: pendingRequest.controller.signal })
+    .catch((error: unknown) => {
+      const standardError = error instanceof Error ? error : new Error(String(error));
+      if (standardError.name === 'AbortError' || standardError.message === CANCELATION_MESSAGE) {
+        // dummy response avoids network errors in the console for these requests
+        return new Response(undefined, { status: 204 });
+      }
+      throw standardError;
+    })
+    .finally(() => {
+      // Schedule cleanup after timeout to allow response body streaming to complete
+      const cleanupTimeout = setTimeout(() => {
+        pendingRequests.delete(requestKey);
+      }, CLEANUP_TIMEOUT_MS);
+      pendingRequest.cleanupTimeout = cleanupTimeout;
+    });
 
-export const handlePreload = async (request: URL | Request) => {
-  try {
-    return await handleRequest(request);
-  } catch (error) {
-    console.error(`Preload failed: ${error}`);
-  }
-};
-
-export const handleRequest = async (request: URL | Request) => {
-  const cacheKey = getCacheKey(request);
-  const cachedResponse = await get(cacheKey);
-  if (cachedResponse) {
-    return cachedResponse;
-  }
-
-  try {
-    const cancelToken = new AbortController();
-    pendingRequests.set(cacheKey, cancelToken);
-    const response = await fetch(request, { signal: cancelToken.signal });
-
-    assertResponse(response);
-    put(cacheKey, response);
-
-    return response;
-  } catch (error) {
-    if (error.name === 'AbortError') {
-      // dummy response avoids network errors in the console for these requests
-      return new Response(undefined, { status: 204 });
-    }
-
-    console.log('Not an abort error', error);
-
-    throw error;
-  } finally {
-    pendingRequests.delete(cacheKey);
-  }
+  // Clone for the first caller to keep the original response unconsumed for future callers
+  return pendingRequest.promise.then((response) => response.clone());
 };
 
 export const handleCancel = (url: URL) => {
-  const cacheKey = getCacheKey(url);
-  const pendingRequest = pendingRequests.get(cacheKey);
-  if (!pendingRequest) {
-    return;
-  }
+  const requestKey = getRequestKey(url);
 
-  pendingRequest.abort();
-  pendingRequests.delete(cacheKey);
+  const pendingRequest = pendingRequests.get(requestKey);
+  if (pendingRequest) {
+    pendingRequest.controller.abort(CANCELATION_MESSAGE);
+    if (pendingRequest.cleanupTimeout) {
+      clearTimeout(pendingRequest.cleanupTimeout);
+    }
+    pendingRequests.delete(requestKey);
+  }
 };