cleanup

Author: jonathanlab

apps/array/src/main/preload.ts

@@ -220,18 +220,15 @@ contextBridge.exposeInMainWorld("electronAPI", {
     ipcRenderer.invoke("get-changed-files-head", repoPath),
   getFileAtHead: (repoPath: string, filePath: string): Promise<string | null> =>
     ipcRenderer.invoke("get-file-at-head", repoPath, filePath),
-  // Lazy directory listing
   listDirectory: (
     dirPath: string,
   ): Promise<
     Array<{ name: string; path: string; type: "file" | "directory" }>
   > => ipcRenderer.invoke("fs:list-directory", dirPath),
-  // Watcher control
   watcherStart: (repoPath: string): Promise<void> =>
     ipcRenderer.invoke("watcher:start", repoPath),
   watcherStop: (repoPath: string): Promise<void> =>
     ipcRenderer.invoke("watcher:stop", repoPath),
-  // Events
   onDirectoryChanged: (
     listener: (data: { repoPath: string; dirPath: string }) => void,
   ): (() => void) => {

apps/array/src/renderer/features/task-detail/components/FileTreePanel.tsx

@@ -1,23 +1,11 @@
 import { PanelMessage } from "@components/ui/PanelMessage";
 import { usePanelLayoutStore } from "@features/panels";
 import { useTaskData } from "@features/task-detail/hooks/useTaskData";
-import {
-  FileIcon,
-  FolderIcon,
-  FolderOpenIcon,
-  SpinnerGap,
-} from "@phosphor-icons/react";
+import { FileIcon, FolderIcon, FolderOpenIcon } from "@phosphor-icons/react";
 import { Box, Flex, Text } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
 
 interface FileTreePanelProps {
   taskId: string;
@@ -30,29 +18,6 @@ interface DirectoryEntry {
   type: "file" | "directory";
 }
 
-type DirectoryChangeCallback = (dirPath: string) => void;
-
-interface DirectoryChangeContextValue {
-  subscribe: (dirPath: string, callback: DirectoryChangeCallback) => () => void;
-}
-
-const DirectoryChangeContext =
-  createContext<DirectoryChangeContextValue | null>(null);
-
-function useDirectoryChange(
-  dirPath: string | null,
-  callback: DirectoryChangeCallback,
-) {
-  const ctx = useContext(DirectoryChangeContext);
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-
-  useEffect(() => {
-    if (!ctx || !dirPath) return;
-    return ctx.subscribe(dirPath, (path) => callbackRef.current(path));
-  }, [ctx, dirPath]);
-}
-
 interface LazyTreeItemProps {
   entry: DirectoryEntry;
   depth: number;
@@ -62,62 +27,31 @@ interface LazyTreeItemProps {
 
 function LazyTreeItem({ entry, depth, taskId, repoPath }: LazyTreeItemProps) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [children, setChildren] = useState<DirectoryEntry[] | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
   const openFile = usePanelLayoutStore((state) => state.openFile);
 
-  const loadChildren = useCallback(async () => {
-    if (entry.type !== "directory") return;
+  const { data: children } = useQuery({
+    queryKey: ["directory", entry.path],
+    queryFn: () => window.electronAPI.listDirectory(entry.path),
+    enabled: entry.type === "directory" && isExpanded,
+    staleTime: Infinity,
+  });
 
-    setIsLoading(true);
-    try {
-      const entries = await window.electronAPI.listDirectory(entry.path);
-      setChildren(entries);
-    } catch (error) {
-      console.error("Failed to load directory:", error);
-      setChildren([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [entry.path, entry.type]);
-
-  const handleClick = async () => {
+  const handleClick = () => {
     if (entry.type === "directory") {
-      if (!isExpanded && children === null) {
-        await loadChildren();
-      }
       setIsExpanded(!isExpanded);
     } else {
-      const relativePath = entry.path.replace(`${repoPath}/`, "");
-      openFile(taskId, relativePath);
+      openFile(taskId, entry.path.replace(`${repoPath}/`, ""));
     }
   };
 
-  useDirectoryChange(
-    entry.type === "directory" && isExpanded ? entry.path : null,
-    useCallback(() => {
-      window.electronAPI
-        .listDirectory(entry.path)
-        .then((entries) => {
-          setChildren(entries);
-        })
-        .catch((error) => {
-          console.error("Failed to refresh directory:", error);
-        });
-    }, [entry.path]),
-  );
-
   return (
     <Box>
       <Flex
         align="center"
         gap="2"
         py="1"
         px="2"
-        style={{
-          paddingLeft: `${depth * 16 + 8}px`,
-          cursor: "pointer",
-        }}
+        style={{ paddingLeft: `${depth * 16 + 8}px`, cursor: "pointer" }}
         className="rounded hover:bg-gray-2"
         onClick={handleClick}
       >
@@ -133,101 +67,43 @@ function LazyTreeItem({ entry, depth, taskId, repoPath }: LazyTreeItemProps) {
         <Text size="2" style={{ userSelect: "none" }}>
           {entry.name}
         </Text>
-        {isLoading && (
-          <SpinnerGap
-            size={12}
-            className="animate-spin"
-            color="var(--gray-9)"
-          />
-        )}
       </Flex>
-      {entry.type === "directory" && isExpanded && children && (
-        <Box>
-          {children.map((child) => (
-            <LazyTreeItem
-              key={child.path}
-              entry={child}
-              depth={depth + 1}
-              taskId={taskId}
-              repoPath={repoPath}
-            />
-          ))}
-        </Box>
-      )}
+      {isExpanded &&
+        children?.map((child) => (
+          <LazyTreeItem
+            key={child.path}
+            entry={child}
+            depth={depth + 1}
+            taskId={taskId}
+            repoPath={repoPath}
+          />
+        ))}
     </Box>
   );
 }
 
 export function FileTreePanel({ taskId, task }: FileTreePanelProps) {
   const taskData = useTaskData({ taskId, initialTask: task });
   const repoPath = taskData.repoPath;
-
-  const [rootEntries, setRootEntries] = useState<DirectoryEntry[] | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const subscribersRef = useRef<Map<string, Set<DirectoryChangeCallback>>>(
-    new Map(),
-  );
-
-  const contextValue = useMemo<DirectoryChangeContextValue>(
-    () => ({
-      subscribe: (dirPath, callback) => {
-        if (!subscribersRef.current.has(dirPath)) {
-          subscribersRef.current.set(dirPath, new Set());
-        }
-        subscribersRef.current.get(dirPath)?.add(callback);
-        return () => {
-          subscribersRef.current.get(dirPath)?.delete(callback);
-          if (subscribersRef.current.get(dirPath)?.size === 0) {
-            subscribersRef.current.delete(dirPath);
-          }
-        };
-      },
-    }),
-    [],
-  );
+  const queryClient = useQueryClient();
+
+  const {
+    data: rootEntries,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["directory", repoPath],
+    queryFn: () => window.electronAPI.listDirectory(repoPath!),
+    enabled: !!repoPath,
+    staleTime: Infinity,
+  });
 
   useEffect(() => {
     if (!repoPath) return;
-
-    setIsLoading(true);
-    setError(null);
-
-    window.electronAPI
-      .listDirectory(repoPath)
-      .then((entries) => {
-        setRootEntries(entries);
-      })
-      .catch((err) => {
-        console.error("Failed to load root directory:", err);
-        setError("Failed to load files");
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
-  }, [repoPath]);
-
-  useEffect(() => {
-    if (!repoPath) return;
-
-    const unsub = window.electronAPI.onDirectoryChanged(({ dirPath }) => {
-      if (dirPath === repoPath) {
-        window.electronAPI.listDirectory(repoPath).then((entries) => {
-          setRootEntries(entries);
-        });
-      }
-
-      const callbacks = subscribersRef.current.get(dirPath);
-      if (callbacks) {
-        for (const cb of callbacks) {
-          cb(dirPath);
-        }
-      }
+    return window.electronAPI.onDirectoryChanged(({ dirPath }) => {
+      queryClient.invalidateQueries({ queryKey: ["directory", dirPath] });
     });
-
-    return unsub;
-  }, [repoPath]);
+  }, [repoPath, queryClient]);
 
   if (!repoPath) {
     return <PanelMessage>No repository path available</PanelMessage>;
@@ -238,28 +114,26 @@ export function FileTreePanel({ taskId, task }: FileTreePanelProps) {
   }
 
   if (error) {
-    return <PanelMessage color="red">{error}</PanelMessage>;
+    return <PanelMessage color="red">Failed to load files</PanelMessage>;
   }
 
-  if (!rootEntries || rootEntries.length === 0) {
+  if (!rootEntries?.length) {
     return <PanelMessage>No files found</PanelMessage>;
   }
 
   return (
-    <DirectoryChangeContext.Provider value={contextValue}>
-      <Box height="100%" overflowY="auto" p="4">
-        <Flex direction="column" gap="1">
-          {rootEntries.map((entry) => (
-            <LazyTreeItem
-              key={entry.path}
-              entry={entry}
-              depth={0}
-              taskId={taskId}
-              repoPath={repoPath}
-            />
-          ))}
-        </Flex>
-      </Box>
-    </DirectoryChangeContext.Provider>
+    <Box height="100%" overflowY="auto" p="4">
+      <Flex direction="column" gap="1">
+        {rootEntries.map((entry) => (
+          <LazyTreeItem
+            key={entry.path}
+            entry={entry}
+            depth={0}
+            taskId={taskId}
+            repoPath={repoPath}
+          />
+        ))}
+      </Flex>
+    </Box>
   );
 }