Add logo and rename

frontend/src/file-tree.js

@@ -10,6 +10,12 @@ class FileTree {
     }
 
     init() {
+        this.setupEventListeners();
+
+        console.log('FileTree initialized with event delegation');
+    }
+
+    setupEventListeners() {
         // Utiliser la délégation d'événements sur le conteneur de la sidebar
         // Cela évite de perdre les listeners après les swaps htmx
         const sidebar = document.getElementById('sidebar');
@@ -18,8 +24,13 @@ class FileTree {
             return;
         }
 
-        // Event listener délégué pour les clics sur les folder-headers
-        sidebar.addEventListener('click', (e) => {
+        // Supprimer les anciens listeners s'ils existent
+        if (this.clickHandler) {
+            sidebar.removeEventListener('click', this.clickHandler);
+        }
+
+        // Créer et stocker le handler pour pouvoir le supprimer plus tard
+        this.clickHandler = (e) => {
             // Ignorer les clics sur les checkboxes
             if (e.target.classList.contains('selection-checkbox')) {
                 return;
@@ -41,12 +52,13 @@ class FileTree {
                 // Ne pas bloquer la propagation pour les fichiers
                 return;
             }
-        });
+        };
+
+        // Attacher le handler
+        sidebar.addEventListener('click', this.clickHandler);
 
         // Event listeners délégués pour le drag & drop
         this.setupDelegatedDragAndDrop(sidebar);
-
-        console.log('FileTree initialized with event delegation');
     }
 
     toggleFolder(header) {
@@ -69,8 +81,17 @@ class FileTree {
     }
 
     setupDelegatedDragAndDrop(sidebar) {
+        // Supprimer les anciens handlers s'ils existent
+        if (this.dragStartHandler) {
+            sidebar.removeEventListener('dragstart', this.dragStartHandler);
+            sidebar.removeEventListener('dragend', this.dragEndHandler);
+            sidebar.removeEventListener('dragover', this.dragOverHandler);
+            sidebar.removeEventListener('dragleave', this.dragLeaveHandler);
+            sidebar.removeEventListener('drop', this.dropHandler);
+        }
+
         // Drag start - délégué pour fichiers et dossiers
-        sidebar.addEventListener('dragstart', (e) => {
+        this.dragStartHandler = (e) => {
             const fileItem = e.target.closest('.file-item');
             const folderHeader = e.target.closest('.folder-header');
 
@@ -79,41 +100,48 @@ class FileTree {
             } else if (folderHeader && folderHeader.draggable) {
                 this.handleDragStart(e, 'folder', folderHeader);
             }
-        });
+        };
 
         // Drag end - délégué
-        sidebar.addEventListener('dragend', (e) => {
+        this.dragEndHandler = (e) => {
             const fileItem = e.target.closest('.file-item');
             const folderHeader = e.target.closest('.folder-header');
 
             if (fileItem || folderHeader) {
                 this.handleDragEnd(e);
             }
-        });
+        };
 
         // Drag over - délégué sur les folder-headers
-        sidebar.addEventListener('dragover', (e) => {
+        this.dragOverHandler = (e) => {
             const folderHeader = e.target.closest('.folder-header');
             if (folderHeader) {
                 this.handleDragOver(e, folderHeader);
             }
-        });
+        };
 
         // Drag leave - délégué
-        sidebar.addEventListener('dragleave', (e) => {
+        this.dragLeaveHandler = (e) => {
             const folderHeader = e.target.closest('.folder-header');
             if (folderHeader) {
                 this.handleDragLeave(e, folderHeader);
             }
-        });
+        };
 
         // Drop - délégué
-        sidebar.addEventListener('drop', (e) => {
+        this.dropHandler = (e) => {
             const folderHeader = e.target.closest('.folder-header');
             if (folderHeader) {
                 this.handleDrop(e, folderHeader);
             }
-        });
+        };
+
+        // Attacher les handlers
+        sidebar.addEventListener('dragstart', this.dragStartHandler);
+        sidebar.addEventListener('dragend', this.dragEndHandler);
+        sidebar.addEventListener('dragover', this.dragOverHandler);
+        sidebar.addEventListener('dragleave', this.dragLeaveHandler);
+        sidebar.addEventListener('drop', this.dropHandler);
 
         // Rendre les dossiers draggables (sauf racine)
         this.updateDraggableAttributes();
@@ -124,6 +152,7 @@ class FileTree {
             // Vérifier si le swap concerne le file-tree
             const target = event.detail?.target;
             if (target && (target.id === 'file-tree' || target.closest('#file-tree'))) {
+                console.log('FileTree: afterSwap detected, updating attributes...');
                 this.updateDraggableAttributes();
             }
         });
@@ -131,10 +160,22 @@ class FileTree {
         // Écouter aussi les swaps out-of-band (oob) qui mettent à jour le file-tree
         document.body.addEventListener('htmx:oobAfterSwap', (event) => {
             const target = event.detail?.target;
+            // Ignorer les swaps de statut (auto-save-status, save-status)
             if (target && target.id === 'file-tree') {
+                console.log('FileTree: oobAfterSwap detected, updating attributes...');
                 this.updateDraggableAttributes();
             }
         });
+
+        // Écouter les restaurations d'historique (bouton retour du navigateur)
+        document.body.addEventListener('htmx:historyRestore', () => {
+            console.log('FileTree: History restored, re-initializing event listeners...');
+            // Réinitialiser complètement les event listeners après restauration de l'historique
+            setTimeout(() => {
+                this.setupEventListeners();
+                this.updateDraggableAttributes();
+            }, 50);
+        });
     }
 
     updateDraggableAttributes() {
@@ -415,7 +456,8 @@ window.handleNewNote = function(event) {
     if (typeof htmx !== 'undefined') {
         htmx.ajax('GET', `/api/notes/${encodeURIComponent(noteName)}`, {
             target: '#editor-container',
-            swap: 'innerHTML'
+            swap: 'innerHTML',
+            pushUrl: true
         });
     }
 }