refactor(web): simple actions

* refactor: use SemVer classes for version compatability message

* chore: readd major version compatabilty messages

* fix: remove 1.106.0 check

(we dont support v1 servers anymore)

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_images": "Map marker for images taken in {city}, {country}",
+  "map_marker_for_image": "Map marker for image 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,9 +138,7 @@ 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,
@@ -150,15 +148,10 @@ class LocalSyncService {
         onlyFirst: removeAlbum,
         onlySecond: addAlbum,
       );
-      final diffTime = stopwatch.elapsedMilliseconds;
 
       await _nativeSyncApi.checkpointSync();
       stopwatch.stop();
-      _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)",
-      );
+      _log.info("Full device sync took - ${stopwatch.elapsedMilliseconds}ms");
     } on PlatformException catch (e, s) {
       if (e.code == _kSyncCancelledCode) {
         _log.warning("Full device sync cancelled");

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

@@ -10,7 +10,6 @@ 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);
 
@@ -91,7 +90,6 @@ class TimelineFactory {
 }
 
 class TimelineService {
-  static final Logger _log = Logger('TimelineService');
   final TimelineAssetSource _assetSource;
   final TimelineBucketSource _bucketSource;
   final TimelineOrigin origin;
@@ -107,49 +105,34 @@ 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 {
-          try {
-            final totalAssets = buckets.fold<int>(0, (acc, bucket) => acc + bucket.assetCount);
+    _bucketSubscription = _bucketSource().listen((buckets) {
+      _mutex.run(() async {
+        final totalAssets = buckets.fold<int>(0, (acc, bucket) => acc + bucket.assetCount);
 
-            _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;
+        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);
           }
-        });
-      },
-      onError: (Object error, StackTrace stack) {
-        _log.severe('[$origin] bucket stream errored', error, stack);
-      },
-    );
+          _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());
+      });
+    });
   }
 
   Stream<List<Bucket>> Function() get watchBuckets => _bucketSource;
