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

package/ios/Application/Navigation/BottomTab/DuoTabBar.swift

@@ -0,0 +1,275 @@
+//
+//  DuoTabBar.swift
+//  MoMoUIKits
+//
+//  iPhone Duo tab bar, port of RN `BottomTab/DuoTabBar.tsx` (Figma Fold-Design-System MT1/MT2):
+//  a glass rail in the side bar, or a floating glass bar when unfolded portrait.
+//
+
+import SwiftUI
+
+private let itemSize = DuoMetrics.controlSize
+private let iconSize: CGFloat = 28
+private let qrIconSize: CGFloat = 24
+private let railPadding: CGFloat = 6
+private let railGap = Spacing.XXS
+// selection bubble overflows the 48 rail cell by 5 above and below (Figma MT2)
+private let railBubbleWidth: CGFloat = 44
+private let railBubbleHeight: CGFloat = 58
+let duoFloatingTabBarHeight: CGFloat = 62
+private let floatingPadding = Spacing.XS
+private let floatingQrSize: CGFloat = 44
+// floating bar spans 6 of the 8 portrait grid columns, like the content
+private let gridColumns: CGFloat = 8
+private let gridSpan: CGFloat = 6
+private let tabSpring = Animation.interpolatingSpring(mass: 0.8, stiffness: 220, damping: 18)
+
+/// Room tab screens leave for the Duo tab bar, provided by BottomTab to its tab StackScreens.
+struct DuoTabBarInsets: Equatable {
+    /// Floating bar overlays the content: scroll content, footer and FAB keep clear of it.
+    var overlay: CGFloat = 0
+    /// Rail sits at the bottom of the side strip: the header side bar stays above it.
+    var sideBarReserve: CGFloat = 0
+}
+
+private struct DuoTabBarInsetsKey: EnvironmentKey {
+    static let defaultValue = DuoTabBarInsets()
+}
+
+extension EnvironmentValues {
+    var duoTabBarInsets: DuoTabBarInsets {
+        get { self[DuoTabBarInsetsKey.self] }
+        set { self[DuoTabBarInsetsKey.self] = newValue }
+    }
+}
+
+extension ScreenLayout {
+    func duoTabBarInsets(itemCount: Int, hasFloatingButton: Bool) -> DuoTabBarInsets {
+        guard isIPhoneDuo else { return DuoTabBarInsets() }
+        guard sideBar != nil else {
+            return DuoTabBarInsets(overlay: duoFloatingTabBarHeight + Spacing.M)
+        }
+        let count = CGFloat(itemCount)
+        let rail = railPadding * 2 + count * itemSize + max(count - 1, 0) * railGap
+        let qr = hasFloatingButton ? Spacing.M + itemSize : 0
+        return DuoTabBarInsets(sideBarReserve: rail + qr + Spacing.XL)
+    }
+}
+
+/// Glass on iOS 26, a system blur before it (RN GlassView's fallback).
+struct DuoBarMaterial<S: Shape>: ViewModifier {
+    let shape: S
+    var visible: Bool = true
+
+    func body(content: Content) -> some View {
+        content.background(material.allowsHitTesting(false))
+    }
+
+    @ViewBuilder
+    private var material: some View {
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) {
+            // glass materializes by toggling its effect, it does not fade with opacity
+            Color.clear
+                .glassEffect(visible ? .regular : .identity, in: shape)
+                .shadow(color: Color.black.opacity(visible ? 0.16 : 0), radius: 16, x: 0, y: 6)
+                .animation(.easeInOut(duration: 0.25), value: visible)
+        } else {
+            blur
+        }
+        #else
+        blur
+        #endif
+    }
+
+    private var blur: some View {
+        shape.fill(.regularMaterial)
+            .shadow(color: Color.black.opacity(0.16), radius: 16, x: 0, y: 6)
+            .opacity(visible ? 1 : 0)
+            .animation(.easeInOut(duration: 0.25), value: visible)
+    }
+}
+
+struct DuoTabBar: View {
+    let items: [BottomTabItem]
+    let floatingButton: BottomTabFloatingButton?
+    let selectedIndex: Int
+    let onTabSelected: (Int) -> Void
+
+    @Environment(\.screenLayout) private var layout
+
+    var body: some View {
+        if let sideBar = layout.sideBar {
+            DuoRailTabBar(sideBar: sideBar, items: items, floatingButton: floatingButton,
+                          selectedIndex: selectedIndex, onTabSelected: onTabSelected)
+        } else {
+            DuoFloatingTabBar(items: items, floatingButton: floatingButton,
+                              selectedIndex: selectedIndex, onTabSelected: onTabSelected)
+        }
+    }
+}
+
+/// Vertical bar anchored to the bottom of the side bar, QR button below it (Figma MT1-C/E).
+private struct DuoRailTabBar: View {
+    let sideBar: SideBarLayout
+    let items: [BottomTabItem]
+    let floatingButton: BottomTabFloatingButton?
+    let selectedIndex: Int
+    let onTabSelected: (Int) -> Void
+
+    @Environment(\.appTheme) private var theme
+
+    private var isRight: Bool { sideBar.edge == .right }
+
+    var body: some View {
+        VStack(spacing: Spacing.M) {
+            ZStack(alignment: .top) {
+                Capsule()
+                    .fill(theme.colors.background.selected)
+                    .frame(width: railBubbleWidth, height: railBubbleHeight)
+                    .offset(y: railPadding - (railBubbleHeight - itemSize) / 2
+                        + CGFloat(selectedIndex) * (itemSize + railGap))
+                    .animation(tabSpring, value: selectedIndex)
+
+                VStack(spacing: railGap) {
+                    ForEach(items.indices, id: \.self) { index in
+                        SwiftUI.Button { onTabSelected(index) } label: {
+                            DuoTabIcon(item: items[index], selected: index == selectedIndex)
+                                .frame(width: itemSize, height: itemSize)
+                                .contentShape(Rectangle())
+                        }
+                        .buttonStyle(.plain)
+                        .accessibilityLabel(items[index].label)
+                    }
+                }
+                .padding(.vertical, railPadding)
+            }
+            .frame(width: itemSize)
+            .modifier(DuoBarMaterial(shape: RoundedRectangle(cornerRadius: Radius.XL)))
+            .accessibilityIdentifier("bottom_tab_bar")
+
+            if let floatingButton {
+                DuoQrButton(data: floatingButton, size: itemSize)
+            }
+        }
+        .padding(isRight ? .leading : .trailing, Spacing.M)
+        .frame(width: sideBar.width, alignment: isRight ? .leading : .trailing)
+        .padding(.bottom, Spacing.XL)
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: isRight ? .bottomTrailing : .bottomLeading)
+        .ignoresSafeArea()
+    }
+}
+
+/// Floating labelled bar for the unfolded portrait display, QR in the middle cell (Figma MT1-M).
+private struct DuoFloatingTabBar: View {
+    let items: [BottomTabItem]
+    let floatingButton: BottomTabFloatingButton?
+    let selectedIndex: Int
+    let onTabSelected: (Int) -> Void
+
+    @Environment(\.screenLayout) private var layout
+    @Environment(\.appTheme) private var theme
+
+    private var barWidth: CGFloat {
+        let columnWidth = (layout.width - 2 * Spacing.M - (gridColumns - 1) * Spacing.M) / gridColumns
+        return columnWidth * gridSpan + (gridSpan - 1) * Spacing.M
+    }
+
+    private var useQr: Bool { floatingButton != nil && items.count % 2 == 0 }
+    private var middle: Int { items.count / 2 }
+    private var cellCount: Int { items.count + (useQr ? 1 : 0) }
+    private var cellWidth: CGFloat { (barWidth - floatingPadding * 2) / CGFloat(max(cellCount, 1)) }
+    private var visualIndex: Int { useQr && selectedIndex >= middle ? selectedIndex + 1 : selectedIndex }
+
+    var body: some View {
+        ZStack(alignment: .leading) {
+            Capsule()
+                .fill(theme.colors.background.selected)
+                .frame(width: cellWidth)
+                .offset(x: CGFloat(visualIndex) * cellWidth)
+                .animation(tabSpring, value: visualIndex)
+
+            HStack(spacing: 0) {
+                ForEach(0..<cellCount, id: \.self) { cell in
+                    if useQr && cell == middle, let floatingButton {
+                        DuoQrButton(data: floatingButton, size: floatingQrSize)
+                            .frame(width: cellWidth)
+                    } else {
+                        let index = useQr && cell > middle ? cell - 1 : cell
+                        tabCell(index)
+                    }
+                }
+            }
+        }
+        .padding(floatingPadding)
+        .frame(width: barWidth, height: duoFloatingTabBarHeight)
+        .modifier(DuoBarMaterial(shape: Capsule()))
+        .accessibilityIdentifier("bottom_tab_bar")
+        .padding(.bottom, layout.insets.bottom + Spacing.M)
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
+        .ignoresSafeArea()
+    }
+
+    private func tabCell(_ index: Int) -> some View {
+        let selected = index == selectedIndex
+        return SwiftUI.Button { onTabSelected(index) } label: {
+            VStack(spacing: Spacing.XXS) {
+                DuoTabIcon(item: items[index], selected: selected)
+                MomoText(
+                    items[index].label,
+                    typography: .labelXsMedium,
+                    color: selected ? theme.colors.primary : theme.colors.text.default,
+                    textAlign: .center,
+                    maxLines: 1
+                )
+            }
+            .frame(width: cellWidth)
+            .frame(maxHeight: .infinity)
+            .contentShape(Rectangle())
+        }
+        .buttonStyle(.plain)
+        .accessibilityLabel(items[index].label)
+    }
+}
+
+private struct DuoTabIcon: View {
+    let item: BottomTabItem
+    let selected: Bool
+
+    @Environment(\.appTheme) private var theme
+
+    private var badgeLabel: String? {
+        guard let label = item.badgeLabel else { return nil }
+        if let n = Int(label), n == 0 { return nil }
+        return label
+    }
+
+    var body: some View {
+        Icon(source: item.icon, size: iconSize, color: selected ? theme.colors.primary : theme.colors.text.default)
+            .overlay(alignment: .topTrailing) {
+                if let badgeLabel, !badgeLabel.isEmpty {
+                    Badge(label: badgeLabel).offset(x: Spacing.S, y: -Spacing.XS)
+                } else if badgeLabel != nil || item.showDot {
+                    BadgeDot(size: .small)
+                }
+            }
+    }
+}
+
+private struct DuoQrButton: View {
+    let data: BottomTabFloatingButton
+    let size: CGFloat
+
+    @Environment(\.appTheme) private var theme
+
+    var body: some View {
+        SwiftUI.Button(action: data.onPress) {
+            Circle()
+                .fill(theme.colors.primary)
+                .frame(width: size, height: size)
+                .overlay(Icon(source: data.icon, size: qrIconSize, color: Colors.black01))
+        }
+        .buttonStyle(.plain)
+        .accessibilityLabel(data.label)
+    }
+}

