From 66ed89d39e4f85af922bfcb3d52932709377b4ff Mon Sep 17 00:00:00 2001
From: Nico <47644445+nicotsx@users.noreply.github.com>
Date: Mon, 16 Feb 2026 19:25:41 +0100
Subject: [PATCH] fix(file-tree): display load more if root folder has 500+
 items (#526)

Close #518
---
 .../components/__test__/file-tree.test.tsx    | 42 +++++++++++++++++--
 app/client/components/file-tree.tsx           | 11 ++---
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/app/client/components/__test__/file-tree.test.tsx b/app/client/components/__test__/file-tree.test.tsx
index f2aa43a6..f00c2193 100644
--- a/app/client/components/__test__/file-tree.test.tsx
+++ b/app/client/components/__test__/file-tree.test.tsx
@@ -15,7 +15,12 @@ describe("FileTree Pagination", () => {
 			<FileTree
 				files={testFiles}
 				expandedFolders={new Set(["/root"])}
-				getFolderPagination={() => ({ hasMore: true, isLoadingMore: false })}
+				getFolderPagination={(path) => {
+					if (path === "/root") {
+						return { hasMore: true, isLoadingMore: false };
+					}
+					return { hasMore: false, isLoadingMore: false };
+				}}
 			/>,
 		);
 
@@ -67,13 +72,39 @@ describe("FileTree Pagination", () => {
 			<FileTree
 				files={testFiles}
 				expandedFolders={new Set(["/root"])}
-				getFolderPagination={() => ({ hasMore: true, isLoadingMore: true })}
+				getFolderPagination={(path) => {
+					if (path === "/root") {
+						return { hasMore: true, isLoadingMore: true };
+					}
+					return { hasMore: false, isLoadingMore: false };
+				}}
 			/>,
 		);
 
 		expect(screen.getByText("Loading more...")).toBeTruthy();
 	});
 
+	test("shows load more button for root-level files when root has more", () => {
+		const rootFiles: FileEntry[] = [
+			{ name: "file1", path: "/file1", type: "file" },
+			{ name: "file2", path: "/file2", type: "file" },
+		];
+
+		render(
+			<FileTree
+				files={rootFiles}
+				getFolderPagination={(path) => {
+					if (path === "/") {
+						return { hasMore: true, isLoadingMore: false };
+					}
+					return { hasMore: false, isLoadingMore: false };
+				}}
+			/>,
+		);
+
+		expect(screen.getByText("Load more files")).toBeTruthy();
+	});
+
 	test("load more button appears for nested folders with hasMore", () => {
 		const nestedFiles: FileEntry[] = [
 			{ name: "root", path: "/root", type: "folder" },
@@ -103,7 +134,12 @@ describe("FileTree Pagination", () => {
 			<FileTree
 				files={testFiles}
 				expandedFolders={new Set([])}
-				getFolderPagination={() => ({ hasMore: true, isLoadingMore: false })}
+				getFolderPagination={(path) => {
+					if (path === "/root") {
+						return { hasMore: true, isLoadingMore: false };
+					}
+					return { hasMore: false, isLoadingMore: false };
+				}}
 			/>,
 		);
 
diff --git a/app/client/components/file-tree.tsx b/app/client/components/file-tree.tsx
index 1e5aa409..d9342f73 100644
--- a/app/client/components/file-tree.tsx
+++ b/app/client/components/file-tree.tsx
@@ -316,13 +316,10 @@ export const FileTree = memo((props: Props) => {
 		for (let i = 0; i < filteredFileList.length; i++) {
 			const item = filteredFileList[i];
 			const parentPath = item.fullPath.slice(0, item.fullPath.lastIndexOf("/")) || "/";
-
-			if (parentPath !== "/") {
-				const pagination = getFolderPagination?.(parentPath);
-				if (pagination?.hasMore && !collapsedFolders.has(parentPath)) {
-					// Update the last index for this parent
-					map.set(parentPath, i);
-				}
+			const pagination = getFolderPagination?.(parentPath);
+			if (pagination?.hasMore && !collapsedFolders.has(parentPath)) {
+				// Update the last index for this parent
+				map.set(parentPath, i);
 			}
 		}