test: try out new create-workflow-token-action

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>

.github/workflows/static_analysis.yml

@@ -41,10 +41,18 @@ jobs:
       run:
         working-directory: ./mobile
     steps:
+      - name: Generate token
+        id: token
+        uses: immich-app/devtools/actions/create-workflow-token@feat/create-workflow-token-action
+        with:
+          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
+          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
+      
       - name: Checkout code
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           persist-credentials: false
+          token: ${{ steps.token.outputs.token }}
 
       - name: Setup Flutter SDK
         uses: subosito/flutter-action@fd55f4c5af5b953cc57a2be44cb082c8f6635e8e # v2.21.0
@@ -58,7 +66,7 @@ jobs:
       - name: Install DCM
         uses: CQLabs/setup-dcm@8697ae0790c0852e964a6ef1d768d62a6675481a # v2.0.1
         with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+          github-token: ${{ steps.token.outputs.token }}
           version: auto
           working-directory: ./mobile
 

docker/docker-compose.dev.yml

@@ -140,7 +140,7 @@ services:
 
   database:
     container_name: immich_postgres
-    image: ghcr.io/immich-app/postgres:14-vectorchord0.4.3-pgvectors0.2.0@sha256:41eacbe83eca995561fe43814fd4891e16e39632806253848efaf04d3c8a8b84
+    image: ghcr.io/immich-app/postgres:14-vectorchord0.4.3-pgvectors0.2.0@sha256:bcf63357191b76a916ae5eb93464d65c07511da41e3bf7a8416db519b40b1c23
     env_file:
       - .env
     environment:

docker/docker-compose.prod.yml

@@ -63,7 +63,7 @@ services:
 
   database:
     container_name: immich_postgres
-    image: ghcr.io/immich-app/postgres:14-vectorchord0.4.3-pgvectors0.2.0@sha256:41eacbe83eca995561fe43814fd4891e16e39632806253848efaf04d3c8a8b84
+    image: ghcr.io/immich-app/postgres:14-vectorchord0.4.3-pgvectors0.2.0@sha256:bcf63357191b76a916ae5eb93464d65c07511da41e3bf7a8416db519b40b1c23
     env_file:
       - .env
     environment:

docker/docker-compose.yml

@@ -56,7 +56,7 @@ services:
 
   database:
     container_name: immich_postgres
-    image: ghcr.io/immich-app/postgres:14-vectorchord0.4.3-pgvectors0.2.0@sha256:41eacbe83eca995561fe43814fd4891e16e39632806253848efaf04d3c8a8b84
+    image: ghcr.io/immich-app/postgres:14-vectorchord0.4.3-pgvectors0.2.0@sha256:bcf63357191b76a916ae5eb93464d65c07511da41e3bf7a8416db519b40b1c23
     environment:
       POSTGRES_PASSWORD: ${DB_PASSWORD}
       POSTGRES_USER: ${DB_USERNAME}

e2e/docker-compose.yml

@@ -35,10 +35,10 @@ services:
       - 2285:2285
 
   redis:
-    image: redis:6.2-alpine@sha256:2185e741f4c1e7b0ea9ca1e163a3767c4270a73086b6bbea2049a7203212fb7f
+    image: redis:6.2-alpine@sha256:77697a75da9f94e9357b61fcaf8345f69e3d9d32e9d15032c8415c21263977dc
 
   database:
-    image: ghcr.io/immich-app/postgres:14-vectorchord0.3.0@sha256:11ced39d65a92a54d12890ced6a26cc2003f92697d6f0d4d944b98459dba7138
+    image: ghcr.io/immich-app/postgres:14-vectorchord0.3.0@sha256:6f3e9d2c2177af16c2988ff71425d79d89ca630ec2f9c8db03209ab716542338
     command: -c fsync=off -c shared_preload_libraries=vchord.so -c config_file=/var/lib/postgresql/data/postgresql.conf
     environment:
       POSTGRES_PASSWORD: postgres

i18n/en.json

@@ -1039,6 +1039,7 @@
   "exif_bottom_sheet_description_error": "Error updating description",
   "exif_bottom_sheet_details": "DETAILS",
   "exif_bottom_sheet_location": "LOCATION",
+  "exif_bottom_sheet_no_description": "No description",
   "exif_bottom_sheet_people": "PEOPLE",
   "exif_bottom_sheet_person_add_person": "Add name",
   "exit_slideshow": "Exit Slideshow",

mise.toml

@@ -1,7 +1,7 @@
 [tools]
 node = "22.20.0"
 flutter = "3.35.5"
-pnpm = "10.18.0"
+pnpm = "10.18.1"
 
 [tools."github:CQLabs/homebrew-dcm"]
 version = "1.30.0"

mobile/ios/Runner.xcodeproj/project.pbxproj

@@ -131,10 +131,13 @@
 /* End PBXFileSystemSynchronizedBuildFileExceptionSet section */
 
 /* Begin PBXFileSystemSynchronizedRootGroup section */
+		B231F52D2E93A44A00BC45D1 /* Core */ = {
+			isa = PBXFileSystemSynchronizedRootGroup;
+			path = Core;
+			sourceTree = "<group>";
+		};
 		B2CF7F8C2DDE4EBB00744BF6 /* Sync */ = {
 			isa = PBXFileSystemSynchronizedRootGroup;
-			exceptions = (
-			);
 			path = Sync;
 			sourceTree = "<group>";
 		};
@@ -247,6 +250,7 @@
 		97C146F01CF9000F007C117D /* Runner */ = {
 			isa = PBXGroup;
 			children = (
+				B231F52D2E93A44A00BC45D1 /* Core */,
 				B25D37792E72CA15008B6CA7 /* Connectivity */,
 				B21E34A62E5AF9760031FDB9 /* Background */,
 				B2CF7F8C2DDE4EBB00744BF6 /* Sync */,
@@ -331,6 +335,7 @@
 				F0B57D482DF764BE00DC5BCC /* PBXTargetDependency */,
 			);
 			fileSystemSynchronizedGroups = (
+				B231F52D2E93A44A00BC45D1 /* Core */,
 				B2CF7F8C2DDE4EBB00744BF6 /* Sync */,
 			);
 			name = Runner;
@@ -521,10 +526,14 @@
 			inputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-resources-${CONFIGURATION}-input-files.xcfilelist",
 			);
