From c35374f2dac0a34dad716f704ca6d7538f14e8af Mon Sep 17 00:00:00 2001
From: Kakarot <57848836+GhzGarage@users.noreply.github.com>
Date: Sun, 22 Jun 2025 21:52:20 -0500
Subject: [PATCH] UI updates

---
 html/css/editor.css     | 366 +++++++++++++++++++++++++---------------
 html/css/styleguide.css |  34 ++--
 html/index.html         |  26 +--
 html/js/editor.js       | 188 +++++++++++++--------
 4 files changed, 388 insertions(+), 226 deletions(-)

diff --git a/html/css/editor.css b/html/css/editor.css
index d96e121..68bdb0c 100644
--- a/html/css/editor.css
+++ b/html/css/editor.css
@@ -22,17 +22,21 @@
     justify-content: space-between;
     align-items: center;
     padding: 10px;
-    background-color: var(--md-dark-surface-container-high);
+    background-color: var(--md-dark-surface-container-highest);
+    border-bottom: 1px solid var(--md-dark-outline-variant);
 }
+
 #editor-container > header h1 {
     margin: 0;
-    font-size: var(--md-typescale-title-large-size);
+    font-size: var(--md-typescale-headline-large-size);
     color: var(--md-dark-on-surface);
 }
+
 #editor-container > header .controls {
     display: flex;
     gap: 12px;
 }
+
 #save-btn,
 #close-btn {
     display: flex;
@@ -45,19 +49,23 @@
     cursor: pointer;
     transition: background-color 0.2s;
 }
+
 #save-btn {
-    background-color: var(--md-dark-primary);
-    color: var(--md-dark-on-primary);
+    background-color: var(--md-dark-success-container);
+    color: var(--md-dark-on-success-container);
 }
+
 #save-btn:hover {
-    background-color: var(--md-dark-primary-container);
+    background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
 }
+
 #close-btn {
-    background-color: var(--md-dark-secondary);
-    color: var(--md-dark-on-secondary);
+    background-color: var(--md-dark-error-container);
+    color: var(--md-dark-on-error-container);
 }
+
 #close-btn:hover {
-    background-color: var(--md-dark-secondary-container);
+    background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
 }
 
 /* Main layout */
@@ -69,10 +77,10 @@
 
 /* Sidebar */
 #editor-container .sidebar {
-    width: 240px;
+    width: 200px;
     padding: 16px;
-    background-color: var(--md-dark-surface-container);
-    box-shadow: inset -1px 0 0 0 var(--md-dark-outline-variant);
+    background-color: var(--md-dark-surface-container-high);
+    border-right: 1px solid var(--md-dark-outline-variant);
 }
 
 #editor-container .file-list {
@@ -97,7 +105,7 @@
 }
 
 #editor-container .file-list li.active {
-    color: var(--md-dark-on-primary);
+    background-color: rgba(255, 255, 255, var(--md-state-focus-dark-opacity));
 }
 
 /* Main content area */
@@ -107,6 +115,8 @@
     flex-direction: column;
     padding: 16px;
     overflow: hidden;
+    background-color: var(--md-dark-surface-container-low);
+    color: var(--md-dark-on-surface);
 }
 
 /* Search bar */
@@ -143,41 +153,245 @@
     flex: 1;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-auto-rows: 150px;
     gap: 12px;
     overflow-y: auto;
     padding: 8px;
 }
+
 .data-card {
-    background-color: var(--md-dark-surface-container-low);
-    border-radius: var(--md-radius-medium);
-    box-shadow: var(--md-elevation-1);
-    padding: 16px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    padding: 16px;
+    background-color: var(--md-dark-surface-container);
+    border-radius: var(--md-radius-medium);
+    box-shadow: var(--md-elevation-1);
     transition: transform 0.1s, box-shadow 0.1s;
 }
+
 .data-card:hover {
     transform: translateY(-2px);
     box-shadow: var(--md-elevation-2);
 }
+
 .data-card h3 {
     margin: 0 0 8px 0;
     font-size: var(--md-typescale-title-medium-size);
     color: var(--md-dark-on-surface);
 }
