feedback

brendan-kellam · brendan-kellam · commit ed48da40e8ba · 2026-01-15T15:15:10.000-08:00
diff --git a/packages/web/src/app/api/(client)/client.ts b/packages/web/src/app/api/(client)/client.ts
@@ -18,8 +18,6 @@ import {
 import {
     GetFilesRequest,
     GetFilesResponse,
-    GetFolderContentsRequest,
-    GetFolderContentsResponse,
     GetTreeRequest,
     GetTreeResponse,
 } from "@/features/fileTree/types";
@@ -104,11 +102,3 @@ export const getFiles = async (body: GetFilesRequest): Promise<GetFilesResponse
     }).then(response => response.json());
     return result as GetFilesResponse | ServiceError;
 }
-
-export const getFolderContents = async (body: GetFolderContentsRequest): Promise<GetFolderContentsResponse | ServiceError> => {
-    const result = await fetch("/api/folder_contents", {
-        method: "POST",
-        body: JSON.stringify(body),
-    }).then(response => response.json());
-    return result as GetFolderContentsResponse | ServiceError;
-}
diff --git a/packages/web/src/app/api/(server)/folder_contents/route.ts b/packages/web/src/app/api/(server)/folder_contents/route.ts
diff --git a/packages/web/src/app/api/(server)/tree/route.ts b/packages/web/src/app/api/(server)/tree/route.ts
@@ -3,7 +3,7 @@
 import { getTree } from "@/features/fileTree/api";
 import { getTreeRequestSchema } from "@/features/fileTree/types";
 import { schemaValidationError, serviceErrorResponse } from "@/lib/serviceError";
-import { isServiceError, measure } from "@/lib/utils";
+import { isServiceError } from "@/lib/utils";
 import { NextRequest } from "next/server";
 
 export const POST = async (request: NextRequest) => {
@@ -13,7 +13,7 @@ export const POST = async (request: NextRequest) => {
         return serviceErrorResponse(schemaValidationError(parsed.error));
     }
 
-    const { data: response } = await measure(() => getTree(parsed.data), 'getTree');
+    const response = await getTree(parsed.data);
     if (isServiceError(response)) {
         return serviceErrorResponse(response);
     }
diff --git a/packages/web/src/features/fileTree/components/fileTreePanel.tsx b/packages/web/src/features/fileTree/components/fileTreePanel.tsx
@@ -9,6 +9,7 @@ import { ResizablePanel } from "@/components/ui/resizable";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import useCaptureEvent from "@/hooks/useCaptureEvent";
 import { measure, unwrapServiceError } from "@/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { SearchIcon } from "lucide-react";
@@ -19,8 +20,8 @@ import {
     GoSidebarCollapse as ExpandIcon
 } from "react-icons/go";
 import { ImperativePanelHandle } from "react-resizable-panels";
-import { PureFileTreePanel } from "./pureFileTreePanel";
 import { FileTreeNode } from "../types";
+import { PureFileTreePanel } from "./pureFileTreePanel";
 
 interface FileTreePanelProps {
     order: number;
@@ -38,14 +39,13 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
         updateBrowseState,
     } = useBrowseState();
 
-    const { repoName, revisionName, path } = useBrowseParams();
-
-    const [tree, setTree] = useState<FileTreeNode | null>(null);
+    const { repoName, revisionName, path, pathType } = useBrowseParams();
     const [openPaths, setOpenPaths] = useState<Set<string>>(new Set());
+    const captureEvent = useCaptureEvent();
 
     const fileTreePanelRef = useRef<ImperativePanelHandle>(null);
 
-    const { data, isError } = useQuery({
+    const { data, isError, isPending } = useQuery({
         queryKey: ['tree', repoName, revisionName, ...Array.from(openPaths)],
         queryFn: async () => {
             const result = await measure(async () => unwrapServiceError(
@@ -56,17 +56,19 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
                 })
             ), 'getTree');
 
+            captureEvent('wa_file_tree_loaded', {
+                durationMs: result.durationMs,
+            });
+
             return result.data;
-        }
+        },
+        // The tree changes only when the query key changes (repo/revision/openPaths),
+        // so we can treat it as perpetually fresh and avoid background refetches.
+        staleTime: Infinity,
+        // Reuse the last tree during refetches (openPaths changes) to avoid UI flicker.
+        placeholderData: (previousData) => previousData,
     });
 
-    useEffect(() => {
-        if (!data) {
-            return;
-        }
-        setTree(data.tree);
-    }, [data]);
-
     // Whenever the repo name or revision name changes, we will need to
     // reset the open paths since they no longer reference the same repository/revision.
     useEffect(() => {
@@ -76,7 +78,12 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
     // When the path changes (e.g., the user clicks a reference in the explore panel),
     // we want this to be open and visible in the file tree.
     useEffect(() => {
-        const pathParts = path.split('/').filter(Boolean);
+        let pathParts = path.split('/').filter(Boolean);
+
+        // If the path is a blob, we want to open the parent directory.
+        if (pathType === 'blob') {
+            pathParts = pathParts.slice(0, -1);
+        }
 
         setOpenPaths(current => {
             const next = new Set<string>(current);
@@ -85,11 +92,11 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
             }
             return next;
         });
-    }, [path]);
+    }, [path, pathType]);
 
     // When the user clicks a file tree node, we will want to either
     // add or remove it from the open paths depending on if it's already open or not.
