vibefast-cli 0.7.0 → 0.7.1

package/2/apps/native/src/features/image-generator/app/gallery.tsx

@@ -1,217 +0,0 @@
-import { Stack, useRouter } from 'expo-router';
-import React from 'react';
-import {
-  ActivityIndicator,
-  Alert,
-  Platform,
-  ScrollView,
-  View,
-} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import {
-  Button,
-  FocusAwareStatusBar,
-  Gallery,
-  Pressable,
-  Text,
-} from '@/components/ui';
-import type { GalleryItem } from '@/components/ui/gallery';
-import { Trash2 } from '@/components/ui/icons';
-import { ImageDetailModal } from '@/features/image-generator/components/image-detail-modal';
-import { useImageGallery } from '@/features/image-generator/hooks/use-image-gallery';
-import type { SavedImageMetadata } from '@/features/image-generator/services/image-gallery-service';
-import { translate } from '@/lib';
-import { useScreenOptions } from '@/lib/hooks/use-navigation-options';
-
-// Set static options to prevent initial flash
-export const unstable_settings = {
-  initialRouteName: 'gallery',
-};
-
-/**
- * Screen component for displaying the local image gallery
- */
-export default function ImageGalleryScreen() {
-  const router = useRouter();
-  const insets = useSafeAreaInsets();
-  const { images, isLoading, error, removeImage, clearGallery } =
-    useImageGallery();
-
-  const [selectedImage, setSelectedImage] =
-    React.useState<SavedImageMetadata | null>(null);
-
-  const screenOptions = useScreenOptions(
-    {
-      title: `${translate('image_generator.gallery_title')} (${images.length})`,
-      headerRight: () =>
-        images.length > 0 ? (
-          <Pressable
-            onPress={handleClearGallery}
-            className="pl-2"
-            style={{ marginRight: 8 }}
-            testID="clear-gallery-button"
-            accessibilityLabel="Clear all images from gallery"
-            accessibilityRole="button"
-          >
-            <Text className="font-medium text-danger-500">
-              <Trash2 color="#ef4444" />
-            </Text>
-          </Pressable>
-        ) : null,
-    },
-    'scrollable',
-  );
-
-  const handleImagePress = (item: GalleryItem) => {
-    const image = images.find((img) => img.id === item.id);
-    if (image) {
-      setSelectedImage(image);
-    }
-  };
-
-  const handleImageLongPress = (item: GalleryItem) => {
-    const image = images.find((img) => img.id === item.id);
-    if (!image) return;
-
-    Alert.alert(
-      translate('image_generator.image_options'),
-      `${translate('image_generator.image_options_description')}\n\nPrompt: ${image.prompt.substring(0, 100)}...\n\nModel:${image.model}`,
-      [
-        { text: translate('common.cancel'), style: 'cancel' },
-        {
-          text: translate('common.delete'),
-          style: 'destructive',
-          onPress: () => {
-            Alert.alert(
-              translate('image_detail.delete_image'),
-              translate('image_detail.delete_image_confirmation'),
-              [
-                { text: translate('common.cancel'), style: 'cancel' },
-                {
-                  text: translate('common.delete'),
-                  style: 'destructive',
-                  onPress: () => removeImage(image.id),
-                },
-              ],
-            );
-          },
-        },
-      ],
-    );
-  };
-
-  // Convert SavedImageMetadata to GalleryItem format
-  const galleryItems: GalleryItem[] = images.map((img) => ({
-    id: img.id,
-    uri: img.localUri,
-    title: img.prompt,
-  }));
-
-  const handleCloseModal = () => {
-    setSelectedImage(null);
-  };
-
-  const handleDeleteFromModal = (imageId: string) => {
-    removeImage(imageId);
-  };
-
-  const handleClearGallery = () => {
-    if (images.length === 0) return;
-
-    Alert.alert(
-      translate('image_generator.clear_gallery'),
-      translate('image_generator.clear_gallery_confirmation'),
-      [
-        { text: translate('common.cancel'), style: 'cancel' },
-        {
-          text: translate('image_generator.clear_all'),
-          style: 'destructive',
-          onPress: clearGallery,
-        },
-      ],
-    );
-  };
-
-  if (isLoading) {
-    return (
-      <View className="flex-1 items-center justify-center bg-white dark:bg-neutral-950">
-        <FocusAwareStatusBar />
-        <ActivityIndicator size="large" />
-        <Text className="mt-4 text-neutral-900 dark:text-neutral-100">
-          {translate('common.loading')}...
-        </Text>
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View className="flex-1 items-center justify-center bg-white p-4 dark:bg-neutral-950">
-        <FocusAwareStatusBar />
-        <Text className="mb-4 text-center text-neutral-900 dark:text-neutral-100">
-          {translate('common.error')}: {error}
-        </Text>
-        <Button
-          onPress={() => router.back()}
-          label={translate('image_generator.go_back')}
-        />
-      </View>
-    );
-  }
-
-  return (
-    <View className="flex-1">
-      <FocusAwareStatusBar />
-      <Stack.Screen
-        options={{
-          ...screenOptions,
-          title: `${translate('image_generator.gallery_title')} (${images.length})`,
-        }}
-      />
-
-      {images.length === 0 ? (
-        <View
-          className="flex-1 items-center justify-center p-8"
-          style={{ paddingBottom: insets.bottom + 32 }}
-        >
-          <Text className="mb-4 text-center text-xl font-semibold text-neutral-900 dark:text-neutral-100">
-            {translate('image_generator.no_images_title')}
-          </Text>
-          <Text className="mb-6 text-center text-neutral-500 dark:text-neutral-400">
-            {translate('image_generator.no_images_description')}
-          </Text>
-          <Button
-            onPress={() => router.back()}
-            label={translate('image_generator.generate_images_button')}
-          />
-        </View>
-      ) : (
-        <ScrollView
-          contentContainerStyle={{
-            padding: 16,
-            paddingTop: Platform.OS === 'ios' ? 84 : 16,
-            paddingBottom: insets.bottom + 16,
-          }}
-        >
-          <Gallery
-            items={galleryItems}
-            columns={2}
-            columnsTablet={4}
-            spacing={8}
-            borderRadius={12}
-            aspectRatio={1}
-            onPressItem={handleImagePress}
-            onLongPressItem={handleImageLongPress}
-          />
-        </ScrollView>
-      )}
-
-      <ImageDetailModal
-        image={selectedImage}
-        onDelete={handleDeleteFromModal}
-        onClose={handleCloseModal}
-      />
-    </View>
-  );
-}