+
 .btn-edit {
     align-self: flex-end;
     padding: 4px 8px;
     border: none;
     border-radius: var(--md-radius-small);
-    background-color: var(--md-dark-secondary);
+    background-color: var(--md-dark-surface-container-low);
     color: var(--md-dark-on-secondary);
     cursor: pointer;
     transition: background-color 0.2s;
 }
+
 .btn-edit:hover {
-    background-color: var(--md-dark-secondary-container);
+    background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
+}
+
+/* Modal */
+#edit-modal.hidden {
+    display: none;
+}
+
+#edit-modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    background-color: var(--md-dark-scrim);
+    z-index: 1000;
+}
+
+.modal-content {
+    display: flex;
+    flex-direction: column;
+    width: 60vw;
+    height: 60vh;
+    background-color: var(--md-dark-surface);
+    border-radius: var(--md-radius-medium);
+    box-shadow: var(--md-elevation-4);
+    overflow: hidden;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    background-color: var(--md-dark-surface-container-high);
+    border-bottom: 1px solid var(--md-dark-outline-variant);
+}
+
+.modal-header h2 {
+    margin: 0;
+    font-size: var(--md-typescale-headline-large-size);
+    color: var(--md-dark-on-surface);
+    text-transform: capitalize;
+}
+
+#close-modal-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    background-color: var(--md-dark-error-container);
+    color: var(--md-dark-on-error-container);
+    border-radius: var(--md-radius-small);
+}
+
+#close-modal-btn:hover {
+    background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
+}
+
+.modal-body {
+    padding: 16px;
+    overflow-y: auto;
+    flex: 1;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 12px;
+    background-color: var(--md-dark-surface-container-high);
+    border-top: 1px solid var(--md-dark-outline-variant);
+}
+
+#cancel-edit-btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: var(--md-radius-small);
+    background-color: var(--md-dark-error-container);
+    color: var(--md-dark-on-error-container);
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+#cancel-edit-btn:hover {
+    background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
+}
+
+#save-item-btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: var(--md-radius-small);
+    background-color: var(--md-dark-success-container);
+    color: var(--md-dark-on-success-container);
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+#save-item-btn:hover {
+    background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 12px;
+}
+
+.form-group label {
+    margin-bottom: 4px;
+    font-size: var(--md-typescale-label-large-size);
+    color: var(--md-dark-on-surface);
+}
+
+.form-control {
+    padding: 8px 12px;
+    font-size: var(--md-typescale-label-large-size);
+    background-color: var(--md-dark-surface-container-low);
+    color: var(--md-dark-on-surface);
+    border: 1px solid var(--md-dark-outline-variant);
+    border-radius: var(--md-radius-small);
+    outline: none;
+}
+
+.form-control:focus {
+    border-color: var(--md-dark-primary);
+}
+
+/* small monospace preview under each card title */
+.data-preview {
+    margin: 8px 0;
+    font-family: monospace;
+    white-space: pre-wrap;
+    color: var(--md-dark-on-surface);
+}
+
+/* nested object fieldsets styling */
+.nested-fieldset {
+    border: 1px solid var(--md-dark-outline-variant);
+    padding: 12px;
+    margin: 8px 0;
+    border-radius: var(--md-radius-small);
+    background-color: var(--md-dark-surface-container);
+}
+
+.nested-fieldset legend {
+    font-weight: 600;
+    padding: 0 6px;
+    color: var(--md-dark-on-surface);
+}
+
+/* indent array entries a bit */
+.array-container > .form-group {
+    margin-left: 16px;
+}
+
+/* Toggle Switch */
+.toggle-wrapper {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.toggle-wrapper input[type="checkbox"] {
+    display: none;
+}
+
+.toggle-switch {
+    position: relative;
+    width: 42px;
+    height: 24px;
+    background-color: var(--md-dark-outline-variant);
+    border-radius: 24px;
+    transition: background-color 0.3s ease;
+}
+
+.toggle-switch::before {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background-color: var(--md-dark-on-primary);
+    border-radius: 50%;
+    transition: transform 0.3s ease;
+}
+
+.toggle-wrapper input:checked + .toggle-switch {
+    background-color: var(--md-dark-primary);
+}
+
+.toggle-wrapper input:checked + .toggle-switch::before {
+    transform: translateX(18px);
 }
 
 /* Floating Action Button */
@@ -197,120 +411,8 @@
     box-shadow: var(--md-elevation-3);
     transition: transform 0.2s;
 }
