🎉 initial commit

src/renderer/components/FileTree/FileTree.css

@@ -0,0 +1,80 @@
+.file-tree {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.file-tree-header {
+  padding: 14px 12px 10px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border);
+  text-transform: uppercase;
+}
+
+.file-tree-list {
+  overflow-y: auto;
+  flex: 1;
+  padding: 6px 0;
+}
+
+.tree-dir-header {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  width: 100%;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 6px 8px;
+  cursor: pointer;
+  text-align: left;
+  transition: color 0.15s;
+}
+
+.tree-dir-header:hover {
+  color: var(--text-primary);
+}
+
+.tree-arrow {
+  font-size: 10px;
+  width: 10px;
+  flex-shrink: 0;
+}
+
+.tree-file {
+  display: block;
+  width: 100%;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-family: var(--font-serif);
+  font-size: 12px;
+  padding: 5px 8px;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.15s, background 0.15s;
+  border-radius: 3px;
+  margin: 0 4px;
+  width: calc(100% - 8px);
+}
+
+.tree-file:hover {
+  color: var(--text-primary);
+  background: var(--hover-bg);
+}
+
+.tree-file.active {
+  color: var(--accent);
+  background: var(--active-bg);
+}

src/renderer/components/FileTree/FileTree.tsx

@@ -0,0 +1,18 @@
+import { useEditorStore } from '../../store/editorStore'
+import { FileTreeNode } from './FileTreeNode'
+import './FileTree.css'
+
+export function FileTree(): JSX.Element {
+  const { fileTree } = useEditorStore()
+
+  return (
+    <nav className="file-tree">
+      <div className="file-tree-header">HOHOFF</div>
+      <div className="file-tree-list">
+        {fileTree.map((node) => (
+          <FileTreeNode key={node.path} node={node} depth={0} />
+        ))}
+      </div>
+    </nav>
+  )
+}

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>
+  )
+}