\n \n\n\n\n",[],[138,188],"b8f8fb10-d3a9-11f0-897f-42dde27851f2",["D",1765138635470],[],[138,32],"b8e5888c-d3a9-11f0-a23f-42dde27851f2","RecipesView.tsx","b8e58968-d3a9-11f0-a23f-42dde27851f2","b86d06aa-d3a9-11f0-b1e3-42dde27851f2",12,["D",1765138635335],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Recipe, CreateRecipeRequest } from \"../../shared/types.ts\";\nimport { RecipeForm } from \"./RecipeForm.tsx\";\n\ninterface RecipesViewProps {\n recipes: Recipe[];\n onRecipesChange: () => Promise;\n}\n\nexport function RecipesView({ recipes, onRecipesChange }: RecipesViewProps) {\n const [showForm, setShowForm] = useState(false);\n const [editingRecipe, setEditingRecipe] = useState(null);\n const [searchQuery, setSearchQuery] = useState('');\n const [expandedRecipe, setExpandedRecipe] = useState(null);\n\n const filteredRecipes = recipes.filter(recipe =>\n recipe.title.toLowerCase().includes(searchQuery.toLowerCase()) ||\n recipe.ingredients.some(i => i.name.toLowerCase().includes(searchQuery.toLowerCase()))\n );\n\n const handleCreateRecipe = async (data: CreateRecipeRequest) => {\n const response = await fetch('/api/recipes', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data),\n });\n \n if (response.ok) {\n await onRecipesChange();\n setShowForm(false);\n }\n };\n\n const handleUpdateRecipe = async (data: CreateRecipeRequest) => {\n if (!editingRecipe) return;\n \n const response = await fetch(`/api/recipes/${editingRecipe.id}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data),\n });\n \n if (response.ok) {\n await onRecipesChange();\n setEditingRecipe(null);\n }\n };\n\n const handleDuplicate = async (recipeId: string) => {\n const response = await fetch(`/api/recipes/${recipeId}/duplicate`, {\n method: 'POST',\n });\n \n if (response.ok) {\n await onRecipesChange();\n }\n };\n\n const handleDelete = async (recipeId: string) => {\n const response = await fetch(`/api/recipes/${recipeId}`, {\n method: 'DELETE',\n });\n \n if (response.ok) {\n await onRecipesChange();\n if (expandedRecipe === recipeId) {\n setExpandedRecipe(null);\n }\n }\n };\n\n return (\n

\n {/* Header */}\n

Recipes

{recipes.length} recipes saved

\n setShowForm(true)}\n className=\"btn-primary flex items-center gap-2\"\n >\n \n Add Recipe\n \n

\n \n {/* Search */}\n

\n setSearchQuery(e.target.value)}\n className=\"input max-w-md\"\n />\n

\n \n {/* Recipe list */}\n

\n {filteredRecipes.length === 0 ? (\n

\n 📖\n

\n {searchQuery ? 'No recipes found' : 'No recipes yet'}\n

\n {searchQuery ? 'Try a different search term' : 'Add your first recipe to get started'}\n

\n ) : (\n

\n {filteredRecipes.map((recipe) => (\n \n {/* Recipe header */}\n setExpandedRecipe(expandedRecipe === recipe.id ? null : recipe.id)}\n >\n

{recipe.title}

\n {recipe.ingredients.length} ingredients · {recipe.servingSize} serving{recipe.servingSize !== 1 ? 's' : ''}\n

\n \n \n \n

\n \n {/* Nutrition preview */}\n {recipe.nutrition && (\n

\n {recipe.nutrition.calories && (\n \n {recipe.nutrition.calories} kcal\n \n )}\n {recipe.nutrition.protein && (\n \n {recipe.nutrition.protein}g protein\n \n )}\n

\n )}\n

\n \n {/* Expanded content */}\n {expandedRecipe === recipe.id && (\n

\n {/* URL */}\n {recipe.url && (\n

\n \n \n View original recipe\n \n

\n )}\n \n {/* Ingredients */}\n

Ingredients

\n \n {ing.amount && {ing.amount}}\n {ing.unit && {ing.unit}}\n {ing.name}\n

\n \n {/* Instructions */}\n {recipe.instructions && (\n

Instructions

{recipe.instructions}

\n )}\n \n {/* Nutrition details */}\n {recipe.nutrition && (\n

Nutrition (per serving)

{recipe.nutrition.calories || '-'}

kcal

{recipe.nutrition.protein || '-'}g

protein

{recipe.nutrition.carbs || '-'}g

carbs

{recipe.nutrition.fat || '-'}g

fat

{recipe.nutrition.fiber || '-'}g

fiber

\n )}\n \n {/* Actions */}\n

\n setEditingRecipe(recipe)}\n className=\"btn-secondary text-sm flex-1\"\n >\n Edit\n \n handleDuplicate(recipe.id)}\n className=\"btn-secondary text-sm flex-1\"\n >\n Duplicate\n \n handleDelete(recipe.id)}\n className=\"btn-secondary text-sm text-red-600 hover:bg-red-50\"\n >\n Delete\n \n

\n )}\n

\n ))}\n

