feat: new feature board

2026-06-22 22:56:39 -07:00 · 2026-06-22 16:59:23 -05:00
28 changed files with 525 additions and 160 deletions
@@ -1251,6 +1251,22 @@
  "favorite_or_unfavorite_photo": "Favorite or unfavorite photo",
  "favorites": "Favorites",
  "favorites_page_no_favorites": "No favorite assets found",
+  "feature_message_non_destructive_editing_body": "Edit your photos freely — the original is always kept untouched.",
+  "feature_message_non_destructive_editing_title": "Non-destructive editing",
+  "feature_message_ocr_body": "Immich now reads the text inside your photos, so you can search for them by what they say.",
+  "feature_message_ocr_title": "Search text in your photos",
+  "feature_message_open_in_immich_body": "Set Immich as your gallery on Android to open photos straight from other apps.",
+  "feature_message_open_in_immich_title": "Open photos in Immich",
+  "feature_message_recently_added_body": "Jump straight to everything you've added lately on a dedicated page.",
+  "feature_message_recently_added_title": "Recently added",
+  "feature_message_settings_subtitle": "See what's new in version {version}",
+  "feature_message_share_quality_body": "Press and hold the share button to choose the image quality before you share.",
+  "feature_message_share_quality_title": "Choose your share quality",
+  "feature_message_slideshow_body": "Sit back and watch your photos play in a full-screen slideshow.",
+  "feature_message_slideshow_title": "Slideshow",
+  "feature_message_upload_to_album_body": "Add photos directly into an album as you upload them.",
+  "feature_message_upload_to_album_title": "Upload straight to an album",
+  "feature_message_version": "Version {version}",
  "feature_photo_updated": "Feature photo updated",
  "features": "Features",
  "features_in_development": "Features in Development",
@@ -2530,6 +2546,7 @@
  "week": "Week",
  "welcome": "Welcome",
  "welcome_to_immich": "Welcome to Immich",
+  "whats_new": "What's new",
  "when": "When",
  "width": "Width",
  "wifi_name": "Wi-Fi Name",
@@ -4,6 +4,7 @@ import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/config/album_config.dart';
 import 'package:immich_mobile/domain/models/config/backup_config.dart';
 import 'package:immich_mobile/domain/models/config/cleanup_config.dart';
+import 'package:immich_mobile/domain/models/config/feature_message_config.dart';
 import 'package:immich_mobile/domain/models/config/image_config.dart';
 import 'package:immich_mobile/domain/models/config/map_config.dart';
 import 'package:immich_mobile/domain/models/config/network_config.dart';
