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

package/compose/src/commonMain/kotlin/vn/momo/kits/application/LiteScreen.kt

@@ -1,22 +1,41 @@
 package vn.momo.kits.application
 
 import androidx.annotation.FloatRange
-import androidx.compose.animation.animateContentSize
-import androidx.compose.foundation.*
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.interaction.FocusInteraction
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.runtime.*
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.staticCompositionLocalOf
 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.drawBehind
+import androidx.compose.ui.draw.drawWithCache
 import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Rect
@@ -25,13 +44,25 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.layout.*
+import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.layout.Measurable
+import androidx.compose.ui.layout.MeasurePolicy
+import androidx.compose.ui.layout.MeasureResult
+import androidx.compose.ui.layout.MeasureScope
+import androidx.compose.ui.layout.Placeable
+import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.*
+import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.lerp
+import androidx.compose.ui.unit.sp
 import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.flow.mapNotNull
 import vn.momo.kits.components.Icon
@@ -41,14 +72,28 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.ScreenLayout
+import vn.momo.kits.layout.SideBarEdge
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.modifier.hideKeyboardOnTap
+import vn.momo.kits.utils.horizontalSafeAreaPadding
 import vn.momo.kits.modifier.kitsAutomationId
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.navigation.component.headerFontFamily
 import vn.momo.kits.navigation.component.HEADER_HEIGHT
+import vn.momo.kits.navigation.component.HeaderColor
+import vn.momo.kits.navigation.component.LocalHeaderColor
+import vn.momo.kits.navigation.component.HeaderRight
+import vn.momo.kits.navigation.component.SideBarButton
+import vn.momo.kits.navigation.component.TitlePosition
+import vn.momo.kits.navigation.component.ToolGroup
+import vn.momo.kits.navigation.component.Toolkit
 import vn.momo.kits.utils.getAppStatusBarHeight
 import kotlin.math.max
 import kotlin.math.roundToInt
