@comergehq/studio 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",

package/src/components/chat/ChatPage.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { View, type ViewStyle } from 'react-native';
+import { Keyboard, Platform, View, type ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Animated, { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated';
 
 import type { ChatMessage } from '../models/types';
 import { useTheme } from '../../theme';
@@ -37,7 +39,37 @@ export function ChatPage({
   listRef,
 }: ChatPageProps) {
   const theme = useTheme();
+  const insets = useSafeAreaInsets();
   const [composerHeight, setComposerHeight] = React.useState(0);
+  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
+  const animatedKeyboard = useAnimatedKeyboard();
+
+  React.useEffect(() => {
+    if (Platform.OS !== 'ios') return;
+
+    const show = Keyboard.addListener('keyboardWillShow', () => setKeyboardVisible(true));
+    const hide = Keyboard.addListener('keyboardWillHide', () => setKeyboardVisible(false));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+
+  const footerBottomPadding = Platform.OS === 'ios' ? (keyboardVisible ? 0 : insets.bottom) : insets.bottom + 10;
+  const footerAnimatedStyle = useAnimatedStyle(() => {
+    if (Platform.OS !== 'ios') return { paddingBottom: insets.bottom + 10 };
+    return { paddingBottom: animatedKeyboard.height.value > 0 ? 0 : insets.bottom };
+  });
+  const overlayBottom = composerHeight + footerBottomPadding + theme.spacing.lg;
+
+  const resolvedOverlay = React.useMemo(() => {
+    if (!overlay) return null;
+    if (!React.isValidElement(overlay)) return overlay;
+    const prevStyle = (overlay.props as any)?.style;
+    return React.cloneElement(overlay as any, {
+      style: [prevStyle, { bottom: overlayBottom }],
+    });
+  }, [overlay, overlayBottom]);
   return (
     <View style={[{ flex: 1 }, style]}>
       {header ? <View>{header}</View> : null}
@@ -53,15 +85,30 @@ export function ChatPage({
           showTypingIndicator={showTypingIndicator}
           renderMessageContent={renderMessageContent}
           onNearBottomChange={onNearBottomChange}
-          contentStyle={{ paddingBottom: theme.spacing.xl + composerHeight }}
+          contentStyle={{ paddingBottom: theme.spacing.xl + composerHeight + footerBottomPadding }}
         />
-        {overlay}
+        {resolvedOverlay}
+
+        <Animated.View
+          style={[
+            {
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              paddingHorizontal: theme.spacing.lg,
+              paddingTop: theme.spacing.sm,
+            },
+            footerAnimatedStyle,
+          ]}
+        >
+          <ChatComposer
+            {...composer}
+            attachments={composer.attachments ?? []}
+            onLayout={({ height }) => setComposerHeight(height)}
+          />
+        </Animated.View>
       </View>
-      <ChatComposer
-        {...composer}
-        attachments={composer.attachments ?? []}
-        onLayout={({ height }) => setComposerHeight(height)}
-      />
     </View>
   );
 }

package/src/components/studio-sheet/StudioBottomSheet.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import { Keyboard, Platform, View } from 'react-native';
 import BottomSheet, { type BottomSheetBackgroundProps, type BottomSheetProps } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -67,8 +67,17 @@ export function StudioBottomSheet({
   const internalSheetRef = React.useRef<BottomSheet | null>(null);
   const resolvedSheetRef = sheetRef ?? internalSheetRef;
 
-  // Gorhom BottomSheet `index` is not reliably "fully controlled" across versions.
-  // Ensure the visual sheet actually opens/closes when `open` changes (e.g. via header X button).
+  React.useEffect(() => {
+    if (Platform.OS !== 'ios') return;
+    const sub = Keyboard.addListener('keyboardDidHide', () => {
+      const sheet = resolvedSheetRef.current;
+      if (!sheet || !open) return;
+      const targetIndex = snapPoints.length - 1;
+      setTimeout(() => sheet.snapToIndex(targetIndex), 10);
+    });
+    return () => sub.remove();
+  }, [open, resolvedSheetRef, snapPoints.length]);
+
   React.useEffect(() => {
     const sheet = resolvedSheetRef.current;
     if (!sheet) return;
@@ -101,7 +110,7 @@ export function StudioBottomSheet({
         <StudioSheetBackground {...props} renderBackground={background?.renderBackground} />
       )}
       topInset={insets.top}
-      bottomInset={insets.bottom}
+      bottomInset={0}
       handleIndicatorStyle={{ backgroundColor: theme.colors.handleIndicator }}
       onChange={handleChange}
       {...bottomSheetProps}

package/src/studio/ui/StudioOverlay.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Keyboard, View, useWindowDimensions } from 'react-native';
+import { Keyboard, Platform, View, useWindowDimensions } from 'react-native';
 
 import type { App } from '../../data/apps/types';
 import type { MergeRequest } from '../../data/merge-requests/types';
@@ -117,8 +117,24 @@ export function StudioOverlay({
   }, [openSheet]);
 
   const backToPreview = React.useCallback(() => {
+    if (Platform.OS !== 'ios') {
+      Keyboard.dismiss();
+      setActivePage('preview');
+      return;
+    }
+
+    let done = false;
+    const finalize = () => {
+      if (done) return;
+      done = true;
+      sub.remove();
+      clearTimeout(t);
+      setActivePage('preview');
+    };
+
+    const sub = Keyboard.addListener('keyboardDidHide', finalize);
+    const t = setTimeout(finalize, 350);
     Keyboard.dismiss();
-    setActivePage('preview');
   }, []);
 
   const startDraw = React.useCallback(() => {