Styles for Document file tree

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/_components/Sidebar/index.tsx

@@ -0,0 +1,38 @@
+import { Suspense } from 'react'
+
+import { DocumentSidebar, FilesTree } from '@latitude-data/web-ui'
+
+const documents = [
+  { path: 'Documents/Intro', doumentUuid: '1' },
+  {
+    path: 'Documents/Sumaries/Product/Prompts/Coms Summaries',
+    doumentUuid: '2',
+  },
+  {
+    path: 'Documents/Sumaries/Product/Prompts/TheBRo',
+    doumentUuid: '2bro',
+  },
+  {
+    path: 'Documents/Sumaries/file2',
+    doumentUuid: '33',
+  },
+  {
+    path: 'Documents/Sumaries/Product/file3',
+    doumentUuid: '43',
+  },
+  { path: 'Zonboaring/doc5', doumentUuid: '5' },
+  { path: 'Onboarding/doc3', doumentUuid: '3' },
+  { path: 'P_Bording/Nested/doc4', doumentUuid: '4' },
+  { path: 'b_doc_6', doumentUuid: '6' },
+  { path: 'a_doc_7', doumentUuid: '7' },
+]
+
+export default async function Sidebar() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <DocumentSidebar>
+        <FilesTree documents={documents} currentDocumentUuid='2' />
+      </DocumentSidebar>
+    </Suspense>
+  )
+}

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/layout.tsx

@@ -64,13 +64,7 @@ export default async function CommitLayout({
             },
           ]}
         >
-          <main className='flex flex-row w-full'>
-            <div className='w-[280px]'>
-              {/* TODO: commented out until fixed toTree methods to new path schema */}
-              {/* <Sidebar commitUuid={commit.uuid} projectId={project.id} /> */}
-            </div>
-            <div className='flex-1'>{children}</div>
-          </main>
+          {children}
         </AppLayout>
       </CommitProvider>
     </ProjectProvider>

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/page.tsx

@@ -1,5 +1,14 @@
+import { DocumentDetailWrapper } from '@latitude-data/web-ui'
+
+import Sidebar from './_components/Sidebar'
+
 export const dynamic = 'force-dynamic'
 
 export default async function CommitRoot() {
-  return <div>Commits home</div>
+  return (
+    <DocumentDetailWrapper>
+      <Sidebar />
+      <div className='p-32'>Main content. Remove Tailwind Styles from here</div>
+    </DocumentDetailWrapper>
+  )
 }

packages/web-ui/src/ds/atoms/Icons/index.tsx

@@ -1,4 +1,12 @@
-import { Copy, type LucideIcon } from 'lucide-react'
+import {
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  File,
+  FolderClosed,
+  FolderOpen,
+  type LucideIcon,
+} from 'lucide-react'
 
 import { LatitudeLogo, LatitudeLogoMonochrome } from './custom-icons'
 
@@ -7,5 +15,10 @@ export type Icon = LucideIcon
 export const Icons = {
   logo: LatitudeLogo,
   logoMonochrome: LatitudeLogoMonochrome,
+  chevronDown: ChevronDown,
+  chevronRight: ChevronRight,
+  folderClose: FolderClosed,
+  file: File,
+  folderOpen: FolderOpen,
   clipboard: Copy,
 }

packages/web-ui/src/index.ts

@@ -1,5 +1,8 @@
 export * from './ds/tokens'
 export * from './ds/atoms'
 export * from './ds/molecules'
-export * from './sections'
 export * from './providers'
+
+export { default as DocumentSidebar } from './sections/Document/Sidebar'
+export { default as DocumentDetailWrapper } from './sections/Document/DetailWrapper'
+export * from './sections/Document/Sidebar/Files'

packages/web-ui/src/layouts/AppLayout/index.tsx

@@ -20,7 +20,7 @@ export default function AppLayout({
         navigationLinks={navigationLinks}
         currentUser={currentUser}
       />
-      {children}
+      <main className='flex flex-row w-full h-full'>{children}</main>
     </div>
   )
 }

packages/web-ui/src/sections/Document/DetailWrapper/index.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+export default async function DocumentDetailWrapper({
+  children,
+}: {
+  children: ReactNode
+}) {
+  return <div className='w-full flex flex-row'>{children}</div>
+}

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

