vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/features/quick-actions/components/quick-actions-demo.tsx

@@ -0,0 +1,139 @@
+/**
+ * Quick Actions Demo Component
+ * Demonstrates quick actions functionality and management
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Alert, View } from 'react-native';
+
+import { Button, Text } from '@/components/ui';
+import type { QuickAction } from '@/core/quick-actions';
+
+import { useCurrentQuickAction } from '../hooks/use-quick-actions';
+import { quickActionsManager } from '../utils/quick-actions-manager';
+
+export function QuickActionsDemo() {
+  const [isSupported, setIsSupported] = useState<boolean | null>(null);
+  const [maxCount, setMaxCount] = useState<number | null>(null);
+  const [currentActions, setCurrentActions] = useState<QuickAction[]>([]);
+  const currentQuickAction = useCurrentQuickAction();
+
+  useEffect(() => {
+    const checkSupport = async () => {
+      const supported = await quickActionsManager.isSupported();
+      setIsSupported(supported);
+      setMaxCount(quickActionsManager.getMaxCount());
+      setCurrentActions(quickActionsManager.getCurrentActions());
+    };
+
+    checkSupport();
+  }, []);
+
+  const handleSetDefaultActions = async () => {
+    try {
+      await quickActionsManager.resetToDefaults();
+      setCurrentActions(quickActionsManager.getCurrentActions());
+      Alert.alert('Success', 'Default quick actions set!');
+    } catch {
+      Alert.alert('Error', 'Failed to set default actions');
+    }
+  };
+
+  const handleSetFeatureActions = async () => {
+    try {
+      await quickActionsManager.setFeatureActions();
+      setCurrentActions(quickActionsManager.getCurrentActions());
+      Alert.alert('Success', 'Feature quick actions set!');
+    } catch {
+      Alert.alert('Error', 'Failed to set feature actions');
+    }
+  };
+
+  const handleAddCustomAction = async () => {
+    try {
+      const customAction: QuickAction = {
+        id: 'custom-action',
+        title: 'Custom Action',
+        subtitle: 'This is a custom action',
+        icon: 'symbol:star.fill',
+        params: {
+          href: '/(protected)/(tabs)/settings',
+        },
+      };
+
+      await quickActionsManager.addAction(customAction);
+      setCurrentActions(quickActionsManager.getCurrentActions());
+      Alert.alert('Success', 'Custom action added!');
+    } catch {
+      Alert.alert('Error', 'Failed to add custom action');
+    }
+  };
+
+  if (isSupported === null) {
+    return (
+      <View className="p-4">
+        <Text>Checking quick actions support...</Text>
+      </View>
+    );
+  }
+
+  if (!isSupported) {
+    return (
+      <View className="p-4">
+        <Text className="text-red-500">
+          Quick actions are not supported on this device
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View className="gap-y-4 p-4">
+      <Text className="text-xl font-bold">Quick Actions Demo</Text>
+
+      <View className="gap-y-2">
+        <Text className="font-semibold">Device Info:</Text>
+        <Text>• Supported: {isSupported ? 'Yes' : 'No'}</Text>
+        <Text>• Max Count: {maxCount ?? 'Unlimited'}</Text>
+        <Text>• Current Actions: {currentActions.length}</Text>
+      </View>
+
+      {currentQuickAction && (
+        <View className="rounded-lg bg-blue-50 p-3">
+          <Text className="font-semibold text-blue-800">
+            Last Quick Action:
+          </Text>
+          <Text className="text-blue-600">{currentQuickAction.title}</Text>
+          {currentQuickAction.subtitle && (
+            <Text className="text-sm text-blue-500">
+              {currentQuickAction.subtitle}
+            </Text>
+          )}
+        </View>
+      )}
+
+      <View className="gap-y-3">
+        <Button label="Set Default Actions" onPress={handleSetDefaultActions} />
+        <Button label="Set Feature Actions" onPress={handleSetFeatureActions} />
+        <Button label="Add Custom Action" onPress={handleAddCustomAction} />
+      </View>
+
+      <View className="gap-y-2">
+        <Text className="font-semibold">Current Actions:</Text>
+        {currentActions.map((action, index) => (
+          <View key={action.id} className="rounded bg-neutral-50 p-2">
+            <Text className="font-medium">
+              {index + 1}. {action.title}
+            </Text>
+            {action.subtitle && (
+              <Text className="text-sm text-neutral-600">
+                {action.subtitle}
+              </Text>
+            )}
+            <Text className="text-xs text-neutral-500">ID: {action.id}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}

package/2/apps/native/src/features/quick-actions/config/default-actions.ts

@@ -0,0 +1,83 @@
+/**
+ * Default Quick Actions Configuration
+ * Pre-configured quick actions for common app features
+ */
+
+import type { QuickAction } from '@/core/quick-actions';
+
+export const DEFAULT_QUICK_ACTIONS: QuickAction[] = [
+  {
+    id: 'home',
+    title: 'Home',
+    icon: 'home',
+    params: {
+      href: '/(protected)/(tabs)',
+    },
+  },
+  {
+    id: 'profile',
+    title: 'Profile',
+    icon: 'contact',
+    params: {
+      href: '/(protected)/(tabs)/profile',
+    },
+  },
+  {
+    id: 'settings',
+    title: 'Settings',
+    icon: 'symbol:gear',
+    params: {
+      href: '/(protected)/(tabs)/settings',
+    },
+  },
+  {
+    id: 'search',
+    title: 'Search',
+    icon: 'search',
+    params: {
+      href: '/(protected)/(tabs)',
+    },
+  },
+];
+
+/**
+ * Feature-specific quick actions
+ */
+export const FEATURE_QUICK_ACTIONS: QuickAction[] = [
+  {
+    id: 'image-generator',
+    title: 'AI Image Generator',
+    subtitle: 'Create images with AI',
+    icon: 'symbol:photo.badge.plus',
+    params: {
+      href: '/(root)/(protected)/image-generator/',
+    },
+  },
+  {
+    id: 'chatbot',
+    title: 'AI Chat',
+    subtitle: 'Chat with AI assistant',
+    icon: 'symbol:message',
+    params: {
+      href: '/(root)/(protected)/chatbot/',
+    },
+  },
+  {
+    id: 'voice-notes',
+    title: 'Voice Notes',
+    subtitle: 'Record audio notes',
+    icon: 'symbol:mic',
+    params: {
+      href: '/(root)/(protected)/audio-recorder/',
+    },
+  },
+  {
+    id: 'charts',
+    title: 'Charts',
+    subtitle: 'View data visualizations',
+    icon: 'symbol:chart.bar',
+    params: {
+      href: '/(root)/(protected)/charts/',
+    },
+  },
+];

