@momo-kits/native-kits 0.300.3 → 0.300.4-debug

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

@@ -0,0 +1,103 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+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.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.const.AppTheme
+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.getInputSearchType
+import vn.momo.kits.navigation.usesDuoGlassHeader
+
+enum class AnimatedHeaderRatio(val value: Float){
+    RATIO_16_9(16f / 9f),
+    RATIO_1_1(1f),
+    RATIO_3_2(3f / 2f)
+}
+
+internal val HEADER_BACKGROUND_HEIGHT = 154.dp
+
+// RN DuoScrollGradient: extended gradient runs this far below the header
+private val DUO_GRADIENT_EXTRA = 52.dp
+
+@Suppress("FrequentlyChangingValue")
+@Composable
+internal fun HeaderBackground() {
+    val density = LocalDensity.current
+    val theme = AppTheme.current
+    val options = LocalOptions.current
+    val scrollState = LocalScrollState.current
+    val backgroundColor = options.backgroundColor ?: AppTheme.current.colors.background.default
+
+    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),
+    )
+
+    val color = if (opacity == 0f) backgroundColor else Color(0xFFFDCADE)
+    val height = when (options.headerType) {
+        is HeaderType.Default -> minHeight
+        is HeaderType.Extended -> {
+            if (AppTheme.current.isHeaderImage()){
+                if (opacity == 0f) minHeight else maxHeight
+            } else {
+                maxHeight
+            }
+        }
+        else -> 0.dp
+    }
+
+    // iPhone Duo glass header: the gradient leaves with the content, as the quick return header does
+    val useDuoGlass = options.usesDuoGlassHeader(layout)
+    // RN HeaderExtendHeader with search on the side bar layout: the gradient fills the header box,
+    // which for extended shrinks from 52pt below the header over the first 100pt of scroll
+    val duoSearch = layout.sideBar != null && getInputSearchType(options) != InputSearchType.None
+    val fillsBox = useDuoGlass || duoSearch
+    val duoModifier = when {
+        useDuoGlass -> {
+            val extra = if (options.headerType is HeaderType.Extended) DUO_GRADIENT_EXTRA else 0.dp
+            Modifier.height(minHeight + extra).graphicsLayer { translationY = -scrollState.value.toFloat() }
+        }
+        duoSearch && options.headerType is HeaderType.Extended -> {
+            val progress = (with(density) { scrollState.value.toDp() } / 100.dp).coerceIn(0f, 1f)
+            Modifier.height(minHeight + DUO_GRADIENT_EXTRA * (1 - progress))
+        }
+        duoSearch -> Modifier.height(minHeight)
+        else -> Modifier.height(height)
+    }
+
+    Box(Modifier.fillMaxWidth().then(duoModifier).clipToBounds().background(backgroundColor)) {
+        // on Duo the fade spans the gradient box; a banner image keeps its 375:154 shape, clipped
+        Box(Modifier
+            .fillMaxWidth()
+            .then(if (fillsBox && !theme.isHeaderImage()) Modifier.fillMaxHeight() else Modifier.height(maxHeight))
+            .conditional(!theme.isHeaderImage()) {
+                background(Brush.verticalGradient(colors = listOf(color, backgroundColor)))
+            }
+        ){
+            if (!theme.isHeaderImage()) return@Box
+            Image(
+                source = theme.assets.headerBackground!!,
+                modifier = Modifier.fillMaxSize(),
+            )
+        }
+    }
+}

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

