file-tree.js

// File Tree - Sidebar file browser for Marketbuffer
// This module handles the file tree data structure and rendering

const FileTree = {
  // File tree data structure
  data: {
    name: 'marketbuffer',
    type: 'folder',
    expanded: true,
    children: [
      {
        name: 'src',
        type: 'folder',
        expanded: true,
        children: [
          {
            name: 'components',
            type: 'folder',
            expanded: false,
            children: [
              { name: 'Button.js', type: 'file', path: 'demo/src/components/Button.js' },
              { name: 'Modal.js', type: 'file', path: 'demo/src/components/Modal.js' },
              { name: 'Sidebar.js', type: 'file', path: 'demo/src/components/Sidebar.js' },
            ],
          },
          {
            name: 'utils',
            type: 'folder',
            expanded: false,
            children: [
              { name: 'helpers.js', type: 'file', path: 'demo/src/utils/helpers.js' },
              { name: 'constants.js', type: 'file', path: 'demo/src/utils/constants.js' },
            ],
          },
          { name: 'index.js', type: 'file', path: 'demo/src/index.js' },
          { name: 'App.js', type: 'file', path: 'demo/src/App.js' },
        ],
      },
      {
        name: 'public',
        type: 'folder',
        expanded: false,
        children: [
          { name: 'index.html', type: 'file', path: 'demo/public/index.html' },
          { name: 'favicon.ico', type: 'file', path: 'demo/public/favicon.ico' },
        ],
      },
      {
        name: 'styles',
        type: 'folder',
        expanded: false,
        children: [
          { name: 'main.css', type: 'file', path: 'demo/styles/main.css' },
          { name: 'variables.css', type: 'file', path: 'demo/styles/variables.css' },
        ],
      },
      {
        name: 'algos',
        type: 'folder',
        expanded: true,
        children: [
          { name: 'random-walk.algo', type: 'file', path: 'demo/algos/random-walk.algo' },
          { name: 'last-close.algo', type: 'file', path: 'demo/algos/last-close.algo' },
          { name: 'momentum.algo', type: 'file', path: 'demo/algos/momentum.algo' },
          { name: 'momentum-10d.algo', type: 'file', path: 'demo/algos/momentum-10d.algo' },
          { name: 'momentum-10d-no-tsla.algo', type: 'file', path: 'demo/algos/momentum-10d-no-tsla.algo' },
        ],
      },
      { name: 'package.json', type: 'file', path: 'demo/package.json' },
      { name: 'README.md', type: 'file', path: 'demo/README.md' },
      { name: '.gitignore', type: 'file', path: 'demo/.gitignore' },
    ],
  },

  // Cache for loaded file contents (session memory)
  fileContentsCache: {},

  // Callbacks registered by index.html
  _callbacks: {
    getSystemState: null,
    saveSystemState: null,
  },

  // Register callbacks from index.html
  registerCallbacks(callbacks) {
    Object.assign(this._callbacks, callbacks);
  },

  // ============================================
  // Rendering
  // ============================================

  render() {
    // Load saved expansion state before rendering
    this.loadState();

    const container = document.getElementById('file-tree');
    // Render children of root folder directly (don't show root)
    let html = '';
    if (this.data.children) {
      this.data.children.forEach(child => {
        html += this.renderNode(child, 0);
      });
    }
    container.innerHTML = html;
    this.attachListeners();
  },

  renderNode(node, depth) {
    const isFolder = node.type === 'folder';
    const hasChildren = isFolder && node.children && node.children.length > 0;
    const toggleIcon = hasChildren ? (node.expanded ? '▼' : '▶') : '';
    const icon = isFolder ? '📁' : '📄';
    const expandedClass = node.expanded ? 'expanded' : '';
    const pathAttr = node.path ? `data-path="${node.path}"` : '';
    const isPinned = !isFolder && node.path && OS.isPinned(node.path);
    const pinClass = isPinned ? 'pinned' : '';
    const pinIcon = isPinned ? '📌' : '📌'; // pushpin icon

    const menuHtml = !isFolder && node.path ? `
          <button class="tree-file-menu-btn" data-path="${node.path}" type="button">
            <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="19" cy="12" r="2.5"/></svg>
          </button>
          <div class="tree-item-menu" data-path="${node.path}">
            <div class="tree-item-menu-option" data-action="rename"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></span>Rename</div>
            <div class="tree-item-menu-option" data-action="star"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg></span>Star</div>
            <div class="tree-item-menu-separator"></div>
            <div class="tree-item-menu-option delete" data-action="delete"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M10 11v6"/><path d="M14 11v6"/></svg></span>Delete</div>
          </div>
    ` : '';

    let html = `
      <div class="tree-item" data-depth="${depth}" data-type="${node.type}" data-name="${node.name}" ${pathAttr}>
        <div class="tree-item-row">
          <span class="tree-toggle">${toggleIcon}</span>
          <span class="tree-icon">${icon}</span>
          <span class="tree-label">${node.name}</span>
          ${menuHtml}
        </div>
    `;

    if (hasChildren) {
      html += `<div class="tree-children ${expandedClass}">`;
      node.children.forEach(child => {
        html += this.renderNode(child, depth + 1);
      });
      html += '</div>';
    }

    html += '</div>';
    return html;
  },

  attachListeners() {
    document.querySelectorAll('.tree-item-row').forEach(row => {
      row.addEventListener('click', (e) => {
        // Handle pin button click
        if (e.target.classList.contains('tree-pin')) {
          e.stopPropagation();
          const path = e.target.dataset.path;
          if (path) {
            OS.togglePinFile(path);
          }
          return;
        }

        // Handle menu button click
        if (e.target.closest('.tree-file-menu-btn')) {
          e.stopPropagation();
          // Close any other open menus
          document.querySelectorAll('.tree-item-menu.open').forEach(m => m.classList.remove('open'));
          const menu = row.querySelector('.tree-item-menu');
          const btn = e.target.closest('.tree-file-menu-btn');
          if (menu && btn) {
            const rect = btn.getBoundingClientRect();
            menu.style.left = (rect.right + 4) + 'px';
            menu.style.top = rect.top + 'px';
            menu.classList.toggle('open');
          }
          return;
        }

        // Handle menu option click
        if (e.target.closest('.tree-item-menu-option')) {
          e.stopPropagation();
          const action = e.target.dataset.action;
          const path = row.closest('.tree-item').dataset.path;
          // Handle actions here (rename, star, delete)
          if (action === 'delete') {
            // Could implement file deletion
          }
          // Close menu
          const menu = row.querySelector('.tree-item-menu');
          if (menu) menu.classList.remove('open');
          return;
        }

        // Skip if clicking inside the menu
        if (e.target.closest('.tree-item-menu')) {
          e.stopPropagation();
          return;
        }

        e.stopPropagation();
        const item = row.closest('.tree-item');
        const type = item.dataset.type;
        const name = item.dataset.name;
        const path = item.dataset.path;

        // Handle selection
        document.querySelectorAll('.tree-item-row.selected').forEach(el => {
          el.classList.remove('selected');
        });
        row.classList.add('selected');

        // Toggle folder expansion
        if (type === 'folder') {
          const children = item.querySelector('.tree-children');
          const toggle = row.querySelector('.tree-toggle');
          if (children) {
            const isExpanded = children.classList.toggle('expanded');
            toggle.innerHTML = isExpanded ? '&#9660;' : '&#9654;';
            // Update data model and save to localStorage
            this.updateNodeExpanded(this.data, name, isExpanded);
            this.saveState();
          }
        } else if (type === 'file' && path) {
          // Open file with appropriate app
          OS.openFile(path);
        }
      });
    });

    // Close tree item menus when clicking outside
    document.addEventListener('click', (e) => {
      if (!e.target.closest('.tree-item-menu-btn') && !e.target.closest('.tree-item-menu')) {
        document.querySelectorAll('.tree-item-menu.open').forEach(m => m.classList.remove('open'));
      }
    });
  },

  // ============================================
  // Node operations
  // ============================================

  updateNodeExpanded(node, name, expanded) {
    if (node.name === name) {
      node.expanded = expanded;
      return true;
    }
    if (node.children) {
      for (const child of node.children) {
        if (this.updateNodeExpanded(child, name, expanded)) return true;
      }
    }
    return false;
  },

  // ============================================
  // State persistence
  // ============================================

  saveState() {
    const state = {};
    this.collectExpansionState(this.data, state);
    const systemState = this._callbacks.getSystemState ? this._callbacks.getSystemState() : null;
    if (systemState) {
      systemState.fileTree = state;
      if (this._callbacks.saveSystemState) {
        this._callbacks.saveSystemState();
      }
    }
  },

  collectExpansionState(node, state) {
    if (node.type === 'folder') {
      state[node.name] = node.expanded || false;
    }
    if (node.children) {
      node.children.forEach(child => this.collectExpansionState(child, state));
    }
  },

  loadState() {
    const systemState = this._callbacks.getSystemState ? this._callbacks.getSystemState() : null;
    if (systemState && systemState.fileTree && Object.keys(systemState.fileTree).length > 0) {
      this.applyExpansionState(this.data, systemState.fileTree);
    }
  },

  applyExpansionState(node, state) {
    if (node.type === 'folder' && state.hasOwnProperty(node.name)) {
      node.expanded = state[node.name];
    }
    if (node.children) {
      node.children.forEach(child => this.applyExpansionState(child, state));
    }
  },

  // ============================================
  // Utilities
  // ============================================

  highlightFile(filePath) {
    // Remove existing selection
    document.querySelectorAll('.tree-item-row.selected').forEach(el => {
      el.classList.remove('selected');
    });

    // Find and select the matching file
    const fileItem = document.querySelector(`.tree-item[data-path="${filePath}"]`);
    if (fileItem) {
      const row = fileItem.querySelector('.tree-item-row');
      if (row) {
        row.classList.add('selected');
      }
    }
  },

  // Get cached file contents
  getFileContents(path) {
    return this.fileContentsCache[path];
  },

  // Set cached file contents
  setFileContents(path, contents) {
    this.fileContentsCache[path] = contents;
  },
};

// Backward compatibility aliases
const fileTreeData = FileTree.data;
const fileContentsCache = FileTree.fileContentsCache;
function renderFileTree() { FileTree.render(); }
function highlightFileInTree(filePath) { FileTree.highlightFile(filePath); }