fix: keep dirs expanded (#148)

Author: gameroman

app/components/CodeFileTree.vue

@@ -18,33 +18,18 @@ function isNodeActive(node: PackageFileTree): boolean {
   return false
 }
 
-// State for expanded directories
-const expandedDirs = ref<Set<string>>(new Set())
+const { toggleDir, isExpanded, autoExpandAncestors } = useFileTreeState(props.baseUrl)
 
 // Auto-expand directories in the current path
 watch(
   () => props.currentPath,
   path => {
-    if (!path) return
-    const parts = path.split('/')
-    for (let i = 1; i <= parts.length; i++) {
-      expandedDirs.value.add(parts.slice(0, i).join('/'))
+    if (path) {
+      autoExpandAncestors(path)
     }
   },
   { immediate: true },
 )
-
-function toggleDir(path: string) {
-  if (expandedDirs.value.has(path)) {
-    expandedDirs.value.delete(path)
-  } else {
-    expandedDirs.value.add(path)
-  }
-}
-
-function isExpanded(path: string): boolean {
-  return expandedDirs.value.has(path)
-}
 </script>
 
 <template>

app/composables/useFileTreeState.ts

@@ -0,0 +1,33 @@
+export function useFileTreeState(baseUrl: string) {
+  const stateKey = computed(() => `npmx-file-tree${baseUrl}`)
+
+  const expanded = useState<Set<string>>(stateKey.value, () => new Set<string>())
+
+  function toggleDir(path: string) {
+    if (expanded.value.has(path)) {
+      expanded.value.delete(path)
+    } else {
+      expanded.value.add(path)
+    }
+  }
+
+  function isExpanded(path: string) {
+    return expanded.value.has(path)
+  }
+
+  function autoExpandAncestors(path: string) {
+    if (!path) return
+    const parts = path.split('/').filter(Boolean)
+    let prefix = ''
+    for (const part of parts) {
+      prefix = prefix ? `${prefix}/${part}` : part
+      expanded.value.add(prefix)
+    }
+  }
+
+  return {
+    toggleDir,
+    isExpanded,
+    autoExpandAncestors,
+  }
+}