validate ingredient groups as well as ingredient lists of all groups

frontend/src/components/IngredientListEditor.tsx

@@ -27,6 +27,7 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
 
   return (
     <div>
+      <h3 className="subsection-heading">Ingredients</h3>
       {ingredients.map((ing, index) => (
         <div key={index} className="flex gap-2 mb-2 items-center">
           <input

frontend/src/components/RecipeEditor.tsx

@@ -2,6 +2,7 @@ import { useState } from "react"
 import type { Recipe } from "../types/recipe"
 import type { IngredientGroup } from "../types/ingredientGroup"
 import { IngredientGroupListEditor } from "./IngredientGroupListEditor"
+import { IngredientListEditor } from "./IngredientListEditor"
 
 type RecipeEditorProps = {
   recipe: Recipe
@@ -39,10 +40,23 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
       newErrors.title = true
     }
 
-    // the incredient list must not be empty
+    /* there must be at least one ingredient group
-    // @todo enhance validation and visualization of ingredient errors
+     * no group may contain an empty ingredient list
+     * @todo check whether all ingredients are valid
+     * @todo enhance visualization of ingredient errors
+     */
     if (!draft.ingredientGroupList || draft.ingredientGroupList.length === 0) {
       newErrors.ingredients = true
+    } else {
+      let isAnyIngredientListEmpty = draft.ingredientGroupList.some(
+        ingGrp => {
+          return !ingGrp.ingredientList || ingGrp.ingredientList.length === 0
+        }
+      )
+      console.log(isAnyIngredientListEmpty)
+      if(isAnyIngredientListEmpty){
+        newErrors.ingredients = true
+      }
     }
 
     setErrors(newErrors)