Step re-ordering implemented but at what (technical) cost man...

src/pages/recipe/new.astro

@@ -69,7 +69,7 @@ async function submitRecipe() {
             </table>
         </div>
         
-        <ul id="step-list" class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
             <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
 
             <!-- Steps -->
@@ -84,7 +84,9 @@ async function submitRecipe() {
                         oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
                     />
             </div>
-        </ul>
+
+            <ul id="step-list"></ul>
+        </div>
 
     </div>
 </SiteLayout>

src/script/newRecipe.ts

@@ -3,7 +3,7 @@ let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredie
 let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
 
 let stepInput: HTMLTextAreaElement = document.querySelector('#new-instruction')!
-let stepList: HTMLUListElement = document.querySelector('#step-list')
+let stepList: HTMLUListElement = document.querySelector('#step-list')!
 let currentStepIndex = 0
 
 // - VARS
@@ -67,20 +67,52 @@ function addStep() {
     }
 
     steps.push(step)
-
+    renderSteps()
-    const newStep = document.createElement('div')
-    newStep.innerHTML = `
-        <p class="text-bold text-[10pt]">Step ${step.index + 1}</p>
-            
-        <div class="flex flex-col md:flex-row md:items-stretch">
-            <p class="w-full md:flex-2/3 pr-1 text-left">${step.instruction}</p>
-        </div>
-    `
-    newStep.className = "bg-[#2a2b2c] rounded-lg mb-2 p-3"
-    stepList.appendChild(newStep)
-
     stepInput.value = ''
+}
 
+function renderSteps() {
+    // clear the step list
+    stepList.innerHTML = ''
+    
+    // re-render all steps in their current order
+    steps.forEach((step, displayIndex) => {
+        const newStep = document.createElement('div')
+        // times like this i regret using astro
+        newStep.innerHTML = `
+            <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">
+                        <p class="w-full md:flex-2/3 pr-1 text-left">${step.instruction}</p>
+                    </div>
+                </div>
+
+                <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>
+        `
+        newStep.id = `step-${step.index}`
+        newStep.className = "bg-[#2a2b2c] rounded-lg mb-2 p-3"
+        stepList.appendChild(newStep)
+    })
+    
+    // event listeners to reorder buttons
+    document.querySelectorAll('#move-up-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
+            moveStep(stepIndex, -1)
+        })
+    })
+    
+    document.querySelectorAll('#move-down-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
+            moveStep(stepIndex, 1)
+        })
+    })
 }
 
 // - UTILS
@@ -93,3 +125,24 @@ function showAddIngredientButton() {
         ingredientAddButton.style.display = 'hidden'
     }
 }
+
+// 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
+    const currentStepArrayIndex = steps.findIndex(step => step.index === stepIndex)
+    
+    if (currentStepArrayIndex === -1) return // step not found
+    
+    const newIndex = currentStepArrayIndex + shift
+    
+    // check bounds
+    if (newIndex < 0 || newIndex >= steps.length) return
+    
+    // swap the steps in the array
+    const temp = steps[currentStepArrayIndex]
+    steps[currentStepArrayIndex] = steps[newIndex]
+    steps[newIndex] = temp
+    
+    // re-render the steps
+    renderSteps()
+}