package/2/apps/native/src/features/image-generator/app/index.tsx

@@ -1,237 +0,0 @@
-import { MaterialIcons } from '@expo/vector-icons';
-import { router, Stack } from 'expo-router';
-import React, { useState } from 'react';
-import {
-  Keyboard,
-  ScrollView,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-
-import { reportingApi } from '@/api-client/reporting';
-import {
-  Button,
-  FocusAwareStatusBar,
-  Image,
-  Input,
-  Pressable,
-  Text,
-} from '@/components/ui';
-import { ReportContentModal } from '@/features/chatbot/components/report-content-modal';
-import type { ReportReason } from '@/features/chatbot/constants/report-reasons';
-import { ImageModelSelector } from '@/features/image-generator/components/image-model-selector';
-import { ImagePlaceholder } from '@/features/image-generator/components/image-placeholder';
-import { useImageGenerator } from '@/features/image-generator/hooks/use-image-generator';
-import { ImageSaveService } from '@/features/image-generator/services/image-save-service';
-import { translate } from '@/lib';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-export default function ImageGeneratorScreen() {
-  const {
-    prompt,
-    setPrompt,
-    isLoading,
-    generatedImageData,
-    generatedImageUri,
-    handleGenerateImage,
-  } = useImageGenerator();
-
-  const [isReportModalVisible, setIsReportModalVisible] = useState(false);
-  const theme = useThemeConfig();
-  // Use a ref to store a stable ID for the report modal
-  const reportIdRef = React.useRef<string>(`generated_image_${Date.now()}`);
-
-  const reportImageMutation = reportingApi.useReportAIGeneratedImage();
-
-  const handleSaveImage = async () => {
-    if (!generatedImageData) {
-      return;
-    }
-    await ImageSaveService.saveImageToGallery(generatedImageData.imageUri, {
-      prompt: generatedImageData.prompt,
-      provider: generatedImageData.provider,
-      model: generatedImageData.model,
-      remoteImageId: generatedImageData.imageId,
-      storageId: generatedImageData.storageId,
-    });
-  };
-
-  const handleReportImage = () => {
-    setIsReportModalVisible(true);
-  };
-
-  const handleReportSubmit = async (reportData: {
-    reason: ReportReason;
-    details?: string;
-  }) => {
-    if (!generatedImageData) {
-      return false;
-    }
-
-    try {
-      await reportImageMutation({
-        prompt: generatedImageData.prompt,
-        provider: generatedImageData.provider,
-        model: generatedImageData.model,
-        reason: reportData.reason,
-        details: reportData.details,
-        imageId: generatedImageData.imageId,
-        storageId: generatedImageData.storageId,
-      });
-
-      setIsReportModalVisible(false);
-      return true;
-    } catch (error) {
-      console.error('Failed to report image:', error);
-      return false;
-    }
-  };
-
-  const handleReportCancel = () => {
-    setIsReportModalVisible(false);
-  };
-
-  const isGenerateDisabled = isLoading || !prompt.trim();
-
-  // Create a mock message object for the ReportContentModal
-  const mockMessage = React.useMemo(() => {
-    const result =
-      isReportModalVisible && generatedImageData
-        ? {
-            id: generatedImageData.imageId ?? reportIdRef.current,
-            content: `Generated image with prompt: ${generatedImageData.prompt}`,
-            role: 'assistant' as const,
-            createdAt: new Date(),
-          }
-        : null;
-
-    console.log('🚩 [ImageGenerator] mockMessage created:', {
-      id: result?.id,
-      hasContent: !!result?.content,
-      isVisible: isReportModalVisible,
-      hasImageData: !!generatedImageData,
-    });
-
-    return result;
-  }, [isReportModalVisible, generatedImageData]);
-
-  const galleryButton = (
-    <Pressable
-      onPress={() => router.push('/image-generator/gallery')}
-      className="pl-2"
-      style={{ marginRight: 8 }}
-      testID="gallery-button"
-      accessibilityLabel="Open image gallery"
-      accessibilityRole="button"
-    >
-      <MaterialIcons
-        name="photo-library"
-        size={22}
-        color={theme.colors.foreground}
-      />
-    </Pressable>
-  );
-
-  return (
-    <>
-      <FocusAwareStatusBar />
-      <Stack.Screen
-        options={{
-          title: translate('image_generator.title'),
-          headerRight: () => galleryButton,
-        }}
-      />
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-        <View className="flex-1 px-4 pt-4">
-          <ScrollView
-            keyboardShouldPersistTaps="handled"
-            showsVerticalScrollIndicator={false}
-            automaticallyAdjustKeyboardInsets={true}
-          >
-            {/* Image Display Area */}
-            <View className="flex-1">
-              <View className="mb-4 flex-row items-center justify-between">
-                <Text className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
-                  Generated Image
-                </Text>
-                <ImageModelSelector testID="image-model-selector-inline" />
-              </View>
-              {generatedImageUri ? (
-                <Image
-                  source={{ uri: generatedImageUri }}
-                  className="aspect-square w-full rounded-lg"
-                  accessibilityRole="image"
-                  accessibilityLabel="Generated AI image"
-                  testID="generated-image"
-                  contentFit="contain"
-                />
-              ) : (
-                <ImagePlaceholder />
-              )}
-            </View>
-
-            {/* Input and Generate Section */}
-            <View className="gap-2 pt-8">
-              <View>
-                <Text className="mb-2 text-base font-semibold text-neutral-900 dark:text-neutral-100">
-                  Image Prompt
-                </Text>
-                <Input
-                  value={prompt}
-                  onChangeText={setPrompt}
-                  placeholder="Describe the image you want to generate..."
-                  multiline
-                  numberOfLines={3}
-                  textAlignVertical="top"
-                  testID="prompt-input"
-                  editable={!isLoading}
-                  accessibilityLabel="Image generation prompt input"
-                  accessibilityHint="Enter a description for the AI to generate an image"
-                />
-              </View>
-
-              <Button
-                onPress={handleGenerateImage}
-                disabled={isGenerateDisabled}
-                testID="generate-button"
-                accessibilityLabel="Generate image"
-                accessibilityHint="Generate an AI image based on your prompt"
-                accessibilityState={{ disabled: isGenerateDisabled }}
-                label={isLoading ? 'Generating...' : 'Generate Image'}
-                loading={isLoading}
-              />
-
-              {/* Action buttons for generated image */}
-              {generatedImageUri && !isLoading && (
-                <View className="flex-row gap-2">
-                  <Button
-                    onPress={handleSaveImage}
-                    variant="outline"
-                    testID="save-gallery-button"
-                    className="flex-1"
-                    label="Save to Gallery"
-                  />
-                  <Button
-                    onPress={handleReportImage}
-                    variant="outline"
-                    testID="report-image-button"
-                    className="flex-1"
-                    label="Report Image"
-                  />
-                </View>
-              )}
-            </View>
-          </ScrollView>
-          <ReportContentModal
-            message={mockMessage}
-            onSubmit={async (reportData) => {
-              const success = await handleReportSubmit(reportData);
-              return success;
-            }}
-            onCancel={handleReportCancel}
-          />
-        </View>
-      </TouchableWithoutFeedback>
-    </>
-  );
-}

package/2/apps/native/src/features/image-generator/components/gallery-image.tsx

@@ -1,25 +0,0 @@
-import type React from 'react';
-
-import { Image, Pressable } from '@/components/ui';
-import type { SavedImageMetadata } from '@/features/image-generator/services/image-gallery-service';
-
-export const GalleryImageItem: React.FC<{
-  image: SavedImageMetadata;
-  onPress(): void;
-  onLongPress(): void;
-}> = ({ image, onPress, onLongPress }) => (
-  <Pressable
-    onPress={onPress}
-    onLongPress={onLongPress}
-    className="w-full"
-    testID={`gallery-image-${image.id}`}
-    accessibilityRole="button"
-    accessibilityLabel={`Generated image from ${image.provider} using ${image.model}`}
-  >
-    <Image
-      source={{ uri: image.localUri }}
-      className="aspect-square w-full rounded-lg"
-      contentFit="cover"
-    />
-  </Pressable>
-);

package/2/apps/native/src/features/image-generator/components/image-detail-modal.tsx

@@ -1,215 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import React, { useMemo, useState } from 'react';
-import { Alert, ScrollView, View } from 'react-native';
-
-import { reportingApi } from '@/api-client/reporting';
-import { Button, Image, Modal, Text, useModal } from '@/components/ui';
-import { ReportContentModal } from '@/features/chatbot/components/report-content-modal';
-import type { ReportReason } from '@/features/chatbot/constants/report-reasons';
-import type { AppMessage } from '@/features/chatbot/types';
-import type { SavedImageMetadata } from '@/features/image-generator/services/image-gallery-service';
-
-type ImageDetailModalProps = {
-  image: SavedImageMetadata | null;
-  onDelete: (imageId: string) => void;
-  onClose: () => void;
-};
-
-/**
- * Modal component for displaying detailed image information
- */
-export const ImageDetailModal: React.FC<ImageDetailModalProps> = ({
-  image,
-  onDelete,
-  onClose,
-}) => {
-  const { ref, dismiss } = useModal();
-  const [isReportModalVisible, setIsReportModalVisible] = useState(false);
-
-  const reportImageMutation = reportingApi.useReportAIGeneratedImage();
-
-  React.useEffect(() => {
-    if (image) {
-      ref.current?.present();
-    } else {
-      ref.current?.dismiss();
-    }
-  }, [image, ref]);
-
-  const handleDelete = () => {
-    if (!image) return;
-
-    Alert.alert('Delete Image', 'Are you sure you want to delete this image?', [
-      { text: 'Cancel', style: 'cancel' },
-      {
-        text: 'Delete',
-        style: 'destructive',
-        onPress: () => {
-          onDelete(image.id);
-          dismiss();
-          onClose();
-        },
-      },
-    ]);
-  };
-
-  const handleReport = () => {
-    console.log('🚩 [ImageDetailModal] Report button pressed!');
-    setIsReportModalVisible(true);
-  };
-
-  const handleReportSubmit = async (reportData: {
-    reason: ReportReason;
-    details?: string;
-  }) => {
-    console.log('🚩 [ImageDetailModal] Report submit called with:', reportData);
-    if (!image) {
-      console.log('🚩 [ImageDetailModal] No image available for reporting');
-      return false;
-    }
-
-    try {
-      console.log('🚩 [ImageDetailModal] Submitting report for image:', {
-        prompt: image.prompt,
-        provider: image.provider,
-        model: image.model,
-      });
-
-      await reportImageMutation({
-        prompt: image.prompt,
-        provider: image.provider,
-        model: image.model,
-        reason: reportData.reason,
-        details: reportData.details,
-        imageId: image.remoteImageId,
-        storageId: image.storageId,
-      });
-
-      console.log('🚩 [ImageDetailModal] Report submitted successfully');
-      setIsReportModalVisible(false);
-      Alert.alert(
-        'Report Submitted',
-        'Thank you for your report. It has been submitted for review.',
-      );
-      return true;
-    } catch (error) {
-      console.error('🚩 [ImageDetailModal] Failed to report image:', error);
-      return false;
-    }
-  };
-
-  const handleReportCancel = () => {
-    console.log('🚩 [ImageDetailModal] Report cancelled');
-    setIsReportModalVisible(false);
-  };
-
-  const handleModalDismiss = () => {
-    onClose();
-  };
-
-  const formatDate = (timestamp: number): string => {
-    return new Date(timestamp).toLocaleString();
-  };
-
-  const reportMessage = useMemo<AppMessage | null>(() => {
-    if (!isReportModalVisible || !image) {
-      return null;
-    }
-    return {
-      id: image.remoteImageId ?? `gallery_image_${image.id}`,
-      role: 'assistant',
-      content: `Image generated with prompt: ${image.prompt}`,
-      createdAt: new Date(image.savedAt),
-    };
-  }, [image, isReportModalVisible]);
-
-  if (!image) return null;
-
-  return (
-    <>
-      <Modal
-        ref={ref}
-        snapPoints={['90%']}
-        title="Image Details"
-        onDismiss={handleModalDismiss}
-      >
-        <ScrollView className="flex-1 px-4 pb-4">
-          <View className="mb-6">
-            <View className="aspect-square w-full overflow-hidden rounded-lg bg-neutral-100 dark:bg-neutral-800">
-              <Image
-                source={{ uri: image.localUri }}
-                className="size-full"
-                contentFit="contain"
-              />
-            </View>
-          </View>
-
-          <View className="mb-4">
-            <Text className="mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
-              Prompt
-            </Text>
-            <Text className="text-base text-neutral-700 dark:text-neutral-300">
-              {image.prompt}
-            </Text>
-          </View>
-
-          <View className="mb-4">
-            <Text className="mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
-              Details
-            </Text>
-            <View className="gap-2">
-              <View className="flex-row justify-between">
-                <Text className="text-neutral-600 dark:text-neutral-400">
-                  Provider:
-                </Text>
-                <Text className="font-medium text-neutral-900 dark:text-neutral-100">
-                  {image.provider}
-                </Text>
-              </View>
-              <View className="flex-row justify-between">
-                <Text className="text-neutral-600 dark:text-neutral-400">
-                  Model:
-                </Text>
-                <Text className="font-medium text-neutral-900 dark:text-neutral-100">
-                  {image.model}
-                </Text>
-              </View>
-              <View className="flex-row justify-between">
-                <Text className="text-neutral-600 dark:text-neutral-400">
-                  Created:
-                </Text>
-                <Text className="font-medium text-neutral-900 dark:text-neutral-100">
-                  {formatDate(image.savedAt)}
-                </Text>
-              </View>
-            </View>
-          </View>
-
-          <View className="gap-3 pt-4">
-            <Button
-              variant="outline"
-              label="Report Image"
-              leftIcon={<Ionicons name="flag" size={16} color="#000000" />}
-              onPress={handleReport}
-              testID="report-image-button"
-              accessibilityLabel="Report this image for inappropriate content"
-            />
-            <Button
-              variant="destructive"
-              label="Delete Image"
-              onPress={handleDelete}
-              testID="delete-image-button"
-              accessibilityLabel="Delete this image"
-            />
-          </View>
-        </ScrollView>
-      </Modal>
-
-      <ReportContentModal
-        message={reportMessage}
-        onSubmit={handleReportSubmit}
-        onCancel={handleReportCancel}
-      />
-    </>
-  );
-};