Update api/static/js/main.js

api/static/js/main.js

@@ -1,393 +1,517 @@
+// ==================================================================
 // Main application JavaScript for the frontend
+// Handles theme switching, sidebar navigation, and content display.
+// ==================================================================
 
-// Wait for the DOM to be loaded before executing
+// Wait for the DOM to be fully loaded before executing scripts
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize theme
+
+    // 1. Initialize Theme (Dark/Light Mode)
     initTheme();
-    
-    // Setup interactive elements
-    setupSubjectSelection();
-    setupCategorySelection();
-    setupTextSelection();
     setupThemeToggle();
-    
-    // Setup feedback form submission
-    const feedbackForm = document.getElementById('feedback-form');
-    if (feedbackForm) {
-        feedbackForm.addEventListener('submit', function(e) {
-            const feedbackMessage = document.getElementById('feedback-message');
-            if (!feedbackMessage.value.trim()) {
-                e.preventDefault();
-                alert('Veuillez entrer un message avant d\'envoyer votre feedback.');
-            }
-        });
-    }
+
+    // 2. Setup Sidebar Navigation System
+    setupSidebarNavigation();
+
+    // 3. Setup Feedback Form Validation (Basic)
+    setupFeedbackForm();
+
+    // NOTE: Old setup functions for direct page selection are removed/commented out
+    // setupSubjectSelection(); // Replaced by sidebar logic
+    // setupCategorySelection(); // Replaced by sidebar logic
+    // setupTextSelection(); // Replaced by sidebar logic
 });
 
-// Initialize theme based on user preference
+
+// ==================================================================
+// THEME SWITCHING FUNCTIONS
+// ==================================================================
+
+/**
+ * Initializes the theme (dark/light) based on localStorage preference or system default.
+ */
 function initTheme() {
+    // Default to 'light' if no preference is found
     const userPreference = localStorage.getItem('theme') || 'light';
     document.documentElement.setAttribute('data-theme', userPreference);
-    
-    // Update theme icon
-    updateThemeIcon(userPreference);
+    updateThemeIcon(userPreference); // Set the correct icon on load
 }
 
-// Setup theme toggle functionality
+/**
+ * Sets up the event listener for the theme toggle button.
+ */
 function setupThemeToggle() {
     const themeToggle = document.getElementById('theme-toggle');
-    if (!themeToggle) return;
-    
+    if (!themeToggle) {
+        console.warn("Theme toggle button (#theme-toggle) not found.");
+        return;
+    }
+
     themeToggle.addEventListener('click', function() {
         const currentTheme = document.documentElement.getAttribute('data-theme');
         const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-        
-        // Update theme attribute
+
+        // Apply the new theme
         document.documentElement.setAttribute('data-theme', newTheme);
-        
+
         // Save preference to localStorage
         localStorage.setItem('theme', newTheme);
-        
-        // Update icon
+
+        // Update the button icon
         updateThemeIcon(newTheme);
-        
-        // Send theme preference to server
-        saveThemePreference(newTheme);
+
+        // Optional: Send theme preference to the server (if needed)
+        // saveThemePreference(newTheme);
     });
 }
 
-// Update the theme toggle icon based on current theme
+/**
+ * Updates the icon (sun/moon) inside the theme toggle button.
+ * @param {string} theme - The current theme ('light' or 'dark').
+ */
 function updateThemeIcon(theme) {
     const themeToggle = document.getElementById('theme-toggle');
-    if (!themeToggle) return;
-    
-    // Update icon based on theme
+    if (!themeToggle) return; // Exit if button not found
+
     if (theme === 'dark') {
-        themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+        themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; // Show sun icon
         themeToggle.setAttribute('title', 'Activer le mode clair');
     } else {
-        themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+        themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; // Show moon icon
         themeToggle.setAttribute('title', 'Activer le mode sombre');
     }
 }
 
