more commits..

app/static/js/main.js

@@ -17,6 +17,12 @@ document.addEventListener('DOMContentLoaded', function () {
                 console.log('Service Worker registration failed:', error);
             });
     }
+
+    // Initialize flash message close buttons
+    initFlashMessages();
+
+    // Initialize any other global functionality
+    initGlobalDropzone();
 });
 
 // Toggle between grid and list views
@@ -205,4 +211,82 @@ function initializeUploadFunctionality() {
             }
         });
     }
+}
+
+function initFlashMessages() {
+    document.querySelectorAll('.flash-close').forEach(btn => {
+        btn.addEventListener('click', function () {
+            this.closest('.flash-message').remove();
+        });
+    });
+}
+
+function initGlobalDropzone() {
+    // Setup global dropzone for file uploads
+    const body = document.body;
+
+    // Only setup if we're on a page that can handle uploads
+    if (document.getElementById('file-upload')) {
+        // Create dropzone overlay if it doesn't exist
+        if (!document.querySelector('.global-dropzone')) {
+            const dropzone = document.createElement('div');
+            dropzone.className = 'global-dropzone';
+            dropzone.innerHTML = `
+                <div class="dropzone-content">
+                    <div class="dropzone-icon">
+                        <i class="fas fa-cloud-upload-alt fa-3x"></i>
+                    </div>
+                    <h3>Drop files to upload</h3>
+                    <p>Your files will be uploaded to the current folder</p>
+                </div>
+            `;
+            document.body.appendChild(dropzone);
+        }
+
+        // Get the dropzone element
+        const dropzone = document.querySelector('.global-dropzone');
+
+        // Handle drag events
+        body.addEventListener('dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            dropzone.classList.add('active');
+        });
+
+        body.addEventListener('dragleave', function (e) {
+            if (e.target === body || e.target === dropzone) {
+                dropzone.classList.remove('active');
+            }
+        });
+
+        dropzone.addEventListener('dragleave', function (e) {
+            if (e.target === dropzone) {
+                dropzone.classList.remove('active');
+            }
+        });
+
+        dropzone.addEventListener('dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+
+        dropzone.addEventListener('drop', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            dropzone.classList.remove('active');
+
+            // Get the file input element
+            const fileInput = document.getElementById('file-upload');
+
+            // Handle the dropped files
+            if (e.dataTransfer.files.length > 0) {
+                // Set the files to the file input
+                fileInput.files = e.dataTransfer.files;
+
+                // Trigger the change event
+                const event = new Event('change', { bubbles: true });
+                fileInput.dispatchEvent(event);
+            }
+        });
+    }
 }