fix(Folder): align file list entries and unify spacing in file explorer (#1224)

src/components/Folder/index.tsx

@@ -71,7 +71,7 @@ interface FileTreeProps {
   isShowSourceCode: boolean;
 }
 
-const FileTree: React.FC<FileTreeProps> = ({
+export const FileTree: React.FC<FileTreeProps> = ({
   node,
   level = 0,
   selectedFile,
@@ -105,29 +105,33 @@ const FileTree: React.FC<FileTreeProps> = ({
                   onSelectFile(fileInfo);
                 }
               }}
-              className={`text-primary flex w-full items-center justify-start rounded-xl bg-fill-fill-transparent p-2 text-left text-sm backdrop-blur-lg transition-colors hover:bg-fill-fill-transparent-active ${
+              className={`text-primary flex w-full items-center justify-start gap-2 rounded-xl bg-fill-fill-transparent p-2 text-left text-sm backdrop-blur-lg transition-colors hover:bg-fill-fill-transparent-active ${
                 selectedFile?.path === child.path
                   ? 'bg-fill-fill-transparent-active'
                   : ''
               }`}
             >
-              {child.isFolder && (
-                <span className="flex h-4 w-4 items-center justify-center">
+              {child.isFolder ? (
+                <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
                   {isExpanded ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
                     <ChevronRight className="h-4 w-4" />
                   )}
                 </span>
+              ) : (
+                <span
+                  className="flex h-4 w-4 flex-shrink-0 items-center justify-center"
+                  aria-hidden
+                />
               )}
-              {!child.isFolder && <span className="w-4" />}
 
               {child.isFolder ? (
-                <FolderIcon className="mr-2 h-5 w-5 flex-shrink-0 text-yellow-600" />
+                <FolderIcon className="h-5 w-5 flex-shrink-0 text-yellow-600" />
               ) : child.icon ? (
-                <child.icon className="mr-2 h-5 w-5 flex-shrink-0" />
+                <child.icon className="h-5 w-5 flex-shrink-0" />
               ) : (
-                <FileText className="mr-2 h-5 w-5 flex-shrink-0" />
+                <FileText className="h-5 w-5 flex-shrink-0" />
               )}
 
               <span

test/unit/components/Folder/FileTree.test.tsx

@@ -0,0 +1,156 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { FileTree } from '../../../../src/components/Folder/index';
+
+describe('FileTree', () => {
+  const onToggleFolder = vi.fn();
+  const onSelectFile = vi.fn();
+
+  const nodeWithFolderAndFile = {
+    name: '',
+    path: '',
+    children: [
+      { name: 'src', path: '/proj/src', isFolder: true, children: [] },
+      { name: 'readme.md', path: '/proj/readme.md', isFolder: false },
+    ],
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders folder and file rows', () => {
+    render(
+      <FileTree
+        node={nodeWithFolderAndFile}
+        selectedFile={null}
+        expandedFolders={new Set()}
+        onToggleFolder={onToggleFolder}
+        onSelectFile={onSelectFile}
+        isShowSourceCode={false}
+      />
+    );
+    expect(screen.getByRole('button', { name: /src/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /readme\.md/i })
+    ).toBeInTheDocument();
+  });
+  it('uses consistent first-column box (h-4 w-4) for folder and file rows for alignment', () => {
+    const { container } = render(
+      <FileTree
+        node={nodeWithFolderAndFile}
+        selectedFile={null}
+        expandedFolders={new Set()}
+        onToggleFolder={onToggleFolder}
+        onSelectFile={onSelectFile}
+        isShowSourceCode={false}
+      />
+    );
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(2);
+    buttons.forEach((btn) => {
+      const firstCol = btn.querySelector('[class*="h-4"][class*="w-4"]');
+      expect(firstCol).toBeInTheDocument();
+    });
+  });
+  it('uses gap-2 on row for consistent spacing between chevron, icon, and label', () => {
+    const { container } = render(
+      <FileTree
+        node={nodeWithFolderAndFile}
+        selectedFile={null}
+        expandedFolders={new Set()}
+        onToggleFolder={onToggleFolder}
+        onSelectFile={onSelectFile}
+        isShowSourceCode={false}
+      />
+    );
+    const buttons = container.querySelectorAll('button');
+    buttons.forEach((btn) => {
+      expect(btn.className).toMatch(/gap-2/);
+    });
+  });
+  it('file row first column has aria-hidden for accessibility', () => {
+    render(
+      <FileTree
+        node={nodeWithFolderAndFile}
+        selectedFile={null}
+        expandedFolders={new Set()}
+        onToggleFolder={onToggleFolder}
+        onSelectFile={onSelectFile}
+        isShowSourceCode={false}
+      />
+    );
+    const fileButton = screen.getByRole('button', { name: /readme\.md/i });
+    const spacer = fileButton.querySelector('[aria-hidden="true"]');
+    expect(spacer).toBeInTheDocument();
+  });
+
+  it('calls onToggleFolder when folder row is clicked', async () => {
+    render(
+      <FileTree
+        node={nodeWithFolderAndFile}
+        selectedFile={null}
+        expandedFolders={new Set()}
+        onToggleFolder={onToggleFolder}
+        onSelectFile={onSelectFile}
+        isShowSourceCode={false}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /src/i }));
+    expect(onToggleFolder).toHaveBeenCalledWith('/proj/src');
+  });
+
+  it('calls onSelectFile when file row is clicked', async () => {
+    render(
+      <FileTree
+        node={nodeWithFolderAndFile}
+        selectedFile={null}
+        expandedFolders={new Set()}
+        onToggleFolder={onToggleFolder}
+        onSelectFile={onSelectFile}
+        isShowSourceCode={false}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /readme\.md/i }));
+    expect(onSelectFile).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'readme.md',
+        path: '/proj/readme.md',
+        isFolder: false,
+      })
+    );
+  });
+
+  it('returns null when node has no children', () => {
+    const { container } = render(
+      <FileTree
+        node={{ name: '', path: '', children: [] }}
+        selectedFile={null}
+        expandedFolders={new Set()}
+        onToggleFolder={onToggleFolder}
+        onSelectFile={onSelectFile}
+        isShowSourceCode={false}
+      />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});