@momo-kits/native-kits 0.300.3-debug → 0.300.4-debug

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

@@ -1,6 +1,9 @@
 package vn.momo.kits.navigation
 
 import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.AnimationVector1D
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
@@ -39,6 +42,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.lerp
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
@@ -51,7 +55,6 @@ import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.launch
 import vn.momo.kits.components.InputSearch
 import vn.momo.kits.const.AppNavigationBar
-import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Colors
@@ -65,14 +68,24 @@ import vn.momo.kits.navigation.component.HEADER_HEIGHT
 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.LocalDuoRailReserve
+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.navigation.bottomtab.LocalBottomTabFocused
 import vn.momo.kits.platform.BackHandler
 import vn.momo.kits.platform.supportsImePadding
 import vn.momo.kits.navigation.tracking.ScreenTracker
 import vn.momo.kits.navigation.tracking.ScreenTrackingState
 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.DuoMetrics
+import vn.momo.kits.layout.getScreenLayout
 import kotlin.time.Clock
 import kotlin.time.Duration.Companion.milliseconds
 import kotlin.time.ExperimentalTime
@@ -80,11 +93,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)
@@ -100,7 +121,7 @@ internal fun StackScreen(
     val navigator = LocalNavigator.current
     val maxApi = LocalMaxApi.current
     val context = LocalContext.current
-    val statusBar = AppStatusBar.current
+    val screenLayout = getScreenLayout()
     val density = LocalDensity.current
     val screenRegistry = LocalDynamicScreenRegistry.current
     val navigation = remember { Navigation(id = id, bottomTabIndex = bottomTabIndex, initOptions = navigationOptions, registry = screenRegistry) }
@@ -109,20 +130,24 @@ internal fun StackScreen(
     val isBottomTabChild = bottomTabIndex != -1
     val isBottomTabRoot = navigation.isBottomTabRoot
 
+    // A mounted-but-hidden bottom tab tracks again each time it is focused (RN useFocusEffect).
+    val tabFocused = LocalBottomTabFocused.current
+
     // Auto tracking state
-    val trackingState = remember {
+    val trackingState = remember(tabFocused) {
         ScreenTrackingState().apply {
             time = Clock.System.now().toEpochMilliseconds()
         }
     }
 
     // Determine action: push or back
-    val action = remember {
+    val action = remember(tabFocused) {
         if (ScreenTracker.getLastScreenName() != null) "push" else "back"
     }
 
     // Auto tracking effects
-    LaunchedEffect(name) {
+    LaunchedEffect(name, tabFocused) {
+        if (!tabFocused) return@LaunchedEffect
         // Track screen navigated immediately
         ScreenTracker.trackScreenNavigated(
             maxApi = maxApi,
@@ -156,7 +181,7 @@ internal fun StackScreen(
     }
 
     val limit = with(density) {
-        (statusBar + HEADER_HEIGHT.dp).toPx()
+        screenLayout.headerHeight.toPx()
     }.toInt()
 
     val lazyListState = options.scrollData.scrollState as? LazyListState
@@ -165,11 +190,16 @@ internal fun StackScreen(
     else
         (options.scrollData.scrollState as? ScrollState ?: rememberScrollState()).proxyLimitedScrollState(limit, 1)
     val snapState: ScrollableState = lazyListState ?: scrollState
+    val headerHide = rememberQuickReturnHide(
+        enabled = options.usesDuoQuickReturnHeader(screenLayout),
+        scrollState = scrollState,
+        heightPx = with(density) { screenLayout.headerHeight.toPx() },
+    )
 
     val footerHeightPx = remember { mutableIntStateOf(0) }
     val headerRightWidthPx = remember { mutableIntStateOf(0) }
 
-    if (navigation.options.scrollData.scrollToTopCallback != null) {
+    if (tabFocused && navigation.options.scrollData.scrollToTopCallback != null) {
         RegisterScrollToTop(navigation.options.scrollData.scrollToTopCallback)
     }
 
@@ -189,40 +219,74 @@ internal fun StackScreen(
         LocalFooterHeightPx provides footerHeightPx,
         LocalHeaderRightWidthPx provides headerRightWidthPx
     ) {
-        Box(
-            Modifier
-                .fillMaxSize()
-                .background(options.backgroundColor ?: AppTheme.current.colors.background.default)
-                .conditional(options.keyboardOptions.keyboardShouldPersistTaps) {
-                    hideKeyboardOnTap()
+        // AI-GENERATED START: custom screen background, full window and outside the keyboard padding
+        Box(Modifier.fillMaxSize()) {
+            options.backgroundComponent?.let { background ->
+                Box(Modifier.fillMaxSize()) { background() }
+            }
+            // AI-GENERATED END: custom screen background, full window and outside the keyboard padding
+            Box(
+                Modifier
+                    .fillMaxSize()
+                    // AI-GENERATED START: custom background replaces the colour
+                    .background(
+                        if (options.backgroundComponent != null) Color.Transparent
+                        else options.backgroundColor ?: AppTheme.current.colors.background.default
+                    )
+                    // AI-GENERATED END: custom background replaces the colour
+                    .conditional(options.keyboardOptions.keyboardShouldPersistTaps) {
+                        hideKeyboardOnTap()
+                    }
+                    .conditional(options.keyboardOptions.useAvoidKeyboard && supportsImePadding()) {
+                        imePadding()
+                    }
+            ) {
+                Box(Modifier.zIndex(1f)) {
+                    HeaderBackground()
                 }
-                .conditional(options.keyboardOptions.useAvoidKeyboard && supportsImePadding()) {
-                    imePadding()
+
+                Box(Modifier.zIndex(4f).graphicsLayer { translationY = -headerHide.value }) {
+                    Header(onBackHandler)
                 }
-        ) {
-            Box(Modifier.zIndex(1f)) {
-                HeaderBackground()
-            }
 
-            Box(Modifier.zIndex(4f)) {
-                Header(onBackHandler)
-            }
+                HeaderSideBar(
+                    bottomInset = maxOf(
+                        bottomBarsHeight(isBottomTabChild) + Spacing.XL,
+                        if (isBottomTabChild) LocalDuoRailReserve.current else 0.dp,
+                    ),
+                    modifier = Modifier.zIndex(4f),
+                )
 
-            Column(Modifier.zIndex(5f)) {
-                SearchAnimated(snapState = snapState)
-            }
+                Column(Modifier.zIndex(5f).horizontalSafeAreaPadding()) {
+                    SearchAnimated(snapState = snapState)
+                }
 
-            Column(Modifier.zIndex(2f).fillMaxSize()) {
-                MainContent(content = content, isBottomTabRoot = isBottomTabRoot, isBottomTabChild = isBottomTabChild)
-                FooterContent()
-            }
+                Column(Modifier.zIndex(2f).fillMaxSize()) {
+                    MainContent(content = content, isBottomTabRoot = isBottomTabRoot, isBottomTabChild = isBottomTabChild)
+                    FooterContent()
+                }
 
-            Box(Modifier.zIndex(6f)) {
-                FloatingContent(isBottomTabChild = isBottomTabChild)
-            }
+                Box(Modifier.zIndex(6f).horizontalSafeAreaPadding()) {
+                    FloatingContent(isBottomTabChild = isBottomTabChild)
+                }
 
-            OverplayView(isBottomTabChild = isBottomTabChild, id = id)
+                OverplayView(isBottomTabChild = isBottomTabChild, id = id)
+            }
+        // AI-GENERATED START: custom screen background, full window and outside the keyboard padding
         }
+        // AI-GENERATED END: custom screen background, full window and outside the keyboard padding
+    }
+}
+
+// Height the footer, tab bar or home indicator takes from the bottom of the screen.
+@Composable
+private fun bottomBarsHeight(isBottomTabChild: Boolean): Dp {
+    val options = LocalOptions.current
+    val navigationBar = AppNavigationBar.current
+    return when {
+        options.hasFooter() -> with(LocalDensity.current) { LocalFooterHeightPx.current.intValue.toDp() }
+        isBottomTabChild -> bottomTabChildInset()
+        else -> navigationBar
     }
 }
 
@@ -230,18 +294,10 @@ internal fun StackScreen(
 @Composable
 internal fun FloatingContent(isBottomTabChild: Boolean) {
     val options = LocalOptions.current
-    val density = LocalDensity.current
-    val footerHeightPx = LocalFooterHeightPx.current
     val scrollState = LocalScrollState.current
-    val navigationBar = AppNavigationBar.current
 
     val fabProps = options.floatingButtonProps ?: return
-    val bottomPadding = fabProps.bottom
-        ?: (Spacing.M + when {
-            options.hasFooter() -> with(density) { footerHeightPx.intValue.toDp() }
-            isBottomTabChild -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
-            else -> navigationBar
-        })
+    val bottomPadding = fabProps.bottom ?: (Spacing.M + bottomBarsHeight(isBottomTabChild))
 
     FloatingButton(
         scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
@@ -263,11 +319,13 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
     val density = LocalDensity.current
     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))
-                AppStatusBar.current + HEADER_HEIGHT.dp else 0.dp
+            if (!useDuoGlass && (options.headerType is HeaderType.DefaultOrExtended || (options.headerType is HeaderType.Transparent && !options.headerType.isFullScreenContent)))
+                screenLayout.headerHeight else 0.dp
         )
     )
     if (inputSearchType == InputSearchType.Animated) {
@@ -275,31 +333,46 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
 
         Spacer(Modifier.height((HEADER_HEIGHT.dp - scrollDp).coerceIn(0.dp, HEADER_HEIGHT.dp)))
     }
+    // a bottom tab root stays full width: the tab bar and each tab's own StackScreen handle the insets
+    val insetContent = !isBottomTabRoot
     Column(
         Modifier
             .fillMaxWidth()
             .weight(1f)
+            .conditional(insetContent && options.headerType !is HeaderType.Animated) {
+                horizontalSafeAreaPadding()
+            }
             .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
                 }
             )
     ) {
-        ScreenContent(content = content)
+        ScreenContent(content = content, insetContent = insetContent)
     }
 
 }
 
 @Composable
-internal fun ScreenContent(content: @Composable () -> Unit) {
+internal fun ScreenContent(content: @Composable () -> Unit, insetContent: Boolean) {
     val scrollState = LocalScrollState.current
     val options = LocalOptions.current
+    val screenLayout = getScreenLayout()
+    val insetBody: @Composable () -> Unit = {
+        CompositionLocalProvider(
+            LocalScreenLayout provides if (insetContent) screenLayout.consumeHorizontalInsets() else screenLayout,
+            content = content,
+        )
+    }
 
     if (options.headerType is HeaderType.Animated) {
         val animatedHeader = options.headerType
@@ -310,12 +383,16 @@ internal fun ScreenContent(content: @Composable () -> Unit) {
             Box(bannerModifier) {
                 animatedHeader.composable.invoke(scrollState.value)
             }
-            Box(Modifier.padding(top = AppStatusBar.current + HEADER_HEIGHT.dp + animatedHeader.layoutOffSet)) {
-                content()
+            Box(
+                Modifier
+                    .padding(top = screenLayout.headerHeight + animatedHeader.layoutOffSet)
+                    .conditional(insetContent) { horizontalSafeAreaPadding() }
+            ) {
+                insetBody()
             }
         }
     } else {
-        content()
+        insetBody()
     }
 }
 
@@ -324,7 +401,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,
@@ -372,9 +451,10 @@ fun Footer(
 
     val backgroundColor = if (transparent) Color.Transparent else AppTheme.current.colors.background.surface
 
+    // inset as a whole, not padded inside, so the surface and its shadow stay off the iPhone Duo side bar
     Box(Modifier.onGloballyPositioned {
         if (footerHeightPx.intValue != it.size.height) footerHeightPx.intValue = it.size.height
-    }) {
+    }.horizontalSafeAreaPadding()) {
         Box(
             Modifier
                 .fillMaxWidth()
@@ -429,17 +509,28 @@ internal fun SearchAnimated(
     if (inputSearchType == InputSearchType.None) return
     val inputSearchProps = (options.headerType as? HeaderType.DefaultOrExtended)?.inputSearchProps ?: return
 
-    val minTopPadding = AppStatusBar.current
-    val maxTopPadding = AppStatusBar.current + HEADER_HEIGHT.dp
+    val screenLayout = getScreenLayout()
+    val useSideBar = screenLayout.sideBar != null
+    // collapsed, the search is centered in the bar row
+    val minTopPadding = screenLayout.headerStatusBarHeight + (screenLayout.headerBarHeight - HEADER_HEIGHT.dp) / 2
+    val maxTopPadding = screenLayout.headerHeight
+    // collapsed on the iPhone Duo status bar row, the search stays between its clusters (48pt back there)
+    val clearance = screenLayout.statusBarClearance
+    val backWidth = if (clearance != null && !useSideBar) DuoMetrics.controlSize else 28.dp
     val minStartPadding = Spacing.M
-    val maxStartPadding = if (options.hiddenBack) Spacing.M else 48.dp // button back: size + left +right = 28 + 12 + 8 = 48
+    val maxStartPadding = (clearance?.left ?: 0.dp) +
+        if (options.hiddenBack || useSideBar) Spacing.M else backWidth + Spacing.M + Spacing.S
     val minEndPadding = Spacing.M
-    val maxEndPadding = headerRightWidthDp + if (options.headerRight is HeaderRight.None) Spacing.M else Spacing.M * 2
+    val maxEndPadding = (clearance?.right ?: 0.dp) + when {
+        options.headerRight is HeaderRight.None -> Spacing.M
+        useSideBar && options.headerRight is HeaderRight.Toolkit -> Spacing.M
+        else -> headerRightWidthDp + Spacing.M * 2
+    }
 
     val targetColor = lerp(
         AppTheme.current.colors.background.surface,
         AppTheme.current.colors.background.default,
-        (scrollDp / minTopPadding).coerceIn(0f, 1f)
+        (scrollDp / minTopPadding.coerceAtLeast(1.dp)).coerceIn(0f, 1f)
     )
     val animatedColor by animateColorAsState(targetValue = targetColor, label = "BackgroundColor")
 
@@ -581,6 +672,52 @@ internal val LocalOptions = staticCompositionLocalOf<NavigationOptions> { error(
 
 val StackScreenScrollableState = staticCompositionLocalOf<ScrollableState?> { null }
 
+// iPhone Duo side bar: the header leaves with the content and slides back in on a reverse scroll
+// (RN DuoQuickReturnHeader). The side bar is drawn apart from the header, so it stays put.
+@Composable
+private fun rememberQuickReturnHide(
+    enabled: Boolean,
+    scrollState: ScrollState,
+    heightPx: Float,
+): Animatable<Float, AnimationVector1D> {
+    val hide = remember { Animatable(0f) }
+    LaunchedEffect(enabled, scrollState, heightPx) {
+        if (!enabled) {
+            hide.snapTo(0f)
+            return@LaunchedEffect
+        }
+        var last = scrollState.value
+        snapshotFlow { scrollState.value }.collect { y ->
+            val delta = y - last
+            last = y
+            hide.snapTo(if (y <= 0) 0f else (hide.value + delta).coerceIn(0f, heightPx))
+        }
+    }
+    // a half-shown header settles fully in or out once the scroll stops
+    LaunchedEffect(enabled, scrollState, heightPx) {
+        if (!enabled) return@LaunchedEffect
+        snapshotFlow { scrollState.isScrollInProgress }
+            .filter { !it }
+            .collect {
+                val value = hide.value
+                // within the first header height the header still sits on the content
+                if (scrollState.value < heightPx || value <= 0f || value >= heightPx) return@collect
+                launch { hide.animateTo(if (value > heightPx / 2) heightPx else 0f, tween(200)) }
+            }
+    }
+    return hide
+}
+
+internal fun NavigationOptions.usesDuoQuickReturnHeader(layout: ScreenLayout): Boolean =
+    usesDuoGlassHeader(layout) || (layout.sideBar != null && headerType is HeaderType.Animated &&
+        scrollData.scrollable && scrollData.scrollState is ScrollState)
+
+// 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 {