Save documents in DB from sidebar and make sidebar resizable

apps/web/src/actions/documents/destroyDocumentAction.ts

@@ -0,0 +1,35 @@
+'use server'
+
+import {
+  CommitsRepository,
+  destroyDocument,
+  DocumentVersionsRepository,
+} from '@latitude-data/core'
+import { z } from 'zod'
+
+import { withProject } from '../procedures'
+
+export const destroyDocumentAction = withProject
+  .createServerAction()
+  .input(z.object({ documentUuid: z.string(), commitId: z.number() }), {
+    type: 'json',
+  })
+  .handler(async ({ input, ctx }) => {
+    const commitsScope = new CommitsRepository(ctx.project.workspaceId)
+    const commit = await commitsScope
+      .getCommitById(input.commitId)
+      .then((r) => r.unwrap())
+    const docsScope = new DocumentVersionsRepository(ctx.project.workspaceId)
+    const document = await docsScope
+      .getDocumentByUuid({
+        commit,
+        documentUuid: input.documentUuid,
+      })
+      .then((r) => r.unwrap())
+    const result = await destroyDocument({
+      document,
+      commit,
+      workspaceId: ctx.project.workspaceId,
+    })
+    return result.unwrap()
+  })

apps/web/src/actions/documents/getDocumentsAtCommitAction.ts

@@ -0,0 +1,24 @@
+'use server'
+
+import {
+  CommitsRepository,
+  DocumentVersionsRepository,
+} from '@latitude-data/core'
+import { z } from 'zod'
+
+import { withProject } from '../procedures'
+
+export const getDocumentsAtCommitAction = withProject
+  .createServerAction()
+  .input(z.object({ commitId: z.number() }))
+  .handler(async ({ input, ctx }) => {
+    const commit = await new CommitsRepository(ctx.project.workspaceId)
+      .getCommitById(input.commitId)
+      .then((r) => r.unwrap())
+    const docsScope = new DocumentVersionsRepository(ctx.project.workspaceId)
+    const result = await docsScope.getDocumentsAtCommit({
+      commit,
+    })
+
+    return result.unwrap()
+  })

apps/web/src/app/(private)/_data-access/index.ts

@@ -4,11 +4,12 @@ import {
   Commit,
   CommitsRepository,
   DocumentVersionsRepository,
-  findWorkspaceFromCommit,
   NotFoundError,
   Project,
   ProjectsRepository,
 } from '@latitude-data/core'
