Connect drawer: own the drawer so its gestures and the content's stay apart

The Material sheet could not keep the drawer's open/close gesture and the
content's scroll separate: while its settle animation runs it consumes any
touch's down for its own drag, so a scroll that started right after an
opening flick went to a sheet already at the top and died there, and a pull
through the content fought the animation frame by frame so only a fast
flick closed the drawer. Nothing in the sheet state can move, snap or
interrupt it from outside.

Replace the scaffold with the drawer on foundation's anchored draggable
(ConnectDrawerState): the same peek geometry, two-thirds expanded height,
fold marker, insets, tablet panel, handle and reset-on-close as before, with
the anchors computed from the layout, the peek and the measured sheet. The
drag handle keeps its own drag (and grabs a moving drawer), with the
expand/collapse actions for assistive tech. Under the content, one
nested-scroll connection routes each touch by ConnectSheetGesture's kind:
a drawer gesture interrupts any running animation, moves the drawer by raw
deltas, settles on release by the handle's own rule (125 dp/s, then 56 dp
from where it rested) and never scrolls the content; a content gesture
scrolls the content, stops at its top and never moves the drawer; the
content's own flings pass through untouched. The release rule is pure and
unit tested.

Verified on the S21: a scroll and a drag started right after an opening
flick, a slow pull to close from rest, during the opening animation and
right after a content fling, a flick to close, a long opening drag past the
top, a content fling that reaches the top, and opening and closing by the
handle; the content is at its top after every close.

Author: bitprecipice

app/app/src/main/java/com/bringyour/network/ui/MainNavHost.kt

@@ -47,7 +47,8 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.NavigationBarItemDefaults
 import androidx.compose.material3.NavigationDrawerItemDefaults
 import androidx.compose.material3.NavigationRailItemDefaults
-import androidx.compose.material3.SheetState
+import com.bringyour.network.ui.connect.ConnectDrawerState
+import com.bringyour.network.ui.connect.rememberConnectDrawerState
 import androidx.compose.material3.SheetValue
 import androidx.compose.material3.VerticalDivider
 import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
