@momo-kits/native-kits 0.167.1-duo.5-debug → 0.167.1-duo.6

package/CLAUDE.md

@@ -61,11 +61,16 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 - Icons are compiled in: `ios/Icon/Icons.swift` is generated from Compose `utils/Icons.kt` by `node scripts/gen-ios-icons.mjs` — don't hand-edit it. A host `icon.json` in the main bundle only adds keys the kit lacks.
 - Bundled assets (colors, Lottie JSON) live in `ios/Resources` and ship in the `MoMoUIKitsResources` bundle; load them through `MoMoUIKitsResources.bundle`, never `Bundle.main`.
 
-## Screen layout / iPhone Duo (port of RN `useScreenLayout`)
+## Screen layout / iPhone Duo (port of RN `useScreenLayout`, momo-kits !664)
 
-- `layout/ScreenLayout.kt`: `getScreenLayout()` returns window size, side safe-area insets, `contentWidth`, header geometry and the iPhone Duo `sideBar`. `NavigationContainer` computes it once and provides `LocalScreenLayout`; reactive to fold/unfold and rotation (window size + `WindowInsets`). Metrics (`DuoMetrics`, 72pt iPhone header floor, 20pt status-bar threshold) mirror RN `Layout/utils.ts` — change both together.
+- `layout/ScreenLayout.kt`: `getScreenLayout()` returns window size, raw top/bottom + side insets, `contentWidth`, header geometry, the iPhone Duo `sideBar` and `duoTopInset`. `NavigationContainer` computes it once and provides `LocalScreenLayout`; reactive to fold/unfold and rotation (window size + `WindowInsets`). Metrics (`DuoMetrics`, 72pt iPhone header floor, 20pt status-bar threshold) mirror RN `Layout/utils.ts` — change both together.
+- iPhone-only: everything gates on `isPhoneIdiom()` (`platform/`), never on "iOS", so iPad windows keep the regular layout. Two detectors, as in RN: `isIPhoneDuo` (window aspect < 1.6 or asymmetric side insets) drives layout; `isIPhoneDuoDevice` (short side of screen or window > 440, RN `device.ts`) drives popups, modal and bottom sheet.
 - Header height is `headerHeight` (not `AppStatusBar + HEADER_HEIGHT`); the bar row is `headerBarHeight`. When the status bar is off the top edge (iPhone landscape, iPhone Duo) `headerStatusBarHeight` is 0 so the title stays centered.