\n )}\n \n \n {/* Create recipe modal */}\n {showForm && (\n setShowForm(false)}\n />\n )}\n \n {/* Edit recipe modal */}\n {editingRecipe && (\n setEditingRecipe(null)}\n />\n )}\n \n );\n}\n\n",[],[138,208,200],"components","b8ea0858-d3a9-11f0-8d63-42dde27851f2","RecipeForm.tsx","b8ea08ee-d3a9-11f0-8d63-42dde27851f2",13,["D",1765138635361],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Recipe, CreateRecipeRequest } from \"../../shared/types.ts\";\n\ninterface Ingredient {\n name: string;\n amount: string;\n unit: string;\n}\n\ninterface RecipeFormProps {\n recipe?: Recipe;\n onSubmit: (data: CreateRecipeRequest) => Promise;\n onClose: () => void;\n}\n\nexport function RecipeForm({ recipe, onSubmit, onClose }: RecipeFormProps) {\n const [title, setTitle] = useState(recipe?.title || '');\n const [url, setUrl] = useState(recipe?.url || '');\n const [servingSize, setServingSize] = useState(recipe?.servingSize?.toString() || '1');\n const [instructions, setInstructions] = useState(recipe?.instructions || '');\n const [ingredients, setIngredients] = useState(\n recipe?.ingredients.map(i => ({\n name: i.name,\n amount: i.amount?.toString() || '',\n unit: i.unit || '',\n })) || [{ name: '', amount: '', unit: '' }]\n );\n const [showNutrition, setShowNutrition] = useState(!!recipe?.nutrition);\n const [nutrition, setNutrition] = useState({\n calories: recipe?.nutrition?.calories?.toString() || '',\n protein: recipe?.nutrition?.protein?.toString() || '',\n carbs: recipe?.nutrition?.carbs?.toString() || '',\n fat: recipe?.nutrition?.fat?.toString() || '',\n fiber: recipe?.nutrition?.fiber?.toString() || '',\n });\n const [submitting, setSubmitting] = useState(false);\n\n const addIngredient = () => {\n setIngredients([...ingredients, { name: '', amount: '', unit: '' }]);\n };\n\n const removeIngredient = (index: number) => {\n setIngredients(ingredients.filter((_, i) => i !== index));\n };\n\n const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n const updated = [...ingredients];\n updated[index][field] = value;\n setIngredients(updated);\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!title.trim()) return;\n \n setSubmitting(true);\n \n try {\n const data: CreateRecipeRequest = {\n title: title.trim(),\n url: url.trim() || null,\n servingSize: parseInt(servingSize) || 1,\n instructions: instructions.trim() || null,\n ingredients: ingredients\n .filter(i => i.name.trim())\n .map(i => ({\n name: i.name.trim(),\n amount: i.amount ? parseFloat(i.amount) : null,\n unit: i.unit.trim() || null,\n })),\n nutrition: showNutrition ? {\n calories: nutrition.calories ? parseFloat(nutrition.calories) : null,\n protein: nutrition.protein ? parseFloat(nutrition.protein) : null,\n carbs: nutrition.carbs ? parseFloat(nutrition.carbs) : null,\n fat: nutrition.fat ? parseFloat(nutrition.fat) : null,\n fiber: nutrition.fiber ? parseFloat(nutrition.fiber) : null,\n } : null,\n };\n \n await onSubmit(data);\n } finally {\n setSubmitting(false);\n }\n };\n\n return (\n

\n e.stopPropagation()}\n >\n

\n {/* Header */}\n

\n {recipe ? 'Edit Recipe' : 'Add Recipe'}\n

\n \n \n \n

\n \n {/* Body */}\n

\n {/* Title */}\n

\n \n Recipe Title *\n \n setTitle(e.target.value)}\n className=\"input\"\n placeholder=\"e.g., Chicken Stir Fry\"\n required\n />\n

