@momo-kits/native-kits 0.167.1-beta.9 → 0.167.1-duo-search.1-debug

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

@@ -0,0 +1,304 @@
+//
+//  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 this far above the window bottom.
+    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 }
+    }
+}
+
+/// Rail plus the QR button under it; compressed, the rail is a single button.
+func duoRailHeight(itemCount: Int, hasQr: Bool, compressed: Bool = false) -> CGFloat {
+    let count = CGFloat(itemCount)
+    let rail = compressed ? itemSize : railPadding * 2 + count * itemSize + max(count - 1, 0) * railGap
+    return rail + (hasQr ? Spacing.M + itemSize : 0)
+}
+
+extension ScreenLayout {
+    func duoTabBarInsets(itemCount: Int, hasFloatingButton: Bool, tabBarCompressed: Bool = false) -> DuoTabBarInsets {
+        guard isIPhoneDuo else { return DuoTabBarInsets() }
+        guard let sideBar else {
+            return DuoTabBarInsets(overlay: duoFloatingTabBarHeight + Spacing.M)
+        }
+        let rail = duoRailHeight(itemCount: itemCount, hasQr: hasFloatingButton, compressed: tabBarCompressed)
+        return DuoTabBarInsets(sideBarReserve: sideBar.bottom + rail + DuoBarCompression.groupGap)
+    }
+}
+
+/// 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
+    var compression = DuoBarCompression()
+
+    @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, compression: compression)
+        } 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).
+/// When the side bar is short it can shrink to one button showing the current tab
+/// (HIG "Tab bar compressed"); tapping it expands the rail and compresses the toolbar.
+private struct DuoRailTabBar: View {
+    let sideBar: SideBarLayout
+    let items: [BottomTabItem]
+    let floatingButton: BottomTabFloatingButton?
+    let selectedIndex: Int
+    let onTabSelected: (Int) -> Void
+    let compression: DuoBarCompression
+
+    @Environment(\.appTheme) private var theme
+
+    private var isRight: Bool { sideBar.edge == .right }
+
+    var body: some View {
+        VStack(spacing: Spacing.M) {
+            if compression.tabBarCompressed, items.indices.contains(selectedIndex) {
+                SwiftUI.Button(action: compression.expandTabBar) {
+                    DuoTabIcon(item: items[selectedIndex], selected: true)
+                        .frame(width: itemSize, height: itemSize)
+                        .contentShape(Circle())
+                }
+                .buttonStyle(.plain)
+                .modifier(DuoBarMaterial(shape: Circle()))
+                .accessibilityLabel(items[selectedIndex].label)
+                .accessibilityIdentifier("bottom_tab_bar")
+            } else {
+                rail
+            }
+
+            if let floatingButton {
+                DuoQrButton(data: floatingButton, size: itemSize)
+            }
+        }
+        .padding(isRight ? .leading : .trailing, Spacing.M)
+        .frame(width: sideBar.width, alignment: isRight ? .leading : .trailing)
+        .padding(.bottom, sideBar.bottom)
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: isRight ? .bottomTrailing : .bottomLeading)
+        .ignoresSafeArea()
+    }
+
+    /// Glass column of tab items with the sliding selection bubble.
+    private var rail: some View {
+        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)
+                        compression.onTabSelected()
+                    } 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")
+    }
+}
+
+/// 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

@@ -10,7 +10,6 @@
 
 import SwiftUI
 