+			inputPaths = (
+			);
 			name = "[CP] Copy Pods Resources";
 			outputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-resources-${CONFIGURATION}-output-files.xcfilelist",
 			);
+			outputPaths = (
+			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-resources.sh\"\n";
@@ -553,10 +562,14 @@
 			inputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-input-files.xcfilelist",
 			);
+			inputPaths = (
+			);
 			name = "[CP] Embed Pods Frameworks";
 			outputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-output-files.xcfilelist",
 			);
+			outputPaths = (
+			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh\"\n";

mobile/ios/Runner/AppDelegate.swift

@@ -20,7 +20,7 @@ import UIKit
 
     GeneratedPluginRegistrant.register(with: self)
     let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
-    AppDelegate.registerPlugins(binaryMessenger: controller.binaryMessenger)
+    AppDelegate.registerPlugins(with: controller.engine)
     BackgroundServicePlugin.register(with: self.registrar(forPlugin: "BackgroundServicePlugin")!)
 
     BackgroundServicePlugin.registerBackgroundProcessing()
@@ -51,9 +51,13 @@ import UIKit
     return super.application(application, didFinishLaunchingWithOptions: launchOptions)
   }
   
-  public static func registerPlugins(binaryMessenger: FlutterBinaryMessenger) {
+  public static func registerPlugins(with engine: FlutterEngine) {
-    NativeSyncApiSetup.setUp(binaryMessenger: binaryMessenger, api: NativeSyncApiImpl())
+    NativeSyncApiImpl.register(with: engine.registrar(forPlugin: NativeSyncApiImpl.name)!)
-    ThumbnailApiSetup.setUp(binaryMessenger: binaryMessenger, api: ThumbnailApiImpl())
+    ThumbnailApiSetup.setUp(binaryMessenger: engine.binaryMessenger, api: ThumbnailApiImpl())
-    BackgroundWorkerFgHostApiSetup.setUp(binaryMessenger: binaryMessenger, api: BackgroundWorkerApiImpl())
+    BackgroundWorkerFgHostApiSetup.setUp(binaryMessenger: engine.binaryMessenger, api: BackgroundWorkerApiImpl())
+  }
+  
+  public static func cancelPlugins(with engine: FlutterEngine) {
+    (engine.valuePublished(byPlugin: NativeSyncApiImpl.name) as? NativeSyncApiImpl)?.detachFromEngine()
   }
 }

mobile/ios/Runner/Background/BackgroundWorker.swift

@@ -95,7 +95,7 @@ class BackgroundWorker: BackgroundWorkerBgHostApi {
     // Register plugins in the new engine
     GeneratedPluginRegistrant.register(with: engine)
     // Register custom plugins
-    AppDelegate.registerPlugins(binaryMessenger: engine.binaryMessenger)
+    AppDelegate.registerPlugins(with: engine)
     flutterApi = BackgroundWorkerFlutterApi(binaryMessenger: engine.binaryMessenger)
     BackgroundWorkerBgHostApiSetup.setUp(binaryMessenger: engine.binaryMessenger, api: self)
     
@@ -168,6 +168,7 @@ class BackgroundWorker: BackgroundWorkerBgHostApi {
     }
     
     isComplete = true
+    AppDelegate.cancelPlugins(with: engine)
     engine.destroyContext()
     flutterApi = nil
     completionHandler(success)

mobile/ios/Runner/Core/ImmichPlugin.swift

@@ -0,0 +1,17 @@
+class ImmichPlugin: NSObject {
+  var detached: Bool
+  
+  override init() {
+    detached = false
+    super.init()
+  }
+  
+  func detachFromEngine() {
+    self.detached = true
+  }
+  
+  func completeWhenActive<T>(for completion: @escaping (T) -> Void, with value: T) {
+    guard !self.detached else { return }
+    completion(value)
+  }
+}

mobile/ios/Runner/Sync/MessagesImpl.swift

@@ -17,13 +17,25 @@ struct AssetWrapper: Hashable, Equatable {
   }
 }
 