\n \n {/* URL */}\n

\n \n Recipe URL (optional)\n \n setUrl(e.target.value)}\n className=\"input\"\n placeholder=\"https://...\"\n />\n

\n \n {/* Serving size */}\n

\n \n Serving Size\n \n setServingSize(e.target.value)}\n className=\"input w-32\"\n min=\"1\"\n />\n

\n \n {/* Ingredients */}\n

\n \n Ingredients\n \n

\n {ingredients.map((ing, index) => (\n

\n updateIngredient(index, 'amount', e.target.value)}\n className=\"input w-20\"\n placeholder=\"Qty\"\n />\n updateIngredient(index, 'unit', e.target.value)}\n className=\"input w-24\"\n placeholder=\"Unit\"\n />\n updateIngredient(index, 'name', e.target.value)}\n className=\"input flex-1\"\n placeholder=\"Ingredient name\"\n />\n {ingredients.length > 1 && (\n removeIngredient(index)}\n className=\"text-gray-400 hover:text-red-500 transition-colors px-2\"\n >\n \n \n )}\n

\n ))}\n

\n \n \n Add ingredient\n \n

\n \n {/* Instructions */}\n

\n \n Instructions (optional)\n \n setInstructions(e.target.value)}\n className=\"input min-h-[100px] resize-y\"\n placeholder=\"Enter cooking instructions...\"\n />\n

\n \n {/* Nutrition toggle */}\n

\n setShowNutrition(!showNutrition)}\n className=\"text-sm font-medium flex items-center gap-2\"\n style={{ color: '#0f2763' }}\n >\n \n \n \n {showNutrition ? 'Hide' : 'Add'} nutrition information\n \n

\n \n {/* Nutrition fields */}\n {showNutrition && (\n

Nutrition per serving

\n Calories\n setNutrition({ ...nutrition, calories: e.target.value })}\n className=\"input text-sm\"\n placeholder=\"kcal\"\n />\n

\n Protein (g)\n setNutrition({ ...nutrition, protein: e.target.value })}\n className=\"input text-sm\"\n placeholder=\"g\"\n />\n

\n Carbs (g)\n setNutrition({ ...nutrition, carbs: e.target.value })}\n className=\"input text-sm\"\n placeholder=\"g\"\n />\n

\n Fat (g)\n setNutrition({ ...nutrition, fat: e.target.value })}\n className=\"input text-sm\"\n placeholder=\"g\"\n />\n

\n Fiber (g)\n setNutrition({ ...nutrition, fiber: e.target.value })}\n className=\"input text-sm\"\n placeholder=\"g\"\n />\n

\n )}\n

\n \n {/* Footer */}\n

\n \n Cancel\n \n \n {submitting ? 'Saving...' : (recipe ? 'Save Changes' : 'Add Recipe')}\n \n

