fix(ui): preserve root dir state when sibling dir is expanded

- Recompute expanded state after toggling or auto-expanding directories
- Only auto-expand ancestors for the top-level tree
- Add regression coverage for sibling directory expansion

Author: trivikr

app/components/Code/FileTree.vue

@@ -39,7 +39,7 @@ const { toggleDir, isExpanded, autoExpandAncestors } = useFileTreeState(props.ba
 watch(
   () => props.currentPath,
   path => {
-    if (path) {
+    if (depth.value === 0 && path) {
       autoExpandAncestors(path)
     }
   },

app/composables/useFileTreeState.ts

@@ -7,6 +7,7 @@ export function useFileTreeState(baseUrl: string) {
     } else {
       expanded.value.add(path)
     }
+    expanded.value = new Set(expanded.value)
   }
 
   function isExpanded(path: string) {
@@ -21,6 +22,7 @@ export function useFileTreeState(baseUrl: string) {
       prefix = prefix ? `${prefix}/${part}` : part
       expanded.value.add(prefix)
     }
+    expanded.value = new Set(expanded.value)
   }
 
   return {

test/nuxt/components/CodeFileTree.spec.ts

@@ -0,0 +1,89 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it, vi } from 'vitest'
+import CodeFileTree from '~/components/Code/FileTree.vue'
+
+const mockTree: PackageFileTree[] = [
+  {
+    name: 'distribution',
+    type: 'directory',
+    path: 'distribution',
+    children: [
+      {
+        name: 'core',
+        type: 'directory',
+        path: 'distribution/core',
+        children: [
+          {
+            name: 'constants.d.ts',
+            type: 'file',
+            path: 'distribution/core/constants.d.ts',
+          },
+        ],
+      },
+      {
+        name: 'types',
+        type: 'directory',
+        path: 'distribution/types',
+        children: [
+          {
+            name: 'common.d.ts',
+            type: 'file',
+            path: 'distribution/types/common.d.ts',
+          },
+        ],
+      },
+    ],
+  },
+]
+
+function findDirButton(wrapper: Awaited<ReturnType<typeof mountCodeFileTree>>, name: string) {
+  return wrapper.findAll('button').find(button => button.text().trim() === name)
+}
+
+async function mountCodeFileTree() {
+  return mountSuspended(CodeFileTree, {
+    attachTo: document.body,
+    props: {
+      tree: mockTree,
+      currentPath: 'distribution/core/constants.d.ts',
+      baseUrl: '/package-code/ky/v/1.14.3/distribution/core/constants.d.ts?test=tree',
+      baseRoute: {
+        params: {
+          packageName: 'ky',
+          version: '1.14.3',
+          filePath: '',
+        },
+      },
+    },
+  })
+}
+
+describe('CodeFileTree', () => {
+  it('keeps a collapsed sibling directory closed when another sibling expands', async () => {
+    const wrapper = await mountCodeFileTree()
+
+    await vi.waitFor(() => {
+      expect(wrapper.text()).toContain('constants.d.ts')
+      expect(wrapper.text()).not.toContain('common.d.ts')
+    })
+
+    const coreButton = findDirButton(wrapper, 'core')
+    expect(coreButton).toBeDefined()
+    await coreButton!.trigger('click')
+
+    await vi.waitFor(() => {
+      expect(wrapper.text()).not.toContain('constants.d.ts')
+    })
+
+    const typesButton = findDirButton(wrapper, 'types')
+    expect(typesButton).toBeDefined()
+    await typesButton!.trigger('click')
+
+    await vi.waitFor(() => {
+      expect(wrapper.text()).toContain('common.d.ts')
+      expect(wrapper.text()).not.toContain('constants.d.ts')
+    })
+
+    wrapper.unmount()
+  })
+})