package/2/apps/native/src/features/quick-actions/hooks/use-quick-actions.ts

@@ -0,0 +1,45 @@
+/**
+ * Quick Actions Hooks
+ * React hooks for managing quick actions
+ */
+
+import {
+  useQuickAction,
+  useQuickActionCallback,
+} from 'expo-quick-actions/hooks';
+import { useRouter } from 'expo-router';
+import { useEffect } from 'react';
+
+import type { QuickAction } from '@/core/quick-actions';
+
+import { quickActionsManager } from '../utils/quick-actions-manager';
+
+/**
+ * Hook to handle quick action routing
+ * Automatically navigates when a quick action with href param is triggered
+ */
+export function useQuickActionRouting() {
+  const router = useRouter();
+
+  useQuickActionCallback((action: QuickAction) => {
+    if (action.params?.href && typeof action.params.href === 'string') {
+      router.push(action.params.href as any);
+    }
+  });
+}
+
+/**
+ * Hook to get the current quick action
+ */
+export function useCurrentQuickAction() {
+  return useQuickAction();
+}
+
+/**
+ * Hook to set up quick actions
+ */
+export function useSetupQuickActions(actions: QuickAction[]) {
+  useEffect(() => {
+    void quickActionsManager.setActions(actions);
+  }, [actions]);
+}

package/2/apps/native/src/features/quick-actions/index.ts

@@ -0,0 +1,4 @@
+export * from './components/quick-actions-demo';
+export * from './config/default-actions';
+export * from './hooks/use-quick-actions';
+export * from './utils/quick-actions-manager';

