ui updates

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);
 }

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>

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();
 });