@@ -264,10 +265,7 @@ private fun MainNavHostContent(
     val scope = rememberCoroutineScope()
 
     // hoisted here so re-tapping the connect tab can collapse it
-    val connectActionsSheetState = rememberStandardBottomSheetState(
-        initialValue = SheetValue.PartiallyExpanded,
-        skipHiddenState = true
-    )
+    val connectActionsSheetState = rememberConnectDrawerState()
 
     val navSuiteLayoutType = with(adaptiveInfo) {
 
@@ -1083,7 +1081,7 @@ fun MainNavContent(
     solanaPaymentViewModel: SolanaPaymentViewModel,
     isCheckingSolanaTransaction: Boolean,
     isPro: Boolean,
-    connectActionsSheetState: SheetState,
+    connectActionsSheetState: ConnectDrawerState,
     accountViewModel: AccountViewModel = hiltViewModel<AccountViewModel>(),
     profileViewModel: ProfileViewModel = hiltViewModel<ProfileViewModel>(),
     accountPointsViewModel: AccountPointsViewModel = hiltViewModel<AccountPointsViewModel>(),

app/app/src/main/java/com/bringyour/network/ui/connect/BrowseLocationsScreen.kt

@@ -11,7 +11,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.SheetState
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
@@ -36,7 +35,7 @@ fun BrowseLocationsScreen(
     locationsListViewModel: LocationsListViewModel,
     connectViewModel: ConnectViewModel,
     navController: NavController,
-    connectActionsSheetState: SheetState,
+    connectActionsSheetState: ConnectDrawerState,
     networkPeersViewModel: NetworkPeersViewModel = hiltViewModel(),
 ) {
     val fetchLocationsState by remember { locationsListViewModel.filterLocationsState }.collectAsState()

app/app/src/main/java/com/bringyour/network/ui/connect/ConnectDrawerState.kt

@@ -0,0 +1,113 @@
+package com.bringyour.network.ui.connect
+
+import androidx.compose.foundation.MutatePriority
+import androidx.compose.foundation.gestures.AnchoredDraggableDefaults
+import androidx.compose.foundation.gestures.AnchoredDraggableState
+import androidx.compose.foundation.gestures.animateTo
+import androidx.compose.foundation.gestures.animateToWithDecay
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.remember
+import kotlin.math.abs
+
+/** The connect drawer's two resting positions. */
+enum class ConnectDrawerValue { Collapsed, Expanded }
+
+/**
+ * The connect drawer's position, on foundation's anchored draggable so the
+ * drawer, its drag handle and the nested-scroll connection under its content
+ * all move the same state and the gesture rules (mmm/DESIGNSTYLE.md) can be
+ * enforced in full: a Material sheet would grab any touch that lands while
+ * it animates, and gives no way to move or snap it from outside.
+ */
+@Stable
+class ConnectDrawerState(initialValue: ConnectDrawerValue = ConnectDrawerValue.Collapsed) {
+
+    val draggable = AnchoredDraggableState(initialValue)
+
+    val currentValue: ConnectDrawerValue
+        get() = draggable.currentValue
+
+    /** Where the drawer is heading: its resting position, or the one it animates to. */
+    val targetValue: ConnectDrawerValue
+        get() = draggable.targetValue
+
+    val isAnimationRunning: Boolean
+        get() = draggable.isAnimationRunning
+
+    fun requireOffset(): Float = draggable.requireOffset()
+
+    suspend fun expand() {
+        draggable.animateTo(ConnectDrawerValue.Expanded, AnchoredDraggableDefaults.SnapAnimationSpec)
+    }
+
+    suspend fun partialExpand() {
+        draggable.animateTo(ConnectDrawerValue.Collapsed, AnchoredDraggableDefaults.SnapAnimationSpec)
+    }
+
+    /**
+     * Stops a running animation so a drag through the content moves the
+     * drawer from where it is, instead of fighting the animation frame by
+     * frame.
+     */
+    suspend fun interruptAnimation() {
+        if (draggable.isAnimationRunning) {
+            draggable.anchoredDrag(MutatePriority.UserInput) { }
+        }
+    }
+
+    /**
+     * Settles the drawer after a drag through its content was released with
+     * [velocity] (negative upward), by the same rule as the drag handle: a
+     * release faster than [velocityThresholdPx] goes the way it moves, a
+     * slower one goes to the other position only once it has travelled
+     * [positionalThresholdPx] from where it rested.
+     */
+    suspend fun release(velocity: Float, velocityThresholdPx: Float, positionalThresholdPx: Float) {
+        val anchors = draggable.anchors
+        if (!anchors.hasPositionFor(ConnectDrawerValue.Expanded) || !anchors.hasPositionFor(ConnectDrawerValue.Collapsed)) {
+            return
+        }
+        val target = releaseTarget(
+            offset = requireOffset(),
+            velocity = velocity,
+            from = draggable.settledValue,
+            expandedOffset = anchors.positionOf(ConnectDrawerValue.Expanded),
+            collapsedOffset = anchors.positionOf(ConnectDrawerValue.Collapsed),
+            velocityThresholdPx = velocityThresholdPx,
+            positionalThresholdPx = positionalThresholdPx,
+        )
+        draggable.animateToWithDecay(target, velocity)
+    }
+
+    companion object {
+
+        /** The resting position a release lands on. Pure, for tests. */
+        fun releaseTarget(
+            offset: Float,
+            velocity: Float,
+            from: ConnectDrawerValue,
+            expandedOffset: Float,
+            collapsedOffset: Float,
+            velocityThresholdPx: Float,
+            positionalThresholdPx: Float,
+        ): ConnectDrawerValue {
+            if (abs(velocity) >= velocityThresholdPx) {
+                return if (velocity < 0f) ConnectDrawerValue.Expanded else ConnectDrawerValue.Collapsed
+            }
+            return when (from) {
+                ConnectDrawerValue.Collapsed ->
+                    if (offset <= collapsedOffset - positionalThresholdPx) ConnectDrawerValue.Expanded
+                    else ConnectDrawerValue.Collapsed
+                ConnectDrawerValue.Expanded ->
+                    if (offset >= expandedOffset + positionalThresholdPx) ConnectDrawerValue.Collapsed
+                    else ConnectDrawerValue.Expanded
+            }
+        }
+    }
+}
+
+@Composable
+fun rememberConnectDrawerState(): ConnectDrawerState {
+    return remember { ConnectDrawerState() }
+}