\n \n );\n}\n\n",[],[138,208,210],"b8f098ee-d3a9-11f0-8d63-42dde27851f2","NutritionView.tsx","b8f099c0-d3a9-11f0-8d63-42dde27851f2",14,["D",1765138635415],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport type { NutritionGoals, NutritionGoalType, DailyNutrition } from \"../../shared/types.ts\";\nimport { NUTRITION_GOAL_LABELS, NUTRITION_GOAL_UNITS } from \"../../shared/types.ts\";\n\ninterface NutritionViewProps {\n goals: NutritionGoals | null;\n onGoalsChange: () => Promise;\n}\n\nconst GOAL_TYPES: NutritionGoalType[] = ['calories', 'protein', 'fiber', 'fat', 'carbs'];\n\nfunction getWeekStartDate(date: Date): string {\n const d = new Date(date);\n const day = d.getDay();\n d.setDate(d.getDate() - day);\n d.setHours(0, 0, 0, 0);\n return d.toISOString().split('T')[0];\n}\n\nexport function NutritionView({ goals, onGoalsChange }: NutritionViewProps) {\n const [editing, setEditing] = useState(false);\n const [primaryType, setPrimaryType] = useState(goals?.primaryGoalType || 'calories');\n const [primaryValue, setPrimaryValue] = useState(goals?.primaryGoalValue?.toString() || '2000');\n const [sub1Type, setSub1Type] = useState(goals?.subGoal1Type || '');\n const [sub1Value, setSub1Value] = useState(goals?.subGoal1Value?.toString() || '');\n const [sub2Type, setSub2Type] = useState(goals?.subGoal2Type || '');\n const [sub2Value, setSub2Value] = useState(goals?.subGoal2Value?.toString() || '');\n const [submitting, setSubmitting] = useState(false);\n \n const [weeklyData, setWeeklyData] = useState<{\n daily: Record;\n weeklyAverage: DailyNutrition;\n } | null>(null);\n const [loadingWeekly, setLoadingWeekly] = useState(false);\n\n const fetchWeeklyData = useCallback(async () => {\n setLoadingWeekly(true);\n try {\n const weekStart = getWeekStartDate(new Date());\n const response = await fetch(`/api/nutrition/weekly?weekStartDate=${weekStart}`);\n const data = await response.json();\n if (data.success) {\n setWeeklyData(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch weekly nutrition:', err);\n } finally {\n setLoadingWeekly(false);\n }\n }, []);\n\n useEffect(() => {\n fetchWeeklyData();\n }, [fetchWeeklyData]);\n\n // Update form when goals change\n useEffect(() => {\n if (goals) {\n setPrimaryType(goals.primaryGoalType);\n setPrimaryValue(goals.primaryGoalValue.toString());\n setSub1Type(goals.subGoal1Type || '');\n setSub1Value(goals.subGoal1Value?.toString() || '');\n setSub2Type(goals.subGoal2Type || '');\n setSub2Value(goals.subGoal2Value?.toString() || '');\n }\n }, [goals]);\n\n const handleSave = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!primaryValue) return;\n \n setSubmitting(true);\n \n try {\n const response = await fetch('/api/nutrition/goals', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n primaryGoalType: primaryType,\n primaryGoalValue: parseFloat(primaryValue),\n subGoal1Type: sub1Type || null,\n subGoal1Value: sub1Value ? parseFloat(sub1Value) : null,\n subGoal2Type: sub2Type || null,\n subGoal2Value: sub2Value ? parseFloat(sub2Value) : null,\n }),\n });\n \n if (response.ok) {\n await onGoalsChange();\n setEditing(false);\n }\n } finally {\n setSubmitting(false);\n }\n };\n\n const getProgressColor = (percent: number): string => {\n if (percent >= 90 && percent <= 110) return '#4ade80'; // success\n if (percent > 110) return '#fbbf24'; // warning\n return '#0f2763'; // primary\n };\n\n const renderGoalCard = (\n type: NutritionGoalType,\n targetValue: number,\n currentValue: number,\n isPrimary: boolean\n ) => {\n const percent = (currentValue / targetValue) * 100;\n const cappedPercent = Math.min(percent, 100);\n \n return (\n \n

\n \n {type === 'calories' ? '🔥' : type === 'protein' ? '💪' : type === 'fiber' ? '🥬' : type === 'fat' ? '🥑' : '🍞'}\n \n

{NUTRITION_GOAL_LABELS[type]}

\n {isPrimary && (\n \n Primary Goal\n \n )}\n

{Math.round(currentValue)}

of {targetValue} {NUTRITION_GOAL_UNITS[type]}

\n \n

