deploy

system/apps/admin-apps/assets/app.css

@@ -257,6 +257,10 @@
     min-width: 220px;
 }
 
+#admin-apps-app .aa-inline-access-trigger {
+    justify-self: start;
+}
+
 #admin-apps-app .aa-inline-access-current {
     margin: 0;
     font-size: 14px;
@@ -326,6 +330,65 @@
     justify-self: start;
 }
 
+#admin-apps-app .aa-secondary {
+    background: rgba(226, 232, 240, 0.9);
+    color: #0f172a;
+}
+
+#admin-apps-app .aa-modal {
+    width: min(680px, calc(100vw - 40px));
+    max-height: calc(100vh - 40px);
+    padding: 0;
+    border: 0;
+    border-radius: 22px;
+    background: transparent;
+    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.35);
+}
+
+#admin-apps-app .aa-modal::backdrop {
+    background: rgba(15, 23, 42, 0.42);
+    backdrop-filter: blur(4px);
+}
+
+#admin-apps-app .aa-modal-card {
+    display: grid;
+    gap: 18px;
+    padding: 22px;
+    border-radius: 22px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
+}
+
+#admin-apps-app .aa-modal-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+}
+
+#admin-apps-app .aa-modal-title {
+    margin: 0 0 6px;
+    font-size: 22px;
+    line-height: 1.15;
+    color: #0f172a;
+}
+
+#admin-apps-app .aa-modal-body {
+    display: grid;
+    gap: 14px;
+}
+
+#admin-apps-app .aa-modal-close {
+    width: 38px;
+    height: 38px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(226, 232, 240, 0.9);
+    color: #0f172a;
+    font-size: 22px;
+    line-height: 1;
+    cursor: pointer;
+}
+
 #admin-apps-app .aa-message.is-success {
     background: rgba(34, 197, 94, 0.12);
     color: #166534;

system/apps/admin-apps/assets/app.js

@@ -22,6 +22,54 @@
     };
 
     const bindInteractions = (host, loadRoute) => {
+        host.querySelectorAll('[data-aa-open-modal]').forEach((button) => {
+            if (button.dataset.aaBound === '1') {
+                return;
+            }
+
+            button.dataset.aaBound = '1';
+            button.addEventListener('click', () => {
+                const modalId = button.getAttribute('data-aa-open-modal') || '';
+                const modal = host.querySelector(`[data-aa-modal="${CSS.escape(modalId)}"]`);
+                if (modal instanceof HTMLDialogElement) {
+                    modal.showModal();
+                }
+            });
+        });
+
+        host.querySelectorAll('[data-aa-close-modal]').forEach((button) => {
+            if (button.dataset.aaBound === '1') {
+                return;
+            }
+
+            button.dataset.aaBound = '1';
+            button.addEventListener('click', () => {
+                const modal = button.closest('dialog');
+                if (modal instanceof HTMLDialogElement) {
+                    modal.close();
+                }
+            });
+        });
+
+        host.querySelectorAll('dialog[data-aa-modal]').forEach((dialog) => {
+            if (dialog.dataset.aaBound === '1') {
+                return;
+            }
+
+            dialog.dataset.aaBound = '1';
+            dialog.addEventListener('click', (event) => {
+                const rect = dialog.getBoundingClientRect();
+                const inside = event.clientX >= rect.left
+                    && event.clientX <= rect.right
+                    && event.clientY >= rect.top
+                    && event.clientY <= rect.bottom;
+
+                if (!inside) {
+                    dialog.close();
+                }
+            });
+        });
+
         host.querySelectorAll('a[href]').forEach((link) => {
             if (link.dataset.aaBound === '1') {
                 return;
@@ -66,6 +114,11 @@
                         throw new Error(`HTTP ${response.status}`);
                     }
 
+                    const modal = form.closest('dialog');
+                    if (modal instanceof HTMLDialogElement) {
+                        modal.close();
+                    }
+
                     host.innerHTML = html;
                     bindInteractions(host, loadRoute);
                 } catch (error) {