Change: Move bottom sheet actions to a header to keep them in view when keyboard is showing (#151)

Rolf-Smit · web-flow · commit a8a2b851eb9f · 2026-04-22T15:20:13.000+02:00
diff --git a/composeApp/src/commonMain/kotlin/org/neotech/app/abysner/presentation/component/bottomsheet/BottomSheetHeader.kt b/composeApp/src/commonMain/kotlin/org/neotech/app/abysner/presentation/component/bottomsheet/BottomSheetHeader.kt
@@ -0,0 +1,91 @@
+/*
+ * Abysner - Dive planner
+ * Copyright (C) 2026 Neotech
+ *
+ * Abysner is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License version 3,
+ * as published by the Free Software Foundation.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+package org.neotech.app.abysner.presentation.component.bottomsheet
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.FilledIconButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun BottomSheetHeader(
+    modifier: Modifier = Modifier,
+    title: String,
+    primaryLabel: String,
+    primaryEnabled: Boolean = true,
+    onClose: () -> Unit,
+    onPrimary: () -> Unit,
+) {
+    Box(modifier) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            IconButton(onClick = onClose) {
+                Icon(
+                    imageVector = Icons.Default.Close,
+                    contentDescription = "Dismiss",
+                )
+            }
+            Text(
+                modifier = Modifier.weight(1f),
+                text = title,
+                style = MaterialTheme.typography.titleLarge,
+                textAlign = TextAlign.Center,
+            )
+            FilledIconButton(
+                enabled = primaryEnabled,
+                onClick = onPrimary,
+            ) {
+                Icon(
+                    imageVector = Icons.Default.Check,
+                    contentDescription = primaryLabel,
+                )
+            }
+        }
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 8.dp),
+            contentAlignment = Alignment.TopCenter,
+        ) {
+            Box(
+                modifier = Modifier
+                    .width(32.dp)
+                    .height(4.dp)
+                    .clip(RoundedCornerShape(50))
+                    .background(MaterialTheme.colorScheme.outlineVariant)
+            )
+        }
+    }
+}
diff --git a/composeApp/src/commonMain/kotlin/org/neotech/app/abysner/presentation/component/bottomsheet/ModalBottomSheetScaffold.kt b/composeApp/src/commonMain/kotlin/org/neotech/app/abysner/presentation/component/bottomsheet/ModalBottomSheetScaffold.kt
@@ -1,6 +1,6 @@
 /*
  * Abysner - Dive planner
- * Copyright (C) 2024 Neotech
+ * Copyright (C) 2024-2026 Neotech
  *
  * Abysner is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License version 3,
@@ -14,6 +14,7 @@ package org.neotech.app.abysner.presentation.component.bottomsheet
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
@@ -22,13 +23,14 @@ import androidx.compose.ui.Modifier
 @Composable
 fun ModalBottomSheetScaffold(
     modifier: Modifier = Modifier,
+    header: @Composable () -> Unit = {},
     content: @Composable BoxScope.() -> Unit
 ) {
     val scrollState = rememberScrollState()
-    Box(
-        Modifier
-            .verticalScroll(scrollState).then(modifier)
-    ) {
-        content()
+    Column(modifier) {
+        header()
+        Box(Modifier.verticalScroll(scrollState)) {
+            content()
+        }
     }
 }
diff --git a/composeApp/src/commonMain/kotlin/org/neotech/app/abysner/presentation/screens/planner/cylinders/CylinderPickerBottomSheet.kt b/composeApp/src/commonMain/kotlin/org/neotech/app/abysner/presentation/screens/planner/cylinders/CylinderPickerBottomSheet.kt
@@ -54,7 +54,7 @@ import org.neotech.app.abysner.domain.diveplanning.model.PlannedCylinderModel
 import org.neotech.app.abysner.presentation.utilities.ModalTarget
 import org.neotech.app.abysner.presentation.component.GasPickerComponent
 import org.neotech.app.abysner.presentation.component.GasPropertiesComponent
-import org.neotech.app.abysner.presentation.component.bottomsheet.BottomSheetButtonRow
+import org.neotech.app.abysner.presentation.component.bottomsheet.BottomSheetHeader
 import org.neotech.app.abysner.presentation.component.bottomsheet.ModalBottomSheetScaffold
 import org.neotech.app.abysner.presentation.component.clearFocusOutside
 import org.neotech.app.abysner.presentation.component.recordLayoutCoordinates
@@ -129,6 +129,7 @@ private fun CylinderPickerBottomSheet(
     onDismiss: () -> Unit = {},
 ) {
     ModalBottomSheet(
+        dragHandle = {},
         sheetState = sheetState,
         onDismissRequest = onDismiss,
     ) {
@@ -179,34 +180,52 @@ private fun CylinderPickerBottomSheetContent(
     var volume: Double? by remember(initialValue) {
         mutableStateOf(initialValue.waterVolume)
     }
-    val isVolumeValid = remember { mutableStateOf(false) }
+    val isVolumeValid = remember { mutableStateOf(true) }
 
     var startPressure: Double? by remember(initialValue) {
         mutableStateOf(initialValue.pressure)
     }
-    val isStartPressureValid = remember { mutableStateOf(false) }
+    val isStartPressureValid = remember { mutableStateOf(true) }
 
     val textFieldPositions = mutableStateMapOf<String, LayoutCoordinates>()
 
     val showStandardGasPickerDialog = remember { mutableStateOf(false) }
 
+    val dismiss: () -> Unit = {
+        scope.launch {
+            sheetState.hide()
+            onDismissRequest()
+        }
+    }
+
     ModalBottomSheetScaffold(
-        modifier = Modifier
-            .clearFocusOutside(textFieldPositions)
+        modifier = Modifier.clearFocusOutside(textFieldPositions),
+        header = {
+            BottomSheetHeader(
+                title = if (lockGas) { "Cylinder" } else { "Gas & cylinder" },
+                primaryLabel = if (isAdd) { "Add" } else { "Update" },
+                primaryEnabled = isVolumeValid.value && isStartPressureValid.value,
+                onClose = dismiss,
+                onPrimary = {
+                    onAddOrUpdateCylinder(
+                        // Copy since we want to maintain the uniqueIdentifier
+                        initialValue.copy(
+                            gas = Gas(
+                                oxygenFraction = oxygenPercentage / 100.0,
+                                heliumFraction = heliumPercentage / 100.0
+                            ),
+                            pressure = startPressure!!,
+                            waterVolume = volume!!,
+                        )
+                    )
+                    dismiss()
+                },
+            )
+        },
     ) {
         Column(
             modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp, bottom = 16.dp)
-        ) {
-
-            Text(
-                modifier = Modifier
-                    .padding(bottom = 16.dp)
-                    .fillMaxWidth(),
-                style = MaterialTheme.typography.headlineSmall,
-                text = if (lockGas) { "Cylinder" } else { "Gas & cylinder" }
-            )
-
-            val errorMessageVolume = remember { mutableStateOf<String?>(null) }
+        ) {            val errorMessageVolume = remember { mutableStateOf<String?>(null) }
             val errorMessagePressure = remember { mutableStateOf<String?>(null) }
 
             Row(
@@ -317,36 +336,6 @@ private fun CylinderPickerBottomSheetContent(
                     }
                 )
             }
-
-            BottomSheetButtonRow(
-                modifier = Modifier.padding(top = 16.dp),
-                secondaryLabel = "Cancel",
-                primaryLabel = if (isAdd) { "Add" } else { "Update" },
-                primaryEnabled = isVolumeValid.value,
-                onSecondary = {
-                    scope.launch {
-                        sheetState.hide()
-                        onDismissRequest()
-                    }
-                },
-                onPrimary = {
-                    onAddOrUpdateCylinder(
-                        // Copy since we want to maintain the uniqueIdentifier
-                        initialValue.copy(
-                            gas = Gas(
-                                oxygenFraction = oxygenPercentage / 100.0,
-                                heliumFraction = heliumPercentage / 100.0
-                            ),
-                            pressure = startPressure!!,
-                            waterVolume = volume!!,
-                        )
-                    )
-                    scope.launch {
-                        sheetState.hide()
-                        onDismissRequest()
-                    }
-                },
-            )
         }
     }
 
diff --git a/composeApp/src/commonMain/kotlin/org/neotech/app/abysner/presentation/screens/planner/diveconfiguration/DiveConfigurationBottomSheet.kt b/composeApp/src/commonMain/kotlin/org/neotech/app/abysner/presentation/screens/planner/diveconfiguration/DiveConfigurationBottomSheet.kt
@@ -12,9 +12,7 @@
 
 package org.neotech.app.abysner.presentation.screens.planner.diveconfiguration
 
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ButtonDefaults
@@ -33,7 +31,6 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
@@ -44,7 +41,7 @@ import org.neotech.app.abysner.domain.core.model.DiveMode
 import org.neotech.app.abysner.domain.diveplanning.model.DivePlanInputModel
 import org.neotech.app.abysner.presentation.component.RadioCardGroup
 import org.neotech.app.abysner.presentation.component.RadioCardItem
-import org.neotech.app.abysner.presentation.component.bottomsheet.BottomSheetButtonRow
+import org.neotech.app.abysner.presentation.component.bottomsheet.BottomSheetHeader
 import org.neotech.app.abysner.presentation.component.bottomsheet.ModalBottomSheetScaffold
 import org.neotech.app.abysner.presentation.component.textfield.DurationInputField
 import org.neotech.app.abysner.presentation.utilities.ModalTarget
@@ -129,6 +126,7 @@ private fun DiveConfigurationBottomSheet(
     onDelete: (() -> Unit)? = null,
 ) {
     ModalBottomSheet(
+        dragHandle = {},
         sheetState = sheetState,
         onDismissRequest = onDismiss,
     ) {
@@ -157,42 +155,40 @@ private fun DiveConfigurationBottomSheetContent(
 ) {
     val scope = rememberCoroutineScope()
     var surfaceInterval: Duration? by remember(initialSurfaceInterval) { mutableStateOf(initialSurfaceInterval) }
-    val isConfirmEnabled = remember(initialSurfaceInterval) { mutableStateOf(initialSurfaceInterval == null) }
+    val isConfirmEnabled = remember(initialSurfaceInterval) { mutableStateOf(true) }
     var selectedDiveModeIndex by remember(initialDiveMode) { mutableIntStateOf(initialDiveMode.toSelectionIndex()) }
 
-    ModalBottomSheetScaffold {
+    val dismiss: () -> Unit = {
+        scope.launch {
+            sheetState.hide()
+            onDismiss()
+        }
+    }
+
+    ModalBottomSheetScaffold(
+        header = {
+            BottomSheetHeader(
+                title = title,
+                primaryLabel = "Confirm",
+                primaryEnabled = isConfirmEnabled.value,
+                onClose = dismiss,
+                onPrimary = {
+                    val effectiveDuration = if (initialSurfaceInterval != null) {
+                        surfaceInterval ?: initialSurfaceInterval
+                    } else {
+                        null
+                    }
+                    onConfirm(effectiveDuration, selectedDiveModeIndex.toDiveMode())
+                    dismiss()
+                },
+            )
+        },
+    ) {
         Column(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(start = 16.dp, end = 16.dp, bottom = 16.dp)
         ) {
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(bottom = 16.dp),
-                horizontalArrangement = Arrangement.SpaceBetween,
-                verticalAlignment = Alignment.CenterVertically,
-            ) {
-                Text(
-                    style = MaterialTheme.typography.headlineSmall,
-                    text = title,
-                )
-                if (onDelete != null) {
-                    TextButton(
-                        onClick = {
-                            onDelete()
-                            scope.launch {
-                                sheetState.hide()
-                                onDismiss()
-                            }
-                        },
-                        colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colorScheme.error),
-                    ) {
-                        Text("Delete")
-                    }
-                }
-            }
-
             RadioCardGroup(
                 modifier = Modifier.padding(bottom = 16.dp),
                 items = diveModeItems,
@@ -219,30 +215,20 @@ private fun DiveConfigurationBottomSheetContent(
                 )
             }
 
-            BottomSheetButtonRow(
-                modifier = Modifier.padding(top = 16.dp),
-                secondaryLabel = "Cancel",
-                primaryLabel = "Confirm",
-                primaryEnabled = isConfirmEnabled.value,
-                onSecondary = {
-                    scope.launch {
-                        sheetState.hide()
-                        onDismiss()
-                    }
-                },
-                onPrimary = {
-                    val effectiveDuration = if (initialSurfaceInterval != null) {
-                        surfaceInterval ?: initialSurfaceInterval
-                    } else {
-                        null
-                    }
-                    onConfirm(effectiveDuration, selectedDiveModeIndex.toDiveMode())
-                    scope.launch {
-                        sheetState.hide()
-                        onDismiss()
-                    }
-                },
-            )
+            if (onDelete != null) {
+                TextButton(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 8.dp),
+                    onClick = {
+                        onDelete()
+                        dismiss()
+                    },
+                    colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colorScheme.error),
+                ) {
+                    Text("Delete dive")
+                }
+            }
         }
     }
 }
diff --git a/composeApp/src/commonMain/kotlin/org/neotech/app/abysner/presentation/screens/planner/segments/SegmentPickerBottomSheet.kt b/composeApp/src/commonMain/kotlin/org/neotech/app/abysner/presentation/screens/planner/segments/SegmentPickerBottomSheet.kt