package/2/apps/native/src/features/quick-actions/utils/quick-actions-manager.ts

@@ -0,0 +1,105 @@
+/**
+ * Quick Actions Manager
+ * Utility for managing and customizing quick actions
+ */
+
+import type { QuickAction } from '@/core/quick-actions';
+import { quickActionsAdapter } from '@/core/quick-actions';
+
+import {
+  DEFAULT_QUICK_ACTIONS,
+  FEATURE_QUICK_ACTIONS,
+} from '../config/default-actions';
+
+export class QuickActionsManager {
+  private static instance: QuickActionsManager;
+  private currentActions: QuickAction[] = [];
+
+  static getInstance(): QuickActionsManager {
+    if (!QuickActionsManager.instance) {
+      QuickActionsManager.instance = new QuickActionsManager();
+    }
+    return QuickActionsManager.instance;
+  }
+
+  /**
+   * Set custom quick actions
+   */
+  async setActions(actions: QuickAction[]): Promise<void> {
+    const isSupported = await quickActionsAdapter.isSupported();
+    if (!isSupported) {
+      this.currentActions = [];
+      return;
+    }
+
+    const maxCount = quickActionsAdapter.getMaxCount();
+    const limitedActions = maxCount ? actions.slice(0, maxCount) : actions;
+
+    this.currentActions = limitedActions;
+    await quickActionsAdapter.setItems(limitedActions);
+  }
+
+  /**
+   * Add a single quick action
+   */
+  async addAction(action: QuickAction): Promise<void> {
+    const maxCount = quickActionsAdapter.getMaxCount();
+    const newActions = [...this.currentActions, action];
+
+    if (maxCount && newActions.length > maxCount) {
+      console.warn(
+        `[QuickActions] Maximum ${maxCount} actions allowed. Removing oldest action.`,
+      );
+      newActions.shift(); // Remove first action
+    }
+
+    await this.setActions(newActions);
+  }
+
+  /**
+   * Remove a quick action by ID
+   */
+  async removeAction(actionId: string): Promise<void> {
+    const filteredActions = this.currentActions.filter(
+      (action) => action.id !== actionId,
+    );
+    await this.setActions(filteredActions);
+  }
+
+  /**
+   * Get current actions
+   */
+  getCurrentActions(): QuickAction[] {
+    return [...this.currentActions];
+  }
+
+  /**
+   * Reset to default actions
+   */
+  async resetToDefaults(): Promise<void> {
+    await this.setActions(DEFAULT_QUICK_ACTIONS);
+  }
+
+  /**
+   * Set feature-specific actions
+   */
+  async setFeatureActions(): Promise<void> {
+    await this.setActions(FEATURE_QUICK_ACTIONS);
+  }
+
+  /**
+   * Check if quick actions are supported
+   */
+  async isSupported(): Promise<boolean> {
+    return await quickActionsAdapter.isSupported();
+  }
+
+  /**
+   * Get maximum number of actions supported
+   */
+  getMaxCount(): number | null {
+    return quickActionsAdapter.getMaxCount();
+  }
+}
+
+export const quickActionsManager = QuickActionsManager.getInstance();

package/2/apps/native/src/features/quiz/components/question.tsx

