popup

modules/pi_control/assets/pi_control.css

@@ -269,32 +269,8 @@
   padding: 0 6px;
 }
 
-.modal {
-  position: fixed;
-  inset: 0;
-  background: rgba(10, 14, 24, 0.55);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  z-index: 40;
-}
-.modal.is-open { display: flex; }
 .modal-card {
   width: min(1100px, 96vw);
-  max-height: 90vh;
-  overflow: auto;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  box-shadow: var(--shadow);
-  padding: 16px;
-}
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
 }
 .modal-actions {
   display: inline-flex;

modules/pihole/assets/pihole.css

@@ -290,34 +290,6 @@
   font-size: 1.1rem;
 }
 
-.modal {
-  position: fixed;
-  inset: 0;
-  background: rgba(10, 14, 24, 0.55);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  z-index: 40;
-}
-.modal.is-open { display: flex; }
-.modal-card {
-  width: min(880px, 96vw);
-  max-height: 90vh;
-  overflow: auto;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  box-shadow: var(--shadow);
-  padding: 16px;
-}
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
 @media (max-width: 680px) {
   .pihole-actions {
     flex-direction: column;

modules/pihole/assets/pihole_instances.js

@@ -66,7 +66,15 @@
     if (primaryInput) primaryInput.checked = false;
   };
 
+  const modalApi = window.NexusModal && typeof window.NexusModal.create === 'function'
+    ? window.NexusModal.create(modal, { initialFocus: 'input[name="instance_id"]' })
+    : null;
+
   const openModal = () => {
+    if (modalApi) {
+      modalApi.open();
+      return;
+    }
     modal.classList.add('is-open');
     modal.setAttribute('aria-hidden', 'false');
     if (idInput) {
@@ -75,6 +83,10 @@
   };
 
   const closeModal = () => {
+    if (modalApi) {
+      modalApi.close();
+      return;
+    }
     modal.classList.remove('is-open');
     modal.setAttribute('aria-hidden', 'true');
   };
@@ -113,15 +125,17 @@
     });
   }
 
-  modal.addEventListener('click', (event) => {
-    if (event.target === modal) {
-      closeModal();
-    }
-  });
+  if (!modalApi) {
+    modal.addEventListener('click', (event) => {
+      if (event.target === modal) {
+        closeModal();
+      }
+    });
 
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape' && modal.classList.contains('is-open')) {
-      closeModal();
-    }
-  });
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && modal.classList.contains('is-open')) {
+        closeModal();
+      }
+    });
+  }
 })();