kinda working safe point

app/static/js/browser.js

@@ -0,0 +1,246 @@
+/**
+ * File browser functionality
+ */
+document.addEventListener('DOMContentLoaded', function () {
+    // View toggle functionality
+    const filesContainer = document.getElementById('files-container');
+    const gridViewBtn = document.getElementById('grid-view-btn');
+    const listViewBtn = document.getElementById('list-view-btn');
+
+    if (filesContainer && gridViewBtn && listViewBtn) {
+        // Set initial view based on saved preference
+        const savedView = localStorage.getItem('view_preference') || 'grid';
+        filesContainer.className = `files-container ${savedView}-view`;
+
+        // Highlight the correct button
+        if (savedView === 'grid') {
+            gridViewBtn.classList.add('active');
+            listViewBtn.classList.remove('active');
+        } else {
+            listViewBtn.classList.add('active');
+            gridViewBtn.classList.remove('active');
+        }
+
+        // Add event listeners
+        gridViewBtn.addEventListener('click', function () {
+            filesContainer.className = 'files-container grid-view';
+            gridViewBtn.classList.add('active');
+            listViewBtn.classList.remove('active');
+
+            // Save preference
+            localStorage.setItem('view_preference', 'grid');
+        });
+
+        listViewBtn.addEventListener('click', function () {
+            filesContainer.className = 'files-container list-view';
+            listViewBtn.classList.add('active');
+            gridViewBtn.classList.remove('active');
+
+            // Save preference
+            localStorage.setItem('view_preference', 'list');
+        });
+    }
+
+    // Variables for tracking selected items
+    let selectedItemId = null;
+    let selectedItemType = null;
+
+    // Setup context menu functionality 
+    function setupContextMenu() {
+        // Context menu already implemented via context-menu.js
+        // We'll just need to ensure our item actions are properly set
+
+        // Add item click handler to set selected item
+        document.querySelectorAll('.file-item, .folder-item').forEach(item => {
+            item.addEventListener('click', function (e) {
+                // If clicking on an action button, don't select the item
+                if (e.target.closest('.item-actions') || e.target.closest('a')) {
+                    return;
+                }
+
+                // Set selected item
+                selectedItemId = this.dataset.id;
+                selectedItemType = this.classList.contains('folder-item') ? 'folder' : 'file';
+
+                // Highlight selected item
+                document.querySelectorAll('.file-item, .folder-item').forEach(i => {
+                    i.classList.remove('selected');
+                });
+                this.classList.add('selected');
+            });
+
+            // Right-click to open context menu
+            item.addEventListener('contextmenu', function (e) {
+                // Set selected item
+                selectedItemId = this.dataset.id;
+                selectedItemType = this.classList.contains('folder-item') ? 'folder' : 'file';
+
+                // Highlight selected item
+                document.querySelectorAll('.file-item, .folder-item').forEach(i => {
+                    i.classList.remove('selected');
+                });
+                this.classList.add('selected');
+            });
+        });
+    }
+
+    // Handle folder creation
+    const newFolderForm = document.getElementById('new-folder-form');
+    if (newFolderForm) {
+        newFolderForm.addEventListener('submit', function (e) {
+            e.preventDefault();
+
+            const folderName = document.getElementById('folder-name').value;
+            const parentId = document.querySelector('input[name="parent_id"]').value;
+
+            // Create FormData
+            const formData = new FormData();
+            formData.append('name', folderName);
+            if (parentId) formData.append('parent_id', parentId);
+
+            // Send request
+            fetch('/files/create_folder', {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // Close modal
+                        closeModal('new-folder-modal');
+
+                        // Show success message
+                        showAlert('Folder created successfully', 'success');
+
+                        // Reload page to show new folder
+                        setTimeout(() => window.location.reload(), 500);
+                    } else {
+                        showAlert(data.error || 'Error creating folder', 'error');
+                    }
+                })
+                .catch(error => {
+                    showAlert('Error creating folder: ' + error, 'error');
+                });
+        });
+    }
+
+    // Handle rename
+    const renameForm = document.getElementById('rename-form');
+    if (renameForm) {
+        renameForm.addEventListener('submit', function (e) {
+            e.preventDefault();
+
+            const newName = document.getElementById('new-name').value;
+
+            if (!selectedItemId) {
+                showAlert('No item selected', 'error');
+                return;
+            }
+
+            fetch('/files/rename', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                body: JSON.stringify({
+                    item_id: selectedItemId,
+                    new_name: newName
+                })
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // Close modal
+                        closeModal('rename-modal');
+
+                        // Show success message
+                        showAlert('Item renamed successfully', 'success');
+
+                        // Update item name in the UI or reload
+                        setTimeout(() => window.location.reload(), 500);
+                    } else {
+                        showAlert(data.error || 'Failed to rename item', 'error');
+                    }
+                })
+                .catch(error => {
+                    showAlert('Error: ' + error, 'error');
+                });
+        });
+    }
+
+    // Handle delete confirmation
+    const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
+    if (confirmDeleteBtn) {
+        confirmDeleteBtn.addEventListener('click', function () {
+            if (!selectedItemId) {
+                showAlert('No item selected', 'error');
+                closeModal('delete-modal');
+                return;
+            }
+
+            fetch(`/files/delete/${selectedItemId}`, {
+                method: 'POST',
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // Close modal
+                        closeModal('delete-modal');
+
+                        // Show success message
+                        showAlert(data.message || 'Item deleted successfully', 'success');
+
+                        // Remove the item from the UI or reload
+                        setTimeout(() => window.location.reload(), 500);
+                    } else {
+                        showAlert(data.error || 'Failed to delete item', 'error');
+                    }
+                })
+                .catch(error => {
+                    showAlert('Error: ' + error, 'error');
+                });
+        });
+    }
+
+    // Initialize
+    setupContextMenu();
+
+    // Buttons to open modals
+    const deleteBtn = document.getElementById('delete-btn');
+    if (deleteBtn) {
+        deleteBtn.addEventListener('click', function () {
+            if (!selectedItemId) {
+                showAlert('Please select an item first', 'warning');
+                return;
+            }
+            openModal('delete-modal');
+        });
+    }
+
+    const renameBtn = document.getElementById('rename-btn');
+    if (renameBtn) {
+        renameBtn.addEventListener('click', function () {
+            if (!selectedItemId) {
+                showAlert('Please select an item first', 'warning');
+                return;
+            }
+
+            // Get current name
+            const selectedItem = document.querySelector(`.file-item[data-id="${selectedItemId}"], .folder-item[data-id="${selectedItemId}"]`);
+            const currentName = selectedItem ? selectedItem.querySelector('.item-name').textContent.trim() : '';
+
+            // Set current name in the input
+            document.getElementById('new-name').value = currentName;
+
+            openModal('rename-modal');
+            document.getElementById('new-name').focus();
+        });
+    }
+});