@momo-kits/native-kits 0.167.1-duo.2-debug → 0.167.1-duo.20-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
@@ -65,6 +69,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.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
@@ -75,7 +81,9 @@ 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
@@ -84,11 +92,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)
@@ -169,6 +185,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) }
@@ -193,42 +214,62 @@ 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),
+                )
 
-            HeaderSideBar(bottomInset = bottomBarsHeight(isBottomTabChild), modifier = Modifier.zIndex(4f))
+                Column(Modifier.zIndex(5f).horizontalSafeAreaPadding()) {
+                    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).horizontalSafeAreaPadding()) {
+                    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
     }
 }
 
@@ -239,7 +280,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 +315,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
         )
     )
@@ -287,38 +329,45 @@ 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(!isBottomTabRoot) {
+            .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
                 }
             )
     ) {
-        CompositionLocalProvider(
-            LocalScreenLayout provides if (isBottomTabRoot) screenLayout else screenLayout.consumeHorizontalInsets()
-        ) {
-            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
@@ -329,12 +378,16 @@ internal fun ScreenContent(content: @Composable () -> Unit) {
             Box(bannerModifier) {
                 animatedHeader.composable.invoke(scrollState.value)
             }
-            Box(Modifier.padding(top = getScreenLayout().headerHeight + animatedHeader.layoutOffSet)) {
-                content()
+            Box(
+                Modifier
+                    .padding(top = screenLayout.headerHeight + animatedHeader.layoutOffSet)
+                    .conditional(insetContent) { horizontalSafeAreaPadding() }
+            ) {
+                insetBody()
             }
         }
     } else {
-        content()
+        insetBody()
     }
 }
 
@@ -343,7 +396,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,
@@ -391,9 +446,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()
@@ -401,7 +457,6 @@ 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,
@@ -454,10 +509,14 @@ internal fun SearchAnimated(
     // 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 || useSideBar) 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 = when {
+    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
@@ -608,6 +667,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
@@ -26,7 +28,9 @@ import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.NavigationOptions
 import vn.momo.kits.navigation.StackScreen
 import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.platform.BackHandler
 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 +47,25 @@ 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,
+    initialRouteName: String? = null,
+    onTabPress: ((index: Int, switchTab: () -> Unit) -> Unit)? = null,
+    backToInitialTab: Boolean = true,
 ) {
     val navigation = LocalNavigation.current
     val navigator = LocalNavigator.current
     val navController = rememberNavController()
+    val startRoute = remember {
+        "option${items.indexOfFirst { it.name == initialRouteName }.coerceAtLeast(0)}"
+    }
 
-    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()
@@ -62,15 +75,14 @@ fun BottomTab(
         )
     }
 
-    // Tab 0 keeps the seeked transition; other tabs go to the host's floating arrow. Matches RN.
     val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
-    val isFirstTab = currentRoute == null || currentRoute == "option0"
+    val onStartTab = currentRoute == null || currentRoute == startRoute
+    val isFirstTab = onStartTab || !backToInitialTab
+    val backToStartTab = { navController.popBackStack(startRoute, inclusive = false) }
 
     DisposableEffect(isFirstTab) {
         reportFloatingArrowBack(!isFirstTab)
-        navigator.tabBackHandler = if (isFirstTab) null else ({
-            navController.popBackStack(navController.graph.startDestinationRoute!!, false)
-        })
+        navigator.tabBackHandler = if (isFirstTab) null else ({ backToStartTab() })
         // both live outside this composition
         onDispose {
             reportFloatingArrowBack(false)
@@ -78,81 +90,112 @@ 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 = { index ->
+        val switchTab = {
+            val targetRoute = "option$index"
+            if (navController.currentBackStackEntry?.destination?.route != targetRoute) {
+                // one entry per tab above the start tab, so switching never grows the back stack
+                navController.navigate(targetRoute) {
+                    popUpTo(startRoute) { saveState = true }
+                    launchSingleTop = true
+                    restoreState = true
+                }
+            }
+        }
+        onTabPress?.invoke(index, switchTab) ?: switchTab()
+    }
+
     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 = startRoute
+                ) {
+                    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 (backToInitialTab && "option$index" != startRoute) {
+                                        backToStartTab()
+                                    } else {
+                                        navigator.pop()
+                                    }
                                 }
-                            }
-                        )
+                            )
+                        }
                     }
                 }
             }
         }
-        Column {
-            BottomTabBar(
+        BackHandler(enabled = !onStartTab) {
+            if (backToInitialTab) backToStartTab() else navigator.pop()
+        }
+        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

@@ -41,7 +41,7 @@ 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 layout = getScreenLayout()
     val mid = items.size / 2
@@ -179,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)
+            )
         }
     }
 }