\n {Math.round(percent)}% of daily goal\n = 90 && percent <= 110 ? 'text-green-600' : percent > 110 ? 'text-amber-600' : 'text-gray-600'}`}>\n {targetValue - currentValue > 0 ? `${Math.round(targetValue - currentValue)} ${NUTRITION_GOAL_UNITS[type]} remaining` : 'Goal reached!'}\n \n

\n \n );\n };\n\n return (\n

\n {/* Header */}\n

Nutrition Goals

Track your daily nutrition against your goals

\n setEditing(true)}\n className=\"btn-secondary text-sm\"\n >\n {goals ? 'Edit Goals' : 'Set Goals'}\n \n

\n \n {/* Goals display */}\n {goals ? (\n

\n {/* Primary goal */}\n

\n {renderGoalCard(\n goals.primaryGoalType,\n goals.primaryGoalValue,\n weeklyData?.weeklyAverage[goals.primaryGoalType as keyof DailyNutrition] || 0,\n true\n )}\n \n {/* Sub goals */}\n {goals.subGoal1Type && goals.subGoal1Value && (\n renderGoalCard(\n goals.subGoal1Type,\n goals.subGoal1Value,\n weeklyData?.weeklyAverage[goals.subGoal1Type as keyof DailyNutrition] || 0,\n false\n )\n )}\n \n {goals.subGoal2Type && goals.subGoal2Value && (\n renderGoalCard(\n goals.subGoal2Type,\n goals.subGoal2Value,\n weeklyData?.weeklyAverage[goals.subGoal2Type as keyof DailyNutrition] || 0,\n false\n )\n )}\n

\n \n {/* Weekly overview */}\n {weeklyData && (\n

This Week's Overview

\n {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day, i) => {\n const dayData = weeklyData.daily[i];\n const percent = (dayData[goals.primaryGoalType as keyof DailyNutrition] / goals.primaryGoalValue) * 100;\n \n return (\n

{day}

\n \n

\n {Math.round(dayData[goals.primaryGoalType as keyof DailyNutrition])}\n

\n );\n })}\n

\n On target (90-110%)\n

\n Over target\n

\n Under target\n

\n )}\n \n {/* All nutrition breakdown */}\n

Weekly Average Breakdown

\n {GOAL_TYPES.map((type) => {\n const value = weeklyData?.weeklyAverage[type as keyof DailyNutrition] || 0;\n let goal: number | null = null;\n \n if (goals.primaryGoalType === type) goal = goals.primaryGoalValue;\n else if (goals.subGoal1Type === type) goal = goals.subGoal1Value;\n else if (goals.subGoal2Type === type) goal = goals.subGoal2Value;\n \n return (\n

\n {type === 'calories' ? '🔥' : type === 'protein' ? '💪' : type === 'fiber' ? '🥬' : type === 'fat' ? '🥑' : '🍞'}\n

\n {Math.round(value)}\n {NUTRITION_GOAL_UNITS[type]}\n

{NUTRITION_GOAL_LABELS[type]}

\n {goal && (\n

\n {Math.round((value / goal) * 100)}% of goal\n

\n )}\n

\n );\n })}\n

\n ) : (\n

\n 🎯\n

Set Your Nutrition Goals

\n Define your daily nutrition targets to track your progress and stay on track with your health goals.\n

\n \n

\n )}\n

\n \n {/* Edit goals modal */}\n {editing && (\n

setEditing(false)}>\n

e.stopPropagation()}>\n

\n {goals ? 'Edit Nutrition Goals' : 'Set Nutrition Goals'}\n

\n Set one primary goal and up to two sub-goals\n

\n \n

\n {/* Primary goal */}\n

\n \n Primary Goal\n \n

\n Type\n setPrimaryType(e.target.value as NutritionGoalType)}\n className=\"input\"\n >\n {GOAL_TYPES.map((type) => (\n \n ))}\n \n

\n \n Target ({NUTRITION_GOAL_UNITS[primaryType]})\n \n setPrimaryValue(e.target.value)}\n className=\"input\"\n required\n />\n

\n \n {/* Sub-goal 1 */}\n

\n Sub-Goal 1 (Optional)\n {sub1Type && (\n { setSub1Type(''); setSub1Value(''); }}\n className=\"text-xs text-gray-500 hover:text-red-500\"\n >\n Remove\n \n )}\n

\n setSub1Type(e.target.value as NutritionGoalType)}\n className=\"input\"\n >\n \n {GOAL_TYPES.filter(t => t !== primaryType && t !== sub2Type).map((type) => (\n \n ))}\n \n

\n setSub1Value(e.target.value)}\n className=\"input\"\n placeholder={sub1Type ? NUTRITION_GOAL_UNITS[sub1Type] : 'Target'}\n disabled={!sub1Type}\n />\n

\n \n {/* Sub-goal 2 */}\n

\n Sub-Goal 2 (Optional)\n {sub2Type && (\n { setSub2Type(''); setSub2Value(''); }}\n className=\"text-xs text-gray-500 hover:text-red-500\"\n >\n Remove\n \n )}\n

\n setSub2Type(e.target.value as NutritionGoalType)}\n className=\"input\"\n >\n \n {GOAL_TYPES.filter(t => t !== primaryType && t !== sub1Type).map((type) => (\n \n ))}\n \n

\n setSub2Value(e.target.value)}\n className=\"input\"\n placeholder={sub2Type ? NUTRITION_GOAL_UNITS[sub2Type] : 'Target'}\n disabled={!sub2Type}\n />\n

\n \n

\n \n \n

\n )}\n

\n );\n}\n\n",[],[138,208,218],"b8d2cf4e-d3a9-11f0-8e4b-42dde27851f2","GroceryListsView.tsx","b8d2d002-d3a9-11f0-8e4b-42dde27851f2",10,["D",1765138635183],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { GroceryList, GroceryListItem, Recipe } from \"../../shared/types.ts\";\n\ninterface GroceryListsViewProps {\n lists: GroceryList[];\n recipes: Recipe[];\n onListsChange: () => Promise;\n}\n\nexport function GroceryListsView({ lists, recipes, onListsChange }: GroceryListsViewProps) {\n const [selectedList, setSelectedList] = useState(null);\n const [showNewListForm, setShowNewListForm] = useState(false);\n const [newListName, setNewListName] = useState('');\n const [showAddItem, setShowAddItem] = useState(false);\n const [newItemName, setNewItemName] = useState('');\n const [newItemQuantity, setNewItemQuantity] = useState('');\n const [newItemUnit, setNewItemUnit] = useState('');\n const [showAddRecipe, setShowAddRecipe] = useState(false);\n\n // Group items by recipe\n const groupItemsByRecipe = (items: GroceryListItem[]) => {\n const groups: { recipeName: string | null; recipeId: string | null; items: GroceryListItem[] }[] = [];\n const individualItems: GroceryListItem[] = [];\n const recipeGroups: Map = new Map();\n\n for (const item of items) {\n if (item.recipeId && item.recipeName) {\n if (!recipeGroups.has(item.recipeId)) {\n recipeGroups.set(item.recipeId, []);\n }\n recipeGroups.get(item.recipeId)!.push(item);\n } else {\n individualItems.push(item);\n }\n }\n\n recipeGroups.forEach((items, recipeId) => {\n groups.push({\n recipeName: items[0].recipeName,\n recipeId,\n items,\n });\n });\n\n if (individualItems.length > 0) {\n groups.push({\n recipeName: null,\n recipeId: null,\n items: individualItems,\n });\n }\n\n return groups;\n };\n\n const handleCreateList = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!newListName.trim()) return;\n\n const response = await fetch('/api/grocery-lists', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ name: newListName.trim() }),\n });\n\n if (response.ok) {\n await onListsChange();\n setNewListName('');\n setShowNewListForm(false);\n }\n };\n\n const handleDeleteList = async (listId: string) => {\n const response = await fetch(`/api/grocery-lists/${listId}`, {\n method: 'DELETE',\n });\n\n if (response.ok) {\n await onListsChange();\n if (selectedList?.id === listId) {\n setSelectedList(null);\n }\n }\n };\n\n const handleAddItem = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!selectedList || !newItemName.trim()) return;\n\n const response = await fetch(`/api/grocery-lists/${selectedList.id}/items`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n name: newItemName.trim(),\n quantity: newItemQuantity ? parseFloat(newItemQuantity) : null,\n unit: newItemUnit.trim() || null,\n }),\n });\n\n if (response.ok) {\n await onListsChange();\n setNewItemName('');\n setNewItemQuantity('');\n setNewItemUnit('');\n setShowAddItem(false);\n // Update selected list\n const updatedLists = await fetch('/api/grocery-lists').then(r => r.json());\n if (updatedLists.success) {\n const updated = updatedLists.data.find((l: GroceryList) => l.id === selectedList.id);\n if (updated) setSelectedList(updated);\n }\n }\n };\n\n const handleAddRecipeIngredients = async (recipeId: string) => {\n if (!selectedList) return;\n\n const response = await fetch(`/api/grocery-lists/${selectedList.id}/add-recipe`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ recipeId }),\n });\n\n if (response.ok) {\n await onListsChange();\n setShowAddRecipe(false);\n // Update selected list\n const updatedLists = await fetch('/api/grocery-lists').then(r => r.json());\n if (updatedLists.success) {\n const updated = updatedLists.data.find((l: GroceryList) => l.id === selectedList.id);\n if (updated) setSelectedList(updated);\n }\n }\n };\n\n const handleToggleItem = async (item: GroceryListItem) => {\n if (!selectedList) return;\n\n await fetch(`/api/grocery-lists/${selectedList.id}/items/${item.id}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ checked: !item.checked }),\n });\n\n // Optimistically update\n setSelectedList({\n ...selectedList,\n items: selectedList.items.map(i =>\n i.id === item.id ? { ...i, checked: !i.checked } : i\n ),\n });\n };\n\n const handleDeleteItem = async (itemId: string) => {\n if (!selectedList) return;\n\n await fetch(`/api/grocery-lists/${selectedList.id}/items/${itemId}`, {\n method: 'DELETE',\n });\n\n // Optimistically update\n setSelectedList({\n ...selectedList,\n items: selectedList.items.filter(i => i.id !== itemId),\n });\n };\n\n return (\n

