@comergehq/studio 0.1.2 → 0.1.3

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { App } from '../../../data/apps/types';
+import { PreviewMetaRow } from '../../../components/preview/PreviewMetaRow';
+import { Text } from '../../../components/primitives/Text';
+import { IconPlay } from '../../../components/icons/StudioIcons';
+import { withAlpha } from '../../../components/utils/color';
+import { useTheme } from '../../../theme';
+import { formatCount } from './utils';
+
+export type PreviewMetaSectionProps = {
+  app: App;
+  isOwner: boolean;
+  creator: { name: string | null; avatar: string | null } | null;
+  downloadsCount?: number;
+};
+
+export function PreviewMetaSection({ app, isOwner, creator, downloadsCount }: PreviewMetaSectionProps) {
+  const theme = useTheme();
+
+  return (
+    <PreviewMetaRow
+      title={app.name}
+      subtitle={app.description}
+      avatarUri={creator?.avatar ?? null}
+      creatorName={creator?.name ?? null}
+      tag={
+        isOwner || app.forkedFromAppId ? (
+          <View style={{ paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: '#3700B3' }}>
+            <Text variant="caption" style={{ color: '#fff', fontWeight: theme.typography.fontWeight.semibold }}>
+              {app.forkedFromAppId ? 'Remix' : 'Owner'}
+            </Text>
+          </View>
+        ) : null
+      }
+      rightMetric={
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            borderRadius: 6,
+            backgroundColor: withAlpha(theme.colors.neutral, 0.3),
+          }}
+        >
+          <Text
+            style={{
+              marginRight: 2,
+              color: theme.colors.textMuted,
+              fontSize: 14,
+              lineHeight: 18,
+              fontWeight: theme.typography.fontWeight.bold,
+            }}
+          >
+            {formatCount(downloadsCount ?? app.insights?.totalDownloads ?? 0)}
+          </Text>
+          <IconPlay size={14} colorToken="textMuted" fill={theme.colors.textMuted} />
+        </View>
+      }
+      style={{ marginBottom: 16 }}
+    />
+  );
+}
+
+

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { StudioSheetHeader } from '../../../components/studio-sheet/StudioSheetHeader';
+import { StudioSheetHeaderIconButton } from '../../../components/studio-sheet/StudioSheetHeaderIconButton';
+import { IconChat, IconClose, IconHome } from '../../../components/icons/StudioIcons';
+
+export type PreviewPanelHeaderProps = {
+  isOwner: boolean;
+  onClose: () => void;
+  onNavigateHome?: () => void;
+  onGoToChat: () => void;
+};
+
+export function PreviewPanelHeader({ isOwner, onClose, onNavigateHome, onGoToChat }: PreviewPanelHeaderProps) {
+  return (
+    <StudioSheetHeader
+      left={
+        onNavigateHome ? (
+          <StudioSheetHeaderIconButton onPress={onNavigateHome} accessibilityLabel="Home" appearance="glass" intent="primary">
+            <IconHome size={20} colorToken="onPrimary" />
+          </StudioSheetHeaderIconButton>
+        ) : 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}
+          <StudioSheetHeaderIconButton onPress={onClose} accessibilityLabel="Close" appearance="glass" intent="primary">
+            <IconClose size={20} colorToken="onPrimary" />
+          </StudioSheetHeaderIconButton>
+        </View>
+      }
+    />
+  );
+}
+
+

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import { Text } from '../../../components/primitives/Text';
+import { useTheme } from '../../../theme';
+
+export type SectionTitleProps = {
+  children: string;
+  marginTop?: number;
+};
+
+export function SectionTitle({ children, marginTop }: SectionTitleProps) {
+  const theme = useTheme();
+  return (
+    <Text
+      style={{
+        color: theme.colors.textMuted,
+        fontSize: 12,
+        lineHeight: 16,
+        textTransform: 'uppercase',
+        letterSpacing: 0.8,
+        marginTop: marginTop ?? theme.spacing.sm,
+        marginBottom: theme.spacing.sm,
+        fontWeight: theme.typography.fontWeight.bold,
+      }}
+    >
+      {children}
+    </Text>
+  );
+}
+
+

package/src/studio/ui/preview-panel/usePreviewPanelData.ts

