Update v1.2.0-beta - Dynamic context menu & permissions

✨ New Features:
- Dynamic permission-based context menus for files and folders
- Support for collaborative folder access control
- Upload to specific folders including shared folders
- Changelog modal for version updates
- Improved dark mode synchronization

🐛 Bug Fixes:
- Fixed context menu displaying incorrect options
- Fixed CSS !important override preventing dynamic menu behavior
- Fixed folder collaboration permission checks
- Fixed breadcrumb navigation with empty segments
- Fixed "Premature close" error loop in attachments
- Fixed missing user variable in admin routes
- Fixed avatar loading COEP policy issues

🔒 Security:
- Added security middleware (CSRF, rate limiting, input validation)
- Fixed collaboration folder access validation
- Improved shared folder permission handling

🎨 UI/UX Improvements:
- Removed Actions column from folder view
- Context menu now properly hides/shows based on permissions
- Better visual feedback for collaborative folders
- Improved upload flow with inline modals

🧹 Code Quality:
- Added collaboration data to folder routes
- Refactored context menu logic for better maintainability
- Added debug logging for troubleshooting
- Improved file upload handling with chunking support

public/js/dashboard.js

@@ -61,52 +61,141 @@ function initializeContextMenu() {
 
         adjustMenuOptions(selectedItem);
         showContextMenu(e.pageX, e.pageY);
-    });
-
-    // Fermer le menu au clic extérieur
+    });    // Fermer le menu au clic extérieur
     document.addEventListener('click', function(e) {
+        const contextMenu = document.getElementById('contextMenu');
         if (!contextMenu?.contains(e.target)) {
             hideContextMenu();
         }
-    });
-
-    // Actions du menu
-    document.querySelectorAll('.context-menu .menu-item').forEach(item => {
-        item.addEventListener('click', function(e) {
-            e.preventDefault();
-            const action = this.dataset.action;
-            if (selectedItem) {
-                handleMenuAction(action, selectedItem);
-            }
-            hideContextMenu();
-        });
-    });
-
-    function adjustMenuOptions(item) {
-        const menuItems = contextMenu.querySelectorAll('.menu-item');
+    });// Actions du menu contextuel
+    document.addEventListener('click', function(e) {
+        if (!e.target.closest('#contextMenu')) return;
         
-        menuItems.forEach(menuItem => {
-            const action = menuItem.dataset.action;
-            
-            switch(action) {
-                case 'open':
-                    menuItem.style.display = item.type.includes('folder') ? 'flex' : 'none';
-                    break;
-                case 'collaborate':
-                    menuItem.style.display = item.type === 'folder' ? 'flex' : 'none';
-                    const collabBtn = item.element.querySelector('.toggle-collaboration-btn');
-                    const isCollaborative = collabBtn?.dataset.isCollaborative === 'true';
-                    menuItem.querySelector('span').textContent = 
-                        isCollaborative ? 'Gérer la collaboration' : 'Activer la collaboration';
-                    break;
-                case 'copy-link':
-                    menuItem.style.display = item.type === 'file' ? 'flex' : 'none';
-                    break;
-            }
-        });
-    }
+        e.preventDefault();
+        const target = e.target.closest('button, a');
+        if (!target || !selectedItem) return;
 
-    function showContextMenu(x, y) {
+        let action = '';
+        if (target.classList.contains('context-item-open')) action = 'open';
+        else if (target.classList.contains('context-item-rename')) action = 'rename';
+        else if (target.classList.contains('context-item-collaborate')) action = 'collaborate';
+        else if (target.classList.contains('context-item-share')) action = 'copy-link';
+        else if (target.classList.contains('context-item-move')) action = 'move';
+        else if (target.classList.contains('context-item-leave')) action = 'leave';
+        else if (target.classList.contains('context-item-delete')) action = 'delete';
+
+        if (action) {
+            handleMenuAction(action, selectedItem);
+            hideContextMenu();
+        }
+    });    function adjustMenuOptions(item) {
+        const contextMenu = document.getElementById('contextMenu');
+        if (!contextMenu) return;
+
+        const isFile = item.type === 'file';
+        const isFolder = item.type === 'folder';
+        const isSharedFolder = item.type === 'shared-folder';
+
+        // DEBUG
+        console.log('🔍 Context Menu Debug:', {
+            itemType: item.type,
+            itemName: item.name,
+            isFile,
+            isFolder,
+            isSharedFolder
+        });
+
+        // Vérifier si l'utilisateur est propriétaire (pour dossiers partagés)
+        let isOwner = false;
+        if (isSharedFolder) {
+            const ownerCell = item.element.querySelector('td:nth-child(3) .text-muted');
+            isOwner = ownerCell && ownerCell.textContent.trim() === 'moi';
+            console.log('🔍 Shared Folder - isOwner:', isOwner);
+        }
+
+        // Récupérer tous les éléments du menu
+        const openBtn = contextMenu.querySelector('.context-item-open');
+        const renameBtn = contextMenu.querySelector('.context-item-rename');
+        const collaborateBtn = contextMenu.querySelector('.context-item-collaborate');
+        const shareBtn = contextMenu.querySelector('.context-item-share');
+        const moveBtn = contextMenu.querySelector('.context-item-move');
+        const leaveBtn = contextMenu.querySelector('.context-item-leave');
+        const separator = contextMenu.querySelector('.menu-separator');
+        const deleteBtn = contextMenu.querySelector('.context-item-delete');
+
+        // MASQUER TOUT PAR DÉFAUT
+        if (openBtn) openBtn.style.display = 'none';
+        if (renameBtn) renameBtn.style.display = 'none';
+        if (collaborateBtn) collaborateBtn.style.display = 'none';
+        if (shareBtn) shareBtn.style.display = 'none';
+        if (moveBtn) moveBtn.style.display = 'none';
+        if (leaveBtn) leaveBtn.style.display = 'none';
+        if (separator) separator.style.display = 'none';
+        if (deleteBtn) deleteBtn.style.display = 'none';
+
+        // AFFICHER SELON LE TYPE
+        if (isFile) {
+            // FICHIERS : Renommer, Copier le lien, Déplacer, Supprimer
+            console.log('✅ Affichage menu FICHIER');
+            if (renameBtn) renameBtn.style.display = 'flex';
+            if (shareBtn) shareBtn.style.display = 'flex';
+            if (moveBtn) moveBtn.style.display = 'flex';
+            if (separator) separator.style.display = 'block';
+            if (deleteBtn) deleteBtn.style.display = 'flex';
+        } else if (isFolder) {
+            // DOSSIERS PERSONNELS : Ouvrir, Renommer, Collaborer, Supprimer
+            console.log('✅ Affichage menu DOSSIER');
+            if (openBtn) openBtn.style.display = 'flex';
+            if (renameBtn) renameBtn.style.display = 'flex';
+            if (collaborateBtn) {
+                collaborateBtn.style.display = 'flex';
+                // Vérifier si déjà collaboratif
+                const collabBadge = item.element.querySelector('.collaboration-badge');
+                const isCollaborative = collabBadge !== null;
+                const span = collaborateBtn.querySelector('span');
+                if (span) {
+                    span.textContent = isCollaborative ? 'Gérer la collaboration' : 'Activer la collaboration';
+                }
+            }
+            if (separator) separator.style.display = 'block';
+            if (deleteBtn) deleteBtn.style.display = 'flex';
+        } else if (isSharedFolder) {
+            // DOSSIERS PARTAGÉS
+            console.log('✅ Affichage menu DOSSIER PARTAGÉ (owner:', isOwner, ')');
+            if (openBtn) openBtn.style.display = 'flex';
+
+            if (isOwner) {
+                // PROPRIÉTAIRE : Renommer, Collaborer, Supprimer
+                if (renameBtn) renameBtn.style.display = 'flex';
+                if (collaborateBtn) {
+                    collaborateBtn.style.display = 'flex';
+                    const collabBadge = item.element.querySelector('.collaboration-badge');
+                    const isCollaborative = collabBadge !== null;
+                    const span = collaborateBtn.querySelector('span');
+                    if (span) {
+                        span.textContent = isCollaborative ? 'Gérer la collaboration' : 'Activer la collaboration';
+                    }
+                }
+                if (separator) separator.style.display = 'block';
+                if (deleteBtn) deleteBtn.style.display = 'flex';
+            } else {
+                // INVITÉ : Quitter seulement
+                if (leaveBtn) leaveBtn.style.display = 'flex';
+            }
+        }
+
+        // DEBUG FINAL : afficher l'état de tous les boutons
+        console.log('📋 État final des boutons:', {
+            open: openBtn?.style.display,
+            rename: renameBtn?.style.display,
+            collaborate: collaborateBtn?.style.display,
+            share: shareBtn?.style.display,
+            move: moveBtn?.style.display,
+            leave: leaveBtn?.style.display,
+            delete: deleteBtn?.style.display
+        });
+    }    function showContextMenu(x, y) {
+        const contextMenu = document.getElementById('contextMenu');
         if (!contextMenu) return;
         
         contextMenu.style.display = 'block';
@@ -128,6 +217,7 @@ function initializeContextMenu() {
     }
 
     function hideContextMenu() {
+        const contextMenu = document.getElementById('contextMenu');
         if (contextMenu) {
             contextMenu.style.display = 'none';
         }
@@ -153,12 +243,15 @@ function initializeContextMenu() {
                 break;
 
             case 'collaborate':
-                const collabBtn = item.element.querySelector('.toggle-collaboration-btn');
-                const isCollaborative = collabBtn?.dataset.isCollaborative === 'true';
-                
+                // Détecter si le dossier est déjà collaboratif en cherchant le badge
+                const collabBadge = item.element.querySelector('.collaboration-badge');
+                const isCollaborative = collabBadge !== null;
+
                 if (isCollaborative) {
+                    // Si déjà collaboratif, afficher les détails
                     showCollaborationDetails(item.name, item.type);
                 } else {
+                    // Sinon, activer la collaboration
                     toggleCollaboration(item.name, item.type, true);
                 }
                 break;
@@ -178,6 +271,12 @@ function initializeContextMenu() {
                 }
                 break;
 
+            case 'leave':
+                if (item.type === 'shared-folder') {
+                    leaveSharedFolder(item.name, item.element);
+                }
+                break;
+
             case 'delete':
                 if (item.type === 'folder') {
                     confirmDeleteFolder(item.name);
@@ -196,18 +295,61 @@ function initializeDropdowns() {
         toggle.addEventListener('click', function(e) {
             e.preventDefault();
             e.stopPropagation();
-            
+
             // Fermer les autres dropdowns
             document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
                 if (menu !== this.nextElementSibling) {
                     menu.classList.remove('show');
                 }
             });
-            
+
             // Toggle le dropdown actuel
             const dropdown = this.nextElementSibling;
             if (dropdown && dropdown.classList.contains('dropdown-menu')) {
+                // Correction du positionnement pour éviter le débordement en bas
                 dropdown.classList.toggle('show');
+                if (dropdown.classList.contains('show')) {
+                    // Reset
+                    dropdown.style.top = '';
+                    dropdown.style.bottom = '';
+                    dropdown.style.transform = '';
+                    const rect = dropdown.getBoundingClientRect();
+                    const windowHeight = window.innerHeight;
+                    if (rect.bottom > windowHeight) {
+                        // Afficher au-dessus si déborde
+                        dropdown.style.top = 'auto';
+                        dropdown.style.bottom = '100%';
+                        dropdown.style.transform = 'translateY(-8px)';
+                    } else {
+                        dropdown.style.top = '';
+                        dropdown.style.bottom = '';
+                        dropdown.style.transform = '';
+                    }
+                }
+            }
+
+            // Gestion dynamique des options selon le type/propriétaire
+            const tr = this.closest('tr[data-type]');
+            if (tr && dropdown) {
+                const type = tr.getAttribute('data-type');
+                const owner = tr.querySelector('td:nth-child(3) .text-muted')?.textContent?.trim();
+                // Pour les dossiers partagés, vérifier si on est propriétaire
+                const isOwner = owner === 'moi';
+                dropdown.querySelectorAll('.dropdown-item').forEach(item => {
+                    const action = item.textContent.trim();
+                    // Déplacer : seulement pour les fichiers
+                    if (action.includes('Déplacer')) {
+                        item.style.display = (type === 'file') ? '' : 'none';
+                    }
+                    // Renommer/Supprimer : pas pour dossier partagé non propriétaire
+                    if ((action.includes('Renommer') || action.includes('Supprimer')) && type === 'shared-folder' && !isOwner) {
+                        item.style.display = 'none';
+                    }
+                    // Quitter : seulement pour dossier partagé non propriétaire
+                    if (action.includes('Quitter ce dossier')) {
+                        item.style.display = (type === 'shared-folder' && !isOwner) ? '' : 'none';
+                    }
+                });
             }
         });
     });
@@ -227,6 +369,41 @@ function initializeDropdowns() {
             e.stopPropagation();
         });
     });