@@ -32,6 +33,7 @@ class AppConfig {
  final BackupConfig backup;
  final NetworkConfig network;
  final ShareConfig share;
+  final FeatureMessageConfig featureMessage;

  const AppConfig({
    this.logLevel = .info,
@@ -46,6 +48,7 @@ class AppConfig {
    this.backup = const .new(),
    this.network = const .new(),
    this.share = const .new(),
+    this.featureMessage = const .new(),
  });

  AppConfig copyWith({
@@ -61,6 +64,7 @@ class AppConfig {
    BackupConfig? backup,
    NetworkConfig? network,
    ShareConfig? share,
+    FeatureMessageConfig? featureMessage,
  }) => .new(
    logLevel: logLevel ?? this.logLevel,
    theme: theme ?? this.theme,
@@ -74,6 +78,7 @@ class AppConfig {
    backup: backup ?? this.backup,
    network: network ?? this.network,
    share: share ?? this.share,
+    featureMessage: featureMessage ?? this.featureMessage,
  );

  @override
@@ -91,15 +96,29 @@ class AppConfig {
          other.album == album &&
          other.backup == backup &&
          other.network == network &&
-          other.share == share);
+          other.share == share &&
+          other.featureMessage == featureMessage);

  @override
-  int get hashCode =>
-      Object.hash(logLevel, theme, cleanup, map, timeline, image, viewer, slideshow, album, backup, network, share);
+  int get hashCode => Object.hash(
+    logLevel,
+    theme,
+    cleanup,
+    map,
+    timeline,
+    image,
+    viewer,
+    slideshow,
+    album,
+    backup,
+    network,
+    share,
+    featureMessage,
+  );

  @override
  String toString() =>
-      'AppConfig(logLevel: $logLevel, theme: $theme, cleanup: $cleanup, map: $map, timeline: $timeline, image: $image, viewer: $viewer, slideshow: $slideshow, album: $album, backup: $backup, network: $network, share: $share)';
+      'AppConfig(logLevel: $logLevel, theme: $theme, cleanup: $cleanup, map: $map, timeline: $timeline, image: $image, viewer: $viewer, slideshow: $slideshow, album: $album, backup: $backup, network: $network, share: $share, featureMessage: $featureMessage)';

  T read<T>(SettingsKey<T> key) =>
      (switch (key) {
@@ -146,6 +165,7 @@ class AppConfig {
            .slideshowDuration => slideshow.duration,
            .slideshowLook => slideshow.look,
            .slideshowDirection => slideshow.direction,
+            .featureMessageSeenVersion => featureMessage.seenVersion,
          })
          as T;

@@ -199,6 +219,7 @@ class AppConfig {
      .slideshowDuration => copyWith(slideshow: slideshow.copyWith(duration: value as int)),
      .slideshowLook => copyWith(slideshow: slideshow.copyWith(look: value as SlideshowLook)),
      .slideshowDirection => copyWith(slideshow: slideshow.copyWith(direction: value as SlideshowDirection)),
+      .featureMessageSeenVersion => copyWith(featureMessage: featureMessage.copyWith(seenVersion: value as int)),
    };
  }
 }
@@ -0,0 +1,18 @@
+class FeatureMessageConfig {
+  final int seenVersion;
+
+  const FeatureMessageConfig({this.seenVersion = 0});
+
+  FeatureMessageConfig copyWith({int? seenVersion}) =>
+      FeatureMessageConfig(seenVersion: seenVersion ?? this.seenVersion);
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) || (other is FeatureMessageConfig && other.seenVersion == seenVersion);
+
+  @override
+  int get hashCode => seenVersion.hashCode;
+
+  @override
+  String toString() => 'FeatureMessageConfig(seenVersion: $seenVersion)';
+}
@@ -0,0 +1,49 @@
+class FeatureHighlight {
+  final String image;
+  final String titleKey;
+  final String bodyKey;
+
+  const FeatureHighlight({required this.image, required this.titleKey, required this.bodyKey});
+}
+
+const int featureMessageHighlightVersion = 1;
+
+const String featureMessageReleaseLabel = '3.0.0';
+
+const List<FeatureHighlight> featureMessageHighlights = [
+  FeatureHighlight(
+    image: 'assets/feature_message/share_quality.webp',
+    titleKey: 'feature_message_share_quality_title',
+    bodyKey: 'feature_message_share_quality_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/slideshow.webp',
+    titleKey: 'feature_message_slideshow_title',
+    bodyKey: 'feature_message_slideshow_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/recently_added.webp',
+    titleKey: 'feature_message_recently_added_title',
+    bodyKey: 'feature_message_recently_added_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/non_destructive_editing.webp',
+    titleKey: 'feature_message_non_destructive_editing_title',
+    bodyKey: 'feature_message_non_destructive_editing_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/ocr.webp',
+    titleKey: 'feature_message_ocr_title',
+    bodyKey: 'feature_message_ocr_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/open_in_immich.webp',
+    titleKey: 'feature_message_open_in_immich_title',
+    bodyKey: 'feature_message_open_in_immich_body',
+  ),
+  FeatureHighlight(
+    image: 'assets/feature_message/upload_to_album.webp',
+    titleKey: 'feature_message_upload_to_album_title',
+    bodyKey: 'feature_message_upload_to_album_body',
+  ),
+];
@@ -73,7 +73,10 @@ enum SettingsKey<T> {
  slideshowRepeat<bool>(),
  slideshowDuration<int>(),
  slideshowLook<SlideshowLook>(codec: _EnumCodec(SlideshowLook.values)),
-  slideshowDirection<SlideshowDirection>(codec: _EnumCodec(SlideshowDirection.values));
+  slideshowDirection<SlideshowDirection>(codec: _EnumCodec(SlideshowDirection.values)),
+
+  // Feature message
+  featureMessageSeenVersion<int>();

  final _SettingsCodec<T>? _codecOverride;

@@ -0,0 +1,17 @@
+import 'package:immich_mobile/domain/models/feature_message.model.dart';
+import 'package:immich_mobile/domain/models/settings_key.dart';
+import 'package:immich_mobile/infrastructure/repositories/settings.repository.dart';
+
+class FeatureMessageService {
+  final SettingsRepository _settingsRepository;
+
+  const FeatureMessageService(this._settingsRepository);
+
+  bool shouldShow() {
+    final seen = _settingsRepository.appConfig.read(SettingsKey.featureMessageSeenVersion);
+    return featureMessageHighlights.isNotEmpty && featureMessageHighlightVersion > seen;
+  }
+
+  Future<void> markSeen() =>
+      _settingsRepository.write(SettingsKey.featureMessageSeenVersion, featureMessageHighlightVersion);
+}
@@ -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");
@@ -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);
  }

