src/pages/recipe/new.astro

@@ -85,8 +85,6 @@ async function submitRecipe() {
                     />
             </div>
 
-            <button disabled class="disabled:text-white/20 ml-auto mb-2 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>
-
             <ul id="step-list"></ul>
         </div>
 

src/script/newRecipe.ts

@@ -3,7 +3,6 @@ let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredie
 let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
 
 let stepInput: HTMLTextAreaElement = document.querySelector('#new-instruction')!
-let stepAddButton: HTMLButtonElement = document.querySelector('#add-step-btn')!
 let stepList: HTMLUListElement = document.querySelector('#step-list')!
 let currentStepIndex = 0
 
@@ -24,39 +23,21 @@ document.addEventListener('DOMContentLoaded', function() {
         document.querySelector('#ing-name')!
     )
     
-    stepInput.addEventListener('input', showAddStepButton)
-    
     // show plus button once the user types in the text fields
     ingredientFields.forEach(f => {
         f.addEventListener('input', showAddIngredientButton)
-        f.addEventListener('keydown', showAddIngredientButton)
+        f.addEventListener('keyup', showAddIngredientButton)
     })
     // onclick for add button
     document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
-    
-    // Enter key navigation for ingredient fields
-    ingredientFields[0].addEventListener('keydown', e => {
-        if (e.key === 'Enter') {
-            ingredientFields[1].focus() // Move from qty to unit
-        }
-    })
-    
-    ingredientFields[1].addEventListener('keydown', e => {
-        if (e.key === 'Enter') {
-            ingredientFields[2].focus() // Move from unit to name
-        }
-    })
-    
-    // for pressing enter to add ingredient (on the last field)
-    ingredientFields[2].addEventListener('keydown', e => {if (e.key === 'Enter') addIngredient()} )
+    // for pressing enter to reset cursor
+    ingredientFields[2].addEventListener('keyup', e => {if (e.key === 'Enter') addIngredient()} )
     
     // Initial check for button state
     showAddIngredientButton()
-    showAddStepButton()
 
     // Steps
     stepInput.addEventListener('keyup', e => { if (e.key === 'Enter' && e.shiftKey) addStep()  } )
-    stepAddButton.addEventListener('click', addStep)
 });
 
 // - ADD
@@ -79,7 +60,7 @@ function addIngredient() {
     // Add row to table and clear fields
     ingredientTable.appendChild(newRow)
     ingredientFields.forEach(f => f.value = '')
-    ingredientAddButton.disabled = true // Hide Add Ingredient button
+    ingredientAddButton.style.display = 'none' // Hide Add Ingredient button
     // move cursor to Qty field again
     ingredientFields[0].focus()
 }
@@ -94,7 +75,6 @@ function addStep() {
     steps.push(step)
     renderSteps()
     stepInput.value = ''
-    stepAddButton.disabled = true
 }
 
 function renderSteps() {
@@ -106,7 +86,7 @@ function renderSteps() {
         const newStep = document.createElement('div')
         // times like this i regret using astro
         newStep.innerHTML = `
-            <div class="flex justify-between items-start ">
+            <div class="flex justify-between items-start mb-2">
                 <div class="flex flex-col">
                     <p class="text-bold text-[10pt]">Step ${displayIndex + 1}</p>
                     <div class="flex flex-col md:flex-row md:items-stretch">
@@ -116,7 +96,6 @@ function renderSteps() {
 
                 <div class="flex flex-col gap-1">
                     <button id="move-up-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === 0 ? 'disabled' : ''}>↑</button>
-                    
                     <button id="move-down-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === steps.length - 1 ? 'disabled' : ''}>↓</button>
                 </div>
             </div>
@@ -154,14 +133,6 @@ function showAddIngredientButton() {
     }
 }
 
-function showAddStepButton() {
-    if (stepInput.value.trim().length > 0) {
-        stepAddButton.disabled = false
-    } else {
-        stepAddButton.disabled = true
-    }
-}
-
 // shift: the direction to move. should be +1 to move down or -1 to move up the list
 function moveStep(stepIndex: number, shift: number) {
     // Find the step in the array