Lovable Prompts for Building a Recipe App

Implement the servings scaler and fraction formatter in RecipeDetail.tsx:

1. Install fraction.js: it is already available as a module — `import Fraction from 'fraction.js';`

2. Create src/lib/formatQuantity.ts:
```typescript
import Fraction from 'fraction.js';
export function formatQuantity(qty: number | null, multiplier: number): string {
  if (qty === null) return '';
  const scaled = qty * multiplier;
  const frac = new Fraction(scaled).simplify(0.01);
  const whole = Math.floor(frac.valueOf());
  const remainder = frac.sub(whole);
  if (remainder.valueOf() === 0) return String(whole || '');
  const fracStr = remainder.toFraction();
  return whole > 0 ? `${whole} ${fracStr}` : fracStr;
}
```

3. In RecipeDetail.tsx, add state: `const [servings, setServings] = useState(recipe.servings);`
The multiplier is `servings / recipe.servings`.

4. ServingsScaler.tsx:
```typescript
export function ServingsScaler({ servings, onChange }: { servings: number; onChange: (n: number) => void }) {
  return (
    <div className='flex items-center gap-3'>
      <button onClick={() => onChange(Math.max(1, servings - 1))} className='w-8 h-8 rounded-full border'>-</button>
      <span className='font-medium'>{servings} servings</span>
      <button onClick={() => onChange(servings + 1)} className='w-8 h-8 rounded-full border'>+</button>
    </div>
  );
}
```

5. In IngredientList.tsx, use formatQuantity for each ingredient's qty display:
```typescript
<span>{formatQuantity(ingredient.qty, multiplier)} {ingredient.unit} {ingredient.name}</span>
```

Verify: with 4 servings as base, set to 3 → '1 cup' should become '3/4 cup', '1/3 cup' should become '1/4 cup'.

Upgrade the recipe submission form to support image upload with client-side compression:

1. Install browser-image-compression: it is available as a module for client-side use.

2. In RecipeForm.tsx, on every image file input (cover photo and step images), compress before upload:
```typescript
import imageCompression from 'browser-image-compression';
const compressed = await imageCompression(file, { maxSizeMB: 0.3, maxWidthOrHeight: 1600 });
const path = `recipes/${recipeId}/${type}/${filename}`;
const { error } = await supabase.storage.from('recipe-images').upload(path, compressed);
```

3. After upload, store only the path (not the full URL) in cover_image_path or steps.image_path. Compute the public URL on read:
```typescript
const { data } = supabase.storage.from('recipe-images').getPublicUrl(path);
// data.publicUrl is the full CDN URL
```

4. Add a drag-and-drop zone for the cover photo (shadcn's file input or a custom drop zone with onDrop).

5. For step images, show a small 'Add photo' button next to each step row in the step editor. Show a thumbnail preview after upload.

6. Show upload progress: `const progress = (loaded / total * 100).toFixed(0) + '%';` using the supabase.storage.upload() onUploadProgress callback.

Verify: upload a 10MB phone photo — it should compress to under 300KB before uploading.

Add a shopping list feature: signed-in users select multiple saved recipes and generate a combined ingredient list.

1. In Favorites.tsx, add a multi-select mode (checkbox on each RecipeCard). Show a 'Generate Shopping List' button when 2+ recipes are selected.

2. Create src/pages/ShoppingList.tsx that receives a list of recipe_ids (via router state or query params). Fetches all ingredients for those recipes:
```typescript
const { data } = await supabase.from('ingredients')
  .select('*, recipes(servings, title)')
  .in('recipe_id', recipeIds)
  .order('name');
```

3. Combine ingredients by (name, unit): group rows with the same name and unit, sum their qty values (scaled by the recipe's servings if needed). Use a Map:
```typescript
const combined = new Map<string, { qty: number; unit: string; name: string; sources: string[] }>();
for (const ing of ingredients) {
  const key = `${ing.name}|||${ing.unit || ''}`;
  const existing = combined.get(key);
  if (existing) {
    existing.qty += ing.qty ?? 0;
    existing.sources.push(ing.recipes.title);
  } else {
    combined.set(key, { qty: ing.qty ?? 0, unit: ing.unit || '', name: ing.name, sources: [ing.recipes.title] });
  }
}
```

4. Render the combined list grouped by category (if available) or alphabetically. Each row shows combined qty (formatted with formatQuantity) + unit + name + '(for RecipeA, RecipeB)'.

5. Add a 'Print list' button that calls window.print() on a print-optimized stylesheet.

Add an 'Import recipe from URL' button to the Submit page that fetches a recipe URL, extracts structured ingredients and steps, and pre-fills the submission form.

1. Create supabase/functions/parse-recipe-url/index.ts:
   - Receive { url } in the request body.
   - Fetch the URL with `await fetch(url)` and get the HTML text.
   - Call Claude Haiku 4.5 (the fastest Anthropic model for structured extraction):
```typescript
const anthropicRes = await fetch('https://api.anthropic.com/v1/messages', {
  method: 'POST',
  headers: { 'x-api-key': Deno.env.get('ANTHROPIC_API_KEY'), 'anthropic-version': '2024-06-01', 'content-type': 'application/json' },
  body: JSON.stringify({
    model: 'claude-haiku-4-5',
    max_tokens: 2000,
    messages: [{ role: 'user', content: `Extract recipe from this HTML and return JSON with: title, summary, prep_min, cook_min, servings, dietary_tags (array), ingredients (array of {qty, unit, name, notes}), steps (array of {text, time_min}). HTML: ${html.slice(0, 8000)}` }]
  })
});
```
   - Parse the JSON from the response content.
   - Return the structured recipe data.

2. In Submit.tsx, add an 'Import from URL' modal at the top of the form. On submit, call the edge function and pre-fill all form fields. Allow the user to review and edit before submitting.

3. Add ANTHROPIC_API_KEY to Cloud → Secrets (never as VITE_ANTHROPIC_KEY, never in /src/ files).

Verify by importing a recipe from AllRecipes.com — the form should pre-fill with title, ingredients, and steps.

Add a print-optimized view at /recipe/[slug]/print that renders the recipe in a clean, paper-friendly layout.

1. Create src/pages/RecipePrint.tsx — renders the full recipe with:
   - Large recipe title and metadata (prep time, cook time, servings, difficulty) in a single header row.
   - Two-column layout: ingredients left, steps right (on paper).
   - All step images and the cover image excluded (use CSS @media print to hide images, or include a low-res version).
   - Font: serif font (Playfair Display or Georgia) at 12pt for print.
   - No nav, no sidebar, no footer.

2. Add a print stylesheet via a `<style>` block with `@media print { .no-print { display: none; } body { font-size: 12pt; } }`.

3. Add a 'Print recipe' button on the recipe detail page (RecipeDetail.tsx) that opens /recipe/[slug]/print in a new tab.

4. On the print page, call `window.print()` automatically after a 500ms delay so the browser print dialog opens immediately.

Verify: open the print page and preview — it should show a clean two-column layout at 12pt with no nav chrome.