feat: Implement drag and drop functionality for folder selection and enhance UI with drag-drop zone

Author: Ashjha75

index.html

@@ -83,11 +83,20 @@ <h3>EXPLORER</h3>
                     <small class="search-meta" id="searchMeta">Search file and folder names (case-insensitive)</small>
                 </div>
 
-                <div class="sidebar-select">
-                    <button class="btn-select-dir" id="selectDirBtn">
-                        <img src="public/folder.svg" alt="Select Directory" class="sidebar-btn-icon" />
-                        Select Directory
-                    </button>
+                <div class="drag-drop-zone" id="dragDropZone">
+                    <div class="drag-drop-content">
+                        <span class="material-symbols-outlined drag-drop-icon">folder_open</span>
+                        <h4>Drag & Drop Folder Here</h4>
+                        <p>or</p>
+                        <button class="btn-select-dir" id="selectDirBtn">
+                            <img src="public/folder.svg" alt="Select Directory" class="sidebar-btn-icon" />
+                            Browse Folder
+                        </button>
+                    </div>
+                    <div class="drag-drop-overlay" id="dragDropOverlay">
+                        <span class="material-symbols-outlined drag-drop-icon-large">cloud_upload</span>
+                        <h3>Drop folder to load</h3>
+                    </div>
                 </div>
 
                 <div class="sidebar-select">

index.js

@@ -1998,6 +1998,59 @@
                 toast(`Template: ${S.model.toUpperCase()}`, 'info');
             });
         }
+        
+        // Drag and Drop functionality
+        const dragDropZone = $('dragDropZone');
+        const dragDropOverlay = $('dragDropOverlay');
+        
+        if (dragDropZone) {
+            // Prevent default drag behaviors on the entire zone
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dragDropZone.addEventListener(eventName, e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, false);
+            });
+            
+            // Highlight drop zone when dragging over it
+            ['dragenter', 'dragover'].forEach(eventName => {
+                dragDropZone.addEventListener(eventName, () => {
+                    dragDropZone.classList.add('drag-over');
+                }, false);
+            });
+            
+            ['dragleave', 'drop'].forEach(eventName => {
+                dragDropZone.addEventListener(eventName, () => {
+                    dragDropZone.classList.remove('drag-over');
+                }, false);
+            });
+            
+            // Handle dropped files
+            dragDropZone.addEventListener('drop', e => {
+                const items = e.dataTransfer.items;
+                if (!items || items.length === 0) return;
+                
+                // Check if folder was dropped (check webkitdirectory support)
+                const files = e.dataTransfer.files;
+                if (files.length > 0) {
+                    // Show loader IMMEDIATELY
+                    load(true, 'Loading dropped files...');
+                    // Process files in next tick to let loader render
+                    setTimeout(() => loadFiles(files), 0);
+                } else {
+                    toast('Please drop a folder, not individual files', 'warning');
+                }
+            }, false);
+            
+            // Click on zone to trigger folder selection
+            dragDropZone.addEventListener('click', e => {
+                // Don't trigger if clicking the button itself
+                if (!e.target.closest('.btn-select-dir')) {
+                    if (D.sel) D.sel.click();
+                }
+            });
+        }
+        
         // Optimize file input change handler
         inp.onchange = e => {
             if (!e.target.files.length) return;

ss.png

@@ -480,6 +480,105 @@ html, body {
     line-height: 1.2;
 }
 
+/* Drag and Drop Zone */
+.drag-drop-zone {
+    position: relative;
+    margin: 12px 12px 8px 12px;
+    border: 2px dashed var(--border-color);
+    border-radius: 8px;
+    padding: 24px 16px;
+    background: rgba(255, 255, 255, 0.02);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.drag-drop-zone:hover {
+    border-color: var(--color-accent);
+    background: rgba(251, 191, 36, 0.05);
+}
+
+.drag-drop-zone.drag-over {
+    border-color: var(--color-accent);
+    background: rgba(251, 191, 36, 0.1);
+    border-style: solid;
+    transform: scale(1.02);
+}
+
+.drag-drop-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    z-index: 1;
+    position: relative;
+}
+
+.drag-drop-icon {
+    font-size: 48px;
+    color: var(--color-accent);
+    opacity: 0.8;
+}
+
+.drag-drop-content h4 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.drag-drop-content p {
+    margin: 4px 0;
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.drag-drop-content .btn-select-dir {
+    margin: 8px 0 0 0;
+    width: auto;
+    padding: 8px 16px;
+    font-size: 12px;
+}
+
+.drag-drop-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(251, 191, 36, 0.15);
+    backdrop-filter: blur(4px);
+    border-radius: 6px;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    pointer-events: none;
+}
+
+.drag-drop-zone.drag-over .drag-drop-overlay {
+    display: flex;
+}
+
+.drag-drop-icon-large {
+    font-size: 64px;
+    color: var(--color-accent);
+    animation: bounce 0.6s ease infinite;
+}
+
+.drag-drop-overlay h3 {
+    margin: 8px 0 0 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-accent);
+}
+
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
 .sidebar-select {
     padding: 0 12px;
     flex-shrink: 0;