-- iPhone Duo with a side strip ≥ 60pt: back + toolkit leave the bar for `HeaderSideBar` (`navigation/component/SideBar.kt`, 48pt glass controls); custom header-right stays in the bar. The column starts below the camera / status-bar cluster: 170pt portrait, 120pt in any landscape (folded too — RN still uses 170 there), below the header when the status bar is on top; UIKit's `statusBarFrame` is useless on Duo. Unlike RN it is clamped 24pt above footer / tab bar, so a long toolkit (shortcut + group) never covers the footer.
+- iPhone Duo with a side strip ≥ 60pt: back + toolkit leave the bar for `HeaderSideBar` (`navigation/component/SideBar.kt`, 48pt glass controls); custom header-right stays in the bar. The column starts at 120pt when the inner display is landscape (height ≥ 600), else 170pt, or below the header when the status bar is on top; UIKit's `statusBarFrame` is useless on Duo. Unlike RN it is clamped 24pt above footer / tab bar / rail.
+- Tab bar on Duo is `bottomtab/DuoTabBar.kt`: a rail in the side strip (anchored 24pt from the bottom, QR below it) or, without a side bar, a floating bar spanning 6/8 grid columns. Both overlay the content; `duoFloatingTabBarInset` pads tab content, footer and FAB.
+- Glass header: on Duo with a side bar, Default/Extended headers without search and with a `ScrollState` let content scroll under the bar (`usesDuoGlassHeader`); the bar fades in a translucent surface + hairline over 16pt (Compose has no backdrop blur — RN's fallback look), the gradient scrolls away / collapses.
+- Overlays on Duo: popups cap at 440pt wide and the room between `duoTopInset` and the bottom inset (body scrolls, actions stay); modal centers inside that room; bottom sheet uses the window height, centers at width ≥ 600 and pads by side insets in landscape.
+- Font scale deliberately uses the short side (`min(w, h)`), unlike RN which reads the window width — landscape must not inflate every font.
 - `StackScreen` pads content/footer/search/FAB by the side insets and provides an inset-consumed layout to its content; a bottom-tab root stays full width (tab bar + each tab's StackScreen handle insets). Grid columns use `contentWidth`.
 
 ## i18n / Localize (port of RN `Localize`)

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 {
@@ -243,17 +254,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()

package/ios/Application/Layout/ScreenLayout.swift

@@ -0,0 +1,196 @@
+//
+//  ScreenLayout.swift
+//  MoMoUIKits
+//
+//  Port of momo-kits RN `useScreenLayout` (Layout/utils.ts) and `Application/device.ts`:
+//  window size, safe-area insets, content width, header geometry and the iPhone Duo side bar.
+//
+
+import SwiftUI
+import UIKit
+
+public enum SideBarEdge: Equatable {
+    case left, right
+}
+
+public struct SideBarLayout: Equatable {
+    public let edge: SideBarEdge
+    public let width: CGFloat
+    /// Preferred window y of the first control; StackScreen still keeps the column above the bottom bars.
+    public let top: CGFloat
+}
+
+public struct ScreenLayout: Equatable {
+    public let width: CGFloat
+    public let height: CGFloat
+    public let isIPhoneDuo: Bool
+    public let insets: EdgeInsets
+    public let insetLeft: CGFloat
+    public let insetRight: CGFloat
+    public let contentWidth: CGFloat
+    public let headerHeight: CGFloat
+    /// 0 when the status bar is off the top edge, so the bar row fills the header and keeps the title centered.
+    public let headerStatusBarHeight: CGFloat
+    /// iPhone Duo moves back and toolkit into a column in the side safe area; nil while they stay in the bar.
+    public let sideBar: SideBarLayout?
+
+    public var headerBarHeight: CGFloat { headerHeight - headerStatusBarHeight }
+}
+
+// Measured by momo-kits RN (Layout/utils.ts) on the iOS 27.1 iPhone Duo simulator; keep both in sync.
+enum DuoMetrics {
+    // Inner display is ~1.42, outer ~1.45; every slab iPhone is 1.77 or taller.
+    static let maxAspectRatio: CGFloat = 1.6
+    // Outer display is 466pt tall in landscape, inner 669pt.
+    static let innerMinHeight: CGFloat = 600
+    static let controlSize: CGFloat = 48
+    static let itemPitch: CGFloat = 50
+    static let firstItemTop: CGFloat = 170
+    static let firstItemTopLandscape: CGFloat = 120
+    // Widest short side of any single-display iPhone.
+    static let iPhoneMaxShortSide: CGFloat = 440
+}
+
+enum HeaderMetrics {
+    static let barHeight: CGFloat = HEADER_HEIGHT
+    static let iPhoneMinHeight: CGFloat = 72
+    // A smaller top inset means the status bar is not on the top edge.
+    static let statusBarMinInset: CGFloat = 20
+}
+
+private var isPhoneIdiom: Bool { UIDevice.current.userInterfaceIdiom == .phone }
+
+private var keyWindow: UIWindow? {
+    UIApplication.shared.connectedScenes
+        .compactMap { ($0 as? UIWindowScene)?.keyWindow }
+        .first
+}
+
+extension ScreenLayout {
+    /// Snapshot of the key window; not reactive, so views read `\.screenLayout` instead.
+    public static var current: ScreenLayout {
+        guard let window = keyWindow else {
+            return make(size: UIScreen.main.bounds.size, insets: EdgeInsets())
+        }
+        let inset = window.safeAreaInsets
+        return make(
+            size: window.bounds.size,
+            insets: EdgeInsets(top: inset.top, leading: inset.left, bottom: inset.bottom, trailing: inset.right)
+        )
+    }
+
+    static func make(size: CGSize, insets: EdgeInsets, isPhone: Bool = isPhoneIdiom) -> ScreenLayout {
+        let width = size.width
+        let height = size.height
+        let (headerHeight, headerStatusBarHeight) = headerGeometry(topInset: insets.top, isPhone: isPhone)
+        let isDuo = isPhone && isIPhoneDuoWindow(width: width, height: height, insets: insets)
+        guard isDuo else {
+            return ScreenLayout(
+                width: width, height: height, isIPhoneDuo: false, insets: insets,
+                insetLeft: 0, insetRight: 0, contentWidth: width,
+                headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: nil
+            )
+        }
+
+        var sideBar: SideBarLayout?
+        let sideInset = max(insets.leading, insets.trailing)
+        // narrower strips cannot host a control 12pt from the inner edge
+        if sideInset >= DuoMetrics.controlSize + Spacing.M {
+            var top = insets.top + HeaderMetrics.barHeight + Spacing.M
+            if insets.top < HeaderMetrics.statusBarMinInset {
+                // status bar lives in the strip: start under its cluster, as the native bar does
+                let isInnerLandscape = width > height && height >= DuoMetrics.innerMinHeight
+                top = isInnerLandscape ? DuoMetrics.firstItemTopLandscape : DuoMetrics.firstItemTop
+            }
+            sideBar = SideBarLayout(
+                edge: insets.trailing >= insets.leading ? .right : .left,
+                width: sideInset,
+                top: top
+            )
+        }
+
+        return ScreenLayout(
+            width: width, height: height, isIPhoneDuo: true, insets: insets,
+            insetLeft: insets.leading, insetRight: insets.trailing,
+            contentWidth: width - insets.leading - insets.trailing,
+            headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: sideBar
+        )
+    }
+
+    private static func headerGeometry(topInset: CGFloat, isPhone: Bool) -> (CGFloat, CGFloat) {
+        let height = topInset + HeaderMetrics.barHeight
+        guard isPhone else { return (height, topInset) }
+        return (
+            max(height, HeaderMetrics.iPhoneMinHeight),
+            topInset < HeaderMetrics.statusBarMinInset ? 0 : topInset
+        )
+    }
+
+    // Slab iPhones report equal side insets in landscape; iPhone Duo moves the status bar to one side.
+    private static func isIPhoneDuoWindow(width: CGFloat, height: CGFloat, insets: EdgeInsets) -> Bool {
+        let shortSide = min(width, height)
+        let isSquare = shortSide > 0 && max(width, height) / shortSide < DuoMetrics.maxAspectRatio
+        return isSquare || insets.leading != insets.trailing
+    }
+
+    /// Below the side status bar: in portrait it is about twice as tall as its inset is wide.
+    public var duoTopInset: CGFloat {
+        max(insets.top, height > width ? max(insets.leading, insets.trailing) * 2 : 0)
+    }
+}
+
+/// Port of RN `device.ts` `isIPhoneDuo()`: UIScreen stays on the outer display, so this
+/// still matches when Split View narrows the window. Used by popups and overlays.
+public func isIPhoneDuoDevice(windowSize: CGSize? = nil) -> Bool {
+    guard isPhoneIdiom else { return false }
+    let screen = UIScreen.main.bounds.size
+    let window = windowSize ?? keyWindow?.bounds.size ?? screen
+    return max(min(screen.width, screen.height), min(window.width, window.height)) > DuoMetrics.iPhoneMaxShortSide
+}
+
+// MARK: - Environment
+
+private struct ScreenLayoutKey: EnvironmentKey {
+    // Computed so an un-injected subtree (bare UIHostingController) still reads the live window.
+    static var defaultValue: ScreenLayout { .current }
+}
+
+public extension EnvironmentValues {
+    var screenLayout: ScreenLayout {
+        get { self[ScreenLayoutKey.self] }
+        set { self[ScreenLayoutKey.self] = newValue }
+    }
+}
+
+/// Re-reads the window whenever this view's size changes (rotation, fold/unfold, Split View).
+private struct ScreenLayoutReader: ViewModifier {
+    @State private var layout: ScreenLayout = .current
+
+    func body(content: Content) -> some View {
+        content
+            .environment(\.screenLayout, layout)
+            .background(
+                GeometryReader { proxy in
+                    Color.clear
+                        .onAppear { refresh() }
+                        .onChange(of: proxy.size) { _ in refresh() }
+                        .onChange(of: proxy.safeAreaInsets) { _ in refresh() }
+                }
+            )
+            .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
+                refresh()
+            }
+    }
+
+    private func refresh() {
+        let next = ScreenLayout.current
+        if next != layout { layout = next }
+    }
+}
+
+public extension View {
+    /// Provides `\.screenLayout`; NavigationContainer applies it, a bare UIHostingController root should too.
+    func momoScreenLayout() -> some View {
+        modifier(ScreenLayoutReader())
+    }
+}

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

@@ -16,6 +16,7 @@ public struct BottomTab: View {
     private let floatingButton: BottomTabFloatingButton?
 
     @EnvironmentObject private var navigator: Navigator
+    @Environment(\.screenLayout) private var layout
     @State private var selectedIndex: Int = 0
 
     public init(items: [BottomTabItem], floatingButton: BottomTabFloatingButton? = nil) {
@@ -24,7 +25,14 @@ public struct BottomTab: View {
     }
 
     private var bottomInset: CGFloat { safeAreaBottomInset() }
-    private var reservedBottom: CGFloat { BOTTOM_TAB_BAR_HEIGHT + bottomInset + Spacing.S }
+    // the Duo bars overlay the content or sit in the side strip, so only the home indicator is kept clear
+    private var reservedBottom: CGFloat {
+        layout.isIPhoneDuo ? layout.insets.bottom : BOTTOM_TAB_BAR_HEIGHT + bottomInset + Spacing.S
+    }
+
+    private var duoInsets: DuoTabBarInsets {
+        layout.duoTabBarInsets(itemCount: items.count, hasFloatingButton: floatingButton != nil)
+    }
 
     public var body: some View {
         ZStack(alignment: .bottom) {
@@ -38,20 +46,29 @@ public struct BottomTab: View {
                 }
             }
             .padding(.bottom, reservedBottom)
+            .environment(\.duoTabBarInsets, duoInsets)
             .animation(.easeInOut(duration: 0.2), value: selectedIndex)
 
-            // Tab bar + home-indicator filler.
-            VStack(spacing: 0) {
-                BottomTabBar(
+            if layout.isIPhoneDuo {
+                DuoTabBar(
                     items: items,
                     floatingButton: floatingButton,
                     selectedIndex: selectedIndex,
-                    onTabSelected: { index in
-                        if index != selectedIndex { selectedIndex = index }
-                    }
+                    onTabSelected: selectTab
                 )
-                Colors.black01
-                    .frame(height: bottomInset + Spacing.S)
+            } else {
+                // Tab bar + home-indicator filler.
+                VStack(spacing: 0) {
+                    BottomTabBar(
+                        items: items,
+                        floatingButton: floatingButton,
+                        selectedIndex: selectedIndex,
+                        onTabSelected: selectTab
+                    )
+                    Colors.black01
+                        .frame(height: bottomInset + Spacing.S)
+                        .ignoresSafeArea(edges: .horizontal)
+                }
             }
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
@@ -59,6 +76,10 @@ public struct BottomTab: View {
         .preference(key: IsBottomTabRootKey.self, value: true)
     }
 
+    private func selectTab(_ index: Int) {
+        if index != selectedIndex { selectedIndex = index }
+    }
+
     @ViewBuilder
     private func tabScreen(for index: Int) -> some View {
         let item = items[index]

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

@@ -65,7 +65,10 @@ struct BottomTabBar: View {
     let selectedIndex: Int
     let onTabSelected: (Int) -> Void
 
-    private var screenWidth: CGFloat { UIScreen.main.bounds.width }
+    @Environment(\.screenLayout) private var layout
+
+    // the bar sits between the side safe areas
+    private var screenWidth: CGFloat { layout.width - layout.insets.leading - layout.insets.trailing }
     private var mid: Int { items.count / 2 }
 
     private var tabWidth: CGFloat {
@@ -95,7 +98,7 @@ struct BottomTabBar: View {
             }
             .frame(maxWidth: .infinity)
             .frame(height: BOTTOM_TAB_BAR_HEIGHT)
-            .background(Colors.black01)
+            .background(Colors.black01.ignoresSafeArea(edges: .horizontal))
 
             // Animated selection indicator.
             RoundedRectangle(cornerRadius: 2)

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

@@ -19,8 +19,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 {