@@ -0,0 +1,210 @@
+'use client'
+
+import { ReactNode, useState } from 'react'
+
+import { Icons } from '$ui/ds/atoms/Icons'
+import Text from '$ui/ds/atoms/Text'
+import { ReactStateDispatch } from '$ui/lib/commonTypes'
+import { cn } from '$ui/lib/utils'
+
+import { Node, SidebarDocument, useTree } from './useTree'
+
+const ICON_CLASS = 'w-6 h-6 text-muted-foreground'
+
+type IndentType = { isLast: boolean }
+function IndentationBar({
+  indentation,
+  open,
+}: {
+  open: boolean
+  indentation: IndentType[]
+}) {
+  return indentation.map((indent, index) => {
+    const anyNextIndentIsNotLast = !!indentation
+      .slice(index)
+      .find((i) => !i.isLast)
+    const showBorder = anyNextIndentIsNotLast ? false : indent.isLast
+    return (
+      <div key={index} className='h-6 w-6'>
+        {index > 0 ? (
+          <div className='-ml-px relative w-6 h-full flex justify-center'>
+            {!open && showBorder ? (
+              <div className='relative -mt-1'>
+                <div className='border-l h-3' />
+                <div className='absolute top-3 border-l border-b h-2 w-2 rounded-bl-sm' />
+              </div>
+            ) : (
+              <div className='bg-border w-px h-8 -mt-1' />
+            )}
+          </div>
+        ) : null}
+      </div>
+    )
+  })
+}
+
+function NodeHeaderWrapper({
+  open,
+  node,
+  children,
+  indentation,
+}: {
+  open: boolean
+  children: ReactNode
+  node: Node
+  indentation: IndentType[]
+}) {
+  return (
+    <div
+      className={cn('flex flex-row my-0.5 cursor-pointer', {
+        'hover:bg-muted': !node.selected,
+        'bg-accent': node.selected,
+      })}
+    >
+      <IndentationBar indentation={indentation} open={open} />
+      {children}
+    </div>
+  )
+}
+
+function FolderHeader({
+  node,
+  open,
+  onClick,
+  indentation,
+}: {
+  isLast: boolean
+  node: Node
+  open: boolean
+  onClick: ReactStateDispatch<boolean>
+  indentation: IndentType[]
+}) {
+  const FolderIcon = open ? Icons.folderOpen : Icons.folderClose
+  const ChevronIcon = open ? Icons.chevronDown : Icons.chevronRight
+  return (
+    <NodeHeaderWrapper open={open} node={node} indentation={indentation}>
+      <div
+        onClick={() => onClick(!open)}
+        className='flex flex-row items-center gap-x-1'
+      >
+        <div className='w-6 flex justify-center'>
+          <ChevronIcon className={cn(ICON_CLASS, 'h-4 w-4')} />
+        </div>
+        <FolderIcon className={ICON_CLASS} />
+        <Text.H5M userSelect={false}>{node.name}</Text.H5M>
+      </div>
+    </NodeHeaderWrapper>
+  )
+}
+
+function FileHeader({
+  open,
+  node,
+  indentation,
+}: {
+  open: boolean
+  node: Node
+  indentation: IndentType[]
+}) {
+  return (
+    <NodeHeaderWrapper open={open} node={node} indentation={indentation}>
+      <div className='flex flex-row items-center gap-x-1 py-0.5'>
+        <Icons.file
+          className={cn(ICON_CLASS, {
+            'text-accent-foreground': node.selected,
+          })}
+        />
+        <Text.H5M
+          userSelect={false}
+          color={node.selected ? 'accentForeground' : 'foreground'}
+        >
+          {node.name}
+        </Text.H5M>
+      </div>
+    </NodeHeaderWrapper>
+  )
+}
+
+function NodeHeader({
+  isLast,
+  node,
+  open,
+  onClick,
+  indentation,
+}: {
+  isLast: boolean
+  node: Node
+  open: boolean
+  onClick: ReactStateDispatch<boolean>
+  indentation: IndentType[]
+}) {
+  if (node.isRoot) return null
+  if (node.isFile) {
+    return <FileHeader open={open} node={node} indentation={indentation} />
+  }
+
+  return (
+    <FolderHeader
+      isLast={isLast}
+      node={node}
+      open={open}
+      onClick={onClick}
+      indentation={indentation}
+    />
+  )
+}
+
+function FileNode({
+  isLast = false,
+  node,
+  indentation = [],
+}: {
+  node: Node
+  isLast?: boolean
+  indentation?: IndentType[]
+}) {
+  const [open, setOpen] = useState(node.containsSelected)
+  const lastIdx = node.children.length - 1
+  return (
+    <div className='w-full'>
+      <NodeHeader
+        isLast={isLast}
+        indentation={indentation}
+        node={node}
+        open={open}
+        onClick={setOpen}
+      />
+
+      {node.isFile ? null : (
+        <ul
+          className={cn('flex flex-col', {
+            hidden: !open && !node.isRoot,
+          })}
+        >
+          {node.children.map((node, idx) => (
+            <li key={node.id}>
+              <FileNode
+                indentation={[...indentation, { isLast: idx === lastIdx }]}
+                node={node}
+                isLast={idx === lastIdx}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export function FilesTree({
+  documents,
+  currentDocumentUuid,
+}: {
+  documents: SidebarDocument[]
+  currentDocumentUuid: string | undefined
+}) {
+  const rootNode = useTree({ documents, currentDocumentUuid })
+  console.log('ROOT NODE', rootNode)
+
+  return <FileNode node={rootNode} />
+}