@@ -0,0 +1,132 @@
+import * as React from 'react';
+
+import type { App } from '../../../data/apps/types';
+import type { MergeRequest } from '../../../data/merge-requests/types';
+import { appImagesRepository } from '../../../data/apps/images/repository';
+import { appsRepository } from '../../../data/apps/repository';
+import { usersRepository } from '../../../data/users/repository';
+import { log } from '../../../core/logger';
+import { useAppStats } from '../../hooks/useAppStats';
+
+type InsightsSummary = { likes: number; comments: number; forks: number; downloads: number };
+
+const LIKE_DEBUG_PREFIX = '[COMERGE_LIKE_DEBUG]';
+
+export function usePreviewPanelData(params: {
+  app: App | null;
+  isOwner: boolean;
+  outgoingMergeRequests: MergeRequest[];
+  onOpenComments?: () => void;
+  commentCountOverride?: number;
+}) {
+  const { app, isOwner, outgoingMergeRequests, onOpenComments, commentCountOverride } = params;
+
+  const [imageUrl, setImageUrl] = React.useState<string | null>(null);
+  const [imageLoaded, setImageLoaded] = React.useState(false);
+  const [insights, setInsights] = React.useState<InsightsSummary>({ likes: 0, comments: 0, forks: 0, downloads: 0 });
+  const [creator, setCreator] = React.useState<{ name: string | null; avatar: string | null } | null>(null);
+
+  React.useEffect(() => {
+    if (!app?.id) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await appImagesRepository.getSignedUrl(app.id);
+        if (!cancelled) setImageUrl(res.url);
+      } catch {
+        if (!cancelled) setImageUrl(null);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [app?.id]);
+
+  React.useEffect(() => {
+    if (!app?.createdBy) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const stats = await usersRepository.getStats(app.createdBy);
+        if (cancelled) return;
+        setCreator({ name: stats.name, avatar: stats.avatar });
+      } catch {
+        if (!cancelled) setCreator(null);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [app?.createdBy]);
+
+  React.useEffect(() => {
+    setImageLoaded(false);
+  }, [app?.id]);
+
+  React.useEffect(() => {
+    if (!app?.id) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const full = await appsRepository.getInsights(app.id);
+        if (cancelled) return;
+        log.debug(
+          `${LIKE_DEBUG_PREFIX} usePreviewPanelData.getInsights appId=${app.id} insights.likes.total=${full.likes.total} app.isLiked=${String(
+            app.isLiked
+          )}`
+        );
+        setInsights({
+          likes: full.likes.total,
+          comments: full.comments.total,
+          forks: full.forks.total,
+          downloads: full.downloads.total,
+        });
+      } catch {
+        // Leave zeros
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [app?.id]);
+
+  React.useEffect(() => {
+    if (!app?.id) return;
+    log.debug(
+      `${LIKE_DEBUG_PREFIX} usePreviewPanelData.appChanged appId=${app.id} app.isLiked=${String(app.isLiked)}`
+    );
+  }, [app?.id, app?.isLiked]);
+
+  const stats = useAppStats({
+    appId: app?.id ?? '',
+    initialLikes: insights.likes,
+    initialForks: insights.forks,
+    initialComments: commentCountOverride ?? insights.comments,
+    initialIsLiked: Boolean(app?.isLiked),
+    onOpenComments,
+  });
+
+  const canSubmitMergeRequest = React.useMemo(() => {
+    if (!isOwner) return false;
+    if (!app) return false;
+    if (!app.forkedFromAppId) return false;
+    if (outgoingMergeRequests.some((mr) => mr.status === 'open')) return false;
+    if (app.headCommitId && app.forkedFromCommitId && app.headCommitId !== app.forkedFromCommitId) return true;
+    return false;
+  }, [app, isOwner, outgoingMergeRequests]);
+
+  const showProcessing = app ? app.status !== 'ready' : false;
+
+  return {
+    imageUrl,
+    imageLoaded,
+    setImageLoaded,
+    creator,
+    insights,
+    stats,
+    showProcessing,
+    canSubmitMergeRequest,
+  };
+}
+
+

package/src/studio/ui/preview-panel/utils.ts

@@ -0,0 +1,29 @@
+import type { App } from '../../../data/apps/types';
+
+export function formatCount(n: number): string {
+  if (n < 10_000) return n.toLocaleString();
+  if (n < 1_000_000) return `${Math.floor(n / 1_000)}k`;
+  return `${Math.floor(n / 1_000_000)}m`;
+}
+
+export function statusDescription(status: App['status'], statusError: string | null): string {
+  switch (status) {
+    case 'editing':
+      return 'Changes are being applied';
+    case 'creating':
+      return 'Your app is being created';
+    case 'forking':
+      return 'Creating your copy';
+    case 'merging':
+      return 'Merging changes from contributor';
+    case 'archived':
+      return 'This app has been archived';
+    case 'error':
+      return statusError ?? 'Something went wrong';
+    case 'ready':
+    default:
+      return '';
+  }
+}
+
+

package/src/theme/index.ts

@@ -0,0 +1,5 @@
+export { useTheme } from './useTheme';
+export { themes, lightTheme, darkTheme } from './tokens';
+export type { Theme, ThemeColors, ThemeScheme } from './types';
+
+

package/src/theme/tokens.ts

@@ -0,0 +1,118 @@
+import type { Theme } from './types';
+
+export const lightTheme = {
+  scheme: 'light',
+  colors: {
+    text: '#09090B',
+    textMuted: '#898994',
+    textSubtle: 'rgba(137, 137, 148, 0.70)',
+
+    background: '#FFFFFF',
+    surface: '#F6F6F6',
+    surfaceRaised: '#FFFFFF',
+
+    border: '#E4E4E7',
+    borderStrong: '#D4D4D8',
+
+    primary: '#6200EE',
+    onPrimary: '#FFFFFF',
+
+    neutral: '#ECECEE',
+    onNeutral: '#09090B',
+
+    danger: '#F43F5E',
+    onDanger: '#FFFFFF',
+    dangerSubtle: 'rgba(244, 63, 94, 0.12)',
+
+    success: '#10B981',
+    onSuccess: '#FFFFFF',
+    successSubtle: 'rgba(16, 185, 129, 0.12)',
+
+    warning: '#FACC15',
+    onWarning: '#09090B',
+    warningSubtle: 'rgba(250, 204, 21, 0.14)',
+
+    link: '#6200EE',
+
+    backdrop: 'rgba(0, 0, 0, 0.35)',
+
+    handleIndicator: '#71717A',
+
+    floatingSurface: 'rgba(255, 255, 255, 0.6)',
+    floatingContent: '#000000',
+
+    accentRingFrom: 'rgba(98, 0, 238, 0.20)',
+    accentRingTo: 'rgba(98, 0, 238, 0.90)',
+    dangerRingFrom: 'rgba(244, 63, 94, 0.35)',
+    dangerRingTo: 'rgba(244, 63, 94, 1.0)',
+  },
+  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+  radii: { sm: 8, md: 12, lg: 16, xl: 24, pill: 999 },
+  typography: {
+    fontSize: { xs: 12, sm: 13, md: 15, lg: 17, xl: 20 },
+    lineHeight: { xs: 16, sm: 18, md: 20, lg: 22, xl: 26 },
+    fontWeight: { regular: '400', medium: '500', semibold: '600', bold: '700' },
+  },
+} as const satisfies Theme;
+
+export const darkTheme = {
+  scheme: 'dark',
+  colors: {
+    text: '#FFFFFF',
+    textMuted: '#A1A1AA',
+    textSubtle: 'rgba(161, 161, 170, 0.70)',
+
+    background: '#0B080F',
+    surface: '#18181B',
+    surfaceRaised: '#0B080F',
+
+    border: '#404049',
+    borderStrong: '#52525B',
+
+    primary: '#6200EE',
+    onPrimary: '#FFFFFF',
+
+    neutral: '#0B080F',
+    onNeutral: '#FFFFFF',
+
+    danger: '#F43F5E',
+    onDanger: '#FFFFFF',
+    dangerSubtle: 'rgba(244, 63, 94, 0.18)',
+
+    success: '#10B981',
+    onSuccess: '#0B080F',
+    successSubtle: 'rgba(16, 185, 129, 0.16)',
+
+    warning: '#FBBF24',
+    onWarning: '#0B080F',
+    warningSubtle: 'rgba(251, 191, 36, 0.18)',
+
+    link: '#6200EE',
+
+    backdrop: 'rgba(0, 0, 0, 0.55)',
+
+    handleIndicator: '#A1A1AA',
+
+    floatingSurface: 'rgba(0, 0, 0, 0.6)',
+    floatingContent: '#FFFFFF',
+
+    accentRingFrom: 'rgba(98, 0, 238, 0.20)',
+    accentRingTo: 'rgba(98, 0, 238, 0.90)',
+    dangerRingFrom: 'rgba(244, 63, 94, 0.35)',
+    dangerRingTo: 'rgba(244, 63, 94, 1.0)',
+  },
+  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+  radii: { sm: 8, md: 12, lg: 16, xl: 24, pill: 999 },
+  typography: {
+    fontSize: { xs: 12, sm: 13, md: 15, lg: 17, xl: 20 },
+    lineHeight: { xs: 16, sm: 18, md: 20, lg: 22, xl: 26 },
+    fontWeight: { regular: '400', medium: '500', semibold: '600', bold: '700' },
+  },
+} as const satisfies Theme;
+
+export const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+} as const;
+
+

package/src/theme/types.ts

@@ -0,0 +1,90 @@
+export type ThemeScheme = 'light' | 'dark';
+
+
+export type ThemeColors = {
+  text: string;
+  textMuted: string;
+  textSubtle: string;
+
+  background: string;
+  surface: string;
+  surfaceRaised: string;
+
+  border: string;
+  borderStrong: string;
+
+  primary: string;
+  onPrimary: string;
+
+  neutral: string;
+  onNeutral: string;
+
+  danger: string;
+  onDanger: string;
+  dangerSubtle: string;
+
+  success: string;
+  onSuccess: string;
+  successSubtle: string;
+
+  warning: string;
+  onWarning: string;
+  warningSubtle: string;
+
+  link: string;
+
+  backdrop: string;
+
+  handleIndicator: string;
+
+  floatingSurface: string;
+  floatingContent: string;
+
+  accentRingFrom: string;
+  accentRingTo: string;
+  dangerRingFrom: string;
+  dangerRingTo: string;
+};
+
+export type Theme = {
+  scheme: ThemeScheme;
+  colors: ThemeColors;
+  spacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+  };
+  radii: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    pill: number;
+  };
+  typography: {
+    fontSize: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+    };
+    lineHeight: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+    };
+    fontWeight: {
+      regular: '400' | '500';
+      medium: '500' | '600';
+      semibold: '600' | '700';
+      bold: '700';
+    };
+  };
+};
+
+

