fix(app): isolate bottom sheet modal scopes

packages/app/src/components/adaptive-modal-sheet.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { forwardRef, useCallback, useEffect, useMemo } from "react";
 import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { Modal, Pressable, ScrollView, Text, TextInput, View } from "react-native";
@@ -7,7 +7,6 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { getOverlayRoot, OVERLAY_Z } from "../lib/overlay-root";
 import {
-  BottomSheetModal,
   BottomSheetBackdrop,
   BottomSheetScrollView,
   BottomSheetTextInput,
@@ -16,6 +15,10 @@ import {
 import { X } from "lucide-react-native";
 import { FileDropZone } from "@/components/file-drop-zone";
 import type { ImageAttachment } from "@/components/message-input";
+import {
+  IsolatedBottomSheetModal,
+  useIsolatedBottomSheetVisibility,
+} from "@/components/ui/isolated-bottom-sheet-modal";
 import { isWeb } from "@/constants/platform";
 
 type EscHandler = () => void;
@@ -163,7 +166,6 @@ export interface AdaptiveModalSheetProps {
   children: ReactNode;
   headerActions?: ReactNode;
   snapPoints?: string[];
-  stackBehavior?: "push" | "switch" | "replace";
   testID?: string;
   /** Override the max width of the desktop card. */
   desktopMaxWidth?: number;
@@ -180,7 +182,6 @@ export function AdaptiveModalSheet({
   children,
   headerActions,
   snapPoints,
-  stackBehavior,
   testID,
   desktopMaxWidth,
   onFilesDropped,
@@ -188,33 +189,13 @@ export function AdaptiveModalSheet({
 }: AdaptiveModalSheetProps) {
   const { theme } = useUnistyles();
   const isMobile = useIsCompactFormFactor();
-  const sheetRef = useRef<BottomSheetModal>(null);
-  const dismissingForVisibilityRef = useRef(false);
+  const titleColor = theme.colors.foreground;
   const resolvedSnapPoints = useMemo(() => snapPoints ?? ["65%", "90%"], [snapPoints]);
-
-  useEffect(() => {
-    if (!isMobile) return;
-    if (visible) {
-      dismissingForVisibilityRef.current = false;
-      sheetRef.current?.present();
-    } else {
-      dismissingForVisibilityRef.current = true;
-      sheetRef.current?.dismiss();
-    }
-  }, [visible, isMobile]);
-
-  const handleSheetChange = useCallback(
-    (index: number) => {
-      if (index === -1) {
-        if (dismissingForVisibilityRef.current) {
-          dismissingForVisibilityRef.current = false;
-          return;
-        }
-        onClose();
-      }
-    },
-    [onClose],
-  );
+  const { sheetRef, handleSheetChange } = useIsolatedBottomSheetVisibility({
+    visible,
+    isEnabled: isMobile,
+    onClose,
+  });
 
   const renderBackdrop = useCallback(
     (props: React.ComponentProps<typeof BottomSheetBackdrop>) => (
@@ -230,7 +211,7 @@ export function AdaptiveModalSheet({
 
   if (isMobile) {
     return (
-      <BottomSheetModal
+      <IsolatedBottomSheetModal
         ref={sheetRef}
         snapPoints={resolvedSnapPoints}
         index={0}
@@ -238,7 +219,6 @@ export function AdaptiveModalSheet({
         onChange={handleSheetChange}
         backdropComponent={renderBackdrop}
         enablePanDownToClose
-        stackBehavior={stackBehavior}
         backgroundComponent={SheetBackground}
         handleIndicatorStyle={{ backgroundColor: theme.colors.surface2 }}
         keyboardBehavior="extend"
@@ -247,7 +227,7 @@ export function AdaptiveModalSheet({
       >
         <View style={styles.bottomSheetHeader} testID={testID}>
           <View style={styles.headerTitleGroup}>
-            <Text style={[styles.title, { color: theme.colors.foreground }]} numberOfLines={1}>
+            <Text key={titleColor} style={[styles.title, { color: titleColor }]} numberOfLines={1}>
               {title}
             </Text>
             {subtitle}
@@ -268,7 +248,7 @@ export function AdaptiveModalSheet({
         ) : (
           <View style={styles.bottomSheetStaticContent}>{children}</View>
         )}
-      </BottomSheetModal>
+      </IsolatedBottomSheetModal>
     );
   }
 
@@ -276,7 +256,7 @@ export function AdaptiveModalSheet({
     <>
       <View style={styles.header}>
         <View style={styles.headerTitleGroup}>
-          <Text style={[styles.title, { color: theme.colors.foreground }]} numberOfLines={1}>
+          <Text key={titleColor} style={[styles.title, { color: titleColor }]} numberOfLines={1}>
             {title}
           </Text>
           {subtitle}