@momo-kits/native-kits 0.162.44-debug → 0.162.45-debug

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

@@ -1,27 +1,35 @@
 package vn.momo.kits.navigation.bottomtab
 
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.AnimationVector1D
+import androidx.compose.animation.core.Easing
 import androidx.compose.animation.core.tween
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.scaleIn
-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.getValue
+import androidx.compose.runtime.key
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.saveable.rememberSaveableStateHolder
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.layout.layout
 import androidx.compose.ui.unit.dp
-import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.composable
-import androidx.navigation.compose.currentBackStackEntryAsState
-import androidx.navigation.compose.rememberNavController
+import androidx.compose.ui.zIndex
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.navigation.KeyboardOptions
+import vn.momo.kits.navigation.LocalMaxApi
 import vn.momo.kits.navigation.LocalNavigation
 import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.NavigationOptions
@@ -29,6 +37,18 @@ 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
+import kotlinx.coroutines.launch
+
+private val inOutQuad = Easing { t -> if (t < 0.5f) 2 * t * t else 1 - 2 * (1 - t) * (1 - t) }
+internal val tabTimingSpec = tween<Float>(durationMillis = 200, easing = inOutQuad)
+
+internal val LocalBottomTabFocused = staticCompositionLocalOf { true }
+
+private val Hidden = Modifier.layout { measurable, constraints ->
+    val placeable = measurable.measure(constraints)
+    layout(placeable.width, placeable.height) {}
+}
 
 private var bottomTabOptionItems : MutableList<NavigationOptions?> = mutableListOf()
 internal fun setBottomTabOption(index: Int, options: NavigationOptions){
@@ -46,21 +66,21 @@ internal fun getBottomTabOption(index: Int): NavigationOptions? {
 fun BottomTab(
     items: List<BottomTabItem>,
     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()
+    val maxApi = LocalMaxApi.current
+    val startIndex = remember { items.indexOfFirst { it.name == initialRouteName }.coerceAtLeast(0) }
 
+    remember(items) {
+        bottomTabOptionItems = items.map { it.options ?: NavigationOptions() }.toMutableList()
+    }
 
     LaunchedEffect(Unit){
         navigation.markAsBottomTabRoot()
@@ -70,98 +90,122 @@ fun BottomTab(
         )
     }
 
-    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
-    val onStartTab = currentRoute == null || currentRoute == startRoute
-    val isFirstTab = onStartTab || !backToInitialTab
-    val backToStartTab = { navController.popBackStack(startRoute, inclusive = false) }
+    var selectedIndex by rememberSaveable { mutableIntStateOf(startIndex) }
+    var loadedTabs by rememberSaveable { mutableStateOf(listOf(startIndex)) }
+    val tabStateHolder = rememberSaveableStateHolder()
+    val selectTab: (Int) -> Unit = { index ->
+        if (index !in loadedTabs) loadedTabs = loadedTabs + index
+        selectedIndex = index
+    }
+
+    val onFirstTab = selectedIndex == 0
+    val isFirstTab = onFirstTab || !backToInitialTab
+    val backToFirstTab = { selectTab(0) }
+
+    var lastFocusedIndex by rememberSaveable { mutableStateOf<Int?>(null) }
+    val tabProgress = remember { mutableMapOf<Int, Animatable<Float, AnimationVector1D>>() }
+    fun progressOf(index: Int) = tabProgress.getOrPut(index) {
+        Animatable(if (index == lastFocusedIndex) 1f else 0f)
+    }
+    LaunchedEffect(selectedIndex) {
+        lastFocusedIndex = selectedIndex
+        tabProgress.forEach { (index, progress) ->
+            if (index != selectedIndex) launch { progress.animateTo(0f, tabTimingSpec) }
+        }
+        progressOf(selectedIndex).animateTo(1f, tabTimingSpec)
+    }
 
     DisposableEffect(isFirstTab) {
         reportFloatingArrowBack(!isFirstTab)
-        navigator.tabBackHandler = if (isFirstTab) null else ({ backToStartTab() })
-        // both live outside this composition
+        navigator.tabBackHandler = if (isFirstTab) null else ({ backToFirstTab() })
+
         onDispose {
             reportFloatingArrowBack(false)
             navigator.tabBackHandler = null
         }
     }
 
+    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 ->
+        runCatching { maxApi?.triggerEventVibration("light", callback = null) }
+        val switchTab = {
+            if (index != selectedIndex) selectTab(index)
+        }
+        onTabPress?.invoke(index, switchTab) ?: switchTab()
+    }
+
     Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
         Box(modifier = Modifier
             .fillMaxSize()
+            .background(AppTheme.current.colors.background.default)
         ) {
-            NavHost(
-                navController = navController,
-                startDestination = startRoute
+            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)
+                loadedTabs.forEach { index ->
+                    val item = items.getOrNull(index) ?: return@forEach
+                    val focused = index == selectedIndex
+                    val progress = progressOf(index)
+                    key(index) {
+                        Box(
+                            Modifier
+                                .fillMaxSize()
+                                .zIndex(if (focused) 0f else -1f)
+                                .then(if (focused) Modifier.graphicsLayer {
+                                    alpha = 0.3f + 0.7f * progress.value
+                                    scaleX = 0.97f + 0.03f * progress.value
+                                    scaleY = scaleX
+                                } else Hidden)
+                        ) {
+                            CompositionLocalProvider(LocalBottomTabFocused provides focused) {
+                                tabStateHolder.SaveableStateProvider(index) {
+                                    StackScreen(
+                                        content = item.screen,
+                                        navigationOptions = getBottomTabOption(index),
+                                        bottomTabIndex = index,
+                                        onBackHandler = {
+                                            if (backToInitialTab && index != 0) {
+                                                backToFirstTab()
+                                            } else {
+                                                navigator.pop()
+                                            }
+                                        }
                                     )
-                        }
-                    ) {
-                        val option = getBottomTabOption(index)
-
-                        StackScreen(
-                            content = item.screen,
-                            navigationOptions = option,
-                            bottomTabIndex = index,
-                            onBackHandler = {
-                                if (backToInitialTab && "option$index" != startRoute) {
-                                    backToStartTab()
-                                } else {
-                                    navigator.pop()
                                 }
                             }
-                        )
+                        }
                     }
                 }
             }
         }
-        BackHandler(enabled = !onStartTab) {
-            if (backToInitialTab) backToStartTab() else navigator.pop()
+        BackHandler(enabled = !onFirstTab) {
+            if (backToInitialTab) backToFirstTab() else navigator.pop()
         }
-        Column {
-            BottomTabBar(
+        if (layout.isIPhoneDuo) {
+            DuoTabBar(
+                layout = layout,
                 items = items,
                 floatingButton = floatingButton,
-                navController = navController,
-                onTabSelected = { index ->
-                    val switchTab = {
-                        val targetRoute = "option$index"
-                        if (navController.currentBackStackEntry?.destination?.route != targetRoute) {
-                            navController.navigate(targetRoute)
-                        }
-                    }
-                    onTabPress?.invoke(index, switchTab) ?: switchTab()
-                }
+                selectedIndex = selectedIndex,
+                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,
+                    selectedIndex = selectedIndex,
+                    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

@@ -1,15 +1,18 @@
 package vn.momo.kits.navigation.bottomtab
 
-import androidx.compose.animation.core.FastOutSlowInEasing
-import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.Animatable
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -17,18 +20,18 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
-import androidx.navigation.NavController
-import androidx.navigation.compose.currentBackStackEntryAsState
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.components.*
 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.modifier.activeOpacityClickable
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.utils.horizontalSafeAreaPadding
 
-internal val floatingButtonWidth = 75.dp
 @InternalApi
 const val BOTTOM_TAB_BAR_HEIGHT = 64
 
@@ -36,28 +39,24 @@ const val BOTTOM_TAB_BAR_HEIGHT = 64
 internal fun BottomTabBar(
     items: List<BottomTabItem>,
     floatingButton: BottomTabFloatingButton? = null,
-    navController: NavController,
+    selectedIndex: Int,
     onTabSelected: (Int) -> Unit,
 ) {
-    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
-    val selectedIndex = items.indexOfFirst { "option${items.indexOf(it)}" == currentRoute }
 
-    val screenWidth = getScreenDimensions().width.dp
+    val layout = getScreenLayout()
     val mid = items.size / 2
 
-    val tabWidth = if (floatingButton != null) {
-        (screenWidth - floatingButtonWidth) / items.size
-    } else {
-        screenWidth / items.size
-    }
-    val adjustSize = if(floatingButton != null && selectedIndex >= mid) floatingButtonWidth else 0.dp
-    val targetOffset = tabWidth * selectedIndex + tabWidth / 2 - screenWidth / 2 + adjustSize
+    val floating = floatingButton?.takeIf { items.size % 2 == 0 }
+    val slotWidth = layout.contentWidth / (items.size + if (floating != null) 1 else 0)
+    fun slotOf(index: Int) = if (floating != null && index >= mid) index + 1 else index
 
-    val indicatorOffsetX by animateDpAsState(
-        targetValue = targetOffset,
-        animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing),
-        label = "IndicatorX"
-    )
+    var indicatorSlot by rememberSaveable { mutableIntStateOf(0) }
+    val indicatorX = remember { Animatable(indicatorSlot.toFloat()) }
+    LaunchedEffect(selectedIndex) {
+        val target = slotOf(selectedIndex)
+        indicatorSlot = target
+        indicatorX.animateTo(target.toFloat(), tabTimingSpec)
+    }
 
     Box(
         contentAlignment = Alignment.BottomCenter
@@ -69,20 +68,21 @@ internal fun BottomTabBar(
                 .background(AppTheme.current.colors.background.surface)
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
-                },
+                }
+                .horizontalSafeAreaPadding(),
             horizontalArrangement = Arrangement.SpaceAround,
         ) {
-            if (floatingButton == null) {
+            if (floating == null) {
                 RenderTabBarItem(items, 0, items.size, selectedIndex, onTabSelected)
             } else {
                 RenderTabBarItem(items, 0, mid, selectedIndex, onTabSelected)
-                Spacer(modifier = Modifier.width(floatingButtonWidth).padding(horizontal = Spacing.XXS))
+                Spacer(modifier = Modifier.width(slotWidth))
                 RenderTabBarItem(items, mid, items.size, selectedIndex, onTabSelected)
             }
         }
 
         Box(modifier = Modifier
-            .offset(x = indicatorOffsetX, y = (-BOTTOM_TAB_BAR_HEIGHT + 2).dp)
+            .offset { IntOffset((layout.insetLeft + slotWidth * (indicatorX.value + 0.5f) - layout.width / 2).roundToPx(), (-BOTTOM_TAB_BAR_HEIGHT + 2).dp.roundToPx()) }
             .height(2.dp)
             .width(44.dp)
             .background(
@@ -101,7 +101,11 @@ internal fun BottomTabBar(
                 )
             )
         )
-        floatingButton?.let { FloatingButton(it) }
+        floating?.let {
+            Box(Modifier.offset(x = (layout.insetLeft - layout.insetRight) / 2)) {
+                FloatingButton(it, slotWidth)
+            }
+        }
     }
 }
 
@@ -126,17 +130,10 @@ internal fun RowScope.RenderTabBarItem(
 
 @Composable
 internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
-    fun isNumber(label: String): Boolean {
-        val numberRegex = "^\\d+$".toRegex()
-        return numberRegex.matches(label)
-    }
-    fun formatLabel(label: String): String? {
-        if (isNumber(label) && label.toInt() == 0) {
-            return null
-        }
-        return label
-    }
-    val badgeLabel = item.badgeLabel?.let { formatLabel(it) }
+    // RN parity: "0" hides the badge, "" renders a dot.
+    val badgeLabel = item.badgeLabel?.takeUnless { it.toIntOrNull() == 0 }
+    val isNumber = badgeLabel?.toIntOrNull() != null
+    val showDot = badgeLabel?.isEmpty() ?: item.showDot
 
     Box(modifier = Modifier
         .fillMaxSize()
@@ -144,7 +141,7 @@ internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> U
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
         }
-        .noFeedbackClickable {
+        .activeOpacityClickable {
             onClick()
         },
         contentAlignment = Alignment.BottomStart
@@ -152,18 +149,22 @@ internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> U
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(horizontal = Spacing.S, vertical = Spacing.S)
-                .noFeedbackClickable {
-                    onClick()
-                },
+                .padding(horizontal = Spacing.S, vertical = Spacing.S),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center
         ) {
-            Icon(
-                source = item.icon,
-                size = 28.dp,
-                modifier = Modifier.padding(Spacing.XS),
-                color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
+            Box(modifier = Modifier.padding(Spacing.XS)) {
+                Icon(
+                    source = item.icon,
+                    size = 28.dp,
+                    color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
+                val badgeAnchor = Modifier.matchParentSize().wrapContentSize(Alignment.TopEnd, unbounded = true)
+                if (showDot) {
+                    BadgeDot(size = DotSize.Small, modifier = badgeAnchor.offset(x = 4.dp, y = (-4).dp))
+                } else if (!badgeLabel.isNullOrEmpty()) {
+                    Badge(badgeLabel, modifier = badgeAnchor.offset(x = if (isNumber) 8.dp else 12.dp, y = (-8).dp))
+                }
+            }
             Text(
                 text = item.label,
                 color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint,
@@ -172,28 +173,19 @@ 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))
-        }
     }
 }
 
 @Composable
-internal fun FloatingButton(data: BottomTabFloatingButton) {
+internal fun FloatingButton(data: BottomTabFloatingButton, width: Dp) {
     Column(
         modifier = Modifier
-            .width(floatingButtonWidth)
+            .width(width)
             .padding(horizontal = Spacing.XXS, vertical = Spacing.S)
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }
-            .noFeedbackClickable {
+            .activeOpacityClickable {
                 data.onPress()
             },
         verticalArrangement = Arrangement.Bottom,

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

@@ -0,0 +1,97 @@
+package vn.momo.kits.navigation.bottomtab
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.unit.Dp
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.ScreenLayout
+
+// iPhone Duo: which side bar bar starts compressed when the strip cannot hold both whole.
+enum class DuoBarCompressionBehavior { TOOLBAR, TAB_BAR }
+
+private enum class DuoBar { TOOLBAR, TAB_BAR }
+
+@Stable
+internal class DuoBarCompression(
+    val toolbarCompressed: Boolean = false,
+    val tabBarCompressed: Boolean = false,
+    // the open rail needs the toolbar button slot too: only Back stays
+    val toolbarHidden: Boolean = false,
+    val expandToolbar: () -> Unit = {},
+    val expandTabBar: () -> Unit = {},
+    // a rail opened from the compressed state closes once a tab is picked
+    val onTabSelected: () -> Unit = {},
+    // side bar columns report their full height so the tab bar knows what is left
+    val setToolbarHeight: (Dp) -> Unit = {},
+)
+
+internal val LocalDuoBarCompression = compositionLocalOf { DuoBarCompression() }
+
+// space kept between the top and the bottom groups (HIG Vertical controls)
+internal val DUO_GROUP_GAP = Spacing.M
+// Back, then the right toolkit: help + home capsule
+private val DEFAULT_TOOLBAR_HEIGHT = DuoMetrics.controlSize + Spacing.M + DuoMetrics.itemPitch * 2
+// Back, then the single button the toolbar folds into
+private val COMPRESSED_TOOLBAR_HEIGHT = DuoMetrics.controlSize * 2 + Spacing.M
+
+// Port of RN DuoBarCompression (HIG, Designing for iPhone Duo: Vertical controls):
+// - both fit: both stay whole
+// - one fits whole beside the other compressed: one is compressed, tapping it swaps them
+// - otherwise both rest compressed; tapping one opens it for a moment (the rail closes
+//   again once a tab is picked)
+@Composable
+internal fun rememberDuoBarCompression(
+    behavior: DuoBarCompressionBehavior,
+    tabCount: Int,
+    hasQr: Boolean,
+    layout: ScreenLayout,
+): DuoBarCompression {
+    var toolbarHeight by remember { mutableStateOf(DEFAULT_TOOLBAR_HEIGHT) }
+    var expanded by remember(behavior) {
+        mutableStateOf(if (behavior == DuoBarCompressionBehavior.TOOLBAR) DuoBar.TAB_BAR else DuoBar.TOOLBAR)
+    }
+    var opened by remember { mutableStateOf<DuoBar?>(null) }
+    val setToolbarHeight = remember { { height: Dp -> toolbarHeight = height } }
+    val sideBar = layout.sideBar
+
+    return remember(sideBar, layout.height, tabCount, hasQr, toolbarHeight, expanded, opened) {
+        if (sideBar == null) return@remember DuoBarCompression()
+        val room = layout.height - sideBar.bottom - sideBar.top - DUO_GROUP_GAP
+        val tabBar = duoRailHeight(tabCount, hasQr)
+        val compressedTabBar = duoRailHeight(1, hasQr, compressed = true)
+        fun fits(toolbar: Dp, tabs: Dp) = toolbar + tabs <= room
+
+        when {
+            fits(toolbarHeight, tabBar) -> DuoBarCompression(setToolbarHeight = setToolbarHeight)
+            fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar) && fits(toolbarHeight, compressedTabBar) -> DuoBarCompression(
+                toolbarCompressed = expanded == DuoBar.TAB_BAR,
+                tabBarCompressed = expanded == DuoBar.TOOLBAR,
+                expandToolbar = { expanded = DuoBar.TOOLBAR },
+                expandTabBar = { expanded = DuoBar.TAB_BAR },
+                setToolbarHeight = setToolbarHeight,
+            )
+            // an opened rail always shows, even when only the group gap is short: it closes once a tab is picked
+            opened == DuoBar.TAB_BAR -> DuoBarCompression(
+                toolbarCompressed = true,
+                toolbarHidden = true,
+                expandToolbar = { opened = DuoBar.TOOLBAR },
+                expandTabBar = { opened = DuoBar.TAB_BAR },
+                onTabSelected = { opened = null },
+                setToolbarHeight = setToolbarHeight,
+            )
+            else -> DuoBarCompression(
+                toolbarCompressed = opened != DuoBar.TOOLBAR,
+                tabBarCompressed = true,
+                expandToolbar = { opened = DuoBar.TOOLBAR },
+                expandTabBar = { opened = DuoBar.TAB_BAR },
+                setToolbarHeight = setToolbarHeight,
+            )
+        }
+    }
+}