\n {/* Sidebar - Lists */}\n

Grocery Lists

\n setShowNewListForm(true)}\n className=\"p-1 rounded hover:bg-gray-200 transition-colors\"\n style={{ color: '#0f2763' }}\n >\n \n \n

\n \n {showNewListForm && (\n

\n \n

\n {lists.length === 0 ? (\n

\n No lists yet. Create one to get started.\n

\n ) : (\n

\n {lists.map((list) => (\n setSelectedList(list)}\n >\n

{list.name}

\n {list.items.length} item{list.items.length !== 1 ? 's' : ''}\n

\n {\n e.stopPropagation();\n handleDeleteList(list.id);\n }}\n className=\"opacity-0 group-hover:opacity-100 p-1 text-gray-400 hover:text-red-500 transition-all\"\n >\n \n \n

\n ))}\n

\n )}\n

\n \n {/* Main content - List details */}\n

\n {selectedList ? (\n <>\n {/* Header */}\n

{selectedList.name}

\n {selectedList.items.filter(i => i.checked).length} of {selectedList.items.length} checked\n

\n setShowAddItem(true)}\n className=\"btn-secondary text-sm flex items-center gap-1\"\n >\n \n Add Item\n \n setShowAddRecipe(true)}\n className=\"btn-primary text-sm flex items-center gap-1\"\n >\n \n Add Recipe\n \n

\n \n {/* Items */}\n

\n {selectedList.items.length === 0 ? (\n

\n 🛒\n

No items yet

Add items or import from a recipe

\n ) : (\n

\n {groupItemsByRecipe(selectedList.items).map((group, groupIndex) => (\n

\n {group.recipeName ? (\n <>\n \n From: {group.recipeName}\n \n \n ) : (\n Individual Items\n )}\n

\n {group.items.map((item) => (\n \n handleToggleItem(item)}\n className={`checkbox ${item.checked ? 'checked' : ''}`}\n >\n {item.checked && (\n \n )}\n \n

\n {item.quantity && (\n {item.quantity} \n )}\n {item.unit && {item.unit} }\n {item.name}\n

\n handleDeleteItem(item.id)}\n className=\"text-gray-400 hover:text-red-500 transition-colors\"\n >\n \n \n

\n ))}\n

\n )}\n

\n \n ) : (\n

\n 👈\n

Select a list to view items

\n )}\n \n \n {/* Add item modal */}\n {showAddItem && selectedList && (\n

setShowAddItem(false)}>\n

e.stopPropagation()}>\n

