kinda working safe point

app/static/js/main.js

@@ -0,0 +1,208 @@
+// Main JavaScript file for Flask Files
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Initialize components
+    initializeViewToggle();
+    initializeFolderNavigation();
+    initializeModals();
+    initializeContextMenu();
+    initializeUploadFunctionality();
+
+    // Register service worker if supported
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/static/js/service-worker.js')
+            .then(function (registration) {
+                console.log('Service Worker registered with scope:', registration.scope);
+            }).catch(function (error) {
+                console.log('Service Worker registration failed:', error);
+            });
+    }
+});
+
+// Toggle between grid and list views
+function initializeViewToggle() {
+    const gridViewBtn = document.getElementById('grid-view-btn');
+    const listViewBtn = document.getElementById('list-view-btn');
+    const filesContainer = document.getElementById('files-container');
+
+    if (gridViewBtn && listViewBtn && filesContainer) {
+        gridViewBtn.addEventListener('click', function () {
+            filesContainer.classList.add('grid-view');
+            filesContainer.classList.remove('list-view');
+            gridViewBtn.classList.add('active');
+            listViewBtn.classList.remove('active');
+            localStorage.setItem('fileViewPreference', 'grid');
+        });
+
+        listViewBtn.addEventListener('click', function () {
+            filesContainer.classList.add('list-view');
+            filesContainer.classList.remove('grid-view');
+            listViewBtn.classList.add('active');
+            gridViewBtn.classList.remove('active');
+            localStorage.setItem('fileViewPreference', 'list');
+        });
+
+        // Load user preference from localStorage
+        const viewPreference = localStorage.getItem('fileViewPreference') || 'grid';
+        if (viewPreference === 'grid') {
+            gridViewBtn.click();
+        } else {
+            listViewBtn.click();
+        }
+    }
+}
+
+// Add animations for folder navigation
+function initializeFolderNavigation() {
+    // Add click event to folder items
+    document.querySelectorAll('.folder-item').forEach(folder => {
+        folder.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            const href = this.getAttribute('href');
+            const filesContainer = document.getElementById('files-container');
+
+            // Add transition class
+            filesContainer.classList.add('changing');
+
+            // After a short delay, navigate to the folder
+            setTimeout(() => {
+                window.location.href = href;
+            }, 200);
+        });
+    });
+
+    // Add the animation class when page loads
+    const filesContainer = document.getElementById('files-container');
+    if (filesContainer) {
+        // Remove the class to trigger animation
+        filesContainer.classList.add('folder-enter-active');
+    }
+}
+
+// Modal handling
+function initializeModals() {
+    // New folder modal
+    const newFolderBtn = document.getElementById('new-folder-btn');
+    const newFolderModal = document.getElementById('new-folder-modal');
+    const emptyNewFolderBtn = document.getElementById('empty-new-folder-btn');
+
+    if (newFolderBtn && newFolderModal) {
+        newFolderBtn.addEventListener('click', function () {
+            newFolderModal.style.display = 'flex';
+            document.getElementById('folder-name').focus();
+        });
+
+        if (emptyNewFolderBtn) {
+            emptyNewFolderBtn.addEventListener('click', function () {
+                newFolderModal.style.display = 'flex';
+                document.getElementById('folder-name').focus();
+            });
+        }
+
+        // Close modal
+        document.querySelectorAll('.modal-close, .modal-cancel').forEach(btn => {
+            btn.addEventListener('click', function () {
+                newFolderModal.style.display = 'none';
+            });
+        });
+
+        // Close on click outside
+        window.addEventListener('click', function (event) {
+            if (event.target === newFolderModal) {
+                newFolderModal.style.display = 'none';
+            }
+        });
+    }
+}
+
+// Context menu for right-click on files/folders
+function initializeContextMenu() {
+    const contextMenu = document.getElementById('context-menu');
+
+    if (!contextMenu) return;
+
+    document.addEventListener('contextmenu', function (e) {
+        const fileItem = e.target.closest('.file-item, .folder-item');
+
+        if (fileItem) {
+            e.preventDefault();
+
+            const itemId = fileItem.getAttribute('data-id');
+            const itemType = fileItem.classList.contains('file-item') ? 'file' : 'folder';
+
+            // Position menu
+            contextMenu.style.left = `${e.pageX}px`;
+            contextMenu.style.top = `${e.pageY}px`;
+
+            // Show menu
+            contextMenu.style.display = 'block';
+            contextMenu.setAttribute('data-item-id', itemId);
+            contextMenu.setAttribute('data-item-type', itemType);
+
+            // Set up buttons for different item types
+            setupContextMenuActions(contextMenu, itemId, itemType);
+        }
+    });
+
+    // Hide menu on click elsewhere
+    document.addEventListener('click', function () {
+        contextMenu.style.display = 'none';
+    });
+}
+
+function setupContextMenuActions(menu, itemId, itemType) {
+    // Show/hide appropriate actions based on item type
+    menu.querySelectorAll('[data-action]').forEach(action => {
+        const forType = action.getAttribute('data-for');
+        if (forType === 'all' || forType === itemType) {
+            action.style.display = 'block';
+        } else {
+            action.style.display = 'none';
+        }
+    });
+}
+
+// Initialize file upload functionality
+function initializeUploadFunctionality() {
+    const uploadBtn = document.querySelector('a[href*="upload"]');
+    const fileInput = document.getElementById('file-upload');
+
+    if (uploadBtn && fileInput) {
+        fileInput.addEventListener('change', function (e) {
+            if (this.files.length) {
+                const formData = new FormData();
+
+                for (let i = 0; i < this.files.length; i++) {
+                    formData.append('file', this.files[i]);
+                }
+
+                // Get current folder ID from URL if available
+                const urlParams = new URLSearchParams(window.location.search);
+                const folderId = urlParams.get('folder_id');
+
+                if (folderId) {
+                    formData.append('folder_id', folderId);
+                }
+
+                fetch('/files/upload', {
+                    method: 'POST',
+                    body: formData,
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            // Refresh page to show new file
+                            window.location.reload();
+                        } else {
+                            alert('Upload failed: ' + data.error);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        alert('Upload failed. Please try again.');
+                    });
+            }
+        });
+    }
+}