-    const onNodeClicked = useCallback((node: FileTreeNode) => {
+    const onTreeNodeClicked = useCallback((node: FileTreeNode) => {
         if (!openPaths.has(node.path)) {
             setOpenPaths(current => {
                 const next = new Set(current);
@@ -105,14 +112,6 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
         }
     }, [openPaths]);
 
-    // @debug: format the tree for console output.
-    // useEffect(() => {
-    //     if (!tree) {
-    //         return;
-    //     }
-    //     console.debug(__debugFormatTreeForConsole(tree));
-    // }, [tree]);
-
     useHotkeys("mod+b", () => {
         if (isFileTreePanelCollapsed) {
             fileTreePanelRef.current?.expand();
@@ -183,7 +182,7 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
                         </Tooltip>
                     </div>
                     <Separator orientation="horizontal" className="w-full mb-2" />
-                    {!tree ? (
+                    {isPending ? (
                         <FileTreePanelSkeleton />
                     ) :
                         isError ? (
@@ -192,10 +191,10 @@ export const FileTreePanel = ({ order }: FileTreePanelProps) => {
                             </div>
                         ) : (
                             <PureFileTreePanel
-                                tree={tree}
+                                tree={data.tree}
                                 openPaths={openPaths}
                                 path={path}
-                                onNodeClicked={onNodeClicked}
+                                onTreeNodeClicked={onTreeNodeClicked}
                             />
                         )}
                 </div>
@@ -387,18 +386,3 @@ const FileTreePanelSkeleton = () => {
         </div>
     )
 }
-
-const __debugFormatTreeForConsole = (node: FileTreeNode): string => {
-    const lines: string[] = [];
-    const walk = (current: FileTreeNode, prefix: string, isLast: boolean, isRoot: boolean) => {
-        const label = current.name || current.path;
-        const connector = isRoot ? "" : (isLast ? "`-- " : "|-- ");
-        lines.push(`${prefix}${connector}${label}`);
-        const nextPrefix = isRoot ? "" : `${prefix}${isLast ? "    " : "|   "}`;
-        current.children.forEach((child, index) => {
-            walk(child, nextPrefix, index === current.children.length - 1, false);
-        });
-    };
-    walk(node, "", true, true);
-    return lines.join("\n");
-};
diff --git a/packages/web/src/features/fileTree/components/pureFileTreePanel.tsx b/packages/web/src/features/fileTree/components/pureFileTreePanel.tsx
@@ -22,10 +22,10 @@ interface PureFileTreePanelProps {
     tree: FileTreeNode;
     openPaths: Set<string>;
     path: string;
-    onNodeClicked: (node: FileTreeNode) => void;
+    onTreeNodeClicked: (node: FileTreeNode) => void;
 }
 
-export const PureFileTreePanel = ({ tree, openPaths, path, onNodeClicked }: PureFileTreePanelProps) => {
+export const PureFileTreePanel = ({ tree, openPaths, path, onTreeNodeClicked }: PureFileTreePanelProps) => {
     const scrollAreaRef = useRef<HTMLDivElement>(null);
     const { repoName, revisionName } = useBrowseParams();
     const domain = useDomain();
@@ -54,8 +54,8 @@ export const PureFileTreePanel = ({ tree, openPaths, path, onNodeClicked }: Pure
                                 // (i.e., not ctrl/cmd click).
                                 onClick={(e) => {
                                     const isMetaOrCtrlKey = e.metaKey || e.ctrlKey;
-                                    if (!isMetaOrCtrlKey) {
-                                        onNodeClicked(node);
+                                    if (node.type === 'tree' && !isMetaOrCtrlKey) {
+                                        onTreeNodeClicked(node);
                                     }
                                 }}
                                 // @note: onNavigate _won't_ be called when the user ctrl/cmd clicks on a tree node.
@@ -69,14 +69,18 @@ export const PureFileTreePanel = ({ tree, openPaths, path, onNodeClicked }: Pure
                                 parentRef={scrollAreaRef}
                             />
                             {node.type === 'tree' && node.children.length > 0 && openPaths.has(node.path) && renderTree(node, depth + 1)}
-                            {/* @note: a empty tree indicates that the contents are beaing loaded. Render a loading skeleton to indicate that. */}
+                            {/*
+                                @note: a empty tree indicates that the contents are beaing loaded. Render a loading skeleton to indicate that.
+                                This relies on the fact that you cannot have empty tress in git.
+                                @see: https://archive.kernel.org/oldwiki/git.wiki.kernel.org/index.php/GitFaq.html#Can_I_add_empty_directories.3F
+                            */}
                             {node.type === 'tree' && node.children.length === 0 && openPaths.has(node.path) && renderLoadingSkeleton(depth)}
                         </React.Fragment>
                     );
                 })}
             </>
         );
-    }, [domain, onNodeClicked, path, repoName, revisionName, openPaths]);
+    }, [domain, onTreeNodeClicked, path, repoName, revisionName, openPaths]);
 
     const renderedTree = useMemo(() => renderTree(tree), [tree, renderTree]);
 
diff --git a/packages/web/src/lib/posthogEvents.ts b/packages/web/src/lib/posthogEvents.ts
@@ -181,6 +181,10 @@ export type PosthogEventMap = {
         isGlobalSearchEnabled: boolean,
     },
     //////////////////////////////////////////////////////////////////
+    wa_file_tree_loaded: {
+        durationMs: number,
+    },
+    //////////////////////////////////////////////////////////////////
     api_code_search_request: {
         source: string;
         type: 'streamed' | 'blocking';