-// Save theme preference to server
+/**
+ * Optional: Sends the chosen theme preference to the server.
+ * Uncomment the call in setupThemeToggle if needed.
+ * @param {string} theme - The theme to save ('light' or 'dark').
+ */
 function saveThemePreference(theme) {
     const formData = new FormData();
     formData.append('theme', theme);
-    
-    fetch('/set_theme', {
+
+    fetch('/set_theme', { // Ensure this endpoint exists in your Flask app
         method: 'POST',
         body: formData
     })
-    .then(response => response.json())
+    .then(response => {
+        if (!response.ok) {
+            console.error(`Error saving theme: ${response.statusText}`);
+            return response.json().catch(() => ({})); // Try to parse error body
+        }
+        return response.json();
+    })
     .then(data => {
-        console.log('Theme preference saved:', data);
+        console.log('Theme preference saved on server:', data);
     })
     .catch(error => {
-        console.error('Error saving theme preference:', error);
+        console.error('Error sending theme preference to server:', error);
     });
 }
 
-// Setup subject selection functionality
-function setupSubjectSelection() {
-    const subjectCards = document.querySelectorAll('.subject-card');
-    const subjectSelect = document.getElementById('matiere-select');
-    
-    // Handle subject card clicks
-    subjectCards.forEach(card => {
-        card.addEventListener('click', function() {
-            const matiereId = this.getAttribute('data-matiere-id');
-            
-            // Update select element if it exists
-            if (subjectSelect) {
-                subjectSelect.value = matiereId;
-                // Trigger change event to load subcategories
-                const event = new Event('change');
-                subjectSelect.dispatchEvent(event);
-            } else {
-                loadSubCategories(matiereId);
-            }
-            
-            // Highlight the selected card
-            subjectCards.forEach(c => c.classList.remove('active'));
-            this.classList.add('active');
-            
-            // Show the categories section
-            const categoriesSection = document.getElementById('sous-categories-section');
-            if (categoriesSection) {
-                categoriesSection.classList.remove('d-none');
-                categoriesSection.scrollIntoView({ behavior: 'smooth' });
-            }
+
+// ==================================================================
+// SIDEBAR NAVIGATION FUNCTIONS
+// ==================================================================
+
+/**
+ * Sets up all event listeners and logic for the sidebar navigation.
+ */
+function setupSidebarNavigation() {
+    // Get references to all necessary DOM elements
+    const burgerMenu = document.getElementById('burger-menu');
+    const sidebarMatieres = document.getElementById('sidebar-matieres');
+    const sidebarSousCategories = document.getElementById('sidebar-sous-categories');
+    const sidebarOverlay = document.getElementById('sidebar-overlay');
+    const matieresList = document.getElementById('matieres-list-sidebar');
+    const sousCategoriesList = document.getElementById('sous-categories-list-sidebar');
+    const backButton = document.getElementById('sidebar-back-button');
+    const closeButtons = document.querySelectorAll('.close-sidebar-btn');
+    const initialInstructions = document.getElementById('initial-instructions');
+    const contentSection = document.getElementById('content-section');
+
+    // --- Helper Function to Close All Sidebars ---
+    const closeAllSidebars = () => {
+        if (sidebarMatieres) sidebarMatieres.classList.remove('active');
+        if (sidebarSousCategories) sidebarSousCategories.classList.remove('active');
+        if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+        // Optional: Reset scroll position of lists when closing
+        // if (matieresList) matieresList.scrollTop = 0;
+        // if (sousCategoriesList) sousCategoriesList.scrollTop = 0;
+    };
+
+    // --- Event Listeners ---
+
+    // 1. Open Sidebar 1 (Matières) with Burger Menu
+    if (burgerMenu && sidebarMatieres && sidebarOverlay) {
+        burgerMenu.addEventListener('click', (e) => {
+            e.stopPropagation(); // Prevent immediate closing if overlay listener fires
+            closeAllSidebars(); // Ensure only one sidebar is open initially
+            sidebarMatieres.classList.add('active');
+            sidebarOverlay.classList.add('active');
         });
+    } else {
+        console.warn("Burger menu, matières sidebar, or overlay not found.");
+    }
+
+    // 2. Close sidebars via Overlay click
+    if (sidebarOverlay) {
+        sidebarOverlay.addEventListener('click', closeAllSidebars);
+    }
+
+    // 3. Close sidebars via dedicated Close buttons (X)
+    closeButtons.forEach(button => {
+        button.addEventListener('click', closeAllSidebars);
     });
-    
-    // Handle subject select change
-    if (subjectSelect) {
-        subjectSelect.addEventListener('change', function() {
-            const matiereId = this.value;
-            if (matiereId) {
-                loadSubCategories(matiereId);
-                
-                // Show the categories section
-                const categoriesSection = document.getElementById('sous-categories-section');
-                if (categoriesSection) {
-                    categoriesSection.classList.remove('d-none');
+
+    // 4. Handle click on a Matière in Sidebar 1
+    if (matieresList && sidebarSousCategories && sidebarMatieres) {
+        matieresList.addEventListener('click', (e) => {
+            // Use closest to handle clicks even if icon is clicked
+            const listItem = e.target.closest('li');
+            if (listItem) {
+                const matiereId = listItem.getAttribute('data-matiere-id');
+                const matiereNom = listItem.getAttribute('data-matiere-nom') || 'Inconnu'; // Fallback name
+
+                if (matiereId) {
+                    // Update Sidebar 2 title
+                    const titleElement = document.getElementById('sidebar-sous-categories-title');
+                    if (titleElement) {
+                        titleElement.textContent = `Sous-catégories (${matiereNom})`;
+                    }
+                    // Load sous-categories into Sidebar 2's list
+                    loadSubCategoriesForSidebar(matiereId, sousCategoriesList);
+
+                    // Switch Sidebars: Hide 1, Show 2
+                    sidebarMatieres.classList.remove('active'); // Slide out sidebar 1
+                    sidebarSousCategories.classList.add('active'); // Slide in sidebar 2
+                    // Keep overlay active
+                    if (sidebarOverlay) sidebarOverlay.classList.add('active');
                 }
             }
         });
+    } else {
+        console.warn("Matières list, sous-catégories sidebar, or matières sidebar not found.");
+    }
+
+    // 5. Handle click on Back Button in Sidebar 2
+    if (backButton && sidebarMatieres && sidebarSousCategories) {
+        backButton.addEventListener('click', () => {
+            sidebarSousCategories.classList.remove('active'); // Slide out sidebar 2
+            sidebarMatieres.classList.add('active'); // Slide in sidebar 1
+            // Keep overlay active
+            if (sidebarOverlay) sidebarOverlay.classList.add('active');
+        });
+    } else {
+        console.warn("Sidebar back button, matières sidebar, or sous-catégories sidebar not found.");
+    }
+
+    // 6. Handle click on a Sous-catégorie in Sidebar 2
+    if (sousCategoriesList && initialInstructions && contentSection) {
+        sousCategoriesList.addEventListener('click', (e) => {
+            const listItem = e.target.closest('li');
+            if (listItem && listItem.getAttribute('data-category-id')) { // Ensure it's a valid category item
+                const categoryId = listItem.getAttribute('data-category-id');
+
+                // Load and display the content for the first text in this category
+                loadAndDisplayFirstTexte(categoryId);
+
+                // Hide initial instructions, show content section
+                if (initialInstructions) initialInstructions.classList.add('d-none');
+                if (contentSection) contentSection.classList.remove('d-none');
+
+                // Close both sidebars and overlay after selection
+                closeAllSidebars();
+            }
+        });
+    } else {
+        console.warn("Sous-catégories list, initial instructions, or content section not found.");
     }
 }
 
-// Load subcategories for the selected subject
-function loadSubCategories(matiereId) {
-    fetch(`/get_sous_categories/${matiereId}`)
-        .then(response => response.json())
+/**
+ * Fetches and loads subcategories for a given matiereId into the specified list element.
+ * @param {string} matiereId - The ID of the selected matière.
+ * @param {HTMLElement} listElement - The UL element to populate.
+ */
+function loadSubCategoriesForSidebar(matiereId, listElement) {
+    if (!listElement) {
+        console.error("Target list element for subcategories is missing.");
+        return;
+    }
+    listElement.innerHTML = '<li>Chargement...</li>'; // Show loading state
+
+    fetch(`/get_sous_categories/${matiereId}`) // Ensure this endpoint exists in Flask
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
+            }
+            return response.json();
+        })
         .then(data => {
-            // Update subcategories list
-            const sousCategoriesList = document.getElementById('sous-categories-list');
-            if (sousCategoriesList) {
-                sousCategoriesList.innerHTML = '';
-                
+            listElement.innerHTML = ''; // Clear loading/previous items
+            if (data && data.length > 0) {
                 data.forEach(category => {
                     const item = document.createElement('li');
-                    item.className = 'selection-item';
                     item.setAttribute('data-category-id', category.id);
-                    item.textContent = category.nom;
-                    
-                    // Add click event
-                    item.addEventListener('click', function() {
-                        const categoryId = this.getAttribute('data-category-id');
-                        loadTextes(categoryId);
-                        
-                        // Highlight the selected category
-                        const items = sousCategoriesList.querySelectorAll('.selection-item');
-                        items.forEach(i => i.classList.remove('active'));
-                        this.classList.add('active');
-                        
-                        // Show the texts section
-                        const textesSection = document.getElementById('textes-section');
-                        if (textesSection) {
-                            textesSection.classList.remove('d-none');
-                        }
-                    });
-                    
-                    sousCategoriesList.appendChild(item);
+                    item.textContent = category.nom; // Use category name
+
+                    // Add chevron icon for visual cue
+                    const icon = document.createElement('i');
+                    icon.className = 'fas fa-chevron-right float-end';
+                    item.appendChild(icon);
+
+                    listElement.appendChild(item);
                 });
-                
-                // Show the subcategories section if it's hidden
-                const sousCategoriesSection = document.getElementById('sous-categories-section');
-                if (sousCategoriesSection) {
-                    sousCategoriesSection.classList.remove('d-none');
-                }
+            } else {
+                listElement.innerHTML = '<li>Aucune sous-catégorie trouvée.</li>';
             }
         })
         .catch(error => {
-            console.error('Error loading subcategories:', error);
+            console.error('Erreur lors du chargement des sous-catégories:', error);
+            listElement.innerHTML = `<li>Erreur: ${error.message}</li>`;
         });
 }
 
-// Setup category selection functionality
-function setupCategorySelection() {
-    const categorySelect = document.getElementById('sous-categorie-select');
-    
-    if (categorySelect) {
-        categorySelect.addEventListener('change', function() {
-            const categoryId = this.value;
-            if (categoryId) {
-                loadTextes(categoryId);
-                
-                // Show the texts section
-                const textesSection = document.getElementById('textes-section');
-                if (textesSection) {
-                    textesSection.classList.remove('d-none');
-                }
+/**
+ * Fetches the list of texts for a category and displays the first one found.
+ * @param {string} categoryId - The ID of the selected sous-catégorie.
+ */
+function loadAndDisplayFirstTexte(categoryId) {
+    fetch(`/get_textes/${categoryId}`) // Ensure this endpoint exists and returns a list of texts [{id, titre}, ...]
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
             }
-        });
-    }
-}
-
-// Load texts for the selected category
-function loadTextes(categoryId) {
-    fetch(`/get_textes/${categoryId}`)
-        .then(response => response.json())
+            return response.json();
+        })
         .then(data => {
-            // Update texts list
-            const textesList = document.getElementById('textes-list');
-            if (textesList) {
-                textesList.innerHTML = '';
-                
-                data.forEach(texte => {
-                    const item = document.createElement('li');
-                    item.className = 'selection-item';
-                    item.setAttribute('data-texte-id', texte.id);
-                    item.textContent = texte.titre;
-                    
-                    // Add click event
-                    item.addEventListener('click', function() {
-                        const texteId = this.getAttribute('data-texte-id');
-                        displayTexte(texteId);
-                        
-                        // Highlight the selected text
-                        const items = textesList.querySelectorAll('.selection-item');
-                        items.forEach(i => i.classList.remove('active'));
-                        this.classList.add('active');
-                    });
-                    
-                    textesList.appendChild(item);
-                });
-                
-                // Show the texts section
-                const textesSection = document.getElementById('textes-section');
-                if (textesSection) {
-                    textesSection.classList.remove('d-none');
+            if (data && data.length > 0) {
+                const firstTexteId = data[0].id; // Get the ID of the very first text
+                if (firstTexteId) {
+                    displayTexte(firstTexteId); // Call displayTexte with this ID
+                } else {
+                     throw new Error("Le premier texte reçu n'a pas d'ID.");
                 }
-                
-                // Hide the content section since no text is selected yet
+            } else {
+                // Handle case where a category has no texts associated with it
+                const contentTitle = document.getElementById('content-title');
+                const contentBlocks = document.getElementById('content-blocks');
                 const contentSection = document.getElementById('content-section');
-                if (contentSection) {
-                    contentSection.classList.add('d-none');
-                }
+                if (contentTitle) contentTitle.textContent = "Contenu non disponible";
+                if (contentBlocks) contentBlocks.innerHTML = '<div class="alert alert-info">Aucun texte trouvé pour cette sous-catégorie.</div>';
+                if (contentSection) contentSection.classList.remove('d-none'); // Ensure section is visible
             }
         })
         .catch(error => {
-            console.error('Error loading texts:', error);
+            console.error('Erreur lors du chargement des textes pour la catégorie:', error);
+            // Display error message in the content area
+            const contentTitle = document.getElementById('content-title');
+            const contentBlocks = document.getElementById('content-blocks');
+            const contentSection = document.getElementById('content-section');
+            if (contentTitle) contentTitle.textContent = "Erreur";
+            if (contentBlocks) contentBlocks.innerHTML = `<div class="alert alert-danger">Impossible de charger le contenu. ${error.message}</div>`;
+            if (contentSection) contentSection.classList.remove('d-none'); // Ensure section is visible
         });
 }
 
-// Setup text selection functionality
-function setupTextSelection() {
-    const texteSelect = document.getElementById('texte-select');
-    
-    if (texteSelect) {
-        texteSelect.addEventListener('change', function() {
-            const texteId = this.value;
-            if (texteId) {
-                displayTexte(texteId);
-            }
-        });
-    }
-}
 
-// Display the selected texte with content blocks
+// ==================================================================
+// CONTENT DISPLAY FUNCTION
+// ==================================================================
+
+/**
+ * Fetches and displays the content (title and blocks) for a specific texteId.
+ * @param {string} texteId - The ID of the text to display.
+ */
 function displayTexte(texteId) {
-    fetch(`/get_texte/${texteId}`)
-        .then(response => response.json())
+    const contentSection = document.getElementById('content-section');
+    const contentTitle = document.getElementById('content-title');
+    const contentBlocks = document.getElementById('content-blocks');
+
+    // Check if essential elements exist
+    if (!contentSection || !contentTitle || !contentBlocks) {
+        console.error("Éléments d'affichage du contenu (#content-section, #content-title, #content-blocks) introuvables.");
+        alert("Erreur interne: Impossible d'afficher le contenu.");
+        return;
+    }
+
+    // Indicate loading state visually
+    contentTitle.textContent = "Chargement du contenu...";
+    contentBlocks.innerHTML = '<div class="text-center p-3"><i class="fas fa-spinner fa-spin fa-2x"></i></div>'; // Simple spinner
+
+    fetch(`/get_texte/${texteId}`) // Ensure this endpoint exists and returns detailed text object {titre, contenu, blocks, color_code, ...}
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
+            }
+            return response.json();
+        })
         .then(data => {
-            const contentSection = document.getElementById('content-section');
-            const contentTitle = document.getElementById('content-title');
-            const contentBlocks = document.getElementById('content-blocks');
-            
-            if (contentSection && contentTitle && contentBlocks) {
-                // Update content title
-                contentTitle.textContent = data.titre;
-                
-                // Update content theme color based on matiere color
-                if (data.color_code) {
-                    // Apply color to title underline
-                    contentTitle.style.borderBottomColor = data.color_code;
-                    
-                    // Apply color to all block titles
-                    const style = document.createElement('style');
-                    style.id = 'dynamic-block-styles';
-                    const existingStyle = document.getElementById('dynamic-block-styles');
-                    if (existingStyle) {
-                        existingStyle.remove();
-                    }
-                    
-                    style.textContent = `
-                        .content-block-title {
-                            border-bottom-color: ${data.color_code} !important;
-                        }
-                        .content-block {
-                            border-left: 4px solid ${data.color_code} !important;
+            // --- Update Content Title ---
+            contentTitle.textContent = data.titre || "Titre non disponible";
+
+            // --- Update Theme/Color Styling ---
+            const dynamicStyleId = 'dynamic-block-styles';
+            let style = document.getElementById(dynamicStyleId);
+            if (!style) { // Create style tag if it doesn't exist
+                style = document.createElement('style');
+                style.id = dynamicStyleId;
+                document.head.appendChild(style);
+            }
+
+            if (data.color_code) {
+                // Apply color to title underline and block border/title
+                contentTitle.style.borderBottomColor = data.color_code;
+                style.textContent = `
+                    #content-section .content-block-title { border-bottom-color: ${data.color_code} !important; }
+                    #content-section .content-block { border-left: 4px solid ${data.color_code} !important; }
+                `;
+            } else {
+                // Reset styles if no color code is provided (use CSS defaults)
+                contentTitle.style.borderBottomColor = ''; // Reset specific style
+                style.textContent = ''; // Clear dynamic rules
+            }
+
+            // --- Render Content Blocks ---
+            contentBlocks.innerHTML = ''; // Clear loading indicator/previous content
+
+            if (data.blocks && Array.isArray(data.blocks) && data.blocks.length > 0) {
+                // Sort blocks by 'order' property if it exists, otherwise render as received
+                const sortedBlocks = data.blocks.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+
+                sortedBlocks.forEach(block => {
+                    const blockDiv = document.createElement('div');
+                    blockDiv.className = 'content-block fade-in'; // Add animation class
+
+                    // Block with Image
+                    if (block.image && block.image.src) {
+                        blockDiv.classList.add('block-with-image', `image-${block.image_position || 'left'}`);
+
+                        // Image Container
+                        const imageDiv = document.createElement('div');
+                        imageDiv.className = 'block-image-container';
+                        const imageEl = document.createElement('img');
+                        imageEl.className = 'block-image';
+                        imageEl.src = block.image.src; // Ensure backend provides full URL if needed
+                        imageEl.alt = block.image.alt || 'Illustration';
+                        imageEl.loading = 'lazy'; // Add lazy loading for images
+                        imageDiv.appendChild(imageEl);
+                        blockDiv.appendChild(imageDiv);
+
+                        // Content Container (Text part)
+                        const contentDiv = document.createElement('div');
+                        contentDiv.className = 'block-content-container';
+                        if (block.title) {
+                            const titleEl = document.createElement('h3');
+                            titleEl.className = 'content-block-title';
+                            titleEl.textContent = block.title;
+                            contentDiv.appendChild(titleEl);
                         }
-                    `;
-                    document.head.appendChild(style);
-                }
-                
-                // Clear existing content
-                contentBlocks.innerHTML = '';
-                
-                // Create content blocks
-                if (data.blocks && data.blocks.length > 0) {
-                    data.blocks.forEach(block => {
-                        // Create block container
-                        const blockDiv = document.createElement('div');
-                        blockDiv.className = 'content-block fade-in';
-                        
-                        // Check if block has an image
-                        if (block.image) {
-                            blockDiv.classList.add('block-with-image');
-                            blockDiv.classList.add(`image-${block.image_position || 'left'}`);
-                            
-                            // Create image container
-                            const imageDiv = document.createElement('div');
-                            imageDiv.className = 'block-image-container';
-                            
-                            // Create image element
-                            const imageEl = document.createElement('img');
-                            imageEl.className = 'block-image';
-                            imageEl.src = block.image.src;
-                            imageEl.alt = block.image.alt || 'Illustration';
-                            
-                            imageDiv.appendChild(imageEl);
-                            blockDiv.appendChild(imageDiv);
-                            
-                            // Create content container
-                            const contentDiv = document.createElement('div');
-                            contentDiv.className = 'block-content-container';
-                            
-                            // Add block title if present
-                            if (block.title) {
-                                const titleEl = document.createElement('h3');
-                                titleEl.className = 'content-block-title';
-                                titleEl.textContent = block.title;
-                                contentDiv.appendChild(titleEl);
-                            }
-                            
-                            // Add block content
-                            const contentEl = document.createElement('div');
-                            contentEl.className = 'content-block-content';
-                            contentEl.innerHTML = block.content.replace(/\n/g, '<br>');
-                            contentDiv.appendChild(contentEl);
-                            
-                            blockDiv.appendChild(contentDiv);
-                        } else {
-                            // No image - simple block
-                            
-                            // Add block title if present
-                            if (block.title) {
-                                const titleEl = document.createElement('h3');
-                                titleEl.className = 'content-block-title';
-                                titleEl.textContent = block.title;
-                                blockDiv.appendChild(titleEl);
-                            }
-                            
-                            // Add block content
-                            const contentEl = document.createElement('div');
-                            contentEl.className = 'content-block-content';
-                            contentEl.innerHTML = block.content.replace(/\n/g, '<br>');
-                            blockDiv.appendChild(contentEl);
+                        const contentEl = document.createElement('div');
+                        contentEl.className = 'content-block-content';
+                        // IMPORTANT: Sanitize HTML content if it comes from user input or untrusted sources
+                        // For now, assuming safe HTML from backend:
+                        contentEl.innerHTML = block.content ? block.content.replace(/\n/g, '<br>') : '';
+                        contentDiv.appendChild(contentEl);
+                        blockDiv.appendChild(contentDiv);
+
+                    } else { // Block without Image
+                        if (block.title) {
+                            const titleEl = document.createElement('h3');
+                            titleEl.className = 'content-block-title';
+                            titleEl.textContent = block.title;
+                            blockDiv.appendChild(titleEl);
                         }
-                        
-                        // Add the block to the content area
-                        contentBlocks.appendChild(blockDiv);
-                    });
-                } else {
-                    // Fallback to regular content if no blocks
-                    const blockDiv = document.createElement('div');
-                    blockDiv.className = 'content-block';
-                    blockDiv.innerHTML = data.contenu.replace(/\n/g, '<br>');
+                        const contentEl = document.createElement('div');
+                        contentEl.className = 'content-block-content';
+                         // IMPORTANT: Sanitize HTML content
+                        contentEl.innerHTML = block.content ? block.content.replace(/\n/g, '<br>') : '';
+                        blockDiv.appendChild(contentEl);
+                    }
                     contentBlocks.appendChild(blockDiv);
-                }
-                
-                // Show the content section
-                contentSection.classList.remove('d-none');
-                contentSection.scrollIntoView({ behavior: 'smooth' });
+                });
+            } else if (data.contenu) { // Fallback: Use simple 'contenu' field if no blocks
+                const blockDiv = document.createElement('div');
+                blockDiv.className = 'content-block';
+                 // IMPORTANT: Sanitize HTML content
+                blockDiv.innerHTML = data.contenu.replace(/\n/g, '<br>');
+                contentBlocks.appendChild(blockDiv);
+            } else {
+                // No blocks and no simple content
+                contentBlocks.innerHTML = '<div class="alert alert-warning">Le contenu de ce texte est vide ou non structuré.</div>';
             }
+
+            // --- Final Steps ---
+            // Ensure the content section is visible
+            contentSection.classList.remove('d-none');
+
+            // Scroll to the top of the content title for better UX
+            contentTitle.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
         })
         .catch(error => {
-            console.error('Error loading texte:', error);
+            console.error(`Erreur lors du chargement du texte ID ${texteId}:`, error);
+             // Display error message in the content area
+            contentTitle.textContent = "Erreur de chargement";
+            contentBlocks.innerHTML = `<div class="alert alert-danger">Impossible de charger le contenu demandé. ${error.message}</div>`;
+            // Ensure section is visible even on error
+            contentSection.classList.remove('d-none');
+        });
+}
+
+
+// ==================================================================
+// FEEDBACK FORM SETUP
+// ==================================================================
+
+/**
+ * Sets up basic validation for the feedback form.
+ */
+function setupFeedbackForm() {
+    const feedbackForm = document.getElementById('feedback-form');
+    if (feedbackForm) {
+        feedbackForm.addEventListener('submit', function(e) {
+            const feedbackMessage = document.getElementById('feedback-message');
+            // Simple check if message textarea is empty or only whitespace
+            if (!feedbackMessage || !feedbackMessage.value.trim()) {
+                e.preventDefault(); // Stop form submission
+                alert('Veuillez entrer un message avant d\'envoyer votre avis.');
+                if (feedbackMessage) feedbackMessage.focus(); // Focus the textarea
+            }
+            // Add more complex validation here if needed
         });
+    }
 }
+
+
+// ==================================================================
+// OLD FUNCTIONS (Removed/Commented Out) - Kept for reference only
+// ==================================================================
+
+/*
+function setupSubjectSelection() { // No longer used directly on page
+    // ... old logic targeting .subject-card elements on the main page ...
+}
+
+function loadSubCategories(matiereId) { // Replaced by loadSubCategoriesForSidebar
+    // ... old logic targeting #sous-categories-list on the main page ...
+}
+
+function setupCategorySelection() { // No longer used directly on page
+    // ... old logic targeting #sous-categorie-select or similar ...
+}
+
+function loadTextes(categoryId) { // Logic integrated into loadAndDisplayFirstTexte
+    // ... old logic targeting #textes-list on the main page ...
+}
+
+function setupTextSelection() { // No longer used directly on page
+    // ... old logic targeting #texte-select or similar ...
+}
+*/
+
+// ==================================================================
+// END OF FILE
+// ==================================================================