Merge branch 'main' into debug/blank-timeline

# Conflicts:
#	mobile/lib/presentation/widgets/timeline/fixed/segment.model.dart
#	mobile/lib/presentation/widgets/timeline/timeline.widget.dart

i18n/en.json

@@ -1548,7 +1548,7 @@
   "map_location_picker_page_use_location": "Use this location",
   "map_location_service_disabled_content": "Location service needs to be enabled to display assets from your current location. Do you want to enable it now?",
   "map_location_service_disabled_title": "Location Service disabled",
-  "map_marker_for_image": "Map marker for image taken in {city}, {country}",
+  "map_marker_for_images": "Map marker for images taken in {city}, {country}",
   "map_marker_with_image": "Map marker with image",
   "map_no_location_permission_content": "Location permission is needed to display assets from your current location. Do you want to allow it now?",
   "map_no_location_permission_title": "Location Permission denied",

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

@@ -138,7 +138,9 @@ class LocalSyncService {
       final Stopwatch stopwatch = Stopwatch()..start();
 
       final deviceAlbums = await _nativeSyncApi.getAlbums();
+      final getAlbumsTime = stopwatch.elapsedMilliseconds;
       final dbAlbums = await _localAlbumRepository.getAll(sortBy: {SortLocalAlbumsBy.id});
+      final getAllTime = stopwatch.elapsedMilliseconds;
 
       await diffSortedLists(
         dbAlbums,
@@ -148,10 +150,15 @@ class LocalSyncService {
         onlyFirst: removeAlbum,
         onlySecond: addAlbum,
       );
+      final diffTime = stopwatch.elapsedMilliseconds;
 
       await _nativeSyncApi.checkpointSync();
       stopwatch.stop();
-      _log.info("Full device sync took - ${stopwatch.elapsedMilliseconds}ms");
+      _log.info(
+        "Full device sync took - ${stopwatch.elapsedMilliseconds}ms "
+        "(getAlbums=${getAlbumsTime}ms, getAll=${getAllTime - getAlbumsTime}ms, "
+        "diff=${diffTime - getAllTime}ms, checkpoint=${stopwatch.elapsedMilliseconds - diffTime}ms)",
+      );
     } on PlatformException catch (e, s) {
       if (e.code == _kSyncCancelledCode) {
         _log.warning("Full device sync cancelled");

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

@@ -10,6 +10,7 @@ import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/infrastructure/repositories/settings.repository.dart';
 import 'package:immich_mobile/infrastructure/repositories/timeline.repository.dart';
 import 'package:immich_mobile/utils/async_mutex.dart';
+import 'package:logging/logging.dart';
 
 typedef TimelineAssetSource = Future<List<BaseAsset>> Function(int index, int count);
 
@@ -90,6 +91,7 @@ class TimelineFactory {
 }
 
 class TimelineService {
+  static final Logger _log = Logger('TimelineService');
   final TimelineAssetSource _assetSource;
   final TimelineBucketSource _bucketSource;
   final TimelineOrigin origin;
@@ -105,34 +107,49 @@ class TimelineService {
     : this._(assetSource: query.assetSource, bucketSource: query.bucketSource, origin: query.origin);
 
   TimelineService._({required this._assetSource, required this._bucketSource, required this.origin}) {
-    _bucketSubscription = _bucketSource().listen((buckets) {
-      _mutex.run(() async {
-        final totalAssets = buckets.fold<int>(0, (acc, bucket) => acc + bucket.assetCount);
+    _bucketSubscription = _bucketSource().listen(
+      (buckets) {
+        _mutex.run(() async {
+          try {
+            final totalAssets = buckets.fold<int>(0, (acc, bucket) => acc + bucket.assetCount);
 
-        if (totalAssets == 0) {
-          _bufferOffset = 0;
-          _buffer = [];
-        } else {
-          final int offset;
-          final int count;
-          // When the buffer is empty or the old bufferOffset is greater than the new total assets,
-          // we need to reset the buffer and load the first batch of assets.
-          if (_bufferOffset >= totalAssets || _buffer.isEmpty) {
-            offset = 0;
-            count = kTimelineAssetLoadBatchSize;
-          } else {
-            offset = _bufferOffset;
-            count = math.min(_buffer.length, totalAssets - _bufferOffset);
+            _log.info(
+              '[$origin] bucket emission: ${buckets.length} buckets / $totalAssets assets '
+              '(current _totalAssets=$_totalAssets, _bufferOffset=$_bufferOffset, _buffer=${_buffer.length})',
+            );
+
+            if (totalAssets == 0) {
+              _bufferOffset = 0;
+              _buffer = [];
+            } else {
+              final int offset;
+              final int count;
+              // When the buffer is empty or the old bufferOffset is greater than the new total assets,
+              // we need to reset the buffer and load the first batch of assets.
+              if (_bufferOffset >= totalAssets || _buffer.isEmpty) {
+                offset = 0;
+                count = kTimelineAssetLoadBatchSize;
+              } else {
+                offset = _bufferOffset;
+                count = math.min(_buffer.length, totalAssets - _bufferOffset);
+              }
+              _buffer = await _assetSource(offset, count);
+              _bufferOffset = offset;
+              _log.info('[$origin] buffer reloaded: offset=$offset requested=$count got=${_buffer.length}');
+            }
+
+            _totalAssets = totalAssets;
+            EventStream.shared.emit(const TimelineReloadEvent());
+          } catch (error, stack) {
+            _log.severe('[$origin] bucket reload FAILED — _totalAssets stuck at $_totalAssets', error, stack);
+            rethrow;
           }
-          _buffer = await _assetSource(offset, count);
-          _bufferOffset = offset;
-        }
-
-        // change the state's total assets count only after the buffer is reloaded
-        _totalAssets = totalAssets;
-        EventStream.shared.emit(const TimelineReloadEvent());
-      });
-    });
+        });
+      },
+      onError: (Object error, StackTrace stack) {
+        _log.severe('[$origin] bucket stream errored', error, stack);
+      },
+    );
   }
 
   Stream<List<Bucket>> Function() get watchBuckets => _bucketSource;
@@ -164,6 +181,13 @@ class TimelineService {
     _buffer = await _assetSource(start, len);
     _bufferOffset = start;
 
+    if (!hasRange(index, count)) {
+      _log.warning(
+        '[$origin] _loadAssets($index, $count): buffer loaded (offset=$start, got=${_buffer.length}) but still '
+        'out of range — _totalAssets=$_totalAssets. getAssets is about to throw RangeError.',
+      );
+    }
+
     return getAssets(index, count);
   }
 

mobile/lib/presentation/widgets/timeline/fixed/segment.model.dart

@@ -23,6 +23,7 @@ import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.da
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:logging/logging.dart';
 
 class FixedSegment extends Segment {
   final double tileHeight;
@@ -90,6 +91,7 @@ class FixedSegment extends Segment {
 }
 
 class _FixedSegmentRow extends ConsumerWidget {
+  static final Logger _log = Logger('TimelineRow');
   final int assetIndex;
   final int assetCount;
   final double tileHeight;
@@ -109,8 +111,20 @@ class _FixedSegmentRow extends ConsumerWidget {
     final isScrubbing = ref.watch(timelineStateProvider.select((s) => s.isScrubbing));
     final timelineService = ref.read(timelineServiceProvider);
     final isDynamicLayout = columnCount <= (context.isMobile ? 2 : 3);
+    final inRange = timelineService.hasRange(assetIndex, assetCount);
 
-    if (timelineService.hasRange(assetIndex, assetCount)) {
+    if (assetIndex == 0) {
+      _log.info(
+        'row[0] inRange=$inRange isScrubbing=$isScrubbing totalAssets=${timelineService.totalAssets} '
+        'branch=${inRange
+            ? "assets"
+            : isScrubbing
+            ? "placeholder(scrubbing)"
+            : "future(load)"}',
+      );
+    }
+
+    if (inRange) {
       return _buildAssetRow(
         context,
         timelineService.getAssets(assetIndex, assetCount),
@@ -129,6 +143,13 @@ class _FixedSegmentRow extends ConsumerWidget {
         if (snapshot.connectionState != ConnectionState.done) {
           return _buildPlaceholder(context);
         }
+        if (snapshot.hasError) {
+          _log.warning(
+            'render row loadAssets($assetIndex, $assetCount) failed (totalAssets=${timelineService.totalAssets})',
+            snapshot.error,
+            snapshot.stackTrace,
+          );
+        }
         return _buildAssetRow(context, snapshot.requireData, timelineService, isDynamicLayout);
       },
     );

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

@@ -13,6 +13,7 @@ import 'package:immich_mobile/presentation/widgets/timeline/timeline.state.dart'
 import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
 import 'package:immich_mobile/utils/debounce.dart';
 import 'package:intl/intl.dart' hide TextDirection;
+import 'package:logging/logging.dart';
 
 /// A widget that will display a BoxScrollView with a ScrollThumb that can be dragged
 /// for quick navigation of the BoxScrollView.
@@ -84,6 +85,7 @@ List<_Segment> _buildSegments({required List<Segment> layoutSegments, required d
 }
 
 class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixin {
+  static final Logger _log = Logger('Scrubber');
   String? _lastLabel;
   double _thumbTopOffset = 0.0;
   bool _isDragging = false;
@@ -114,6 +116,7 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
   @override
   void initState() {
     super.initState();
+    _log.info('Scrubber initState');
     _isDragging = false;
     _segments = _buildSegments(layoutSegments: widget.layoutSegments, timelineHeight: _scrubberHeight);
     _thumbAnimationController = AnimationController(vsync: this, duration: kTimelineScrubberFadeInDuration);
@@ -134,7 +137,10 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
   void didUpdateWidget(covariant Scrubber oldWidget) {
     super.didUpdateWidget(oldWidget);
 
-    if (oldWidget.layoutSegments.lastOrNull?.endOffset != widget.layoutSegments.lastOrNull?.endOffset) {
+    final oldEnd = oldWidget.layoutSegments.lastOrNull?.endOffset;
+    final newEnd = widget.layoutSegments.lastOrNull?.endOffset;
+    if (oldEnd != newEnd) {
+      _log.info('Scrubber layoutSegments endOffset $oldEnd -> $newEnd (isDragging=$_isDragging)');
       _segments = _buildSegments(layoutSegments: widget.layoutSegments, timelineHeight: _scrubberHeight);
       _monthCount = getMonthCount();
     }
@@ -142,6 +148,15 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
 
   @override
   void dispose() {
+    if (_isDragging || _currentScrubberDate != null || _scrubberDebouncer != null) {
+      _log.warning(
+        'Scrubber dispose mid-scrub '
+        '(isDragging=$_isDragging, pendingDate=$_currentScrubberDate, '
+        'debouncerPending=${_scrubberDebouncer != null}) — scrubbing reset may be orphaned',
+      );
+    } else {
+      _log.info('Scrubber dispose');
+    }
     _thumbAnimationController.dispose();
     _labelAnimationController.dispose();
     _fadeOutTimer?.cancel();
@@ -208,6 +223,7 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
   }
 
   void _onDragStart(DragStartDetails _) {
+    _log.info('scrub dragStart');
     setState(() {
       _isDragging = true;
       _labelAnimationController.forward();
@@ -222,9 +238,15 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
     }
 
     if (_scrubberHeight <= 0) {
+      _log.warning('drag ignored: scrubberHeight=$_scrubberHeight <= 0');
       return;
     }
 
+    final maxScrollExtent = _scrollController.hasClients ? _scrollController.position.maxScrollExtent : -1;
+    if (maxScrollExtent <= 0) {
+      _log.warning('drag ineffective: hasClients=${_scrollController.hasClients} maxScrollExtent=$maxScrollExtent');
+    }
+
     if (_thumbAnimationController.status != AnimationStatus.forward) {
       _thumbAnimationController.forward();
     }
@@ -344,6 +366,7 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
   }
 
   void _onDragEnd(DragEndDetails _) {
+    _log.info('scrub dragEnd -> setScrubbing(false)');
     _labelAnimationController.reverse();
     setState(() {
       _isDragging = false;

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

@@ -7,6 +7,7 @@ import 'package:immich_mobile/presentation/widgets/timeline/fixed/segment_builde
 import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
 import 'package:immich_mobile/providers/infrastructure/settings.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:logging/logging.dart';
 
 class TimelineArgs {
   final double maxWidth;
@@ -71,14 +72,27 @@ class TimelineState {
 }
 
 class TimelineStateNotifier extends Notifier<TimelineState> {
+  static final Logger _log = Logger('TimelineState');
+
   void setScrubbing(bool isScrubbing) {
+    if (state.isScrubbing != isScrubbing) {
+      _log.info('isScrubbing ${state.isScrubbing} -> $isScrubbing  (from ${_callSite()})');
+    }
     state = state.copyWith(isScrubbing: isScrubbing);
   }
 
   void setScrolling(bool isScrolling) {
+    if (state.isScrolling != isScrolling) {
+      _log.info('isScrolling ${state.isScrolling} -> $isScrolling  (from ${_callSite()})');
+    }
     state = state.copyWith(isScrolling: isScrolling);
   }
 
+  static String _callSite() {
+    final frames = StackTrace.current.toString().split('\n');
+    return frames.length > 2 ? frames[2].trim() : 'unknown';
+  }
+
   @override
   TimelineState build() => const TimelineState(isScrubbing: false, isScrolling: false);
 }
@@ -96,6 +110,11 @@ final timelineSegmentProvider = StreamProvider.autoDispose<List<Segment>>((ref)
 
   final timelineService = ref.watch(timelineServiceProvider);
   yield* timelineService.watchBuckets().map((buckets) {
+    final layoutTotal = buckets.fold<int>(0, (acc, bucket) => acc + bucket.assetCount);
+    Logger('TimelineService').info(
+      '[${timelineService.origin}] segment layout: '
+      '${buckets.length} buckets / $layoutTotal assets (service.totalAssets=${timelineService.totalAssets})',
+    );
     return FixedSegmentBuilder(
       buckets: buckets,
       tileHeight: tileExtent,

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

@@ -28,6 +28,7 @@ import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/widgets/common/immich_sliver_app_bar.dart';
 import 'package:immich_mobile/widgets/common/mesmerizing_sliver_app_bar.dart';
 import 'package:immich_mobile/widgets/common/selection_sliver_app_bar.dart';
+import 'package:logging/logging.dart';
 
 class Timeline extends StatelessWidget {
   const Timeline({
@@ -136,6 +137,7 @@ class _SliverTimeline extends ConsumerStatefulWidget {
 }
 
 class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
+  static final Logger _log = Logger('Timeline');
   late final ScrollController _scrollController;
   StreamSubscription? _eventSubscription;
 
@@ -153,6 +155,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
   @override
   void initState() {
     super.initState();
+    _log.info('SliverTimeline initState');
     _scrollController = ScrollController(onAttach: _restoreAssetPosition);
     _eventSubscription = EventStream.shared.listen(_onEvent);
 
@@ -179,6 +182,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
   }
 
   void _onEvent(Event event) {
+    _log.info('event ${event.runtimeType}');
     switch (event) {
       case ScrollToTopEvent():
         {
@@ -186,7 +190,10 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
           timelineState.setScrubbing(true);
           _scrollController
               .animateTo(0, duration: const Duration(milliseconds: 250), curve: Curves.easeInOut)
-              .whenComplete(() => timelineState.setScrubbing(false));
+              .whenComplete(() {
+                _log.info('ScrollToTop animation done -> setScrubbing(false)');
+                timelineState.setScrubbing(false);
+              });
         }
 
       case ScrollToDateEvent scrollToDateEvent:
@@ -246,6 +253,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
 
   @override
   void dispose() {
+    _log.info('SliverTimeline dispose');
     _scrollController.dispose();
     _eventSubscription?.cancel();
     super.dispose();
@@ -286,8 +294,12 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
               duration: const Duration(milliseconds: 500),
               curve: Curves.easeInOut,
             )
-            .whenComplete(() => timelineState.setScrubbing(false));
+            .whenComplete(() {
+              _log.info('ScrollToDate animation done -> setScrubbing(false)');
+              timelineState.setScrubbing(false);
+            });
       } else {
+        _log.info('ScrollToDate: no matching segment for $date -> setScrubbing(false)');
         timelineState.setScrubbing(false);
       }
     });

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

@@ -5,6 +5,9 @@ import 'package:immich_mobile/presentation/widgets/timeline/timeline.state.dart'
 import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/settings.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:logging/logging.dart';
+
+final _log = Logger('TimelineProvider');
 
 final timelineRepositoryProvider = Provider<DriftTimelineRepository>(
   (ref) => DriftTimelineRepository(ref.watch(driftProvider)),
@@ -18,7 +21,11 @@ final timelineServiceProvider = Provider<TimelineService>(
   (ref) {
     final timelineUsers = ref.watch(timelineUsersProvider).valueOrNull ?? [];
     final timelineService = ref.watch(timelineFactoryProvider).main(timelineUsers);
-    ref.onDispose(timelineService.dispose);
+    _log.info('main TimelineService built users=$timelineUsers');
+    ref.onDispose(() {
+      _log.info('main TimelineService disposed');
+      timelineService.dispose();
+    });
     return timelineService;
   },
   // Empty dependencies to inform the framework that this provider
@@ -36,8 +43,12 @@ final timelineFactoryProvider = Provider<TimelineFactory>(
 final timelineUsersProvider = StreamProvider<List<String>>((ref) {
   final currentUserId = ref.watch(currentUserProvider.select((u) => u?.id));
   if (currentUserId == null) {
+    _log.info('timelineUsers: currentUserId=null -> []');
     return Stream.value([]);
   }
 
-  return ref.watch(timelineRepositoryProvider).watchTimelineUserIds(currentUserId);
+  return ref.watch(timelineRepositoryProvider).watchTimelineUserIds(currentUserId).map((users) {
+    _log.info('timelineUsers emission: $users');
+    return users;
+  });
 });

mobile/lib/utils/version_compatibility.dart

@@ -1,16 +1,7 @@
-import 'package:immich_mobile/utils/semver.dart';
-
-String? getVersionCompatibilityMessage(SemVer serverVersion, SemVer appVersion) {
+String? getVersionCompatibilityMessage(int _, int appMinor, int _, int serverMinor) {
   // Add latest compat info up top
-
-  // ensure mobile app major version is not behind server major version
-  if (appVersion.major < serverVersion.major) {
-    return 'Your mobile app version is not compatible with the server! Please update your mobile app to the latest version.';
-  }
-
-  // ensure mobile app major version is not ahead of server major version by more than 1 major version
-  if (appVersion.major > serverVersion.major + 1) {
-    return 'Your server version is not compatible with the mobile app! Please update your server to the latest version.';
+  if (serverMinor < 106 && appMinor >= 106) {
+    return 'Your app minor version is not compatible with the server! Please update your server to version v1.106.0 or newer to login';
   }
 
   return null;

mobile/lib/widgets/forms/login/login_form.dart

@@ -26,7 +26,6 @@ import 'package:immich_mobile/providers/websocket.provider.dart';
 import 'package:immich_mobile/repositories/permission.repository.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/utils/provider_utils.dart';
-import 'package:immich_mobile/utils/semver.dart';
 import 'package:immich_mobile/utils/url_helper.dart';
 import 'package:immich_mobile/utils/version_compatibility.dart';
 import 'package:immich_mobile/widgets/common/immich_logo.dart';
@@ -89,9 +88,18 @@ class LoginForm extends HookConsumerWidget {
     checkVersionMismatch() async {
       try {
         final packageInfo = await PackageInfo.fromPlatform();
-        final appSemVer = SemVer.fromString(packageInfo.version);
-        final serverSemVer = serverInfo.serverVersion;
-        warningMessage.value = getVersionCompatibilityMessage(appSemVer, serverSemVer);
+        final appVersion = packageInfo.version;
+        final appMajorVersion = int.parse(appVersion.split('.')[0]);
+        final appMinorVersion = int.parse(appVersion.split('.')[1]);
+        final serverMajorVersion = serverInfo.serverVersion.major;
+        final serverMinorVersion = serverInfo.serverVersion.minor;
+
+        warningMessage.value = getVersionCompatibilityMessage(
+          appMajorVersion,
+          appMinorVersion,
+          serverMajorVersion,
+          serverMinorVersion,
+        );
       } catch (error) {
         warningMessage.value = 'Error checking version compatibility';
       }

mobile/test/modules/utils/version_compatibility_test.dart

@@ -1,47 +1,29 @@
 import 'package:flutter_test/flutter_test.dart';
-import 'package:immich_mobile/utils/semver.dart';
 import 'package:immich_mobile/utils/version_compatibility.dart';
 
 void main() {
-  group('app major version behind server', () {
-    const message =
-        'Your mobile app version is not compatible with the server! Please update your mobile app to the latest version.';
+  test('getVersionCompatibilityMessage', () {
+    String? result;
 
-    test('returns message when app major is behind server major', () {
-      final result = getVersionCompatibilityMessage(
-        const SemVer(major: 2, minor: 0, patch: 0),
-        const SemVer(major: 1, minor: 200, patch: 0),
-      );
-      expect(result, message);
-    });
+    result = getVersionCompatibilityMessage(1, 106, 1, 105);
+    expect(
+      result,
+      'Your app minor version is not compatible with the server! Please update your server to version v1.106.0 or newer to login',
+    );
 
-    test('returns null when app major matches server major', () {
-      final result = getVersionCompatibilityMessage(
-        const SemVer(major: 2, minor: 0, patch: 0),
-        const SemVer(major: 2, minor: 0, patch: 0),
-      );
-      expect(result, null);
-    });
-  });
+    result = getVersionCompatibilityMessage(1, 107, 1, 105);
+    expect(
+      result,
+      'Your app minor version is not compatible with the server! Please update your server to version v1.106.0 or newer to login',
+    );
 
-  group('app major version too far ahead of server', () {
-    const message =
-        'Your server version is not compatible with the mobile app! Please update your server to the latest version.';
+    result = getVersionCompatibilityMessage(1, 106, 1, 106);
+    expect(result, null);
 
-    test('returns message when app major is more than one ahead of server', () {
-      final result = getVersionCompatibilityMessage(
-        const SemVer(major: 1, minor: 200, patch: 0),
-        const SemVer(major: 3, minor: 0, patch: 0),
-      );
-      expect(result, message);
-    });
+    result = getVersionCompatibilityMessage(1, 107, 1, 106);
+    expect(result, null);
 
-    test('returns null when app major is exactly one ahead of server', () {
-      final result = getVersionCompatibilityMessage(
-        const SemVer(major: 1, minor: 200, patch: 0),
-        const SemVer(major: 2, minor: 0, patch: 0),
-      );
-      expect(result, null);
-    });
+    result = getVersionCompatibilityMessage(1, 107, 1, 108);
+    expect(result, null);
   });
 }

web/src/app.css

@@ -159,9 +159,7 @@
   }
 
   .text-white-shadow {
-    text-shadow:
-      0 0 4px rgba(0, 0, 0, 0.9),
-      0 1px 3px rgba(0, 0, 0, 0.8);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
   }
 
   .icon-white-drop-shadow {

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

@@ -10,11 +10,13 @@
   import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/RemoveAssetFromStack.svelte';
   import RestoreAction from '$lib/components/asset-viewer/actions/RestoreAction.svelte';
   import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/SetPersonFeaturedAction.svelte';
+  import SetProfilePictureAction from '$lib/components/asset-viewer/actions/SetProfilePictureAction.svelte';
   import SetStackPrimaryAsset from '$lib/components/asset-viewer/actions/SetStackPrimaryAsset.svelte';
   import SetVisibilityAction from '$lib/components/asset-viewer/actions/SetVisibilityAction.svelte';
   import UnstackAction from '$lib/components/asset-viewer/actions/UnstackAction.svelte';
   import LoadingDots from '$lib/components/LoadingDots.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import RemoveFromAlbumAction from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
@@ -82,27 +84,6 @@
     shortcuts: [{ key: 'Escape' }],
   });
 
-  const PlayOriginalVideo: ActionItem = $derived({
-    title: playOriginalVideo ? $t('play_transcoded_video') : $t('play_original_video'),
-    icon: mdiVideoOutline,
-    $if: () => asset.type === AssetTypeEnum.Video,
-    onAction: () => setPlayOriginalVideo(!playOriginalVideo),
-  });
-
-  const ViewInTimeline: ActionItem = $derived({
-    title: $t('view_in_timeline'),
-    icon: mdiImageSearch,
-    $if: () => isOwner && !isLocked && !asset.isArchived && !asset.isTrashed,
-    onAction: () => goto(Route.photos({ at: stack?.primaryAssetId ?? asset.id })),
-  });
-
-  const ViewSimilar: ActionItem = $derived({
-    title: $t('view_similar_photos'),
-    icon: mdiCompare,
-    $if: () => !isLocked && !asset.isArchived && !asset.isTrashed && smartSearchEnabled,
-    onAction: () => goto(Route.search({ queryAssetId: stack?.primaryAssetId ?? asset.id })),
-  });
-
   const Actions = $derived(getAssetActions($t, asset));
   const sharedLink = getSharedLink();
 </script>
@@ -188,21 +169,41 @@
         {#if person}
           <SetFeaturedPhotoAction {asset} {person} {onAction} />
         {/if}
-
-        <ActionMenuItem action={Actions.SetProfilePicture} />
-
-        {#if isOwner && !isLocked}
-          <ArchiveAction {asset} {onAction} {preAction} />
+        {#if asset.type === AssetTypeEnum.Image && !isLocked}
+          <SetProfilePictureAction {asset} />
+        {/if}
+
+        {#if !isLocked}
+          {#if isOwner}
+            <ArchiveAction {asset} {onAction} {preAction} />
+            {#if !asset.isArchived && !asset.isTrashed}
+              <MenuOption
+                icon={mdiImageSearch}
+                onClick={() => goto(Route.photos({ at: stack?.primaryAssetId ?? asset.id }))}
+                text={$t('view_in_timeline')}
+              />
+            {/if}
+          {/if}
+          {#if !asset.isArchived && !asset.isTrashed && smartSearchEnabled}
+            <MenuOption
+              icon={mdiCompare}
+              onClick={() => goto(Route.search({ queryAssetId: stack?.primaryAssetId ?? asset.id }))}
+              text={$t('view_similar_photos')}
+            />
+          {/if}
         {/if}
-        <ActionMenuItem action={ViewInTimeline} />
-        <ActionMenuItem action={ViewSimilar} />
 
         {#if !asset.isTrashed && isOwner}
           <SetVisibilityAction asset={toTimelineAsset(asset)} {onAction} {preAction} />
         {/if}
 
-        <ActionMenuItem action={PlayOriginalVideo} />
-
+        {#if asset.type === AssetTypeEnum.Video}
+          <MenuOption
+            icon={mdiVideoOutline}
+            onClick={() => setPlayOriginalVideo(!playOriginalVideo)}
+            text={playOriginalVideo ? $t('play_transcoded_video') : $t('play_original_video')}
+          />
+        {/if}
         {#if isOwner}
           <hr />
           <ActionMenuItem action={Actions.RefreshFacesJob} />

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

@@ -23,7 +23,7 @@
     type AlbumResponseDto,
     type AssetResponseDto,
   } from '@immich/sdk';
-  import { Icon, IconButton, Link, LoadingSpinner, Text } from '@immich/ui';
+  import { Icon, IconButton, LoadingSpinner, Text } from '@immich/ui';
   import { mdiCamera, mdiCameraIris, mdiClose, mdiImageOutline, mdiInformationOutline } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -310,13 +310,14 @@
           {#snippet popup({ marker })}
             {@const { lat, lon } = marker}
             <div class="flex flex-col items-center gap-1">
-              <Text fontWeight="bold">{lat.toPrecision(6)}, {lon.toPrecision(6)}</Text>
-              <Link
+              <p class="font-bold">{lat.toPrecision(6)}, {lon.toPrecision(6)}</p>
+              <a
                 href="https://www.openstreetmap.org/?mlat={lat}&mlon={lon}&zoom=13#map=15/{lat}/{lon}"
-                class="text-primary"
+                target="_blank"
+                class="font-medium text-primary underline focus:outline-none"
               >
                 {$t('open_in_openstreetmap')}
-              </Link>
+              </a>
             </div>
           {/snippet}
         </Map>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
+  import ProfileImageCropperModal from '$lib/modals/ProfileImageCropperModal.svelte';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
+  import { mdiAccountCircleOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    asset: AssetResponseDto;
+  }
+
+  let { asset }: Props = $props();
+</script>
+
+<MenuOption
+  icon={mdiAccountCircleOutline}
+  onClick={() => modalManager.show(ProfileImageCropperModal, { asset })}
+  text={$t('set_as_profile_picture')}
+/>

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

@@ -342,7 +342,7 @@
 
         {#if !!assetOwner}
           <div class="absolute inset-e-2 bottom-1 z-2 max-w-[50%]">
-            <p class="text-white-shadow max-w-full truncate p-1 text-xs font-medium text-white">
+            <p class="max-w-full truncate text-xs font-medium text-white drop-shadow-lg">
               {assetOwner.name}
             </p>
           </div>

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

@@ -38,6 +38,7 @@
     Control,
     ControlButton,
     ControlGroup,
+    FullscreenControl,
     GeoJSON,
     GeolocateControl,
     MapLibre,
@@ -342,6 +343,7 @@
 
       {#if !simplified}
         <GeolocateControl position="top-left" />
+        <FullscreenControl position="top-left" />
         <ScaleControl />
         <AttributionControl compact={false} />
       {/if}
@@ -399,13 +401,13 @@
       >
         {#snippet children({ feature }: { feature: Feature })}
           {#if useLocationPin}
-            <Icon icon={mdiMapMarker} size="50px" class="translate-y-[calc(5px-50%)] text-primary" />
+            <Icon icon={mdiMapMarker} size="50px" class="translate-y-[-50%] text-primary" />
           {:else}
             <img
               src={getAssetMediaUrl({ id: feature.properties?.id })}
               class="size-15 rounded-full border-2 border-immich-primary bg-immich-primary object-cover shadow-lg transition-all duration-200 hover:scale-150 hover:border-immich-dark-primary"
               alt={feature.properties?.city && feature.properties.country
-                ? $t('map_marker_for_image', {
+                ? $t('map_marker_for_images', {
                     values: { city: feature.properties.city, country: feature.properties.country },
                   })
                 : $t('map_marker_with_image')}
@@ -413,7 +415,7 @@
           {/if}
           {#if popup}
             <Popup offset={[0, -30]} openOn="click" closeOnClickOutside>
-              {@render popup({ marker: asMarker(feature) })}
+              {@render popup?.({ marker: asMarker(feature) })}
             </Popup>
           {/if}
         {/snippet}

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

@@ -11,7 +11,6 @@ import {
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import {
-  mdiAccountCircleOutline,
   mdiAlertOutline,
   mdiCogRefreshOutline,
   mdiContentCopy,
@@ -42,7 +41,6 @@ import { authManager } from '$lib/managers/auth-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import AssetAddToAlbumModal from '$lib/modals/AssetAddToAlbumModal.svelte';
 import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
-import ProfileImageCropperModal from '$lib/modals/ProfileImageCropperModal.svelte';
 import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
 import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
 import { getAssetMediaUrl, getSharedLink, sleep } from '$lib/utils';
@@ -244,13 +242,6 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
     shortcuts: [{ key: 'e' }],
   };
 
-  const SetProfilePicture: ActionItem = {
-    title: $t('set_as_profile_picture'),
-    icon: mdiAccountCircleOutline,
-    $if: () => asset.type === AssetTypeEnum.Image && asset.visibility !== AssetVisibility.Locked,
-    onAction: () => modalManager.show(ProfileImageCropperModal, { asset }),
-  };
-
   const RefreshFacesJob: ActionItem = {
     title: $t('refresh_faces'),
     icon: mdiHeadSyncOutline,
@@ -295,7 +286,6 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
     Tag,
     TagPeople,
     Edit,
-    SetProfilePicture,
     RefreshFacesJob,
     RefreshMetadataJob,
     RegenerateThumbnailJob,

web/src/routes/(user)/people/manage/+page.svelte

@@ -169,9 +169,7 @@
             preload={false}
           />
           {#if person.name}
-            <span
-              class="text-white-shadow absolute inset-s-0 bottom-2 w-full px-1 text-center font-medium text-white select-text"
-            >
+            <span class="absolute inset-s-0 bottom-2 w-full px-1 text-center font-medium text-white select-text">
               {person.name}
             </span>
           {/if}