feat: scroll to top & view in timeline (#20274)

* feat: scroll to top & view in timeline

* use EventStream

* refactor: event invocation and listerner

* fix: correct parent routing

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

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/timeline.model.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/cast_action_button.widget.dart';
@@ -15,6 +16,7 @@ import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asse
 import 'package:immich_mobile/providers/routes.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/providers/websocket.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
 
 class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
   const ViewerTopAppBar({super.key});
@@ -30,6 +32,9 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
     final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
     final isInLockedView = ref.watch(inLockedViewProvider);
 
+    final previousRouteName = ref.watch(previousRouteNameProvider);
+    final showViewInTimelineButton = previousRouteName != TabShellRoute.name && previousRouteName != null;
+
     final isShowingSheet = ref.watch(assetViewerProvider.select((state) => state.showingBottomSheet));
     int opacity = ref.watch(
       assetViewerProvider.select((state) => state.backgroundOpacity),
@@ -50,6 +55,16 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
         const CastActionButton(
           menuItem: true,
         ),
+      if (showViewInTimelineButton)
+        IconButton(
+          onPressed: () async {
+            await context.maybePop();
+            await context.navigateTo(const TabShellRoute(children: [MainTimelineRoute()]));
+            EventStream.shared.emit(ScrollToDateEvent(asset.createdAt));
+          },
+          icon: const Icon(Icons.image_search),
+          tooltip: 'view_in_timeline',
+        ),
       if (asset.hasRemote && isOwner && !asset.isFavorite)
         const FavoriteActionButton(source: ActionSource.viewer, menuItem: true),
       if (asset.hasRemote && isOwner && asset.isFavorite)

mobile/lib/presentation/widgets/memory/memory_bottom_info.widget.dart

@@ -4,8 +4,9 @@ import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/domain/models/memory.model.dart';
-
-import 'package:immich_mobile/providers/asset_viewer/scroll_to_date_notifier.provider.dart';
+import 'package:immich_mobile/domain/models/timeline.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/routing/router.dart';
 
 class DriftMemoryBottomInfo extends StatelessWidget {
   final DriftMemory memory;
@@ -44,18 +45,22 @@ class DriftMemoryBottomInfo extends StatelessWidget {
             ),
           ],
         ),
-        MaterialButton(
-          minWidth: 0,
-          onPressed: () {
-            context.maybePop();
-            scrollToDateNotifierProvider.scrollToDate(fileCreatedDate);
-          },
-          shape: const CircleBorder(),
-          color: Colors.white.withValues(alpha: 0.2),
-          elevation: 0,
-          child: const Icon(
-            Icons.open_in_new,
-            color: Colors.white,
+        Tooltip(
+          message: 'view_in_timeline'.tr(),
+          child: MaterialButton(
+            minWidth: 0,
+            onPressed: () {
+              context.maybePop();
+              context.navigateTo(const TabShellRoute(children: [MainTimelineRoute()]));
+              EventStream.shared.emit(ScrollToDateEvent(fileCreatedDate));
+            },
+            shape: const CircleBorder(),
+            color: Colors.white.withValues(alpha: 0.2),
+            elevation: 0,
+            child: const Icon(
+              Icons.open_in_new,
+              color: Colors.white,
+            ),
           ),
         ),
       ]),

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

@@ -97,21 +97,73 @@ class _SliverTimeline extends ConsumerStatefulWidget {
 
 class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
   final _scrollController = ScrollController();
-  StreamSubscription? _reloadSubscription;
+  StreamSubscription? _eventSubscription;
 
   @override
   void initState() {
     super.initState();
-    _reloadSubscription = EventStream.shared.listen<TimelineReloadEvent>((_) => setState(() {}));
+    _eventSubscription = EventStream.shared.listen(_onEvent);
+  }
+
+  void _onEvent(Event event) {
+    switch (event) {
+      case ScrollToTopEvent():
+        _scrollController.animateTo(
+          0,
+          duration: const Duration(milliseconds: 250),
+          curve: Curves.easeInOut,
+        );
+      case ScrollToDateEvent scrollToDateEvent:
+        _scrollToDate(scrollToDateEvent.date);
+      case TimelineReloadEvent():
+        setState(() {});
+      default:
+        break;
+    }
   }
 
   @override
   void dispose() {
     _scrollController.dispose();
-    _reloadSubscription?.cancel();
+    _eventSubscription?.cancel();
     super.dispose();
   }
 
+  void _scrollToDate(DateTime date) {
+    final asyncSegments = ref.read(timelineSegmentProvider);
+    asyncSegments.whenData((segments) {
+      // Find the segment that contains assets from the target date
+      final targetSegment = segments.firstWhereOrNull((segment) {
+        if (segment.bucket is TimeBucket) {
+          final segmentDate = (segment.bucket as TimeBucket).date;
+          // Check if the segment date matches the target date (year, month, day)
+          return segmentDate.year == date.year && segmentDate.month == date.month && segmentDate.day == date.day;
+        }
+        return false;
+      });
+
+      // If exact date not found, try to find the closest month
+      final fallbackSegment = targetSegment ??
+          segments.firstWhereOrNull((segment) {
+            if (segment.bucket is TimeBucket) {
+              final segmentDate = (segment.bucket as TimeBucket).date;
+              return segmentDate.year == date.year && segmentDate.month == date.month;
+            }
+            return false;
+          });
+
+      if (fallbackSegment != null) {
+        // Scroll to the segment with a small offset to show the header
+        final targetOffset = fallbackSegment.startOffset - 50;
+        _scrollController.animateTo(
+          targetOffset.clamp(0.0, _scrollController.position.maxScrollExtent),
+          duration: const Duration(milliseconds: 500),
+          curve: Curves.easeInOut,
+        );
+      }
+    });
+  }
+
   @override
   Widget build(BuildContext _) {
     final asyncSegments = ref.watch(timelineSegmentProvider);