\n {/* Backdrop */}\n

\n\n {/* Sidebar */}\n

\n {/* Header */}\n

Add Recipe

\n \n ×\n \n

\n\n {selectedDate && selectedMealType && (\n

{formatDate(selectedDate)}

{formatMealType(selectedMealType)}

\n )}\n

\n\n {/* Filters */}\n

\n {/* Search */}\n

\n setSearchTerm(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n\n {/* Quick filters */}\n

\n setSelectedDifficulty(e.target.value)}\n className=\"px-2 py-1 border border-gray-300 rounded text-sm\"\n >\n \n \n \n \n \n\n setMaxPrepTime(e.target.value)}\n className=\"px-2 py-1 border border-gray-300 rounded text-sm w-24\"\n />\n\n \n Clear\n \n

\n\n {/* Tags */}\n {getAllTags().length > 0 && (\n

\n {getAllTags().slice(0, 10).map(tag => (\n toggleTag(tag)}\n className={`px-2 py-1 text-xs rounded-full transition-colors ${\n selectedTags.includes(tag)\n ? 'bg-blue-100 text-blue-700 border border-blue-300'\n : 'bg-gray-100 text-gray-600 hover:bg-gray-200'\n }`}\n >\n {tag}\n \n ))}\n

\n )}\n

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

\n {error && (\n

{error}

\n setError(null)}\n className=\"text-red-600 hover:text-red-800 text-xs mt-1\"\n >\n Dismiss\n \n

\n )}\n\n {loading ? (\n

\n Loading recipes...\n

\n ) : filteredRecipes.length === 0 ? (\n

\n {recipes.length === 0 ? 'No recipes found' : 'No recipes match your filters'}\n

\n ) : (\n

\n {filteredRecipes.map(recipe => (\n

\n {recipe.title}\n

\n {recipe.description && (\n

\n {recipe.description}\n

\n )}\n

\n {recipe.prepTime && (\n ⏱️ {recipe.prepTime}m\n )}\n {recipe.difficulty && (\n \n {recipe.difficulty}\n \n )}\n

\n {recipe.tags && recipe.tags.length > 0 && (\n

\n {recipe.tags.slice(0, 3).map(tag => (\n \n {tag}\n \n ))}\n {recipe.tags.length > 3 && (\n \n +{recipe.tags.length - 3} more\n \n )}\n

\n )}\n

\n\n addRecipeToMealPlan(recipe)}\n disabled={addingRecipeId === recipe.id}\n className=\"ml-3 px-3 py-1 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors\"\n >\n {addingRecipeId === recipe.id ? '...' : 'Add'}\n \n

\n ))}\n

\n )}\n

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

\n {filteredRecipes.length} recipe{filteredRecipes.length !== 1 ? 's' : ''} shown\n {selectedTags.length > 0 || selectedDifficulty || maxPrepTime || searchTerm ? (\n (filtered)\n ) : null}\n

\n );\n}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/connnolly/cardamom/code/frontend/components/MealPlanSidebar.tsx","extension","actionData","errors"]