From 2f8ceef0edc91cf3fca545e944e3dfee761df5bf Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Mon, 17 Nov 2025 15:35:26 +1300
Subject: [PATCH] Add support for ingredient preparation instructions

---
 web/src/components/detail/InfoView.astro      | 21 +++----------------
 .../detail/IngredientTableView.astro          |  4 ++--
 .../detail/StepIngredientSideView.astro       |  5 ++---
 3 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/web/src/components/detail/InfoView.astro b/web/src/components/detail/InfoView.astro
index 0ef9e3e..413b8cb 100644
--- a/web/src/components/detail/InfoView.astro
+++ b/web/src/components/detail/InfoView.astro
@@ -1,29 +1,14 @@
 ---
 import TagRow from "@component/tagRow";
 
-
 const { cookTime, prepTime, description, servings, rating, tags } = Astro.props
-
-function formatTimeMin(minutes: number) {
-    if (minutes === 0) return null
-    const h = Math.floor(minutes / 60);
-    const m = minutes % 60;
-    let result = "";
-    if (h > 0) result += `${h}h`;
-    if (m > 0) result += `${m}m`;
-    if (result === "") result = "0m";
-    return result;
-}
-
-// const workTime = formatTimeMin(re.worktime)
-// const waitTime = formatTimeMin(re.waittime)
 ---
 
 <p class="text-white/60 text-sm mt-1 italic">{description}</p>
 <div class="flex pt-1 items-center">
-    {servings !== 0 && (<p class="border-r pr-2">Serves: {servings}</p>)}
-    {prepTime && (<p class="border-r px-2">{prepTime} Prep</p>)}
-    {cookTime && (<p class=" px-2">{cookTime} Cook</p>)}
+    {servings !== 0 && (<p class="border-r pr-2">Serves {servings}</p>)}
+    {prepTime && (<p class="border-r px-2">{prepTime} prep</p>)}
+    {cookTime && (<p class=" px-2">{cookTime} cook</p>)}
     <!-- {rating !== 0 && (<p class="pl-2">{rating}</p><p class="text-white/40 text-xs">/10</p>)} -->
 </div>
 <TagRow tags={tags}/>
\ No newline at end of file
diff --git a/web/src/components/detail/IngredientTableView.astro b/web/src/components/detail/IngredientTableView.astro
index a82a5bd..de3b63d 100644
--- a/web/src/components/detail/IngredientTableView.astro
+++ b/web/src/components/detail/IngredientTableView.astro
@@ -10,7 +10,7 @@ const tableView = true
     {
         ingredients.map(ing => (
             <div class="text-white/70">
-                <p>• {ing.quantity.value.value}&nbsp;{ing.unit || ''}&nbsp;{ing.name}</p>
+                <p>• {ing.quantity.value.value}&nbsp;{ing.unit || ''}&nbsp;{ing.name}{ing.preparation ? ` (${ing.preparation})` : ''}</p>
             </div>
         ))
     }
@@ -34,7 +34,7 @@ const tableView = true
                     <tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}>
                         <td class="px-4 py-2">{ing.quantity.value.value}</td>
                         <td class="px-4 py-2">{ing.unit || ''}</td>
-                        <td class="px-4 py-2">{ing.name}</td>
+                        <td class="px-4 py-2">{ing.name}{ing.preparation ? ` (${ing.preparation})` : ''}</td>
                     </tr>
                 </>
             ))
diff --git a/web/src/components/detail/StepIngredientSideView.astro b/web/src/components/detail/StepIngredientSideView.astro
index c4272ee..1f5c1d8 100644
--- a/web/src/components/detail/StepIngredientSideView.astro
+++ b/web/src/components/detail/StepIngredientSideView.astro
@@ -4,8 +4,7 @@ const { ingredients, class: className } = Astro.props;
 
 <div class={className}>
     {ingredients.map(i => (
-        <div class="text-sm">
-            <p>• {i.quantity.value.value} {i.unit || ""}  {i.name}</p>
-        </div>
+        <ul class="text-sm">
+            <li class="">{i.quantity.value.value} {i.unit || ""}  {i.name} {i.preparation ? `(${i.preparation})` : ''}</li class="">       </ul>
     ))}
 </div>
\ No newline at end of file