+
 #add-item-fab:hover {
     transform: translateY(-4px);
     box-shadow: var(--md-elevation-2);
-}
-
-/* Modal */
-#edit-modal.hidden {
-    display: none;
-}
-#edit-modal {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: grid;
-    place-items: center;
-    background-color: var(--md-dark-scrim);
-    z-index: 1000;
-}
-.modal-content {
-    background-color: var(--md-dark-surface);
-    border-radius: var(--md-radius-medium);
-    width: 500px;
-    max-width: 90%;
-    display: flex;
-    flex-direction: column;
-    box-shadow: var(--md-elevation-4);
-    overflow: hidden;
-}
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px;
-    background-color: var(--md-dark-surface-container-high);
-    border-bottom: 1px solid var(--md-dark-outline-variant);
-}
-.modal-header h2 {
-    margin: 0;
-    font-size: var(--md-typescale-title-medium-size);
-    color: var(--md-dark-on-surface);
-}
-#close-modal-btn {
-    background: none;
-    border: none;
-    font-size: 24px;
-    color: var(--md-dark-on-surface-variant);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.modal-body {
-    padding: 16px;
-    overflow-y: auto;
-    flex: 1;
-}
-.modal-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-    padding: 12px;
-    background-color: var(--md-dark-surface-container-high);
-    border-top: 1px solid var(--md-dark-outline-variant);
-}
-#cancel-edit-btn {
-    padding: 8px 16px;
-    border: none;
-    border-radius: var(--md-radius-small);
-    background-color: var(--md-dark-secondary);
-    color: var(--md-dark-on-secondary);
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-#cancel-edit-btn:hover {
-    background-color: var(--md-dark-secondary-container);
-}
-#save-item-btn {
-    padding: 8px 16px;
-    border: none;
-    border-radius: var(--md-radius-small);
-    background-color: var(--md-dark-primary);
-    color: var(--md-dark-on-primary);
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-#save-item-btn:hover {
-    background-color: var(--md-dark-primary-container);
-}
-
-/* small monospace preview under each card title */
-.data-preview {
-    margin: 8px 0;
-    font-family: monospace;
-    white-space: pre-wrap;
-    color: var(--md-dark-on-surface-variant);
-}
-
-/* nested object fieldsets styling */
-.nested-fieldset {
-    border: 1px solid var(--md-dark-outline-variant);
-    padding: 12px;
-    margin: 8px 0;
-    border-radius: var(--md-radius-small);
-    background-color: var(--md-dark-surface-container-low);
-}
-.nested-fieldset legend {
-    font-weight: 600;
-    padding: 0 6px;
-    color: var(--md-dark-on-surface);
-}
-
-/* indent array entries a bit */
-.array-container > .form-group {
-    margin-left: 16px;
-}
+}
\ No newline at end of file
diff --git a/html/css/styleguide.css b/html/css/styleguide.css
index c1c4369..ab04246 100644
--- a/html/css/styleguide.css
+++ b/html/css/styleguide.css
@@ -111,21 +111,25 @@
     --md-radius-extra-large: 28px;
 
     /* Typography */
