From 0c82f0d28d7f2d8d0e6889101d4032f3e35c5a07 Mon Sep 17 00:00:00 2001
From: Kakarot <57848836+GhzGarage@users.noreply.github.com>
Date: Sat, 5 Jul 2025 23:17:12 -0500
Subject: [PATCH] ui updates

---
 html/css/editor.css | 41 ++++++++++++++++++-----------------------
 html/index.html     |  5 -----
 html/js/editor.js   | 25 ++++++++++++++++++++++++-
 3 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/html/css/editor.css b/html/css/editor.css
index 68bdb0c..412aada 100644
--- a/html/css/editor.css
+++ b/html/css/editor.css
@@ -353,6 +353,24 @@
     margin-left: 16px;
 }
 
+.add-button {
+    border: none;
+    padding: 6px 12px;
+    cursor: pointer;
+    border-radius: var(--md-radius-small);
+    background-color: var(--md-dark-success-container);
+    color: var(--md-dark-on-success-container);
+}
+
+.delete-button {
+    border: none;
+    padding: 6px 12px;
+    cursor: pointer;
+    border-radius: var(--md-radius-small);
+    background-color: var(--md-dark-error-container);
+    color: var(--md-dark-on-error-container);
+}
+
 /* Toggle Switch */
 .toggle-wrapper {
     display: inline-flex;
@@ -392,27 +410,4 @@
 
 .toggle-wrapper input:checked + .toggle-switch::before {
     transform: translateX(18px);
-}
-
-/* Floating Action Button */
-#add-item-fab {
-    position: fixed;
-    bottom: 24px;
-    right: 24px;
-    width: 56px;
-    height: 56px;
-    border-radius: 50%;
-    background-color: var(--md-dark-primary);
-    color: var(--md-dark-on-primary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: var(--md-elevation-3);
-    transition: transform 0.2s;
-}
-
-#add-item-fab:hover {
-    transform: translateY(-4px);
-    box-shadow: var(--md-elevation-2);
 }
\ No newline at end of file
diff --git a/html/index.html b/html/index.html
index 0f7492e..2087b9d 100644
--- a/html/index.html
+++ b/html/index.html
@@ -107,10 +107,5 @@
                 </div>
             </div>
         </div>
-
-        <!-- Floating Action Button -->
-        <button id="add-item-fab" class="fab" aria-label="Add New Item">
-            <span class="material-symbols-rounded">add</span>
-        </button>
     </body>
 </html>
diff --git a/html/js/editor.js b/html/js/editor.js
index 6628262..ef1f49d 100644
--- a/html/js/editor.js
+++ b/html/js/editor.js
@@ -110,6 +110,18 @@ function buildFormFields(container, data, prefix = "") {
                         fieldset.appendChild(legend);
 
                         buildFormFields(fieldset, item, `${prefix}${field}[${idx}].`);
+
+                        // Delete button
+                        const deleteBtn = document.createElement("button");
+                        deleteBtn.textContent = "Delete";
+                        deleteBtn.className = "delete-button";
+                        deleteBtn.onclick = () => {
+                            val.splice(idx, 1);
+                            container.innerHTML = "";
+                            buildFormFields(container, data, prefix);
+                        };
+                        fieldset.appendChild(deleteBtn);
+
                         group.appendChild(fieldset);
                     } else {
                         const itemGroup = document.createElement("div");
@@ -151,6 +163,17 @@ function buildFormFields(container, data, prefix = "") {
                         group.appendChild(itemGroup);
                     }
                 });
+
+                // Add button
+                const addBtn = document.createElement("button");
+                addBtn.textContent = "Add " + field;
+                addBtn.className = "add-button";
+                addBtn.onclick = () => {
+                    val.push({});
+                    container.innerHTML = "";
+                    buildFormFields(container, data, prefix);
+                };
+                group.appendChild(addBtn);
             } else {
                 const fieldset = document.createElement("fieldset");
                 fieldset.className = "nested-fieldset";
@@ -186,6 +209,7 @@ function buildFormFields(container, data, prefix = "") {
     });
 }
 
+
 // Open modal to edit a key
 function openEditModal(key, value) {
     const modal = document.getElementById("edit-modal");
@@ -368,7 +392,6 @@ window.addEventListener("DOMContentLoaded", () => {
         const file = li.dataset.file;
         li.addEventListener("click", () => selectFile(file, li));
     });
-    document.getElementById("add-item-fab").onclick = openNewItemModal;
     setupSearch();
     setupKeyboard();
 });