Use styled modal dialogs for confirmations

static/js/app.js

@@ -27,6 +27,64 @@ export function toast(message, type = 'info') {
   }, 3000);
 }
 
+export function confirmDialog({
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  confirmClass = 'btn--danger',
+}) {
+  document.getElementById('confirm-modal')?.remove();
+
+  return new Promise((resolve) => {
+    const overlay = document.createElement('div');
+    overlay.id = 'confirm-modal';
+    overlay.className = 'auth-overlay';
+    overlay.tabIndex = -1;
+    overlay.innerHTML = `
+      <div class="auth-card confirm-card fade-in" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
+        <div class="auth-card__icon confirm-card__icon confirm-card__icon--danger">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 9v4"/>
+            <path d="M12 17h.01"/>
+            <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+          </svg>
+        </div>
+        <h2 id="confirm-title" class="auth-card__title">${title}</h2>
+        <p class="auth-card__desc">${message}</p>
+        <div class="confirm-card__actions">
+          <button type="button" class="btn btn--ghost" data-action="cancel">${cancelText}</button>
+          <button type="button" class="btn ${confirmClass}" data-action="confirm">${confirmText}</button>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(overlay);
+
+    const cancelBtn = overlay.querySelector('[data-action="cancel"]');
+    const confirmBtn = overlay.querySelector('[data-action="confirm"]');
+
+    const close = (result) => {
+      overlay.remove();
+      resolve(result);
+    };
+
+    overlay.addEventListener('click', (e) => {
+      if (e.target === overlay) close(false);
+    });
+
+    cancelBtn.addEventListener('click', () => close(false));
+    confirmBtn.addEventListener('click', () => close(true));
+
+    overlay.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') close(false);
+    });
+
+    overlay.focus();
+    confirmBtn.focus();
+  });
+}
+
 // ── Token auth modal ──────────────────────────────────────────────────────
 
 function showTokenModal(onSuccess) {