Update templates/index.html

templates/index.html

@@ -612,10 +612,12 @@
             afficherSauvegardes();
         }
 
-        function afficherSauvegardes() {
+        
+function afficherSauvegardes() {
     const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
     const backupsList = document.getElementById('backups-list');
     backupsList.innerHTML = '';
+    
     if (sauvegardes.length === 0) {
         backupsList.innerHTML = `
             <div class="bg-blue-50 rounded-lg p-8 text-center">
@@ -662,7 +664,7 @@
                     </button>
                 </div>
             </div>
-            <div class="text-sm text-gray-700 backup-content prose max-w-none mt-3" style="display: none;">${marked.parse(sauvegarde.contenu)}</div>
+            <div class="backup-content mt-4 text-sm text-gray-700 prose max-w-none border-t border-gray-100 pt-3" style="display: none;">${marked.parse(sauvegarde.contenu)}</div>
         `;
         backupsList.appendChild(sauvegardeDiv);
 
@@ -672,24 +674,21 @@
             // Ignorer les clics sur les boutons
             if (e.target.tagName === "BUTTON" || e.target.closest('button')) return;
             
-            const allContents = document.querySelectorAll('.backup-content');
-            allContents.forEach(content => {
-                if (content !== backupContentDiv) {
-                    content.classList.remove('backup-content-expanded');
-                    content.style.display = 'none'; // Masquer les autres contenus
+            // Fermer tous les autres éléments ouverts
+            document.querySelectorAll('.backup-content').forEach(content => {
+                if (content !== backupContentDiv && content.style.display === 'block') {
+                    content.style.display = 'none';
                 }
             });
             
-            backupContentDiv.classList.toggle('backup-content-expanded');
-            
-            // Basculer l'affichage (display) en fonction de l'état
-            if (backupContentDiv.classList.contains('backup-content-expanded')) {
-                backupContentDiv.style.display = 'block'; // Afficher le contenu
+            // Basculer l'affichage du contenu actuel
+            if (backupContentDiv.style.display === 'none') {
+                backupContentDiv.style.display = 'block';
                 setTimeout(() => {
                     MathJax.typesetPromise([backupContentDiv]);
-                }, 300);
+                }, 100);
             } else {
-                backupContentDiv.style.display = 'none'; // Masquer le contenu
+                backupContentDiv.style.display = 'none';
             }
         });
 
@@ -747,7 +746,6 @@
     });
 }
 
-
         async function submitFrancaisForm() {
             const form = document.getElementById('francais-form');
             const output = document.getElementById('francais-output');