사이드바에 트리 구조 폴더 기능 추가

2026-05-15 15:26:10 +09:00
parent d823119a2b
commit 7c2a076e41
5 changed files with 290 additions and 3 deletions
@@ -0,0 +1,146 @@
+// Directory tree for the sidebar file-explorer pane.
+// Lazy-loads children when a node is expanded. Tracks one selected path.
+
+let _onSelect = null;   // callback(folderPath)
+let _selectedPath = null;
+
+const ICON_CLOSED = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 3.5C1 2.67 1.67 2 2.5 2H5.38l1.5 1.5H11.5C12.33 3.5 13 4.17 13 5v5.5C13 11.33 12.33 12 11.5 12h-9C1.67 12 1 11.33 1 10.5V3.5Z" fill="#7c6af7" fill-opacity=".75"/><path d="M1 5.5h12v5C13 11.33 12.33 12 11.5 12h-9C1.67 12 1 11.33 1 10.5V5.5Z" fill="#9180ff" fill-opacity=".9"/></svg>`;
+const ICON_OPEN   = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 3.5C1 2.67 1.67 2 2.5 2H5.38l1.5 1.5H11.5C12.33 3.5 13 4.17 13 5v5.5C13 11.33 12.33 12 11.5 12h-9C1.67 12 1 11.33 1 10.5V3.5Z" fill="#c9b8ff" fill-opacity=".7"/><path d="M1 5.5h12v5C13 11.33 12.33 12 11.5 12h-9C1.67 12 1 11.33 1 10.5V5.5Z" fill="#e0d5ff" fill-opacity=".85"/></svg>`;
+const ICON_HOME   = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 1.5L1 6.5V12.5H5.5V9H8.5V12.5H13V6.5L7 1.5Z" fill="#6ac8f7" fill-opacity=".9"/></svg>`;
+
+export function init(container, onSelect) {
+  _onSelect = onSelect;
+  container.innerHTML = '';
+  container.classList.add('tree-root');
+}
+
+export async function loadTree(rootPath, selectedPath) {
+  _selectedPath = selectedPath;
+  const container = document.querySelector('.file-explorer');
+  if (!container) return;
+  container.innerHTML = '';
+
+  const rootNode = createNode({
+    name: rootPath.split('/').pop() || rootPath,
+    path: rootPath,
+    hasChildren: true,
+    isRoot: true,
+  });
+  container.appendChild(rootNode);
+  await expandNode(rootNode, selectedPath);
+}
+
+function createNode({ name, path: nodePath, hasChildren, isRoot = false }) {
+  const wrap = document.createElement('div');
+  wrap.className = 'tree-node';
+  wrap.dataset.path = nodePath;
+  wrap.dataset.expanded = 'false';
+  wrap.dataset.hasChildren = hasChildren ? 'true' : 'false';
+  wrap.dataset.isRoot = isRoot ? 'true' : 'false';
+
+  const row = document.createElement('div');
+  row.className = 'tree-row';
+
+  const chevron = document.createElement('span');
+  chevron.className = 'tree-chevron';
+  chevron.innerHTML = hasChildren
+    ? `<svg width="10" height="10" viewBox="0 0 10 10"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+    : '';
+
+  const icon = document.createElement('span');
+  icon.className = 'tree-icon';
+  icon.innerHTML = isRoot ? ICON_HOME : ICON_CLOSED;
+
+  const label = document.createElement('span');
+  label.className = 'tree-label';
+  label.textContent = name;
+  label.title = nodePath;
+
+  row.appendChild(chevron);
+  row.appendChild(icon);
+  row.appendChild(label);
+  wrap.appendChild(row);
+
+  if (hasChildren) {
+    const children = document.createElement('div');
+    children.className = 'tree-children';
+    wrap.appendChild(children);
+  }
+
+  row.addEventListener('click', (e) => {
+    e.stopPropagation();
+    selectNode(wrap);
+    if (hasChildren) toggleNode(wrap);
+  });
+
+  return wrap;
+}
+
+function selectNode(nodeEl) {
+  const path = nodeEl.dataset.path;
+  document.querySelectorAll('.tree-row.active').forEach(r => r.classList.remove('active'));
+  nodeEl.querySelector(':scope > .tree-row').classList.add('active');
+  _selectedPath = path;
+  if (_onSelect) _onSelect(path);
+}
+
+async function toggleNode(nodeEl) {
+  const expanded = nodeEl.dataset.expanded === 'true';
+  if (expanded) {
+    collapseNode(nodeEl);
+  } else {
+    await expandNode(nodeEl, null);
+  }
+}
+
+function collapseNode(nodeEl) {
+  nodeEl.dataset.expanded = 'false';
+  const row = nodeEl.querySelector(':scope > .tree-row');
+  row.querySelector('.tree-chevron').classList.remove('open');
+  row.querySelector('.tree-icon').innerHTML = ICON_CLOSED;
+  const children = nodeEl.querySelector(':scope > .tree-children');
+  if (children) children.style.display = 'none';
+}
+
+async function expandNode(nodeEl, autoExpandPath) {
+  nodeEl.dataset.expanded = 'true';
+  const row = nodeEl.querySelector(':scope > .tree-row');
+  row.querySelector('.tree-chevron').classList.add('open');
+  row.querySelector('.tree-icon').innerHTML = nodeEl.dataset.isRoot === 'true' ? ICON_HOME : ICON_OPEN;
+
+  const childrenEl = nodeEl.querySelector(':scope > .tree-children');
+  if (!childrenEl) return;
+  childrenEl.style.display = '';
+
+  // Load children if not yet loaded
+  if (!childrenEl.dataset.loaded) {
+    childrenEl.dataset.loaded = 'true';
+    const dirs = await window.api.listDirectories(nodeEl.dataset.path);
+    dirs.forEach(dir => {
+      const child = createNode(dir);
+      childrenEl.appendChild(child);
+    });
+  }
+
+    // Auto-expand path to target
+  if (autoExpandPath && autoExpandPath !== nodeEl.dataset.path) {
+    const childNodes = childrenEl.querySelectorAll(':scope > .tree-node');
+    for (const child of childNodes) {
+      if (autoExpandPath === child.dataset.path || autoExpandPath.startsWith(child.dataset.path + '/')) {
+        await expandNode(child, autoExpandPath);
+        break;
+      }
+    }
+  }
+
+  if (autoExpandPath === nodeEl.dataset.path) {
+    selectNode(nodeEl);
+  }
+}
+
+export function setSelectedPath(folderPath) {
+  _selectedPath = folderPath;
+  document.querySelectorAll('.tree-row.active').forEach(r => r.classList.remove('active'));
+  const node = document.querySelector(`.tree-node[data-path="${CSS.escape(folderPath)}"]`);
+  if (node) node.querySelector(':scope > .tree-row').classList.add('active');
+}