NOMERGE read_receipts: Improve UX by making the sheet draggable-scrollable

The Figma asks that the sheet be expandable to fill the screen:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=11367-21131&m=dev
and that's implemented here.

Compare f8ddff2, where we removed an earlier implementation. I
hadn't tried to bring that back yet because I wanted to support
triggering resize from a drag handle at the top, and I couldn't
figure out how to do that. IIRC I could only get the drag handle to
respond to drag-down gestures (via `enableDrag: true`) by shifting
the sheet's position downward. That worked as a way to dismiss the
sheet, but it was frustratingly different from the gesture handling
on the scrollable list:
- The slide-to-dismiss looked different from the shrink-and-dismiss,
  an awkward inconsistency
- The list would respond to upward drags, too (by growing and
  showing more content)
I've managed it here, modulo with a header instead of a drag handle,
by making sure the scrollable area extends through the top of the
sheet. (Done with a CustomScrollView, pinning the header to the
viewport top.)

Author: chrisbobbe

lib/widgets/action_sheet.dart

@@ -225,6 +225,123 @@ class BottomSheetEmptyContentPlaceholder extends StatelessWidget {
   }
 }
 
+/// Like [BottomSheetEmptyContentPlaceholder], but as a sliver.
+///
+/// Simply a [BottomSheetEmptyContentPlaceholder] wrapped in
+/// [SliverToBoxAdapter].
+class SliverBottomSheetEmptyContentPlaceholder extends StatelessWidget {
+  const SliverBottomSheetEmptyContentPlaceholder({
+    super.key,
+    this.message,
+    this.loading = false,
+  }) : assert((message != null) ^ loading);
+
+  final String? message;
+  final bool loading;
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverToBoxAdapter(
+      child: BottomSheetEmptyContentPlaceholder(message: message, loading: loading));
+  }
+}
+
+/// A bottom sheet that resizes, scrolls, and dismisses in response to dragging.
+///
+/// [header] is assumed to occupy the full width its parent allows.
+/// (This is important for the clipping/shadow effect when [contentSliver]
+/// scrolls under the header.)
+///
+/// The sheet's initial height and minimum height before dismissing
+/// are set proportionally to the screen's height.
+/// The screen's height is read from the parent's max-height constraint,
+/// so the caller should not introduce widgets that interfere with that.
+/// (Non-layout wrapper widgets such as [InheritedWidget]s are OK.)
+///
+/// The sheet's dismissal works like this:
+/// - A "Close" button is offered.
+/// - A drag-down or fling on the header or the [contentSliver]
+///   causes those areas to shrink past a threshold at which the sheet
+///   decides to dismiss.
+/// - The [enableDrag] param of upstream's [showModalBottomSheet]
+///   only seems to affect gesture handling on the Close button and its padding
+///   (which are not part of the resizable/scrollable area):
+///   - When true, the Close button responds to a downward fling by
+///     sliding the sheet downward and dismissing it
+///     (i.e. not by the usual behavior where the header- and-content height
+///     shrinks past a threshold, causing dismissal).
+///   - When false, the Close button doesn't respond to a downward fling.
+class DraggableScrollableModalBottomSheet extends StatelessWidget {
+  const DraggableScrollableModalBottomSheet({
+    super.key,
+    required this.header,
+    required this.contentSliver,
+  });
+
+  final Widget header;
+  final Widget contentSliver;
+
+  @override
+  Widget build(BuildContext context) {
+    return DraggableScrollableSheet(
+      expand: false,
+      builder: (context, controller) {
+        final backgroundColor = Theme.of(context).bottomSheetTheme.backgroundColor!;
+
+        // The "inset shadow" effect in Figma is a bit awkwardly
+        // implemented and there might be a better factoring:
+        // 1. This effect leans on the abstraction that [contentSliver]
+        //    is simply a scrollable area in its own viewport.
+        //    We'd normally just wrap that viewport in [InsetShadowBox].
+        // 2. Really, though, the scrollable includes the header,
+        //    pinned to the viewport top. We do this to support resizing
+        //    (and dismiss-on-min-height) on gestures in the header, too,
+        //    uniformly with the content.
+        // 3. So for the top shadow, we tack a shadow gradient onto the header,
+        //    exploiting the header's pinning behavior to keep it fixed.
+        // 3. For the bottom, I haven't found a nice sliver-based implementation
+        //    that supports pinning a shadow overlay at the viewport bottom.
+        //    So for the bottom we use [InsetShadowBox] around the viewport,
+        //    with just `bottom:` and no `top:`.
+
+        final headerWithShadow = Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            ColoredBox(
+              color: backgroundColor,
+              child: header),
+            SizedBox(height: 8, width: double.infinity,
+              child: DecoratedBox(decoration: fadeToTransparencyDecoration(
+                FadeToTransparencyDirection.down, backgroundColor))),
+          ]);
+
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Flexible(
+              child: InsetShadowBox(
+                bottom: 8,
+                color: backgroundColor,
+                child: CustomScrollView(
+                  // The iOS default "bouncing" effect would look uncoordinated
+                  // in the common case where overscroll co-occurs with
+                  // shrinking the sheet past the threshold where it dismisses.
+                  physics: ClampingScrollPhysics(),
+                  controller: controller,
+                  slivers: [
+                    PinnedHeaderSliver(child: headerWithShadow),
+                    SliverPadding(
+                      padding: EdgeInsets.only(bottom: 8),
+                      sliver: contentSliver),
+                  ]))),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              child: const BottomSheetDismissButton(style: BottomSheetDismissButtonStyle.close))
+          ]);
+    });
+  }
+}
+
 /// A button in an action sheet.
 ///
 /// When built from server data, the action sheet ignores changes in that data;