@@ -2,7 +2,9 @@ import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
+import 'package:immich_mobile/domain/models/feature_message.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/feature_message/feature_message_dialog.widget.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/widgets/settings/advanced_settings.dart';
 import 'package:immich_mobile/widgets/settings/asset_list_settings/asset_list_settings.dart';
@@ -87,6 +89,14 @@ class _MobileLayout extends StatelessWidget {
                ],
        )
        .toList();
+    settings.add(
+      SettingsCard(
+        icon: Icons.auto_awesome_outlined,
+        title: 'whats_new'.tr(),
+        subtitle: 'feature_message_settings_subtitle'.tr(namedArgs: {'version': featureMessageReleaseLabel}),
+        onTap: () => showFeatureMessageDialog(context),
+      ),
+    );
    return ListView(padding: const EdgeInsets.only(top: 10.0, bottom: 60), children: [...settings]);
  }
 }
@@ -116,6 +126,13 @@ class _TabletLayout extends HookWidget {
                  ),
                ),
              ),
+              SliverToBoxAdapter(
+                child: ListTile(
+                  title: Text('whats_new'.tr()),
+                  leading: const Icon(Icons.auto_awesome_outlined),
+                  onTap: () => showFeatureMessageDialog(context),
+                ),
+              ),
            ],
          ),
        ),
@@ -3,14 +3,37 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/presentation/widgets/memory/memory_lane.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
+import 'package:immich_mobile/presentation/widgets/feature_message/feature_message_dialog.widget.dart';
+import 'package:immich_mobile/providers/feature_message.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/memory.provider.dart';

