fix(mobile): better UI for metadata panel (#24428)

* change drag bar and animation position

* ensure bottom bar is below the metadata panel - move the bottom bar from bottomNavigationBar into the Stack

* change some parameters

* add background color for night mode

* background color

* change default position

* minor changes

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

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

@@ -79,7 +79,7 @@ class ActivitiesBottomSheet extends HookConsumerWidget {
       expand: false,
       shouldCloseOnMinExtent: false,
       resizeOnScroll: false,
-      backgroundColor: context.isDarkTheme ? Colors.black : Colors.white,
+      backgroundColor: context.isDarkTheme ? context.colorScheme.surface : Colors.white,
     );
   }
 }

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -97,7 +97,7 @@ class AssetViewer extends ConsumerStatefulWidget {
 }
 
 const double _kBottomSheetMinimumExtent = 0.4;
-const double _kBottomSheetSnapExtent = 0.7;
+const double _kBottomSheetSnapExtent = 0.67;
 
 class _AssetViewerState extends ConsumerState<AssetViewer> {
   static final _dummyListener = ImageStreamListener((image, _) => image.dispose());
@@ -399,10 +399,14 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     final isDraggingDown = currentExtent < previousExtent;
     previousExtent = currentExtent;
     // Closes the bottom sheet if the user is dragging down
-    if (isDraggingDown && delta.extent < 0.55) {
+    if (isDraggingDown && delta.extent < 0.67) {
       if (dragInProgress) {
         blockGestures = true;
       }
+      // Jump to a lower position before starting close animation to prevent glitch
+      if (bottomSheetController.isAttached) {
+        bottomSheetController.jumpTo(0.67);
+      }
       sheetCloseController?.close();
     }
 
@@ -480,7 +484,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     previousExtent = _kBottomSheetMinimumExtent;
     sheetCloseController = showBottomSheet(
       context: ctx,
-      sheetAnimationStyle: const AnimationStyle(duration: Durations.short4, reverseDuration: Durations.short2),
+      sheetAnimationStyle: const AnimationStyle(duration: Durations.medium2, reverseDuration: Durations.medium2),
       constraints: const BoxConstraints(maxWidth: double.infinity),
       shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))),
       backgroundColor: ctx.colorScheme.surfaceContainerLowest,
@@ -688,16 +692,20 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
               backgroundDecoration: BoxDecoration(color: backgroundColor),
               enablePanAlways: true,
             ),
+            if (!showingBottomSheet)
+              const Positioned(
+                bottom: 0,
+                left: 0,
+                right: 0,
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [AssetStackRow(), ViewerBottomBar()],
+                ),
+              ),
           ],
         ),
-        bottomNavigationBar: showingBottomSheet
-            ? const SizedBox.shrink()
-            : const Column(
-                mainAxisSize: MainAxisSize.min,
-                mainAxisAlignment: MainAxisAlignment.end,
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: [AssetStackRow(), ViewerBottomBar()],
-              ),
       ),
     );
   }

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

@@ -52,7 +52,7 @@ class AssetDetailBottomSheet extends ConsumerWidget {
       expand: false,
       shouldCloseOnMinExtent: false,
       resizeOnScroll: false,
-      backgroundColor: context.isDarkTheme ? Colors.black : Colors.white,
+      backgroundColor: context.isDarkTheme ? context.colorScheme.surface : Colors.white,
     );
   }
 }
@@ -299,7 +299,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         // Appears in (Albums)
         Padding(padding: const EdgeInsets.only(top: 16.0), child: _buildAppearsInList(ref, context)),
         // padding at the bottom to avoid cut-off
-        const SizedBox(height: 100),
+        const SizedBox(height: 30),
       ],
     );
   }

mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart

@@ -81,7 +81,7 @@ class _BaseDraggableScrollableSheetState extends ConsumerState<BaseBottomSheet>
                 child: CustomScrollView(
                   controller: scrollController,
                   slivers: [
-                    const SliverPersistentHeader(delegate: _DragHandleDelegate(), pinned: true),
+                    const SliverToBoxAdapter(child: _DragHandle()),
                     if (widget.actions.isNotEmpty)
                       SliverToBoxAdapter(
                         child: Column(
@@ -108,31 +108,13 @@ class _BaseDraggableScrollableSheetState extends ConsumerState<BaseBottomSheet>
   }
 }
 
-class _DragHandleDelegate extends SliverPersistentHeaderDelegate {
-  const _DragHandleDelegate();
-
-  @override
-  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
-    return const _DragHandle();
-  }
-
-  @override
-  bool shouldRebuild(_DragHandleDelegate oldDelegate) => false;
-
-  @override
-  double get minExtent => 50.0;
-
-  @override
-  double get maxExtent => 50.0;
-}
-
 class _DragHandle extends StatelessWidget {
   const _DragHandle();
 
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      height: 50,
+      height: 38,
       child: Center(
         child: SizedBox(
           width: 32,