managarten/nutriphi/apps/mobile/app/index.tsx

import { router } from 'expo-router';
import { SafeAreaView } from 'react-native-safe-area-context';

import { MealList } from '../components/meals/MealList';
import { FloatingActionButton } from '../components/ui/FloatingActionButton';
import { CameraModal } from '../components/camera/CameraModal';
import { MealWithItems } from '../types/Database';
import { useAppStore } from '../store/AppStore';

export default function Home() {
  const { toggleCameraModal, showCameraModal, cameraMode } = useAppStore();

  const handleMealPress = (meal: MealWithItems) => {
    router.push(`/meal/${meal.id}`);
  };

  const handleCameraPress = () => {
    toggleCameraModal(true, 'camera');
  };

  const handleGalleryPress = () => {
    toggleCameraModal(true, 'gallery');
  };

  return (
    <>
      <SafeAreaView className="flex-1 bg-gray-50 dark:bg-gray-900">
        <MealList onMealPress={handleMealPress} />

        {/* Camera Button (larger, centered) */}
        <FloatingActionButton
          onPress={handleCameraPress}
          sfSymbol="camera"
          fallbackIcon="camera"
          size="large"
          position="center"
        />

        {/* Gallery Button (smaller, right) */}
        <FloatingActionButton
          onPress={handleGalleryPress}
          sfSymbol="photo"
          fallbackIcon="image"
          size="normal"
          position="right"
        />
      </SafeAreaView>

      {showCameraModal && <CameraModal mode={cameraMode || 'camera'} />}
    </>
  );
}