@@ -0,0 +1,106 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Skeleton
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
+
+@Composable
+internal fun HeaderJourney(
+    data: HeaderTitle,
+    tintIconColor: Color,
+) {
+    if (data !is HeaderTitle.Journey) return
+    if (data.isLoading) return TitleJourneyShimmer()
+
+    val maxWidth = headerTitleMaxWidth()
+    val tint = parseHeaderTint(data.tintColor) ?: tintIconColor
+    val iconTint = parseHeaderTint(data.iconColor) ?: tint
+
+    Column(
+        modifier = Modifier
+            .widthIn(max = maxWidth)
+            .activeOpacityClickable(enabled = data.onPress != null, onClick = { data.onPress?.invoke() }),
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Text(
+                text = data.start,
+                color = tint,
+                style = Typography.actionXsBold,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.weight(1f, fill = false),
+            )
+            Spacer(Modifier.width(Spacing.S))
+            if (data.icon.isNotBlank()) {
+                Icon(source = data.icon, size = 16.dp, color = iconTint)
+            } else {
+                Spacer(Modifier.width(16.dp))
+            }
+            Spacer(Modifier.width(Spacing.S))
+            if (!data.end.isNullOrEmpty()) {
+                Text(
+                    text = data.end,
+                    color = tint,
+                    style = Typography.actionXsBold,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.weight(1f, fill = false),
+                )
+            }
+            Spacer(Modifier.width(Spacing.XS))
+            Icon(source = "16_arrow_chevron_down_small", size = 16.dp, color = tint)
+        }
+        if (!data.description.isNullOrEmpty()) {
+            Text(
+                text = data.description,
+                color = tint,
+                style = Typography.descriptionXsRegular,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}
+
+@Composable
+private fun TitleJourneyShimmer() {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Box(modifier = Modifier.height(18.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+        Spacer(Modifier.height(Spacing.XXS))
+        Box(modifier = Modifier.height(12.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+    }
+}
+
+internal fun parseHeaderTint(value: String?): Color? {
+    val raw = value?.trim()?.removePrefix("#") ?: return null
+    val hex = when (raw.length) {
+        3 -> "FF" + raw.map { "$it$it" }.joinToString("")
+        6 -> "FF$raw"
+        // CSS #RRGGBBAA, as RN passes it; Compose wants AARRGGBB
+        8 -> raw.substring(6) + raw.substring(0, 6)
+        else -> return null
+    }
+    val v = hex.toLongOrNull(16) ?: return null
+    return Color(v)
+}

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

@@ -0,0 +1,74 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Skeleton
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
+
+@Composable
+internal fun HeaderLocation(
+    data: HeaderTitle,
+    tintIconColor: Color,
+) {
+    if (data !is HeaderTitle.Location) return
+    if (data.isLoading) return TitleLocationShimmer()
+
+    val maxWidth = headerTitleMaxWidth()
+    val tint = parseHeaderTint(data.tintColor) ?: tintIconColor
+
+    Column(
+        modifier = Modifier
+            .widthIn(max = maxWidth)
+            .activeOpacityClickable(enabled = data.onPress != null, onClick = { data.onPress?.invoke() }),
+        horizontalAlignment = Alignment.Start,
+    ) {
+        if (!data.description.isNullOrEmpty()) {
+            Text(
+                text = data.description,
+                color = tint,
+                style = Typography.descriptionXsRegular,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Text(
+                text = data.location,
+                color = tint,
+                style = Typography.actionXsBold,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.weight(1f, fill = false),
+            )
+            Spacer(Modifier.width(Spacing.XS))
+            Icon(source = "16_arrow_chevron_down_small", size = 16.dp, color = tint)
+        }
+    }
+}
+
+@Composable
+private fun TitleLocationShimmer() {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Box(modifier = Modifier.height(12.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+        Spacer(Modifier.height(Spacing.XXS))
+        Box(modifier = Modifier.height(18.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+    }
+}

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

@@ -0,0 +1,413 @@
+package vn.momo.kits.navigation.component
+
+import vn.momo.kits.modifier.InternalApi
+
+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.Column
+import androidx.compose.foundation.layout.Row
+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.LaunchedEffect
+// AI-GENERATED START: dispose toolkit requests with their UI owner
+import androidx.compose.runtime.DisposableEffect
+import kotlinx.serialization.json.booleanOrNull
+import kotlinx.serialization.json.jsonPrimitive
+import vn.momo.maxapi.contract.navigation.model.DismissTarget
+import vn.momo.maxapi.contract.toolkit.model.ToolAction
+import vn.momo.maxapi.contract.toolkit.model.ToolkitOptions
+import vn.momo.maxapi.contract.toolkit.model.ToolkitToolGroup
+import vn.momo.maxapi.contract.toolkit.model.ToolkitTool
+import vn.momo.maxapi.runtime.ApiResult
+// AI-GENERATED END: dispose toolkit requests with their UI owner
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.application.MiniAppContext
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
+import vn.momo.kits.components.Icon
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.navigation.LocalMaxApi
+
+@Composable
+@InternalApi
+fun HeaderRight(
+    headerRight: HeaderRight,
+    tintColor: Color? = null,
+    headerColor: HeaderColor
+) {
+    when (headerRight) {
+        is HeaderRight.None -> {}
+        is HeaderRight.Custom -> {
+            headerRight.content()
+        }
+        is HeaderRight.OnBoarding -> {}
+        is HeaderRight.Toolkit -> {
+            Toolkit(
+                headerRight = headerRight,
+                tintColor = tintColor,
+                headerColor = headerColor
+            )
+        }
+    }
+}
+
+private const val HELP_CENTER_APP_ID = "vn.momo.helpcenter"
+
+private fun usesHelpCenter(context: MiniAppContext?): Boolean =
+    context != null && context.appId != HELP_CENTER_APP_ID
+
+private fun showsShortcut(headerRight: HeaderRight.Toolkit, context: MiniAppContext?): Boolean =
+    headerRight.useShortcut && !(headerRight.useMore && context == null)
+
+// Height of the vertical toolkit: the optional shortcut, then the help/home capsule.
+@Composable
+internal fun toolkitColumnHeight(headerRight: HeaderRight.Toolkit): Dp {
+    val context = LocalContext.current
+    val shortcut = if (showsShortcut(headerRight, context)) DuoMetrics.controlSize + Spacing.M else 0.dp
+    val groupCount = if (usesHelpCenter(context)) 2 else 1
+    return shortcut + if (groupCount > 1) DuoMetrics.itemPitch * groupCount else DuoMetrics.controlSize
+}
+
+// SideBarColumn: the iPhone Duo side bar; SideBarRow: the Duo header row on the status bar, same 48pt controls.
+internal enum class ToolkitLayout { Bar, SideBarColumn, SideBarRow }
+
+@Composable
+internal fun Toolkit(
+    headerRight: HeaderRight.Toolkit,
+    tintColor: Color? = null,
+    headerColor: HeaderColor,
+    layout: ToolkitLayout = ToolkitLayout.Bar,
+) {
+    val api = LocalMaxApi.current
+    val context = LocalContext.current
+
+    var isFavorite by remember { mutableStateOf(false) }
+    val isLoading by remember { mutableStateOf(false) }
+
+    // AI-GENERATED START: retain custom tool data and typed callback outcomes
+    val requests = remember(api, context?.appCode) { ToolkitRequests() }
+    DisposableEffect(requests) { onDispose { requests.close() } }
+
+    LaunchedEffect(requests) {
+        val client = api ?: return@LaunchedEffect
+        requests.launch<Boolean>({ callback -> client.checkFavorite(context?.appCode, callback) }) { result ->
+            if (result is ApiResult.Success) isFavorite = result.value
+        }
+    }
+
+    fun onPressShortcut() {
+        val client = api ?: return
+        requests.launch({ callback ->
+            client.performToolAction(ToolAction.FAVORITE, context?.appCode, callback)
+        }) { result ->
+            if (result is ApiResult.Success) {
+                result.value.jsonPrimitive.booleanOrNull?.let { isFavorite = it }
+            }
+        }
+    }
+
+    fun onPressMore() {
+        val client = api ?: return
+        val options = ToolkitOptions(
+            customToolGroups = headerRight.tools.map { group ->
+                ToolkitToolGroup(group.title, group.items.map { tool ->
+                    ToolkitTool(tool.key, tool.icon, tool.showBadge, tool.name, tool.showRightIcon)
+                })
+            },
+            useSystemTools = headerRight.useSystemTools,
+        )
+        requests.launch({ callback -> client.showToolkit(options, callback) }) { result ->
+            if (result is ApiResult.Success) headerRight.toolCallback?.invoke(result.value.actionKey)
+        }
+    }
+    // AI-GENERATED END: retain custom tool data and typed callback outcomes
+
+    fun onPressHelpCenter() {
+        if (context == null) return
+        // AI-GENERATED START: preserve Help Center context and own its event subscription
+        val client = api ?: return
+        requests.observe({ callback -> client.showBottomSheet(context.helpCenterRequest(), callback) }) {}
+        // AI-GENERATED END: preserve Help Center context and own its event subscription
+    }
+
+    fun onPressClose() {
+        // AI-GENERATED START: preserve current-container and whole-stack dismissal
+        api?.dismiss(if (headerRight.useCloseIcon) DismissTarget.Current() else DismissTarget.All) {}
+        // AI-GENERATED END: preserve current-container and whole-stack dismissal
+    }
+
+    val useHelpCenter = usesHelpCenter(context)
+    val closeIcon = if (headerRight.useCloseIcon) "16_navigation_close_circle" else "16_basic_home"
+
+    val navButtonConfig = getNavigationButtonConfig(
+        headerRight,
+        ::onPressShortcut,
+        ::onPressMore
+    )
+
+    val showBadge = headerRight.tools.any { group ->
+        group.items.any { it.showBadge }
+    }
+
+    val isShowShortcut = showsShortcut(headerRight, context)
+
+    val icon by remember(navButtonConfig.icon, isFavorite) {
+        derivedStateOf {
+            navButtonConfig.icon.takeUnless { it == "star" }
+                ?: if (isFavorite) "pin_star_checked" else "pin_star"
+        }
+    }
+
+    if (layout != ToolkitLayout.Bar) {
+        val horizontal = layout == ToolkitLayout.SideBarRow
+        val controls = @Composable {
+            if (isShowShortcut) {
+                SideBarButton(
+                    icon = icon,
+                    headerColor = headerColor,
+                    enabled = !isLoading,
+                    showBadge = showBadge,
+                    onClick = navButtonConfig.onPress,
+                )
+            }
+            SideBarGroup(headerColor = headerColor, itemCount = if (useHelpCenter) 2 else 1, horizontal = horizontal) { item ->
+                if (useHelpCenter) {
+                    SideBarGroupItem(
+                        icon = "help_center",
+                        headerColor = headerColor,
+                        automationId = "btn_navigation_help_center",
+                        onClick = ::onPressHelpCenter,
+                        modifier = item,
+                    )
+                }
+                SideBarGroupItem(
+                    icon = closeIcon,
+                    headerColor = headerColor,
+                    automationId = "btn_navigation_close",
+                    onClick = ::onPressClose,
+                    modifier = item,
+                )
+            }
+        }
+        if (horizontal) {
+            Row(horizontalArrangement = Arrangement.spacedBy(Spacing.M), verticalAlignment = Alignment.CenterVertically) {
+                controls()
+            }
+        } else {
+            Column(verticalArrangement = Arrangement.spacedBy(Spacing.M)) { controls() }
+        }
+        return
+    }
+
+    Row(
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        if (isShowShortcut) {
+            NavigationButton(
+                disabled = isLoading,
+                icon = icon,
+                showBadge = showBadge,
+                onClick = navButtonConfig.onPress,
+                headerColor = headerColor
+            )
+        }
+
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
+            modifier = Modifier
+                .padding(start = Spacing.S)
+                .border(0.2.dp, headerColor.borderColor, shape = RoundedCornerShape(14.dp))
+                .height(28.dp)
+                .clip(shape = RoundedCornerShape(14.dp))
+                .background(headerColor.backgroundButton)
+        ) {
+            if (useHelpCenter) {
+                Icon(
+                    source = "help_center",
+                    size = 20.dp,
+                    color = headerColor.tintIconColor,
+                    modifier = Modifier.padding(4.dp).activeOpacityClickable(onClick = ::onPressHelpCenter)
+                )
+                Box(
+                    modifier = Modifier
+                        .width(0.5.dp)
+                        .height(12.dp)
+                        .background(tintColor ?: Colors.black_20)
+                )
+            }
+            Icon(
+                source = closeIcon,
+                size = 20.dp,
+                color = headerColor.tintIconColor,
+                modifier = Modifier.padding(4.dp).activeOpacityClickable(onClick = ::onPressClose)
+            )
+        }
+    }
+}
+
+
+
+// Colors follow the enclosing header, so it fits a `HeaderRight.Custom` next to the toolkit.
+@Composable
+fun NavigationButton(
+    icon: String,
+    onClick: () -> Unit,
+    showBadge: Boolean = false,
+    disabled: Boolean = false,
+    modifier: Modifier = Modifier,
+) {
+    NavigationButton(
+        disabled = disabled,
+        icon = icon,
+        showBadge = showBadge,
+        onClick = onClick,
+        headerColor = LocalHeaderColor.current ?: getHeaderColor(HeaderType.Default(), 1f, null, Colors.black_17),
+        modifier = modifier,
+    )
+}
+
+@Composable
+internal fun NavigationButton(
+    disabled: Boolean,
+    icon: String,
+    showBadge: Boolean? = false,
+    onClick: () -> Unit,
+    headerColor: HeaderColor,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier
+            .size(28.dp)
+            .activeOpacityClickable(enabled = !disabled, onClick = onClick)
+    ) {
+        Box(
+            modifier = Modifier
+                .matchParentSize()
+                .clip(CircleShape)
+                .background(headerColor.backgroundButton)
+                .border(0.2.dp, headerColor.borderColor, CircleShape)
+        )
+        Box(
+            modifier = Modifier.matchParentSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                source = icon,
+                size = 20.dp,
+                color = headerColor.tintIconColor
+            )
+        }
+
+        if (showBadge == true) {
+            BadgeDot(
+                size = DotSize.Small,
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .offset(x = -Spacing.XXS, y = -Spacing.XXS)
+            )
+        }
+    }
+}
+
+private fun getNavigationButtonConfig(
+    headerRight: HeaderRight.Toolkit,
+    onPressShortcut: () -> Unit,
+    onPressMore: () -> Unit
+): NavigationButtonConfig {
+    val totalTools = headerRight.tools.sumOf { it.items.size }
+    val config = NavigationButtonConfig(icon = "star", onPress = onPressShortcut)
+    return if (totalTools > 1 || headerRight.useMore == true) {
+        NavigationButtonConfig(
+            icon = "navigation_more_icon",
+            onPress = onPressMore
+        )
+    } else if (totalTools == 1 && headerRight.tools.isNotEmpty()) {
+        val singleTool = headerRight.tools.first().items.firstOrNull()
+        return if (singleTool != null){
+            NavigationButtonConfig(
+                icon = singleTool.icon,
+                onPress = {
+                    headerRight.toolCallback?.invoke(singleTool.key)
+                }
+            )
+        } else {
+            config
+        }
+    } else {
+        config
+    }
+}
+
+sealed interface HeaderRight {
+    data object None : HeaderRight
+    data class Custom(
+        val content: @Composable () -> Unit
+    ) : HeaderRight
+    data object OnBoarding : HeaderRight
+    data class Toolkit(
+        val useShortcut: Boolean = false,
+        val useMore: Boolean = false,
+        val useSystemTools: Boolean = true,
+        val tools: List<ToolGroup> = emptyList(),
+        val toolCallback: ((String) -> Unit)? = { _ -> },
+        // Close dismisses only this mini app instead of returning home.
+        val useCloseIcon: Boolean = false,
+    ) : HeaderRight
+}
+
+data class ToolGroup(
+    val title: Map<String, String> = emptyMap(),
+    val items: List<Tool>
+) {
+    fun toMap(): Map<String, Any> {
+        return mapOf(
+            "title" to title,
+            "items" to items.map { it.toMap() }
+        )
+    }
+}
+data class Tool(
+    val key: String,
+    val icon: String,
+    val showBadge: Boolean = false,
+    val name: Map<String, String> = emptyMap(),
+    val showRightIcon: Boolean = true,
+) {
+    fun toMap(): Map<String, Any> {
+        return mapOf(
+            "key" to key,
+            "icon" to icon,
+            "showBadge" to showBadge,
+            "name" to name,
+            "showRightIcon" to showRightIcon
+        )
+    }
+}
+
+private data class NavigationButtonConfig(
+    val icon: String,
+    val onPress: () -> Unit
+)