Add Item

\n \n

\n )}\n \n {/* Add recipe modal */}\n {showAddRecipe && selectedList && (\n

setShowAddRecipe(false)}>\n

e.stopPropagation()}>\n

Add Recipe Ingredients

Select a recipe to add all its ingredients

\n {recipes.length === 0 ? (\n

\n No recipes yet. Create a recipe first.\n

\n ) : (\n

\n {recipes.map((recipe) => (\n handleAddRecipeIngredients(recipe.id)}\n className=\"w-full p-3 text-left rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-between\"\n >\n

{recipe.title}

\n {recipe.ingredients.length} ingredients\n

\n \n \n ))}\n

\n )}\n

\n \n

\n )}\n \n );\n}\n\n",[],[138,208,226],"b8d99130-d3a9-11f0-8d63-42dde27851f2","App.tsx","b8d991d0-d3a9-11f0-8d63-42dde27851f2",11,["D",1765138635191],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport type { User, Recipe, GroceryList, NutritionGoals } from \"../../shared/types.ts\";\nimport { Login } from \"./Login.tsx\";\nimport { RecipesView } from \"./RecipesView.tsx\";\nimport { GroceryListsView } from \"./GroceryListsView.tsx\";\nimport { MealPlanView } from \"./MealPlanView.tsx\";\nimport { NutritionView } from \"./NutritionView.tsx\";\n\ntype Tab = 'recipes' | 'grocery' | 'mealplan' | 'nutrition';\n\nexport function App() {\n const [user, setUser] = useState(undefined);\n const [activeTab, setActiveTab] = useState('recipes');\n const [recipes, setRecipes] = useState([]);\n const [groceryLists, setGroceryLists] = useState([]);\n const [nutritionGoals, setNutritionGoals] = useState(null);\n const [loading, setLoading] = useState(true);\n\n // Fetch current user\n const fetchUser = useCallback(async () => {\n try {\n const response = await fetch('/api/auth/me');\n const data = await response.json();\n if (data.success) {\n setUser(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch user:', err);\n setUser(null);\n }\n }, []);\n\n // Fetch recipes\n const fetchRecipes = useCallback(async () => {\n try {\n const response = await fetch('/api/recipes');\n const data = await response.json();\n if (data.success) {\n setRecipes(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch recipes:', err);\n }\n }, []);\n\n // Fetch grocery lists\n const fetchGroceryLists = useCallback(async () => {\n try {\n const response = await fetch('/api/grocery-lists');\n const data = await response.json();\n if (data.success) {\n setGroceryLists(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch grocery lists:', err);\n }\n }, []);\n\n // Fetch nutrition goals\n const fetchNutritionGoals = useCallback(async () => {\n try {\n const response = await fetch('/api/nutrition/goals');\n const data = await response.json();\n if (data.success) {\n setNutritionGoals(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch nutrition goals:', err);\n }\n }, []);\n\n // Initial load\n useEffect(() => {\n fetchUser();\n }, [fetchUser]);\n\n // Fetch data when user is authenticated\n useEffect(() => {\n if (user) {\n setLoading(true);\n Promise.all([\n fetchRecipes(),\n fetchGroceryLists(),\n fetchNutritionGoals(),\n ]).finally(() => {\n setLoading(false);\n });\n } else if (user === null) {\n setLoading(false);\n }\n }, [user, fetchRecipes, fetchGroceryLists, fetchNutritionGoals]);\n\n const handleLogout = async () => {\n try {\n await fetch('/api/auth/logout', { method: 'POST' });\n setUser(null);\n setRecipes([]);\n setGroceryLists([]);\n setNutritionGoals(null);\n } catch (err) {\n console.error('Failed to logout:', err);\n }\n };\n\n // Show loading while checking auth\n if (user === undefined) {\n return (\n

