@momo-kits/native-kits 0.168.1-beta.24-debug → 0.168.1-beta.25-debug

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

@@ -1,21 +1,15 @@
 package vn.momo.kits.navigation.bottomtab
 
-import androidx.compose.animation.core.Spring
-import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.animation.core.spring
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.interaction.collectIsPressedAsState
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
-import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
@@ -25,25 +19,30 @@ import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.MutableState
 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.AbsoluteAlignment
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -62,6 +61,7 @@ import vn.momo.kits.layout.ScreenLayout
 import vn.momo.kits.layout.SideBarEdge
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.navigation.LocalMaxApi
 
 // Figma Fold-Design-System MT1/MT2, mirrored from RN DuoTabBar.tsx.
 private val ITEM_SIZE = DuoMetrics.controlSize
@@ -76,14 +76,11 @@ private val FLOATING_HEIGHT = DuoMetrics.floatingTabBarHeight
 private val FLOATING_PADDING = Spacing.XS
 // the system bar sizes its pill to the tabs instead of stretching it across the display
 private val FLOATING_ITEM_WIDTH = 80.dp
-// while pressed the selection bubble grows into a lens past the pill's edges
-private const val LENS_SCALE_X = 1.2f
-private const val LENS_SCALE_Y = 1.3f
+// the rail's badge stays inside the capsule: its end sits XXS off the cell's end edge
+private val RAIL_BADGE_MAX_WIDTH = ITEM_SIZE - Spacing.XXS * 2
+private val RAIL_BADGE_END_OFFSET = (ITEM_SIZE - ICON_SIZE) / 2 - Spacing.XXS
 // Figma Home-2026 tab bar "Selection": brand pink at 8%
 private const val SELECTION_TINT_ALPHA = 0x14 / 255f
-// RN reanimated spring { damping: 18, stiffness: 220, mass: 0.8 }
-private val BUBBLE_SPRING = spring<Dp>(dampingRatio = 0.68f, stiffness = 275f, visibilityThreshold = Dp(0.5f))
-private val LENS_SPRING = spring<Float>(dampingRatio = 0.68f, stiffness = 275f)
 
 // Space from the window bottom the rail stack and its gap take, so the header side bar stays above it.
 internal val LocalDuoRailReserve = compositionLocalOf { 0.dp }
@@ -112,11 +109,15 @@ internal fun BoxScope.DuoTabBar(
     selectedIndex: Int,
     onTabSelected: (Int) -> Unit,
     compression: DuoBarCompression = DuoBarCompression(),
+    onTabLongPress: ((Int) -> Unit)? = null,
 ) {
+    val maxApi = LocalMaxApi.current
+    // a tick per tab the lens enters while dragged
+    val onTick = remember(maxApi) { { runCatching { maxApi?.triggerEventVibration("light", callback = null) }; Unit } }
     if (layout.sideBar != null) {
-        DuoRailTabBar(layout, items, floatingButton, selectedIndex, onTabSelected, compression)
+        DuoRailTabBar(layout, items, floatingButton, selectedIndex, onTabSelected, compression, onTabLongPress, onTick)
     } else {
-        DuoFloatingTabBar(layout, items, floatingButton, selectedIndex, onTabSelected)
+        DuoFloatingTabBar(layout, items, floatingButton, selectedIndex, onTabSelected, onTabLongPress, onTick)
     }
 }
 
