Double root empty folder fix, side bar drag zone adjusted

README.md

@@ -9,7 +9,7 @@ https://github.com/user-attachments/assets/179e6940-5798-4482-9a69-696f806c37de
 
 changelogs available here: <https://github.com/error311/FileRise-docker/>
 
-FileRise - Multi File Upload Editor is a lightweight, secure, self-hosted web application for uploading, syntax highlight editing, drag & drop and managing files. Built with an Apache/PHP backend and a modern JavaScript (ES6 modules) frontend, it offers a responsive, dynamic file management interface. It serves as an alternative to solutions like FileGator TinyFileManager or ProjectSend, providing an easy-to-setup experience ideal for document management, image galleries, firmware file hosting, and more.
+FileRise is a lightweight, secure, self-hosted web application for uploading, syntax-highlight editing, drag & drop file management, and more. Built with an Apache/PHP backend and a modern JavaScript (ES6 modules) frontend, it offers a responsive and dynamic interface designed to simplify file handling. As an alternative to solutions like FileGator, TinyFileManager, or ProjectSend, FileRise provides an easy-to-set-up experience ideal for document management, image galleries, firmware hosting, and other file-intensive applications.
 
 ---
 
@@ -49,7 +49,7 @@ FileRise - Multi File Upload Editor is a lightweight, secure, self-hosted web ap
   - **Move Files:** Move selected files to a different folder, automatically generating a unique filename if needed to avoid data loss.
   - **Download Files as ZIP:** Download selected files as a ZIP archive. Users can specify a custom name for the ZIP file via a modal dialog.
   - **Extract Zip:** When one or more ZIP files are selected, users can extract the archive(s) directly into the current folder.
-  - **Drag & Drop:** Easily move files by selecting them from the file list and simply dragging them onto your desired folder in the folder tree or breadcrumb. When you drop the files onto a folder, the system automatically moves them, updating your file organization in one seamless action.
+  - **Drag & Drop (File Movement):** Easily move files by selecting them from the file list and dragging them onto your desired folder in the folder tree or breadcrumb. When you drop the files onto a folder, the system automatically moves them, updating your file organization in one seamless action.
   - **Enhanced Context Menu & Keyboard Shortcuts:**
     - **Right-Click Context Menu:**  
       - A custom context menu appears on right-clicking within the file list.  
@@ -126,6 +126,16 @@ FileRise - Multi File Upload Editor is a lightweight, secure, self-hosted web ap
     - The trash modal displays details such as file name, uploader/deleter, and the trashed date/time.
     - Material icons with tooltips visually represent the restore and delete actions.
 
+- **Drag & Drop Cards with Dedicated Drop Zones:**
+  - **Sidebar Drop Zone:**  
+    - Cards (such as the upload card or folder management card) can be dragged into a dedicated sidebar drop zone for quick access to frequently used operations.
+    - The sidebar drop zone expands dynamically to accept drops anywhere within its visual area.
+  - **Top Bar Drop Zone:**  
+    - A top drop zone is available for reordering or managing cards quickly.
+    - Dragging a card to the top drop zone provides immediate visual feedback, ensuring a fluid and customizable workflow.
+  - **Seamless Interaction:**  
+    - Both drop zones support smooth drag and drop interactions with animations and pointer event adjustments to prevent interference, ensuring that cards can be dropped reliably regardless of screen position.
+
 ---
 
 ## Screenshots
@@ -214,6 +224,12 @@ For users who prefer containerization, a Docker image is available
    docker pull error311/filerise-docker:latest
    ```
 
+   macos M series:
+
+   ```bash
+   docker pull --platform linux/x86_64 error311/filerise-docker:latest
+   ```
+
 2. **Run the Container:**
 
    ```bash

dragAndDrop.js

@@ -25,10 +25,10 @@ export function loadSidebarOrder() {
     }
   }
   updateSidebarVisibility();
-  }
+}
 
