feat(mobile): native compose bar for the chat composer

apps/mobile/modules/scroll-edge-element/README.md

@@ -0,0 +1,15 @@
+# iOS scroll edge element
+
+This local Expo module lets a floating React Native view take part in UIKit's
+scroll edge effect on iOS 26, the way a system toolbar does. It wraps its
+children in a view that carries a `UIScrollEdgeElementContainerInteraction`
+for the nearest sibling scroll view, so UIKit draws the soft edge under it. UIKit shapes that edge when the
+interaction is added, so the `revision` prop re-adds it whenever the
+container's height or the keyboard changes.
+
+The chat composer uses it for the bottom edge; the native header already gives
+the top edge. Before iOS 26 the view is a plain container.
+
+The JavaScript binding lives in `src/ui/primitives/scroll-edge-element.ios.tsx`.
+Builds without this module keep the drawn `EdgeMaterial` fade. **Adding this
+module requires a native rebuild**; an OTA update alone cannot install it.

apps/mobile/modules/scroll-edge-element/expo-module.config.json

@@ -0,0 +1,6 @@
+{
+  "platforms": ["apple"],
+  "apple": {
+    "modules": ["ScrollEdgeElementModule"]
+  }
+}

apps/mobile/modules/scroll-edge-element/ios/ScrollEdgeElement.podspec

@@ -0,0 +1,21 @@
+Pod::Spec.new do |s|
+  s.name           = 'ScrollEdgeElement'
+  s.version        = '1.0.0'
+  s.summary        = 'Registers a floating React Native view as a UIKit scroll edge element.'
+  s.description    = 'Registers a floating React Native view as a UIKit scroll edge element.'
+  s.license        = 'MIT'
+  s.author         = 'BotHarness'
+  s.homepage       = 'https://github.com/BotHarness/DeepSeekBot'
+  s.platforms      = { :ios => '16.4' }
+  s.swift_version  = '5.9'
+  s.source         = { git: 'https://github.com/BotHarness/DeepSeekBot.git' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  s.source_files = '**/*.{h,m,swift}'
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+end

apps/mobile/modules/scroll-edge-element/ios/ScrollEdgeElementModule.swift

@@ -0,0 +1,85 @@
+import ExpoModulesCore
+import UIKit
+
+public final class ScrollEdgeElementModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ScrollEdgeElement")
+
+    View(ScrollEdgeElementView.self) {
+      Prop("edge") { (view: ScrollEdgeElementView, edge: String) in
+        view.edge = edge == "top" ? .top : .bottom
+      }
+      Prop("revision") { (view: ScrollEdgeElementView, _: String) in
+        view.refresh()
+      }
+    }
+  }
+}
+
+final class ScrollEdgeElementView: ExpoView {
+  var edge: UIRectEdge = .bottom {
+    didSet { attach() }
+  }
+
+  private var interaction: UIInteraction?
+
+  override func didMoveToWindow() {
+    super.didMoveToWindow()
+    attach()
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    attach()
+  }
+
+  func refresh() {
+    if let interaction { removeInteraction(interaction) }
+    interaction = nil
+    DispatchQueue.main.async { [weak self] in self?.attach() }
+    DispatchQueue.main.asyncAfter(deadline: .now() + 0.4) { [weak self] in
+      guard let self, let interaction = self.interaction else { return }
+      self.removeInteraction(interaction)
+      self.interaction = nil
+      self.attach()
+    }
+  }
+
+  private func attach() {
+    guard #available(iOS 26.0, *) else { return }
+    guard window != nil, let scrollView = nearestScrollView() else { return }
+    let current = interaction as? UIScrollEdgeElementContainerInteraction
+    if let current, current.scrollView === scrollView, current.edge == edge { return }
+    if let current { removeInteraction(current) }
+    let next = UIScrollEdgeElementContainerInteraction()
+    next.scrollView = scrollView
+    next.edge = edge
+    addInteraction(next)
+    interaction = next
+  }
+
+  private func nearestScrollView() -> UIScrollView? {
+    var child: UIView = self
+    while let parent = child.superview {
+      for sibling in parent.subviews where sibling !== child {
+        if let found = largestScrollView(in: sibling) { return found }
+      }
+      child = parent
+    }
+    return nil
+  }
+
+  private func largestScrollView(in root: UIView) -> UIScrollView? {
+    var best: UIScrollView?
+    var queue: [UIView] = [root]
+    while !queue.isEmpty {
+      let view = queue.removeFirst()
+      if let scrollView = view as? UIScrollView, !(view is UITextView) {
+        if best == nil || scrollView.bounds.height > best!.bounds.height { best = scrollView }
+        continue
+      }
+      queue.append(contentsOf: view.subviews)
+    }
+    return best
+  }
+}

apps/mobile/src/ui/chat/composer-chrome.ios.tsx

