Added width limit to side panes

Author: JetpackDuba

src/main/kotlin/com/jetpackduba/gitnuro/ui/RepositoryOpen.kt

@@ -398,7 +398,11 @@ fun MainContentView(
                 }
             }
         },
-        onFirstSizeDrag = {
+        onFirstSizeDragStarted = { currentWidth ->
+            firstWidth = currentWidth
+            tabViewModel.setFirstPaneWidth(currentWidth)
+        },
+        onFirstSizeChange = {
             val newWidth = firstWidth + it / density
 
             if (newWidth > 150 && rebaseInteractiveState !is RebaseInteractiveState.AwaitingInteraction) {
@@ -411,14 +415,18 @@ fun MainContentView(
                 tabViewModel.persistFirstPaneWidth()
             }
         },
-        onThirdSizeDrag = {
+        onThirdSizeChange = {
             val newWidth = thirdWidth - it / density
 
             if (newWidth > 150) {
                 thirdWidth = newWidth
                 tabViewModel.setThirdPaneWidth(newWidth)
             }
         },
+        onThirdSizeDragStarted = { currentWidth ->
+            thirdWidth = currentWidth
+            tabViewModel.setThirdPaneWidth(currentWidth)
+        },
         onThirdSizeDragStopped = {
             scope.launch {
                 tabViewModel.persistThirdPaneWidth()

src/main/kotlin/com/jetpackduba/gitnuro/ui/components/TripleVerticalSplitPanel.kt

@@ -3,13 +3,23 @@ package com.jetpackduba.gitnuro.ui.components
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.gestures.draggable
 import androidx.compose.foundation.gestures.rememberDraggableState
-import androidx.compose.foundation.layout.*
-import androidx.compose.runtime.Composable
+import androidx.compose.foundation.hoverable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsHoveredAsState
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.pointer.pointerHoverIcon
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
 import com.jetpackduba.gitnuro.ui.resizePointerIconEast
 
+const val MAX_SIDE_PANE_PROPORTION = 0.4f
+
 @Composable
 fun TripleVerticalSplitPanel(
     modifier: Modifier = Modifier,
@@ -18,18 +28,35 @@ fun TripleVerticalSplitPanel(
     third: @Composable () -> Unit,
     firstWidth: Float,
     thirdWidth: Float,
-    onFirstSizeDrag: (Float) -> Unit,
-    onFirstSizeDragStopped: (Float) -> Unit,
-    onThirdSizeDrag: (Float) -> Unit,
-    onThirdSizeDragStopped: (Float) -> Unit,
+    onFirstSizeDragStarted: (Float) -> Unit,
+    onFirstSizeChange: (Float) -> Unit,
+    onFirstSizeDragStopped: () -> Unit,
+    onThirdSizeDragStarted: (Float) -> Unit,
+    onThirdSizeChange: (Float) -> Unit,
+    onThirdSizeDragStopped: () -> Unit,
 ) {
+    val density = LocalDensity.current.density
+    var screenWidth by remember { mutableStateOf(0) }
+    val screenWidthInDp = remember(screenWidth) { (screenWidth / density) }
+
+    val firstWidthLimited = remember(firstWidth, screenWidthInDp) {
+        calcLimitedWidth(screenWidthInDp, firstWidth)
+    }
+
+    val thirdWidthLimited = remember(thirdWidth, screenWidthInDp) {
+        calcLimitedWidth(screenWidthInDp, thirdWidth)
+    }
+
     Row(
         modifier = modifier
+            .onSizeChanged {
+                screenWidth = it.width
+            }
     ) {
         if (firstWidth > 0) {
             Box(
                 modifier = Modifier
-                    .width(firstWidth.dp)
+                    .width(firstWidthLimited.dp)
             ) {
                 first()
             }
@@ -39,11 +66,14 @@ fun TripleVerticalSplitPanel(
                     .width(8.dp)
                     .draggable(
                         state = rememberDraggableState {
-                            onFirstSizeDrag(it)
+                            onFirstSizeChange(it)
                         },
                         orientation = Orientation.Horizontal,
+                        onDragStarted = {
+                            onFirstSizeDragStarted(firstWidthLimited)
+                        },
                         onDragStopped = {
-                            onFirstSizeDragStopped(it)
+                            onFirstSizeDragStopped()
                         },
                     )
                     .pointerHoverIcon(resizePointerIconEast)
@@ -63,21 +93,32 @@ fun TripleVerticalSplitPanel(
                 .width(8.dp)
                 .draggable(
                     state = rememberDraggableState {
-                        onThirdSizeDrag(it)
+                        onThirdSizeChange(it)
                     },
                     orientation = Orientation.Horizontal,
+                    onDragStarted = {
+                        onThirdSizeDragStarted(thirdWidthLimited)
+                    },
                     onDragStopped = {
-                        onThirdSizeDragStopped(it)
+                        onThirdSizeDragStopped()
                     },
                 )
                 .pointerHoverIcon(resizePointerIconEast)
         )
 
         Box(
             modifier = Modifier
-                .width(thirdWidth.dp)
+                .width(thirdWidthLimited.dp)
         ) {
             third()
         }
     }
+}
+
+private fun calcLimitedWidth(maxSize: Float, currentSize: Float): Float {
+    return if (currentSize > maxSize * MAX_SIDE_PANE_PROPORTION) {
+        maxSize * MAX_SIDE_PANE_PROPORTION
+    } else {
+        currentSize
+    }
 }