🎉 initial commit

src/renderer/components/FileTree/FileTreeNode.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react'
+import { useEditorStore } from '../../store/editorStore'
+import type { FileNode } from '../../types/editor'
+
+interface Props {
+  node: FileNode
+  depth: number
+}
+
+export function FileTreeNode({ node, depth }: Props): JSX.Element {
+  const [expanded, setExpanded] = useState(true)
+  const { activeFilePath, setActiveFile } = useEditorStore()
+
+  const openFile = async (): Promise<void> => {
+    if (node.type === 'file') {
+      const content = await window.api.readFile(node.path)
+      setActiveFile(node.path, content)
+    }
+  }
+
+  if (node.type === 'directory') {
+    return (
+      <div className="tree-dir">
+        <button
+          className="tree-dir-header"
+          style={{ paddingLeft: `${depth * 12 + 8}px` }}
+          onClick={() => setExpanded(!expanded)}
+        >
+          <span className="tree-arrow">{expanded ? '▾' : '▸'}</span>
+          {node.name}
+        </button>
+        {expanded && node.children?.map((child) => (
+          <FileTreeNode key={child.path} node={child} depth={depth + 1} />
+        ))}
+      </div>
+    )
+  }
+
+  const isActive = activeFilePath === node.path
+
+  return (
+    <button
+      className={`tree-file${isActive ? ' active' : ''}`}
+      style={{ paddingLeft: `${depth * 12 + 20}px` }}
+      onClick={openFile}
+      title={node.name}
+    >
+      {node.name}
+    </button>
+  )
+}