@RoutePage()
-class MainTimelinePage extends ConsumerWidget {
+class MainTimelinePage extends ConsumerStatefulWidget {
  const MainTimelinePage({super.key});

  @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  ConsumerState<MainTimelinePage> createState() => _MainTimelinePageState();
+}
+
+class _MainTimelinePageState extends ConsumerState<MainTimelinePage> {
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted || ref.read(featureMessageCheckedProvider)) {
+        return;
+      }
+      ref.read(featureMessageCheckedProvider.notifier).state = true;
+
+      final service = ref.read(featureMessageServiceProvider);
+      // if (service.shouldShow()) {
+      showFeatureMessageDialog(context).then((_) => service.markSeen());
+      // }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
    final hasMemories = ref.watch(driftMemoryFutureProvider.select((state) => state.value?.isNotEmpty ?? false));
    return Timeline(
      topSliverWidget: const SliverToBoxAdapter(child: DriftMemoryLane()),
@@ -0,0 +1,201 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/feature_message.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+Future<void> showFeatureMessageDialog(BuildContext context) {
+  return showGeneralDialog<void>(
+    context: context,
+    useRootNavigator: true,
+    barrierDismissible: true,
+    barrierLabel: 'whats_new'.tr(),
+    barrierColor: Colors.black.withValues(alpha: 0.55),
+    transitionDuration: const Duration(milliseconds: 280),
+    pageBuilder: (_, __, ___) => const _FeatureMessageDialog(),
+    transitionBuilder: (_, animation, __, child) {
+      final curved = CurvedAnimation(parent: animation, curve: Curves.easeOutCubic, reverseCurve: Curves.easeInCubic);
+      return FadeTransition(
+        opacity: animation,
+        child: ScaleTransition(scale: Tween<double>(begin: 0.94, end: 1.0).animate(curved), child: child),
+      );
+    },
+  );
+}
+
+class _FeatureMessageDialog extends StatefulWidget {
+  const _FeatureMessageDialog();
+
+  @override
+  State<_FeatureMessageDialog> createState() => _FeatureMessageDialogState();
+}
+
+class _FeatureMessageDialogState extends State<_FeatureMessageDialog> {
+  final PageController _controller = PageController();
+  int _index = 0;
+
+  bool get _isLast => _index >= featureMessageHighlights.length - 1;
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _advance() {
+    if (_isLast) {
+      Navigator.of(context).pop();
+      return;
+    }
+    _controller.nextPage(duration: const Duration(milliseconds: 320), curve: Curves.easeOutCubic);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      insetPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 64),
+      clipBehavior: Clip.antiAlias,
+      backgroundColor: context.colorScheme.surface,
+      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(24))),
+      child: ConstrainedBox(
+        constraints: BoxConstraints(maxHeight: context.height * 0.9, maxWidth: 480),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+              padding: const EdgeInsets.fromLTRB(24, 20, 24, 4),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text('whats_new'.tr(), style: context.textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700)),
+                  const SizedBox(height: 2),
+                  Text(
+                    'feature_message_version'.tr(namedArgs: {'version': featureMessageReleaseLabel}),
+                    style: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceVariant),
+                  ),
+                ],
+              ),
+            ),
+            Expanded(
+              child: PageView.builder(
+                controller: _controller,
+                itemCount: featureMessageHighlights.length,
+                onPageChanged: (i) => setState(() => _index = i),
+                itemBuilder: (_, index) => _FeaturePage(highlight: featureMessageHighlights[index]),
+              ),
+            ),
+            const SizedBox(height: 8),
+            _PageDots(controller: _controller, index: _index, count: featureMessageHighlights.length),
+            Padding(
+              padding: const EdgeInsets.fromLTRB(20, 16, 20, 16),
+              child: SizedBox(
+                width: double.infinity,
+                child: FilledButton(
+                  onPressed: _advance,
+                  style: FilledButton.styleFrom(padding: const EdgeInsets.symmetric(vertical: 14)),
+                  child: AnimatedSwitcher(
+                    duration: const Duration(milliseconds: 200),
+                    child: Text(_isLast ? 'ok'.tr() : 'next'.tr(), key: ValueKey(_isLast)),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _FeaturePage extends StatelessWidget {
+  final FeatureHighlight highlight;
+
+  const _FeaturePage({required this.highlight});
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = context.colorScheme;
+
+    return SingleChildScrollView(
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(20, 8, 20, 0),
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(18),
+              child: ColoredBox(
+                color: scheme.surfaceContainerHighest,
+                child: SizedBox(
+                  width: double.infinity,
+                  height: 300,
+                  child: Image.asset(
+                    highlight.image,
+                    fit: BoxFit.contain,
+                    errorBuilder: (context, _, __) =>
+                        Center(child: Icon(Icons.auto_awesome_outlined, color: scheme.onSurfaceVariant, size: 56)),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.fromLTRB(24, 18, 24, 8),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  highlight.titleKey.tr(),
+                  style: context.textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700),
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  highlight.bodyKey.tr(),
+                  style: context.textTheme.bodyMedium?.copyWith(color: scheme.onSurfaceVariant, height: 1.4),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _PageDots extends StatelessWidget {
+  final PageController controller;
+  final int index;
+  final int count;
+
+  const _PageDots({required this.controller, required this.index, required this.count});
+
+  @override
+  Widget build(BuildContext context) {
+    final primary = context.primaryColor;
+
+    return AnimatedBuilder(
+      animation: controller,
+      builder: (context, _) {
+        final page = controller.hasClients ? (controller.page ?? index.toDouble()) : index.toDouble();
+        return Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: List.generate(count, (i) {
+            final activeness = (1 - (page - i).abs()).clamp(0.0, 1.0);
+            return AnimatedContainer(
+              duration: const Duration(milliseconds: 150),
+              margin: const EdgeInsets.symmetric(horizontal: 3),
+              height: 7,
+              width: 7 + 16 * activeness,
+              decoration: BoxDecoration(
+                color: Color.lerp(context.colorScheme.surfaceContainerHighest, primary, activeness),
+                borderRadius: BorderRadius.circular(8),
+              ),
+            );
+          }),
+        );
+      },
+    );
+  }
+}
@@ -0,0 +1,101 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/feature_message.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+
+Future<void> showFeatureMessageSheet(BuildContext context) {
+  return showModalBottomSheet(
+    context: context,
+    isScrollControlled: true,
+    backgroundColor: Colors.transparent,
+    useRootNavigator: true,
+    builder: (_) => const _FeatureMessageSheet(),
+  );
+}
+
+class _FeatureMessageSheet extends StatelessWidget {
+  const _FeatureMessageSheet();
+
+  @override
+  Widget build(BuildContext context) {
+    return BaseBottomSheet(
+      actions: const [],
+      resizeOnScroll: false,
+      expand: false,
+      initialChildSize: 0.6,
+      minChildSize: 0.4,
+      maxChildSize: 0.9,
+      slivers: [
+        SliverToBoxAdapter(
+          child: Padding(
+            padding: const EdgeInsets.fromLTRB(24, 4, 24, 16),
+            child: Text(
+              'whats_new'.tr(),
+              style: context.textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.w600),
+            ),
+          ),
+        ),
+        SliverList.separated(
+          itemCount: featureMessageHighlights.length,
+          separatorBuilder: (_, __) => const SizedBox(height: 8),
+          itemBuilder: (_, index) => _HighlightCard(highlight: featureMessageHighlights[index]),
+        ),
+        const SliverToBoxAdapter(child: SizedBox(height: 16)),
+      ],
+      footer: SafeArea(
+        top: false,
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(24, 8, 24, 16),
+          child: SizedBox(
+            width: double.infinity,
+            child: FilledButton(
+              onPressed: () => Navigator.of(context).pop(),
+              style: FilledButton.styleFrom(padding: const EdgeInsets.symmetric(vertical: 14)),
+              child: Text('feature_message_got_it'.tr()),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _HighlightCard extends StatelessWidget {
+  final FeatureHighlight highlight;
+
+  const _HighlightCard({required this.highlight});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ClipRRect(
+            borderRadius: BorderRadius.circular(16),
+            child: AspectRatio(
+              aspectRatio: 16 / 9,
+              child: Image.asset(
+                highlight.image,
+                fit: BoxFit.cover,
+                errorBuilder: (context, _, __) => ColoredBox(
+                  color: context.colorScheme.surfaceContainerHighest,
+                  child: Icon(Icons.image_outlined, color: context.colorScheme.onSurfaceVariant, size: 48),
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(height: 12),
+          Text(highlight.titleKey.tr(), style: context.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w600)),
+          const SizedBox(height: 4),
+          Text(
+            highlight.bodyKey.tr(),
+            style: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceVariant),
+          ),
+        ],
+      ),
+    );
+  }
+}
@@ -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);
      },
    );
@@ -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;
@@ -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,
@@ -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);
      }
    });
@@ -0,0 +1,9 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/services/feature_message.service.dart';
+import 'package:immich_mobile/providers/infrastructure/settings.provider.dart';
+
+final featureMessageServiceProvider = Provider<FeatureMessageService>(
+  (ref) => FeatureMessageService(ref.read(settingsProvider)),
+);
+
+final featureMessageCheckedProvider = StateProvider<bool>((ref) => false);
@@ -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);
 });