@@ -181,13 +164,6 @@ 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,7 +23,6 @@ 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;
@@ -91,7 +90,6 @@ class FixedSegment extends Segment {
 }
 
 class _FixedSegmentRow extends ConsumerWidget {
-  static final Logger _log = Logger('TimelineRow');
   final int assetIndex;
   final int assetCount;
   final double tileHeight;
@@ -111,20 +109,8 @@ 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 (assetIndex == 0) {
-      _log.info(
-        'row[0] inRange=$inRange isScrubbing=$isScrubbing totalAssets=${timelineService.totalAssets} '
-        'branch=${inRange
-            ? "assets"
-            : isScrubbing
-            ? "placeholder(scrubbing)"
-            : "future(load)"}',
-      );
-    }
-
-    if (inRange) {
+    if (timelineService.hasRange(assetIndex, assetCount)) {
       return _buildAssetRow(
         context,
         timelineService.getAssets(assetIndex, assetCount),
@@ -143,13 +129,6 @@ 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,7 +13,6 @@ 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.
@@ -85,7 +84,6 @@ 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;
@@ -116,7 +114,6 @@ 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);
@@ -137,10 +134,7 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
   void didUpdateWidget(covariant Scrubber oldWidget) {
     super.didUpdateWidget(oldWidget);
 
-    final oldEnd = oldWidget.layoutSegments.lastOrNull?.endOffset;
-    final newEnd = widget.layoutSegments.lastOrNull?.endOffset;
-    if (oldEnd != newEnd) {
-      _log.info('Scrubber layoutSegments endOffset $oldEnd -> $newEnd (isDragging=$_isDragging)');
+    if (oldWidget.layoutSegments.lastOrNull?.endOffset != widget.layoutSegments.lastOrNull?.endOffset) {
       _segments = _buildSegments(layoutSegments: widget.layoutSegments, timelineHeight: _scrubberHeight);
       _monthCount = getMonthCount();
     }
@@ -148,15 +142,6 @@ 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();
@@ -223,7 +208,6 @@ class ScrubberState extends ConsumerState<Scrubber> with TickerProviderStateMixi
   }
 
   void _onDragStart(DragStartDetails _) {
-    _log.info('scrub dragStart');
     setState(() {
       _isDragging = true;
       _labelAnimationController.forward();
@@ -238,15 +222,9 @@ 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();
     }
@@ -366,7 +344,6 @@ 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,7 +7,6 @@ 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;
@@ -72,27 +71,14 @@ 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);
 }
@@ -110,11 +96,6 @@ 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,7 +28,6 @@ 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({
@@ -137,7 +136,6 @@ class _SliverTimeline extends ConsumerStatefulWidget {
 }
 
 class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
-  static final Logger _log = Logger('Timeline');
   late final ScrollController _scrollController;
   StreamSubscription? _eventSubscription;
 
@@ -155,7 +153,6 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
   @override
   void initState() {
     super.initState();
-    _log.info('SliverTimeline initState');
     _scrollController = ScrollController(onAttach: _restoreAssetPosition);
     _eventSubscription = EventStream.shared.listen(_onEvent);
 
@@ -182,7 +179,6 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
   }
 
   void _onEvent(Event event) {
-    _log.info('event ${event.runtimeType}');
     switch (event) {
       case ScrollToTopEvent():
         {
@@ -190,10 +186,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
           timelineState.setScrubbing(true);
           _scrollController
               .animateTo(0, duration: const Duration(milliseconds: 250), curve: Curves.easeInOut)
-              .whenComplete(() {
-                _log.info('ScrollToTop animation done -> setScrubbing(false)');
-                timelineState.setScrubbing(false);
-              });
+              .whenComplete(() => timelineState.setScrubbing(false));
         }
 
       case ScrollToDateEvent scrollToDateEvent:
@@ -253,7 +246,6 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
 
   @override
   void dispose() {
-    _log.info('SliverTimeline dispose');
     _scrollController.dispose();
     _eventSubscription?.cancel();
     super.dispose();
@@ -294,12 +286,8 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
               duration: const Duration(milliseconds: 500),
               curve: Curves.easeInOut,
             )
-            .whenComplete(() {
-              _log.info('ScrollToDate animation done -> setScrubbing(false)');
-              timelineState.setScrubbing(false);
-            });
+            .whenComplete(() => 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,9 +5,6 @@ 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)),
@@ -21,11 +18,7 @@ final timelineServiceProvider = Provider<TimelineService>(
   (ref) {
     final timelineUsers = ref.watch(timelineUsersProvider).valueOrNull ?? [];
     final timelineService = ref.watch(timelineFactoryProvider).main(timelineUsers);
-    _log.info('main TimelineService built users=$timelineUsers');
-    ref.onDispose(() {
-      _log.info('main TimelineService disposed');
-      timelineService.dispose();
-    });
+    ref.onDispose(timelineService.dispose);
     return timelineService;
   },
   // Empty dependencies to inform the framework that this provider
@@ -43,12 +36,8 @@ 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).map((users) {
-    _log.info('timelineUsers emission: $users');
-    return users;
-  });
+  return ref.watch(timelineRepositoryProvider).watchTimelineUserIds(currentUserId);
 });

mobile/lib/utils/version_compatibility.dart

@@ -1,7 +1,16 @@
-String? getVersionCompatibilityMessage(int _, int appMinor, int _, int serverMinor) {
+import 'package:immich_mobile/utils/semver.dart';
+
+String? getVersionCompatibilityMessage(SemVer serverVersion, SemVer appVersion) {
   // Add latest compat info up top
-  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';
+
+  // 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.';
   }
 
   return null;

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

@@ -26,6 +26,7 @@ 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';
@@ -88,18 +89,9 @@ class LoginForm extends HookConsumerWidget {
     checkVersionMismatch() async {
       try {
         final packageInfo = await PackageInfo.fromPlatform();
-        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,
-        );
+        final appSemVer = SemVer.fromString(packageInfo.version);
+        final serverSemVer = serverInfo.serverVersion;
+        warningMessage.value = getVersionCompatibilityMessage(appSemVer, serverSemVer);
       } catch (error) {
         warningMessage.value = 'Error checking version compatibility';
       }

mobile/test/modules/utils/version_compatibility_test.dart

@@ -1,29 +1,47 @@
 import 'package:flutter_test/flutter_test.dart';
+import 'package:immich_mobile/utils/semver.dart';
 import 'package:immich_mobile/utils/version_compatibility.dart';
 
 void main() {
-  test('getVersionCompatibilityMessage', () {
-    String? result;
+  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.';
 
-    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 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, 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',
-    );
+    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, 106, 1, 106);
-    expect(result, null);
+  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, 107, 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, 108);
-    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);
+    });
   });
 }

