feat(ui): replace native restore alert with custom dark-themed modal (v1.3.6)

public/assets/app.js

@@ -4945,28 +4945,93 @@ async function createBackupNow() {
     }
 }
 
-async function confirmRestoreBackup(filename) {
-    const ok = confirm(`⚠️ ATTENTION — RESTAURATION COMPLÈTE DU SYSTÈME NEXUSPBX ⚠️\n\nVoulez-vous restaurer le système depuis l'archive :\n${filename} ?\n\nCette action va :\n1. Remplacer la base de données SQLite\n2. Restaurer tous les fichiers sons, annonces et musiques\n3. Restaurer toutes les boîtes vocales, salutations et PINs\n4. Recharger l'intégralité du PBX Asterisk\n\nConfirmez-vous la restauration immédiate ?`);
-    if (!ok) return;
+let pendingRestoreAction = null;
+let pendingRestoreInput = null;
 
-    showToast("Restauration du système en cours... Veuillez patienter.", "info");
+function showRestoreModal({ title, filename, badgeText, onConfirm, inputEl = null }) {
+    const titleEl = document.getElementById('modal-restore-title');
+    if (titleEl) titleEl.textContent = title || "Restauration Complète du Système";
+    
+    const nameEl = document.getElementById('restore-target-name');
+    if (nameEl) nameEl.textContent = filename || "Archive de sauvegarde";
+    
+    const badgeEl = document.getElementById('restore-target-badge');
+    if (badgeEl) badgeEl.textContent = badgeText || "Archive";
+
+    const confirmBtn = document.getElementById('btn-confirm-restore');
+    const cancelBtn = document.getElementById('btn-cancel-restore');
+    if (confirmBtn) {
+        confirmBtn.disabled = false;
+        confirmBtn.innerHTML = `
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+            <span>Confirmer la Restauration</span>
+        `;
+    }
+    if (cancelBtn) cancelBtn.disabled = false;
+
+    pendingRestoreAction = onConfirm;
+    pendingRestoreInput = inputEl;
+
+    openModal('modal-restore-backup');
+}
+
+function closeRestoreModal() {
+    closeModal('modal-restore-backup');
+    if (pendingRestoreInput) {
+        pendingRestoreInput.value = '';
+        pendingRestoreInput = null;
+    }
+    pendingRestoreAction = null;
+}
+
+async function executePendingRestore() {
+    if (!pendingRestoreAction) return;
+    const confirmBtn = document.getElementById('btn-confirm-restore');
+    const cancelBtn = document.getElementById('btn-cancel-restore');
+    if (confirmBtn) {
+        confirmBtn.disabled = true;
+        confirmBtn.innerHTML = `
+            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
+            <span>Restauration en cours...</span>
+        `;
+    }
+    if (cancelBtn) cancelBtn.disabled = true;
 
     try {
-        const res = await apiCall('restore_backup', { filename });
-        showToast(res.message || "Restauration terminée avec succès !", 'success');
-        setTimeout(() => {
-            window.location.reload();
-        }, 2000);
+        await pendingRestoreAction();
     } catch (err) {
-        showToast("Échec de la restauration : " + err.message, 'error');
+        showToast("Erreur inattendue : " + err.message, "error");
+        closeRestoreModal();
     }
 }
 
+function confirmRestoreBackup(filename) {
+    showRestoreModal({
+        title: "Restauration du Système NexusPBX",
+        filename: filename,
+        badgeText: "Archive Locale",
+        onConfirm: async () => {
+            showToast("Restauration du système en cours... Veuillez patienter.", "info");
+            try {
+                const res = await apiCall('restore_backup', { filename });
+                closeRestoreModal();
+                showToast(res.message || "Restauration terminée avec succès !", 'success');
+                setTimeout(() => {
+                    window.location.reload();
+                }, 2000);
+            } catch (err) {
+                closeRestoreModal();
+                showToast("Échec de la restauration : " + err.message, 'error');
+            }
+        }
+    });
+}
+
 function triggerBackupUpload() {
     document.getElementById('backup-upload-input')?.click();
 }
 
-async function handleBackupUpload(input) {
+function handleBackupUpload(input) {
     const file = input?.files?.[0];
     if (!file) return;
 
@@ -4977,35 +5042,38 @@ async function handleBackupUpload(input) {
         return;
     }
 
-    const ok = confirm(`⚠️ RESTAURATION DISASTER RECOVERY VIA FICHIER TÉLÉVERSÉ ⚠️\n\nFichier sélectionné : ${file.name} (${(file.size / (1024 * 1024)).toFixed(2)} Mo)\n\nVoulez-vous restaurer immédiatement le système NexusPBX avec cette archive ?\nToutes les données actuelles seront remplacées.`);
-    if (!ok) {
-        input.value = '';
-        return;
-    }
+    const fileSizeMb = (file.size / (1024 * 1024)).toFixed(2);
 
-    showToast("Téléversement et restauration de l'archive en cours...", "info");
+    showRestoreModal({
+        title: "Disaster Recovery — Archive Téléversée",
+        filename: `${file.name} (${fileSizeMb} Mo)`,
+        badgeText: "Fichier Téléversé",
+        inputEl: input,
+        onConfirm: async () => {
+            showToast("Téléversement et restauration de l'archive en cours...", "info");
+            const fd = new FormData();
+            fd.append('backup_file', file);
 
-    const fd = new FormData();
-    fd.append('backup_file', file);
-
-    try {
-        const response = await fetch('/api.php?action=upload_restore_backup', {
-            method: 'POST',
-            body: fd
-        });
-        const res = await response.json();
-        if (!res.success) {
-            throw new Error(res.message || "Erreur lors de la restauration");
+            try {
+                const response = await fetch('/api.php?action=upload_restore_backup', {
+                    method: 'POST',
+                    body: fd
+                });
+                const res = await response.json();
+                closeRestoreModal();
+                if (!res.success) {
+                    throw new Error(res.message || "Erreur lors de la restauration");
+                }
+                showToast(res.message, 'success');
+                setTimeout(() => {
+                    window.location.reload();
+                }, 2000);
+            } catch (err) {
+                closeRestoreModal();
+                showToast("Échec de la restauration : " + err.message, 'error');
+            }
         }
-        showToast(res.message, 'success');
-        setTimeout(() => {
-            window.location.reload();
-        }, 2000);
-    } catch (err) {
-        showToast("Échec de la restauration : " + err.message, 'error');
-    } finally {
-        input.value = '';
-    }
+    });
 }
 
 function downloadBackup(filename) {