-  // Internal helper: update sidebar visibility based on its content.
-  function updateSidebarVisibility() {
+// Internal helper: update sidebar visibility based on its content.
+function updateSidebarVisibility() {
   const sidebar = document.getElementById('sidebarDropArea');
   if (sidebar) {
     const cards = sidebar.querySelectorAll('#uploadCard, #folderManagementCard');
@@ -42,10 +42,10 @@ export function loadSidebarOrder() {
     // Save the current order in localStorage.
     saveSidebarOrder();
   }
-  }
+}
 
-  // Internal helper: update top zone layout (center a card if one column is empty).
-  function updateTopZoneLayout() {
+// Internal helper: update top zone layout (center a card if one column is empty).
+function updateTopZoneLayout() {
   const leftCol = document.getElementById('leftCol');
   const rightCol = document.getElementById('rightCol');
   
@@ -64,10 +64,10 @@ export function loadSidebarOrder() {
     leftCol.style.margin = '';
     rightCol.style.margin = '';
   }
-  }
+}
 
-  // When a card is being dragged, if the top drop zone is empty, set its min-height.
-  function addTopZoneHighlight() {
+// When a card is being dragged, if the top drop zone is empty, set its min-height.
+function addTopZoneHighlight() {
   const topZone = document.getElementById('uploadFolderRow');
   if (topZone) {
     topZone.classList.add('highlight');
@@ -75,20 +75,19 @@ export function loadSidebarOrder() {
       topZone.style.minHeight = '375px';
     }
   }
-  }
+}
 
-  // When the drag ends, remove the extra min-height.
-  function removeTopZoneHighlight() {
+// When the drag ends, remove the extra min-height.
+function removeTopZoneHighlight() {
   const topZone = document.getElementById('uploadFolderRow');
   if (topZone) {
     topZone.classList.remove('highlight');
     topZone.style.minHeight = '';
   }
-  }
+}
 
-  // Vertical slide/fade animation helper.
-  // It sets an initial vertical offset (30px down) and opacity 0, then animates to normal position and full opacity.
-  function animateVerticalSlide(card) {
+// Vertical slide/fade animation helper.
+function animateVerticalSlide(card) {
   card.style.transform = 'translateY(30px)';
   card.style.opacity = '0';
   // Force reflow.
@@ -103,10 +102,10 @@ export function loadSidebarOrder() {
     card.style.transform = '';
     card.style.opacity = '';
   }, 310);
-  }
+}
 
