feat: wip

packages/web-ui/src/sections/Document/Sidebar/Files/index.tsx

@@ -92,39 +92,36 @@ function FolderHeader({
   node,
   open,
   indentation,
+  onToggleOpen,
 }: {
   node: Node
   open: boolean
   indentation: IndentType[]
+  onToggleOpen: () => void
 }) {
   const inputRef = useRef<HTMLInputElement>(null)
   const nodeRef = useRef<HTMLDivElement>(null)
   const { onDeleteFolder } = useFileTreeContext()
-  const { addFolder, updateFolder, deleteTmpFolder } = useTempNodes((state) => ({
-    addFolder: state.addFolder,
-    updateFolder: state.updateFolder,
-    deleteTmpFolder: state.deleteTmpFolder,
-  }))
+  const { addFolder, updateFolder, deleteTmpFolder } = useTempNodes(
+    (state) => ({
+      addFolder: state.addFolder,
+      updateFolder: state.updateFolder,
+      deleteTmpFolder: state.deleteTmpFolder,
+    }),
+  )
   const { isEditing, error, onInputChange, onInputKeyDown } = useNodeValidator({
     node,
     nodeRef,
     inputRef,
     saveValue: ({ path }: { path: string }) => {
-      updateFolder({ path })
+      updateFolder({ path, id: node.id })
     },
     leaveWithoutSave: () => {
       deleteTmpFolder({ id: node.id })
     },
   })
-  const togglePath = useOpenPaths((state) => state.togglePath)
   const FolderIcon = open ? Icons.folderOpen : Icons.folderClose
   const ChevronIcon = open ? Icons.chevronDown : Icons.chevronRight
-  const onTooglePath = useCallback(() => {
-    const lastSegment = node.path.split('/').pop()
-    if (lastSegment === '' || lastSegment === ' ') return
-
-    togglePath(node.path)
-  }, [togglePath, node.path, node.isPersisted])
   const options = useMemo<MenuOption[]>(
     () => [
       {
@@ -135,7 +132,7 @@ function FolderHeader({
       },
       {
         label: 'New Prompt',
-        onClick: () => {},
+        onClick: () => { },
       },
       {
         label: 'Delete folder',
@@ -156,7 +153,7 @@ function FolderHeader({
     >
       <div className='flex-1 flex flex-row justify-between items-center gap-x-1'>
         <div
-          onClick={onTooglePath}
+          onClick={onToggleOpen}
           className='flex-1 flex flex-row items-center gap-x-1'
         >
           <div className='w-6 flex justify-center'>
@@ -252,16 +249,19 @@ function FileHeader({
 
 function NodeHeader({
   selected,
-  node,
   open,
+  onToggleOpen,
+  node,
   indentation,
 }: {
   selected: boolean
-  node: Node
   open: boolean
+  node: Node
   indentation: IndentType[]
+  onToggleOpen: () => void
 }) {
   if (node.isRoot) return null
+
   if (node.isFile) {
     return (
       <FileHeader
@@ -273,7 +273,14 @@ function NodeHeader({
     )
   }
 
-  return <FolderHeader node={node} open={open} indentation={indentation} />
+  return (
+    <FolderHeader
+      node={node}
+      open={open}
+      indentation={indentation}
+      onToggleOpen={onToggleOpen}
+    />
+  )
 }
 
 function FileNode({
@@ -287,19 +294,36 @@ function FileNode({
   const tmpNodes = allTmpFolders[node.path] ?? []
   const { currentPath } = useFileTreeContext()
   const [selected, setSelected] = useState(currentPath === node.path)
-  const openPaths = useOpenPaths((state) => state.openPaths)
-  const open = node.isRoot || openPaths.includes(node.path)
   const lastIdx = node.children.length - 1
+  const { togglePath, openPaths } = useOpenPaths((state) => ({
+    openPaths: state.openPaths,
+    togglePath: state.togglePath,
+  }))
+  const open = !!openPaths[node.path]
+  const onToggleOpen = useCallback(() => {
+    const lastSegment = node.path.split('/').pop()
+    if (lastSegment === '' || lastSegment === ' ') return
+
+    togglePath(node.path)
+  }, [togglePath, node.path, node.isPersisted])
+
   useEffect(() => {
     setSelected(currentPath === node.path)
   }, [currentPath])
+
+  if (node.path === 'some-folder/doc2') {
+    console.log("OPEN_PATHS", openPaths)
+    console.log('some-folder/doc2 isOpen', open)
+  }
+
   return (
     <div className='w-full'>
       <NodeHeader
         indentation={indentation}
         node={node}
         selected={selected}
         open={open}
+        onToggleOpen={onToggleOpen}
       />
 
       {node.isFile ? null : (

packages/web-ui/src/sections/Document/Sidebar/Files/useOpenPaths/index.test.ts

@@ -4,21 +4,20 @@ import { describe, expect, it } from 'vitest'
 import { useOpenPaths } from './index'
 
 describe('useOpenPaths', () => {
-  it('shout add the paths', async () => {
+  it.only('shout add the paths', async () => {
     const { result } = renderHook(() => useOpenPaths((state) => state))
     act(() => {
       result.current.togglePath('some-folder/nested-folder/doc1')
     })
 
-    expect(result.current.openPaths).toEqual([
-      '',
-      'some-folder',
-      'some-folder/nested-folder',
-      'some-folder/nested-folder/doc1',
-    ])
+    expect(result.current.openPaths).toEqual({
+      'some-folder': true,
+      'some-folder/nested-folder': true,
+      'some-folder/nested-folder/doc1': true,
+    })
   })
 
-  it('shout remove nested paths', async () => {
+  it('should close nested-folder', async () => {
     const { result } = renderHook(() => useOpenPaths((state) => state))
     act(() => {
       result.current.togglePath('some-folder/nested-folder/doc1')
@@ -27,6 +26,8 @@ describe('useOpenPaths', () => {
     act(() => {
       result.current.togglePath('some-folder/nested-folder')
     })
-    expect(result.current.openPaths).toEqual(['', 'some-folder'])
+    expect(result.current.openPaths).toEqual({
+      'some-folder': true,
+    })
   })
 })

packages/web-ui/src/sections/Document/Sidebar/Files/useOpenPaths/index.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 
 type OpenPathsState = {
-  openPaths: string[]
+  openPaths: { [key: string]: boolean }
   togglePath: (path: string) => void
 }
 
@@ -12,22 +12,35 @@ function checkIsPathOrDescendant(basePath: string, path: string) {
 }
 
 export const useOpenPaths = create<OpenPathsState>((set) => ({
-  openPaths: [''],
+  openPaths: {},
   togglePath: (path: string) => {
     set((state) => {
-      const isPathOpen = state.openPaths.includes(path)
+      const paths = state.openPaths
+      const isPathOpen = paths[path]
+
       if (!isPathOpen) {
         const segments = path.split('/')
-        const newPaths = segments.map((_, idx) =>
-          segments.slice(0, idx + 1).join('/'),
+        const newPaths = segments.reduce(
+          (acc, _, idx) => {
+            const newPath = segments.slice(0, idx + 1).join('/')
+            return { ...acc, [newPath]: true }
+          },
+          {} as { [key: string]: boolean },
         )
 
         return {
-          openPaths: [...state.openPaths, ...newPaths],
+          openPaths: { ...paths, ...newPaths },
         }
       } else {
-        const filteredPaths = state.openPaths.filter(
-          (p) => !checkIsPathOrDescendant(path, p),
+        const filteredPaths = Object.keys(paths).reduce(
+          (acc, p) => {
+            if (checkIsPathOrDescendant(path, p)) {
+              return acc
+            }
+
+            return { ...acc, [p]: true }
+          },
+          {} as { [key: string]: boolean },
         )
 
         return {