@@ -0,0 +1,67 @@
+import { MotiView } from 'moti';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Animated, { Layout } from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+
+import { QuestionMode, quizConfig } from '../config';
+
+const Question = ({ question, onOptionSelect, selectedOption }) => {
+  return (
+    <MotiView
+      from={{ opacity: 0, translateY: 50 }}
+      animate={{ opacity: 1, translateY: 0 }}
+      exit={{ opacity: 0, translateY: -50 }}
+      transition={{
+        type: 'timing',
+        duration: quizConfig.animation.duration,
+      }}
+      className="flex-1"
+    >
+      <Text className="my-8 text-center text-2xl font-bold">
+        {question.text}
+      </Text>
+      <Animated.View
+        className="flex-1 justify-center gap-y-4"
+        layout={Layout.springify().duration(quizConfig.animation.duration)}
+      >
+        {question.options.map((option) => (
+          <TouchableOpacity
+            key={option.id}
+            onPress={() => onOptionSelect(option)}
+          >
+            <MotiView
+              from={{ scale: 1 }}
+              animate={{ scale: selectedOption === option ? 1.02 : 1 }}
+              transition={{
+                type: 'timing',
+                duration: quizConfig.animation.duration,
+              }}
+              className={`rounded-lg border p-4 ${selectedOption === option ? 'border-primary-500 bg-primary-500/20 dark:border-primary-500 dark:bg-primary-900/20' : 'border-neutral-300'}`}
+            >
+              <Text className="text-lg">{option.text}</Text>
+              {selectedOption === option &&
+                question.mode === QuestionMode.ManualAdvance && (
+                  <MotiView
+                    from={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    transition={{
+                      type: 'timing',
+                      duration: quizConfig.animation.duration,
+                    }}
+                  >
+                    <Text className="mt-2 text-sm text-neutral-600">
+                      {option.note}
+                    </Text>
+                  </MotiView>
+                )}
+            </MotiView>
+          </TouchableOpacity>
+        ))}
+      </Animated.View>
+    </MotiView>
+  );
+};
+
+export default Question;

package/2/apps/native/src/features/quiz/config.ts

@@ -0,0 +1,11 @@
+export enum QuestionMode {
+  AutoAdvance = 'auto-advance',
+  ManualAdvance = 'manual-advance',
+}
+
+export const quizConfig = {
+  showContinueButton: true, // This can be configured based on the desired behavior
+  animation: {
+    duration: 300,
+  },
+};

package/2/apps/native/src/features/quiz/index.tsx

@@ -0,0 +1,133 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import { AnimatePresence, MotiView } from 'moti';
+import { useState } from 'react';
+import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { Button, Text } from '@/components/ui';
+
+import Question from './components/question';
+import { QuestionMode, quizConfig } from './config';
+
+const ProgressBar = ({ progress, handlePreviousQuestion }) => (
+  <View className="mr-3 flex flex-row items-center">
+    <Button
+      size="icon"
+      onPress={handlePreviousQuestion}
+      className="mb-5 mr-3 mt-0 shrink-0 !bg-transparent"
+    >
+      <Ionicons name="arrow-back" size={24} color="#666" />
+    </Button>
+    <View className="mb-5 h-3 flex-1 overflow-hidden rounded-xl bg-neutral-200 dark:bg-neutral-800">
+      <MotiView
+        from={{ width: '0%' }}
+        animate={{ width: `${progress * 100}%` }}
+        transition={{
+          type: 'timing',
+          duration: quizConfig.animation.duration,
+        }}
+        className="h-full bg-primary-500"
+      />
+    </View>
+  </View>
+);
+
+const Quiz = ({ questions }) => {
+  const router = useRouter();
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [showContinue, setShowContinue] = useState(false);
+
+  const handleOptionSelect = (option) => {
+    setSelectedOption(option);
+    const currentQuestionMode = questions[currentQuestionIndex].mode;
+    if (currentQuestionMode === QuestionMode.AutoAdvance) {
+      setTimeout(() => {
+        handleNextQuestion();
+      }, quizConfig.animation.duration + 200);
+    } else {
+      setShowContinue(true);
+    }
+  };
+
+  const handleNextQuestion = () => {
+    setSelectedOption(null);
+    setShowContinue(false);
+    setCurrentQuestionIndex(currentQuestionIndex + 1);
+  };
+
+  const handlePreviousQuestion = () => {
+    if (currentQuestionIndex === 0) {
+      router.back();
+      return;
+    }
+    setSelectedOption(null);
+    setShowContinue(false);
+    setCurrentQuestionIndex(currentQuestionIndex - 1);
+  };
+
+  const progress = currentQuestionIndex / questions.length;
+
+  if (currentQuestionIndex >= questions.length) {
+    return (
+      <SafeAreaView className="flex-1 p-5">
+        <Text className="mb-5 text-xl font-bold">Quiz Complete!</Text>
+      </SafeAreaView>
+    );
+  }
+
+  const currentQuestion = questions[currentQuestionIndex];
+
+  return (
+    <SafeAreaView className="flex-1 p-5">
+      <ProgressBar
+        progress={progress}
+        handlePreviousQuestion={handlePreviousQuestion}
+      />
+      <AnimatePresence exitBeforeEnter>
+        <Question
+          key={currentQuestionIndex}
+          question={currentQuestion}
+          onOptionSelect={handleOptionSelect}
+          selectedOption={selectedOption}
+        />
+      </AnimatePresence>
+
+      {quizConfig.showContinueButton &&
+        showContinue &&
+        currentQuestion.mode === QuestionMode.ManualAdvance && (
+          <MotiView
+            from={{ opacity: 0, translateY: 50 }}
+            animate={{ opacity: 1, translateY: 0 }}
+            transition={{
+              type: 'timing',
+              duration: quizConfig.animation.duration,
+            }}
+            className="mt-8"
+          >
+            <View className="flex-row gap-3">
+              {/* {currentQuestionIndex > 0 && (
+                <Button
+                  variant="outline"
+                  onPress={handlePreviousQuestion}
+                  className="flex-shrink-0"
+                >
+                  <Ionicons name="arrow-back" size={20} color="#666" />
+                </Button>
+              )} */}
+              <Button
+                variant="secondary"
+                onPress={handleNextQuestion}
+                label="Continue"
+                className="flex-1"
+                textClassName="text-white"
+              />
+            </View>
+          </MotiView>
+        )}
+    </SafeAreaView>
+  );
+};
+
+export default Quiz;

package/2/apps/native/src/features/settings/ui/debug-info.tsx

@@ -0,0 +1,75 @@
+import { Env } from '@env';
+import { useNetInfo } from '@react-native-community/netinfo';
+import * as Device from 'expo-device';
+import type React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useConvexAuth } from '@/features/authentication/services';
+import { useDeviceIdentifier } from '@/lib/hooks/use-device-identifier';
+
+/**
+ * Simple debug item component for displaying debug information
+ */
+const DebugItem = ({ label, value }: { label: string; value: string }) => (
+  <View className="flex-1 flex-row items-center justify-between p-3.5">
+    <Text className="text-base">{label}</Text>
+    <Text className="text-neutral-600 dark:text-white">{value}</Text>
+  </View>
+);
+
+/**
+ * Simple debug container component with regular string title
+ */
+const DebugContainer = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <>
+    <Text className="pb-2 pt-4 text-lg font-medium">{title}</Text>
+    <View className="rounded-md border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-900">
+      {children}
+    </View>
+  </>
+);
+
+/**
+ * Debug info component that displays development information
+ * Only visible when APP_ENV is 'local'
+ */
+export const DebugInfo = () => {
+  const { userQuery } = useConvexAuth();
+  const deviceId = useDeviceIdentifier();
+  const netInfo = useNetInfo();
+
+  // Only render in local environment
+  if (Env.APP_ENV !== 'local') {
+    return null;
+  }
+
+  const user = userQuery;
+  const isGuest = !user || user.isAnonymous;
+  const connectionType = netInfo.type || 'unknown';
+  const isOnline = netInfo.isConnected ? 'Yes' : 'No';
+  const deviceName = Device.deviceName || 'Unknown';
+  const osName = Device.osName || 'Unknown';
+  const osVersion = Device.osVersion || 'Unknown';
+
+  return (
+    <DebugContainer title="Developer Debug Info">
+      <DebugItem label="User ID" value={user?._id || 'N/A'} />
+      <DebugItem
+        label="Account Type"
+        value={isGuest ? 'Guest' : 'Registered'}
+      />
+      <DebugItem label="Device ID" value={deviceId || 'Loading...'} />
+      <DebugItem label="Device Name" value={deviceName} />
+      <DebugItem label="OS Name & Version" value={`${osName} ${osVersion}`} />
+      <DebugItem label="Is Online" value={isOnline} />
+      <DebugItem label="Connection Type" value={connectionType} />
+    </DebugContainer>
+  );
+};

package/2/apps/native/src/features/settings/ui/dev-tools.tsx

@@ -0,0 +1 @@
+// ... existing code ...