\n {/* Header */}\n

Recipes & Foods

\n {recipes.length} recipes · {customFoods.length} custom foods\n

\n {activeTab === 'recipes' ? (\n <>\n setShowImportModal(true)}\n className=\"btn-secondary flex items-center gap-2\"\n >\n \n Import from URL\n \n setShowForm(true)}\n className=\"btn-primary flex items-center gap-2\"\n >\n \n Add Recipe\n \n \n ) : (\n setShowCustomFoodForm(true)}\n className=\"btn-primary flex items-center gap-2\"\n >\n \n Add Custom Food\n \n )}\n

\n \n {/* Tabs */}\n

\n setActiveTab('recipes')}\n className=\"pb-3 px-1 text-sm font-medium border-b-2 transition-colors\"\n style={activeTab === 'recipes' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Recipes ({recipes.length})\n \n setActiveTab('custom-foods')}\n className=\"pb-3 px-1 text-sm font-medium border-b-2 transition-colors\"\n style={activeTab === 'custom-foods' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Custom Foods ({customFoods.length})\n \n

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

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

\n \n {/* Content */}\n

\n {/* Recipes Tab */}\n {activeTab === 'recipes' && (\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 const linkStatus = getIngredientLinkStatus(recipe);\n const hasNutrition = recipe.nutrition && recipe.nutrition.calories !== null;\n const isComplete = recipe.nutrition?.isComplete ?? false;\n \n return (\n \n {/* Recipe header */}\n setExpandedRecipe(expandedRecipe === recipe.id ? null : recipe.id)}\n >\n

{recipe.title}

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

\n \n \n \n

\n \n {/* Nutrition preview */}\n {hasNutrition ? (\n

\n {recipe.nutrition!.calories && (\n \n {Math.round(recipe.nutrition!.calories)} kcal\n \n )}\n {recipe.nutrition!.protein && (\n \n {Math.round(recipe.nutrition!.protein)}g protein\n \n )}\n {!isComplete && (\n \n \n Partial\n \n )}\n

\n ) : (\n

\n \n No nutrition data - link ingredients\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 {/* Ingredient link status */}\n

\n \n Ingredients linked to USDA\n \n \n {linkStatus.linked}/{linkStatus.total}\n \n

0 ? (linkStatus.linked / linkStatus.total) * 100 : 0}%` }}\n />\n

\n \n {/* Nutrition details */}\n \n\n {/* Ingredients */}\n

\n Ingredients\n \n (click linked items for nutrition)\n \n

\n \n
\n {ing.fdcId ? (\n handleIngredientClick(ing, recipe.servingSize)}\n className=\"text-left hover:underline inline-flex items-center gap-1 group\"\n style={{ color: 'var(--text-secondary)' }}\n >\n \n {ing.amount && {ing.amount} }\n {ing.unit && {ing.unit} }\n {ing.name}\n \n {ing.notes && (\n ({ing.notes})\n )}\n \n \n [{ing.fdcDataType === 'Branded' ? 'B' : 'USDA'}]\n \n \n ) : (\n \n {ing.amount && {ing.amount} }\n {ing.unit && {ing.unit} }\n {ing.name}\n {ing.notes && (\n ({ing.notes})\n )}\n \n )}\n
\n

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

Instructions

{recipe.instructions}

\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 disabled={duplicatingRecipeId !== null}\n className=\"btn-secondary text-sm flex-1 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {duplicatingRecipeId === recipe.id ? 'Duplicating...' : 'Duplicate'}\n \n handleDelete(recipe.id)}\n disabled={deletingRecipeId !== null}\n className=\"btn-secondary text-sm text-red-600 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {deletingRecipeId === recipe.id ? 'Deleting...' : 'Delete'}\n \n

\n )}\n

\n );\n })}\n

\n )}\n \n )}\n\n {/* Custom Foods Tab */}\n {activeTab === 'custom-foods' && (\n <>\n {filteredCustomFoods.length === 0 ? (\n

\n 🍎\n

\n {searchQuery ? 'No custom foods found' : 'No custom foods yet'}\n

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

\n ) : (\n

\n {filteredCustomFoods.map((food) => (\n

{food.name}

\n Per {food.servingSizeGrams}g serving\n

\n \n Custom\n \n

\n \n {/* Nutrition preview */}\n

\n {food.calories !== null && (\n \n {Math.round(food.calories)} kcal\n \n )}\n {food.protein !== null && (\n \n {Math.round(food.protein)}g protein\n \n )}\n {food.carbs !== null && (\n \n {Math.round(food.carbs)}g carbs\n \n )}\n {food.fat !== null && (\n \n {Math.round(food.fat)}g fat\n \n )}\n

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

\n setEditingCustomFood(food)}\n className=\"btn-secondary text-sm flex-1\"\n >\n Edit\n \n handleDeleteCustomFood(food.id)}\n disabled={deletingCustomFoodId !== null}\n className=\"btn-secondary text-sm text-red-600 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {deletingCustomFoodId === food.id ? 'Deleting...' : 'Delete'}\n \n

\n ))}\n

\n )}\n \n )}\n

\n \n {/* Import from URL modal */}\n {showImportModal && (\n

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

Import from URL

\n setShowImportModal(false)}\n className=\"transition-colors\"\n style={{ color: 'var(--text-tertiary)' }}\n >\n \n \n

\n \n

\n Paste a recipe URL to automatically extract ingredients and instructions. You'll need to link ingredients to USDA foods for nutrition data.\n

\n \n setImportUrl(e.target.value)}\n placeholder=\"https://www.example.com/recipe/...\"\n className=\"input w-full mb-4\"\n disabled={importLoading}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && !importLoading) {\n handleImportFromUrl();\n }\n }}\n />\n \n {importError && (\n

\n {importError}\n

\n )}\n \n

\n setShowImportModal(false)}\n className=\"btn-secondary flex-1\"\n disabled={importLoading}\n >\n Cancel\n \n \n {importLoading ? (\n <>\n \n Importing...\n \n ) : (\n 'Import'\n )}\n \n

\n \n )}\n \n {/* Create recipe modal */}\n {showForm && (\n \n )}\n \n {/* Edit recipe modal */}\n {editingRecipe && (\n setEditingRecipe(null)}\n />\n )}\n \n {/* Create custom food modal */}\n {showCustomFoodForm && (\n setShowCustomFoodForm(false)}\n />\n )}\n \n {/* Edit custom food modal */}\n {editingCustomFood && (\n setEditingCustomFood(null)}\n />\n )}\n \n {/* Ingredient nutrition modal */}\n {selectedIngredient && (\n \n )}\n \n );\n}\n","deleted","label",[175,176,157],"frontend","components","permalink","https://www.val.town/x/shapedlines/carmy/code/frontend/components/RecipesView.tsx","extension","actionData","errors"]