...

static/js/ui-utils.js

@@ -47,29 +47,26 @@ function showContextMenu(x, y, target) {
     const menu = document.getElementById('contextMenu');
     if (!menu) return;
     
-    // Store target
+    // Store target data
     menu.dataset.targetPath = target.path;
     menu.dataset.targetIsDir = target.isDir;
     
     // Show/hide menu items based on target type
-    const newFileItem = menu.querySelector('[data-action="new-file"]');
-    const newFolderItem = menu.querySelector('[data-action="new-folder"]');
-    const uploadItem = menu.querySelector('[data-action="upload"]');
-    const downloadItem = menu.querySelector('[data-action="download"]');
+    const items = {
+        'new-file': target.isDir,
+        'new-folder': target.isDir,
+        'upload': target.isDir,
+        'download': true,
+        'paste': target.isDir && window.fileTreeActions?.clipboard,
+        'open': !target.isDir
+    };
     
-    if (target.isDir) {
-        // Folder context menu
-        if (newFileItem) newFileItem.style.display = 'block';
-        if (newFolderItem) newFolderItem.style.display = 'block';
-        if (uploadItem) uploadItem.style.display = 'block';
-        if (downloadItem) downloadItem.style.display = 'block';
-    } else {
-        // File context menu
-        if (newFileItem) newFileItem.style.display = 'none';
-        if (newFolderItem) newFolderItem.style.display = 'none';
-        if (uploadItem) uploadItem.style.display = 'none';
-        if (downloadItem) downloadItem.style.display = 'block';
-    }
+    Object.entries(items).forEach(([action, show]) => {
+        const item = menu.querySelector(`[data-action="${action}"]`);
+        if (item) {
+            item.style.display = show ? 'flex' : 'none';
+        }
+    });
     
     // Position menu
     menu.style.display = 'block';
@@ -77,13 +74,15 @@ function showContextMenu(x, y, target) {
     menu.style.top = y + 'px';
     
     // Adjust if off-screen
-    const rect = menu.getBoundingClientRect();
-    if (rect.right > window.innerWidth) {
-        menu.style.left = (window.innerWidth - rect.width - 10) + 'px';
-    }
-    if (rect.bottom > window.innerHeight) {
-        menu.style.top = (window.innerHeight - rect.height - 10) + 'px';
-    }
+    setTimeout(() => {
+        const rect = menu.getBoundingClientRect();
+        if (rect.right > window.innerWidth) {
+            menu.style.left = (window.innerWidth - rect.width - 10) + 'px';
+        }
+        if (rect.bottom > window.innerHeight) {
+            menu.style.top = (window.innerHeight - rect.height - 10) + 'px';
+        }
+    }, 0);
 }
 
 function hideContextMenu() {
@@ -93,9 +92,29 @@ function hideContextMenu() {
     }
 }
 
-// Hide context menu on click outside
+// Context menu item click handler
+document.addEventListener('click', async (e) => {
+    const menuItem = e.target.closest('.context-menu-item');
+    if (!menuItem) {
+        hideContextMenu();
+        return;
+    }
+    
+    const action = menuItem.dataset.action;
+    const menu = document.getElementById('contextMenu');
+    const targetPath = menu.dataset.targetPath;
+    const isDir = menu.dataset.targetIsDir === 'true';
+    
+    hideContextMenu();
+    
+    if (window.fileTreeActions) {
+        await window.fileTreeActions.execute(action, targetPath, isDir);
+    }
+});
+
+// Hide on outside click
 document.addEventListener('click', (e) => {
-    if (!e.target.closest('#contextMenu')) {
+    if (!e.target.closest('#contextMenu') && !e.target.closest('.tree-node')) {
         hideContextMenu();
     }
 });