lib/widgets/read_receipts.dart

@@ -6,7 +6,6 @@ import '../generated/l10n/zulip_localizations.dart';
 import 'action_sheet.dart';
 import 'actions.dart';
 import 'color.dart';
-import 'inset_shadow.dart';
 import 'profile.dart';
 import 'store.dart';
 import 'text.dart';
@@ -81,36 +80,23 @@ class _ReadReceiptsState extends State<ReadReceipts> with PerAccountStoreAwareSt
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
-    // TODO could pull out this layout/appearance code,
-    //   focusing this widget only on state management
+    final receiptCount = userIds.length;
 
     final content = switch (status) {
-      FetchStatus.loading => BottomSheetEmptyContentPlaceholder(loading: true),
-      FetchStatus.error   => BottomSheetEmptyContentPlaceholder(
+      FetchStatus.loading => SliverBottomSheetEmptyContentPlaceholder(loading: true),
+      FetchStatus.error   => SliverBottomSheetEmptyContentPlaceholder(
         message: zulipLocalizations.actionSheetReadReceiptsErrorReadCount),
       FetchStatus.success => userIds.isEmpty
-        ? BottomSheetEmptyContentPlaceholder(
+        ? SliverBottomSheetEmptyContentPlaceholder(
             message: zulipLocalizations.actionSheetReadReceiptsZeroReadCount)
-        : InsetShadowBox(
-            top: 8, bottom: 8,
-            color: DesignVariables.of(context).bgContextMenu,
-            child: ListView.builder(
-              padding: EdgeInsets.symmetric(vertical: 8),
-              itemCount: userIds.length,
-              itemBuilder: (context, index) =>
-                ReadReceiptsUserItem(userId: userIds[index])))
+        : SliverList.builder(
+            itemCount: receiptCount,
+            itemBuilder: (_, index) => ReadReceiptsUserItem(userId: userIds[index])),
     };
 
-    return SizedBox(
-      height: 500, // TODO(design) tune
-      child: Column(
-        children: [
-          _ReadReceiptsHeader(receiptCount: userIds.length, status: status),
-          Expanded(child: content),
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 16),
-            child: const BottomSheetDismissButton(style: BottomSheetDismissButtonStyle.close))
-        ]));
+    return DraggableScrollableModalBottomSheet(
+      header: _ReadReceiptsHeader(receiptCount: receiptCount, status: status),
+      contentSliver: content);
   }
 }