@momo-kits/native-kits 0.167.1-duo.2-debug → 0.167.1-duo.3-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/BottomSheet.kt

@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
@@ -51,6 +52,10 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.BackHandler
 import vn.momo.kits.platform.getScreenHeight
+import vn.momo.kits.layout.getScreenLayout
+
+// iPhone Duo inner display: center the sheet instead of spanning the width (RN BottomSheet).
+private val DUO_REGULAR_MIN_WIDTH = 600.dp
 
 @Composable
 internal fun BottomSheet(
@@ -63,7 +68,11 @@ internal fun BottomSheet(
     footerComponent: (@Composable () -> Unit)? = null,
     onDismiss: (() -> Unit)?
 ) {
-    val screenHeightDp = getScreenHeight()
+    val layout = getScreenLayout()
+    val isDuo = layout.isIPhoneDuoDevice
+    val isDuoCentered = isDuo && layout.width >= DUO_REGULAR_MIN_WIDTH
+    // the screen is the outer display on iPhone Duo, even when unfolded
+    val screenHeightDp = if (isDuo) layout.height else getScreenHeight()
     val screenHeightPx = with(LocalDensity.current) { screenHeightDp.toPx() }
     val sheetOffset = remember { Animatable(screenHeightPx) }
 
@@ -148,13 +157,32 @@ internal fun BottomSheet(
             }
     ) {
         val parentHeight = with(LocalDensity.current) { constraints.maxHeight.toDp() }
+        val maxHeight = if (isDuo) {
+            parentHeight - maxOf(layout.duoTopInset, Spacing.XL)
+        } else {
+            parentHeight - 90.dp
+        }
+        // landscape side buttons span the full height; in portrait the side status bar only covers the top
+        val sideInset = isDuo && !isDuoCentered && layout.width > layout.height
 
         Box(
             modifier = Modifier
                 .align(Alignment.BottomCenter)
                 .offset { IntOffset(x = 0, y = sheetOffset.value.toInt()) }
-                .fillMaxWidth()
-                .heightIn(max = parentHeight - 90.dp)
+                .then(
+                    if (isDuoCentered) {
+                        // keeps the portrait width in landscape, like system sheets
+                        Modifier.width(
+                            minOf(
+                                minOf(layout.width, layout.height) - Spacing.L * 2,
+                                layout.width - maxOf(layout.insetLeft, layout.insetRight, Spacing.L) * 2,
+                            )
+                        )
+                    } else {
+                        Modifier.fillMaxWidth()
+                    }
+                )
+                .heightIn(max = maxHeight)
                 .background(
                     color = if (isSurface) AppTheme.current.colors.background.surface else AppTheme.current.colors.background.default,
                     shape = RoundedCornerShape(topStart = Radius.M, topEnd = Radius.M)
@@ -168,7 +196,13 @@ internal fun BottomSheet(
             val bottomInset = if (useBottomInset) {
                 (AppNavigationBar.current - keyboardSizeState().value).coerceAtLeast(0.dp)
             } else 0.dp
-            Column(Modifier.padding(bottom = bottomInset)) {
+            Column(
+                Modifier
+                    .padding(bottom = bottomInset)
+                    .conditional(sideInset) {
+                        absolutePadding(left = layout.insetLeft, right = layout.insetRight)
+                    }
+            ) {
                 Box(
                     modifier = Modifier
                         .height(72.dp)
@@ -249,6 +283,11 @@ internal fun BottomSheet(
                         content()
                     }
                     BottomSheetFooter(footerComponent)
+                } else if (isDuo) {
+                    // content shrinks so a tall sheet keeps its header
+                    Box(Modifier.weight(1f, fill = false)) {
+                        content()
+                    }
                 } else {
                     content()
                 }

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/ModalScreen.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -25,6 +26,7 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.navigation.tracking.ScreenTracker
 import vn.momo.kits.platform.BackHandler
+import vn.momo.kits.layout.getScreenLayout
 
 @Composable
 internal fun ModalScreen(
@@ -100,12 +102,18 @@ internal fun ModalScreen(
         closeEvent()
     }
 
+    val layout = getScreenLayout()
+
     Box(
         modifier = Modifier
             .fillMaxSize()
             .background(Color.Black.copy(alpha = 0.6f * alpha.value))
             .noFeedbackClickable {
                 if(barrierDismissible) closeEvent()
+            }
+            // center below the side status bar and above the home indicator
+            .conditional(layout.isIPhoneDuoDevice) {
+                padding(top = layout.duoTopInset, bottom = layout.insetBottom)
             },
         contentAlignment = Alignment.Center
     ) {

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/StackScreen.kt

@@ -65,6 +65,8 @@ import vn.momo.kits.navigation.component.Header
 import vn.momo.kits.navigation.component.HeaderBackground
 import vn.momo.kits.navigation.component.HeaderRight
 import vn.momo.kits.navigation.component.HeaderSideBar
+import vn.momo.kits.navigation.bottomtab.LocalDuoRailHeight
+import vn.momo.kits.navigation.bottomtab.duoFloatingTabBarInset
 import vn.momo.kits.navigation.component.HeaderType
 import vn.momo.kits.navigation.component.InputSearchType
 import vn.momo.kits.platform.BackHandler
@@ -75,6 +77,7 @@ import kotlinx.coroutines.delay
 import vn.momo.kits.application.LocalContext
 import vn.momo.kits.utils.horizontalSafeAreaPadding
 import vn.momo.kits.layout.LocalScreenLayout
+import vn.momo.kits.layout.ScreenLayout
 import vn.momo.kits.layout.consumeHorizontalInsets
 import vn.momo.kits.layout.getScreenLayout
 import kotlin.time.Clock
@@ -84,11 +87,19 @@ import kotlin.time.ExperimentalTime
 internal val LocalFooterHeightPx = staticCompositionLocalOf { mutableIntStateOf(0) }
 internal val LocalHeaderRightWidthPx = staticCompositionLocalOf { mutableIntStateOf(0) }
 
+// Space a tab's content leaves for the tab bar and home indicator. On iPhone Duo the floating bar
+// overlays the content and the rail lives in the side strip, so only their own inset applies.
 @Composable
-private fun bottomTabBarInset(): Dp {
-    if (LocalNavigation.current.bottomTabIndex == -1) return 0.dp
+private fun bottomTabChildInset(): Dp {
     val keyboard = keyboardSizeState().value
-    return (BOTTOM_TAB_BAR_HEIGHT.dp + Spacing.S - keyboard).coerceAtLeast(0.dp)
+    val navigationBar = AppNavigationBar.current
+    val layout = getScreenLayout()
+    return when {
+        layout.isIPhoneDuo && layout.sideBar == null -> (duoFloatingTabBarInset(layout) - keyboard).coerceAtLeast(0.dp)
+        layout.isIPhoneDuo -> (navigationBar - keyboard).coerceAtLeast(0.dp)
+        else -> (BOTTOM_TAB_BAR_HEIGHT.dp + Spacing.S - keyboard).coerceAtLeast(0.dp) +
+            (navigationBar - keyboard).coerceAtLeast(0.dp)
+    }
 }
 
 @OptIn(ExperimentalMaterialApi::class, ExperimentalTime::class)
@@ -212,7 +223,10 @@ internal fun StackScreen(
                 Header(onBackHandler)
             }
 
-            HeaderSideBar(bottomInset = bottomBarsHeight(isBottomTabChild), modifier = Modifier.zIndex(4f))
+            HeaderSideBar(
+                bottomInset = maxOf(bottomBarsHeight(isBottomTabChild), if (isBottomTabChild) LocalDuoRailHeight.current else 0.dp),
+                modifier = Modifier.zIndex(4f),
+            )
 
             Column(Modifier.zIndex(5f).horizontalSafeAreaPadding()) {
                 SearchAnimated(snapState = snapState)
@@ -239,7 +253,7 @@ private fun bottomBarsHeight(isBottomTabChild: Boolean): Dp {
     val navigationBar = AppNavigationBar.current
     return when {
         options.hasFooter() -> with(LocalDensity.current) { LocalFooterHeightPx.current.intValue.toDp() }
-        isBottomTabChild -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
+        isBottomTabChild -> bottomTabChildInset()
         else -> navigationBar
     }
 }
@@ -274,10 +288,11 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
     val scrollState = LocalScrollState.current
     val navigationBar = AppNavigationBar.current
     val screenLayout = getScreenLayout()
+    val useDuoGlass = options.usesDuoGlassHeader(screenLayout)
 
     Spacer(
         Modifier.height(
-            if (options.headerType is HeaderType.DefaultOrExtended || (options.headerType is HeaderType.Transparent && !options.headerType.isFullScreenContent))
+            if (!useDuoGlass && (options.headerType is HeaderType.DefaultOrExtended || (options.headerType is HeaderType.Transparent && !options.headerType.isFullScreenContent)))
                 screenLayout.headerHeight else 0.dp
         )
     )
@@ -297,10 +312,13 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
             .conditional(options.scrollData.scrollable && options.scrollData.scrollState is ScrollState) {
                 verticalScroll(scrollState)
             }
+            .conditional(useDuoGlass) {
+                padding(top = screenLayout.headerHeight)
+            }
             .padding(
                 bottom = when {
                     options.hasFooter() || isBottomTabRoot -> 0.dp
-                    isBottomTabChild -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
+                    isBottomTabChild -> bottomTabChildInset()
                     !options.scrollData.scrollable && options.scrollData.scrollState == null -> 0.dp
                     else -> navigationBar
                 }
@@ -343,7 +361,9 @@ internal fun FooterContent() {
     val options = LocalOptions.current
     if (options.hasFooter()) {
         val keyboardSize = keyboardSizeState()
-        val bottomPadding = (AppNavigationBar.current - keyboardSize.value).coerceAtLeast(0.dp)
+        // the Duo floating tab bar overlays tab content, so a tab's footer sits above it
+        val duoTabInset = if (LocalNavigation.current.bottomTabIndex != -1) duoFloatingTabBarInset(getScreenLayout()) else 0.dp
+        val bottomPadding = (maxOf(AppNavigationBar.current, duoTabInset) - keyboardSize.value).coerceAtLeast(0.dp)
         Footer(
             footerComponent = options.footerComponent,
             bottomPadding = bottomPadding,
@@ -608,6 +628,12 @@ internal val LocalOptions = staticCompositionLocalOf<NavigationOptions> { error(
 
 val StackScreenScrollableState = staticCompositionLocalOf<ScrollableState?> { null }
 
+// iPhone Duo side bar: content scrolls under a glass header instead of starting below it (RN Screen).
+internal fun NavigationOptions.usesDuoGlassHeader(layout: ScreenLayout): Boolean =
+    layout.sideBar != null && headerType is HeaderType.DefaultOrExtended &&
+        getInputSearchType(this) == InputSearchType.None &&
+        scrollData.scrollable && scrollData.scrollState is ScrollState
+
 internal fun getInputSearchType(options: NavigationOptions): InputSearchType {
     return when (val headerType = options.headerType) {
         is HeaderType.DefaultOrExtended -> when {

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/BottomTab.kt

@@ -8,6 +8,7 @@ import androidx.compose.animation.scaleOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
@@ -27,6 +28,7 @@ import vn.momo.kits.navigation.NavigationOptions
 import vn.momo.kits.navigation.StackScreen
 import vn.momo.kits.navigation.component.HeaderType
 import vn.momo.kits.platform.reportFloatingArrowBack
+import vn.momo.kits.layout.getScreenLayout
 
 private var bottomTabOptionItems : MutableList<NavigationOptions?> = mutableListOf()
 internal fun setBottomTabOption(index: Int, options: NavigationOptions){
@@ -78,81 +80,98 @@ fun BottomTab(
         }
     }
 
+    val layout = getScreenLayout()
+    val railHeight = if (layout.isIPhoneDuo && layout.sideBar != null) {
+        duoRailHeight(items.size, hasQr = floatingButton != null)
+    } else 0.dp
+    val onTabSelected: (Int) -> Unit = {
+        val targetRoute = "option$it"
+        if (currentRoute != targetRoute) {
+            navController.navigate(targetRoute)
+        }
+    }
+
     Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
         Box(modifier = Modifier
             .fillMaxSize()
         ) {
-            NavHost(
-                navController = navController,
-                startDestination = "option0"
-            ) {
-                items.forEachIndexed { index, item ->
-                    composable(
-                        route = "option$index",
-                        enterTransition = {
-                            fadeIn(animationSpec = tween(200)) +
-                                    scaleIn(
-                                        initialScale = 0.97f,
-                                        animationSpec = tween(200)
-                                    )
-                        },
-                        exitTransition = {
-                            fadeOut(animationSpec = tween(200)) +
-                                    scaleOut(
-                                        targetScale = 0.97f,
-                                        animationSpec = tween(200)
-                                    )
-                        },
-                        popEnterTransition = {
-                            fadeIn(animationSpec = tween(200)) +
-                                    scaleIn(
-                                        initialScale = 0.97f,
-                                        animationSpec = tween(200)
-                                    )
-                        },
-                        popExitTransition = {
-                            fadeOut(animationSpec = tween(200)) +
-                                    scaleOut(
-                                        targetScale = 0.97f,
-                                        animationSpec = tween(200)
-                                    )
-                        }
-                    ) {
-                        val option = getBottomTabOption(index)
+            CompositionLocalProvider(LocalDuoRailHeight provides railHeight) {
+                NavHost(
+                    navController = navController,
+                    startDestination = "option0"
+                ) {
+                    items.forEachIndexed { index, item ->
+                        composable(
+                            route = "option$index",
+                            enterTransition = {
+                                fadeIn(animationSpec = tween(200)) +
+                                        scaleIn(
+                                            initialScale = 0.97f,
+                                            animationSpec = tween(200)
+                                        )
+                            },
+                            exitTransition = {
+                                fadeOut(animationSpec = tween(200)) +
+                                        scaleOut(
+                                            targetScale = 0.97f,
+                                            animationSpec = tween(200)
+                                        )
+                            },
+                            popEnterTransition = {
+                                fadeIn(animationSpec = tween(200)) +
+                                        scaleIn(
+                                            initialScale = 0.97f,
+                                            animationSpec = tween(200)
+                                        )
+                            },
+                            popExitTransition = {
+                                fadeOut(animationSpec = tween(200)) +
+                                        scaleOut(
+                                            targetScale = 0.97f,
+                                            animationSpec = tween(200)
+                                        )
+                            }
+                        ) {
+                            val option = getBottomTabOption(index)
 
-                        StackScreen(
-                            content = item.screen,
-                            navigationOptions = option,
-                            bottomTabIndex = index,
-                            onBackHandler = {
-                                if (index != 0) {
-                                    navController.popBackStack(
-                                        navController.graph.startDestinationRoute!!,
-                                        inclusive = false
-                                    )
-                                } else {
-                                    navigator.pop()
+                            StackScreen(
+                                content = item.screen,
+                                navigationOptions = option,
+                                bottomTabIndex = index,
+                                onBackHandler = {
+                                    if (index != 0) {
+                                        navController.popBackStack(
+                                            navController.graph.startDestinationRoute!!,
+                                            inclusive = false
+                                        )
+                                    } else {
+                                        navigator.pop()
+                                    }
                                 }
-                            }
-                        )
+                            )
+                        }
                     }
                 }
             }
         }
-        Column {
-            BottomTabBar(
+        if (layout.isIPhoneDuo) {
+            DuoTabBar(
+                layout = layout,
                 items = items,
                 floatingButton = floatingButton,
-                navController = navController,
-                onTabSelected = {
-                    val currentRoute = navController.currentBackStackEntry?.destination?.route
-                    val targetRoute = "option$it"
-                    if (currentRoute != targetRoute) {
-                        navController.navigate(targetRoute)
-                    }
-                }
+                selectedIndex = items.indices.firstOrNull { "option$it" == currentRoute } ?: 0,
+                onTabSelected = onTabSelected,
             )
-            Spacer(modifier = Modifier.fillMaxWidth().height(AppNavigationBar.current + Spacing.S).background(AppTheme.current.colors.background.surface))
+        } else {
+            Column {
+                BottomTabBar(
+                    items = items,
+                    floatingButton = floatingButton,
+                    navController = navController,
+                    onTabSelected = onTabSelected,
+                )
+                Spacer(modifier = Modifier.fillMaxWidth().height(AppNavigationBar.current + Spacing.S).background(AppTheme.current.colors.background.surface))
+            }
         }
     }
 }