\n );\n }\n\n // Show login if not authenticated\n if (user === null) {\n return ;\n }\n\n // Loading data\n if (loading) {\n return (\n

\n Loading your data...\n

\n );\n }\n\n const tabs: { id: Tab; label: string; icon: string }[] = [\n { id: 'recipes', label: 'Recipes', icon: '📖' },\n { id: 'grocery', label: 'Grocery Lists', icon: '🛒' },\n { id: 'mealplan', label: 'Meal Plan', icon: '📅' },\n { id: 'nutrition', label: 'Nutrition', icon: '💪' },\n ];\n\n return (\n

\n {/* Header */}\n

\n {/* Logo */}\n

\n \n

\n Carmy\n

\n \n {/* User menu */}\n

\n {user.picture ? (\n $\"\"$ \n ) : (\n

\n {user.name?.charAt(0).toUpperCase() || user.email.charAt(0).toUpperCase()}\n

\n )}\n \n

\n \n Sign out\n \n

\n \n {/* Tab navigation */}\n

\n \n

\n \n {/* Main content */}\n

\n {activeTab === 'recipes' && (\n \n )}\n {activeTab === 'grocery' && (\n \n )}\n {activeTab === 'mealplan' && (\n \n )}\n {activeTab === 'nutrition' && (\n \n )}\n

\n );\n}\n\n",[],[138,208,234],"b86d0600-d3a9-11f0-b1e3-42dde27851f2",4,["D",1765138634552],[165,166,167,168,169],[138,208],["D",1765138634122],[164,170,171,172],[138],"b8ad561a-d3a9-11f0-8e4b-42dde27851f2","routes","b8ad56f6-d3a9-11f0-8e4b-42dde27851f2",7,["D",1765138634968],[],[144,250],"b882c86e-d3a9-11f0-8004-42dde27851f2","middleware","b882c990-d3a9-11f0-8004-42dde27851f2",5,["D",1765138634693],[],[144,257],"b89676ac-d3a9-11f0-8e4b-42dde27851f2","database","b896776a-d3a9-11f0-8e4b-42dde27851f2",6,["D",1765138634821],[],[144,264],["D",1765138634257],[160,161,162],[144],["D",1765137234131],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_121":310,"_311":312,"_313":314,"_315":24,"_316":24,"_317":24,"_318":57,"_319":-5,"_320":-7,"_321":-7,"_322":61,"_323":24,"_324":24,"_325":-5,"_326":24,"_327":24,"_328":24,"_329":-5},"ENV",{"_281":282,"_283":284,"_285":85,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v15