@comergehq/studio 0.1.1 → 0.1.3

package/src/studio/ui/StudioOverlay.tsx

@@ -0,0 +1,257 @@
+import * as React from 'react';
+import { Keyboard, View, useWindowDimensions } from 'react-native';
+
+import type { App } 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';
+import { FloatingDraggableButton } from '../../components/floating-draggable-button/FloatingDraggableButton';
+import { EdgeGlowFrame } from '../../components/overlays/EdgeGlowFrame';
+import { DrawModeOverlay } from '../../components/draw/DrawModeOverlay';
+import { AppCommentsSheet } from '../../components/comments/AppCommentsSheet';
+import { PreviewPanel } from './PreviewPanel';
+import { ChatPanel } from './ChatPanel';
+import { ConfirmMergeFlow } from './ConfirmMergeFlow';
+import type { MergeRequestSummary } from '../../components/models/types';
+import { useTheme } from '../../theme';
+
+import { MergeIcon } from '../../components/icons/MergeIcon';
+
+export type StudioOverlayProps = {
+  captureTargetRef: React.RefObject<View | null>;
+
+  app: App | null;
+  appLoading?: boolean;
+
+  // Studio state
+  isOwner: boolean;
+  shouldForkOnEdit: boolean;
+
+  // Bundle testing (glow + restore)
+  isTesting: boolean;
+  onRestoreBase: () => void | Promise<void>;
+
+  // Merge requests
+  incomingMergeRequests: MergeRequest[];
+  outgoingMergeRequests: MergeRequest[];
+  creatorStatsById: Record<string, import('../../data/users/types').UserStats>;
+  processingMrId?: string | null;
+  isBuildingMrTest?: boolean;
+  testingMrId?: string | null;
+  toMergeRequestSummary: (mr: MergeRequest) => MergeRequestSummary;
+  onSubmitMergeRequest?: () => void | Promise<void>;
+  onApprove?: (mr: MergeRequest) => void | Promise<void>;
+  onReject?: (mr: MergeRequest) => void | Promise<void>;
+  onTestMr?: (mr: MergeRequest) => void | Promise<void>;
+
+  // Chat
+  chatMessages: import('../../components/models/types').ChatMessage[];
+  chatLoading?: boolean;
+  chatSendDisabled?: boolean;
+  chatForking?: boolean;
+  chatSending?: boolean;
+  chatShowTypingIndicator?: boolean;
+  onSendChat: (text: string, attachments?: string[]) => void | Promise<void>;
+
+  // Navigation callbacks
+  onNavigateHome?: () => void;
+};
+
+type SheetPage = 'preview' | 'chat';
+
+export function StudioOverlay({
+  captureTargetRef,
+  app,
+  appLoading,
+  isOwner,
+  shouldForkOnEdit,
+  isTesting,
+  onRestoreBase,
+  incomingMergeRequests,
+  outgoingMergeRequests,
+  creatorStatsById,
+  processingMrId,
+  isBuildingMrTest,
+  testingMrId,
+  toMergeRequestSummary,
+  onSubmitMergeRequest,
+  onApprove,
+  onReject,
+  onTestMr,
+  chatMessages,
+  chatLoading,
+  chatSendDisabled,
+  chatForking,
+  chatSending,
+  chatShowTypingIndicator,
+  onSendChat,
+  onNavigateHome,
+}: StudioOverlayProps) {
+  const theme = useTheme();
+  const { width } = useWindowDimensions();
+
+  const [sheetOpen, setSheetOpen] = React.useState(false);
+  const [activePage, setActivePage] = React.useState<SheetPage>('preview');
+
+  const [drawing, setDrawing] = React.useState(false);
+  const [chatAttachments, setChatAttachments] = React.useState<string[]>([]);
+  const [commentsAppId, setCommentsAppId] = React.useState<string | null>(null);
+  const [commentsCount, setCommentsCount] = React.useState<number | null>(null);
+
+  const [confirmMrId, setConfirmMrId] = React.useState<string | null>(null);
+  const confirmMr = React.useMemo(
+    () => (confirmMrId ? incomingMergeRequests.find((m) => m.id === confirmMrId) ?? null : null),
+    [confirmMrId, incomingMergeRequests]
+  );
+
+  const closeSheet = React.useCallback(() => {
+    setSheetOpen(false);
+    Keyboard.dismiss();
+  }, []);
+
+  const openSheet = React.useCallback(() => setSheetOpen(true), []);
+
+  const goToChat = React.useCallback(() => {
+    setActivePage('chat');
+    openSheet();
+  }, [openSheet]);
+
+  const backToPreview = React.useCallback(() => {
+    Keyboard.dismiss();
+    setActivePage('preview');
+  }, []);
+
+  const startDraw = React.useCallback(() => {
+    setDrawing(true);
+    closeSheet();
+  }, [closeSheet]);
+
+  const handleDrawCapture = React.useCallback(
+    (dataUrl: string) => {
+      setChatAttachments((prev) => [...prev, dataUrl]);
+      setDrawing(false);
+      setActivePage('chat');
+      openSheet();
+    },
+    [openSheet]
+  );
+
+  const toggleSheet = React.useCallback(async () => {
+    if (!sheetOpen) {
+      const shouldExitTest = Boolean(testingMrId) || isTesting;
+      if (shouldExitTest) {
+        void Promise.resolve(onRestoreBase()).catch(() => {});
+      }
+      setSheetOpen(true);
+    } else {
+      closeSheet();
+    }
+  }, [closeSheet, isTesting, onRestoreBase, sheetOpen, testingMrId]);
+
+  const handleTestMr = React.useCallback(
+    async (mr: MergeRequest) => {
+      if (!onTestMr) return;
+      await onTestMr(mr);
+      closeSheet();
+    },
+    [closeSheet, onTestMr]
+  );
+
+  return (
+    <>
+      {/* Testing glow around runtime */}
+      <EdgeGlowFrame visible={isTesting} role="accent" thickness={40} intensity={1} />
+
+      <StudioBottomSheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <StudioSheetPager
+          activePage={activePage}
+          width={width}
+          preview={
+            <PreviewPanel
+              app={app}
+              loading={appLoading}
+              isOwner={isOwner}
+              shouldForkOnEdit={shouldForkOnEdit}
+              incomingMergeRequests={incomingMergeRequests}
+              outgoingMergeRequests={outgoingMergeRequests}
+              creatorStatsById={creatorStatsById}
+              processingMrId={processingMrId}
+              isBuildingMrTest={isBuildingMrTest}
+              testingMrId={testingMrId}
+              toMergeRequestSummary={toMergeRequestSummary}
+              onClose={closeSheet}
+              onNavigateHome={onNavigateHome}
+              onGoToChat={goToChat}
+              onStartDraw={isOwner ? startDraw : undefined}
+              onSubmitMergeRequest={onSubmitMergeRequest}
+              onRequestApprove={(mr) => setConfirmMrId(mr.id)}
+              onReject={onReject}
+              onTestMr={handleTestMr}
+              onOpenComments={() => setCommentsAppId(app?.id ?? null)}
+              commentCountOverride={commentsCount ?? undefined}
+            />
+          }
+          chat={
+            <ChatPanel
+              messages={chatMessages}
+              showTypingIndicator={chatShowTypingIndicator}
+              loading={chatLoading}
+              sendDisabled={chatSendDisabled}
+              forking={chatForking}
+              sending={chatSending}
+              autoFocusComposer={sheetOpen && activePage === 'chat'}
+              shouldForkOnEdit={shouldForkOnEdit}
+              attachments={chatAttachments}
+              onRemoveAttachment={(idx) => setChatAttachments((prev) => prev.filter((_, i) => i !== idx))}
+              onClearAttachments={() => setChatAttachments([])}
+              onBack={backToPreview}
+              onClose={closeSheet}
+              onNavigateHome={onNavigateHome}
+              onStartDraw={startDraw}
+              onSend={onSendChat}
+            />
+          }
+        />
+      </StudioBottomSheet>
+
+      <FloatingDraggableButton
+        visible={!sheetOpen && !drawing}
+        ariaLabel={sheetOpen ? 'Hide studio' : 'Show studio'}
+        badgeCount={incomingMergeRequests.length}
+        onPress={toggleSheet}
+        isLoading={app?.status === 'editing'}
+      >
+        <View style={{ width: 28, height: 28, alignItems: 'center', justifyContent: 'center' }}>
+          <MergeIcon width={24} height={24} color={theme.colors.floatingContent} />
+        </View>
+      </FloatingDraggableButton>
+
+      <DrawModeOverlay
+        visible={drawing}
+        captureTargetRef={captureTargetRef}
+        onCancel={() => setDrawing(false)}
+        onCapture={handleDrawCapture}
+      />
+
+      <ConfirmMergeFlow
+        visible={Boolean(confirmMr)}
+        onOpenChange={(open) => {
+          if (!open) setConfirmMrId(null);
+        }}
+        mergeRequest={confirmMr}
+        toSummary={toMergeRequestSummary}
+        onConfirm={(mr) => onApprove?.(mr)}
+        onTestFirst={handleTestMr}
+      />
+
+      <AppCommentsSheet
+        appId={commentsAppId}
+        onClose={() => setCommentsAppId(null)}
+        onCountChange={(count) => setCommentsCount(count)}
+        onPlayApp={() => setCommentsAppId(null)}
+      />
+    </>
+  );
+}
+
+

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Pressable, View, type ViewStyle } from 'react-native';
+
+import { Card } from '../../../components/primitives/Card';
+
+export type PressableCardRowProps = {
+  accessibilityLabel: string;
+  onPress: () => void;
+  disabled?: boolean;
+  left: React.ReactNode;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  right?: React.ReactNode;
+  style?: ViewStyle;
+};
+
+export function PressableCardRow({
+  accessibilityLabel,
+  onPress,
+  disabled,
+  left,
+  title,
+  subtitle,
+  right,
+  style,
+}: PressableCardRowProps) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => ({ opacity: disabled ? 0.6 : pressed ? 0.85 : 1 })}
+    >
+      <Card padded={false} border={false} style={style}>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          {left}
+          <View style={{ flex: 1, minWidth: 0 }}>
+            {title}
+            {subtitle ? subtitle : null}
+          </View>
+          {right ? <View style={{ marginLeft: 16 }}>{right}</View> : null}
+        </View>
+      </Card>
+    </Pressable>
+  );
+}
+
+

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

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { ActivityIndicator, Alert, View } from 'react-native';
+import { Send } from 'lucide-react-native';
+
+import type { MergeRequest } from '../../../data/merge-requests/types';
+import type { UserStats } from '../../../data/users/types';
+import { MergeRequestStatusCard } from '../../../components/merge-requests/MergeRequestStatusCard';
+import { ReviewMergeRequestCarousel } from '../../../components/merge-requests/ReviewMergeRequestCarousel';
+import { Text } from '../../../components/primitives/Text';
+import { withAlpha } from '../../../components/utils/color';
+import { useTheme } from '../../../theme';
+import { PressableCardRow } from './PressableCardRow';
+import { SectionTitle } from './SectionTitle';
+
+import { MergeIcon } from '../../../components/icons/MergeIcon';
+
+export type PreviewCollaborateSectionProps = {
+  canSubmitMergeRequest: boolean;
+  incomingMergeRequests: MergeRequest[];
+  outgoingMergeRequests: MergeRequest[];
+  creatorStatsById: Record<string, UserStats>;
+  processingMrId?: string | null;
+  isBuildingMrTest?: boolean;
+  testingMrId?: string | null;
+  toMergeRequestSummary: (mr: MergeRequest) => import('../../../components/models/types').MergeRequestSummary;
+  onSubmitMergeRequest?: () => void | Promise<void>;
+  onRequestApprove?: (mr: MergeRequest) => void;
+  onReject?: (mr: MergeRequest) => void | Promise<void>;
+  onTestMr?: (mr: MergeRequest) => void | Promise<void>;
+};
+
+export function PreviewCollaborateSection({
+  canSubmitMergeRequest,
+  incomingMergeRequests,
+  outgoingMergeRequests,
+  creatorStatsById,
+  processingMrId,
+  isBuildingMrTest,
+  testingMrId,
+  toMergeRequestSummary,
+  onSubmitMergeRequest,
+  onRequestApprove,
+  onReject,
+  onTestMr,
+}: PreviewCollaborateSectionProps) {
+  const theme = useTheme();
+  const [submittingMr, setSubmittingMr] = React.useState(false);
+
+  const hasSection = canSubmitMergeRequest || incomingMergeRequests.length > 0 || outgoingMergeRequests.length > 0;
+  if (!hasSection) return null;
+
+  const showActionsSubtitle = (canSubmitMergeRequest && onSubmitMergeRequest) || (onTestMr && incomingMergeRequests.length > 0);
+
+  return (
+    <>
+      <SectionTitle marginTop={theme.spacing.xl}>Collaborate</SectionTitle>
+
+      {showActionsSubtitle ? (
+        <Text
+          style={{
+            color: withAlpha(theme.colors.textMuted, 0.7),
+            fontSize: 10,
+            lineHeight: 14,
+            textTransform: 'uppercase',
+            letterSpacing: 0.8,
+            marginBottom: theme.spacing.sm,
+            fontWeight: theme.typography.fontWeight.semibold,
+          }}
+        >
+          Actions
+        </Text>
+      ) : null}
+
+      {canSubmitMergeRequest && onSubmitMergeRequest ? (
+        <PressableCardRow
+          accessibilityLabel="Submit merge request"
+          disabled={submittingMr}
+          onPress={() => {
+            Alert.alert(
+              'Submit Merge Request',
+              'Are you sure you want to submit your changes to the original app?',
+              [
+                { text: 'Cancel', style: 'cancel' },
+                {
+                  text: 'Submit',
+                  style: 'destructive',
+                  onPress: () => {
+                    setSubmittingMr(true);
+                    Promise.resolve(onSubmitMergeRequest())
+                      .catch(() => {})
+                      .finally(() => setSubmittingMr(false));
+                  },
+                },
+              ]
+            );
+          }}
+          style={{
+            padding: theme.spacing.lg,
+            borderRadius: theme.radii.lg,
+            backgroundColor: withAlpha(theme.colors.surfaceRaised, 0.5),
+            borderWidth: 1,
+            borderColor: withAlpha('#03DAC6', 0.2),
+            marginBottom: theme.spacing.sm,
+          }}
+          left={
+            <View
+              style={{
+                width: 40,
+                height: 40,
+                borderRadius: 999,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: withAlpha('#03DAC6', 0.1),
+                marginRight: theme.spacing.lg,
+              }}
+            >
+              {submittingMr ? <ActivityIndicator color="#03DAC6" size="small" /> : <MergeIcon width={20} height={20} color="#03DAC6" />}
+            </View>
+          }
+          title={
+            <Text style={{ color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }}>
+              Submit your new changes
+            </Text>
+          }
+          subtitle={
+            <Text style={{ color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }}>
+              Ask to merge this remix to the original app
+            </Text>
+          }
+          right={<Send size={16} color="#03DAC6" />}
+        />
+      ) : null}
+
+      {onTestMr && incomingMergeRequests.length > 0 ? (
+        <ReviewMergeRequestCarousel
+          mergeRequests={incomingMergeRequests}
+          creatorStatsById={creatorStatsById}
+          processingMrId={processingMrId}
+          isBuilding={Boolean(isBuildingMrTest)}
+          testingMrId={testingMrId}
+          onReject={(mr) => (onReject ? onReject(mr) : undefined)}
+          onApprove={(mr) => onRequestApprove?.(mr)}
+          onTest={(mr) => (onTestMr ? onTestMr(mr) : undefined)}
+        />
+      ) : null}
+
+      {outgoingMergeRequests.length > 0 ? (
+        <>
+          <Text
+            style={{
+              color: withAlpha(theme.colors.textMuted, 0.7),
+              fontSize: 10,
+              lineHeight: 14,
+              textTransform: 'uppercase',
+              letterSpacing: 0.8,
+              marginTop: theme.spacing.lg,
+              marginBottom: theme.spacing.sm,
+              fontWeight: theme.typography.fontWeight.semibold,
+            }}
+          >
+            History
+          </Text>
+          {outgoingMergeRequests.map((mr) => (
+            <View key={mr.id} style={{ marginBottom: theme.spacing.sm }}>
+              <MergeRequestStatusCard mergeRequest={toMergeRequestSummary(mr)} />
+            </View>
+          ))}
+        </>
+      ) : null}
+    </>
+  );
+}
+
+

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

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import type { App } from '../../../data/apps/types';
+import { Text } from '../../../components/primitives/Text';
+import { IconChat, IconChevronRight, IconDraw } from '../../../components/icons/StudioIcons';
+import { withAlpha } from '../../../components/utils/color';
+import { useTheme } from '../../../theme';
+import { PressableCardRow } from './PressableCardRow';
+import { SectionTitle } from './SectionTitle';
+import { statusDescription } from './utils';
+
+export type PreviewCustomizeSectionProps = {
+  app: App;
+  isOwner: boolean;
+  shouldForkOnEdit: boolean;
+  showProcessing: boolean;
+  onGoToChat: () => void;
+  onStartDraw?: () => void;
+};
+
+export function PreviewCustomizeSection({
+  app,
+  isOwner,
+  shouldForkOnEdit,
+  showProcessing,
+  onGoToChat,
+  onStartDraw,
+}: PreviewCustomizeSectionProps) {
+  const theme = useTheme();
+
+  return (
+    <>
+      <SectionTitle>Customize</SectionTitle>
+
+      {showProcessing ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: theme.spacing.lg,
+            borderRadius: theme.radii.lg,
+            backgroundColor: withAlpha(theme.colors.surfaceRaised, 0.5),
+            borderWidth: 1,
+            borderColor: withAlpha(theme.colors.warning, 0.2),
+            marginBottom: theme.spacing.sm,
+          }}
+        >
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 999,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: withAlpha(theme.colors.warning, 0.1),
+              marginRight: theme.spacing.lg,
+            }}
+          >
+            <ActivityIndicator color={theme.colors.warning} size="small" />
+          </View>
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <Text style={{ color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }}>
+              {app.status === 'error' ? 'Error' : 'Processing'}
+            </Text>
+            <Text style={{ color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }}>
+              {statusDescription(app.status, app.statusError)}
+            </Text>
+          </View>
+        </View>
+      ) : null}
+
+      <PressableCardRow
+        accessibilityLabel={isOwner ? 'Edit app' : 'Remix app'}
+        onPress={onGoToChat}
+        style={{
+          padding: theme.spacing.lg,
+          borderRadius: theme.radii.lg,
+          backgroundColor: withAlpha(theme.colors.surfaceRaised, 0.5),
+          borderWidth: 1,
+          borderColor: withAlpha(theme.colors.primary, 0.1),
+          marginBottom: theme.spacing.sm,
+        }}
+        left={
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 999,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: withAlpha(theme.colors.primary, 0.1),
+              marginRight: theme.spacing.lg,
+            }}
+          >
+            <IconChat size={20} colorToken="primary" />
+          </View>
+        }
+        title={
+          <Text style={{ color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }}>
+            {isOwner ? (app.forkedFromAppId ? 'Edit your Remix' : 'Edit Your App') : 'Remix App'}
+          </Text>
+        }
+        subtitle={
+          <Text style={{ color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }}>
+            {isOwner && app.forkedFromAppId
+              ? 'Make changes to your remix with chat'
+              : shouldForkOnEdit
+                ? 'Chat to create your own copy and edit it'
+                : 'Chat to apply changes'}
+          </Text>
+        }
+        right={<IconChevronRight size={20} colorToken="textMuted" />}
+      />
+
+      {isOwner && onStartDraw ? (
+        <PressableCardRow
+          accessibilityLabel="Draw changes"
+          onPress={onStartDraw}
+          style={{
+            padding: theme.spacing.lg,
+            borderRadius: theme.radii.lg,
+            backgroundColor: withAlpha(theme.colors.surfaceRaised, 0.5),
+            borderWidth: 1,
+            borderColor: withAlpha(theme.colors.danger, 0.1),
+            marginBottom: theme.spacing.sm,
+          }}
+          left={
+            <View
+              style={{
+                width: 40,
+                height: 40,
+                borderRadius: 999,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: withAlpha(theme.colors.danger, 0.1),
+                marginRight: theme.spacing.lg,
+              }}
+            >
+              <IconDraw size={20} colorToken="danger" />
+            </View>
+          }
+          title={
+            <Text style={{ color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }}>
+              Draw Changes
+            </Text>
+          }
+          subtitle={
+            <Text style={{ color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }}>
+              Annotate the app with drawings
+            </Text>
+          }
+          right={<IconChevronRight size={20} colorToken="textMuted" />}
+        />
+      ) : null}
+    </>
+  );
+}
+
+

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import type { App } from '../../../data/apps/types';
+import { PreviewHeroCard } from '../../../components/preview/PreviewHeroCard';
+import { PreviewPlaceholder } from '../../../components/preview/PreviewPlaceholder';
+import { PreviewImage } from '../../../components/preview/PreviewImage';
+import { StatsBar } from '../../../components/preview/StatsBar';
+import { PreviewStatusBadge } from '../../../components/preview/PreviewStatusBadge';
+
+export type PreviewHeroSectionProps = {
+  appStatus: App['status'];
+  showProcessing: boolean;
+  imageUrl: string | null;
+  imageLoaded: boolean;
+  onImageLoad: () => void;
+  stats: {
+    likeCount: number;
+    commentCount: number;
+    forkCount: number;
+    isLiked: boolean;
+    handleLike: () => Promise<void> | void;
+    handleOpenComments: () => void;
+  };
+};
+
+export function PreviewHeroSection({
+  appStatus,
+  showProcessing,
+  imageUrl,
+  imageLoaded,
+  onImageLoad,
+  stats,
+}: PreviewHeroSectionProps) {
+  return (
+    <PreviewHeroCard
+      overlayTopLeft={showProcessing ? <PreviewStatusBadge status={appStatus} /> : null}
+      background={<PreviewPlaceholder visible={!imageLoaded} />}
+      image={<PreviewImage uri={imageUrl} onLoad={onImageLoad} />}
+      overlayBottom={
+        <StatsBar
+          likeCount={stats.likeCount}
+          commentCount={stats.commentCount}
+          forkCount={stats.forkCount}
+          isLiked={stats.isLiked}
+          onPressLike={() => void stats.handleLike()}
+          onPressComments={stats.handleOpenComments}
+          centered
+          fixedWidth={160}
+        />
+      }
+      style={{ marginBottom: 16 }}
+    />
+  );
+}
+
+