-  // Internal helper: insert card into sidebar at a proper position based on event.clientY.
-  function insertCardInSidebar(card, event) {
+// Internal helper: insert card into sidebar at a proper position based on event.clientY.
+function insertCardInSidebar(card, event) {
   const sidebar = document.getElementById('sidebarDropArea');
   if (!sidebar) return;
   const existingCards = Array.from(sidebar.querySelectorAll('#uploadCard, #folderManagementCard'));
@@ -126,20 +125,20 @@ export function loadSidebarOrder() {
   // Ensure card fills the sidebar.
   card.style.width = '100%';
   animateVerticalSlide(card);
-  }
+}
 
-  // Internal helper: save the current sidebar card order to localStorage.
-  function saveSidebarOrder() {
+// Internal helper: save the current sidebar card order to localStorage.
+function saveSidebarOrder() {
   const sidebar = document.getElementById('sidebarDropArea');
   if (sidebar) {
     const cards = sidebar.querySelectorAll('#uploadCard, #folderManagementCard');
     const order = Array.from(cards).map(card => card.id);
     localStorage.setItem('sidebarOrder', JSON.stringify(order));
   }
-  }
+}
 
-  // Helper: move cards from sidebar back to the top drop area when on small screens.
-  function moveSidebarCardsToTop() {
+// Helper: move cards from sidebar back to the top drop area when on small screens.
+function moveSidebarCardsToTop() {
   if (window.innerWidth < 1205) {
     const sidebar = document.getElementById('sidebarDropArea');
     if (!sidebar) return;
@@ -154,17 +153,17 @@ export function loadSidebarOrder() {
     updateSidebarVisibility();
     updateTopZoneLayout();
   }
-  }
+}
 
-  // Listen for window resize to automatically move sidebar cards back to top on small screens.
-  window.addEventListener('resize', function () {
+// Listen for window resize to automatically move sidebar cards back to top on small screens.
+window.addEventListener('resize', function () {
   if (window.innerWidth < 1205) {
     moveSidebarCardsToTop();
   }
-  });
+});
 
-  // This function ensures the top drop zone (#uploadFolderRow) has a stable width when empty.
-  function ensureTopZonePlaceholder() {
+// This function ensures the top drop zone (#uploadFolderRow) has a stable width when empty.
+function ensureTopZonePlaceholder() {
   const topZone = document.getElementById('uploadFolderRow');
   if (!topZone) return;
   if (topZone.querySelectorAll('#uploadCard, #folderManagementCard').length === 0) {
@@ -182,10 +181,10 @@ export function loadSidebarOrder() {
     const placeholder = topZone.querySelector('.placeholder');
     if (placeholder) placeholder.remove();
   }
-  }
+}
 
-  // This sets up all drag-and-drop event listeners for cards.
-  export function initDragAndDrop() {
+// This sets up all drag-and-drop event listeners for cards.
+export function initDragAndDrop() {
   function run() {
     const draggableCards = document.querySelectorAll('#uploadCard, #folderManagementCard');
     draggableCards.forEach(card => {
@@ -213,7 +212,17 @@ export function loadSidebarOrder() {
           dragTimer = setTimeout(() => {
             isDragging = true;
             card.classList.add('dragging');
+            // Disable pointer events on the card so it doesn't block drop detection.
+            card.style.pointerEvents = 'none';
             addTopZoneHighlight();
+            const sidebar = document.getElementById('sidebarDropArea');
+            if (sidebar) {
+              sidebar.classList.add('active');
+              sidebar.style.display = 'block';
+              sidebar.classList.add('highlight');
+              // Force the sidebar to have a tall drop zone while dragging.
+              sidebar.style.height = '800px';
+            }
             const rect = card.getBoundingClientRect();
             initialLeft = rect.left + window.pageXOffset;
             initialTop = rect.top + window.pageYOffset;
@@ -225,12 +234,6 @@ export function loadSidebarOrder() {
             card.style.top = initialTop + 'px';
             card.style.width = rect.width + 'px';
             card.style.zIndex = '10000';
-              const sidebar = document.getElementById('sidebarDropArea');
-              if (sidebar) {
-                sidebar.classList.add('active');
-                sidebar.style.display = 'block';
-                sidebar.classList.add('highlight');
-              }
           }, 500);
         });
         header.addEventListener('mouseup', function () {
@@ -248,11 +251,15 @@ export function loadSidebarOrder() {
       document.addEventListener('mouseup', function (e) {
         if (isDragging) {
           isDragging = false;
+          // Re-enable pointer events on the card.
+          card.style.pointerEvents = '';
           card.classList.remove('dragging');
           removeTopZoneHighlight();
           const sidebar = document.getElementById('sidebarDropArea');
           if (sidebar) {
             sidebar.classList.remove('highlight');
+            // Remove the forced height once the drag ends.
+            sidebar.style.height = '';
           }
           
           const leftCol = document.getElementById('leftCol');
@@ -262,12 +269,15 @@ export function loadSidebarOrder() {
           
           const sidebarElem = document.getElementById('sidebarDropArea');
           if (sidebarElem) {
+            // Instead of using elementsFromPoint, use a virtual drop zone.
             const rect = sidebarElem.getBoundingClientRect();
+            // Define a drop zone from the top of the sidebar to 1000px below its top.
+            const dropZoneBottom = rect.top + 800;
             if (
               e.clientX >= rect.left &&
               e.clientX <= rect.right &&
               e.clientY >= rect.top &&
-                e.clientY <= rect.bottom
+              e.clientY <= dropZoneBottom
             ) {
               insertCardInSidebar(card, e);
               droppedInSidebar = true;
@@ -299,7 +309,7 @@ export function loadSidebarOrder() {
                 card.style.position = 'absolute';
                 card.style.left = '0px';
                 
-                  // For top drop, animate vertical slide/fade.
+                // Animate vertical slide/fade.
                 card.style.transform = 'translateY(30px)';
                 card.style.opacity = '0';
                 
@@ -317,7 +327,6 @@ export function loadSidebarOrder() {
                   card.style.transition = '';
                   card.style.transform = '';
                   card.style.opacity = '';
-                    // Ensure the card returns to full width (via CSS: width: 100%)
                   card.style.width = '';
                 }, 310);
               }
@@ -352,4 +361,4 @@ export function loadSidebarOrder() {
   } else {
     run();
   }
-  }
+}

folderManager.js

@@ -63,8 +63,6 @@ function getParentFolder(folder) {
 // Breadcrumb Functions
 // ----------------------
 // Render breadcrumb for a normalized folder path.
-// For example, if window.currentFolder is "Folder1/Folder1SubFolder2",
-// this will return: Root / Folder1 / Folder1SubFolder2.
 function renderBreadcrumb(normalizedFolder) {
   if (normalizedFolder === "root") {
     return `<span class="breadcrumb-link" data-folder="root">Root</span>`;
@@ -310,13 +308,7 @@ export async function loadFolderTree(selectedFolder) {
     <span class="folder-toggle" data-folder="root">[<span class="custom-dash">-</span>]</span>
     <span class="folder-option root-folder-option" data-folder="root">(Root)</span>
   </div>`;
-    if (folders.length === 0) {
-      html += `<ul class="folder-tree expanded">
-                 <li class="folder-item">
-                   <span class="folder-option" data-folder="root">(Root)</span>
-                 </li>
-               </ul>`;
-    } else {
+    if (folders.length > 0) {
       const tree = buildFolderTree(folders);
       html += renderFolderTree(tree, "", "block");
     }
@@ -730,8 +722,8 @@ document.addEventListener("click", function () {
   hideFolderManagerContextMenu();
 });
 
-document.addEventListener("DOMContentLoaded", function() {
-  document.addEventListener("keydown", function(e) {
+document.addEventListener("DOMContentLoaded", function () {
+  document.addEventListener("keydown", function (e) {
     // Skip if the user is typing in an input, textarea, or contentEditable element.
     const tag = e.target.tagName.toLowerCase();
     if (tag === "input" || tag === "textarea" || e.target.isContentEditable) {