package/ios/Application/Navigation/HeaderUser.swift

@@ -20,8 +20,11 @@ public struct HeaderUserView: View {
 
     private let avatarSize: CGFloat = Spacing.XXL // 32
 
+    @Environment(\.screenLayout) private var layout
+
+    // back button and toolkit share the bar unless the iPhone Duo side bar holds them
     private var maxWidth: CGFloat {
-        UIScreen.main.bounds.width - 172
+        layout.sideBar != nil ? layout.contentWidth - Spacing.M * 2 : layout.width - 172
     }
 
     public var body: some View {

package/ios/Application/Navigation/NavigationContainer.swift

@@ -88,6 +88,7 @@ public struct NavigationContainer<Initial: View>: View {
                     .momoLocalize(localize)
                     .momoFontScale(context: applicationEnvironment.applicationContext)
                     // AI-GENERATED END: route Localize + font-scale injection through the observing modifiers
+                    .momoScreenLayout()
             }
         }
         .onAppear {
@@ -167,6 +168,8 @@ private struct ScreenHost: View {
             screenName: screen.name,
             content: { screen.content() }
         )
+        // Per screen, not around the NavigationStack: a state-driven reader there stops path pushes rendering.
+        .momoScreenLayout()
     }
 }
 

package/ios/Application/Navigation/Overplay/BottomSheet.swift

