From d0ab436fee3d9ab24b229c4b17aec24794130a33 Mon Sep 17 00:00:00 2001
From: Thomas Lamant <tom@tmlmt.com>
Date: Sun, 25 Oct 2026 22:44:26 +0100
Subject: [PATCH] fix(playground): display ingredient preparations within steps

---
 .../app/components/recipe/StepContent.vue     | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/playground/app/components/recipe/StepContent.vue b/playground/app/components/recipe/StepContent.vue
index 4c1b7ce0..73481102 100644
--- a/playground/app/components/recipe/StepContent.vue
+++ b/playground/app/components/recipe/StepContent.vue
@@ -40,6 +40,14 @@ function isGroupedItemSelected(item: IngredientItem): boolean {
   return isAlternativeSelected(props.recipe, props.choices ?? {}, item);
 }
 
+/**
+ * Preparation lives on the referenced ingredient (distinct preparations
+ * yield distinct ingredient entries), so it is resolved per alternative.
+ */
+function getPreparation(alt: IngredientAlternative): string | undefined {
+  return props.recipe.ingredients[alt.index]?.preparation;
+}
+
 /**
  * Convert equivalents to a QuantityWithPlainUnit array.
  */
@@ -118,7 +126,15 @@ function getVisibleAlternatives(
               />
               {{ " " }}
             </template>
-            {{ item.alternatives[0]?.displayName }}
+            {{ item.alternatives[0]?.displayName
+            }}<span
+              v-if="
+                item.alternatives[0] && getPreparation(item.alternatives[0])
+              "
+              class="font-normal text-gray-500 dark:text-gray-300"
+            >
+              ({{ getPreparation(item.alternatives[0]) }})</span
+            >
           </span>
         </template>
         <!-- Inline alternatives: show selected or all -->
@@ -154,6 +170,12 @@ function getVisibleAlternatives(
                 }"
                 >{{ visibleAlt.alt.displayName }}</span
               >
+              <span
+                v-if="getPreparation(visibleAlt.alt)"
+                class="font-normal text-gray-500 dark:text-gray-300"
+              >
+                ({{ getPreparation(visibleAlt.alt) }})</span
+              >
               <template v-if="visibleAlt.alt.note && !hasInlineChoice(item)">
                 <span
                   class="font-normal text-gray-500 italic dark:text-gray-300"