package/src/theme/useTheme.ts

@@ -0,0 +1,11 @@
+import { useColorScheme } from 'react-native';
+
+import { themes } from './tokens';
+import type { Theme, ThemeScheme } from './types';
+
+export function useTheme(): Theme {
+  const scheme = (useColorScheme() ?? 'light') as ThemeScheme;
+  return themes[scheme] ?? themes.light;
+}
+
+

package/dist/assets/images/merge.svg

@@ -1,3 +0,0 @@
-<svg width="486" height="486" viewBox="0 0 486 486" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M237.025 0H243.664C254.876 95.0361 275.236 175.597 304.743 241.684C334.249 307.478 367.002 357.774 403 392.572L389.722 486C361.691 458.22 338.233 429.417 319.349 399.59C300.464 369.764 284.531 335.843 271.548 297.829C258.565 259.522 246.615 214.343 235.697 162.292L237.91 161.415C228.468 214.928 217.993 261.569 206.485 301.338C194.978 341.107 179.634 375.904 160.455 405.731C141.571 435.265 115.752 462.022 83 486L96.278 392.572C124.014 369.179 147.62 336.72 167.094 295.197C186.864 253.381 202.65 206.886 214.452 155.713C226.255 104.247 233.779 52.343 237.025 0Z" fill="currentColor"/>
-</svg>

package/dist/merge-72UG27QV.svg

@@ -1,3 +0,0 @@
-<svg width="486" height="486" viewBox="0 0 486 486" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M237.025 0H243.664C254.876 95.0361 275.236 175.597 304.743 241.684C334.249 307.478 367.002 357.774 403 392.572L389.722 486C361.691 458.22 338.233 429.417 319.349 399.59C300.464 369.764 284.531 335.843 271.548 297.829C258.565 259.522 246.615 214.343 235.697 162.292L237.91 161.415C228.468 214.928 217.993 261.569 206.485 301.338C194.978 341.107 179.634 375.904 160.455 405.731C141.571 435.265 115.752 462.022 83 486L96.278 392.572C124.014 369.179 147.62 336.72 167.094 295.197C186.864 253.381 202.65 206.886 214.452 155.713C226.255 104.247 233.779 52.343 237.025 0Z" fill="currentColor"/>
-</svg>