-    --md-typescale-display-large-size: 57px;
-    --md-typescale-display-medium-size: 45px;
-    --md-typescale-display-small-size: 36px;
-    --md-typescale-headline-large-size: 32px;
-    --md-typescale-headline-medium-size: 28px;
-    --md-typescale-headline-small-size: 24px;
-    --md-typescale-title-large-size: 22px;
-    --md-typescale-title-medium-size: 16px;
-    --md-typescale-title-small-size: 14px;
-    --md-typescale-body-large-size: 16px;
-    --md-typescale-body-medium-size: 14px;
-    --md-typescale-body-small-size: 12px;
-    --md-typescale-label-large-size: 14px;
-    --md-typescale-label-medium-size: 12px;
-    --md-typescale-label-small-size: 11px;
+    --md-typescale-display-large-size: 3.5625rem; /* 57px */
+    --md-typescale-display-medium-size: 2.8125rem; /* 45px */
+    --md-typescale-display-small-size: 2.25rem; /* 36px */
+    
+    --md-typescale-headline-large-size: 2rem; /* 32px */
+    --md-typescale-headline-medium-size: 1.75rem; /* 28px */
+    --md-typescale-headline-small-size: 1.5rem; /* 24px */
+
+    --md-typescale-title-large-size: 1.375rem; /* 22px */
+    --md-typescale-title-medium-size: 1rem; /* 16px */
+    --md-typescale-title-small-size: 0.875rem; /* 14px */
+
+    --md-typescale-body-large-size: 1rem; /* 16px */
+    --md-typescale-body-medium-size: 0.875rem; /* 14px */
+    --md-typescale-body-small-size: 0.75rem; /* 12px */
+
+    --md-typescale-label-large-size: 0.875rem; /* 14px */
+    --md-typescale-label-medium-size: 0.75rem; /* 12px */
+    --md-typescale-label-small-size: 0.6875rem; /* 11px */
 
     /* Exo 2 Typography */
     /* @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap"); */
diff --git a/html/index.html b/html/index.html
index 645112a..0f7492e 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
-        <link href="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
+        <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
+        <link href="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.prod.css" rel="stylesheet" type="text/css"/>
 
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" type="text/css" />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" type="text/css"/>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0"/>
 
-        <link href="css/style.css" rel="stylesheet" />
-        <link href="css/editor.css" rel="stylesheet" />
-        <link href="css/drawtext.css" rel="stylesheet" />
+        <link href="css/style.css" rel="stylesheet"/>
+        <link href="css/editor.css" rel="stylesheet"/>
+        <link href="css/drawtext.css" rel="stylesheet"/>
 
         <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js" defer></script>
         <script src="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.umd.prod.js" defer></script>
@@ -29,7 +29,7 @@
 
         <div id="editor-container">
             <header>
-                <h1>QB Config Editor</h1>
+                <h1>QBCore Config Editor</h1>
                 <div class="controls">
                     <button id="save-btn">
                         <span class="material-symbols-rounded">save</span>
@@ -79,7 +79,7 @@
                 <div class="main-content">
                     <div class="search-container">
                         <span class="material-symbols-rounded search-icon">search</span>
-                        <input type="text" id="search-input" placeholder="Search..." aria-label="Search through config items" />
+                        <input type="text" id="search-input" placeholder="Search..." aria-label="Search through config items"/>
                     </div>
 
                     <div id="data-container"></div>
@@ -98,11 +98,11 @@
                         <div id="editor-form"></div>
                     </div>
                     <div class="modal-footer">
-                        <button id="cancel-edit-btn">Cancel</button>
                         <button id="save-item-btn">
                             <span class="material-symbols-rounded">check</span>
                             Save
                         </button>
+                        <button id="cancel-edit-btn">Cancel</button>
                     </div>
                 </div>
             </div>
diff --git a/html/js/editor.js b/html/js/editor.js
index fb34337..6628262 100644
--- a/html/js/editor.js
+++ b/html/js/editor.js
@@ -34,18 +34,18 @@ function buildEditor(data) {
         card.innerHTML = `<h3>${key}</h3>`;
 
         // value preview
-        const preview = document.createElement("div");
-        preview.className = "data-preview";
-        if (typeof value === "boolean") {
-            preview.textContent = value;
-        } else if (Array.isArray(value)) {
-            preview.textContent = `[${value.map((v) => (typeof v === "object" ? JSON.stringify(v) : v)).join(", ")}]`;
-        } else if (typeof value === "object" && value !== null) {
-            preview.textContent = JSON.stringify(value);
-        } else {
-            preview.textContent = value;
-        }
-        card.appendChild(preview);
+        // const preview = document.createElement("div");
+        // preview.className = "data-preview";
+        // if (typeof value === "boolean") {
+        //     preview.textContent = value;
+        // } else if (Array.isArray(value)) {
+        //     preview.textContent = `[${value.map((v) => (typeof v === "object" ? JSON.stringify(v) : v)).join(", ")}]`;
+        // } else if (typeof value === "object" && value !== null) {
+        //     preview.textContent = JSON.stringify(value);
+        // } else {
+        //     preview.textContent = value;
+        // }
+        // card.appendChild(preview);
 
         const editBtn = document.createElement("button");
         editBtn.className = "btn-edit";
@@ -59,65 +59,120 @@ function buildEditor(data) {
 
 // Recursive field builder
 function buildFormFields(container, data, prefix = "") {
-    Object.entries(data).forEach(([field, val]) => {
-        const group = document.createElement("div");
-        group.className = "form-group";
+    const entries = Object.entries(data);
 
-        const label = document.createElement("label");
-        label.htmlFor = "field-" + prefix + field;
-        label.textContent = field;
-        group.appendChild(label);
+    // Sort fields: booleans first, then other flat fields, then nested objects
+    const sorted = [
+        ...entries.filter(([_, val]) => typeof val === "boolean"),
+        ...entries.filter(([_, val]) => val !== null && typeof val !== "object" && typeof val !== "boolean"),
+        ...entries.filter(([_, val]) => val !== null && typeof val === "object")
+    ];
 
+    sorted.forEach(([field, val]) => {
         if (typeof val === "boolean") {
+            const group = document.createElement("div");
+            group.className = "form-group form-toggle-group";
+
+            const label = document.createElement("label");
+            label.htmlFor = "field-" + prefix + field;
+            label.textContent = field;
+            group.appendChild(label);
+
+            const toggleLabel = document.createElement("label");
+            toggleLabel.className = "toggle-wrapper";
+
             const input = document.createElement("input");
             input.type = "checkbox";
             input.checked = val;
             input.name = prefix + field;
             input.id = "field-" + prefix + field;
-            input.className = "form-control";
-            group.appendChild(input);
-        } else if (Array.isArray(val)) {
-            // Array handling: differentiate primitives and objects
-            val.forEach((item, idx) => {
-                if (item !== null && typeof item === "object") {
-                    // Nested object in array: use fieldset
-                    const fieldset = document.createElement("fieldset");
-                    fieldset.className = "nested-fieldset";
-                    const legend = document.createElement("legend");
-                    legend.textContent = `${field}[${idx}]`;
-                    fieldset.appendChild(legend);
-                    buildFormFields(fieldset, item, prefix + field + `[${idx}].`);
-                    group.appendChild(fieldset);
-                } else {
-                    // Primitive in array
-                    const itemGroup = document.createElement("div");
-                    itemGroup.className = "form-group";
-                    const itemLabel = document.createElement("label");
-                    itemLabel.htmlFor = `${prefix}${field}[${idx}]`;
-                    itemLabel.textContent = `${field}[${idx}]`;
 
-                    const input = document.createElement("input");
-                    input.type = typeof item === "boolean" ? "checkbox" : "text";
-                    if (typeof item === "boolean") input.checked = item;
-                    else input.value = item;
-                    input.name = `${prefix}${field}[${idx}]`;
-                    input.id = `field-${prefix}${field}[${idx}]`;
-                    input.className = "form-control";
+            const span = document.createElement("span");
+            span.className = "toggle-switch";
 
-                    itemGroup.append(itemLabel, input);
-                    group.appendChild(itemGroup);
-                }
-            });
+            toggleLabel.appendChild(input);
+            toggleLabel.appendChild(span);
+            group.appendChild(toggleLabel);
+
+            container.appendChild(group);
         } else if (val !== null && typeof val === "object") {
-            // Nested object
-            const fieldset = document.createElement("fieldset");
-            fieldset.className = "nested-fieldset";
-            const legend = document.createElement("legend");
-            legend.textContent = field;
-            fieldset.appendChild(legend);
-            buildFormFields(fieldset, val, prefix + field + ".");
-            group.appendChild(fieldset);
+            const group = document.createElement("div");
+            group.className = "form-group";
+
+            if (Array.isArray(val)) {
+                val.forEach((item, idx) => {
+                    if (item !== null && typeof item === "object") {
+                        const fieldset = document.createElement("fieldset");
+                        fieldset.className = "nested-fieldset";
+
+                        const legend = document.createElement("legend");
+                        legend.textContent = `${field}[${idx}]`;
+                        fieldset.appendChild(legend);
+
+                        buildFormFields(fieldset, item, `${prefix}${field}[${idx}].`);
+                        group.appendChild(fieldset);
+                    } else {
+                        const itemGroup = document.createElement("div");
+                        itemGroup.className = "form-group";
+
+                        const itemLabel = document.createElement("label");
+                        itemLabel.htmlFor = `field-${prefix}${field}[${idx}]`;
+                        itemLabel.textContent = `${field}[${idx}]`;
+                        itemGroup.appendChild(itemLabel);
+
+                        if (typeof item === "boolean") {
+                            itemGroup.classList.add("form-toggle-group");
+
+                            const toggleLabel = document.createElement("label");
+                            toggleLabel.className = "toggle-wrapper";
+
+                            const input = document.createElement("input");
+                            input.type = "checkbox";
+                            input.checked = item;
+                            input.name = `${prefix}${field}[${idx}]`;
+                            input.id = `field-${prefix}${field}[${idx}]`;
+
+                            const span = document.createElement("span");
+                            span.className = "toggle-switch";
+
+                            toggleLabel.appendChild(input);
+                            toggleLabel.appendChild(span);
+                            itemGroup.appendChild(toggleLabel);
+                        } else {
+                            const input = document.createElement("input");
+                            input.type = "text";
+                            input.value = item;
+                            input.name = `${prefix}${field}[${idx}]`;
+                            input.id = `field-${prefix}${field}[${idx}]`;
+                            input.className = "form-control";
+                            itemGroup.appendChild(input);
+                        }
+
+                        group.appendChild(itemGroup);
+                    }
+                });
+            } else {
+                const fieldset = document.createElement("fieldset");
+                fieldset.className = "nested-fieldset";
+
+                const legend = document.createElement("legend");
+                legend.textContent = field;
+                fieldset.appendChild(legend);
+
+                buildFormFields(fieldset, val, prefix + field + ".");
+                group.appendChild(fieldset);
+            }
+
+            container.appendChild(group);
         } else {
+            const group = document.createElement("div");
+            group.className = "form-group";
+
+            const label = document.createElement("label");
+            label.htmlFor = "field-" + prefix + field;
+            label.textContent = field;
+            group.appendChild(label);
+
             const input = document.createElement("input");
             input.type = "text";
             input.value = val;
@@ -125,15 +180,16 @@ function buildFormFields(container, data, prefix = "") {
             input.id = "field-" + prefix + field;
             input.className = "form-control";
             group.appendChild(input);
+
+            container.appendChild(group);
         }
-        container.appendChild(group);
     });
 }
 
 // Open modal to edit a key
 function openEditModal(key, value) {
     const modal = document.getElementById("edit-modal");
-    modal.querySelector("h2").textContent = `Edit '${key}'`;
+    modal.querySelector("h2").textContent = `${key}`;
     const formContainer = document.getElementById("editor-form");
     formContainer.innerHTML = "";
 
@@ -142,7 +198,7 @@ function openEditModal(key, value) {
 
     // Determine if value is object or primitive
     const isObj = value !== null && typeof value === "object";
-    const editableData = isObj ? value : { [key]: value };
+    const editableData = isObj ? value : {[key]: value};
     const prefix = isObj ? "" : key + ".";
 
     buildFormFields(form, editableData, prefix);
@@ -152,7 +208,7 @@ function openEditModal(key, value) {
     document.getElementById("save-item-btn").onclick = async (e) => {
         e.preventDefault();
         const formElem = document.getElementById("editor-form-inner");
-        const updated = { ...allData[currentFile] };
+        const updated = {...allData[currentFile]};
         const resultValue = {};
 
         Array.from(formElem.elements).forEach((el) => {
@@ -247,7 +303,7 @@ function openNewItemModal() {
                 val = raw;
             }
         } else val = raw;
-        const updated = { ...allData[currentFile] };
+        const updated = {...allData[currentFile]};
         updated[key] = val;
         await saveConfig(updated);
     };
@@ -261,8 +317,8 @@ async function saveConfig(configData) {
     try {
         const res = await fetch(`https://${GetParentResourceName()}/saveConfig`, {
             method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ file: currentFile, data: configData }),
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({file: currentFile, data: configData}),
         });
         const result = await res.json();
         if (result === "ok") {