@momo-kits/native-kits 0.167.1-duo.2-debug → 0.167.1-duo.3-debug

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

@@ -0,0 +1,281 @@
+package vn.momo.kits.navigation.bottomtab
+
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.background
+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
+import androidx.compose.foundation.layout.height
+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.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.AbsoluteAlignment
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Badge
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.ScreenLayout
+import vn.momo.kits.layout.SideBarEdge
+import vn.momo.kits.modifier.noFeedbackClickable
+import vn.momo.kits.modifier.setAutomationId
+
+// Figma Fold-Design-System MT1/MT2, mirrored from RN DuoTabBar.tsx.
+private val ITEM_SIZE = DuoMetrics.controlSize
+private val ICON_SIZE = 28.dp
+private val QR_ICON_SIZE = 24.dp
+private val RAIL_PADDING = 6.dp
+private val RAIL_GAP = Spacing.XS
+// selection bubble overflows the 48 rail cell by 5 above and below
+private val RAIL_BUBBLE_WIDTH = 44.dp
+private val RAIL_BUBBLE_HEIGHT = 58.dp
+private val FLOATING_HEIGHT = 62.dp
+private val FLOATING_PADDING = Spacing.XS
+private val FLOATING_QR_SIZE = 44.dp
+// floating bar spans 6 of the 8 portrait grid columns, like the content
+private const val GRID_COLUMNS = 8
+private const val GRID_SPAN = 6
+// 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))
+
+// Space from the window bottom the rail stack takes, so the header side bar stays above it.
+internal val LocalDuoRailHeight = compositionLocalOf { 0.dp }
+
+internal fun duoRailHeight(itemCount: Int, hasQr: Boolean): Dp =
+    Spacing.XL + RAIL_PADDING * 2 + ITEM_SIZE * itemCount + RAIL_GAP * (itemCount - 1).coerceAtLeast(0) +
+        if (hasQr) Spacing.M + ITEM_SIZE else 0.dp
+
+// Space tab content leaves under the floating bar; 0 when the rail sits in the side strip or off Duo.
+internal fun duoFloatingTabBarInset(layout: ScreenLayout): Dp =
+    if (layout.isIPhoneDuo && layout.sideBar == null) FLOATING_HEIGHT + Spacing.M + layout.insetBottom else 0.dp
+
+// iPhone Duo tab bar: glass rail in the side bar, or a floating glass bar when unfolded portrait.
+@Composable
+internal fun BoxScope.DuoTabBar(
+    layout: ScreenLayout,
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton?,
+    selectedIndex: Int,
+    onTabSelected: (Int) -> Unit,
+) {
+    if (layout.sideBar != null) {
+        DuoRailTabBar(layout, items, floatingButton, selectedIndex, onTabSelected)
+    } else {
+        DuoFloatingTabBar(layout, items, floatingButton, selectedIndex, onTabSelected)
+    }
+}
+
+@Composable
+private fun BoxScope.DuoRailTabBar(
+    layout: ScreenLayout,
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton?,
+    selectedIndex: Int,
+    onTabSelected: (Int) -> Unit,
+) {
+    val sideBar = layout.sideBar ?: return
+    val isRight = sideBar.edge == SideBarEdge.RIGHT
+    val bubbleOffset by animateDpAsState(
+        targetValue = (ITEM_SIZE + RAIL_GAP) * selectedIndex.coerceAtLeast(0),
+        animationSpec = BUBBLE_SPRING,
+        label = "DuoRailBubble",
+    )
+
+    Column(
+        modifier = Modifier
+            .align(if (isRight) AbsoluteAlignment.BottomRight else AbsoluteAlignment.BottomLeft)
+            .width(sideBar.width)
+            .padding(bottom = Spacing.XL)
+            .absolutePadding(left = if (isRight) Spacing.M else 0.dp, right = if (isRight) 0.dp else Spacing.M),
+        horizontalAlignment = if (isRight) AbsoluteAlignment.Left else AbsoluteAlignment.Right,
+        verticalArrangement = Arrangement.spacedBy(Spacing.M),
+    ) {
+        Box(
+            Modifier
+                .width(ITEM_SIZE)
+                .tabBarMaterial(RoundedCornerShape(Radius.XL))
+                .setAutomationId("bottom_tab_bar")
+        ) {
+            Box(
+                Modifier
+                    .offset(
+                        x = (ITEM_SIZE - RAIL_BUBBLE_WIDTH) / 2,
+                        y = RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2 + bubbleOffset,
+                    )
+                    .size(RAIL_BUBBLE_WIDTH, RAIL_BUBBLE_HEIGHT)
+                    .background(AppTheme.current.colors.background.selected, CircleShape)
+            )
+            Column(
+                modifier = Modifier.padding(vertical = RAIL_PADDING),
+                verticalArrangement = Arrangement.spacedBy(RAIL_GAP),
+            ) {
+                items.forEachIndexed { index, item ->
+                    Box(
+                        modifier = Modifier
+                            .size(ITEM_SIZE)
+                            .noFeedbackClickable { onTabSelected(index) },
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        DuoTabIcon(item, selected = index == selectedIndex)
+                    }
+                }
+            }
+        }
+        if (floatingButton != null) {
+            QrButton(floatingButton, size = ITEM_SIZE)
+        }
+    }
+}
+
+@Composable
+private fun BoxScope.DuoFloatingTabBar(
+    layout: ScreenLayout,
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton?,
+    selectedIndex: Int,
+    onTabSelected: (Int) -> Unit,
+) {
+    val columnWidth = (layout.width - Spacing.M * 2 - Spacing.M * (GRID_COLUMNS - 1)) / GRID_COLUMNS
+    val barWidth = columnWidth * GRID_SPAN + Spacing.M * (GRID_SPAN - 1)
+    val useQr = floatingButton != null && items.size % 2 == 0
+    val middle = items.size / 2
+    val cellCount = items.size + if (useQr) 1 else 0
+    val visualIndex = if (useQr && selectedIndex >= middle) selectedIndex + 1 else selectedIndex
+
+    Box(
+        modifier = Modifier
+            .align(Alignment.BottomCenter)
+            .padding(bottom = layout.insetBottom + Spacing.M)
+            .width(barWidth)
+            .height(FLOATING_HEIGHT)
+            .tabBarMaterial(RoundedCornerShape(FLOATING_HEIGHT / 2))
+            .padding(FLOATING_PADDING)
+            .setAutomationId("bottom_tab_bar")
+    ) {
+        BoxWithConstraints(Modifier.fillMaxSize()) {
+            val cellWidth = maxWidth / cellCount
+            val bubbleOffset by animateDpAsState(
+                targetValue = cellWidth * visualIndex.coerceAtLeast(0),
+                animationSpec = BUBBLE_SPRING,
+                label = "DuoFloatingBubble",
+            )
+            Box(
+                Modifier
+                    .offset(x = bubbleOffset)
+                    .width(cellWidth)
+                    .fillMaxHeight()
+                    .background(AppTheme.current.colors.background.selected, CircleShape)
+            )
+            Row(Modifier.fillMaxSize()) {
+                items.forEachIndexed { index, item ->
+                    if (useQr && index == middle) {
+                        Box(Modifier.weight(1f).fillMaxHeight(), contentAlignment = Alignment.Center) {
+                            QrButton(floatingButton, size = FLOATING_QR_SIZE)
+                        }
+                    }
+                    FloatingCell(item, selected = index == selectedIndex) { onTabSelected(index) }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun RowScope.FloatingCell(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
+    val colors = AppTheme.current.colors
+    Column(
+        modifier = Modifier
+            .weight(1f)
+            .fillMaxHeight()
+            .noFeedbackClickable(onClick = onClick),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(Spacing.XXS, Alignment.CenterVertically),
+    ) {
+        DuoTabIcon(item, selected)
+        Text(
+            text = item.label,
+            style = Typography.labelXsMedium,
+            color = if (selected) colors.primary else colors.text.default,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+        )
+    }
+}
+
+@Composable
+private fun DuoTabIcon(item: BottomTabItem, selected: Boolean) {
+    val colors = AppTheme.current.colors
+    val badgeLabel = item.badgeLabel?.takeUnless { it.toIntOrNull() == 0 }
+    Box {
+        Icon(
+            source = item.icon,
+            size = ICON_SIZE,
+            color = if (selected) colors.primary else colors.text.default,
+        )
+        when {
+            badgeLabel == null && !item.showDot -> Unit
+            badgeLabel.isNullOrEmpty() -> BadgeDot(
+                size = DotSize.Small,
+                modifier = Modifier.align(Alignment.TopEnd),
+            )
+            else -> Badge(
+                badgeLabel,
+                modifier = Modifier.align(Alignment.TopStart).offset(x = ICON_SIZE / 2, y = -Spacing.XS),
+            )
+        }
+    }
+}
+
+@Composable
+private fun QrButton(data: BottomTabFloatingButton, size: Dp) {
+    Box(
+        modifier = Modifier
+            .size(size)
+            .clip(CircleShape)
+            .background(AppTheme.current.colors.primary)
+            .noFeedbackClickable(onClick = data.onPress)
+            .setAutomationId(data.label),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(source = data.icon, color = Color.White, size = QR_ICON_SIZE)
+    }
+}
+
+// RN falls back to this when native glass is missing; Compose has no backdrop blur, so it always does.
+@Composable
+private fun Modifier.tabBarMaterial(shape: Shape): Modifier {
+    val colors = AppTheme.current.colors
+    return shadow(3.dp, shape)
+        .background(colors.background.surface)
+        .border(1.dp, colors.border.default, shape)
+}

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

@@ -22,6 +22,8 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
@@ -47,7 +49,7 @@ import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.LocalOptions
 import vn.momo.kits.navigation.LocalScrollState
 import vn.momo.kits.navigation.getInputSearchType
-import vn.momo.kits.platform.getScreenDimensions
+import vn.momo.kits.navigation.usesDuoGlassHeader
 import vn.momo.kits.utils.horizontalSafeAreaPadding
 
 @InternalApi
@@ -81,7 +83,30 @@ internal fun headerOpacity(): Float {
 internal fun headerTitleMaxWidth(): Dp {
     val layout = getScreenLayout()
     if (layout.sideBar != null) return layout.contentWidth - Spacing.M * 2
-    return getScreenDimensions().width.dp - HEADER_ACTIONS_WIDTH
+    return layout.width - HEADER_ACTIONS_WIDTH
+}
+
+// Scroll distance over which the Duo glass bar fades in.
+private val DUO_GLASS_FADE_DISTANCE = 16.dp
+
+// RN DuoGlassBackground fallback: translucent surface with a hairline once content scrolls under it.
+@Suppress("FrequentlyChangingValue")
+@Composable
+private fun Modifier.duoGlassBar(): Modifier {
+    val scrollState = LocalScrollState.current
+    val fadePx = with(LocalDensity.current) { DUO_GLASS_FADE_DISTANCE.toPx() }
+    val alpha by animateFloatAsState((scrollState.value / fadePx).coerceIn(0f, 1f), label = "DuoGlassAlpha")
+    val colors = AppTheme.current.colors
+    return background(colors.background.surface.copy(alpha = 0.8f * alpha))
+        .drawBehind {
+            val stroke = 0.5.dp.toPx()
+            drawLine(
+                color = colors.border.default.copy(alpha = alpha),
+                start = Offset(0f, size.height - stroke / 2),
+                end = Offset(size.width, size.height - stroke / 2),
+                strokeWidth = stroke,
+            )
+        }
 }
 
 @Composable
@@ -111,13 +136,15 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
     // Centered title needs a full-width overlay to stay screen-centered, not boxed between back button and header right.
     val centerTitle = titlePosition == TitlePosition.CENTER && options.headerTitle is HeaderTitle.Default
 
+    val useDuoGlass = options.usesDuoGlassHeader(layout)
     val headerImage = AppTheme.current.assets.headerBackground
-        .takeUnless { options.headerType is HeaderType.Transparent }
+        .takeUnless { options.headerType is HeaderType.Transparent || useDuoGlass }
 
     Box(
         Modifier.height(layout.headerHeight)
             .fillMaxWidth()
-            .conditional(headerImage.isNullOrEmpty()) {
+            .then(if (useDuoGlass) Modifier.duoGlassBar() else Modifier)
+            .conditional(headerImage.isNullOrEmpty() && !useDuoGlass) {
                 background(background.copy(alpha = animatedAlpha))
             }
             .conditional(IsShowBaseLineDebug) {

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

@@ -9,6 +9,8 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
@@ -20,6 +22,7 @@ import vn.momo.kits.layout.getScreenLayout
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.navigation.LocalOptions
 import vn.momo.kits.navigation.LocalScrollState
+import vn.momo.kits.navigation.usesDuoGlassHeader
 
 enum class AnimatedHeaderRatio(val value: Float){
     RATIO_16_9(16f / 9f),
@@ -29,6 +32,10 @@ enum class AnimatedHeaderRatio(val value: Float){
 
 internal val HEADER_BACKGROUND_HEIGHT = 154.dp
 
+// RN DuoScrollGradient: extended gradient runs this far below the header and collapses over this scroll
+private val DUO_GRADIENT_EXTRA = 52.dp
+private val DUO_COLLAPSE_DISTANCE = 100.dp
+
 @Suppress("FrequentlyChangingValue")
 @Composable
 internal fun HeaderBackground() {
@@ -38,7 +45,8 @@ internal fun HeaderBackground() {
     val scrollState = LocalScrollState.current
     val backgroundColor = options.backgroundColor ?: AppTheme.current.colors.background.default
 
-    val minHeight = getScreenLayout().headerHeight
+    val layout = getScreenLayout()
+    val minHeight = layout.headerHeight
     val maxHeight = HEADER_BACKGROUND_HEIGHT
     val opacity by animateFloatAsState(
         targetValue = (1 - (scrollState.value * 1f / HEADER_HEIGHT * 1f)).coerceIn(0f, 1f),
@@ -57,7 +65,24 @@ internal fun HeaderBackground() {
         else -> 0.dp
     }
 
-    Box(Modifier.fillMaxWidth().height(height).background(backgroundColor)) {
+    // iPhone Duo glass header: default gradient scrolls away, extended collapses to the header and fades
+    val useDuoGlass = options.usesDuoGlassHeader(layout)
+    val scrollPx = scrollState.value.toFloat()
+    val duoModifier = when {
+        !useDuoGlass -> Modifier.height(height)
+        options.headerType is HeaderType.Extended -> {
+            val collapse = with(density) {
+                (scrollPx / minOf(DUO_COLLAPSE_DISTANCE, minHeight).toPx()).coerceIn(0f, 1f)
+            }
+            val fade = with(density) { (scrollPx / DUO_GRADIENT_EXTRA.toPx()).coerceIn(0f, 1f) }
+            Modifier
+                .height(minHeight + DUO_GRADIENT_EXTRA * (1f - collapse))
+                .graphicsLayer { alpha = 1f - fade }
+        }
+        else -> Modifier.height(minHeight).graphicsLayer { translationY = -scrollPx }
+    }
+
+    Box(Modifier.fillMaxWidth().then(duoModifier).clipToBounds().background(backgroundColor)) {
         Box(Modifier
             .height(maxHeight)
             .fillMaxWidth()

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

@@ -60,6 +60,8 @@ fun HeaderRight(
     }
 }
 
+private const val HELP_CENTER_APP_ID = "vn.momo.helpcenter"
+
 @Composable
 internal fun Toolkit(
     headerRight: HeaderRight.Toolkit,
@@ -118,10 +120,13 @@ internal fun Toolkit(
         ) {}
     }
 
-    fun onPressHome() {
-        api?.dismissAll {  }
+    fun onPressClose() {
+        if (headerRight.useCloseIcon) api?.dismiss { } else api?.dismissAll { }
     }
 
+    val useHelpCenter = context != null && context.appId != HELP_CENTER_APP_ID
+    val closeIcon = if (headerRight.useCloseIcon) "16_navigation_close_circle" else "16_basic_home"
+
     val navButtonConfig = getNavigationButtonConfig(
         headerRight,
         ::onPressShortcut,
@@ -157,8 +162,8 @@ internal fun Toolkit(
                     onClick = navButtonConfig.onPress,
                 )
             }
-            SideBarGroup(headerColor = headerColor, itemCount = if (context != null) 2 else 1) {
-                if (context != null) {
+            SideBarGroup(headerColor = headerColor, itemCount = if (useHelpCenter) 2 else 1) {
+                if (useHelpCenter) {
                     SideBarGroupItem(
                         icon = "help_center",
                         headerColor = headerColor,
@@ -167,10 +172,10 @@ internal fun Toolkit(
                     )
                 }
                 SideBarGroupItem(
-                    icon = "16_basic_home",
+                    icon = closeIcon,
                     headerColor = headerColor,
                     automationId = "btn_navigation_close",
-                    onClick = ::onPressHome,
+                    onClick = ::onPressClose,
                 )
             }
         }
@@ -200,7 +205,7 @@ internal fun Toolkit(
                 .clip(shape = RoundedCornerShape(14.dp))
                 .background(headerColor.backgroundButton)
         ) {
-            if (context != null) {
+            if (useHelpCenter) {
                 Icon(
                     source = "help_center",
                     size = 20.dp,
@@ -215,10 +220,10 @@ internal fun Toolkit(
                 )
             }
             Icon(
-                source = "16_basic_home",
+                source = closeIcon,
                 size = 20.dp,
                 color = headerColor.tintIconColor,
-                modifier = Modifier.padding(4.dp).activeOpacityClickable(onClick = ::onPressHome)
+                modifier = Modifier.padding(4.dp).activeOpacityClickable(onClick = ::onPressClose)
             )
         }
     }
@@ -308,7 +313,9 @@ sealed interface HeaderRight {
         val useMore: Boolean = false,
         val useSystemTools: Boolean = true,
         val tools: List<ToolGroup> = emptyList(),
-        val toolCallback: ((String) -> Unit)? = { _ -> }
+        val toolCallback: ((String) -> Unit)? = { _ -> },
+        // Close dismisses only this mini app instead of returning home.
+        val useCloseIcon: Boolean = false,
     ) : HeaderRight
 }
 

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

@@ -14,6 +14,9 @@ data class ScreenDimension(
 
 expect fun getPlatformName(): String
 
+// iPhone idiom only; iPad windows and Android never get the iPhone / iPhone Duo layout.
+expect fun isPhoneIdiom(): Boolean
+
 @Composable
 expect fun getScreenDimensions(): ScreenDimension
 

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

@@ -39,11 +39,15 @@ import platform.Foundation.NSBundle
 import platform.UIKit.UIColor
 import platform.UIKit.UIDevice
 import platform.UIKit.UIScreen
+import platform.UIKit.UIUserInterfaceIdiomPhone
 import vn.momo.kits.navigation.AttachHostBackGesture
 import vn.momo.kits.navigation.Navigator
 
 actual fun getPlatformName(): String = "iOS"
 
+actual fun isPhoneIdiom(): Boolean =
+    UIDevice.currentDevice.userInterfaceIdiom == UIUserInterfaceIdiomPhone
+
 @OptIn(ExperimentalForeignApi::class)
 @Composable
 actual fun getScreenDimensions(): ScreenDimension = memScoped {

package/gradle.properties

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

package/ios/Application/HeaderRight.swift

@@ -7,20 +7,31 @@ public struct HeaderRightData {
     var tools: [ToolGroup]
     var toolCallback: ((String) -> Void)?
     var useSystemTools: Bool
+    var useCloseIcon: Bool
     
     public init(
         useShortcut: Bool = false,
         useMore: Bool = false,
         tools: [ToolGroup] = [],
         toolCallback: ((String) -> Void)? = nil,
-        useSystemTools: Bool = true
+        useSystemTools: Bool = true,
+        useCloseIcon: Bool = false
     ) {
         self.useShortcut = useShortcut
         self.useMore = useMore
         self.tools = tools
         self.toolCallback = toolCallback
         self.useSystemTools = useSystemTools
+        self.useCloseIcon = useCloseIcon
     }
+
+    /// Close-circle instead of home, as RN `headerRight.useCloseIcon`.
+    var closeIcon: String { useCloseIcon ? "16_navigation_close_circle" : "16_basic_home" }
+}
+
+/// The Help Center mini-app hides its own help-center button.
+func showsHelpCenter(_ context: MiniAppContext?) -> Bool {
+    context?.appId != "vn.momo.helpcenter"
 }
 
 public struct Tool {
@@ -238,17 +249,19 @@ struct ToolkitHeaderRight: View {
             }
             
             HStack(alignment: .center, spacing: 0) {
-                Icon(source: "help_center", size: 20, color: tintColor ?? Colors.black17)
-                    .padding(4)
-                    .onTapGesture {
-                        onPressHelpCenter()
-                    }
-                
-                Rectangle()
-                    .fill(tintColor ?? Colors.black20)
-                    .frame(width: 0.5, height: 12)
-                
-                Icon(source: "16_basic_home", size: 20, color: tintColor ?? Colors.black17)
+                if showsHelpCenter(environment.applicationContext) {
+                    Icon(source: "help_center", size: 20, color: tintColor ?? Colors.black17)
+                        .padding(4)
+                        .onTapGesture {
+                            onPressHelpCenter()
+                        }
+
+                    Rectangle()
+                        .fill(tintColor ?? Colors.black20)
+                        .frame(width: 0.5, height: 12)
+                }
+
+                Icon(source: headerRight?.closeIcon ?? "16_basic_home", size: 20, color: tintColor ?? Colors.black17)
                     .padding(4)
                     .onTapGesture {
                         onPressClose()