@comergehq/studio 0.1.28 → 0.1.30

package/src/studio/ui/StudioOverlay.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { Keyboard, Platform, View, useWindowDimensions } from 'react-native';
+import { InteractionManager, Keyboard, Platform, View, useWindowDimensions } from 'react-native';
 
 import type { App } from '../../data/apps/types';
+import type { RelatedApps } from '../../data/apps/types';
 import type { MergeRequest } from '../../data/merge-requests/types';
 import { StudioBottomSheet } from '../../components/studio-sheet/StudioBottomSheet';
 import { StudioSheetPager } from '../../components/studio-sheet/StudioSheetPager';
@@ -70,6 +71,11 @@ export type StudioOverlayProps = {
   onNavigateHome?: () => void;
   showBubble: boolean;
   studioControlOptions?: StudioControlOptions;
+  relatedApps?: RelatedApps | null;
+  relatedAppsLoading?: boolean;
+  switchingRelatedAppId?: string | null;
+  onOpenRelatedApps?: () => void;
+  onSwitchRelatedApp?: (targetAppId: string) => void;
 };
 
 type SheetPage = 'preview' | 'chat';
@@ -110,12 +116,18 @@ export function StudioOverlay({
   onNavigateHome,
   showBubble,
   studioControlOptions,
+  relatedApps,
+  relatedAppsLoading,
+  switchingRelatedAppId,
+  onOpenRelatedApps,
+  onSwitchRelatedApp,
 }: StudioOverlayProps) {
   const theme = useTheme();
   const { width } = useWindowDimensions();
 
   const [sheetOpen, setSheetOpen] = React.useState(false);
   const sheetOpenRef = React.useRef(sheetOpen);
+  const pendingNavigateHomeRef = React.useRef(false);
   const [activePage, setActivePage] = React.useState<SheetPage>('preview');
 
   const [drawing, setDrawing] = React.useState(false);
@@ -214,6 +226,50 @@ export function StudioOverlay({
     [closeSheet, onTestMr]
   );
 
+  const handleNavigateHome = React.useCallback(() => {
+    if (!onNavigateHome) return;
+
+    if (Platform.OS !== 'android') {
+      onNavigateHome();
+      return;
+    }
+
+    // On Android Fabric, navigate only after the sheet fully dismisses.
+    if (!sheetOpenRef.current) {
+      InteractionManager.runAfterInteractions(() => {
+        onNavigateHome();
+      });
+      return;
+    }
+
+    pendingNavigateHomeRef.current = true;
+    Keyboard.dismiss();
+    setActivePage('preview');
+    closeSheet();
+  }, [closeSheet, onNavigateHome]);
+
+  const handleSheetDismiss = React.useCallback(() => {
+    if (Platform.OS !== 'android') return;
+    if (!pendingNavigateHomeRef.current) return;
+    pendingNavigateHomeRef.current = false;
+    InteractionManager.runAfterInteractions(() => {
+      onNavigateHome?.();
+    });
+  }, [onNavigateHome]);
+
+  React.useEffect(() => {
+    if (!sheetOpen) {
+      return;
+    }
+    pendingNavigateHomeRef.current = false;
+  }, [sheetOpen]);
+
+  React.useEffect(() => {
+    return () => {
+      pendingNavigateHomeRef.current = false;
+    };
+  }, []);
+
   React.useEffect(() => {
     sheetOpenRef.current = sheetOpen;
   }, [sheetOpen]);
@@ -236,7 +292,7 @@ export function StudioOverlay({
       {/* Testing glow around runtime */}
       <EdgeGlowFrame visible={isTesting} role="accent" thickness={40} intensity={1} />
 
-      <StudioBottomSheet open={sheetOpen} onOpenChange={handleSheetOpenChange}>
+      <StudioBottomSheet open={sheetOpen} onOpenChange={handleSheetOpenChange} onDismiss={handleSheetDismiss}>
         <StudioSheetPager
           activePage={activePage}
           width={width}
@@ -254,7 +310,7 @@ export function StudioOverlay({
               testingMrId={testingMrId}
               toMergeRequestSummary={toMergeRequestSummary}
               onClose={closeSheet}
-              onNavigateHome={onNavigateHome}
+              onNavigateHome={onNavigateHome ? handleNavigateHome : undefined}
               onGoToChat={goToChat}
               onStartDraw={isOwner ? startDraw : undefined}
               onSubmitMergeRequest={onSubmitMergeRequest}
@@ -266,6 +322,11 @@ export function StudioOverlay({
               onTestMr={handleTestMr}
               onOpenComments={() => setCommentsAppId(app?.id ?? null)}
               commentCountOverride={commentsCount ?? undefined}
+              relatedApps={relatedApps}
+              relatedAppsLoading={relatedAppsLoading}
+              switchingRelatedAppId={switchingRelatedAppId}
+              onOpenRelatedApps={onOpenRelatedApps}
+              onSwitchRelatedApp={onSwitchRelatedApp}
             />
           }
           chat={
@@ -282,7 +343,7 @@ export function StudioOverlay({
               onClearAttachments={() => setChatAttachments([])}
               onBack={backToPreview}
               onClose={closeSheet}
-              onNavigateHome={onNavigateHome}
+              onNavigateHome={onNavigateHome ? handleNavigateHome : undefined}
               onStartDraw={startDraw}
               onSend={optimistic.onSend}
               onRetryMessage={optimistic.onRetry}

package/src/studio/ui/preview-panel/PreviewPanelHeader.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import { ActivityIndicator, Pressable, View } from 'react-native';
 
+import type { RelatedApp, RelatedApps } from '../../../data/apps/types';
 import { StudioSheetHeader } from '../../../components/studio-sheet/StudioSheetHeader';
 import { StudioSheetHeaderIconButton } from '../../../components/studio-sheet/StudioSheetHeaderIconButton';
-import { IconChat, IconClose, IconHome, IconShare } from '../../../components/icons/StudioIcons';
+import { IconChat, IconChevronDown, IconClose, IconHome, IconShare } from '../../../components/icons/StudioIcons';
+import { Modal } from '../../../components/primitives/Modal';
+import { Text } from '../../../components/primitives/Text';
+import { PreviewStatusBadge } from '../../../components/preview/PreviewStatusBadge';
+import { useTheme } from '../../../theme';
 
 export type PreviewPanelHeaderProps = {
   isOwner: boolean;
@@ -12,6 +17,16 @@ export type PreviewPanelHeaderProps = {
   onNavigateHome?: () => void;
   onGoToChat: () => void;
   onShare?: () => void;
+  relatedApps?: RelatedApps | null;
+  relatedAppsLoading?: boolean;
+  switchingRelatedAppId?: string | null;
+  onOpenRelatedApps?: () => void;
+  onSwitchRelatedApp?: (targetAppId: string) => void;
+};
+
+type RelatedAppListItem = {
+  app: RelatedApp;
+  section: 'original' | 'remix';
 };
 
 export function PreviewPanelHeader({
@@ -21,47 +36,207 @@ export function PreviewPanelHeader({
   onNavigateHome,
   onGoToChat,
   onShare,
+  relatedApps,
+  relatedAppsLoading,
+  switchingRelatedAppId,
+  onOpenRelatedApps,
+  onSwitchRelatedApp,
 }: PreviewPanelHeaderProps) {
-  return (
-    <StudioSheetHeader
-      left={
-        onNavigateHome ? (
-          <StudioSheetHeaderIconButton onPress={onNavigateHome} accessibilityLabel="Home" appearance="glass" intent="primary">
-            <IconHome size={20} colorToken="onPrimary" />
-          </StudioSheetHeaderIconButton>
-        ) : null
+  const theme = useTheme();
+  const [relatedAppsOpen, setRelatedAppsOpen] = React.useState(false);
+
+  const relatedAppItems = React.useMemo((): RelatedAppListItem[] => {
+    if (!relatedApps) return [];
+    const items: RelatedAppListItem[] = [];
+    if (relatedApps.original) {
+      items.push({ app: relatedApps.original, section: 'original' });
+    }
+    for (const remix of relatedApps.remixes) {
+      items.push({ app: remix, section: 'remix' });
+    }
+    return items;
+  }, [relatedApps]);
+
+  const uniqueRelatedCount = React.useMemo(() => {
+    return new Set(relatedAppItems.map((item) => item.app.id)).size;
+  }, [relatedAppItems]);
+
+  const shouldShowRelatedApps = uniqueRelatedCount >= 2;
+
+  const currentAppId = relatedApps?.current.id;
+  const originalAppId = relatedApps?.original?.id ?? null;
+
+  const sectionedRelatedApps = React.useMemo(() => {
+    const original: RelatedAppListItem[] = [];
+    const remixes: RelatedAppListItem[] = [];
+    const seenIds = new Set<string>();
+    for (const item of relatedAppItems) {
+      if (seenIds.has(item.app.id)) continue;
+      seenIds.add(item.app.id);
+      if (item.section === 'original') {
+        original.push(item);
+      } else {
+        remixes.push(item);
       }
-      center={null}
-      right={
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          {isOwner ? (
-            <StudioSheetHeaderIconButton
-              onPress={onGoToChat}
-              accessibilityLabel="Chat"
-              intent="primary"
-              appearance="glass"
-              style={{ marginRight: 8 }}
-            >
-              <IconChat size={20} colorToken="onPrimary" />
+    }
+    return { original, remixes };
+  }, [relatedAppItems]);
+
+  const openRelatedApps = React.useCallback(() => {
+    setRelatedAppsOpen(true);
+    onOpenRelatedApps?.();
+  }, [onOpenRelatedApps]);
+
+  const closeRelatedApps = React.useCallback(() => {
+    setRelatedAppsOpen(false);
+  }, []);
+
+  const handleSelectRelatedApp = React.useCallback(
+    (targetAppId: string) => {
+      if (!relatedApps) return;
+      if (targetAppId === relatedApps.current.id) return;
+      onSwitchRelatedApp?.(targetAppId);
+      setRelatedAppsOpen(false);
+    },
+    [onSwitchRelatedApp, relatedApps]
+  );
+
+  const renderRelatedRow = React.useCallback(
+    (item: RelatedAppListItem) => {
+      const app = item.app;
+      const isCurrent = app.id === currentAppId;
+      const isOriginal = app.id === originalAppId;
+      const isReady = app.status === 'ready';
+      const isSwitching = switchingRelatedAppId === app.id;
+      const disabled = isCurrent || !isReady || Boolean(switchingRelatedAppId);
+
+      return (
+        <Pressable
+          key={app.id}
+          accessibilityRole="button"
+          accessibilityLabel={`Switch to ${app.name}`}
+          disabled={disabled}
+          onPress={() => handleSelectRelatedApp(app.id)}
+          style={{
+            borderRadius: theme.radii.md,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            backgroundColor: theme.colors.surface,
+            paddingHorizontal: theme.spacing.md,
+            paddingVertical: theme.spacing.sm,
+            marginBottom: theme.spacing.sm,
+            opacity: disabled ? 0.6 : 1,
+          }}
+        >
+          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+            <View style={{ flex: 1, paddingRight: 8 }}>
+              <Text numberOfLines={1} style={{ color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }}>
+                {app.name}
+              </Text>
+              <View style={{ height: 4 }} />
+              <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
+                {isOriginal ? (
+                  <View style={{ borderRadius: 999, paddingHorizontal: 8, paddingVertical: 2, backgroundColor: theme.colors.neutral }}>
+                    <Text style={{ color: theme.colors.textMuted, fontSize: 11 }}>Original</Text>
+                  </View>
+                ) : null}
+                {isCurrent ? (
+                  <View style={{ borderRadius: 999, paddingHorizontal: 8, paddingVertical: 2, backgroundColor: theme.colors.primary }}>
+                    <Text style={{ color: theme.colors.onPrimary, fontSize: 11 }}>Current</Text>
+                  </View>
+                ) : null}
+              </View>
+            </View>
+            <View style={{ alignItems: 'flex-end', gap: 8 }}>
+              {app.status ? <PreviewStatusBadge status={app.status} /> : null}
+              {isSwitching ? <ActivityIndicator size="small" color={theme.colors.primary} /> : null}
+            </View>
+          </View>
+        </Pressable>
+      );
+    },
+    [currentAppId, handleSelectRelatedApp, originalAppId, switchingRelatedAppId, theme]
+  );
+
+  return (
+    <>
+      <StudioSheetHeader
+        left={
+          onNavigateHome ? (
+            <StudioSheetHeaderIconButton onPress={onNavigateHome} accessibilityLabel="Home" appearance="glass" intent="primary">
+              <IconHome size={20} colorToken="onPrimary" />
             </StudioSheetHeaderIconButton>
-          ) : null}
-          {isPublic && onShare ? (
-            <StudioSheetHeaderIconButton
-              onPress={onShare}
-              accessibilityLabel="Share"
-              intent="primary"
-              appearance="glass"
-              style={{ marginRight: 8 }}
-            >
-              <IconShare size={20} colorToken="onPrimary" />
+          ) : null
+        }
+        center={null}
+        right={
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {isOwner ? (
+              <StudioSheetHeaderIconButton
+                onPress={onGoToChat}
+                accessibilityLabel="Chat"
+                intent="primary"
+                appearance="glass"
+                style={{ marginRight: 8 }}
+              >
+                <IconChat size={20} colorToken="onPrimary" />
+              </StudioSheetHeaderIconButton>
+            ) : null}
+            {isPublic && onShare ? (
+              <StudioSheetHeaderIconButton
+                onPress={onShare}
+                accessibilityLabel="Share"
+                intent="primary"
+                appearance="glass"
+                style={{ marginRight: 8 }}
+              >
+                <IconShare size={20} colorToken="onPrimary" />
+              </StudioSheetHeaderIconButton>
+            ) : null}
+            {shouldShowRelatedApps ? (
+              <StudioSheetHeaderIconButton
+                onPress={openRelatedApps}
+                accessibilityLabel="Related apps"
+                intent="primary"
+                appearance="glass"
+                style={{ marginRight: 8 }}
+              >
+                {relatedAppsLoading ? (
+                  <ActivityIndicator size="small" color={theme.colors.onPrimary} />
+                ) : (
+                  <IconChevronDown size={20} colorToken="onPrimary" />
+                )}
+              </StudioSheetHeaderIconButton>
+            ) : null}
+            <StudioSheetHeaderIconButton onPress={onClose} accessibilityLabel="Close" appearance="glass" intent="primary">
+              <IconClose size={20} colorToken="onPrimary" />
             </StudioSheetHeaderIconButton>
+          </View>
+        }
+      />
+
+      <Modal visible={relatedAppsOpen} onRequestClose={closeRelatedApps}>
+        <View style={{ gap: theme.spacing.sm }}>
+          <Text style={{ color: theme.colors.text, fontSize: 18, fontWeight: theme.typography.fontWeight.semibold }}>
+            Related apps
+          </Text>
+
+          {sectionedRelatedApps.original.length > 0 ? (
+            <View>
+              <Text style={{ color: theme.colors.textMuted, marginBottom: theme.spacing.xs }}>Original</Text>
+              {sectionedRelatedApps.original.map(renderRelatedRow)}
+            </View>
+          ) : null}
+
+          {sectionedRelatedApps.remixes.length > 0 ? (
+            <View>
+              <Text style={{ color: theme.colors.textMuted, marginBottom: theme.spacing.xs }}>Remixes</Text>
+              {sectionedRelatedApps.remixes.map(renderRelatedRow)}
+            </View>
           ) : null}
-          <StudioSheetHeaderIconButton onPress={onClose} accessibilityLabel="Close" appearance="glass" intent="primary">
-            <IconClose size={20} colorToken="onPrimary" />
-          </StudioSheetHeaderIconButton>
         </View>
-      }
-    />
+      </Modal>
+    </>
   );
 }