-class NativeSyncApiImpl: NativeSyncApi {
+class NativeSyncApiImpl: ImmichPlugin, NativeSyncApi, FlutterPlugin {
+  static let name = "NativeSyncApi"
+  
+  static func register(with registrar: any FlutterPluginRegistrar) {
+    let instance = NativeSyncApiImpl()
+    NativeSyncApiSetup.setUp(binaryMessenger: registrar.messenger(), api: instance)
+    registrar.publish(instance)
+  }
+  
+  func detachFromEngine(for registrar: any FlutterPluginRegistrar) {
+    super.detachFromEngine()
+  }
+  
   private let defaults: UserDefaults
   private let changeTokenKey = "immich:changeToken"
   private let albumTypes: [PHAssetCollectionType] = [.album, .smartAlbum]
   private let recoveredAlbumSubType = 1000000219
   
-  private var hashTask: Task<Void, Error>?
+  private var hashTask: Task<Void?, Error>?
   private static let hashCancelledCode = "HASH_CANCELLED"
   private static let hashCancelled = Result<[HashResult], Error>.failure(PigeonError(code: hashCancelledCode, message: "Hashing cancelled", details: nil))
   
@@ -272,7 +284,7 @@ class NativeSyncApiImpl: NativeSyncApi {
       }
       
       if Task.isCancelled {
-        return completion(Self.hashCancelled)
+        return self?.completeWhenActive(for: completion, with: Self.hashCancelled)
       }
       
       await withTaskGroup(of: HashResult?.self) { taskGroup in
@@ -280,7 +292,7 @@ class NativeSyncApiImpl: NativeSyncApi {
         results.reserveCapacity(assets.count)
         for asset in assets {
           if Task.isCancelled {
-            return completion(Self.hashCancelled)
+            return self?.completeWhenActive(for: completion, with: Self.hashCancelled)
           }
           taskGroup.addTask {
             guard let self = self else { return nil }
@@ -290,7 +302,7 @@ class NativeSyncApiImpl: NativeSyncApi {
         
         for await result in taskGroup {
           guard let result = result else {
-            return completion(Self.hashCancelled)
+            return self?.completeWhenActive(for: completion, with: Self.hashCancelled)
           }
           results.append(result)
         }
@@ -299,7 +311,7 @@ class NativeSyncApiImpl: NativeSyncApi {
           results.append(HashResult(assetId: missing, error: "Asset not found in library", hash: nil))
         }
         
-        completion(.success(results))
+        return self?.completeWhenActive(for: completion, with: .success(results))
       }
     }
   }

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

@@ -56,6 +56,8 @@ sealed class BaseAsset {
 
   // Overridden in subclasses
   AssetState get storage;
+  String? get localId;
+  String? get remoteId;
   String get heroTag;
 
   @override

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

@@ -2,12 +2,12 @@ part of 'base_asset.model.dart';
 
 class LocalAsset extends BaseAsset {
   final String id;
-  final String? remoteId;
+  final String? remoteAssetId;
   final int orientation;
 
   const LocalAsset({
     required this.id,
-    this.remoteId,
+    String? remoteId,
     required super.name,
     super.checksum,
     required super.type,
@@ -19,7 +19,13 @@ class LocalAsset extends BaseAsset {
     super.isFavorite = false,
     super.livePhotoVideoId,
     this.orientation = 0,
-  });
+  }) : remoteAssetId = remoteId;
+
+  @override
+  String? get localId => id;
+
+  @override
+  String? get remoteId => remoteAssetId;
 
   @override
   AssetState get storage => remoteId == null ? AssetState.local : AssetState.merged;

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

@@ -5,7 +5,7 @@ enum AssetVisibility { timeline, hidden, archive, locked }
 // Model for an asset stored in the server
 class RemoteAsset extends BaseAsset {
   final String id;
-  final String? localId;
+  final String? localAssetId;
   final String? thumbHash;
   final AssetVisibility visibility;
   final String ownerId;
@@ -13,7 +13,7 @@ class RemoteAsset extends BaseAsset {
 
   const RemoteAsset({
     required this.id,
-    this.localId,
+    String? localId,
     required super.name,
     required this.ownerId,
     required super.checksum,
@@ -28,7 +28,13 @@ class RemoteAsset extends BaseAsset {
     this.visibility = AssetVisibility.timeline,
     super.livePhotoVideoId,
     this.stackId,
-  });
+  }) : localAssetId = localId;
+
+  @override
+  String? get localId => localAssetId;
+
+  @override
+  String? get remoteId => id;
 
   @override
   AssetState get storage => localId == null ? AssetState.remote : AssetState.merged;

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

@@ -192,6 +192,7 @@ class BackgroundWorkerBgService extends BackgroundWorkerFlutterApi {
       _cancellationToken.cancel();
       _logger.info("Cleaning up background worker");
       final cleanupFutures = [
+        nativeSyncApi?.cancelHashing(),
         workerManager.dispose().catchError((_) async {
           // Discard any errors on the dispose call
           return;
@@ -201,7 +202,6 @@ class BackgroundWorkerBgService extends BackgroundWorkerFlutterApi {
         _drift.close(),
         _driftLogger.close(),
         backgroundSyncManager?.cancel(),
-        nativeSyncApi?.cancelHashing(),
       ];
 
       if (_isar.isOpen) {

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

@@ -120,6 +120,10 @@ class RemoteAlbumService {
     return _repository.getSharedUsers(albumId);
   }
 
+  Future<AlbumUserRole?> getUserRole(String albumId, String userId) {
+    return _repository.getUserRole(albumId, userId);
+  }
+
   Future<List<RemoteAsset>> getAssets(String albumId) {
     return _repository.getAssets(albumId);
   }

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

@@ -221,6 +221,15 @@ class DriftRemoteAlbumRepository extends DriftDatabaseRepository {
         .get();
   }
 
+  Future<AlbumUserRole?> getUserRole(String albumId, String userId) async {
+    final query = _db.remoteAlbumUserEntity.select()
+      ..where((row) => row.albumId.equals(albumId) & row.userId.equals(userId))
+      ..limit(1);
+
+    final result = await query.getSingleOrNull();
+    return result?.role;
+  }
+
   Future<List<RemoteAsset>> getAssets(String albumId) {
     final query = _db.remoteAlbumAssetEntity.select().join([
       innerJoin(_db.remoteAssetEntity, _db.remoteAssetEntity.id.equalsExp(_db.remoteAlbumAssetEntity.assetId)),

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

@@ -169,9 +169,11 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
     context.pushRoute(const DriftActivitiesRoute());
   }
 
-  void showOptionSheet(BuildContext context) {
+  Future<void> showOptionSheet(BuildContext context) async {
     final user = ref.watch(currentUserProvider);
     final isOwner = user != null ? user.id == _album.ownerId : false;
+    final canAddPhotos =
+        await ref.read(remoteAlbumServiceProvider).getUserRole(_album.id, user?.id ?? '') == AlbumUserRole.editor;
 
     showModalBottomSheet(
       context: context,
@@ -193,22 +195,30 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
                   context.pop();
                 }
               : null,
-          onAddPhotos: () async {
+          onAddPhotos: isOwner || canAddPhotos
+              ? () async {
                   await addAssets(context);
                   context.pop();
-          },
+                }
-          onToggleAlbumOrder: () async {
+              : null,
+          onToggleAlbumOrder: isOwner
+              ? () async {
                   await toggleAlbumOrder();
                   context.pop();
-          },
+                }
-          onEditAlbum: () async {
+              : null,
+          onEditAlbum: isOwner
+              ? () async {
                   context.pop();
                   await showEditTitleAndDescription(context);
-          },
+                }
-          onCreateSharedLink: () async {
+              : null,
+          onCreateSharedLink: isOwner
+              ? () async {
                   context.pop();
                   context.pushRoute(SharedLinkEditRoute(albumId: _album.id));
-          },
+                }
+              : null,
           onShowOptions: () {
             context.pop();
             context.pushRoute(const DriftAlbumOptionsRoute());
@@ -220,6 +230,9 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
 
   @override
   Widget build(BuildContext context) {
+    final user = ref.watch(currentUserProvider);
+    final isOwner = user != null ? user.id == _album.ownerId : false;
+
     return PopScope(
       onPopInvokedWithResult: (didPop, _) {
         if (didPop) {
@@ -243,8 +256,8 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
           appBar: RemoteAlbumSliverAppBar(
             icon: Icons.photo_album_outlined,
             onShowOptions: () => showOptionSheet(context),
-            onToggleAlbumOrder: () => toggleAlbumOrder(),
+            onToggleAlbumOrder: isOwner ? () => toggleAlbumOrder() : null,
-            onEditTitle: () => showEditTitleAndDescription(context),
+            onEditTitle: isOwner ? () => showEditTitleAndDescription(context) : null,
             onActivity: () => showActivity(context),
           ),
           bottomSheet: RemoteAlbumBottomSheet(album: _album),

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

@@ -8,6 +8,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_bu
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/asset_grid/delete_dialog.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 /// This delete action has the following behavior:
@@ -22,7 +23,17 @@ class DeleteLocalActionButton extends ConsumerWidget {
       return;
     }
 
-    final result = await ref.read(actionProvider.notifier).deleteLocal(source);
+    bool? backedUpOnly = await showDialog<bool>(
+      context: context,
+      builder: (BuildContext context) => DeleteLocalOnlyDialog(onDeleteLocal: (_) {}),
+    );
+
+    if (backedUpOnly == null) {
+      // User cancelled the dialog
+      return;
+    }
+
+    final result = await ref.read(actionProvider.notifier).deleteLocal(source, backedUpOnly);
     ref.read(multiSelectProvider.notifier).reset();
 
     if (source == ActionSource.viewer) {

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

@@ -43,7 +43,7 @@ class ViewerBottomBar extends ConsumerWidget {
     final actions = <Widget>[
       const ShareActionButton(source: ActionSource.viewer),
       if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
-      if (asset.type == AssetType.image) const EditImageActionButton(),
+      if (asset.type == AssetType.image && isOwner) const EditImageActionButton(),
       if (isOwner) ...[
         if (asset.hasRemote && isOwner && isArchived)
           const UnArchiveActionButton(source: ActionSource.viewer)

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

@@ -140,6 +140,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
 
     final exifInfo = ref.watch(currentAssetExifProvider).valueOrNull;
     final cameraTitle = _getCameraInfoTitle(exifInfo);
+    final isOwner = ref.watch(currentUserProvider)?.id == (asset is RemoteAsset ? asset.ownerId : null);
 
     return SliverList.list(
       children: [
@@ -147,10 +148,10 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         _SheetTile(
           title: _getDateTime(context, asset),
           titleStyle: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600),
-          trailing: asset.hasRemote ? const Icon(Icons.edit, size: 18) : null,
+          trailing: asset.hasRemote && isOwner ? const Icon(Icons.edit, size: 18) : null,
-          onTap: asset.hasRemote ? () async => await _editDateTime(context, ref) : null,
+          onTap: asset.hasRemote && isOwner ? () async => await _editDateTime(context, ref) : null,
         ),
-        if (exifInfo != null) _SheetAssetDescription(exif: exifInfo),
+        if (exifInfo != null) _SheetAssetDescription(exif: exifInfo, isEditable: isOwner),
         const SheetPeopleDetails(),
         const SheetLocationDetails(),
         // Details header
@@ -265,8 +266,9 @@ class _SheetTile extends ConsumerWidget {
 
 class _SheetAssetDescription extends ConsumerStatefulWidget {
   final ExifInfo exif;
+  final bool isEditable;
 
-  const _SheetAssetDescription({required this.exif});
+  const _SheetAssetDescription({required this.exif, this.isEditable = true});
 
   @override
   ConsumerState<_SheetAssetDescription> createState() => _SheetAssetDescriptionState();
@@ -312,19 +314,24 @@ class _SheetAssetDescriptionState extends ConsumerState<_SheetAssetDescription>
 
     // Update controller text when EXIF data changes
     final currentDescription = currentExifInfo?.description ?? '';
+    final hintText = (widget.isEditable ? 'exif_bottom_sheet_description' : 'exif_bottom_sheet_no_description').t(
+      context: context,
+    );
     if (_controller.text != currentDescription && !_descriptionFocus.hasFocus) {
       _controller.text = currentDescription;
     }
 
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8),
+      child: IgnorePointer(
+        ignoring: !widget.isEditable,
         child: TextField(
           controller: _controller,
           keyboardType: TextInputType.multiline,
           focusNode: _descriptionFocus,
           maxLines: null, // makes it grow as text is added
           decoration: InputDecoration(
-          hintText: 'exif_bottom_sheet_description'.t(context: context),
+            hintText: hintText,
             border: InputBorder.none,
             enabledBorder: InputBorder.none,
             focusedBorder: InputBorder.none,
@@ -334,6 +341,7 @@ class _SheetAssetDescriptionState extends ConsumerState<_SheetAssetDescription>
           ),
           onTapOutside: (_) => saveDescription(currentExifInfo?.description),
         ),
+      ),
     );
   }
 }

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

@@ -45,7 +45,8 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
         (previousRouteName != TabShellRoute.name || tabRoute == TabEnum.search) &&
         previousRouteName != AssetViewerRoute.name &&
         previousRouteName != null &&
-        previousRouteName != LocalTimelineRoute.name;
+        previousRouteName != LocalTimelineRoute.name &&
+        isOwner;
 
     final isShowingSheet = ref.watch(assetViewerProvider.select((state) => state.showingBottomSheet));
     int opacity = ref.watch(assetViewerProvider.select((state) => state.backgroundOpacity));

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

@@ -24,6 +24,7 @@ import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_shee
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 class RemoteAlbumBottomSheet extends ConsumerStatefulWidget {
@@ -53,6 +54,7 @@ class _RemoteAlbumBottomSheetState extends ConsumerState<RemoteAlbumBottomSheet>
   Widget build(BuildContext context) {
     final multiselect = ref.watch(multiSelectProvider);
     final isTrashEnable = ref.watch(serverInfoProvider.select((state) => state.serverFeatures.trash));
+    final ownsAlbum = ref.watch(currentUserProvider)?.id == widget.album.ownerId;
 
     Future<void> addAssetsToAlbum(RemoteAlbum album) async {
       final selectedAssets = multiselect.selectedAssets;
@@ -93,9 +95,13 @@ class _RemoteAlbumBottomSheetState extends ConsumerState<RemoteAlbumBottomSheet>
         const ShareActionButton(source: ActionSource.timeline),
         if (multiselect.hasRemote) ...[
           const ShareLinkActionButton(source: ActionSource.timeline),
+
+          if (ownsAlbum) ...[
             const ArchiveActionButton(source: ActionSource.timeline),
             const FavoriteActionButton(source: ActionSource.timeline),
+          ],
           const DownloadActionButton(source: ActionSource.timeline),
+          if (ownsAlbum) ...[
             isTrashEnable
                 ? const TrashActionButton(source: ActionSource.timeline)
                 : const DeletePermanentActionButton(source: ActionSource.timeline),
@@ -105,16 +111,19 @@ class _RemoteAlbumBottomSheetState extends ConsumerState<RemoteAlbumBottomSheet>
             if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
             if (multiselect.hasStacked) const UnStackActionButton(source: ActionSource.timeline),
           ],
+        ],
         if (multiselect.hasLocal) ...[
           const DeleteLocalActionButton(source: ActionSource.timeline),
           const UploadActionButton(source: ActionSource.timeline),
         ],
-        RemoveFromAlbumActionButton(source: ActionSource.timeline, albumId: widget.album.id),
+        if (ownsAlbum) RemoveFromAlbumActionButton(source: ActionSource.timeline, albumId: widget.album.id),
       ],
-      slivers: [
+      slivers: ownsAlbum
+          ? [
               const AddToAlbumHeader(),
               AlbumSelector(onAlbumSelected: addAssetsToAlbum, onKeyboardExpanded: onKeyboardExpand),
-      ],
+            ]
+          : null,
     );
   }
 }

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

@@ -260,8 +260,15 @@ class ActionNotifier extends Notifier<void> {
     }
   }
 
-  Future<ActionResult> deleteLocal(ActionSource source) async {
+  Future<ActionResult> deleteLocal(ActionSource source, bool backedUpOnly) async {
-    final ids = _getLocalIdsForSource(source);
+    final List<String> ids;
+    if (backedUpOnly) {
+      final assets = _getAssets(source);
+      ids = assets.where((asset) => asset.storage == AssetState.merged).map((asset) => asset.localId!).toList();
+    } else {
+      ids = _getLocalIdsForSource(source);
+    }
+
     try {
       final deletedCount = await _service.deleteLocal(ids);
       return ActionResult(count: deletedCount, success: true);

mobile/lib/repositories/asset_media.repository.dart

@@ -22,6 +22,7 @@ final assetMediaRepositoryProvider = Provider((ref) => AssetMediaRepository(ref.
 
 class AssetMediaRepository {
   final AssetApiRepository _assetApiRepository;
+
   static final Logger _log = Logger("AssetMediaRepository");
 
   const AssetMediaRepository(this._assetApiRepository);

mobile/lib/widgets/asset_grid/delete_dialog.dart

@@ -22,12 +22,12 @@ class DeleteLocalOnlyDialog extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     void onDeleteBackedUpOnly() {
-      context.pop();
+      context.pop(true);
       onDeleteLocal(true);
     }
 
     void onForceDelete() {
-      context.pop();
+      context.pop(false);
       onDeleteLocal(false);
     }
 
@@ -36,26 +36,44 @@ class DeleteLocalOnlyDialog extends StatelessWidget {
       title: const Text("delete_dialog_title").tr(),
       content: const Text("delete_dialog_alert_local_non_backed_up").tr(),
       actions: [
-        TextButton(
+        SizedBox(
+          width: double.infinity,
+          height: 48,
+          child: FilledButton(
             onPressed: () => context.pop(),
-          child: Text(
+            style: FilledButton.styleFrom(
-            "cancel",
+              backgroundColor: context.colorScheme.surfaceDim,
-            style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold),
+              foregroundColor: context.primaryColor,
-          ).tr(),
             ),
-        TextButton(
+            child: const Text("cancel", style: TextStyle(fontWeight: FontWeight.bold)).tr(),
+          ),
+        ),
+        const SizedBox(height: 8),
+        SizedBox(
+          width: double.infinity,
+          height: 48,
+
+          child: FilledButton(
             onPressed: onDeleteBackedUpOnly,
-          child: Text(
+            style: FilledButton.styleFrom(
+              backgroundColor: context.colorScheme.errorContainer,
+              foregroundColor: context.colorScheme.onErrorContainer,
+            ),
+            child: const Text(
               "delete_local_dialog_ok_backed_up_only",
-            style: TextStyle(color: context.colorScheme.tertiary, fontWeight: FontWeight.bold),
+              style: TextStyle(fontWeight: FontWeight.bold),
             ).tr(),
           ),
-        TextButton(
+        ),
+        const SizedBox(height: 8),
+        SizedBox(
+          width: double.infinity,
+          height: 48,
+          child: FilledButton(
             onPressed: onForceDelete,
-          child: Text(
+            style: FilledButton.styleFrom(backgroundColor: Colors.red[400], foregroundColor: Colors.white),
-            "delete_local_dialog_ok_force",
+            child: const Text("delete_local_dialog_ok_force", style: TextStyle(fontWeight: FontWeight.bold)).tr(),
-            style: TextStyle(color: Colors.red[400], fontWeight: FontWeight.bold),
+          ),
-          ).tr(),
         ),
       ],
     );

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "description": "Monorepo for Immich",
   "private": true,
-  "packageManager": "pnpm@10.18.0+sha512.e804f889f1cecc40d572db084eec3e4881739f8dec69c0ff10d2d1beff9a4e309383ba27b5b750059d7f4c149535b6cd0d2cb1ed3aeb739239a4284a68f40cfa",
+  "packageManager": "pnpm@10.18.1+sha512.77a884a165cbba2d8d1c19e3b4880eee6d2fcabd0d879121e282196b80042351d5eb3ca0935fa599da1dc51265cc68816ad2bddd2a2de5ea9fdf92adbec7cd34",
   "engines": {
     "pnpm": ">=10.0.0"
   }

server/package.json

@@ -44,14 +44,14 @@
     "@nestjs/websockets": "^11.0.4",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-async-hooks": "^2.0.0",
-    "@opentelemetry/exporter-prometheus": "^0.205.0",
+    "@opentelemetry/exporter-prometheus": "^0.206.0",
-    "@opentelemetry/instrumentation-http": "^0.205.0",
+    "@opentelemetry/instrumentation-http": "^0.206.0",
-    "@opentelemetry/instrumentation-ioredis": "^0.53.0",
+    "@opentelemetry/instrumentation-ioredis": "^0.54.0",
-    "@opentelemetry/instrumentation-nestjs-core": "^0.52.0",
+    "@opentelemetry/instrumentation-nestjs-core": "^0.53.0",
-    "@opentelemetry/instrumentation-pg": "^0.58.0",
+    "@opentelemetry/instrumentation-pg": "^0.59.0",
     "@opentelemetry/resources": "^2.0.1",
     "@opentelemetry/sdk-metrics": "^2.0.1",
-    "@opentelemetry/sdk-node": "^0.205.0",
+    "@opentelemetry/sdk-node": "^0.206.0",
     "@opentelemetry/semantic-conventions": "^1.34.0",
     "@react-email/components": "^0.5.0",
     "@react-email/render": "^1.1.2",
@@ -78,7 +78,7 @@
     "ioredis": "^5.3.2",
     "js-yaml": "^4.1.0",
     "kysely": "0.28.2",
-    "kysely-postgres-js": "^2.0.0",
+    "kysely-postgres-js": "^3.0.0",
     "lodash": "^4.17.21",
     "luxon": "^3.4.2",
     "mnemonist": "^0.40.3",

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

@@ -89,10 +89,10 @@
 
   let { isViewing: showAssetViewer, asset: viewingAsset, gridScrollTarget } = assetViewingStore;
 
-  let element: HTMLElement | undefined = $state();
+  let scrollableElement: HTMLElement | undefined = $state();
 
   let timelineElement: HTMLElement | undefined = $state();
-  let showSkeleton = $state(true);
+  let invisible = $state(true);
   // 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);
@@ -124,29 +124,22 @@
     timelineManager.setLayoutOptions(layoutOptions);
   });
 
-  const scrollTo = (top: number) => {
+  $effect(() => {
-    if (element) {
+    timelineManager.scrollableElement = scrollableElement;
-      element.scrollTo({ top });
+  });
-    }
-  };
-  const scrollTop = (top: number) => {
-    if (element) {
-      element.scrollTop = top;
-    }
-  };
 
   const scrollToTop = () => {
-    scrollTo(0);
+    timelineManager.scrollTo(0);
   };
 
   const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => monthGroup.findAssetAbsolutePosition(assetId);
 
   const assetIsVisible = (assetTop: number): boolean => {
-    if (!element) {
+    if (!scrollableElement) {
       return false;
     }
 
-    const { clientHeight, scrollTop } = element;
+    const { clientHeight, scrollTop } = scrollableElement;
     return assetTop >= scrollTop && assetTop < scrollTop + clientHeight;
   };
 
@@ -163,8 +156,7 @@
       return true;
     }
 
-    scrollTo(height);
+    timelineManager.scrollTo(height);
-    updateSlidingWindow();
     return true;
   };
 
@@ -174,8 +166,7 @@
       return false;
     }
     const height = getAssetHeight(asset.id, monthGroup);
-    scrollTo(height);
+    timelineManager.scrollTo(height);
-    updateSlidingWindow();
     return true;
   };
 
@@ -189,7 +180,7 @@
       // if the asset is not found, scroll to the top
       scrollToTop();
     }
-    showSkeleton = false;
+    invisible = false;
   };
 
   beforeNavigate(() => (timelineManager.suspendTransitions = true));
@@ -216,7 +207,7 @@
         } else {
           scrollToTop();
         }
-        showSkeleton = false;
+        invisible = false;
       }, 500);
     }
   };
@@ -230,13 +221,12 @@
 
   const updateIsScrolling = () => (timelineManager.scrolling = true);
   // note: don't throttle, debounch, 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;
+      invisible = false;
     }
   });
 
@@ -246,11 +236,13 @@
   };
 
   const getMaxScroll = () => {
-    if (!element || !timelineElement) {
+    if (!scrollableElement || !timelineElement) {
       return 0;
     }
     return (
-      timelineManager.topSectionHeight + bottomSectionHeight + (timelineElement.clientHeight - element.clientHeight)
+      timelineManager.topSectionHeight +
+      bottomSectionHeight +
+      (timelineElement.clientHeight - scrollableElement.clientHeight)
     );
   };
 
@@ -260,7 +252,7 @@
     const delta = monthGroup.height * monthGroupScrollPercent;
     const scrollToTop = (topOffset + delta) * maxScrollPercent;
 
-    scrollTop(scrollToTop);
+    timelineManager.scrollTo(scrollToTop);
   };
 
   // note: don't throttle, debounce, or otherwise make this function async - it causes flicker
@@ -272,7 +264,7 @@
       // edge case - scroll limited due to size of content, must adjust - use use the overall percent instead
       const maxScroll = getMaxScroll();
       const offset = maxScroll * overallScrollPercent;
-      scrollTop(offset);
+      timelineManager.scrollTo(offset);
     } else {
       const monthGroup = timelineManager.months.find(
         ({ yearMonth: { year, month } }) => year === scrubberMonth.year && month === scrubberMonth.month,
@@ -288,26 +280,26 @@
   const handleTimelineScroll = () => {
     isInLeadOutSection = false;
 
-    if (!element) {
+    if (!scrollableElement) {
       return;
     }
 
     if (timelineManager.timelineHeight < timelineManager.viewportHeight * 2) {
       // edge case - scroll limited due to size of content, must adjust -  use the overall percent instead
       const maxScroll = getMaxScroll();
-      timelineScrollPercent = Math.min(1, element.scrollTop / maxScroll);
+      timelineScrollPercent = Math.min(1, scrollableElement.scrollTop / maxScroll);
 
       viewportTopMonth = undefined;
       viewportTopMonthScrollPercent = 0;
     } else {
-      let top = element.scrollTop;
+      let top = scrollableElement.scrollTop;
       if (top < timelineManager.topSectionHeight) {
         // in the lead-in area
         viewportTopMonth = undefined;
         viewportTopMonthScrollPercent = 0;
         const maxScroll = getMaxScroll();
 
-        timelineScrollPercent = Math.min(1, element.scrollTop / maxScroll);
+        timelineScrollPercent = Math.min(1, scrollableElement.scrollTop / maxScroll);
         return;
       }
 
@@ -414,7 +406,7 @@
     onSelect(asset);
 
     if (singleSelect) {
-      scrollTop(0);
+      timelineManager.scrollTo(0);
       return;
     }
 
@@ -564,10 +556,10 @@
       if (evt.key === 'ArrowUp') {
         amount = -amount;
         if (shiftKeyIsDown) {
-          element?.scrollBy({ top: amount, behavior: 'smooth' });
+          scrollableElement?.scrollBy({ top: amount, behavior: 'smooth' });
         }
       } else if (evt.key === 'ArrowDown') {
-        element?.scrollBy({ top: amount, behavior: 'smooth' });
+        scrollableElement?.scrollBy({ top: amount, behavior: 'smooth' });
       }
     }}
   />
@@ -580,19 +572,19 @@
   style:margin-right={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
   tabindex="-1"
   bind:clientHeight={timelineManager.viewportHeight}
-  bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
+  bind:clientWidth={timelineManager.viewportWidth}
-  bind:this={element}
+  bind:this={scrollableElement}
-  onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
+  onscroll={() => (handleTimelineScroll(), timelineManager.updateSlidingWindow(), updateIsScrolling())}
 >
   <section
     bind:this={timelineElement}
     id="virtual-timeline"
-    class:invisible={showSkeleton}
+    class:invisible
     style:height={timelineManager.timelineHeight + 'px'}
   >
     <section
       use:resizeObserver={topSectionResizeObserver}
-      class:invisible={showSkeleton}
+      class:invisible
       style:position="absolute"
       style:left="0"
       style:right="0"
@@ -615,10 +607,7 @@
           style:transform={`translate3d(0,${absoluteHeight}px,0)`}
           style:width="100%"
         >
-          <Skeleton
+          <Skeleton {invisible} height={monthGroup.height} title={monthGroup.monthGroupTitle} />
-            height={monthGroup.height - monthGroup.timelineManager.headerHeight}
-            title={monthGroup.monthGroupTitle}
-          />
         </div>
       {:else if display}
         <div
@@ -658,7 +647,7 @@
 
 <Portal target="body">
   {#if $showAssetViewer}
-    <TimelineAssetViewer bind:showSkeleton {timelineManager} {removeAction} {withStacked} {isShared} {album} {person} />
+    <TimelineAssetViewer bind:invisible {timelineManager} {removeAction} {withStacked} {isShared} {album} {person} />
   {/if}
 </Portal>
 

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

@@ -13,7 +13,7 @@
 
   interface Props {
     timelineManager: TimelineManager;
-    showSkeleton: boolean;
+    invisible: boolean;
     withStacked?: boolean;
     isShared?: boolean;
     album?: AlbumResponseDto | null;
@@ -30,7 +30,7 @@
 
   let {
     timelineManager,
-    showSkeleton = $bindable(false),
+    invisible = $bindable(false),
     removeAction,
     withStacked = false,
     isShared = false,
@@ -81,7 +81,7 @@
 
   const handleClose = async (asset: { id: string }) => {
     assetViewingStore.showAssetViewer(false);
-    showSkeleton = true;
+    invisible = true;
     $gridScrollTarget = { at: asset.id };
     await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
   };

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

@@ -14,7 +14,7 @@
 
   import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
   import { Icon } from '@immich/ui';
-  import type { Snippet } from 'svelte';
+  import { type Snippet } from 'svelte';
   import { flip } from 'svelte/animate';
   import { scale } from 'svelte/transition';
 

web/src/lib/elements/Skeleton.svelte

@@ -2,24 +2,21 @@
   interface Props {
     height: number;
     title?: string;
+    invisible?: boolean;
   }
 
-  let { height = 0, title }: Props = $props();
+  let { height = 0, title, invisible = false }: Props = $props();
 </script>
 
-<div class="overflow-clip" style:height={height + 'px'}>
+<div class={['overflow-clip', { invisible }]} style:height={height + 'px'}>
   {#if title}
     <div
-      class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
+      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"
     >
       {title}
     </div>
   {/if}
-  <div
+  <div class="animate-pulse 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>
@@ -47,4 +44,7 @@
       0s linear 0.1s forwards delayedVisibility,
       pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
+  .invisible [data-skeleton] {
+    visibility: hidden !important;
+  }
 </style>

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

@@ -4,7 +4,6 @@ import { getTimeBucket } from '@immich/sdk';
 import type { MonthGroup } from '../month-group.svelte';
 import type { TimelineManager } from '../timeline-manager.svelte';
 import type { TimelineManagerOptions } from '../types';
-import { layoutMonthGroup } from './layout-support.svelte';
 
 export async function loadFromTimeBuckets(
   timelineManager: TimelineManager,
@@ -55,6 +54,4 @@ export async function loadFromTimeBuckets(
       )}`,
     );
   }
-
-  layoutMonthGroup(timelineManager, monthGroup);
 }

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

@@ -36,6 +36,7 @@ export class MonthGroup {
 
   #initialCount: number = 0;
   #sortOrder: AssetOrder = AssetOrder.Desc;
+  percent: number = $state(0);
 
   assetsCount: number = $derived(
     this.isLoaded
@@ -241,7 +242,6 @@ export class MonthGroup {
     if (this.#height === height) {
       return;
     }
-    let needsIntersectionUpdate = false;
     const timelineManager = this.timelineManager;
     const index = timelineManager.months.indexOf(this);
     const heightDelta = height - this.#height;
@@ -261,11 +261,21 @@ export class MonthGroup {
       const newTop = monthGroup.#top + heightDelta;
       if (monthGroup.#top !== newTop) {
         monthGroup.#top = newTop;
-        needsIntersectionUpdate = true;
       }
     }
-    if (needsIntersectionUpdate) {
+    if (!timelineManager.viewportTopMonthIntersection) {
-      timelineManager.updateIntersections();
+      return;
+    }
+    const { month, monthBottomViewportRatio, viewportTopRatioInMonth } = timelineManager.viewportTopMonthIntersection;
+    const currentIndex = month ? timelineManager.months.indexOf(month) : -1;
+    if (!month || currentIndex <= 0 || index > currentIndex) {
+      return;
+    }
+    if (index < currentIndex || monthBottomViewportRatio < 1) {
+      timelineManager.scrollBy(heightDelta);
+    } else if (index === currentIndex) {
+      const scrollTo = this.top + height * viewportTopRatioInMonth;
+      timelineManager.scrollTo(scrollTo);
     }
   }
 

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

@@ -4,6 +4,7 @@ import { AbortError } from '$lib/utils';
 import { fromISODateTimeUTCToObject } from '$lib/utils/timeline-util';
 import { type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { timelineAssetFactory, toResponseDto } from '@test-data/factories/asset-factory';
+import { tick } from 'svelte';
 import { TimelineManager } from './timeline-manager.svelte';
 import type { TimelineAsset } from './types';
 
@@ -64,11 +65,12 @@ describe('TimelineManager', () => {
 
       sdkMock.getTimeBucket.mockImplementation(({ timeBucket }) => Promise.resolve(bucketAssetsResponse[timeBucket]));
       await timelineManager.updateViewport({ width: 1588, height: 1000 });
+      await tick();
     });
 
     it('should load months in viewport', () => {
       expect(sdkMock.getTimeBuckets).toBeCalledTimes(1);
-      expect(sdkMock.getTimeBucket).toHaveBeenCalledTimes(3);
+      expect(sdkMock.getTimeBucket).toHaveBeenCalledTimes(2);
     });
 
     it('calculates month height', () => {
@@ -82,13 +84,13 @@ describe('TimelineManager', () => {
         expect.arrayContaining([
           expect.objectContaining({ year: 2024, month: 3, height: 165.5 }),
           expect.objectContaining({ year: 2024, month: 2, height: 11_996 }),
-          expect.objectContaining({ year: 2024, month: 1, height: 48 }),
+          expect.objectContaining({ year: 2024, month: 1, height: 286 }),
         ]),
       );
     });
 
     it('calculates timeline height', () => {
-      expect(timelineManager.timelineHeight).toBe(12_209.5);
+      expect(timelineManager.timelineHeight).toBe(12_447.5);
     });
   });
 

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

@@ -5,7 +5,7 @@ import { authManager } from '$lib/managers/auth-manager.svelte';
 import { CancellableTask } from '$lib/utils/cancellable-task';
 import { toTimelineAsset, type TimelineDateTime, type TimelineYearMonth } from '$lib/utils/timeline-util';
 
-import { debounce, isEqual } from 'lodash-es';
+import { clamp, debounce, isEqual } from 'lodash-es';
 import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
 
 import { updateIntersectionMonthGroup } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
@@ -37,6 +37,13 @@ import type {
   Viewport,
 } from './types';
 
+type ViewportTopMonthIntersection = {
+  month: MonthGroup | undefined;
+  // Where viewport top intersects month (0 = month top, 1 = month bottom)
+  viewportTopRatioInMonth: number;
+  // Where month bottom is in viewport (0 = viewport top, 1 = viewport bottom)
+  monthBottomViewportRatio: number;
+};
 export class TimelineManager {
   isInitialized = $state(false);
   months: MonthGroup[] = $state([]);
@@ -49,6 +56,8 @@ export class TimelineManager {
   scrubberMonths: ScrubberMonth[] = $state([]);
   scrubberTimelineHeight: number = $state(0);
 
+  viewportTopMonthIntersection: ViewportTopMonthIntersection | undefined;
+
   visibleWindow = $derived.by(() => ({
     top: this.#scrollTop,
     bottom: this.#scrollTop + this.viewportHeight,
@@ -85,6 +94,8 @@ export class TimelineManager {
   #suspendTransitions = $state(false);
   #resetScrolling = debounce(() => (this.#scrolling = false), 1000);
   #resetSuspendTransitions = debounce(() => (this.suspendTransitions = false), 1000);
+  #updatingIntersections = false;
+  #scrollableElement: HTMLElement | undefined = $state();
 
   constructor() {}
 
@@ -98,6 +109,20 @@ export class TimelineManager {
     }
   }
 
+  set scrollableElement(element: HTMLElement | undefined) {
+    this.#scrollableElement = element;
+  }
+
+  scrollTo(top: number) {
+    this.#scrollableElement?.scrollTo({ top });
+    this.updateSlidingWindow();
+  }
+
+  scrollBy(y: number) {
+    this.#scrollableElement?.scrollBy(0, y);
+    this.updateSlidingWindow();
+  }
+
   #setHeaderHeight(value: number) {
     if (this.#headerHeight == value) {
       return false;
@@ -161,7 +186,8 @@ export class TimelineManager {
     const changed = value !== this.#viewportWidth;
     this.#viewportWidth = value;
     this.suspendTransitions = true;
-    void this.#updateViewportGeometry(changed);
+    this.#updateViewportGeometry(changed);
+    this.updateSlidingWindow();
   }
 
   get viewportWidth() {
@@ -223,20 +249,52 @@ export class TimelineManager {
     this.#websocketSupport = undefined;
   }
 
-  updateSlidingWindow(scrollTop: number) {
+  updateSlidingWindow() {
+    const scrollTop = this.#scrollableElement?.scrollTop ?? 0;
     if (this.#scrollTop !== scrollTop) {
       this.#scrollTop = scrollTop;
       this.updateIntersections();
     }
   }
 
+  #calculateMonthBottomViewportRatio(month: MonthGroup | undefined) {
+    if (!month) {
+      return 0;
+    }
+    const windowHeight = this.visibleWindow.bottom - this.visibleWindow.top;
+    const bottomOfMonth = month.top + month.height;
+    const bottomOfMonthInViewport = bottomOfMonth - this.visibleWindow.top;
+    return clamp(bottomOfMonthInViewport / windowHeight, 0, 1);
+  }
+
+  #calculateVewportTopRatioInMonth(month: MonthGroup | undefined) {
+    if (!month) {
+      return 0;
+    }
+    return clamp((this.visibleWindow.top - month.top) / month.height, 0, 1);
+  }
+
   updateIntersections() {
-    if (!this.isInitialized || this.visibleWindow.bottom === this.visibleWindow.top) {
+    if (this.#updatingIntersections || !this.isInitialized || this.visibleWindow.bottom === this.visibleWindow.top) {
       return;
     }
+    this.#updatingIntersections = true;
+
     for (const month of this.months) {
       updateIntersectionMonthGroup(this, month);
     }
+
+    const month = this.months.find((month) => month.actuallyIntersecting);
+    const viewportTopRatioInMonth = this.#calculateVewportTopRatioInMonth(month);
+    const monthBottomViewportRatio = this.#calculateMonthBottomViewportRatio(month);
+
+    this.viewportTopMonthIntersection = {
+      month,
+      monthBottomViewportRatio,
+      viewportTopRatioInMonth,
+    };
+
+    this.#updatingIntersections = false;
   }
 
   clearDeferredLayout(month: MonthGroup) {
@@ -368,7 +426,8 @@ export class TimelineManager {
       await loadFromTimeBuckets(this, monthGroup, this.#options, signal);
     }, cancelable);
     if (executionStatus === 'LOADED') {
-      updateIntersectionMonthGroup(this, monthGroup);
+      updateGeometry(this, monthGroup, { invalidateHeight: false });
+      this.updateIntersections();
     }
   }