added ingredient group editor

frontend/src/components/RecipeDetailView.tsx

@@ -47,10 +47,10 @@ export default function RecipeDetailView() {
       <h1 className="content-title">{recipeWorkingCopy.title}</h1>
 
       {/* Recipe image */}
-      {recipeWorkingCopy.imageUrl && (
+      {recipe.imageUrl && (
         <img
-          src={recipeWorkingCopy.imageUrl}
-          alt={recipeWorkingCopy.title}
+          src={recipe.imageUrl}
+          alt={recipe.title}
           className="w-full rounded-xl mb-4 border"
         />
       )}
@@ -71,17 +71,26 @@ export default function RecipeDetailView() {
       </div>
       {/* Ingredients */}
       <h2 className="section-heading">Zutaten</h2>
-      <ul className="default-list">
-        {recipeWorkingCopy.ingredients.map((ing, i) => (
-        <li key={i}>
-          {ing.amount} {ing.unit ?? ""} {ing.name}
-        </li>
+      <ul>
+        {recipe.ingredientGroupList.map((group,i) => (
+          <div key={i}>
+          {group.title && group.title.trim() !== "" && (
+            <h3 className="subsection-heading">{group.title}</h3>
+          )}
+          <ul className="default-list">
+            {group.ingredientList.map((ing, j) => (
+            <li key={j}>
+              {ing.amount} {ing.unit ?? ""} {ing.name}
+            </li>
+            ))}
+          </ul>
+        </div>
         ))}
       </ul>
 
       {/* Instructions */}
       <h2 className="section-heading">Zubereitung</h2>
-      <p className="mb-6">{recipeWorkingCopy.instructions}</p>
+      <p className="mb-6">{recipe.instructions}</p>
 
       {/* Action buttons */}
       <div className="button-group">