web/src/app.css

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

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

@@ -10,13 +10,11 @@
   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';
@@ -84,6 +82,27 @@
     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>
@@ -169,41 +188,21 @@
         {#if person}
           <SetFeaturedPhotoAction {asset} {person} {onAction} />
         {/if}
-        {#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}
+        <ActionMenuItem action={Actions.SetProfilePicture} />
+
+        {#if isOwner && !isLocked}
+          <ArchiveAction {asset} {onAction} {preAction} />
         {/if}
+        <ActionMenuItem action={ViewInTimeline} />
+        <ActionMenuItem action={ViewSimilar} />
 
         {#if !asset.isTrashed && isOwner}
           <SetVisibilityAction asset={toTimelineAsset(asset)} {onAction} {preAction} />
         {/if}
 
-        {#if asset.type === AssetTypeEnum.Video}
-          <MenuOption
-            icon={mdiVideoOutline}
-            onClick={() => setPlayOriginalVideo(!playOriginalVideo)}
-            text={playOriginalVideo ? $t('play_transcoded_video') : $t('play_original_video')}
-          />
-        {/if}
+        <ActionMenuItem action={PlayOriginalVideo} />
+
         {#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, LoadingSpinner, Text } from '@immich/ui';
+  import { Icon, IconButton, Link, LoadingSpinner, Text } from '@immich/ui';
   import { mdiCamera, mdiCameraIris, mdiClose, mdiImageOutline, mdiInformationOutline } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -310,14 +310,13 @@
           {#snippet popup({ marker })}
             {@const { lat, lon } = marker}
             <div class="flex flex-col items-center gap-1">
-              <p class="font-bold">{lat.toPrecision(6)}, {lon.toPrecision(6)}</p>
-              <a
+              <Text fontWeight="bold">{lat.toPrecision(6)}, {lon.toPrecision(6)}</Text>
+              <Link
                 href="https://www.openstreetmap.org/?mlat={lat}&mlon={lon}&zoom=13#map=15/{lat}/{lon}"
-                target="_blank"
-                class="font-medium text-primary underline focus:outline-none"
+                class="text-primary"
               >
                 {$t('open_in_openstreetmap')}
-              </a>
+              </Link>
             </div>
           {/snippet}
         </Map>

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

@@ -1,20 +0,0 @@
-<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="max-w-full truncate text-xs font-medium text-white drop-shadow-lg">
+            <p class="text-white-shadow max-w-full truncate p-1 text-xs font-medium text-white">
               {assetOwner.name}
             </p>
           </div>

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

@@ -38,7 +38,6 @@
     Control,
     ControlButton,
     ControlGroup,
-    FullscreenControl,
     GeoJSON,
     GeolocateControl,
     MapLibre,
@@ -343,7 +342,6 @@
 
       {#if !simplified}
         <GeolocateControl position="top-left" />
-        <FullscreenControl position="top-left" />
         <ScaleControl />
         <AttributionControl compact={false} />
       {/if}
@@ -401,13 +399,13 @@
       >
         {#snippet children({ feature }: { feature: Feature })}
           {#if useLocationPin}
-            <Icon icon={mdiMapMarker} size="50px" class="translate-y-[-50%] text-primary" />
+            <Icon icon={mdiMapMarker} size="50px" class="translate-y-[calc(5px-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_images', {
+                ? $t('map_marker_for_image', {
                     values: { city: feature.properties.city, country: feature.properties.country },
                   })
                 : $t('map_marker_with_image')}
@@ -415,7 +413,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,6 +11,7 @@ import {
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import {
+  mdiAccountCircleOutline,
   mdiAlertOutline,
   mdiCogRefreshOutline,
   mdiContentCopy,
@@ -41,6 +42,7 @@ 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';
@@ -242,6 +244,13 @@ 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,
@@ -286,6 +295,7 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto) =
     Tag,
     TagPeople,
     Edit,
+    SetProfilePicture,
     RefreshFacesJob,
     RefreshMetadataJob,
     RegenerateThumbnailJob,

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

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