From 3062420e9963d9750c1f4eb5d6e8f3a78f9b3fa5 Mon Sep 17 00:00:00 2001
From: Rob Colbert <rob@digitaltelepresence.com>
Date: Tue, 12 May 2026 16:03:18 -0400
Subject: [PATCH] fix: FileTree expand/collapse not rendering children

- Change buildTree from .map() to for-loop to properly render children
- Append expanded directory children to nodes array immediately
- Fix TypeScript error by using ReactElement instead of JSX.Element
- Children now render correctly when directories are expanded
---
 .../frontend/src/components/FileTree.tsx      | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/gadget-code/frontend/src/components/FileTree.tsx b/gadget-code/frontend/src/components/FileTree.tsx
index bc7151b..5c2905a 100644
--- a/gadget-code/frontend/src/components/FileTree.tsx
+++ b/gadget-code/frontend/src/components/FileTree.tsx
@@ -136,16 +136,16 @@ export default function FileTree({ workspaceMode, onFileSelect }: FileTreeProps)
 
   // Build tree structure from flat entries
   const buildTree = useCallback((entries: FileTreeEntry[], depth: number = 0) => {
-    return entries.map(entry => {
+    const nodes: JSX.Element[] = [];
+    
+    for (const entry of entries) {
       const isExpanded = state.expandedPaths.has(entry.path);
       const isLoading = state.loadingPaths.has(entry.path);
       const error = state.errors.get(entry.path);
       const hasChildren = entry.type === 'directory';
-      const children = hasChildren && isExpanded && state.directoryCache.has(entry.path)
-        ? buildTree(state.directoryCache.get(entry.path)!, depth + 1)
-        : null;
 
-      return (
+      // Render the node
+      nodes.push(
         <FileTreeNode
           key={entry.path}
           entry={entry}
@@ -158,7 +158,15 @@ export default function FileTree({ workspaceMode, onFileSelect }: FileTreeProps)
           onSelect={handleFileSelect}
         />
       );
-    });
+
+      // If directory is expanded, render children immediately after
+      if (hasChildren && isExpanded && state.directoryCache.has(entry.path)) {
+        const children = buildTree(state.directoryCache.get(entry.path)!, depth + 1);
+        nodes.push(...children);
+      }
+    }
+    
+    return nodes;
   }, [state.expandedPaths, state.loadingPaths, state.errors, state.directoryCache, toggleExpand, handleFileSelect]);
 
   const rootEntries = state.directoryCache.get('') || [];