fix(mobile): restore Android chat content corners (#23989)

Co-authored-by: maria-rcks <maria@kuuro.net>

Author: PixPMusic

apps/mobile/src/features/threads/NewTaskDraftScreen.tsx

@@ -1067,18 +1067,21 @@ export function NewTaskDraftScreen(props: {
 
   if (!flow.selectedModel) {
     return (
-      <ThreadScreenFallback>
-        <AppBar
-          title="New thread"
-          sidebar={false}
-          onBack={goBack}
-          options={{
-            ...threadHeaderAppearance(NATIVE_LIQUID_GLASS_SUPPORTED),
-            unstable_headerSubtitle: undefined,
-            unstable_headerRightItems: () => [],
-            unstable_headerToolbarItems: () => [],
-          }}
-        />
+      <ThreadScreenFallback
+        header={
+          <AppBar
+            title="New thread"
+            sidebar={false}
+            onBack={goBack}
+            options={{
+              ...threadHeaderAppearance(NATIVE_LIQUID_GLASS_SUPPORTED),
+              unstable_headerSubtitle: undefined,
+              unstable_headerRightItems: () => [],
+              unstable_headerToolbarItems: () => [],
+            }}
+          />
+        }
+      >
         <View className="flex-1 justify-end gap-3 p-4">
           {environmentControl}
           <Text className="text-foreground-muted">

apps/mobile/src/features/threads/ThreadScreenHost.tsx

@@ -6,12 +6,12 @@ import {
   useSyncExternalStore,
   type ReactNode,
 } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { ThreadDetailScreen, type ThreadDetailScreenProps } from "./ThreadDetailScreen";
 
 type ThreadScreenContent =
   | { readonly props: ThreadDetailScreenProps }
-  | { readonly fallback: ReactNode };
+  | { readonly fallback: ReactNode; readonly header?: ReactNode };
 
 function createThreadScreenStore() {
   let current: ThreadScreenContent | null = null;
@@ -36,13 +36,16 @@ function ThreadScreenOutlet() {
   const store = useContext(ThreadScreenContext)!;
   const content = useSyncExternalStore(store.subscribe, store.getSnapshot);
   if (content === null) return null;
-  return "props" in content ? (
+  const body = "props" in content ? <ThreadDetailScreen {...content.props} /> : content.fallback;
+  return (
     <>
-      {content.props.header}
-      <ThreadDetailScreen {...content.props} />
+      {"props" in content ? content.props.header : content.header}
+      {Platform.OS === "android" ? (
+        <View className="flex-1 overflow-hidden rounded-t-[28px] bg-thread-canvas">{body}</View>
+      ) : (
+        body
+      )}
     </>
-  ) : (
-    content.fallback
   );
 }
 
@@ -53,7 +56,7 @@ export function ThreadScreenHost({ children }: { readonly children: ReactNode })
   return (
     <ThreadScreenContext.Provider value={store}>
       {children}
-      <View className="flex-1 bg-screen android:overflow-hidden android:rounded-t-[28px] android:bg-thread-canvas">
+      <View className="flex-1 bg-screen android:bg-header">
         <ThreadScreenOutlet />
       </View>
     </ThreadScreenContext.Provider>
@@ -68,10 +71,16 @@ export function ThreadScreenBinding(props: ThreadDetailScreenProps) {
   return null;
 }
 
-export function ThreadScreenFallback({ children }: { readonly children: ReactNode }) {
+export function ThreadScreenFallback({
+  children,
+  header,
+}: {
+  readonly children: ReactNode;
+  readonly header?: ReactNode;
+}) {
   const store = useContext(ThreadScreenContext)!;
   useLayoutEffect(() => {
-    store.publish({ fallback: children });
+    store.publish({ fallback: children, header });
   });
   return null;
 }