+
+    // Action pour quitter un dossier partagé
+    document.querySelectorAll('.leave-shared-folder-btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            const folderName = this.getAttribute('data-folder-name');
+            const folderOwner = this.getAttribute('data-folder-owner');
+            Swal.fire({
+                title: 'Quitter ce dossier partagé ?',
+                text: 'Vous ne verrez plus ce dossier dans votre dashboard.',
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonText: 'Quitter',
+                cancelButtonText: 'Annuler'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    fetch(`/api/dpanel/sharedfolders/leave`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ folderName, folderOwner })
+                    })
+                    .then(res => res.json())
+                    .then(data => {
+                        if (data.success) {
+                            showToast('success', 'Dossier quitté');
+                            setTimeout(() => location.reload(), 800);
+                        } else {
+                            showToast('error', data.error || 'Erreur');
+                        }
+                    })
+                    .catch(() => showToast('error', 'Erreur réseau'));
+                }
+            });
+        });
+    });
 }
 
 // =================== VUE GRILLE ===================
@@ -945,9 +1122,9 @@ function createNewFolder(folderName) {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ folderName })
     })
-    .then(response => response.json())
-    .then(result => {
-        if (result.success || response.ok) {
+    .then(async response => {
+        const result = await response.json();
+        if (response.ok && (result.success || result.message === 'Folder created successfully.')) {
             showToast('success', 'Dossier créé avec succès');
             setTimeout(() => location.reload(), 1500);
         } else {
@@ -956,7 +1133,7 @@ function createNewFolder(folderName) {
     })
     .catch(error => {
         console.error('Error:', error);
-        showToast('error', 'Erreur lors de la création du dossier');
+        showToast('error', error.message || 'Erreur lors de la création du dossier');
     });
 }
 
@@ -1328,3 +1505,49 @@ window.displayMetadata = displayMetadata;
 window.addCollaborator = addCollaborator;
 window.removeCollaborator = removeCollaborator;
 window.toggleCollaboration = toggleCollaboration;
+
+// =================== FONCTIONS COLLABORATIVES ===================
+function leaveSharedFolder(folderName, element) {
+    Swal.fire({
+        title: 'Quitter le dossier partagé',
+        text: `Êtes-vous sûr de vouloir quitter le dossier "${folderName}" ? Vous perdrez l'accès à ce dossier et ses fichiers.`,
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#f59e0b',
+        cancelButtonColor: '#6b7280',
+        confirmButtonText: 'Oui, quitter',
+        cancelButtonText: 'Annuler'
+    }).then((result) => {
+        if (result.isConfirmed) {
+            // Extraire le propriétaire depuis l'URL du dossier partagé
+            const url = element.dataset.url;
+            const urlParts = url.split('/');
+            const owner = urlParts[urlParts.indexOf('shared') + 1];
+            
+            fetch('/api/dpanel/sharedfolders/leave', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    folderName: folderName,
+                    folderOwner: owner
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    showToast('success', 'Vous avez quitté le dossier partagé');
+                    // Supprimer la ligne du tableau
+                    element.remove();
+                } else {
+                    showToast('error', data.error || 'Erreur lors de la sortie du dossier');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                showToast('error', 'Erreur de connexion');
+            });
+        }
+    });
+}