more commits..

app/static/js/modal.js

@@ -0,0 +1,86 @@
+// Modal management script
+document.addEventListener('DOMContentLoaded', function () {
+    // Initialize all modals
+    initializeModals();
+});
+
+function initializeModals() {
+    // Setup modal triggers
+    document.querySelectorAll('[data-toggle="modal"]').forEach(trigger => {
+        const targetId = trigger.getAttribute('data-target');
+        const targetModal = document.querySelector(targetId);
+
+        if (targetModal) {
+            trigger.addEventListener('click', function (e) {
+                e.preventDefault();
+                openModal(targetId);
+            });
+        }
+    });
+
+    // Setup direct modal triggers (like the new folder button)
+    const newFolderBtn = document.getElementById('new-folder-btn');
+    if (newFolderBtn) {
+        newFolderBtn.addEventListener('click', function () {
+            openModal('#new-folder-modal');
+        });
+    }
+
+    const emptyNewFolderBtn = document.getElementById('empty-new-folder-btn');
+    if (emptyNewFolderBtn) {
+        emptyNewFolderBtn.addEventListener('click', function () {
+            openModal('#new-folder-modal');
+        });
+    }
+
+    // Close buttons
+    document.querySelectorAll('.modal-close, .modal-cancel').forEach(closeBtn => {
+        closeBtn.addEventListener('click', function () {
+            const modal = this.closest('.modal');
+            if (modal) {
+                closeModal('#' + modal.id);
+            }
+        });
+    });
+
+    // Close on background click
+    document.querySelectorAll('.modal').forEach(modal => {
+        modal.addEventListener('click', function (e) {
+            if (e.target === this) {
+                closeModal('#' + this.id);
+            }
+        });
+    });
+
+    // Close on escape key
+    document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') {
+            const activeModal = document.querySelector('.modal.active');
+            if (activeModal) {
+                closeModal('#' + activeModal.id);
+            }
+        }
+    });
+}
+
+// Open a modal by ID
+function openModal(modalId) {
+    const modal = typeof modalId === 'string' ?
+        document.querySelector(modalId) :
+        modalId;
+
+    if (modal) {
+        modal.classList.add('active');
+    }
+}
+
+// Close a modal by ID
+function closeModal(modalId) {
+    const modal = typeof modalId === 'string' ?
+        document.querySelector(modalId) :
+        modalId;
+
+    if (modal) {
+        modal.classList.remove('active');
+    }
+}