-@available(iOS 16.0, *)
 public struct HeaderUserView: View {
     private let data: HeaderUserData
 
@@ -20,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 {
@@ -105,7 +107,6 @@ public struct HeaderUserView: View {
 
 /// Mirrors Compose's `AvatarGroup`: lays out 1..4 avatars in a fixed collage,
 /// falls back to initials when empty, and shows a "+n" overflow tile beyond 4.
-@available(iOS 16.0, *)
 private struct AvatarGroup: View {
     let urls: [String]
     let title: String
@@ -187,7 +188,6 @@ private struct AvatarGroup: View {
     }
 }
 
-@available(iOS 16.0, *)
 private struct InitialsAvatar: View {
     let name: String
     let size: CGFloat

package/ios/Application/Navigation/NavigationContainer.swift

@@ -3,9 +3,8 @@
 //  MoMoUIKits
 //
 //  SwiftUI mirror of Compose's NavigationContainer.
-//  Wraps NavigationStack, injects Navigator into the environment, and renders
-//  every registered screen inside `Screen(options)` chrome — same auto-wrap
-//  behavior as Compose's StackScreen.
+//  Wraps NavigationStack (iOS 16+), injects Navigator into the environment, and renders
+//  every registered screen inside `StackScreen` chrome built from its options.
 //
 
 import SwiftUI
@@ -55,40 +54,23 @@ public struct NavigationContainer<Initial: View>: View {
     }
 
     public var body: some View {
-        NavigationStack(path: $navigator.path) {
-            screenView(for: navigator.rootRoute)
-                .navigationDestination(for: DynamicScreenRoute.self) { route in
-                    screenView(for: route)
-                }
-        }
-        .environmentObject(navigator)
-        .environmentObject(applicationEnvironment)
-        .environment(\.applicationEnvironment, applicationEnvironment)
-        // AI-GENERATED START: route Localize + font-scale injection through the observing modifiers
-        .momoLocalize(localize)
-        .momoFontScale(context: applicationEnvironment.applicationContext)
-        // AI-GENERATED END: route Localize + font-scale injection through the observing modifiers
-        .fullScreenCover(item: $navigator.presented) { route in
-            screenView(forDialog: route)
-                .environmentObject(navigator)
-                .environmentObject(applicationEnvironment)
-                .environment(\.applicationEnvironment, applicationEnvironment)
-                // AI-GENERATED START: route Localize + font-scale injection through the observing modifiers
-                .momoLocalize(localize)
-                .momoFontScale(context: applicationEnvironment.applicationContext)
-                // AI-GENERATED END: route Localize + font-scale injection through the observing modifiers
-        }
-        .overlay {
-            if let item = navigator.overplay {
-                OverplayHost(item: item)
-                    .environmentObject(navigator)
-                    .environmentObject(applicationEnvironment)
-                    .environment(\.applicationEnvironment, applicationEnvironment)
-                    // AI-GENERATED START: route Localize + font-scale injection through the observing modifiers
-                    .momoLocalize(localize)
-                    .momoFontScale(context: applicationEnvironment.applicationContext)
-                    // AI-GENERATED END: route Localize + font-scale injection through the observing modifiers
-            }
+        withKitEnvironment(
+            stack(path: $navigator.path, root: navigator.rootRoute)
+                .overlay { overplayLayer(presentedId: nil) }
+        )
+        .fullScreenCover(item: Binding(
+            get: { navigator.coverRoute },
+            // A close that bypasses the navigator (e.g. `dismiss()`) still tears the flow down.
+            // SwiftUI also writes nil after a navigator-driven close; by then a new screen may
+            // already be queued, so only a cover that is still showing counts.
+            set: { if $0 == nil, navigator.coverRoute != nil { navigator.dismiss() } }
+        )) { route in
+            withKitEnvironment(
+                stack(path: $navigator.presentedPath, root: DynamicScreenRoute(id: route.id))
+                    .overlay { overplayLayer(presentedId: route.id) }
+            )
+            .onAppear { navigator.coverDidAppear() }
+            .onDisappear { navigator.coverDidDisappear() }
         }
         .onAppear {
             if navigator.composeApi == nil {
@@ -109,10 +91,23 @@ public struct NavigationContainer<Initial: View>: View {
             // AI-GENERATED END: demote the MaxApi language pull to a seed of last resort
         }
         .onDisappear {
+            // Our own cover hides the stack without leaving it; host back must still reach it.
+            guard navigator.presented == nil else { return }
             NavigatorManager.shared.remove(navigator)
         }
     }
 
+    private func stack(path: Binding<[DynamicScreenRoute]>, root: DynamicScreenRoute) -> some View {
+        NavigationStack(path: path) {
+            screenView(for: root)
+                // A reset swaps the root in place; without the id it would inherit the old root's state.
+                .id(root.id)
+                .navigationDestination(for: DynamicScreenRoute.self) { route in
+                    screenView(for: route)
+                }
+        }
+    }
+
     @ViewBuilder
     private func screenView(for route: DynamicScreenRoute) -> some View {
         if let screen = navigator.registry.getScreen(id: route.id) {
@@ -123,14 +118,23 @@ public struct NavigationContainer<Initial: View>: View {
         }
     }
 
+    /// Each context draws only the overplays shown over it, so one never re-mounts elsewhere.
     @ViewBuilder
-    private func screenView(forDialog route: DynamicDialogRoute) -> some View {
-        if let screen = navigator.registry.getScreen(id: route.id) {
-            ScreenHost(screen: screen, navigator: navigator)
-        } else {
-            EmptyView()
+    private func overplayLayer(presentedId: Int?) -> some View {
+        if let item = navigator.overplay, item.presentedId == presentedId {
+            OverplayHost(item: item)
+                .momoScreenLayout()
         }
     }
+
+    private func withKitEnvironment<Content: View>(_ content: Content) -> some View {
+        content
+            .environmentObject(navigator)
+            .environmentObject(applicationEnvironment)
+            .environment(\.applicationEnvironment, applicationEnvironment)
+            .momoLocalize(localize)
+            .momoFontScale(context: applicationEnvironment.applicationContext)
+    }
 }
 
 // MARK: - ScreenHost
@@ -167,6 +171,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()
     }
 }