From 0e469e60245e631724a7081736e965d6255e8f1b Mon Sep 17 00:00:00 2001
From: june <self@breadone.net>
Date: Fri, 15 Aug 2025 14:58:55 +1200
Subject: [PATCH] Always show add ingredient button and alter disable value.
 Also much better handling of the state too

---
 src/pages/recipe/new.astro |  2 +-
 src/script/newRecipe.ts    | 21 ++++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/pages/recipe/new.astro b/src/pages/recipe/new.astro
index c51de08..a3fc472 100644
--- a/src/pages/recipe/new.astro
+++ b/src/pages/recipe/new.astro
@@ -42,7 +42,7 @@ async function submitRecipe() {
 
             <div class="flex flex-row align-middle items-center">
                 <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
-                <button class="hidden ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
+                <button disabled class="disabled:text-white/20 ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
             </div>
             <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
                 <thead>
diff --git a/src/script/newRecipe.ts b/src/script/newRecipe.ts
index d305048..3c60931 100644
--- a/src/script/newRecipe.ts
+++ b/src/script/newRecipe.ts
@@ -23,12 +23,18 @@ document.addEventListener('DOMContentLoaded', function() {
         document.querySelector('#ing-name')!
     )
     
-    // show plus button once the user clicks off one of the text fields
-    ingredientFields.forEach(f => f.addEventListener('beforeinput', showAddIngredientButton))
+    // show plus button once the user types in the text fields
+    ingredientFields.forEach(f => {
+        f.addEventListener('input', showAddIngredientButton)
+        f.addEventListener('keyup', showAddIngredientButton)
+    })
     // onclick for add button
     document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
     // for pressing enter to reset cursor
     ingredientFields[2].addEventListener('keyup', e => {if (e.key === 'Enter') addIngredient()} )
+    
+    // Initial check for button state
+    showAddIngredientButton()
 
     // Steps
     stepInput.addEventListener('keyup', e => { if (e.key === 'Enter' && e.shiftKey) addStep()  } )
@@ -117,12 +123,13 @@ function renderSteps() {
 
 // - UTILS
 function showAddIngredientButton() {
-    // only show if there is text in the field
-
-    if (ingredientFields[0].value && ingredientFields[2].value) {
-        ingredientAddButton.style.display = 'block'
+    const hasQty = ingredientFields[0].value.trim().length > 0
+    const hasName = ingredientFields[2].value.trim().length > 0
+    
+    if (hasQty && hasName) {
+        ingredientAddButton.disabled = false
     } else {
-        ingredientAddButton.style.display = 'hidden'
+        ingredientAddButton.disabled = true
     }
 }