Add logo and rename

2025-11-12 17:16:13 +01:00
parent 584a4a0acd
commit f903e28728
49 changed files with 628 additions and 192 deletions
--- a/frontend/src/sidebar-sections.js
+++ b/frontend/src/sidebar-sections.js
@ -0,0 +1,193 @@
+/**
+ * SidebarSections - Gère les sections rétractables de la sidebar
+ * Permet de replier/déplier les favoris et le répertoire de notes
+ */
+class SidebarSections {
+    constructor() {
+        this.sections = {
+            favorites: { key: 'sidebar-favorites-expanded', defaultState: true },
+            notes: { key: 'sidebar-notes-expanded', defaultState: true }
+        };
+        this.init();
+    }
+
+    init() {
+        console.log('SidebarSections: Initialisation...');
+
+        // Restaurer l'état sauvegardé au démarrage
+        this.restoreStates();
+
+        // Écouter les événements HTMX pour réattacher les handlers après les swaps
+        document.body.addEventListener('htmx:afterSwap', (event) => {
+            const targetId = event.detail?.target?.id;
+
+            if (targetId === 'favorites-list') {
+                console.log('Favoris rechargés, restauration de l\'état...');
+                setTimeout(() => this.restoreSectionState('favorites'), 50);
+            }
+
+            if (targetId === 'file-tree') {
+                console.log('File-tree rechargé, restauration de l\'état...');
+                setTimeout(() => this.restoreSectionState('notes'), 50);
+            }
+        });
+
+        document.body.addEventListener('htmx:oobAfterSwap', (event) => {
+            const targetId = event.detail?.target?.id;
+
+            // Ne restaurer l'état que pour les swaps du file-tree complet
+            // Les swaps de statut (auto-save-status) ne doivent pas déclencher la restauration
+            if (targetId === 'file-tree') {
+                console.log('File-tree rechargé (oob), restauration de l\'état...');
+                setTimeout(() => this.restoreSectionState('notes'), 50);
+            }
+        });
+
+        // Écouter les restaurations d'historique (bouton retour du navigateur)
+        document.body.addEventListener('htmx:historyRestore', () => {
+            console.log('SidebarSections: History restored, restoring section states...');
+            // Restaurer les états des sections après restauration de l'historique
+            setTimeout(() => {
+                this.restoreSectionState('favorites');
+                this.restoreSectionState('notes');
+            }, 100);
+        });
+
+        console.log('SidebarSections: Initialisé');
+    }
+
+    /**
+     * Récupère l'état sauvegardé d'une section
+     */
+    getSectionState(sectionName) {
+        const section = this.sections[sectionName];
+        if (!section) return true;
+
+        const saved = localStorage.getItem(section.key);
+        return saved !== null ? saved === 'true' : section.defaultState;
+    }
+
+    /**
+     * Sauvegarde l'état d'une section
+     */
+    setSectionState(sectionName, isExpanded) {
+        const section = this.sections[sectionName];
+        if (!section) return;
+
+        localStorage.setItem(section.key, isExpanded.toString());
+        console.log(`État sauvegardé: ${sectionName} = ${isExpanded}`);
+    }
+
+    /**
+     * Toggle une section (ouvert/fermé)
+     */
+    toggleSection(sectionName, headerElement) {
+        if (!headerElement) {
+            console.error(`Header element not found for section: ${sectionName}`);
+            return;
+        }
+
+        const contentElement = headerElement.nextElementSibling;
+        const toggleIcon = headerElement.querySelector('.section-toggle');
+
+        if (!contentElement) {
+            console.error(`Content element not found for section: ${sectionName}`);
+            return;
+        }
+
+        const isCurrentlyExpanded = contentElement.style.display !== 'none';
+        const newState = !isCurrentlyExpanded;
+
+        if (newState) {
+            // Ouvrir
+            contentElement.style.display = 'block';
+            if (toggleIcon) {
+                toggleIcon.classList.add('expanded');
+            }
+        } else {
+            // Fermer
+            contentElement.style.display = 'none';
+            if (toggleIcon) {
+                toggleIcon.classList.remove('expanded');
+            }
+        }
+
+        this.setSectionState(sectionName, newState);
+        console.log(`Section ${sectionName} ${newState ? 'ouverte' : 'fermée'}`);
+    }
+
+    /**
+     * Restaure l'état d'une section depuis localStorage
+     */
+    restoreSectionState(sectionName) {
+        const isExpanded = this.getSectionState(sectionName);
+        const header = document.querySelector(`[data-section="${sectionName}"]`);
+
+        if (!header) {
+            console.warn(`Header not found for section: ${sectionName}`);
+            return;
+        }
+
+        const content = header.nextElementSibling;
+        const toggleIcon = header.querySelector('.section-toggle');
+
+        if (!content) {
+            console.warn(`Content not found for section: ${sectionName}`);
+            return;
+        }
+
+        if (isExpanded) {
+            content.style.display = 'block';
+            if (toggleIcon) {
+                toggleIcon.classList.add('expanded');
+            }
+        } else {
+            content.style.display = 'none';
+            if (toggleIcon) {
+                toggleIcon.classList.remove('expanded');
+            }
+        }
+
+        console.log(`État restauré: ${sectionName} = ${isExpanded ? 'ouvert' : 'fermé'}`);
+    }
+
+    /**
+     * Restaure tous les états au démarrage
+     */
+    restoreStates() {
+        // Attendre que le DOM soit complètement chargé et que HTMX ait fini de charger les contenus
+        // Délai augmenté pour correspondre aux délais des triggers HTMX (250ms + marge)
+        setTimeout(() => {
+            this.restoreSectionState('favorites');
+            this.restoreSectionState('notes');
+        }, 400);
+    }
+}
+
+/**
+ * Fonction globale pour toggle une section (appelée depuis le HTML)
+ */
+window.toggleSidebarSection = function(sectionName, event) {
+    if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    const headerElement = event?.currentTarget || document.querySelector(`[data-section="${sectionName}"]`);
+
+    if (window.sidebarSections && headerElement) {
+        window.sidebarSections.toggleSection(sectionName, headerElement);
+    }
+};
+
+/**
+ * Initialisation automatique
+ */
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        window.sidebarSections = new SidebarSections();
+    });
+} else {
+    // DOM déjà chargé
+    window.sidebarSections = new SidebarSections();
+}