@@ -0,0 +1,126 @@
+import { Circle, Host, RoundedRectangle } from '@expo/ui/swift-ui';
+import { accessibilityHidden, foregroundStyle, glassEffect } from '@expo/ui/swift-ui/modifiers';
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { pressTint, useDesignTheme, type DesignTheme } from '../design/theme';
+import { edge, radius, space } from '../design/tokens';
+import { useLiquidGlass } from '../primitives/drawer-material';
+
+export function composerPrimary(theme: DesignTheme): { fill: string; ink: string } {
+  return { fill: theme.color.fg, ink: theme.color.base };
+}
+
+export function composerBar(theme: DesignTheme): number {
+  return theme.touch - space.x2;
+}
+
+export const micAlwaysFilled = true;
+
+export const rippleFeedback = false;
+
+function Glass({ cornerRadius }: { cornerRadius?: number }) {
+  const theme = useDesignTheme();
+  return (
+    <Host
+      key={theme.scheme}
+      style={StyleSheet.absoluteFill}
+      colorScheme={theme.scheme}
+      pointerEvents="none"
+    >
+      {cornerRadius === undefined ? (
+        <Circle
+          modifiers={[
+            foregroundStyle('transparent'),
+            glassEffect({
+              glass: { variant: 'regular', tint: theme.color.surface },
+              shape: 'circle',
+            }),
+            accessibilityHidden(),
+          ]}
+        />
+      ) : (
+        <RoundedRectangle
+          cornerRadius={cornerRadius}
+          modifiers={[
+            foregroundStyle('transparent'),
+            glassEffect({
+              glass: { variant: 'regular', tint: theme.color.surface },
+              shape: 'roundedRectangle',
+              cornerRadius,
+            }),
+            accessibilityHidden(),
+          ]}
+        />
+      )}
+    </Host>
+  );
+}
+
+export function ComposerCircleButton({
+  label,
+  testID,
+  size,
+  onPress,
+  children,
+}: {
+  label: string;
+  testID?: string;
+  size: number;
+  onPress(): void;
+  children: ReactNode;
+}) {
+  const theme = useDesignTheme();
+  const glass = useLiquidGlass();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      testID={testID}
+      onPress={onPress}
+      hitSlop={Math.max(0, (theme.touch - size) / 2)}
+      style={({ pressed }) => ({
+        width: size,
+        height: size,
+        borderRadius: radius.round,
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...(glass
+          ? { backgroundColor: pressed ? pressTint(theme.color.fg) : 'transparent' }
+          : {
+              borderWidth: edge.hairline,
+              borderColor: theme.color.borderStrong,
+              backgroundColor: pressed ? theme.layer.raised.pressed : theme.color.surface,
+            }),
+      })}
+    >
+      {glass ? <Glass /> : null}
+      {children}
+    </Pressable>
+  );
+}
+
+export function ComposerFieldMaterial({ cornerRadius }: { cornerRadius: number }) {
+  const theme = useDesignTheme();
+  const glass = useLiquidGlass();
+  return (
+    <View
+      pointerEvents="none"
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={[
+        StyleSheet.absoluteFill,
+        glass
+          ? undefined
+          : {
+              borderRadius: cornerRadius,
+              borderWidth: edge.hairline,
+              borderColor: theme.color.borderStrong,
+              backgroundColor: theme.color.surface,
+            },
+      ]}
+    >
+      {glass ? <Glass cornerRadius={cornerRadius} /> : null}
+    </View>
+  );
+}

apps/mobile/src/ui/chat/composer-chrome.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { pressTint, useDesignTheme, type DesignTheme } from '../design/theme';
+import { radius } from '../design/tokens';
+
+export function composerPrimary(theme: DesignTheme): { fill: string; ink: string } {
+  return { fill: theme.color.accent, ink: theme.color.onAccent };
+}
+
+export function composerBar(theme: DesignTheme): number {
+  return theme.touch;
+}
+
+export const micAlwaysFilled = false;
+
+export const rippleFeedback = true;
+
+export function ComposerCircleButton({
+  label,
+  testID,
+  size,
+  onPress,
+  children,
+}: {
+  label: string;
+  testID?: string;
+  size: number;
+  onPress(): void;
+  children: ReactNode;
+}) {
+  const theme = useDesignTheme();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      testID={testID}
+      onPress={onPress}
+      android_ripple={{ color: pressTint(theme.color.fg), borderless: true, radius: size / 2 }}
+      style={{
+        width: size,
+        height: size,
+        borderRadius: radius.round,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+export function ComposerFieldMaterial({ cornerRadius }: { cornerRadius: number }) {
+  const theme = useDesignTheme();
+  return (
+    <View
+      pointerEvents="none"
+      accessible={false}
+      importantForAccessibility="no-hide-descendants"
+      style={[
+        StyleSheet.absoluteFill,
+        { borderRadius: cornerRadius, backgroundColor: theme.layer.raised.fill },
+      ]}
+    />
+  );
+}