@@ -18,6 +18,7 @@ import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/infrastructure/repositories/settings.repository.dart';
 import 'package:immich_mobile/providers/auth.provider.dart';
 import 'package:immich_mobile/providers/background_sync.provider.dart';
+import 'package:immich_mobile/providers/feature_message.provider.dart';
 import 'package:immich_mobile/providers/gallery_permission.provider.dart';
 import 'package:immich_mobile/providers/oauth.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
@@ -262,6 +263,7 @@ class LoginForm extends HookConsumerWidget {
          }
          unawaited(handleSyncFlow());
          ref.read(websocketProvider.notifier).connect();
+          unawaited(ref.read(featureMessageServiceProvider).markSeen());
          unawaited(context.router.replaceAll([const TabShellRoute()]));
          return;
        }
@@ -349,6 +351,7 @@ class LoginForm extends HookConsumerWidget {
              await getManageMediaPermission();
            }
            unawaited(handleSyncFlow());
+            unawaited(ref.read(featureMessageServiceProvider).markSeen());
            unawaited(context.router.replaceAll([const TabShellRoute()]));
            return;
          }
@@ -8,13 +8,15 @@ class SettingsCard extends StatelessWidget {
    required this.icon,
    required this.title,
    required this.subtitle,
-    required this.settingRoute,
+    this.settingRoute,
+    this.onTap,
  });

  final IconData icon;
  final String title;
  final String subtitle;
-  final PageRouteInfo settingRoute;
+  final PageRouteInfo? settingRoute;
+  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
@@ -38,7 +40,7 @@ class SettingsCard extends StatelessWidget {
          ),
          title: Text(title, style: context.textTheme.titleMedium!.copyWith(color: context.primaryColor)),
          subtitle: Text(subtitle, style: context.textTheme.bodyMedium),
-          onTap: () => context.pushRoute(settingRoute),
+          onTap: onTap ?? (settingRoute != null ? () => context.pushRoute(settingRoute!) : null),
        ),
      ),
    );
@@ -119,6 +119,7 @@ flutter:
  uses-material-design: true
  assets:
    - assets/
+    - assets/feature_message/
  fonts:
    - family: GoogleSans
      fonts: