Fix import modal UX: always merge, keep textarea, fix dark checkbox

css/styles.css

@@ -339,9 +339,33 @@ body {
 }
 
 .toggle-label input[type="checkbox"] {
-  accent-color: var(--text);
+  appearance: none;
+  width: 0.875rem;
+  height: 0.875rem;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  background: var(--bg-editor);
   margin: 0;
   cursor: pointer;
+  position: relative;
+}
+
+.toggle-label input[type="checkbox"]:checked {
+  background: var(--text);
+  border-color: var(--text);
+}
+
+.toggle-label input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  border-bottom: 1.5px solid var(--bg);
+  border-right: 1.5px solid var(--bg);
+  width: 4px;
+  height: 7px;
+  transform: rotate(45deg);
+  top: 0;
+  left: 3px;
 }
 
 /* Output */

index.html

@@ -86,9 +86,6 @@ <h1 class="app-title">Firegen</h1>
       <textarea id="bash-import-textarea" class="modal-textarea" rows="15" placeholder="Paste firewall-cmd commands here...&#10;&#10;firewall-cmd --permanent --zone=public --add-service=http&#10;firewall-cmd --permanent --zone=public --add-port=8080/tcp"></textarea>
       <div id="bash-import-status" class="modal-status" hidden></div>
       <div class="modal-actions">
-        <label class="toggle-label">
-          <input type="checkbox" id="bash-import-merge"> Merge
-        </label>
         <button id="bash-import-submit" class="btn btn-sm">Import</button>
       </div>
     </div>

js/app.mjs

@@ -82,7 +82,6 @@ function init() {
       btnImport: document.getElementById("bash-import-submit"),
       btnCancel: document.getElementById("bash-import-cancel"),
       status: document.getElementById("bash-import-status"),
-      mergeCheckbox: document.getElementById("bash-import-merge"),
     },
     (yaml) => {
       editor.setValue(yaml);

js/import-export.mjs

@@ -208,10 +208,9 @@ export function setupImport(fileInput, onLoad) {
  * @param {function} getEditorYaml - returns current editor YAML string (for merge mode)
  */
 export function setupBashImport(elements, onImport, getEditorYaml) {
-  const { btnOpen, modal, textarea, btnImport, btnCancel, status, mergeCheckbox } = elements;
+  const { btnOpen, modal, textarea, btnImport, btnCancel, status } = elements;
 
   function openModal() {
-    textarea.value = "";
     status.hidden = true;
     status.textContent = "";
     modal.hidden = false;
@@ -268,10 +267,9 @@ export function setupBashImport(elements, onImport, getEditorYaml) {
       return;
     }
 
+    // Always merge with existing editor content
     let finalConfig = config;
-
-    // Merge mode: combine with existing editor content
-    if (mergeCheckbox && mergeCheckbox.checked && getEditorYaml) {
+    if (getEditorYaml) {
       const existingYaml = getEditorYaml();
       if (existingYaml && existingYaml.trim()) {
         try {
@@ -280,7 +278,7 @@ export function setupBashImport(elements, onImport, getEditorYaml) {
             finalConfig = mergeConfigs(existing, config);
           }
         } catch {
-          // Existing YAML is invalid — fall through to replace mode
+          // Existing YAML is invalid — replace instead
         }
       }
     }