@momo-kits/native-kits 0.167.1-duo.1-debug → 0.167.1-duo.10-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,6 +68,9 @@ 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.platform.BackHandler
@@ -74,6 +80,10 @@ 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.getScreenLayout
 import kotlin.time.Clock
 import kotlin.time.Duration.Companion.milliseconds
 import kotlin.time.ExperimentalTime
@@ -81,11 +91,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)
@@ -101,7 +119,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) }
@@ -157,7 +175,7 @@ internal fun StackScreen(
     }
 
     val limit = with(density) {
-        (statusBar + HEADER_HEIGHT.dp).toPx()
+        screenLayout.headerHeight.toPx()
     }.toInt()
 
     val lazyListState = options.scrollData.scrollState as? LazyListState
@@ -166,6 +184,11 @@ 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) }
@@ -205,15 +228,23 @@ internal fun StackScreen(
                 HeaderBackground()
             }
 
-            Box(Modifier.zIndex(4f)) {
+            Box(Modifier.zIndex(4f).graphicsLayer { translationY = -headerHide.value }) {
                 Header(onBackHandler)
             }
 
+            HeaderSideBar(
+                bottomInset = maxOf(
+                    bottomBarsHeight(isBottomTabChild) + Spacing.XL,
+                    if (isBottomTabChild) LocalDuoRailReserve.current else 0.dp,
+                ),
+                modifier = Modifier.zIndex(4f),
+            )
+
             Column(Modifier.zIndex(5f).horizontalSafeAreaPadding()) {
                 SearchAnimated(snapState = snapState)
             }
 
-            Column(Modifier.zIndex(2f).fillMaxSize().horizontalSafeAreaPadding()) {
+            Column(Modifier.zIndex(2f).fillMaxSize()) {
                 MainContent(content = content, isBottomTabRoot = isBottomTabRoot, isBottomTabChild = isBottomTabChild)
                 FooterContent()
             }
@@ -227,22 +258,26 @@ internal fun StackScreen(
     }
 }
 
+// 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
+    }
+}
+
 @Suppress("FrequentlyChangingValue")
 @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,
@@ -264,11 +299,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) {
@@ -276,31 +313,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
@@ -311,12 +363,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()
     }
 }
 
@@ -325,7 +381,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,
@@ -383,6 +441,7 @@ fun Footer(
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
                 }
+                .horizontalSafeAreaPadding()
                 .padding(
                     top = if (useMargin) Spacing.S else 0.dp,
                     start = if (useMargin) Spacing.M else 0.dp,
@@ -430,17 +489,24 @@ 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
     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 = if (options.hiddenBack || useSideBar) Spacing.M else 48.dp // button back: size + left +right = 28 + 12 + 8 = 48
     val minEndPadding = Spacing.M
-    val maxEndPadding = headerRightWidthDp + if (options.headerRight is HeaderRight.None) Spacing.M else Spacing.M * 2
+    val maxEndPadding = 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")
 
@@ -582,6 +648,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 {

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

@@ -8,8 +8,10 @@ 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.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
@@ -27,6 +29,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){
@@ -43,16 +46,19 @@ internal fun getBottomTabOption(index: Int): NavigationOptions? {
 @Composable
 fun BottomTab(
     items: List<BottomTabItem>,
-    floatingButton: BottomTabFloatingButton? = null
+    floatingButton: BottomTabFloatingButton? = null,
+    // iPhone Duo: when the side bar can't hold both bars, which one starts compressed;
+    // tapping the compressed one swaps them
+    compressionBehavior: DuoBarCompressionBehavior = DuoBarCompressionBehavior.TOOLBAR,
 ) {
     val navigation = LocalNavigation.current
     val navigator = LocalNavigator.current
     val navController = rememberNavController()
 
-    bottomTabOptionItems = items.mapIndexed { index, item ->
-        item.options ?: NavigationOptions()
-    }.toMutableList()
-
+    // Only on new items: this recomposes on every tab switch and would drop options a tab set at runtime.
+    remember(items) {
+        bottomTabOptionItems = items.map { it.options ?: NavigationOptions() }.toMutableList()
+    }
 
     LaunchedEffect(Unit){
         navigation.markAsBottomTabRoot()
@@ -78,81 +84,109 @@ fun BottomTab(
         }
     }
 
+    val layout = getScreenLayout()
+    val hasQr = floatingButton != null
+    val compression = rememberDuoBarCompression(compressionBehavior, items.size, hasQr, layout)
+    val railReserve = layout.sideBar?.takeIf { layout.isIPhoneDuo }?.let {
+        it.bottom + duoRailHeight(items.size, hasQr, compressed = compression.tabBarCompressed) + DUO_GROUP_GAP
+    } ?: 0.dp
+    val onTabSelected: (Int) -> Unit = {
+        val targetRoute = "option$it"
+        if (currentRoute != targetRoute) {
+            // one entry per tab above the first, so switching never grows the back stack
+            navController.navigate(targetRoute) {
+                popUpTo("option0") { saveState = true }
+                launchSingleTop = true
+                restoreState = true
+            }
+        }
+    }
+
     Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
         Box(modifier = Modifier
             .fillMaxSize()
         ) {
-            NavHost(
-                navController = navController,
-                startDestination = "option0"
+            CompositionLocalProvider(
+                LocalDuoRailReserve provides railReserve,
+                LocalDuoBarCompression provides compression,
             ) {
-                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)
+                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,
+                compression = compression,
             )
-            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))
+            }
         }
     }
 }

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