+import { getCurrentUser } from '$/services/auth/getCurrentUser'
+import { notFound } from 'next/navigation'
 
 export const getFirstProject = cache(
   async ({ workspaceId }: { workspaceId: number }) => {
@@ -54,20 +55,28 @@ export const getDocumentByUuid = cache(
     documentUuid: string
     commit: Commit
   }) => {
-    const workspace = await findWorkspaceFromCommit(commit)
-    const scope = new DocumentVersionsRepository(workspace!.id)
+    const { workspace } = await getCurrentUser()
+    const scope = new DocumentVersionsRepository(workspace.id)
     const result = await scope.getDocumentAtCommit({ documentUuid, commit })
+    if (result.error) {
+      const error = result.error
+      if (error instanceof NotFoundError) {
+        return notFound()
+      }
+
+      throw error
+    }
 
     return result.unwrap()
   },
 )
 
 export const getDocumentByPath = cache(
   async ({ commit, path }: { commit: Commit; path: string }) => {
-    const workspace = await findWorkspaceFromCommit(commit)
+    const { workspace } = await getCurrentUser()
     const docsScope = new DocumentVersionsRepository(workspace!.id)
     const documents = await docsScope
-      .getDocumentsAtCommit(commit)
+      .getDocumentsAtCommit({ commit })
       .then((r) => r.unwrap())
 
     const document = documents.find((d) => d.path === path)

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

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react'
+
+import { DocumentVersion } from '@latitude-data/core'
+import { DocumentDetailWrapper } from '@latitude-data/web-ui'
+import { findCommit, findProject } from '$/app/(private)/_data-access'
+import { getCurrentUser } from '$/services/auth/getCurrentUser'
+
+import Sidebar from '../Sidebar'
+
+export default async function DocumentsLayout({
+  children,
+  document,
+  commitUuid,
+  projectId,
+}: {
+  children: ReactNode
+  document?: DocumentVersion
+  projectId: number
+  commitUuid: string
+}) {
+  const session = await getCurrentUser()
+  const project = await findProject({
+    projectId,
+    workspaceId: session.workspace.id,
+  })
+  const commit = await findCommit({
+    project,
+    uuid: commitUuid,
+  })
+  return (
+    <DocumentDetailWrapper>
+      <Sidebar commit={commit} currentDocument={document} />
+      {children}
+    </DocumentDetailWrapper>
+  )
+}

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

@@ -10,20 +10,20 @@ import {
   type SidebarDocument,
 } from '@latitude-data/web-ui'
 import { ROUTES } from '$/services/routes'
+import useDocumentVersions from '$/stores/documentVersions'
 import { useRouter } from 'next/navigation'
 
 export default function ClientFilesTree({
-  documents,
-  documentPath,
+  documents: serverDocuments,
+  currentDocument,
 }: {
   documents: SidebarDocument[]
-  documentPath: string | undefined
-  documentUuid: string | undefined
+  currentDocument: SidebarDocument | undefined
 }) {
   const router = useRouter()
   const { commit, isHead } = useCurrentCommit()
   const { project } = useCurrentProject()
-
+  const documentPath = currentDocument?.path
   const navigateToDocument = useCallback((documentUuid: string) => {
     router.push(
       ROUTES.projects
@@ -32,12 +32,17 @@ export default function ClientFilesTree({
         .documents.detail({ uuid: documentUuid }).root,
     )
   }, [])
-
+  const { createFile, destroyFile, documents } = useDocumentVersions(
+    { currentDocument },
+    { fallbackData: serverDocuments },
+  )
   return (
     <FilesTree
       documents={documents}
       currentPath={documentPath}
       navigateToDocument={navigateToDocument}
+      createFile={createFile}
+      destroyFile={destroyFile}
     />
   )
 }

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

@@ -1,35 +1,29 @@
-import { Suspense } from 'react'
-
 import {
   Commit,
+  DocumentVersion,
   DocumentVersionsRepository,
-  findWorkspaceFromCommit,
 } from '@latitude-data/core'
 import { DocumentSidebar } from '@latitude-data/web-ui'
+import { getCurrentUser } from '$/services/auth/getCurrentUser'
 
 import ClientFilesTree from './ClientFilesTree'
 
 export default async function Sidebar({
   commit,
-  documentUuid,
-  documentPath,
+  currentDocument,
 }: {
   commit: Commit
-  documentPath?: string
-  documentUuid?: string
+  currentDocument?: DocumentVersion
 }) {
-  const workspace = await findWorkspaceFromCommit(commit)
-  const docsScope = new DocumentVersionsRepository(workspace!.id)
-  const documents = await docsScope.getDocumentsAtCommit(commit)
+  const { workspace } = await getCurrentUser()
+  const docsScope = new DocumentVersionsRepository(workspace.id)
+  const documents = await docsScope.getDocumentsAtCommit({ commit })
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <DocumentSidebar>
-        <ClientFilesTree
-          documentPath={documentPath}
-          documents={documents.unwrap()}
-          documentUuid={documentUuid}
-        />
-      </DocumentSidebar>
-    </Suspense>
+    <DocumentSidebar>
+      <ClientFilesTree
+        currentDocument={currentDocument}
+        documents={documents.unwrap()}
+      />
+    </DocumentSidebar>
   )
 }

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

@@ -3,7 +3,11 @@
 import { Suspense, useCallback, useRef } from 'react'
 
 import { Commit, DocumentVersion } from '@latitude-data/core'
-import { DocumentEditor, useToast } from '@latitude-data/web-ui'
+import {
+  DocumentEditor,
+  DocumentTextEditorFallback,
+  useToast,
+} from '@latitude-data/web-ui'
 import { getDocumentContentByPathAction } from '$/actions/documents/getContentByPath'
 import { updateDocumentContentAction } from '$/actions/documents/updateContent'
 import { useServerAction } from 'zsa-react'
@@ -69,7 +73,7 @@ export default function ClientDocumentEditor({
   )
 
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<DocumentTextEditorFallback />}>
       <DocumentEditor
         document={document.content}
         saveDocumentContent={saveDocumentContent}

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

@@ -5,6 +5,7 @@ import {
 } from '$/app/(private)/_data-access'
 import { getCurrentUser } from '$/services/auth/getCurrentUser'
 
+import DocumentsLayout from '../../_components/DocumentsLayout'
 import ClientDocumentEditor from './_components/DocumentEditor'
 
 export default async function DocumentPage({
@@ -13,17 +14,25 @@ export default async function DocumentPage({
   params: { projectId: string; commitUuid: string; documentUuid: string }
 }) {
   const session = await getCurrentUser()
+  const projectId = Number(params.projectId)
+  const commintUuid = params.commitUuid
   const project = await findProject({
-    projectId: Number(params.projectId),
+    projectId,
     workspaceId: session.workspace.id,
   })
-  const commit = await findCommit({
-    project,
-    uuid: params.commitUuid,
-  })
+  const commit = await findCommit({ project, uuid: commintUuid })
   const document = await getDocumentByUuid({
     documentUuid: params.documentUuid,
     commit,
   })
-  return <ClientDocumentEditor commit={commit} document={document} />
+
+  return (
+    <DocumentsLayout
+      projectId={projectId}
+      commitUuid={commintUuid}
+      document={document}
+    >
+      <ClientDocumentEditor commit={commit} document={document} />
+    </DocumentsLayout>
+  )
 }

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

@@ -0,0 +1,15 @@
+import DocumentsLayout from '../_components/DocumentsLayout'
+
+export default async function DocumentsPage({
+  params,
+}: {
+  params: { projectId: string; commitUuid: string; documentUuid: string }
+}) {
+  const projectId = Number(params.projectId)
+  const commintUuid = params.commitUuid
+  return (
+    <DocumentsLayout projectId={projectId} commitUuid={commintUuid}>
+      <div>List of documents</div>
+    </DocumentsLayout>
+  )
+}

apps/web/src/app/api/projects/[projectId]/commits/[commitUuid]/documents/route.ts

@@ -23,7 +23,7 @@ export async function GET(
     const commit = await commitsScope
       .getCommitByUuid({ uuid: commitUuid, project })
       .then((r) => r.unwrap())
-    const documents = await scope.getDocumentsAtCommit(commit)
+    const documents = await scope.getDocumentsAtCommit({ commit })
 
     return NextResponse.json(documents.unwrap())
   } catch (err: unknown) {