enhanced folder management helper

README.md

@@ -8,7 +8,7 @@ Multi File Upload Editor is a lightweight, secure web application for uploading,
 
 ---
 
-# Features
+## Features
 
 - **Multiple File/Folder Uploads with Progress:**
   - Users can select and upload multiple files & folders at once.

index.html

@@ -151,10 +151,17 @@
               </div>
             </div>
           </div>
-          <!-- Folder Management Card: 50% width on medium, 42% on large -->
+          
+          <!-- Folder Management Card -->
           <div class="col-md-6 col-lg-5 d-flex">
-            <div class="card flex-fill" style="max-width: 900px; width: 100%;">
+            <div class="card flex-fill" style="max-width: 900px; width: 100%; position: relative;">
-              <div class="card-header">Folder Navigation &amp; Management</div>
+              <!-- Card header with folder management title and help icon -->
+              <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
+                <span>Folder Navigation &amp; Management</span>
+                <button id="folderHelpBtn" class="btn btn-link" title="Folder Help" style="padding: 0; border: none; background: none;">
+                  <i class="material-icons folder-help-icon" style="font-size: 24px;">info</i>
+                </button>
+              </div>
               <div class="card-body custom-folder-card-body">
                 <div class="form-group d-flex align-items-top" style="padding-top:0; margin-bottom:0;">
                   <div id="folderTreeContainer"></div>
@@ -204,19 +211,15 @@
                     </div>
                   </div>
                 </div>
-                <div id="folderExplanation" class="folder-explanation">
+                <!-- Help Tooltip: Initially hidden -->
-                  <details class="folder-help-details">
+                <div id="folderHelpTooltip" class="folder-help-tooltip"
-                    <summary class="folder-help-summary">
+                  style="display: none; position: absolute; top: 50px; right: 15px; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1000; box-shadow: 2px 2px 6px rgba(0,0,0,0.2);">
-                      <i class="material-icons folder-help-icon">info</i>
+                  <ul class="folder-help-list" style="margin: 0; padding-left: 20px;">
-                      Folder Navigation &amp; Management Help Info
+                    <li>Click on a folder in the tree to view its files.</li>
-                    </summary>
+                    <li>Use [-] to collapse and [+] to expand folders.</li>
-                    <ul class="folder-help-list">
+                    <li>Select a folder and click "Create Folder" to add a subfolder.</li>
-                      <li>Click on a folder in the tree to view its files.</li>
+                    <li>To rename or delete a folder, select it and then click the appropriate button.</li>
-                      <li>Use [-] to collapse and [+] to expand folders.</li>
+                  </ul>
-                      <li>Select a folder and click "Create Folder" to add a subfolder.</li>
-                      <li>To rename or delete a folder, select it and then click the appropriate button.</li>
-                    </ul>
-                  </details>
                 </div>
               </div>
             </div>

main.js

@@ -123,6 +123,21 @@ document.addEventListener("DOMContentLoaded", function () {
       initFileActions();
       initUpload();
       loadFolderTree();
+      const helpBtn = document.getElementById("folderHelpBtn");
+      const helpTooltip = document.getElementById("folderHelpTooltip");
+      helpBtn.addEventListener("click", function () {
+        // Toggle display of the tooltip.
+        if (helpTooltip.style.display === "none" || helpTooltip.style.display === "") {
+          helpTooltip.style.display = "block";
+        } else {
+          helpTooltip.style.display = "none";
+        }
+        // Set the icon color based on dark mode.
+        const helpIcon = document.querySelector("#folderHelpBtn > i.material-icons.folder-help-icon");
+        if (helpIcon) {
+          helpIcon.style.color = document.body.classList.contains("dark-mode") ? "#ffa500" : "orange";
+        }
+      });
     } else {
       console.warn("User not authenticated. Data loading deferred.");
     }
@@ -131,9 +146,9 @@ document.addEventListener("DOMContentLoaded", function () {
   // --- Auto-scroll During Drag ---
   // Adjust these values as needed:
   const SCROLL_THRESHOLD = 50; // pixels from edge to start scrolling
-  const SCROLL_SPEED = 10;     // pixels to scroll per event
+  const SCROLL_SPEED = 20;     // pixels to scroll per event
 
-  document.addEventListener("dragover", function(e) {
+  document.addEventListener("dragover", function (e) {
     if (e.clientY < SCROLL_THRESHOLD) {
       window.scrollBy(0, -SCROLL_SPEED);
     } else if (e.clientY > window.innerHeight - SCROLL_THRESHOLD) {

styles.css

@@ -183,6 +183,30 @@ body.dark-mode header {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
+/* Folder Help Tooltip - Light Mode */
+.folder-help-tooltip {
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px;
+  box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
+}
+
+/* Folder Help Tooltip - Dark Mode */
+body.dark-mode .folder-help-tooltip {
+  background-color: #333 !important;
+  color: #eee !important;
+  border: 1px solid #555 !important;
+}
+#folderHelpBtn i.material-icons.folder-help-icon {
+  -webkit-text-fill-color: orange !important;
+  color: inherit !important;
+}
+
+body.dark-mode #folderHelpBtn i.material-icons.folder-help-icon {
+  -webkit-text-fill-color: #ffa500 !important; /* or another color for dark mode */
+}
 /************************************************************/
 /* RESPONSIVE HEADER FIXES                                 */
 /************************************************************/
@@ -1561,21 +1585,6 @@ body.dark-mode #searchInput {
   border: 1px solid #555;
 }
 
-.folder-explanation {
-  margin-top: 5px;
-  padding: 5px;
-  font-size: 12px;
-  color: #555;
-  background-color: solid transparent;
-  border: 1px solid transparent;
-  border-radius: 2px;
-}
-
-body.dark-mode .folder-explanation {
-  color: #ddd;
-  background-color: solid transparent;
-  border: 1px solid transparent;
-}
 
 body.dark-mode .CodeMirror {
   background: #1e1e1e !important;
@@ -1636,3 +1645,8 @@ body.dark-mode .CodeMirror-matchingbracket {
   background-color: #e0e0e0;
   border: 1px dashed #666;
 }
+
+body.dark-mode .drop-hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border-bottom: 1px dashed #ffffff !important;
+}