@@ -26,7 +26,8 @@ import vn.momo.kits.const.*
 import vn.momo.kits.modifier.InternalApi
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
-import vn.momo.kits.platform.getScreenDimensions
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.utils.horizontalSafeAreaPadding
 
 internal val floatingButtonWidth = 75.dp
 @InternalApi
@@ -40,18 +41,19 @@ internal fun BottomTabBar(
     onTabSelected: (Int) -> Unit,
 ) {
     val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
-    val selectedIndex = items.indexOfFirst { "option${items.indexOf(it)}" == currentRoute }
+    val selectedIndex = items.indices.firstOrNull { "option$it" == currentRoute } ?: 0
 
-    val screenWidth = getScreenDimensions().width.dp
+    val layout = getScreenLayout()
     val mid = items.size / 2
 
     val tabWidth = if (floatingButton != null) {
-        (screenWidth - floatingButtonWidth) / items.size
+        (layout.contentWidth - floatingButtonWidth) / items.size
     } else {
-        screenWidth / items.size
+        layout.contentWidth / items.size
     }
     val adjustSize = if(floatingButton != null && selectedIndex >= mid) floatingButtonWidth else 0.dp
-    val targetOffset = tabWidth * selectedIndex + tabWidth / 2 - screenWidth / 2 + adjustSize
+    // offsets are from the bar center; tabs live between the side safe areas
+    val targetOffset = layout.insetLeft + tabWidth * selectedIndex + tabWidth / 2 - layout.width / 2 + adjustSize
 
     val indicatorOffsetX by animateDpAsState(
         targetValue = targetOffset,
@@ -69,7 +71,8 @@ internal fun BottomTabBar(
                 .background(AppTheme.current.colors.background.surface)
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
-                },
+                }
+                .horizontalSafeAreaPadding(),
             horizontalArrangement = Arrangement.SpaceAround,
         ) {
             if (floatingButton == null) {
@@ -101,7 +104,11 @@ internal fun BottomTabBar(
                 )
             )
         )
-        floatingButton?.let { FloatingButton(it) }
+        floatingButton?.let {
+            Box(Modifier.offset(x = (layout.insetLeft - layout.insetRight) / 2)) {
+                FloatingButton(it)
+            }
+        }
     }
 }
 
@@ -172,14 +179,13 @@ internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> U
                 overflow = TextOverflow.Ellipsis
             )
         }
-        if (badgeLabel != null) {
-            if (badgeLabel.isEmpty())
-                BadgeDot(
-                    size = DotSize.Small,
-                    modifier = Modifier.offset(x = 50.dp, y = (-48).dp)
-                )
-            else
-                Badge(badgeLabel, modifier = Modifier.offset(x = 44.dp, y = (-42).dp))
+        if (badgeLabel != null && badgeLabel.isNotEmpty()) {
+            Badge(badgeLabel, modifier = Modifier.offset(x = 44.dp, y = (-42).dp))
+        } else if (badgeLabel != null || item.showDot) {
+            BadgeDot(
+                size = DotSize.Small,
+                modifier = Modifier.offset(x = 50.dp, y = (-48).dp)
+            )
         }
     }
 }