...

static/js/file-tree.js

@@ -25,7 +25,7 @@ class FileTree {
             const isDir = node.dataset.isdir === 'true';
             
             // Toggle folder
-            if (e.target.closest('.tree-toggle')) {
+            if (e.target.closest('.tree-node-toggle')) {
                 this.toggleFolder(node);
                 return;
             }
@@ -83,21 +83,23 @@ class FileTree {
     }
     
     createNodeElement(node, level) {
+        const nodeWrapper = document.createElement('div');
+        nodeWrapper.className = 'tree-node-wrapper';
+        nodeWrapper.style.marginLeft = `${level * 12}px`;
+        
         const div = document.createElement('div');
         div.className = 'tree-node';
         div.dataset.path = node.path;
         div.dataset.isdir = node.isDirectory;
-        div.style.paddingLeft = `${level * 20 + 10}px`;
         
         // Toggle arrow for folders
         if (node.isDirectory) {
             const toggle = document.createElement('span');
-            toggle.className = 'tree-toggle';
-            toggle.innerHTML = '<i class="bi bi-chevron-right"></i>';
+            toggle.className = 'tree-node-toggle';
+            toggle.innerHTML = '▶';
             div.appendChild(toggle);
         } else {
             const spacer = document.createElement('span');
-            spacer.className = 'tree-spacer';
             spacer.style.width = '16px';
             spacer.style.display = 'inline-block';
             div.appendChild(spacer);
@@ -105,45 +107,47 @@ class FileTree {
         
         // Icon
         const icon = document.createElement('i');
-        if (node.isDirectory) {
-            icon.className = 'bi bi-folder-fill';
-            icon.style.color = '#dcb67a';
-        } else {
-            icon.className = 'bi bi-file-earmark-text';
-            icon.style.color = '#6a9fb5';
-        }
+        icon.className = `bi ${node.isDirectory ? 'bi-folder-fill' : 'bi-file-earmark-text'} tree-node-icon`;
         div.appendChild(icon);
         
+        // Content wrapper
+        const contentWrapper = document.createElement('div');
+        contentWrapper.className = 'tree-node-content';
+        
         // Name
         const name = document.createElement('span');
-        name.className = 'tree-name';
+        name.className = 'tree-node-name';
         name.textContent = node.name;
-        div.appendChild(name);
+        name.title = node.name; // Tooltip on hover
+        contentWrapper.appendChild(name);
         
         // Size for files
         if (!node.isDirectory && node.size) {
             const size = document.createElement('span');
-            size.className = 'tree-size';
+            size.className = 'file-size-badge';
             size.textContent = this.formatSize(node.size);
-            div.appendChild(size);
+            contentWrapper.appendChild(size);
         }
         
-        return div;
+        div.appendChild(contentWrapper);
+        nodeWrapper.appendChild(div);
+        
+        return nodeWrapper;
     }
     
     toggleFolder(nodeElement) {
         const childContainer = nodeElement.querySelector('.tree-children');
         if (!childContainer) return;
         
-        const toggle = nodeElement.querySelector('.tree-toggle i');
+        const toggle = nodeElement.querySelector('.tree-node-toggle');
         const isExpanded = childContainer.style.display !== 'none';
         
         if (isExpanded) {
             childContainer.style.display = 'none';
-            toggle.className = 'bi bi-chevron-right';
+            toggle.innerHTML = '▶';
         } else {
             childContainer.style.display = 'block';
-            toggle.className = 'bi bi-chevron-down';
+            toggle.innerHTML = '▼';
         }
     }