feat(tui): collapse directories when possible in file tree (#28512)

This commit is contained in:
James Long
2026-05-20 16:22:04 -04:00
committed by GitHub
parent 650594e801
commit d0779d2aca
4 changed files with 129 additions and 28 deletions

View File

@@ -60,6 +60,52 @@ describe("diff viewer file tree utilities", () => {
expect(flattenFileTree(tree).map((row) => row.name)).toEqual(["alpha.ts", "beta.ts", "zeta.ts"])
})
test("collapses unary directory chains while flattening", () => {
const rows = flattenFileTree(
buildFileTree([
{ file: "packages/opencode/src/cli/app.ts" },
{ file: "packages/opencode/src/server/server.ts" },
]),
)
expect(rows.map((row) => `${" ".repeat(row.depth)}${row.kind}:${row.name}`)).toEqual([
"directory:packages/opencode/src",
" directory:cli",
" file:app.ts",
" directory:server",
" file:server.ts",
])
})
test("does not collapse a directory into a file row", () => {
const rows = flattenFileTree(buildFileTree([{ file: "packages/opencode/src/app.ts" }]))
expect(rows.map((row) => `${" ".repeat(row.depth)}${row.kind}:${row.name}`)).toEqual([
"directory:packages/opencode/src",
" file:app.ts",
])
})
test("stops collapsing at branches", () => {
const rows = flattenFileTree(
buildFileTree([
{ file: "packages/opencode/src/cli/app.ts" },
{ file: "packages/opencode/src/server/server.ts" },
{ file: "packages/readme.md" },
]),
)
expect(rows.map((row) => `${" ".repeat(row.depth)}${row.kind}:${row.name}`)).toEqual([
"directory:packages",
" directory:opencode/src",
" directory:cli",
" file:app.ts",
" directory:server",
" file:server.ts",
" file:readme.md",
])
})
test("keeps same directory names under different parents separate", () => {
const rows = flattenFileTree(
buildFileTree([{ file: "components/button.ts" }, { file: "docs/components/usage.md" }]),
@@ -68,9 +114,8 @@ describe("diff viewer file tree utilities", () => {
expect(rows.map((row) => `${" ".repeat(row.depth)}${row.kind}:${row.name}`)).toEqual([
"directory:components",
" file:button.ts",
"directory:docs",
" directory:components",
" file:usage.md",
"directory:docs/components",
" file:usage.md",
])
})
@@ -79,15 +124,27 @@ describe("diff viewer file tree utilities", () => {
buildFileTree([{ file: "src/config/tui.ts" }, { file: "src/config/keybind.ts" }, { file: "README.md" }]),
)
expect(rows.map((row) => ({ name: row.name, kind: row.kind, depth: row.depth, fileIndex: row.fileIndex }))).toEqual(
[
{ name: "src", kind: "directory", depth: 0, fileIndex: undefined },
{ name: "config", kind: "directory", depth: 1, fileIndex: undefined },
{ name: "keybind.ts", kind: "file", depth: 2, fileIndex: 1 },
{ name: "tui.ts", kind: "file", depth: 2, fileIndex: 0 },
{ name: "README.md", kind: "file", depth: 0, fileIndex: 2 },
],
)
expect(rows.map((row) => ({ name: row.name, kind: row.kind, depth: row.depth, fileIndex: row.fileIndex }))).toEqual([
{ name: "src/config", kind: "directory", depth: 0, fileIndex: undefined },
{ name: "keybind.ts", kind: "file", depth: 1, fileIndex: 1 },
{ name: "tui.ts", kind: "file", depth: 1, fileIndex: 0 },
{ name: "README.md", kind: "file", depth: 0, fileIndex: 2 },
])
})
test("collapses expanded unary children under the first visible directory id", () => {
const tree = buildFileTree([
{ file: "packages/opencode/src/cli/app.ts" },
{ file: "packages/opencode/src/server/server.ts" },
])
const packages = tree.nodes.find((node) => node.kind === "directory" && node.name === "packages")!
expect(flattenFileTree(tree, new Set()).map((row) => row.name)).toEqual(["packages/opencode/src"])
expect(flattenFileTree(tree, new Set([packages.id])).map((row) => row.name)).toEqual([
"packages/opencode/src",
"cli",
"server",
])
})
test("flattens only expanded directory descendants when expansion is provided", () => {
@@ -148,7 +205,7 @@ describe("diff viewer file tree utilities", () => {
const collapsed = toggleFileTreeDirectory(tree, expanded, src.id)
expect(collapsed.has(src.id)).toBe(false)
expect(flattenFileTree(tree, collapsed).map((row) => row.name)).toEqual(["src", "README.md"])
expect(flattenFileTree(tree, collapsed).map((row) => row.name)).toEqual(["src/config", "README.md"])
const reopened = toggleFileTreeDirectory(tree, collapsed, src.id)
expect(reopened.has(src.id)).toBe(true)

View File

@@ -89,8 +89,8 @@ describe("DiffViewerFileTree", () => {
await renderFrame(() => <DiffViewerFileTree files={files} loading={false} error={undefined} theme={theme} />),
)
expect(focused).toContain("▾ src")
expect(unfocused).toContain("▾ src")
expect(focused).toContain("▾ src/config")
expect(unfocused).toContain("▾ src/config")
expect(focused.some((line) => line.includes("*"))).toBe(false)
expect(unfocused.some((line) => line.includes("*"))).toBe(false)
})
@@ -108,7 +108,7 @@ describe("DiffViewerFileTree", () => {
<DiffViewerFileTree files={files} loading={false} error={undefined} theme={theme} expandedNodes={collapsed} />
)),
),
).toEqual(["▸ src", " README.md"])
).toEqual(["▸ src/config", " README.md"])
expect(
visibleLines(
@@ -122,7 +122,7 @@ describe("DiffViewerFileTree", () => {
/>
)),
),
).toEqual(["▾ src", " ▾ config", " tui.ts", " README.md"])
).toEqual(["▾ src/config", " tui.ts", " README.md"])
})
})