fix(mobile): unify draft and thread navigation and composer behavior (#23467)

Author: juliusmarminge

apps/mobile/modules/t3-composer-editor/ios/T3ComposerEditorView.swift

@@ -467,7 +467,8 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro
   public required init(appContext: AppContext? = nil) {
     super.init(appContext: appContext)
 
-    clipsToBounds = false
+    clipsToBounds = true
+    textView.clipsToBounds = true
     textView.delegate = self
     textView.textDropDelegate = self
     textView.backgroundColor = .clear
@@ -1215,28 +1216,16 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro
   }
 
   private func emitContentSizeIfNeeded() {
-    // The laid-out text without insets. A one-line draft reports its natural width, so
-    // JS can tell whether it fits a narrower row than the one it is laid out in; past
-    // one line only the height matters, so layout stops at the second line. The width
-    // comes from the line fragment because usedRect spans the container once the view
-    // scrolls. A trailing newline's empty line only exists as the extra fragment.
-    let layout = textView.layoutManager
-    let container = textView.textContainer
-    var lines = 0
-    var width: CGFloat = 0
-    var height: CGFloat = 0
-    let glyphs = NSRange(location: 0, length: layout.numberOfGlyphs)
-    layout.enumerateLineFragments(forGlyphRange: glyphs) { _, used, _, _, stop in
-      lines += 1
-      width = used.width
-      height = used.maxY
-      if lines > 1 { stop.pointee = true }
-    }
-    if lines < 2, layout.extraLineFragmentTextContainer === container {
-      lines += 1
-      height = max(height, layout.extraLineFragmentUsedRect.maxY)
-    }
-    let nextSize = CGSize(width: lines == 1 ? ceil(width) : 0, height: ceil(height))
+    guard bounds.width > 0 else { return }
+    // Fit independently of the animated viewport: when scrolling is disabled,
+    // its current height can clip TextKit's laid-out line fragments.
+    let fittedHeight = textView.sizeThatFits(CGSize(width: bounds.width, height: .greatestFiniteMagnitude)).height
+      - textView.textContainerInset.top - textView.textContainerInset.bottom
+    let measuredHeight = min(lineHeight * 4, fittedHeight)
+    let width = fittedHeight <= lineHeight + 0.5
+      ? textView.layoutManager.usedRect(for: textView.textContainer).width
+      : 0
+    let nextSize = CGSize(width: ceil(width), height: ceil(measuredHeight))
     guard abs(nextSize.width - lastContentSize.width) > 0.5 ||
       abs(nextSize.height - lastContentSize.height) > 0.5 else {
       return

apps/mobile/modules/t3-native-controls/ios/Resources/Icons/pull-request.png

@@ -15,5 +15,6 @@ Pod::Spec.new do |s|
   s.pod_target_xcconfig = {
     'DEFINES_MODULE' => 'YES',
   }
+  s.resource_bundles = { 'T3NativeControlIcons' => ['Resources/Icons/pull-request*.png'] }
   s.source_files = '**/*.{h,m,mm,swift,hpp,cpp}'
 end

apps/mobile/modules/t3-native-controls/ios/Resources/Icons/pull-request@2x.png

@@ -32,6 +32,14 @@ public final class T3NativeControlsModule: Module {
       Prop("appearance") { (view: T3SegmentedControlView, value: String) in view.appearance = value }
     }
 
+    View(T3SidebarTabBarView.self) {
+      ViewName("SidebarTabBar")
+      Events("onSelectionChange")
+      Prop("selectedIndex") { (view: T3SidebarTabBarView, value: Int) in view.selectedIndex = value }
+      Prop("selectedColor") { (view: T3SidebarTabBarView, value: UIColor) in view.selectedColor = value }
+      Prop("appearance") { (view: T3SidebarTabBarView, value: String) in view.appearance = value }
+    }
+
     View(T3LayoutMetricsView.self) {
       ViewName("LayoutMetrics")
       Events("onMetricsChange")

apps/mobile/modules/t3-native-controls/ios/Resources/Icons/pull-request@3x.png

@@ -0,0 +1,60 @@
+import ExpoModulesCore
+import UIKit
+
+final class T3SidebarTabBarView: ExpoView, UITabBarDelegate {
+  let onSelectionChange = EventDispatcher()
+  private let tabBar = UITabBar()
+  var selectedIndex = 0 { didSet { updateSelection() } }
+  var selectedColor: UIColor = .systemBlue { didSet { tabBar.tintColor = selectedColor } }
+  var appearance = "light" {
+    didSet { overrideUserInterfaceStyle = appearance == "dark" ? .dark : .light }
+  }
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    let iconBundle = Bundle(for: Self.self).url(forResource: "T3NativeControlIcons", withExtension: "bundle").flatMap(Bundle.init(url:))
+    let pullRequestIcon = UIImage(named: "pull-request", in: iconBundle, compatibleWith: nil)?.withRenderingMode(.alwaysTemplate)
+    tabBar.items = [
+      UITabBarItem(title: "Threads", image: tabIcon(UIImage(systemName: "text.bubble")), tag: 0),
+      UITabBarItem(title: "Pulls", image: tabIcon(pullRequestIcon), tag: 1),
+    ]
+    tabBar.items?.last?.accessibilityLabel = "Pull requests"
+    tabBar.items?.first?.selectedImage = tabIcon(UIImage(systemName: "text.bubble.fill"))
+    tabBar.itemPositioning = .fill
+    tabBar.delegate = self
+    addSubview(tabBar)
+    updateSelection()
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    tabBar.frame = bounds
+    updateSelection()
+  }
+
+  override func didMoveToWindow() {
+    super.didMoveToWindow()
+    updateSelection()
+  }
+
+  // Give symbols and bitmap assets the same image box; UIKit otherwise scales symbols independently.
+  private func tabIcon(_ image: UIImage?) -> UIImage? {
+    guard let image else { return nil }
+    let canvas = CGSize(width: 28, height: 28)
+    let scale = min(24 / image.size.width, 24 / image.size.height)
+    let size = CGSize(width: image.size.width * scale, height: image.size.height * scale)
+    return UIGraphicsImageRenderer(size: canvas).image { _ in
+      image.draw(in: CGRect(x: (canvas.width - size.width) / 2, y: (canvas.height - size.height) / 2, width: size.width, height: size.height))
+    }.withRenderingMode(.alwaysTemplate)
+  }
+
+  private func updateSelection() {
+    guard let items = tabBar.items, items.indices.contains(selectedIndex) else { return }
+    guard tabBar.selectedItem !== items[selectedIndex] else { return }
+    tabBar.selectedItem = items[selectedIndex]
+  }
+
+  func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
+    onSelectionChange(["index": item.tag])
+  }
+}

apps/mobile/modules/t3-native-controls/ios/T3NativeControls.podspec

@@ -6,7 +6,7 @@ import { StatusBar } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import { createStaticNavigation } from "@react-navigation/native";
+import { createStaticNavigation, getStateFromPath } from "@react-navigation/native";
 
 import { RegistryContext } from "@effect/atom-react";
 import { ThreadArrangementHost } from "./features/threads/ThreadArrangementSheet";
@@ -24,7 +24,7 @@ import { subscribeComposerDraftModelReconciliation } from "./state/use-composer-
 import { environmentThreadShells } from "./state/threads";
 import { environmentShell } from "./state/shell";
 import { OverlayPortalHost } from "./components/ui/OverlayPortal";
-import { shouldHandleAppLink } from "./lib/appLinking";
+import { shouldHandleAppLink, restoreDraftLinkState } from "./lib/appLinking";
 import { useMobileNavigationTheme } from "./lib/useMobileNavigationTheme";
 import { useUiRuntimeMemoryWarningGc } from "./lib/useUiRuntimeMemoryWarningGc";
 import { SubscriptionUsageCoordinator } from "./widgets/SubscriptionUsageCoordinator";
@@ -44,6 +44,8 @@ const appLinking = {
   prefixes: [Linking.createURL("/"), "t3code://", "t3code-dev://", "t3code-preview://"],
   config: { initialRouteName: "Home" },
   filter: shouldHandleAppLink,
+  getStateFromPath: (path: string, options: Parameters<typeof getStateFromPath>[1]) =>
+    restoreDraftLinkState(getStateFromPath(path, options), path),
 };
 
 const Navigation = createStaticNavigation(RootStack);