@@ -45,6 +45,7 @@ struct BottomSheetView<Content: View>: View {
     @EnvironmentObject private var navigator: Navigator
     @Environment(\.appTheme) private var theme
     @Environment(\.applicationEnvironment) private var appEnv
+    @Environment(\.screenLayout) private var layout
 
     /// Vertical translation of the sheet; starts off-screen and animates to 0.
     @State private var sheetOffset: CGFloat = UIScreen.main.bounds.height
@@ -66,7 +67,36 @@ struct BottomSheetView<Content: View>: View {
     /// steady-state (fully open) scrim peaks at 0.6, matching ModalScreen's peak.
     private let maxDynamicAlpha: CGFloat = 0.3
 
-    private var screenHeight: CGFloat { UIScreen.main.bounds.height }
+    // UIScreen stays on the outer display on iPhone Duo, even when unfolded
+    private var screenHeight: CGFloat { isDuo ? layout.height : UIScreen.main.bounds.height }
+
+    private var isDuo: Bool { layout.isDuoDevice }
+    // iPhone Duo inner display: center the sheet instead of spanning the width
+    private var isDuoCentered: Bool { isDuo && layout.width >= 600 }
+
+    /// Keeps the portrait width in landscape, like system sheets.
+    private var duoCenteredWidth: CGFloat {
+        min(
+            min(layout.width, layout.height) - Spacing.L * 2,
+            layout.width - max(layout.insets.leading, layout.insets.trailing, Spacing.L) * 2
+        )
+    }
+
+    /// Landscape side buttons span the full height, so the content is inset; in portrait the
+    /// side status bar only covers the top corner.
+    private var sideInsetLeading: CGFloat {
+        isDuo && !isDuoCentered && layout.width > layout.height ? layout.insets.leading : 0
+    }
+
+    private var sideInsetTrailing: CGFloat {
+        isDuo && !isDuoCentered && layout.width > layout.height ? layout.insets.trailing : 0
+    }
+
+    /// The keyboard filler is part of the sheet, so capping the sheet shrinks the content by it.
+    private var duoMaxHeight: CGFloat? {
+        guard isDuo else { return nil }
+        return layout.height - max(layout.duoTopInset, Spacing.XL)
+    }
     private var bottomInset: CGFloat { safeAreaBottomInset() }
     /// While the keyboard is up, it already covers the home-indicator area, so it
     /// replaces (rather than adds to) the usual bottom-inset filler.
@@ -110,7 +140,7 @@ struct BottomSheetView<Content: View>: View {
         .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillChangeFrameNotification)) { notification in
             guard let endFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
             withAnimation(.easeOut(duration: 0.25)) {
-                keyboardHeight = UIScreen.main.bounds.height - endFrame.origin.y
+                keyboardHeight = screenHeight - endFrame.origin.y
             }
         }
         .onAppear {
@@ -138,6 +168,8 @@ struct BottomSheetView<Content: View>: View {
                 headerView
                     .frame(height: 56)
                     .padding(.horizontal, Spacing.M)
+                    .padding(.leading, sideInsetLeading)
+                    .padding(.trailing, sideInsetTrailing)
             }
             .frame(maxWidth: .infinity)
             .frame(height: 72)
@@ -149,12 +181,17 @@ struct BottomSheetView<Content: View>: View {
                 .frame(height: 1)
 
             content()
+                .padding(.leading, sideInsetLeading)
+                .padding(.trailing, sideInsetTrailing)
+                // a tall sheet on iPhone Duo keeps its header and gives the content what is left
+                .layoutPriority(-1)
 
             backgroundColor
                 .frame(height: effectiveBottomInset)
         }
-        .frame(maxWidth: .infinity)
-        .frame(alignment: .bottom)
+        .frame(maxWidth: isDuoCentered ? duoCenteredWidth : .infinity)
+        .frame(maxHeight: duoMaxHeight, alignment: .bottom)
+        .clipped()
         .background(
             GeometryReader { geo in
                 Color.clear.onAppear { sheetHeight = geo.size.height }

package/ios/Application/Navigation/Overplay/ModalScreen.swift

@@ -16,6 +16,7 @@ struct ModalScreen<Content: View>: View {
 
     @EnvironmentObject private var navigator: Navigator
     @Environment(\.applicationEnvironment) private var appEnv
+    @Environment(\.screenLayout) private var layout
 
     @State private var scrimOpacity: CGFloat = 0
     @State private var contentScale: CGFloat = 0.8
@@ -35,8 +36,11 @@ struct ModalScreen<Content: View>: View {
             content()
                 .scaleEffect(contentScale)
                 .opacity(contentOpacity)
+                // iPhone Duo: center below the side status bar and above the home indicator
+                .padding(.top, layout.isDuoDevice ? layout.duoTopInset : 0)
+                .padding(.bottom, layout.isDuoDevice ? layout.insets.bottom : 0)
         }
-        // Center on the full screen like Compose; landscape safe areas are asymmetric (camera on one side).
+        // Full screen like RN's Modal, so asymmetric landscape insets don't shift the content sideways.
         .frame(maxWidth: .infinity, maxHeight: .infinity)
         .ignoresSafeArea(.container)
         .onAppear {

package/ios/Application/Navigation/component/DuoScrollGradient.swift

@@ -0,0 +1,55 @@
+//
+//  DuoScrollGradient.swift
+//  MoMoUIKits
+//
+//  Port of RN `DuoScrollGradient` (Components/DuoGlassBackground.tsx): with the iPhone Duo
+//  glass header the content scrolls under the bar, so the header gradient is drawn under it.
+//
+
+import SwiftUI
+
+// extended headers run their gradient this far below the header, as off Duo
+private let extendedGradientExtra: CGFloat = 52
+// scroll distance over which the extended gradient collapses to the header
+private let extendedCollapseDistance: CGFloat = 100
+
+struct DuoScrollGradient: View {
+    let scrollOffset: CGFloat
+    let headerHeight: CGFloat
+    let extended: Bool
+
+    @Environment(\.appTheme) private var theme
+    @Environment(\.screenLayout) private var layout
+
+    private var scroll: CGFloat { max(scrollOffset, 0) }
+
+    private var gradient: LinearGradient {
+        LinearGradient(
+            colors: [theme.colors.gradient, theme.colors.gradient.opacity(0)],
+            startPoint: .top,
+            endPoint: .bottom
+        )
+    }
+
+    var body: some View {
+        Group {
+            if extended {
+                // extended squeezes the whole fade into its box and fades out
+                let progress = min(scroll / extendedCollapseDistance, 1)
+                gradient
+                    .frame(height: headerHeight + extendedGradientExtra * (1 - progress))
+                    .opacity(1 - min(scroll / extendedGradientExtra, 1))
+            } else {
+                // default keeps the off-Duo 375:154 shape, the header clips it, and scrolls away
+                gradient
+                    .frame(height: layout.width * 154 / 375)
+                    .frame(height: headerHeight, alignment: .top)
+                    .clipped()
+                    .offset(y: -scroll)
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
+        .ignoresSafeArea()
+        .allowsHitTesting(false)
+    }
+}

package/ios/Application/Navigation/component/Header.swift

@@ -60,7 +60,11 @@ public struct NavigationHeader: View {
         self.titleOpacity = titleOpacity
     }
 
+    @Environment(\.screenLayout) private var layout
+
     private var isAnimated: Bool { animatedHeader != nil }
+    /// iPhone Duo side bar holds back and the toolkit; a custom header right stays in the bar.
+    private var useSideBar: Bool { layout.sideBar != nil }
     private var isSurface: Bool { animatedHeader?.isSurface ?? true }
 
     private var headerColor: HeaderColor {
@@ -79,7 +83,7 @@ public struct NavigationHeader: View {
         if headerType != .none {
             ZStack {
                 HStack(spacing: 0) {
-                    if let goBack {
+                    if let goBack, !useSideBar {
                         BackButton(color: headerColor, onBack: goBack)
                         Spacer().frame(width: Spacing.S)
                     }
@@ -91,7 +95,7 @@ public struct NavigationHeader: View {
                             .frame(maxWidth: .infinity, alignment: .leading)
                     }
 
-                    if let headerRight {
+                    if let headerRight, !(useSideBar && toolkitHeaderRight(headerRight) != nil) {
                         AnyView(headerRight())
                             .background(
                                 GeometryReader { geo in
@@ -107,8 +111,10 @@ public struct NavigationHeader: View {
                         .padding(.horizontal, Spacing.M)
                 }
             }
-            .frame(height: HEADER_HEIGHT)
+            .frame(height: layout.headerBarHeight)
             .overlay(alignment: .bottom) { VerticalShadow(opacity: opacity) }
+            // status bar off the top edge: the row spans the whole header from the window top
+            .padding(.top, min(layout.headerStatusBarHeight - layout.insets.top, 0))
         }
     }
 

package/ios/Application/Navigation/component/HeaderBackground.swift

@@ -43,10 +43,11 @@ public struct NavigationHeaderBackground: View {
         )
     }
 
+    @Environment(\.screenLayout) private var layout
+
     public var body: some View {
-        let statusBarHeight = safeAreaTopInset()
         let opacity = max(0, 1 - scrollState / CGFloat(HEADER_HEIGHT))
-        let minHeight = fullScreenContent ? 0 : statusBarHeight + HEADER_HEIGHT
+        let minHeight = fullScreenContent ? 0 : layout.headerHeight
         let maxHeight: CGFloat = 154
         let backgroundColor = headerTransparent ? Color.clear : Colors.black01
         let topColor = opacity == 0 ? backgroundColor : Color(hex: 0xFDCADE)

package/ios/Application/Navigation/component/NavigationFooter.swift

@@ -69,7 +69,7 @@ public struct NavigationFooter: View {
             .padding(.bottom, Self.bottomPadding)
             // Compose paints the surface all the way to the bottom of the screen; the
             // footer's own frame stops at the safe area, so only the fill bleeds down.
-            .background(theme.colors.background.surface.ignoresSafeArea(.container, edges: .bottom))
+            .background(theme.colors.background.surface.ignoresSafeArea(.container, edges: [.bottom, .horizontal]))
             .overlay(alignment: .top) { shadow }
             .offset(y: Self.verticalOffset(keyboardSize: keyboardSize))
         }

package/ios/Application/Navigation/component/NavigationHeaderRight.swift

@@ -26,6 +26,8 @@ public struct NavigationHeaderRight: View {
 struct ToolkitNavigationHeaderRight: View {
     var headerRight: HeaderRightData?
     var tintColor: Color?
+    /// iPhone Duo side bar column instead of the bar row.
+    var vertical: Bool = false
     @State private var isFavorite: Bool = false
     @State private var isLoading: Bool = false
     @Environment(\.applicationEnvironment) private var environment
@@ -142,15 +144,68 @@ struct ToolkitNavigationHeaderRight: View {
         return NavigationButtonConfig(icon: icon, onPress: onClickHandler)
     }
 
+    private var showHelpCenter: Bool {
+        environment.applicationContext != nil && showsHelpCenter(environment.applicationContext)
+    }
+
+    private var closeIcon: String { headerRight?.closeIcon ?? "16_basic_home" }
+
     var body: some View {
+        Group {
+            if vertical {
+                verticalBody
+            } else {
+                horizontalBody
+            }
+        }
+        .onAppear {
+            loadFavoriteState()
+        }
+    }
+
+    private var showBadge: Bool {
+        headerRight?.tools.contains { group in
+            group.items.contains { $0.showBadge }
+        } ?? false
+    }
+
+    private var verticalBody: some View {
+        let navButtonConfig = getNavigationButtonConfig()
+        return VStack(spacing: Spacing.M) {
+            if shouldShowShortcut {
+                SideBarButton(
+                    icon: navButtonConfig.icon,
+                    tintColor: tintColor,
+                    showBadge: showBadge,
+                    disabled: isLoading,
+                    action: navButtonConfig.onPress
+                )
+            }
+            SideBarGroup(tintColor: tintColor, itemCount: showHelpCenter ? 2 : 1) {
+                if showHelpCenter {
+                    SideBarGroupItem(
+                        icon: "help_center",
+                        tintColor: tintColor,
+                        accessibilityId: "btn_navigation_help_center",
+                        action: onPressHelpCenter
+                    )
+                }
+                SideBarGroupItem(
+                    icon: closeIcon,
+                    tintColor: tintColor,
+                    accessibilityId: "btn_navigation_close",
+                    action: onPressClose
+                )
+            }
+        }
+    }
+
+    private var horizontalBody: some View {
         let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
         let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
         let navButtonConfig = getNavigationButtonConfig()
-        let showBadge = headerRight?.tools.contains { group in
-            group.items.contains { $0.showBadge }
-        } ?? false
 
-        HStack(alignment: .center, spacing: 0) {
+        return HStack(alignment: .center, spacing: 0) {
             if shouldShowShortcut {
                 NavigationButton(
                     disabled: isLoading,
@@ -162,7 +217,7 @@ struct ToolkitNavigationHeaderRight: View {
             }
 
             HStack(alignment: .center, spacing: 0) {
-                if environment.applicationContext != nil {
+                if showHelpCenter {
                     Icon(source: "help_center", size: 20, color: tintColor ?? Colors.black17)
                         .padding(4)
                         .onTapGesture {
@@ -174,7 +229,7 @@ struct ToolkitNavigationHeaderRight: View {
                         .frame(width: 0.5, height: 12)
                 }
 
-                Icon(source: "16_basic_home", size: 20, color: tintColor ?? Colors.black17)
+                Icon(source: closeIcon, size: 20, color: tintColor ?? Colors.black17)
                     .padding(4)
                     .onTapGesture {
                         onPressClose()
@@ -189,8 +244,5 @@ struct ToolkitNavigationHeaderRight: View {
             )
             .padding(.leading, Spacing.S)
         }
-        .onAppear {
-            loadFavoriteState()
-        }
     }
 }