added support for database (#15)

Author: macnev2013

CLAUDE.md

@@ -130,8 +130,7 @@ interface Block {
 ```
 
 Key files:
-- `components/editor/SnapDocsEditor.tsx` - Main editor with drag-and-drop
-- `components/editor/blocks/` - Individual block implementations
+- `components/editor/BlockNoteEditor.tsx` - Main editor using BlockNote
 - `lib/services/page-content.ts` - MongoDB content service
 
 ### Real-Time Collaboration
@@ -175,11 +174,12 @@ Required in `.env.local`:
 
 ## Development Tips
 
-### Adding New Block Types
-1. Add type to `BlockType` union in `types/index.ts`
-2. Create block component in `components/editor/blocks/`
-3. Update `BlockV2.tsx` to handle rendering
-4. Add to slash menu in `SlashMenu.tsx`
+### Editor
+The application uses BlockNote as the main editor, which provides:
+- Rich text editing with slash commands
+- Built-in block types (headings, lists, tables, etc.)
+- File uploads and media embedding
+- Real-time collaboration support
 
 ### Database Operations
 ```typescript

app/(protected)/ClientLayout.tsx

@@ -1,11 +1,9 @@
 'use client'
 
-import { SocketProvider } from '@/lib/socket/client'
-
 export function ClientLayout({ children }: { children: React.ReactNode }) {
   return (
-    <SocketProvider>
+    <>
       {children}
-    </SocketProvider>
+    </>
   )
 }

app/(protected)/workspace/[workspaceId]/database/create/CreateDatabasePage.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { CreateDatabaseDialog } from '@/components/database'
+import { Button } from '@/components/ui/button'
+import { ArrowLeft, Database } from 'lucide-react'
+import Link from 'next/link'
+import toast from 'react-hot-toast'
+
+interface CreateDatabasePageProps {
+  workspaceId: string
+  workspace: {
+    id: string
+    name: string
+    slug: string
+  }
+  user: {
+    id: string
+    email: string
+    name?: string | null
+  }
+}
+
+export default function CreateDatabasePage({ workspaceId, workspace, user }: CreateDatabasePageProps) {
+  const router = useRouter()
+  const [showDialog, setShowDialog] = useState(true)
+
+  const handleCreateDatabase = async (database: any) => {
+    toast.success('Database created successfully!')
+    router.push(`/workspace/${workspaceId}/database/${database.id}`)
+  }
+
+  const handleCancel = () => {
+    router.push(`/workspace/${workspaceId}`)
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="mb-6">
+          <Link href={`/workspace/${workspaceId}`}>
+            <Button variant="ghost" size="sm" className="mb-4">
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Back to workspace
+            </Button>
+          </Link>
+          
+          <div className="flex items-center gap-3">
+            <Database className="w-8 h-8 text-gray-600" />
+            <h1 className="text-3xl font-bold">Create New Database</h1>
+          </div>
+          <p className="text-gray-600 mt-2">
+            Create a structured database to organize and manage your data
+          </p>
+        </div>
+
+        <CreateDatabaseDialog
+          open={showDialog}
+          onOpenChange={(open) => {
+            if (!open) handleCancel()
+          }}
+          workspaceId={workspaceId}
+          onCreateDatabase={handleCreateDatabase}
+        />
+      </div>
+    </div>
+  )
+}

app/(protected)/workspace/[workspaceId]/database/create/page.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { redirect } from 'next/navigation'
+import { getCurrentUser } from '@/lib/auth'
+import { prisma } from '@/lib/db/prisma'
+import { generateId } from '@/lib/utils/id'
+import CreateDatabasePage from './CreateDatabasePage'
+
+interface CreateDatabasePageProps {
+  params: Promise<{
+    workspaceId: string
+  }>
+}
+
+export default async function CreateDatabase({ params }: CreateDatabasePageProps) {
+  const user = await getCurrentUser()
+  if (!user) {
+    redirect('/login')
+  }
+
+  const resolvedParams = await params
+
+  // Check if user is a member of the workspace
+  const workspaceMember = await prisma.workspaceMember.findUnique({
+    where: {
+      userId_workspaceId: {
+        userId: user.id,
+        workspaceId: resolvedParams.workspaceId
+      }
+    }
+  })
+
+  if (!workspaceMember) {
+    redirect(`/workspace/${resolvedParams.workspaceId}`)
+  }
+
+  const workspace = await prisma.workspace.findUnique({
+    where: { id: resolvedParams.workspaceId },
+    select: { id: true, name: true, slug: true }
+  })
+
+  if (!workspace) {
+    redirect('/')
+  }
+
+  return (
+    <CreateDatabasePage
+      workspaceId={resolvedParams.workspaceId}
+      workspace={workspace}
+      user={user}
+    />
+  )
+}

app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx

@@ -7,7 +7,7 @@ import dynamic from 'next/dynamic'
 import { SnapDocsPageHeader } from '@/components/page/snapdocs-page-header'
 import { cn } from '@/lib/utils'
 import toast from 'react-hot-toast'
-import { useSocket } from '@/lib/socket/client'
+// import { useSocket } from '@/lib/socket/client' // Removed - using Yjs collaboration now
 
 // Dynamically import BlockNoteEditor to avoid SSR hydration issues
 const BlockNoteEditor = dynamic(
@@ -65,7 +65,7 @@ interface PageEditorProps {
 
 export default function PageEditorV2({ page, initialContent, user }: PageEditorProps) {
   const router = useRouter()
-  const { isConnected, joinPage, leavePage } = useSocket()
+  // const { isConnected, joinPage, leavePage } = useSocket() // Removed - using Yjs collaboration now
   const [title, setTitle] = useState(page.title || '')
   const [icon, setIcon] = useState(page.icon || '')
   const [coverImage, setCoverImage] = useState(page.coverImage || '')
@@ -78,22 +78,8 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
 
   const initialBlocks = initialContent?.blocks || []
 
-  // Join the page room for real-time collaboration
-  useEffect(() => {
-    if (isConnected && user) {
-      joinPage(page.id, page.workspaceId, {
-        id: user.id,
-        name: user.name || 'Anonymous',
-        email: user.email || '',
-        avatarUrl: null
-      })
-    }
-    
-    // Clean up when leaving the page
-    return () => {
-      leavePage()
-    }
-  }, [isConnected, page.id, page.workspaceId, user, joinPage, leavePage])
+  // Yjs collaboration is now handled directly in BlockNoteEditor component
+  // No need for Socket.io room joining
 
 
   // Auto-resize title textarea

app/api/databases/[databaseId]/route.ts

@@ -133,6 +133,71 @@ export async function PUT(
   }
 }
 
+// PATCH /api/databases/[databaseId] - Partial update database
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ databaseId: string }> }
+) {
+  try {
+    const session = await getServerSession(authOptions)
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const resolvedParams = await params
+    const body = await request.json()
+
+    // Check database exists and user has access
+    const database = await prisma.database.findUnique({
+      where: {
+        id: resolvedParams.databaseId
+      },
+      include: {
+        workspace: {
+          include: {
+            members: {
+              where: {
+                userId: session.user.id
+              }
+            }
+          }
+        }
+      }
+    })
+
+    if (!database) {
+      return NextResponse.json({ error: 'Database not found' }, { status: 404 })
+    }
+
+    if (!database.workspace.members.length) {
+      return NextResponse.json({ error: 'Access denied' }, { status: 403 })
+    }
+
+    const updatedDatabase = await prisma.database.update({
+      where: {
+        id: resolvedParams.databaseId
+      },
+      data: body,
+      include: {
+        views: true,
+        rows: {
+          orderBy: {
+            order: 'asc'
+          }
+        }
+      }
+    })
+
+    return NextResponse.json(updatedDatabase)
+  } catch (error) {
+    console.error('Error updating database:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
+
 // DELETE /api/databases/[databaseId] - Delete database
 export async function DELETE(
   request: NextRequest,

app/globals.css

@@ -126,48 +126,6 @@
   @apply relative min-h-full;
 }
 
-/* BlockV2 System - Clean hover area and handle positioning */
-.block-wrapper {
-  @apply relative;
-}
-
-/* Extend hover area to include the handle space */
-.block-wrapper::before {
-  content: '';
-  position: absolute;
-  left: -3rem; /* Mobile: 48px for handles */
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-  z-index: 1;
-}
-
-@media (min-width: 768px) {
-  .block-wrapper::before {
-    left: -4rem; /* Desktop: 64px for handles */
-  }
-}
-
-/* Block content area - properly centered */
-.block-content {
-  @apply relative;
-  /* Ensure content doesn't shift when handles appear */
-  margin-left: 0;
-}
-
-/* Handle positioning with negative margins - doesn't affect content flow */
-.block-wrapper .absolute.-left-12 {
-  /* Mobile handle position */
-  left: -3rem;
-}
-
-@media (min-width: 768px) {
-  .block-wrapper .absolute.-left-16 {
-    /* Desktop handle position */
-    left: -4rem;
-  }
-}
 
 /* Responsive typography */
 @layer utilities {