refactor: animate bottom sheet (#19655)

* refactor: animate bottom sheet

* rebase on main

---------

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

mobile/lib/presentation/widgets/bottom_app_bar/home_bottom_app_bar.widget.dart

@@ -31,8 +31,9 @@ class HomeBottomAppBar extends ConsumerWidget {
     return BaseBottomSheet(
       initialChildSize: 0.25,
       minChildSize: 0.22,
+      expand: false,
       actions: [
-        const ShareActionButton(),
+        if (multiselect.isEnabled) const ShareActionButton(),
         if (multiselect.hasRemote) ...[
           const ShareLinkActionButton(source: ActionSource.timeline),
           const ArchiveActionButton(source: ActionSource.timeline),

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

@@ -43,15 +43,26 @@ class Timeline extends StatelessWidget {
   }
 }
 
-class _SliverTimeline extends StatefulWidget {
+class _SliverTimeline extends ConsumerStatefulWidget {
   const _SliverTimeline();
 
   @override
-  State createState() => _SliverTimelineState();
+  ConsumerState createState() => _SliverTimelineState();
 }
 
-class _SliverTimelineState extends State<_SliverTimeline> {
+class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
   final _scrollController = ScrollController();
+  PersistentBottomSheetController? _bottomSheetController;
+  bool _isMultiSelectEnabled = false;
+
+  @override
+  void initState() {
+    super.initState();
+    ref.listenManual(
+      multiSelectProvider.select((s) => s.isEnabled),
+      _onMultiSelectChanged,
+    );
+  }
 
   @override
   void dispose() {
@@ -59,15 +70,33 @@ class _SliverTimelineState extends State<_SliverTimeline> {
     super.dispose();
   }
 
+  void _onMultiSelectChanged(bool? previous, bool current) {
+    if (context.mounted && current != _isMultiSelectEnabled) {
+      setState(() {
+        _isMultiSelectEnabled = current;
+        if (current) {
+          _bottomSheetController = showBottomSheet(
+            context: context,
+            builder: (_) => const HomeBottomAppBar(),
+          );
+          _bottomSheetController?.closed.then((_) {
+            _bottomSheetController = null;
+            // Reset the multi-select state when the bottom sheet is closed
+            ref.read(multiSelectProvider.notifier).reset();
+          });
+        } else {
+          _bottomSheetController?.close();
+        }
+      });
+    }
+  }
+
   @override
   Widget build(BuildContext _) {
-    return Consumer(
-      builder: (context, ref, child) {
     final asyncSegments = ref.watch(timelineSegmentProvider);
     final maxHeight =
         ref.watch(timelineArgsProvider.select((args) => args.maxHeight));
-        final isMultiSelectEnabled =
+
-            ref.watch(multiSelectProvider.select((s) => s.isEnabled));
     return asyncSegments.widgetWhen(
       onData: (segments) {
         final childCount = (segments.lastOrNull?.lastIndex ?? -1) + 1;
@@ -83,15 +112,14 @@ class _SliverTimelineState extends State<_SliverTimeline> {
                 layoutSegments: segments,
                 timelineHeight: maxHeight,
                 topPadding: totalAppBarHeight + 10,
-                    bottomPadding:
+                bottomPadding: context.padding.bottom + scrubberBottomPadding,
-                        context.padding.bottom + scrubberBottomPadding,
                 child: CustomScrollView(
                   primary: true,
                   cacheExtent: maxHeight * 2,
                   slivers: [
                     SliverAnimatedOpacity(
                       duration: Durations.medium1,
-                          opacity: isMultiSelectEnabled ? 0 : 1,
+                      opacity: _isMultiSelectEnabled ? 0 : 1,
                       sliver: const ImmichSliverAppBar(
                         floating: true,
                         pinned: false,
@@ -121,21 +149,17 @@ class _SliverTimelineState extends State<_SliverTimeline> {
                   ],
                 ),
               ),
-                  if (isMultiSelectEnabled) ...[
+              if (_isMultiSelectEnabled)
                 const Positioned(
                   top: 60,
                   left: 25,
                   child: _MultiSelectStatusButton(),
                 ),
-                    const HomeBottomAppBar(),
-                  ],
             ],
           ),
         );
       },
     );
-      },
-    );
   }
 }