+import vn.momo.kits.navigation.component.getHeaderColor as getNavigationHeaderColor
 
 
 data class AnimationOption(
@@ -73,6 +118,30 @@ data class AnimationOption(
 
 val LocalAnimationOption = staticCompositionLocalOf<AnimationOption?> { null }
 
+// LiteScreen's own header kinds; StackScreen uses the sealed navigation.component.HeaderType.
+enum class HeaderType {
+    DEFAULT,
+    EXTENDED,
+    NONE
+}
+
+@Stable
+data class HeaderRightData(
+    val useShortcut: Boolean = false,
+    val useMore: Boolean = false,
+    val useSystemTools: Boolean = true,
+    val tools: List<ToolGroup> = emptyList(),
+    val toolCallback: ((String) -> Unit)? = { _ -> }
+) {
+    internal fun toToolkit() = HeaderRight.Toolkit(
+        useShortcut = useShortcut,
+        useMore = useMore,
+        useSystemTools = useSystemTools,
+        tools = tools,
+        toolCallback = toolCallback,
+    )
+}
+
 @Composable
 fun LiteScreen(
     scrollable: Boolean = true,
@@ -169,6 +238,8 @@ private fun LiteScreenLayout(
     content: @Composable () -> Unit,
 ) {
     val statusBarHeight = getAppStatusBarHeight()
+    val screenLayout = getScreenLayout()
+    val applySafeAreaPadding = screenLayout.sideBar != null
     val isHeaderNone = remember(headerType) {
         headerType == HeaderType.NONE
     }
@@ -204,18 +275,16 @@ private fun LiteScreenLayout(
             borderColor = Colors.black_20.copy(alpha = 0.2f)
         )
     }
+    val toolkit = remember(headerRightData) { (headerRightData ?: HeaderRightData()).toToolkit() }
 
-    val scrollPercentage = produceState(
-        initialValue = 0f,
-        key1 = useAnimationSearch,
-        key2 = scrollState,
-        key3 = backgroundHeight,
-    ) {
-        if (!useAnimationSearch) return@produceState
-        scrollState ?: return@produceState
-        val rangePx = with(density) { backgroundHeight.toPx() }
-        snapshotFlow { scrollState.value }.collectLatest {
-            value = (it / rangePx).coerceIn(0f, 1f)
+    val scrollPercentage = remember(useAnimationSearch, scrollState, backgroundHeight, density) {
+        derivedStateOf {
+            if (!useAnimationSearch || scrollState == null) {
+                0f
+            } else {
+                val rangePx = with(density) { backgroundHeight.toPx() }
+                (scrollState.value / rangePx).coerceIn(0f, 1f)
+            }
         }
     }
 
@@ -230,6 +299,12 @@ private fun LiteScreenLayout(
     val animationOpacityModifier = Modifier.graphicsLayer {
         alpha = animationOption?.animateOpacity ?: 1f
     }
+    val sideBarColor = getNavigationHeaderColor(
+        vn.momo.kits.navigation.component.HeaderType.Default(),
+        1f,
+        null,
+        Colors.black_17,
+    )
     val titleModifier = Modifier
         .kitsAutomationId("title_navigation_header")
         .layoutId(HeaderId.TITLE_ID)
@@ -241,6 +316,8 @@ private fun LiteScreenLayout(
         }
 
     val policy = remember(
+        screenLayout,
+        applySafeAreaPadding,
         useAnimationSearch,
         isHeaderNone,
         isHeaderExtend,
@@ -253,6 +330,8 @@ private fun LiteScreenLayout(
         horizontalAlignment,
     ) {
         LiteScreenLayoutPolicy(
+            screenLayout = screenLayout,
+            applySafeAreaPadding = applySafeAreaPadding,
             useAnimationSearch = useAnimationSearch,
             isHeaderNone = isHeaderNone,
             isHeaderExtend = isHeaderExtend,
@@ -267,13 +346,13 @@ private fun LiteScreenLayout(
     }
 
     Layout(
-        modifier = modifier
-            .animateContentSize(),
+        modifier = modifier,
         content = {
             Box(
                 modifier = animationOpacityModifier
                     .layoutId(HeaderId.CONTENT_ID)
-                    .then(contentModifier),
+                    .then(contentModifier)
+                    .then(if (applySafeAreaPadding) Modifier.horizontalSafeAreaPadding() else Modifier),
                 contentAlignment = Alignment.TopCenter,
             ) {
                 content()
@@ -284,53 +363,71 @@ private fun LiteScreenLayout(
                     modifier = Modifier
                         .layoutId(HeaderId.BACKGROUND_ID)
                         .then(animationOpacityModifier)
-                        .drawBehind {
-                            val headerHeight = max(
-                                HeaderId.EXTENDED_HEADER_HEIGHT.toPx(),
-                                size.height,
-                            )
-                            headerBackgroundColor?.let {
-                                drawRect(color = it)
-                            } ?: run {
-                                drawRect(color = Colors.black_01)
-                                drawRect(
-                                    brush = Brush.linearGradient(
-                                        colors = listGradientColors,
-                                        start = Offset.Zero,
-                                        end = Offset(
-                                            x = 0f,
-                                            y = headerHeight * (1 - scrollPercentage.value),
-                                        ),
-                                    )
+                        .drawWithCache {
+                            if (headerBackgroundColor != null) {
+                                val backgroundColor = headerBackgroundColor
+                                onDrawBehind { drawRect(color = backgroundColor) }
+                            } else {
+                                val headerHeight = max(
+                                    HeaderId.EXTENDED_HEADER_HEIGHT.toPx(),
+                                    size.height,
+                                )
+                                val gradientBrush = Brush.linearGradient(
+                                    colors = listGradientColors,
+                                    start = Offset.Zero,
+                                    end = Offset(
+                                        x = 0f,
+                                        y = headerHeight * (1 - scrollPercentage.value),
+                                    ),
                                 )
+                                onDrawBehind {
+                                    drawRect(color = Colors.black_01)
+                                    drawRect(brush = gradientBrush)
+                                }
                             }
                         },
                 )
             }
 
             if (!isHeaderNone && onGoBack != null) {
-                val coreModifier = Modifier
-                    .layoutId(HeaderId.BACK_ID)
-                    .then(animationOpacityModifier)
-                    .clip(CircleShape)
-                    .noFeedbackClickable(onClick = onGoBack)
-                    .setAutomationId("btn_navigation_back")
-                inputSearchProps?.customBackIcon?.invoke(coreModifier) ?: Box(
-                    modifier = coreModifier
-                        .size(28.dp)
-                        .border(
-                            width = 0.2.dp,
-                            color = headerColor.borderColor,
-                            shape = CircleShape,
-                        )
-                        .background(color = headerColor.backgroundButton)
-                        .padding(Spacing.XS),
-                ) {
-                    Icon(
-                        source = "arrow-back",
-                        color = headerColor.tintIconColor,
-                        size = 20.dp,
-                    )
+                when {
+                    screenLayout.sideBar != null || screenLayout.statusBarClearance != null -> {
+                        Box(
+                            modifier = Modifier.layoutId(HeaderId.BACK_ID),
+                        ) {
+                            SideBarButton(
+                                icon = "arrow-back",
+                                headerColor = sideBarColor,
+                                onClick = onGoBack,
+                                automationId = "btn_navigation_back",
+                            )
+                        }
+                    }
+                    else -> {
+                        val coreModifier = Modifier
+                            .layoutId(HeaderId.BACK_ID)
+                            .then(animationOpacityModifier)
+                            .clip(CircleShape)
+                            .noFeedbackClickable(onClick = onGoBack)
+                            .setAutomationId("btn_navigation_back")
+                        inputSearchProps?.customBackIcon?.invoke(coreModifier) ?: Box(
+                            modifier = coreModifier
+                                .size(28.dp)
+                                .border(
+                                    width = 0.2.dp,
+                                    color = headerColor.borderColor,
+                                    shape = CircleShape,
+                                )
+                                .background(color = headerColor.backgroundButton)
+                                .padding(Spacing.XS),
+                        ) {
+                            Icon(
+                                source = "arrow-back",
+                                color = headerColor.tintIconColor,
+                                size = 20.dp,
+                            )
+                        }
+                    }
                 }
             }
 
@@ -341,11 +438,14 @@ private fun LiteScreenLayout(
                         .then(animationOpacityModifier)
                 ) {
                     if (headerRight != null) {
-                        headerRight()
+                        CompositionLocalProvider(LocalHeaderColor provides headerColor) {
+                            headerRight()
+                        }
                     } else {
-                        HeaderRight(
-                            headerRight = headerRightData,
+                        Toolkit(
+                            headerRight = toolkit,
                             tintColor = tintColor,
+                            headerColor = headerColor,
                         )
                     }
                 }
@@ -373,7 +473,128 @@ private fun LiteScreenLayout(
     )
 }
 
+private interface LiteScreenGeometry {
+    fun MeasureScope.safeWidth(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetLeft: Int,
+        insetRight: Int,
+    ): Int
+
+    fun MeasureScope.searchStartX(
+        screenLayout: ScreenLayout,
+        insetLeft: Int,
+        spacing: Int,
+    ): Int
+
+    fun MeasureScope.headerHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int): Int
+    fun MeasureScope.headerRightStartX(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetRight: Int,
+        spacing: Int,
+        rightWidth: Int,
+    ): Int
+
+    fun MeasureScope.collapsedHeaderHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int): Int
+
+    fun MeasureScope.searchStartY(
+        screenLayout: ScreenLayout,
+        headerY: Int,
+        statusBar: Int,
+        rowHeight: Int,
+    ): Int
+}
+
+private class StandardPhoneLiteScreenGeometry : LiteScreenGeometry {
+    override fun MeasureScope.safeWidth(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetLeft: Int,
+        insetRight: Int,
+    ) = (width - insetLeft - insetRight).coerceAtLeast(0)
+
+    override fun MeasureScope.searchStartX(screenLayout: ScreenLayout, insetLeft: Int, spacing: Int) =
+        insetLeft + spacing
+
+    override fun MeasureScope.headerHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int) =
+        statusBar + rowHeight
+    override fun MeasureScope.collapsedHeaderHeight(
+        screenLayout: ScreenLayout,
+        statusBar: Int,
+        rowHeight: Int,
+    ) = statusBar + rowHeight
+    override fun MeasureScope.headerRightStartX(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetRight: Int,
+        spacing: Int,
+        rightWidth: Int,
+    ) = width - insetRight - spacing - rightWidth
+
+    override fun MeasureScope.searchStartY(
+        screenLayout: ScreenLayout,
+        headerY: Int,
+        statusBar: Int,
+        rowHeight: Int,
+    ) = headerY + statusBar
+}
+
+private class IPhoneDuoLiteScreenGeometry : LiteScreenGeometry {
+    override fun MeasureScope.safeWidth(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetLeft: Int,
+        insetRight: Int,
+    ): Int {
+        val clearance = screenLayout.statusBarClearance
+        return (
+            width - insetLeft - insetRight -
+                (clearance?.left?.roundToPx() ?: 0) -
+                (clearance?.right?.roundToPx() ?: 0)
+            ).coerceAtLeast(0)
+    }
+
+    override fun MeasureScope.searchStartX(screenLayout: ScreenLayout, insetLeft: Int, spacing: Int) =
+        insetLeft + (screenLayout.statusBarClearance?.left?.roundToPx() ?: 0) + spacing
+
+    override fun MeasureScope.headerHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int): Int {
+        val rowTop = screenLayout.headerStatusBarHeight +
+            (screenLayout.headerBarHeight - rowHeight.toDp()) / 2
+        return max(screenLayout.headerHeight.roundToPx(), rowTop.roundToPx() + rowHeight)
+    }
+    override fun MeasureScope.collapsedHeaderHeight(
+        screenLayout: ScreenLayout,
+        statusBar: Int,
+        rowHeight: Int,
+    ) = (
+        screenLayout.headerStatusBarHeight +
+            (screenLayout.headerBarHeight - rowHeight.toDp()) / 2
+        ).roundToPx() + rowHeight
+    override fun MeasureScope.headerRightStartX(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetRight: Int,
+        spacing: Int,
+        rightWidth: Int,
+    ) = width - insetRight -
+        (screenLayout.statusBarClearance?.right?.roundToPx() ?: 0) -
+        spacing - rightWidth
+
+    override fun MeasureScope.searchStartY(
+        screenLayout: ScreenLayout,
+        headerY: Int,
+        statusBar: Int,
+        rowHeight: Int,
+    ) = headerY + (
+        screenLayout.headerStatusBarHeight +
+            (screenLayout.headerBarHeight - rowHeight.toDp()) / 2
+        ).roundToPx()
+}
+
 private class LiteScreenLayoutPolicy(
+    private val screenLayout: ScreenLayout,
+    private val applySafeAreaPadding: Boolean,
     private val useAnimationSearch: Boolean,
     private val isHeaderNone: Boolean,
     private val isHeaderExtend: Boolean,
@@ -385,6 +606,11 @@ private class LiteScreenLayoutPolicy(
     private val verticalArrangement: Arrangement.Vertical,
     private val horizontalAlignment: Alignment.Horizontal,
 ) : MeasurePolicy {
+    private val geometry = if (screenLayout.isIPhoneDuo) {
+        IPhoneDuoLiteScreenGeometry()
+    } else {
+        StandardPhoneLiteScreenGeometry()
+    }
 
     val searchStartPosition: IntOffset by lazy {
         if (animationOption == null) return@lazy IntOffset.Zero
@@ -407,11 +633,16 @@ private class LiteScreenLayoutPolicy(
 
         val contentMeasurable = measurables.find { it.layoutId == HeaderId.CONTENT_ID }
 
+        val insetLeft = if (applySafeAreaPadding) screenLayout.insetLeft.roundToPx() else 0
+        val insetRight = if (applySafeAreaPadding) screenLayout.insetRight.roundToPx() else 0
+        val safeLayoutWidth = with(geometry) {
+            safeWidth(screenLayout, constraints.maxWidth, insetLeft, insetRight)
+        }
+        val searchStartX = with(geometry) { searchStartX(screenLayout, insetLeft, spacing12) }
         val realConstraints = constraints.copy(
             minWidth = 0,
             minHeight = 0,
-            maxWidth = (constraints.maxWidth - spacing12 * 2)
-                .coerceAtLeast(0),
+            maxWidth = (safeLayoutWidth - spacing12 * 2).coerceAtLeast(0),
         )
         val backIconPlaceable =
             measurables.find { it.layoutId == HeaderId.BACK_ID }?.measure(realConstraints)
@@ -421,9 +652,10 @@ private class LiteScreenLayoutPolicy(
                     maxWidth = realConstraints.maxWidth / 2,
                 )
             )
+        val headerBackWidth = if (screenLayout.sideBar == null) backIconPlaceable.safeWidth else 0
         val baseInputSearchConstraints = if (isHeaderExtend) {
             val minWidth =
-                if (useAnimationSearch) realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
+                if (useAnimationSearch) realConstraints.maxWidth - headerBackWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
                 else realConstraints.maxWidth
             realConstraints.copy(
                 maxWidth = (realConstraints.maxWidth * (1 - scrollPercent)).toInt()
@@ -431,7 +663,7 @@ private class LiteScreenLayoutPolicy(
             )
         } else {
             var spaceConsumed = 0
-            if (backIconPlaceable.safeWidth != 0) spaceConsumed += backIconPlaceable.safeWidth + spaceBetween
+            if (headerBackWidth != 0) spaceConsumed += headerBackWidth + spaceBetween
             if (headerRightPlaceable.safeWidth != 0) spaceConsumed += headerRightPlaceable.safeWidth + spaceBetween
             realConstraints.copy(
                 maxWidth = realConstraints.maxWidth - spaceConsumed
@@ -442,28 +674,34 @@ private class LiteScreenLayoutPolicy(
             ?.measure(inputSearchConstraints)
         val titlePlaceable = measurables.find { it.layoutId == HeaderId.TITLE_ID }?.measure(
             constraints = realConstraints.copy(
-                maxWidth = realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
+                maxWidth = realConstraints.maxWidth - headerBackWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
             )
         )
 
         /**
          * replicate logic from [vn.momo.kits.navigation.component.HeaderBackground]
          * */
-        var defaultHeight = statusBarPx + headerRowDefault
+        var defaultHeight = with(geometry) { headerHeight(screenLayout, statusBarPx, headerRowDefault) }
         if (isHeaderExtend) {
-            defaultHeight = 154.dp.roundToPx()
+            defaultHeight = if (screenLayout.isIPhoneDuo) {
+                max(defaultHeight, 154.dp.roundToPx())
+            } else {
+                154.dp.roundToPx()
+            }
         }
         val headerHeight = when {
             isHeaderNone -> statusBarPx
             !useAnimationSearch && !isHeaderExtend -> defaultHeight
             else -> {
-                val collapsableSpace = defaultHeight - statusBarPx - headerRowDefault
+                val collapsableSpace = defaultHeight -
+                    with(geometry) { collapsedHeaderHeight(screenLayout, statusBarPx, headerRowDefault) }
                 (defaultHeight - scrollPercent * collapsableSpace).toInt()
             }
         }
 
         val layoutWidth = constraints.maxWidth
         val layoutHeight = constraints.maxHeight
+        val backgroundInsetLeft = if (!applySafeAreaPadding && screenLayout.sideBar != null) screenLayout.insetLeft.roundToPx() else 0
         val contentHeight = (layoutHeight - headerHeight).coerceAtLeast(0)
         val contentPlaceable = contentMeasurable?.measure(
             constraints.copy(
@@ -500,8 +738,10 @@ private class LiteScreenLayoutPolicy(
         ) {
             val progress = animationOption?.progress?.value ?: 1f
 
-            val startX = spacing12
-            val startY = headerY + statusBarPx
+            val startX = searchStartX
+            val startY = with(geometry) {
+                searchStartY(screenLayout, headerY, statusBarPx, headerRowDefault)
+            }
             var curX = startX
             var curY = startY
 
@@ -515,27 +755,46 @@ private class LiteScreenLayoutPolicy(
             )
 
             backgroundPlaceable?.place(
-                x = 0,
+                x = -backgroundInsetLeft,
                 y = headerY,
             )
 
             if (backIconPlaceable != null) {
-                backIconPlaceable.place(
-                    x = startX,
-                    y = startY + backIconPlaceable.verticalCenterOffset(headerRowDefault),
-                )
-                curX += backIconPlaceable.safeWidth + spaceBetween
+                val sideBar = screenLayout.sideBar
+                if (sideBar == null) {
+                    backIconPlaceable.place(
+                        x = startX,
+                        y = startY + backIconPlaceable.verticalCenterOffset(headerRowDefault),
+                    )
+                    curX += backIconPlaceable.safeWidth + spaceBetween
+                } else {
+                    val x = when (sideBar.edge) {
+                        SideBarEdge.LEFT -> insetLeft - screenLayout.insetLeft.roundToPx() + sideBar.width.roundToPx() - spacing12 - backIconPlaceable.width
+                        SideBarEdge.RIGHT -> layoutWidth + (if (applySafeAreaPadding) 0 else screenLayout.insetRight.roundToPx()) - sideBar.width.roundToPx() + spacing12
+                    }
+                    backIconPlaceable.place(
+                        x = x,
+                        y = sideBar.top.roundToPx() + (DuoMetrics.controlSize.roundToPx() - backIconPlaceable.height) / 2,
+                    )
+                }
             }
-
             headerRightPlaceable?.place(
-                x = layoutWidth - spacing12 - headerRightPlaceable.safeWidth,
+                x = with(geometry) {
+                    headerRightStartX(
+                        screenLayout,
+                        layoutWidth,
+                        insetRight,
+                        spacing12,
+                        headerRightPlaceable.safeWidth,
+                    )
+                },
                 y = startY + headerRightPlaceable.verticalCenterOffset(headerRowDefault),
             )
 
             val titleOffset = IntOffset(
                 x = if (titlePosition == TitlePosition.LEFT) curX
-                else titlePlaceable.horizontalCenterOffset(
-                    space = layoutWidth,
+                else searchStartX - spacing12 + titlePlaceable.horizontalCenterOffset(
+                    space = safeLayoutWidth - spacing12 * 2,
                     layoutDirection = layoutDirection,
                 ),
                 y = startY + titlePlaceable.verticalCenterOffset(headerRowDefault),
@@ -543,7 +802,7 @@ private class LiteScreenLayoutPolicy(
 
             titlePlaceable?.place(titleOffset)
 
-            if (backIconPlaceable != null || headerRightPlaceable != null || titlePlaceable != null) {
+            if ((backIconPlaceable != null && screenLayout.sideBar == null) || headerRightPlaceable != null || titlePlaceable != null) {
                 curY += headerRowDefault
             }
 
@@ -553,7 +812,7 @@ private class LiteScreenLayoutPolicy(
                     startY + inputSearchPlaceable.verticalCenterOffset(headerRowDefault)
                 )
                 IntOffset(
-                    x = startX + ((backIconPlaceable.safeWidth + spaceBetween) * (scrollPercent * 2f).coerceIn(
+                    x = startX + ((headerBackWidth + spaceBetween) * (scrollPercent * 2f).coerceIn(
                         0f, 1f
                     )).toInt(),
                     y = y,
@@ -686,11 +945,8 @@ private fun LiteInputSearch(
     val interactionSource = remember { MutableInteractionSource() }
     val textState by remember { inputSearchProps.textFieldState }
 
-    val isShowBtnText by remember(inputSearchProps.isShowBtnText, inputSearchProps.btnText) {
-        derivedStateOf {
-            inputSearchProps.isShowBtnText && !inputSearchProps.btnText.isNullOrEmpty()
-        }
-    }
+    val isShowBtnText = inputSearchProps.isShowBtnText &&
+        !inputSearchProps.btnText.isNullOrEmpty()
     val inputFieldFontFamily = getFontFamily(theme.font, Typography.bodyDefaultRegular.fontWeight)
     val inputFieldStyle = remember(theme, inputFieldFontFamily) {
         Typography.bodyDefaultRegular.copy(
@@ -732,12 +988,8 @@ private fun LiteInputSearch(
                         inputSearchProps.clearCondition?.invoke() == true || (isFocused.value && textState.isNotEmpty())
                     }
                 }
-                val placeHolder by produceState<String?>(null, inputSearchProps.placeHolder) {
-                    if (inputSearchProps.placeHolder.isNullOrEmpty()) return@produceState
-                    snapshotFlow { textState }.collectLatest {
-                        value = if (it.isEmpty()) inputSearchProps.placeHolder else null
-                    }
-                }
+                val placeHolder = inputSearchProps.placeHolder
+                    ?.takeIf { textState.isEmpty() }
                 val iconRightModifier = remember {
                     Modifier
                         .padding(start = Spacing.L)
@@ -780,7 +1032,7 @@ private fun LiteInputSearch(
                     ) {
                         if (!placeHolder.isNullOrEmpty()) {
                             inputSearchProps.customPlaceHolder?.invoke() ?: Text(
-                                text = placeHolder ?: "",
+                                text = placeHolder,
                                 style = inputSearchProps.customTextStyle
                                     ?: Typography.bodyDefaultRegular,
                                 maxLines = 1,
@@ -808,7 +1060,7 @@ private fun LiteInputSearch(
 
         if (isShowBtnText) {
             Text(
-                text = inputSearchProps.btnText ?: "",
+                text = inputSearchProps.btnText,
                 style = Typography.actionDefaultBold,
                 color = theme.colors.text.default,
                 modifier = Modifier.padding(start = Spacing.L)
@@ -817,15 +1069,3 @@ private fun LiteInputSearch(
         }
     }
 }
-
-fun Modifier.hideKeyboardOnTap() = composed {
-    val focusManager = LocalFocusManager.current
-    val keyboardManager = LocalSoftwareKeyboardController.current
-
-    pointerInput(Unit) {
-        detectTapGestures {
-            keyboardManager?.hide()
-            focusManager.clearFocus()
-        }
-    }
-}