@@ -131,6 +132,8 @@ private fun BoxScope.DuoRailTabBar(
     selectedIndex: Int,
     onTabSelected: (Int) -> Unit,
     compression: DuoBarCompression,
+    onTabLongPress: ((Int) -> Unit)?,
+    onTick: () -> Unit,
 ) {
     val sideBar = layout.sideBar ?: return
     val isRight = sideBar.edge == SideBarEdge.RIGHT
@@ -146,18 +149,20 @@ private fun BoxScope.DuoRailTabBar(
     ) {
         val current = items.getOrNull(selectedIndex)
         if (compression.tabBarCompressed && current != null) {
+            val interactionSource = remember { MutableInteractionSource() }
             Box(
                 modifier = Modifier
+                    .pressLift(interactionSource)
                     .size(ITEM_SIZE)
                     .tabBarMaterial(CircleShape)
-                    .noFeedbackClickable(onClick = compression.expandTabBar)
+                    .clickable(interactionSource = interactionSource, indication = null, onClick = compression.expandTabBar)
                     .setAutomationId("bottom_tab_bar"),
                 contentAlignment = Alignment.Center,
             ) {
-                DuoTabIcon(current, selected = true)
+                DuoTabIcon(current, selected = true, badgeMaxWidth = RAIL_BADGE_MAX_WIDTH, inRail = true)
             }
         } else {
-            Rail(items, selectedIndex) {
+            Rail(items, selectedIndex, onTabLongPress, onTick) {
                 onTabSelected(it)
                 compression.onTabSelected()
             }
@@ -168,42 +173,55 @@ private fun BoxScope.DuoRailTabBar(
     }
 }
 
-// Column of icon-only tab items with the sliding selection bubble.
+// Column of icon-only tab items with the sliding selection lens.
 @Composable
-private fun Rail(items: List<BottomTabItem>, selectedIndex: Int, onItemClick: (Int) -> Unit) {
-    val pressedIndex = remember { mutableStateOf<Int?>(null) }
-    val bubbleOffset by animateDpAsState(
-        targetValue = (ITEM_SIZE + RAIL_GAP) * (pressedIndex.value ?: selectedIndex).coerceAtLeast(0),
-        animationSpec = BUBBLE_SPRING,
-        label = "DuoRailBubble",
+private fun Rail(
+    items: List<BottomTabItem>,
+    selectedIndex: Int,
+    onTabLongPress: ((Int) -> Unit)?,
+    onTick: () -> Unit,
+    onItemClick: (Int) -> Unit,
+) {
+    val selection = rememberDuoLiquidSelection(
+        count = items.size,
+        pitch = ITEM_SIZE + RAIL_GAP,
+        firstCenter = RAIL_PADDING + ITEM_SIZE / 2,
+        axis = LiquidAxis.Y,
+        index = selectedIndex,
+        onSelect = onItemClick,
+        onTick = onTick,
     )
     Box(
         Modifier
+            .then(selection.barTransform)
             .width(ITEM_SIZE)
             .tabBarMaterial(CircleShape)
             .setAutomationId("bottom_tab_bar")
+            .then(selection.dragGesture)
     ) {
         Box(
             Modifier
                 .offset(
                     x = (ITEM_SIZE - RAIL_BUBBLE_WIDTH) / 2,
-                    y = RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2 + bubbleOffset,
+                    y = RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2,
                 )
+                .then(selection.bubbleTransform)
                 .size(RAIL_BUBBLE_WIDTH, RAIL_BUBBLE_HEIGHT)
-                .selectionLens(pressedIndex.value != null)
+                .selectionTint()
         )
         Column(
             modifier = Modifier.padding(vertical = RAIL_PADDING),
             verticalArrangement = Arrangement.spacedBy(RAIL_GAP),
         ) {
             items.forEachIndexed { index, item ->
-                Box(
-                    modifier = Modifier
-                        .size(ITEM_SIZE)
-                        .tabClickable(index, pressedIndex) { onItemClick(index) },
-                    contentAlignment = Alignment.Center,
-                ) {
-                    DuoTabIcon(item, selected = index == selectedIndex)
+                LiquidTab(
+                    selection = selection,
+                    index = index,
+                    onSelect = { onItemClick(index) },
+                    onLongPress = onTabLongPress?.let { { it(index) } },
+                    modifier = Modifier.size(ITEM_SIZE),
+                ) { active ->
+                    DuoTabIcon(item, active, badgeMaxWidth = RAIL_BADGE_MAX_WIDTH, inRail = true)
                 }
             }
         }
@@ -218,8 +236,21 @@ private fun BoxScope.DuoFloatingTabBar(
     floatingButton: BottomTabFloatingButton?,
     selectedIndex: Int,
     onTabSelected: (Int) -> Unit,
+    onTabLongPress: ((Int) -> Unit)?,
+    onTick: () -> Unit,
 ) {
-    val pressedIndex = remember { mutableStateOf<Int?>(null) }
+    val density = LocalDensity.current
+    var rowWidth by remember { mutableStateOf(0.dp) }
+    val cellWidth = rowWidth / items.size.coerceAtLeast(1)
+    val selection = rememberDuoLiquidSelection(
+        count = items.size,
+        pitch = cellWidth,
+        firstCenter = cellWidth / 2,
+        axis = LiquidAxis.X,
+        index = selectedIndex,
+        onSelect = onTabSelected,
+        onTick = onTick,
+    )
 
     Row(
         modifier = Modifier
@@ -237,28 +268,36 @@ private fun BoxScope.DuoFloatingTabBar(
                 .weight(1f, fill = false)
                 .width(FLOATING_ITEM_WIDTH * items.size + FLOATING_PADDING * 2)
                 .height(FLOATING_HEIGHT)
+                .then(selection.barTransform)
                 .tabBarMaterial(RoundedCornerShape(FLOATING_HEIGHT / 2))
                 .padding(FLOATING_PADDING)
                 .setAutomationId("bottom_tab_bar")
         ) {
-            BoxWithConstraints(Modifier.fillMaxSize()) {
-                val cellWidth = maxWidth / items.size.coerceAtLeast(1)
-                val bubbleOffset by animateDpAsState(
-                    targetValue = cellWidth * (pressedIndex.value ?: selectedIndex).coerceAtLeast(0),
-                    animationSpec = BUBBLE_SPRING,
-                    label = "DuoFloatingBubble",
-                )
-                Box(
-                    Modifier
-                        .offset(x = bubbleOffset)
-                        .width(cellWidth)
-                        .fillMaxHeight()
-                        .selectionLens(pressedIndex.value != null)
-                )
+            Box(
+                Modifier
+                    .fillMaxSize()
+                    .onSizeChanged { rowWidth = with(density) { it.width.toDp() } }
+                    .then(selection.dragGesture)
+            ) {
+                if (rowWidth > 0.dp) {
+                    Box(
+                        Modifier
+                            .then(selection.bubbleTransform)
+                            .width(cellWidth)
+                            .fillMaxHeight()
+                            .selectionTint()
+                    )
+                }
                 Row(Modifier.fillMaxSize()) {
                     items.forEachIndexed { index, item ->
-                        FloatingCell(item, selected = index == selectedIndex, index, pressedIndex) {
-                            onTabSelected(index)
+                        LiquidTab(
+                            selection = selection,
+                            index = index,
+                            onSelect = { onTabSelected(index) },
+                            onLongPress = onTabLongPress?.let { { it(index) } },
+                            modifier = Modifier.weight(1f).fillMaxHeight(),
+                        ) { active ->
+                            FloatingCellContent(item, active, badgeMaxWidth = cellWidth / 2 - Spacing.XXS)
                         }
                     }
                 }
@@ -270,24 +309,56 @@ private fun BoxScope.DuoFloatingTabBar(
     }
 }
 
+// A tab drawn twice, inactive with the active layer over it fading in as the lens passes; the tab
+// the lens lands on pops. A tap is the clickable's, a drag over the bar is the bar's.
 @Composable
-private fun RowScope.FloatingCell(
-    item: BottomTabItem,
-    selected: Boolean,
+private fun LiquidTab(
+    selection: DuoLiquidSelection,
     index: Int,
-    pressedIndex: MutableState<Int?>,
-    onClick: () -> Unit,
+    onSelect: () -> Unit,
+    onLongPress: (() -> Unit)?,
+    modifier: Modifier = Modifier,
+    content: @Composable (active: Boolean) -> Unit,
 ) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val onLongClick = selection.rememberPressTracking(index, interactionSource, onSelect, onLongPress)
+    val pop = selection.rememberIconPop(index)
+    Box(
+        modifier = modifier
+            .combinedClickable(
+                interactionSource = interactionSource,
+                indication = null,
+                role = Role.Tab,
+                onLongClick = onLongClick,
+                onClick = onSelect,
+            )
+            .graphicsLayer {
+                scaleX = pop.value
+                scaleY = pop.value
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        content(false)
+        Box(
+            Modifier
+                .matchParentSize()
+                .graphicsLayer { alpha = selection.activeAlpha(index) }
+                .clearAndSetSemantics {},
+            contentAlignment = Alignment.Center,
+        ) {
+            content(true)
+        }
+    }
+}
+
+@Composable
+private fun FloatingCellContent(item: BottomTabItem, active: Boolean, badgeMaxWidth: Dp) {
     val colors = AppTheme.current.colors
     Column(
-        modifier = Modifier
-            .weight(1f)
-            .fillMaxHeight()
-            .tabClickable(index, pressedIndex, onClick),
         horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.spacedBy(Spacing.XXS, Alignment.CenterVertically),
+        verticalArrangement = Arrangement.spacedBy(Spacing.XXS),
     ) {
-        DuoTabIcon(item, selected)
+        DuoTabIcon(item, active, badgeMaxWidth)
         // like the system tab bar the label keeps its design size; Text grows it up to 5pt on the wide Duo displays
         val context = LocalContext.current
         val fixedScale = remember(context) {
@@ -297,7 +368,7 @@ private fun RowScope.FloatingCell(
             Text(
                 text = item.label,
                 style = Typography.labelXsMedium,
-                color = if (selected) colors.primary else colors.text.hint,
+                color = if (active) colors.primary else colors.text.hint,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
             )
@@ -305,31 +376,15 @@ private fun RowScope.FloatingCell(
     }
 }
 
-// Tracks the finger so the selection lens jumps to the pressed tab before it is selected.
-@Composable
-private fun Modifier.tabClickable(index: Int, pressedIndex: MutableState<Int?>, onClick: () -> Unit): Modifier {
-    val interactionSource = remember { MutableInteractionSource() }
-    val pressed by interactionSource.collectIsPressedAsState()
-    LaunchedEffect(pressed) {
-        if (pressed) pressedIndex.value = index
-        else if (pressedIndex.value == index) pressedIndex.value = null
-    }
-    return clickable(interactionSource = interactionSource, indication = null, role = Role.Tab, onClick = onClick)
-}
-
-// Selection bubble; while pressed it grows into a lens (80x54 to about 96x70).
-@Composable
-private fun Modifier.selectionLens(pressed: Boolean): Modifier {
-    val lens by animateFloatAsState(if (pressed) 1f else 0f, LENS_SPRING, label = "DuoSelectionLens")
-    val tint = AppTheme.current.colors.primary.copy(alpha = SELECTION_TINT_ALPHA)
-    return graphicsLayer {
-        scaleX = 1 + lens * (LENS_SCALE_X - 1)
-        scaleY = 1 + lens * (LENS_SCALE_Y - 1)
-    }.background(tint, CircleShape)
+private fun Modifier.selectionTint(): Modifier = composed {
+    background(AppTheme.current.colors.primary.copy(alpha = SELECTION_TINT_ALPHA), CircleShape)
 }
 
+// Floating bar: the badge starts at the icon's center and grows toward the cell's end edge.
+// Rail: the material clips to the capsule, so the badge ends just inside the rail and grows back
+// over the icon (RN TabBarIcon `end: -3`). Either way it never resizes the icon box.
 @Composable
-private fun DuoTabIcon(item: BottomTabItem, selected: Boolean) {
+private fun DuoTabIcon(item: BottomTabItem, selected: Boolean, badgeMaxWidth: Dp, inRail: Boolean = false) {
     val colors = AppTheme.current.colors
     val badgeLabel = item.badgeLabel?.takeUnless { it.toIntOrNull() == 0 }
     Box {
@@ -346,7 +401,11 @@ private fun DuoTabIcon(item: BottomTabItem, selected: Boolean) {
             )
             else -> Badge(
                 badgeLabel,
-                modifier = Modifier.align(Alignment.TopStart).offset(x = ICON_SIZE / 2, y = -Spacing.XS),
+                modifier = Modifier
+                    .matchParentSize()
+                    .wrapContentSize(if (inRail) Alignment.TopEnd else Alignment.TopStart, unbounded = true)
+                    .offset(x = if (inRail) RAIL_BADGE_END_OFFSET else ICON_SIZE / 2, y = -Spacing.XS)
+                    .widthIn(max = badgeMaxWidth.coerceAtLeast(0.dp)),
             )
         }
     }

package/compose/src/commonMain/kotlin/vn/momo/kits/platform/ReduceMotion.kt

@@ -0,0 +1,7 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+
+// OS "Reduce Motion" (iOS) / animations off (Android), live.
+@Composable
+expect fun rememberReduceMotion(): Boolean

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/ReduceMotion.ios.kt

@@ -0,0 +1,48 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import kotlinx.cinterop.ExperimentalForeignApi
+import kotlinx.cinterop.ObjCAction
+import platform.Foundation.NSNotification
+import platform.Foundation.NSNotificationCenter
+import platform.Foundation.NSSelectorFromString
+import platform.UIKit.UIAccessibilityIsReduceMotionEnabled
+import platform.UIKit.UIAccessibilityReduceMotionStatusDidChangeNotification
+import platform.darwin.NSObject
+
+@OptIn(ExperimentalForeignApi::class)
+@Composable
+actual fun rememberReduceMotion(): Boolean {
+    val reduceMotion = remember { mutableStateOf(UIAccessibilityIsReduceMotionEnabled()) }
+
+    val listener = remember {
+        object : NSObject() {
+            @Suppress("unused")
+            @ObjCAction
+            fun reduceMotionChanged(arg: NSNotification) {
+                reduceMotion.value = UIAccessibilityIsReduceMotionEnabled()
+            }
+        }
+    }
+
+    DisposableEffect(Unit) {
+        NSNotificationCenter.defaultCenter.addObserver(
+            observer = listener,
+            selector = NSSelectorFromString(listener::reduceMotionChanged.name + ":"),
+            name = UIAccessibilityReduceMotionStatusDidChangeNotification,
+            `object` = null,
+        )
+        onDispose {
+            NSNotificationCenter.defaultCenter.removeObserver(
+                observer = listener,
+                name = UIAccessibilityReduceMotionStatusDidChangeNotification,
+                `object` = null,
+            )
+        }
+    }
+
+    return reduceMotion.value
+}

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.168.1-beta.24
+version=0.168.1-beta.8
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Navigation/BottomTab/BottomTab.swift

@@ -16,6 +16,7 @@ public struct BottomTab: View {
     private let compressionBehavior: DuoBarCompressionBehavior
     private let onTabPress: ((_ index: Int, _ switchTab: @escaping () -> Void) -> Void)?
     private let backToInitialTab: Bool
+    private let onTabLongPress: ((_ index: Int) -> Void)?
 
     @EnvironmentObject private var navigator: Navigator
     /// The screen hosting the tabs (Compose's `LocalNavigation` in BottomTab).
@@ -34,19 +35,22 @@ public struct BottomTab: View {
     /// starts compressed; tapping the compressed one swaps them.
     /// `onTabPress` gets every tab press with the switch to perform, e.g. after a login gate.
     /// `backToInitialTab`: back off another tab returns to the initial one before leaving the screen.
+    /// `onTabLongPress`: RN `tabLongPress`; on iPhone Duo the held tab is still selected on release.
     public init(
         items: [BottomTabItem],
         floatingButton: BottomTabFloatingButton? = nil,
         compressionBehavior: DuoBarCompressionBehavior = .toolbar,
         initialRouteName: String? = nil,
         onTabPress: ((_ index: Int, _ switchTab: @escaping () -> Void) -> Void)? = nil,
-        backToInitialTab: Bool = true
+        backToInitialTab: Bool = true,
+        onTabLongPress: ((_ index: Int) -> Void)? = nil
     ) {
         self.items = items
         self.floatingButton = floatingButton
         self.compressionBehavior = compressionBehavior
         self.onTabPress = onTabPress
         self.backToInitialTab = backToInitialTab
+        self.onTabLongPress = onTabLongPress
         let start = items.firstIndex { $0.name == initialRouteName } ?? 0
         _startIndex = State(initialValue: start)
         _selectedIndex = State(initialValue: start)
@@ -101,7 +105,15 @@ public struct BottomTab: View {
                     floatingButton: floatingButton,
                     selectedIndex: selectedIndex,
                     onTabSelected: selectTab,
-                    compression: compression
+                    compression: compression,
+                    onTabLongPress: onTabLongPress,
+                    onTick: { [maxApi = navigator.maxApi] in
+                        if let maxApi {
+                            maxApi.triggerEventVibration("light")
+                        } else {
+                            UIImpactFeedbackGenerator(style: .light).impactOccurred()
+                        }
+                    }
                 )
             } else {
                 // Tab bar + home-indicator filler.
@@ -110,7 +122,8 @@ public struct BottomTab: View {
                         items: items,
                         floatingButton: floatingButton,
                         selectedIndex: selectedIndex,
-                        onTabSelected: selectTab
+                        onTabSelected: selectTab,
+                        onTabLongPress: onTabLongPress
                     )
                     theme.colors.background.surface
                         .frame(height: bottomInset + Spacing.S)

package/ios/Navigation/BottomTab/BottomTabBar.swift

@@ -67,6 +67,7 @@ struct BottomTabBar: View {
     let floatingButton: BottomTabFloatingButton?
     let selectedIndex: Int
     let onTabSelected: (Int) -> Void
+    var onTabLongPress: ((Int) -> Void)?
 
     @Environment(\.screenLayout) private var layout
     @Environment(\.appTheme) private var theme
@@ -133,7 +134,10 @@ struct BottomTabBar: View {
             TabBarItem(
                 item: items[index],
                 selected: index == selectedIndex,
-                onClick: { onTabSelected(index) }
+                // from the icon's center to the cell's end edge, inside both XXS paddings
+                badgeMaxWidth: tabWidth / 2 - Spacing.XXS * 2,
+                onClick: { onTabSelected(index) },
+                onLongClick: onTabLongPress.map { callback in { callback(index) } }
             )
             .frame(maxWidth: .infinity)
         }
@@ -145,7 +149,9 @@ struct BottomTabBar: View {
 private struct TabBarItem: View {
     let item: BottomTabItem
     let selected: Bool
+    let badgeMaxWidth: CGFloat
     let onClick: () -> Void
+    let onLongClick: (() -> Void)?
 
     @Environment(\.appTheme) private var theme
 
@@ -159,40 +165,52 @@ private struct TabBarItem: View {
     }
 
     var body: some View {
-        ZStack(alignment: .topTrailing) {
-            VStack(spacing: 0) {
-                Icon(source: item.icon, size: 28, color: tintColor)
-                    .padding(Spacing.XS)
-                MomoText(
-                    item.label,
-                    typography: selected ? .labelXsMedium : .descriptionXsRegular,
-                    color: tintColor,
-                    textAlign: .center,
-                    maxLines: 1
-                )
-                    .truncationMode(.tail)
-            }
-            .frame(maxWidth: .infinity, maxHeight: .infinity)
-            .padding(.horizontal, Spacing.S)
-            .padding(.vertical, Spacing.S)
-
-            if let badgeLabel {
-                if badgeLabel.isEmpty {
-                    BadgeDot(size: .small)
-                        .offset(x: -Spacing.S, y: Spacing.XS)
-                } else {
-                    Badge(label: badgeLabel)
-                        .offset(x: -Spacing.XS, y: 0)
+        VStack(spacing: 0) {
+            Icon(source: item.icon, size: 28, color: tintColor)
+                .overlay(alignment: .topLeading) {
+                    // starts at the icon's center and grows toward the cell's end edge, ellipsized past it
+                    if let badgeLabel, !badgeLabel.isEmpty {
+                        Badge(label: badgeLabel)
+                            .frame(width: max(badgeMaxWidth, 0), alignment: .leading)
+                            .offset(x: 14, y: -Spacing.S)
+                    }
                 }
-            } else if item.showDot {
-                BadgeDot(size: .small)
-                    .offset(x: -Spacing.S, y: Spacing.XS)
-            }
+                .overlay(alignment: .topTrailing) {
+                    if badgeLabel?.isEmpty == true || (badgeLabel == nil && item.showDot) {
+                        BadgeDot(size: .small).offset(x: 4, y: -4)
+                    }
+                }
+                .padding(Spacing.XS)
+            MomoText(
+                item.label,
+                typography: selected ? .labelXsMedium : .descriptionXsRegular,
+                color: tintColor,
+                textAlign: .center,
+                maxLines: 1
+            )
+            .truncationMode(.tail)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .padding(.horizontal, Spacing.S)
+        .padding(.vertical, Spacing.S)
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
         .padding(.horizontal, Spacing.XXS)
         .contentShape(Rectangle())
         .onTapGesture { onClick() }
+        .modifier(TabLongPress(action: onLongClick))
+    }
+}
+
+/// Only attached with a callback, so a held tab without one still selects on release.
+private struct TabLongPress: ViewModifier {
+    let action: (() -> Void)?
+
+    func body(content: Content) -> some View {
+        if let action {
+            content.onLongPressGesture(minimumDuration: 0.5, perform: action)
+        } else {
+            content
+        }
     }
 }